feat: integrate viewport into examples

ccontrols · Aug 18, 2020 · 836aae1 · 836aae1
1 parent 9439410
commit 836aae1
Show file tree

Hide file tree

Showing 11 changed files with 54 additions and 28 deletions.
diff --git a/examples/gatsby/.config/buildtime.js b/examples/gatsby/.config/buildtime.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const { defaultBuildConfig } = require('@component-controls/core');
 
 module.exports = {
   stories: [

diff --git a/examples/gatsby/.config/runtime.tsx b/examples/gatsby/.config/runtime.tsx
@@ -1,8 +1,9 @@
 /** @jsx jsx */
 import { jsx, Box, Text } from 'theme-ui';
-import { RunOnlyConfiguration } from "@component-controls/core";
+import { RunOnlyConfiguration, defaultRunConfig } from "@component-controls/core";
 import { Link } from "@component-controls/components";
 import { OctofaceIcon } from '@primer/octicons-react';
+import { ViewportPage } from "@component-controls/viewport-plugin";
 
 const categories = ['Introduction', 'Application','Controls','Blocks', 'Editors', 'Components', 'Plugins']
 
@@ -21,6 +22,10 @@ const config: RunOnlyConfiguration = {
   pages: {
     story: {
       label: 'API',
+      tabs: [
+        ...defaultRunConfig.pages.story.tabs,
+        { title: 'Viewport', render: () => <ViewportPage /> },
+      ],
     },
     tutorial: {
       label: 'Tutorial',

diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json
@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@component-controls/gatsby-theme-stories": "^1.20.0",
+    "@component-controls/viewport-plugin": "^1.20.0",
     "@theme-ui/presets": "^0.4.0-rc.1",
     "gatsby": "^2.22.10",
     "gatsby-plugin-sitemap": "^2.4.11",

diff --git a/examples/nextjs/.config/buildtime.js b/examples/nextjs/.config/buildtime.js
@@ -24,6 +24,7 @@ module.exports = {
   pages: {
     story: {
       basePath: 'api/',
+      tabs: [{ route: 'page' }, { route: 'test' }, { route: 'viewport' }],
     },
     blog: {
       basePath: 'blogs/',

diff --git a/examples/nextjs/.config/runtime.tsx b/examples/nextjs/.config/runtime.tsx
@@ -1,8 +1,9 @@
 /** @jsx jsx */
 import { jsx, Box, Text } from 'theme-ui';
-import { RunOnlyConfiguration } from "@component-controls/core";
+import { RunOnlyConfiguration, defaultRunConfig } from "@component-controls/core";
 import { Link } from "@component-controls/components";
 import { OctofaceIcon } from '@primer/octicons-react';
+import { ViewportPage } from "@component-controls/viewport-plugin";
 
 const categories = ['Introduction', 'Application','Controls','Blocks', 'Editors', 'Components', 'Plugins']
 
@@ -21,6 +22,10 @@ const config: RunOnlyConfiguration = {
   pages: {
     story: {
       label: 'API',
+      tabs: [
+        ...defaultRunConfig.pages.story.tabs,
+        { title: 'Viewport', render: () => <ViewportPage /> },
+      ],
       sideNav: {
         collapseSingle: false,
       },

diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@component-controls/nextjs-plugin": "^1.20.0",
+    "@component-controls/viewport-plugin": "^1.20.0",
     "@theme-ui/presets": "^0.4.0-rc.1",
     "emotion": "^10.0.27",
     "emotion-server": "^10.0.27",

diff --git a/examples/starter/.config/buildtime.js b/examples/starter/.config/buildtime.js
@@ -1,6 +1,7 @@
 const path = require('path');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const { defaultBuildConfig } = require('@component-controls/core');
+
 module.exports = {
   stories: [
     '../src/docs/*.@(mdx|tsx)',
@@ -18,7 +19,6 @@ module.exports = {
     story: {
       tabs: [
         ...defaultBuildConfig.pages.story.tabs,
-        // new viewport tab
         { route: 'viewport' },
       ],
     },

diff --git a/plugins/viewport-plugin/package.json b/plugins/viewport-plugin/package.json
@@ -36,7 +36,7 @@
   "license": "MIT",
   "dependencies": {
     "@component-controls/blocks": "^1.20.0",
-    "@component-controls/components": "^1.20.0",
+    "@component-controls/components": "^1.19.3",
     "react": "^16.12.0",
     "theme-ui": "next"
   },

diff --git a/plugins/viewport-plugin/src/ViewportBlock/ViewportBlock.tsx b/plugins/viewport-plugin/src/ViewportBlock/ViewportBlock.tsx
@@ -1,12 +1,12 @@
 /** @jsx jsx */
 import { FC, useState } from 'react';
-import { Box, jsx } from 'theme-ui';
+import { Box, jsx, Button } from 'theme-ui';
 import {
   StoryBlockContainer,
   StoryBlockContainerProps,
 } from '@component-controls/blocks';
 import { useStory, StoryInputProps } from '@component-controls/store';
-import { ActionContainer } from '@component-controls/components';
+import { ActionContainer, Multiselect } from '@component-controls/components';
 import { ViewportBox } from './ViewportBox';
 
 export interface ViewportBlockOwnProps {
@@ -20,10 +20,10 @@ export const ViewportBlock: FC<ViewportBlockProps> = ({
   id,
   name,
   sizes = {
-    xsmall: 320,
-    small: 375,
-    medium: 768,
-    large: 1024,
+    '320px': 320,
+    '375px': 375,
+    '768px': 768,
+    '1024px': 1024,
   },
   ...props
 }) => {
@@ -32,26 +32,36 @@ export const ViewportBlock: FC<ViewportBlockProps> = ({
   return story?.id ? (
     <StoryBlockContainer story={story} {...props}>
       <ActionContainer
-        actions={Object.keys(visible)
-          .reverse()
-          .map(name => ({
-            node: name,
-            onClick: () =>
-              setVisible({
-                ...visible,
-                [name]: visible[name] ? 0 : sizes[name],
-              }),
-          }))}
-        plain={true}
+        actions={[
+          {
+            node: (
+              <Multiselect
+                items={Object.keys(visible).map(name => ({
+                  label: name,
+                  selected: visible[name] !== 0,
+                }))}
+                onChange={item => {
+                  setVisible({
+                    ...visible,
+                    [item.label]: visible[item.label] ? 0 : sizes[item.label],
+                  });
+                }}
+              >
+                <Button>widths</Button>
+              </Multiselect>
+            ),
+          },
+        ]}
       >
         <Box
           sx={{
             display: 'flex',
             flexDirection: 'row',
-            height: '100vh',
+            height: '100%',
             width: '100%',
             overflow: 'auto',
-            pt: 2,
+            pt: 3,
+            pb: 4,
             pl: 1,
           }}
         >

diff --git a/plugins/viewport-plugin/src/ViewportBlock/ViewportBox.tsx b/plugins/viewport-plugin/src/ViewportBlock/ViewportBox.tsx
@@ -11,7 +11,8 @@ export const ViewportBox: FC<ViewportBoxProps> = ({ storyId, size }) => {
   return (
     <Box
       sx={{
-        minWidth: size,
+        minHeight: '100%',
+        minWidth: 'unset',
         pr: 4,
         ':hover': {
           '& > div': {
@@ -25,7 +26,7 @@ export const ViewportBox: FC<ViewportBoxProps> = ({ storyId, size }) => {
           boxShadow: (t: Theme) => `0px 2px 6px 0px ${t.colors?.shadow}`,
         }}
       >
-        <Story id={storyId} sxStyle={{ mb: 0 }} />
+        <Story id={storyId} sxStyle={{ mb: 0, minWidth: size }} />
       </Box>
       <Text sx={{ color: 'muted', fontWeight: 'bold' }}>{`${size}px`}</Text>
     </Box>

diff --git a/plugins/viewport-plugin/src/ViewportPage/ViewportPage.tsx b/plugins/viewport-plugin/src/ViewportPage/ViewportPage.tsx
@@ -1,9 +1,10 @@
 import React, { FC } from 'react';
 import { Description } from '@component-controls/blocks';
-import { ViewportBlock } from '../ViewportBlock';
-export const ViewportPage: FC = () => (
+import { ViewportBlock, ViewportBlockProps } from '../ViewportBlock';
+
+export const ViewportPage: FC<ViewportBlockProps> = props => (
   <>
     <Description />
-    <ViewportBlock title="Viewport" />
+    <ViewportBlock title="Viewport" {...props} />
   </>
 );