Custom Viewports (#90)

* Add support for custom viewports and generating them from a tailwind config

* Update defaults and remove console log

* tidy up

* Update to use tailwind config by default. Falls back to false if no tailwind config found

Author: mrtimbrook

Diff for: .storybook/preview.js

@@ -12,8 +12,13 @@ let setDocsTheme = (configDocsTheme) => {
   }
 };
 
+const customViewports = JSON.parse(process.env.STORYBOOK_VIEWPORTS);
+
 const preview = {
   parameters: {
+    viewport: {
+      viewports: customViewports
+    },
     controls: {
       expanded: JSON.parse(process.env.STORYBOOK_EXPANDED_CONTROLS)
     },

Diff for: README.md

@@ -262,6 +262,21 @@ An array of custom components used by Blast.
 
 Default: `[ 'docs-page' => Components\DocsPages\DocsPage::class ]`
 
+#### `storybook_viewports`
+
+Configure custom viewports in the Storybook preview toolbar.
+
+It supports an array with the structure found [in the Storybook docs](https://storybook.js.org/docs/react/essentials/viewport#add-new-devices) and it can also use your Tailwind config to generate the viewports for you by setting the value to `'tailwind'`. Defaults to `'tailwind'` but fails silently if blast can't find a Tailwind config. The viewports can be disabled by setting to `false`.
+
+It supports the various ways you can define breakpoints in Tailwind using these rules:
+
+-   If the value is a string, it uses that
+-   If the value is an array with only a `min` **or** only a `max` it will use that value
+-   If the value is an array with both a `min` **and** `max` value it will use the `min` value
+-   `raw` values will be ignored
+
+Default: `'tailwind'`
+
 ## Story Configuration
 
 There are certain Storybook elements you can configure from within your story blade files. You can do this by adding the `@storybook` directive to the top of your files:
@@ -346,7 +361,7 @@ It can be run alongside the `php artisan blast:launch` task or you can run the d
 
 ## Presetting story options
 
-You can create preset options for components to reuse throughtout your storybook instance.
+You can create preset options for components to reuse throughout your storybook instance.
 
 The preset options use the same structure as Laravel config files:
 

Diff for: config/blast.php

@@ -88,6 +88,8 @@
     // More info - https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories
     'storybook_sort_order' => [],
 
+    'storybook_viewports' => 'tailwind',
+
     // set the background color of the storybook canvas area
     'canvas_bg_color' => '',
 

Diff for: src/Commands/Launch.php

@@ -2,9 +2,11 @@
 
 namespace A17\Blast\Commands;
 
+use Illuminate\Support\Arr;
+use Illuminate\Support\Str;
+use A17\Blast\Traits\Helpers;
 use Illuminate\Console\Command;
 use Illuminate\Filesystem\Filesystem;
-use A17\Blast\Traits\Helpers;
 
 class Launch extends Command
 {
@@ -53,6 +55,7 @@ public function __construct(Filesystem $filesystem)
             [],
         );
         $this->storybookSortOrder = config('blast.storybook_sort_order', []);
+        $this->storybookViewports = config('blast.storybook_viewports', false);
     }
 
     /*
@@ -140,9 +143,57 @@ public function handle()
                 $this->storybookGlobalTypes,
             ),
             'STORYBOOK_SORT_ORDER' => json_encode($this->storybookSortOrder),
+            'STORYBOOK_VIEWPORTS' => json_encode(
+                $this->buildTailwindViewports(),
+            ),
             'LIBSTORYPATH' => $this->vendorPath . '/stories',
             'PROJECTPATH' => base_path(),
             'COMPONENTPATH' => base_path('resources/views/stories'),
         ]);
     }
+
+    private function buildTailwindViewports()
+    {
+        if ($this->storybookViewports === 'tailwind') {
+            $parsedConfig = $this->vendorPath . '/tmp/tailwind.config.php';
+
+            if (!$this->filesystem->exists($parsedConfig)) {
+                return false;
+            }
+
+            $config = include $parsedConfig;
+
+            $viewports = [];
+
+            foreach ($config['theme']['screens'] as $key => $value) {
+                $width = false;
+
+                if (is_array($value) && !empty($value)) {
+                    if (Arr::has($value, 'min')) {
+                        $width = $value['min'];
+                    } elseif (Arr::has($value, 'max')) {
+                        $width = $value['max'];
+                    }
+                } elseif (is_string($value) && $value !== '0') {
+                    $width = $value;
+                }
+
+                if ($width) {
+                    $viewports[$key] = [
+                        'name' => $key,
+                        'styles' => [
+                            'width' => $width,
+                            'height' => '100%',
+                        ],
+                    ];
+                }
+            }
+
+            return $viewports;
+        } else {
+            return $this->storybookViewports;
+        }
+
+        return false;
+    }
 }