Skip to content

Commit

Permalink
created Leaf\UI\Template and Leaf\UI\WynterCSS
Browse files Browse the repository at this point in the history
  • Loading branch information
mychidarko committed May 23, 2020
1 parent e5c32d5 commit 6501424
Showing 14 changed files with 5,797 additions and 22 deletions.
Binary file added 1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added 2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
111 changes: 106 additions & 5 deletions example.php
Original file line number Diff line number Diff line change
@@ -1,10 +1,111 @@
<?php
require "./src/UI.php";
require "./src/UI/Template.php";
require "./src/UI/WynterCSS.php";

$ui = new Leaf\UI;
// $ui = new Leaf\UI;

$ui::render((
$ui::body([
$ui::h2("This is h2")
// $ui::render((
// $ui::body([
// $ui::h2("This is h2")
// ])
// ));

// $ui = new \Leaf\UI\Template;

// $arr = [
// ["name" => "Michael"],
// ["name" => "Seth"],
// ["name" => "Mychi"],
// ["name" => "Darko"],
// ["name" => "Duodu"]
// ];

// $c = 3;

// $ui::render((
// $ui::_template("Title Here", [
// $ui::_row([
// $ui::loop($arr, function($value) use($ui, $c) {
// return (
// $ui::div([], [
// $ui::h2($value["name"]),
// $ui::p("Something Really Interesting"),
// $ui::if($c == 2, (
// $ui::div([], "This is an if statement")
// ), $ui::unless($c == 3, (
// $ui::div([], "This is an else if block")
// ), (
// $ui::div([], "This is the else block")
// ))),
// $ui::button("Click Me!!")
// ])
// );
// }),
// ]),
// ])
// ));

$ui = new Leaf\UI\WynterCSS;

$html = $ui::body([
$ui::_container([
$ui::h2("Avatar"),
$ui::_avatar("", "MD", ["size" => "md", "presence" => "away", "badge" => "700"]),
$ui::hr(),
$ui::h2("Badge"),
$ui::_badge("8000", [], "Notifications"),
$ui::hr(),
$ui::h2("Breadcrumb"),
$ui::_breadcrumb([
"profile" => "/profile",
"settings" => "/profile/settings",
"security" => "/profile/settings/security"
]),
$ui::hr(),
$ui::h2("Buttons"),
$ui::_button("Wynter Button", ["wyn:loading" => "true"]),
$ui::_button("Primary Button", ["variant" => "primary"]),
$ui::_button("Link Button", ["variant" => "link"]),
$ui::_btnGroup([
$ui::_button("Button 1"),
$ui::_button("Button 2"),
$ui::_button("Button 3"),
$ui::_button("Button 4"),
]),
$ui::_fab(["icon" => "people"]),
$ui::hr(),
$ui::h2("Cards"),
$ui::_card([], [
$ui::_container([
$ui::div([], "Something Interesting")
])
]),
$ui::_xCard(["style" => "width: 300px"], [
"image" => "./1.jpg",
"title" => "Something",
"subtitle" => "Subtitle",
"body" => "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus ratione cupiditate officia animi itaque esse saepe et officiis possimus dolorem, a architecto facere veritatis adipisci sed eos aliquam alias vitae.",
"footer" => $ui::div([], [
$ui::_button("Button", ["variant" => "primary"])
]),
]),
$ui::hr(),
$ui::h2("Chips"),
$ui::_chip("Something"),
$ui::_chip("Food", [
$ui::a(["href" => "#", "wyn:btn-clear" => "", "aria-label" => "Close", "role" => "button"])
]),
$ui::_carousel([
$ui::_carouselItem("", "", $ui::img("./1.jpg", ["class" => "img-responsive rounded", "style" => "width: 100%;height: 100% !important;"])),
$ui::_carouselItem("", "", $ui::img("./2.jpg", ["class" => "img-responsive rounded", "style" => "width: 100%;height: 100% !important;"])),
$ui::_carouselItem("", "", $ui::img("./1.jpg", ["class" => "img-responsive rounded", "style" => "width: 100%;height: 100% !important;"])),
$ui::_carouselItem("", "", $ui::img("./2.jpg", ["class" => "img-responsive rounded", "style" => "width: 100%;height: 100% !important;"])),
]),
$ui::hr(),
$ui::br(),
$ui::br(),
])
));
]);

$ui::render($html);
37 changes: 37 additions & 0 deletions readme.md
Original file line number Diff line number Diff line change
@@ -17,3 +17,40 @@ This will install Leaf UI into your application. You don't have to worry about b
After this, you can use all of Leaf UI's methods and components.

View the [mini documentation here](//leafphp.netlify.app/#/2.1/views/ui/)

## Working With Templates

Templates provide a quick way to scaffold a Leaf UI without sweating the tiny details. To get started, simply swap out the main the `Leaf\UI` package for `Leaf\UI\Template`.

```php
use Leaf\UI\Template as UI;

UI::element(...);
```

```php
$ui = new Leaf\UI\Template;

$ui::element(...);
```

### Template Methods

#### _template

This method let's you create a plain HTML structure consisting which looks somewhat like this when rendered:

```html
<!Doctype html id="1590108145!Doctype html" />
<html id="1590108145html">
<head id="1590108145head">
<title id="1590108145title">{ Title Here }</title>
<meta name="viewport" content="width=device-width, initial-scale=1" id="1590108145meta" />
<link href="vendor/leafs/ui/src/UI/default/default.css" rel="stylesheet" id="1590108145link" />
{ Other Head Elements Here}
</head>
<body id="1590108145body">
{ Body Here }
</body>
</html>
```
94 changes: 77 additions & 17 deletions src/UI.php
Original file line number Diff line number Diff line change
@@ -4,10 +4,9 @@
/**
* Leaf UI [BETA]
* ---------------------
* Simple UI components without markup
* Leaf UI is a PHP library for building user interfaces.
*
* @version 1.0.0
* @since 2.1.0
* @author Michael Darko <mychi.darko@gmail.com>
*/
class UI {
@@ -66,7 +65,7 @@ public static function create_element(string $element, array $props = [], $child
return self::self_closing($element, $attributes, $id);
}

return "<$element $attributes id=\"$id\">$subs</$element>";
return "<$element id=\"$id\" $attributes>$subs</$element>";
}

/**
@@ -132,6 +131,44 @@ public static function make(string $name, callable $handler) {
}
}

/**
* Loop over an array of items
*
* @param array $array The array to loop through
* @param callable $handler Call back function to run per iteration
*/
public static function loop(array $array, callable $handler) {
$element = "";
if (is_callable($handler)) {
foreach ($array as $key => $value) {
$element .= call_user_func($handler, $value, $key);
}
}
return $element;
}

/**
* Create an if condition
*/
public static function if($condition, $element, $else = null) {
if ($condition) {
return $element;
} else {
return $else;
}
}

/**
* Create a negative if condition
*/
public static function unless(bool $condition, $element, $else = null) {
if (!$condition) {
return $element;
} else {
return $else;
}
}

/**
* Use a custom element
*
@@ -189,9 +226,9 @@ public static function custom(string $name, array $props = [], array $children =
/**
* Render a Leaf UI
*/
public static function render($element) {
public static function render($element, $inject = null) {
header("Content-Type: text/html");
echo $element;
echo $inject.$element;
}

public static function link(string $href, string $rel = "stylesheet", array $props = []) {
@@ -200,6 +237,10 @@ public static function link(string $href, string $rel = "stylesheet", array $pro
return self::create_element("link", $props, [], self::SINGLE_TAG);
}

public static function _vendor($file) {
return "vendor\\leafs\\ui\\src\\UI\\$file";
}

/**
* Import/Use a styleheet
*/
@@ -273,6 +314,14 @@ public static function body(array $children = [], array $props = []) {
return self::create_element("body", $props, $children);
}

public static function br(array $props = []) {
return self::create_element("br", $props, [], self::SINGLE_TAG);
}

public static function hr(array $props = []) {
return self::create_element("hr", $props, [], self::SINGLE_TAG);
}

public static function header(array $props = [], array $children = []) {
if (!isset($props["id"])) {
$id = time()."header";
@@ -297,11 +346,12 @@ public static function aside(array $props = [], array $children = []) {
return self::create_element("aside", $props, $children);
}

public static function img(array $props = []) {
public static function img(string $image, array $props = []) {
if (!isset($props["id"])) {
$id = time()."img";
$props["id"] = $id;
}
$props["src"] = $image;
return self::create_element("img", $props, [], self::SINGLE_TAG);
}

@@ -313,12 +363,12 @@ public static function figure(array $props = [], array $children = []) {
return self::create_element("figure", $props, $children);
}

public static function a(array $props = [], array $children = []) {
public static function a(array $props = [], $children = []) {
if (!isset($props["id"])) {
$id = time()."a";
$props["id"] = $id;
}
return self::create_element("a", $props, $children);
return self::create_element("a", $props, is_array($children) ? $children : [$children]);
}

public static function _link(array $props = [], array $children = []) {
@@ -333,20 +383,26 @@ public static function _link(array $props = [], array $children = []) {
// --------------------- HTML CONTAINER ELEMENTS -----------------------

/**
* HTML DIV Element
* HTML DIV Element
*
* @param array $props Element props
* @param string|array $children Children
*/
public static function div(array $props = [], array $children = []) {
public static function div(array $props = [], $children = []) {
if (!isset($props["id"])) {
$id = time()."div";
$props["id"] = $id;
}
return self::create_element("div", $props, $children);
return self::create_element("div", $props, is_array($children) ? $children : [$children]);
}

/**
* Custom div Element (padding container)
*
* @param string|array $children Children
* @param array $props Element props
*/
public static function _container(array $props = [], array $children = []) {
public static function _container($children, array $props = []) {
if (!isset($props["id"])) {
$id = time()."container";
$props["id"] = $id;
@@ -355,13 +411,13 @@ public static function _container(array $props = [], array $children = []) {
$props["style"] = "";
}
$props["style"] = "padding: 12px 25px; ".$props["style"];
return self::create_element("div", $props, $children);
return self::create_element("div", $props, is_array($children) ? $children : [$children]);
}

/**
* Custom div Element (flex row)
*/
public static function _row(array $props = [], array $children = []) {
public static function _row(array $children, array $props = []) {
if (!isset($props["id"])) {
$id = time()."div";
$props["id"] = $id;
@@ -376,7 +432,7 @@ public static function _row(array $props = [], array $children = []) {
/**
* Custom div Element (flex column)
*/
public static function _column(array $props = [], array $children = []) {
public static function _column(array $children, array $props = []) {
if (!isset($props["id"])) {
$id = time()."div";
$props["id"] = $id;
@@ -390,15 +446,19 @@ public static function _column(array $props = [], array $children = []) {

/**
* HTML Span Element
*
* @param array $props Element props
* @param string|array $children Children
*/
public static function span(array $props = [], array $children = []) {
public static function span(array $props = [], $children = []) {
if (!isset($props["id"])) {
$id = time()."span";
$props["id"] = $id;
}
return self::create_element("span", $props, $children);
return self::create_element("span", $props, is_array($children) ? $children : [$children]);
}


public static function section(array $props = [], array $children = []) {
if (!isset($props["id"])) {
$id = time()."section";
Loading

0 comments on commit 6501424

Please sign in to comment.