From 141e17c8112017ed0f7729b509d799b89a364cdf Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 11 Oct 2022 23:20:46 +0200 Subject: [PATCH] initial working sb-for-sb-ui --- ...tories.js => NotificationItem.stories.jsx} | 0 code/package.json | 1 + code/sb-for-sb-ui/main.ts | 22 ++ code/sb-for-sb-ui/preview-head.html | 3 + code/sb-for-sb-ui/preview.jsx | 248 ++++++++++++++++++ code/vite.config.ts | 8 + 6 files changed, 282 insertions(+) rename code/lib/ui/src/components/notifications/{NotificationItem.stories.js => NotificationItem.stories.jsx} (100%) create mode 100644 code/sb-for-sb-ui/main.ts create mode 100644 code/sb-for-sb-ui/preview-head.html create mode 100644 code/sb-for-sb-ui/preview.jsx create mode 100644 code/vite.config.ts diff --git a/code/lib/ui/src/components/notifications/NotificationItem.stories.js b/code/lib/ui/src/components/notifications/NotificationItem.stories.jsx similarity index 100% rename from code/lib/ui/src/components/notifications/NotificationItem.stories.js rename to code/lib/ui/src/components/notifications/NotificationItem.stories.jsx diff --git a/code/package.json b/code/package.json index 3f6195844d0..09080174974 100644 --- a/code/package.json +++ b/code/package.json @@ -80,6 +80,7 @@ "sandbox": "ts-node ../scripts/sandbox.ts", "serve-storybooks": "http-server ./built-storybooks -p 8001", "smoketest-storybooks": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true node -r esm ../scripts/smoketest-storybooks.js", + "storybook:ui": "./lib/cli/bin/index.js dev -p 6006 --config-dir sb-for-sb-ui", "test": "NODE_OPTIONS=--max_old_space_size=4096 jest --config ./jest.config.js", "test:cli": "npm --prefix lib/cli run test", "test:e2e-examples-playwright": "playwright test", diff --git a/code/sb-for-sb-ui/main.ts b/code/sb-for-sb-ui/main.ts new file mode 100644 index 00000000000..419afdb8b6b --- /dev/null +++ b/code/sb-for-sb-ui/main.ts @@ -0,0 +1,22 @@ +import type { StorybookConfig } from '../frameworks/react-vite/dist'; + +const config: StorybookConfig = { + stories: [ + '../lib/ui/src/components/notifications/NotificationItem.stories.jsx', + // '../lib/ui/src/**/*.stories.@(ts|tsx|js|jsx|mdx)', + // '../lib/components/src/**/*.stories.@(js|jsx|ts|tsx|mdx)', + // './../../addons/interactions/**/*.stories.@(ts|tsx|js|jsx|mdx)', + ], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + ], + framework: { + name: '@storybook/react-vite', + options: {}, + }, + logLevel: 'debug', +}; + +export default config; diff --git a/code/sb-for-sb-ui/preview-head.html b/code/sb-for-sb-ui/preview-head.html new file mode 100644 index 00000000000..05da1e9dfbf --- /dev/null +++ b/code/sb-for-sb-ui/preview-head.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/code/sb-for-sb-ui/preview.jsx b/code/sb-for-sb-ui/preview.jsx new file mode 100644 index 00000000000..1b3ce4cdc6d --- /dev/null +++ b/code/sb-for-sb-ui/preview.jsx @@ -0,0 +1,248 @@ +import global from 'global'; +import React, { Fragment, useEffect } from 'react'; +import isChromatic from 'chromatic/isChromatic'; +import { + Global, + ThemeProvider, + themes, + createReset, + convert, + styled, + useTheme, +} from '@storybook/theming'; +import { Symbols } from '@storybook/components'; + +const { document } = global; + +const ThemeBlock = styled.div( + { + position: 'absolute', + top: 0, + left: 0, + right: '50vw', + width: '50vw', + height: '100vh', + bottom: 0, + overflow: 'auto', + padding: 10, + }, + ({ theme }) => ({ + background: theme.background.content, + color: theme.color.defaultText, + }), + ({ side }) => + side === 'left' + ? { + left: 0, + right: '50vw', + } + : { + right: 0, + left: '50vw', + } +); + +const ThemeStack = styled.div( + { + position: 'relative', + minHeight: 'calc(50vh - 15px)', + }, + ({ theme }) => ({ + background: theme.background.content, + color: theme.color.defaultText, + }) +); + +const PlayFnNotice = styled.div( + { + position: 'absolute', + bottom: '1rem', + right: '1rem', + border: '1px solid #ccc', + borderRadius: '5px', + padding: '1rem', + fontSize: '12px', + '> *': { + display: 'block', + }, + }, + ({ theme }) => ({ + background: theme.background.content, + color: theme.color.defaultText, + }) +); + +const ThemedSetRoot = () => { + const theme = useTheme(); + + useEffect(() => { + document.body.style.background = theme.background.content; + document.body.style.color = theme.color.defaultText; + return () => { + // + }; + }); + + return null; +}; + +export const decorators = [ + (StoryFn, { globals, parameters, playFunction }) => { + const defaultTheme = isChromatic() && !playFunction ? 'stacked' : 'light'; + const theme = globals.theme || parameters.theme || defaultTheme; + + switch (theme) { + case 'side-by-side': { + return ( + + + + + + + + + + + + + + + + + ); + } + case 'stacked': { + return ( + + + + + + + + + + + + + + + + + ); + } + default: { + return ( + + + + + {!parameters.theme && isChromatic() && playFunction && ( + + Detected play function. + Rendering in a single theme + + )} + + + ); + } + } + }, +]; + +export const parameters = { + exportedParameter: 'exportedParameter', + actions: { argTypesRegex: '^on.*' }, + options: { + storySort: (a, b) => + a.title === b.title ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }), + }, + docs: { + theme: themes.light, + }, + controls: { + presetColors: [ + { color: '#ff4785', title: 'Coral' }, + { color: '#1EA7FD', title: 'Ocean' }, + { color: 'rgb(252, 82, 31)', title: 'Orange' }, + { color: 'RGBA(255, 174, 0, 0.5)', title: 'Gold' }, + { color: 'hsl(101, 52%, 49%)', title: 'Green' }, + { color: 'HSLA(179,65%,53%,0.5)', title: 'Seafoam' }, + { color: '#6F2CAC', title: 'Purple' }, + { color: '#2A0481', title: 'Ultraviolet' }, + { color: 'black' }, + { color: '#333', title: 'Darkest' }, + { color: '#444', title: 'Darker' }, + { color: '#666', title: 'Dark' }, + { color: '#999', title: 'Mediumdark' }, + { color: '#ddd', title: 'Medium' }, + { color: '#EEE', title: 'Mediumlight' }, + { color: '#F3F3F3', title: 'Light' }, + { color: '#F8F8F8', title: 'Lighter' }, + { color: '#FFFFFF', title: 'Lightest' }, + '#fe4a49', + '#FED766', + 'rgba(0, 159, 183, 1)', + 'HSLA(240,11%,91%,0.5)', + 'slategray', + ], + }, +}; + +export const globals = { + foo: 'fooValue', +}; + +export const globalTypes = { + foo: { defaultValue: 'fooDefaultValue' }, + bar: { defaultValue: 'barDefaultValue' }, + theme: { + name: 'Theme', + description: 'Global theme for components', + toolbar: { + icon: 'circlehollow', + title: 'Theme', + items: [ + { value: 'light', icon: 'circlehollow', title: 'light' }, + { value: 'dark', icon: 'circle', title: 'dark' }, + { value: 'side-by-side', icon: 'sidebar', title: 'side by side' }, + { value: 'stacked', icon: 'bottombar', title: 'stacked' }, + ], + }, + }, + locale: { + name: 'Locale', + description: 'Internationalization locale', + toolbar: { + icon: 'globe', + shortcuts: { + next: { + label: 'Go to next language', + keys: ['L'], + }, + previous: { + label: 'Go to previous language', + keys: ['K'], + }, + reset: { + label: 'Reset language', + keys: ['meta', 'shift', 'L'], + }, + }, + items: [ + { title: 'Reset locale', type: 'reset' }, + { value: 'en', right: '🇺🇸', title: 'English' }, + { value: 'es', right: '🇪🇸', title: 'Español' }, + { value: 'zh', right: '🇨🇳', title: '中文' }, + { value: 'kr', right: '🇰🇷', title: '한국어' }, + ], + }, + }, +}; + +export const loaders = [async () => ({ globalValue: 1 })]; + +export const argTypes = { color: { control: 'color' } }; +export const args = { color: 'red' }; diff --git a/code/vite.config.ts b/code/vite.config.ts new file mode 100644 index 00000000000..662550be670 --- /dev/null +++ b/code/vite.config.ts @@ -0,0 +1,8 @@ +// TODO: install these deps even though they are already installed by other packages, or just silent the eslint error +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +});