From 836aae1150c1883c0c361d6dbabe342c9954ca49 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 18 Aug 2020 19:00:36 +0300 Subject: [PATCH] feat: integrate viewport into examples --- examples/gatsby/.config/buildtime.js | 1 + examples/gatsby/.config/runtime.tsx | 7 ++- examples/gatsby/package.json | 1 + examples/nextjs/.config/buildtime.js | 1 + examples/nextjs/.config/runtime.tsx | 7 ++- examples/nextjs/package.json | 1 + examples/starter/.config/buildtime.js | 2 +- plugins/viewport-plugin/package.json | 2 +- .../src/ViewportBlock/ViewportBlock.tsx | 48 +++++++++++-------- .../src/ViewportBlock/ViewportBox.tsx | 5 +- .../src/ViewportPage/ViewportPage.tsx | 7 +-- 11 files changed, 54 insertions(+), 28 deletions(-) diff --git a/examples/gatsby/.config/buildtime.js b/examples/gatsby/.config/buildtime.js index e76d07472..0188d8491 100644 --- 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 index 1024c48ef..19ad0d105 100644 --- 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: () => }, + ], }, tutorial: { label: 'Tutorial', diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json index c6e007fc8..94395dbd9 100644 --- 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 index 20dd4aff9..bf472c225 100644 --- 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 index 1d1cfa310..63330f1c5 100644 --- 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: () => }, + ], sideNav: { collapseSingle: false, }, diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index eb5d2a2e5..bf120ec47 100644 --- 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 index 78aa4cbd7..9359d2888 100644 --- 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 index ee0401036..9be39cf1e 100644 --- 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 index 65b900270..f009a4553 100644 --- 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 = ({ 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 = ({ return story?.id ? ( ({ - node: name, - onClick: () => - setVisible({ - ...visible, - [name]: visible[name] ? 0 : sizes[name], - }), - }))} - plain={true} + actions={[ + { + node: ( + ({ + label: name, + selected: visible[name] !== 0, + }))} + onChange={item => { + setVisible({ + ...visible, + [item.label]: visible[item.label] ? 0 : sizes[item.label], + }); + }} + > + + + ), + }, + ]} > diff --git a/plugins/viewport-plugin/src/ViewportBlock/ViewportBox.tsx b/plugins/viewport-plugin/src/ViewportBlock/ViewportBox.tsx index c95bc8a43..4f471850b 100644 --- a/plugins/viewport-plugin/src/ViewportBlock/ViewportBox.tsx +++ b/plugins/viewport-plugin/src/ViewportBlock/ViewportBox.tsx @@ -11,7 +11,8 @@ export const ViewportBox: FC = ({ storyId, size }) => { return ( div': { @@ -25,7 +26,7 @@ export const ViewportBox: FC = ({ storyId, size }) => { boxShadow: (t: Theme) => `0px 2px 6px 0px ${t.colors?.shadow}`, }} > - + {`${size}px`} diff --git a/plugins/viewport-plugin/src/ViewportPage/ViewportPage.tsx b/plugins/viewport-plugin/src/ViewportPage/ViewportPage.tsx index bdd01190e..af8231b86 100644 --- 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 = props => ( <> - + );