Merge pull request #11 from wireui/feature/buttons

feature/buttons

Author: ph7jack

.editorconfig

@@ -11,7 +11,7 @@ trim_trailing_whitespace = true
 [*.md]
 trim_trailing_whitespace = false
 
-[*.{yml,yaml}]
+[*.{yml,yaml,js}]
 indent_size = 2
 
 [docker-compose.yml]

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+vendor
+public/dist

.eslintrc

@@ -0,0 +1,93 @@
+{
+    "root": true,
+    "plugins": ["import"],
+    "extends": ["eslint:recommended"],
+    "parserOptions": {
+        "sourceType": "module",
+        "allowImportExportEverywhere": true
+    },
+    "ignorePatterns": ["node_modules/*", "public/dist/*", "vendor/*"],
+    "env": { "browser": true, "es6": true, "node": true },
+    "rules": {
+        "generator-star-spacing": "off",
+        "arrow-parens": "off",
+        "one-var": "off",
+        "no-console": "warn",
+        "no-debugger": "warn",
+
+        // Possible Errors
+        "no-extra-parens": ["error", "all", { "returnAssign": false }],
+        "import/first": "off",
+        "import/named": "error",
+        "import/namespace": "error",
+        "import/default": "error",
+        "import/export": "error",
+        "import/extensions": "off",
+        "import/no-unresolved": "off",
+        "import/no-extraneous-dependencies": "off",
+        "prefer-promise-reject-errors": "off",
+        "template-curly-spacing": "off",
+
+        // Best Practices
+        "eqeqeq": "error",
+        "no-invalid-this": "error",
+        "no-return-assign": ["error", "except-parens"],
+        "no-unused-expressions": ["error", { "allowTernary": true }],
+        "no-useless-concat": "error",
+        "no-useless-return": "error",
+
+        // Variable
+        "init-declarations": "error",
+        "no-use-before-define": "error",
+
+        // Stylistic Issues
+        "array-bracket-newline": [
+            "error",
+            { "multiline": true, "minItems": null }
+        ],
+        "array-bracket-spacing": "error",
+        "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
+        "block-spacing": "error",
+        "comma-dangle": "error",
+        "comma-spacing": "error",
+        "comma-style": "error",
+        "computed-property-spacing": "error",
+        "func-call-spacing": "error",
+        "implicit-arrow-linebreak": ["error", "beside"],
+        "indent": ["error", 2],
+        "keyword-spacing": "error",
+        "no-lonely-if": "error",
+        "no-mixed-operators": "error",
+        "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }],
+        "no-tabs": "error",
+        "no-unneeded-ternary": "error",
+        "no-whitespace-before-property": "error",
+        "nonblock-statement-body-position": "error",
+        "object-property-newline": [
+            "error",
+            { "allowAllPropertiesOnSameLine": true }
+        ],
+        "quote-props": ["error", "consistent"],
+        "quotes": ["error", "single"],
+        "semi": ["error", "never"],
+        "semi-spacing": "error",
+        "space-before-blocks": "error",
+        "space-before-function-paren": "error",
+        "space-in-parens": "error",
+        "space-infix-ops": "error",
+        "space-unary-ops": "error",
+        "padding-line-between-statements": [
+            "error",
+            { "blankLine": "always", "prev": "*", "next": "return" }
+        ],
+
+        // ES6
+        "arrow-spacing": "error",
+        "no-confusing-arrow": "error",
+        "no-duplicate-imports": "error",
+        "no-var": "error",
+        "object-shorthand": "error",
+        "prefer-const": "error",
+        "prefer-template": "error"
+    }
+}

.php-cs-fixer.php

@@ -1,15 +1,17 @@
 <?php
 
-use PhpCsFixer\Config;
-use PhpCsFixer\Finder;
+use PhpCsFixer\{Config, Finder};
 
 $rules = [
-    'align_multiline_comment' => false,
-    'array_indentation'       => true,
-    'array_syntax'            => ['syntax' => 'short'],
-    'binary_operator_spaces'  => [
-        'default'   => 'align_single_space_minimal',
-        'operators' => ['=>' => 'align_single_space'],
+    '@PSR2'                       => true,
+    'group_import'                => true,
+    'align_multiline_comment'     => false,
+    'single_import_per_statement' => false,
+    'array_indentation'           => true,
+    'array_syntax'                => ['syntax' => 'short'],
+    'binary_operator_spaces'      => [
+        'default'   => 'align_single_space',
+        'operators' => ['=>' => 'align_single_space_minimal'],
     ],
     'blank_line_after_namespace'   => true,
     'blank_line_after_opening_tag' => false,
@@ -20,8 +22,10 @@
         'position_after_control_structures'           => 'same',
         'position_after_functions_and_oop_constructs' => 'next',
     ],
-    'cast_spaces'                 => ['space' => 'none'],
-    'class_attributes_separation' => true,
+    'lowercase_cast'              => true,
+    'no_short_bool_cast'          => true,
+    'cast_spaces'                 => ['space' => 'single'],
+    'class_attributes_separation' => ['elements' => ['property' => 'one', 'method' => 'one']],
     'no_unused_imports'           => true,
     'class_keyword_remove'        => false,
     'combine_consecutive_issets'  => false,
@@ -65,6 +69,7 @@
     'whitespace_after_comma_in_array'             => true,
     'trim_array_spaces'                           => true,
     'unary_operator_spaces'                       => true,
+    'php_unit_method_casing'                      => false,
 ];
 
 $finder = Finder::create();
@@ -73,13 +78,8 @@
     __DIR__ . '/app',
 ]);
 
-$config = new Config();
-
-$config->setIndent('    ');
-
-$config
+return (new Config())
+    ->setIndent('    ')
     ->setRiskyAllowed(false)
     ->setRules($rules)
     ->setFinder($finder);
-
-return $config;

README.md

@@ -1,6 +1,6 @@
 # WireUI - Docs
 
-Page for [WireUI](https://github.com/wireui/wireui) documentation. 
+Page for [WireUI](https://github.com/wireui/wireui) documentation.
 
 Visit at: [https://livewire-wireui.com/](https://livewire-wireui.com/)
 
@@ -12,7 +12,7 @@ Thank you for your interest in contributing! 😊
 
 Please follow the steps below to run this project locally:
 
-### Get started 🚀 
+### Get started 🚀
 
 #### Requirements
 
@@ -78,25 +78,26 @@ You are welcome to explore the code in `resources/views/livewire/` folder to vie
 
 Code snippets should always be included using the `<x-code>` tag.
 
-The mandatory attributes are `language`, for the code language and the `code`, for the code itself.
+The mandatory attributes are `language`, for the code language and the `contents`, for the code itself. Or use a `slot` instead of the `contents` attribute.
+
 
 For example:
 
 ```php
 //...
-<x-code language="bash" :code="<<<EOT
-php artisan vendor:publish --tag='wireui.config'
-php artisan vendor:publish --tag='wireui.resources'
-php artisan vendor:publish --tag='wireui.lang'
-EOT" />
+<x-code language="bash">
+    php artisan vendor:publish --tag='wireui.config'
+    php artisan vendor:publish --tag='wireui.resources'
+    php artisan vendor:publish --tag='wireui.lang'
+</x-code>
 ```
 
 A copy button is loaded by default, to suppress the button, add the attribute: `copy="false"`.
 
-Likewise, line numbers are displayed by default. To remove the numbers, add the attribute: `line-number="false`.
+Likewise, line numbers are displayed by default. To remove the numbers, add the attribute: `:line-numbers="false".
 
 ```php
-<x-code copy="false" line-numbers="false" language="shell" :code="Command exit with error error code xyz...." />
+<x-code no-copy :line-numbers="false" language="shell" :contents="Command exit with error error code xyz...." />
 ```
 
 <br/>
@@ -119,18 +120,17 @@ Run `npm install` to install all to install all dependencies.
 
 #### Boxes
 
-Sometimes it's crucial to highlight information such as a mandatory step or a compatibility issue. In these situations, situations, you should use the `<x-box attention>` tag, which will produce a yellow "attention" box.
+Sometimes it's crucial to highlight information such as a mandatory step or a compatibility issue. In these situations, situations, you should use the `<x-alerts.warning>` tag, which will produce a yellow "attention" box.
 
 For example:
 
 ```php
-<x-box attention>If you are using FooJS 1.0, you must configure bar=null before update.</x-box>
+<x-alerts.warning>If you are using FooJS 1.0, you must configure bar=null before update.</x-alerts.warning>
 ```
-
-In addition, if you need to provide a friendly message, a tip, or extra information, you should use of the `<x-box info>` tag, which produces a blue info box.
+In addition, if you need to provide a friendly message, a tip, or extra information, you should use of the `<x-alerts.info>` tag, which produces a blue info box.
 
 ```php
-<x-box info>Read more about supported formats <a href="#formats">here</a>.</x-box>
+<x-alerts.info>Read more about supported formats <a href="#formats">here.</a></x-alerts.info>
 ```
 
 <br/>

app/Http/Livewire/Docs/Buttons/Playground.php

@@ -0,0 +1,63 @@
+<?php
+
+namespace App\Http\Livewire\Docs\Buttons;
+
+use Illuminate\Support\Facades\File;
+use Illuminate\Support\{Collection, Str};
+use Livewire\Component;
+use Symfony\Component\Finder\SplFileInfo;
+
+/** @property-read string $buttonCode */
+class Playground extends Component
+{
+    public ?string $label = 'Button';
+
+    public string $style = 'default';
+
+    public string $color = 'default';
+
+    public string $size = 'default';
+
+    public ?string $icon = null;
+
+    public ?string $rightIcon = null;
+
+    public function getButtonCodeProperty(): string
+    {
+        $attributes = collect([
+            'label'     => ['allow-default' => true,  'default' => 'Button',  'attr' => 'label'],
+            'style'     => ['allow-default' => false, 'default' => 'default', 'attr' => false],
+            'color'     => ['allow-default' => false, 'default' => 'default', 'attr' => false],
+            'size'      => ['allow-default' => false, 'default' => 'default', 'attr' => false],
+            'icon'      => ['allow-default' => false, 'default' => null,      'attr' => 'icon'],
+            'rightIcon' => ['allow-default' => false, 'default' => null,      'attr' => 'right-icon'],
+        ])->filter(function (array $options, string $attribute) {
+            if (!$this->{$attribute}) {
+                return false;
+            }
+
+            return $options['allow-default'] || $this->{$attribute} !== $options['default'];
+        })->map(function (array $options, string $attribute) {
+            return $options['attr']
+                ? "{$options['attr']}=\"{$this->{$attribute}}\""
+                : $this->{$attribute};
+        })->implode(' ');
+
+        return "<x-button {$attributes} />";
+    }
+
+    public function getIconsProperty(): Collection
+    {
+        $path = base_path('vendor/wireui/wireui/resources/views/components/icons/outline');
+
+        return collect(File::files($path))
+            ->map(function (SplFileInfo $file) {
+                return Str::before($file->getFilename(), '.blade.php');
+            })->sortBy('name');
+    }
+
+    public function render()
+    {
+        return view('livewire.docs.buttons.playground');
+    }
+}