From a3413f872e35baa8f673067dcbc20755e6fdd8c9 Mon Sep 17 00:00:00 2001 From: fbwoolf Date: Fri, 11 Jun 2021 14:35:57 -0500 Subject: [PATCH] feat: add storybook --- .storybook/main.js | 13 + .storybook/preview.js | 10 + package.json | 9 +- .../src/components/component/index.tsx | 1 + packages/ui-theme/src/typography.ts | 184 +- packages/ui/src/box/index.tsx | 1 + packages/ui/src/button/button.stories.tsx | 58 + packages/ui/src/css-reset/index.tsx | 1 + packages/ui/src/css-reset/preflight.tsx | 1 + packages/ui/src/spinner.tsx | 1 + yarn.lock | 6236 ++++++++++++++++- 11 files changed, 6287 insertions(+), 228 deletions(-) create mode 100644 .storybook/main.js create mode 100644 .storybook/preview.js create mode 100644 packages/ui/src/button/button.stories.tsx diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..ca37da5 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,13 @@ +module.exports = { + stories: ['../packages/ui/**/*.stories.@(js|jsx|ts|tsx)'], + addons: ['@storybook/addon-links', '@storybook/addon-essentials'], + typescript: { + check: false, + checkOptions: {}, + reactDocgen: 'react-docgen-typescript', + reactDocgenTypescriptOptions: { + shouldExtractLiteralValuesFromEnum: true, + propFilter: prop => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true), + }, + }, +}; diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000..645f52d --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,10 @@ + +export const parameters = { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, +} \ No newline at end of file diff --git a/package.json b/package.json index a1b1110..b1e2a47 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,13 @@ "@octokit/core": "^3.3.0", "@stacks/eslint-config": "^1.0.7", "@stacks/prettier-config": "^0.0.7", + "@storybook/addon-actions": "^6.2.9", + "@storybook/addon-essentials": "^6.2.9", + "@storybook/addon-links": "^6.2.9", + "@storybook/react": "^6.2.9", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", + "babel-loader": "^8.2.2", "eslint": "^7.21.0", "eslint-plugin-react": "^7.20.6", "husky": "^4.2.5", @@ -58,7 +63,9 @@ "changeset:version": "changeset version", "release": "yarn build && yarn changeset:publish", "version": "lerna bootstrap", - "postinstall": "patch-package" + "postinstall": "patch-package", + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" }, "workspaces": [ "packages/**" diff --git a/packages/ui-core/src/components/component/index.tsx b/packages/ui-core/src/components/component/index.tsx index d021fa7..ab9c693 100644 --- a/packages/ui-core/src/components/component/index.tsx +++ b/packages/ui-core/src/components/component/index.tsx @@ -1,3 +1,4 @@ +/** @jsxRuntime classic */ /** @jsx jsx */ import { jsx, css } from '@emotion/react'; import { As, PropsWithAs } from '../..'; diff --git a/packages/ui-theme/src/typography.ts b/packages/ui-theme/src/typography.ts index bc517b7..ad73fef 100755 --- a/packages/ui-theme/src/typography.ts +++ b/packages/ui-theme/src/typography.ts @@ -1,119 +1,119 @@ const _typography = { - letterSpacings: { - tighter: '-0.02em', - tight: '-0.01em', - normal: '0', - wide: '0.025em', - wider: '0.05em', - widest: '0.1em', - }, - lineHeights: { - normal: 'normal', - none: '1', - shorter: '1.333', - short: '1.4', - base: '1.5', - tall: '1.625', - taller: '2', - }, - fontWeights: { - hairline: 100, - thin: 200, - light: 300, - normal: 400, - medium: 500, - semibold: 600, - bold: 700, - extrabold: 800, - black: 900, - }, - fonts: { - heading: - '"Open Sauce", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', - body: - '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', - mono: 'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace', - }, - fontSizes: [ - '12px', - '14px', - '16px', - '20px', - '24px', - '28px', - '32px', - '36px', - '48px', - '64px', - '96px', - '128px', - ], + letterSpacings: { + tighter: '-0.02em', + tight: '-0.01em', + normal: '0', + wide: '0.025em', + wider: '0.05em', + widest: '0.1em', + }, + lineHeights: { + normal: 'normal', + none: '1', + shorter: '1.333', + short: '1.4', + base: '1.5', + tall: '1.625', + taller: '2', + }, + fontWeights: { + hairline: 100, + thin: 200, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900, + }, + fonts: { + heading: + '"Open Sauce", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', + body: + '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', + mono: 'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace', + }, + fontSizes: [ + '12px', + '14px', + '16px', + '20px', + '24px', + '28px', + '32px', + '36px', + '48px', + '64px', + '96px', + '128px', + ], }; const displayLarge = { - fontWeight: _typography.fontWeights.semibold, - fontSize: _typography.fontSizes[4], - lineHeight: _typography.lineHeights.shorter, // 1.333 - letterSpacing: '-0.02em', + fontWeight: _typography.fontWeights.semibold, + fontSize: _typography.fontSizes[4], + lineHeight: _typography.lineHeights.shorter, // 1.333 + letterSpacing: '-0.02em', }; const displaySmall = { - fontWeight: _typography.fontWeights.medium, - fontSize: _typography.fontSizes[3], - lineHeight: _typography.lineHeights.short, // 1.4 - letterSpacing: '-0.02em', + fontWeight: _typography.fontWeights.medium, + fontSize: _typography.fontSizes[3], + lineHeight: _typography.lineHeights.short, // 1.4 + letterSpacing: '-0.02em', }; const bodyLarge = { - fontWeight: _typography.fontWeights.normal, - fontSize: _typography.fontSizes[2], - lineHeight: _typography.lineHeights.base, // 1.5 (24) - letterSpacing: '-0.01em', + fontWeight: _typography.fontWeights.normal, + fontSize: _typography.fontSizes[2], + lineHeight: _typography.lineHeights.base, // 1.5 (24) + letterSpacing: '-0.01em', }; const bodyLargeMedium = { - ...bodyLarge, - fontWeight: _typography.fontWeights.medium, + ...bodyLarge, + fontWeight: _typography.fontWeights.medium, }; const bodySmall = { - fontWeight: _typography.fontWeights.normal, - fontSize: _typography.fontSizes[1], - lineHeight: _typography.lineHeights.short, // 1.4 (19.6) - letterSpacing: '-0.01em', + fontWeight: _typography.fontWeights.normal, + fontSize: _typography.fontSizes[1], + lineHeight: _typography.lineHeights.short, // 1.4 (19.6) + letterSpacing: '-0.01em', }; const bodySmallMedium = { - ...bodySmall, - fontWeight: _typography.fontWeights.medium, + ...bodySmall, + fontWeight: _typography.fontWeights.medium, }; const caption = { - fontSize: _typography.fontSizes[0], - lineHeight: _typography.lineHeights.shorter, // 1.333 (16) - letterSpacing: '0.00em', + fontSize: _typography.fontSizes[0], + lineHeight: _typography.lineHeights.shorter, // 1.333 (16) + letterSpacing: '0.00em', }; const captionMedium = { - ...bodySmall, - fontWeight: _typography.fontWeights.medium, + ...bodySmall, + fontWeight: _typography.fontWeights.medium, }; export const textStyles = { - display: { - large: displayLarge, - small: displaySmall, - }, - body: { - large: { - ...bodyLarge, - medium: bodyLargeMedium, - }, - small: { - ...bodySmall, - medium: bodySmallMedium, - }, + display: { + large: displayLarge, + small: displaySmall, + }, + body: { + large: { + ...bodyLarge, + medium: bodyLargeMedium, }, - caption: { - ...caption, - medium: captionMedium, + small: { + ...bodySmall, + medium: bodySmallMedium, }, + }, + caption: { + ...caption, + medium: captionMedium, + }, } as const; export const typography = { - ..._typography, - textStyles, + ..._typography, + textStyles, }; diff --git a/packages/ui/src/box/index.tsx b/packages/ui/src/box/index.tsx index 62dd050..6523fb0 100755 --- a/packages/ui/src/box/index.tsx +++ b/packages/ui/src/box/index.tsx @@ -1,3 +1,4 @@ +/** @jsxRuntime classic */ /** @jsx jsx */ import { jsx, css } from '@emotion/react'; import * as React from 'react'; diff --git a/packages/ui/src/button/button.stories.tsx b/packages/ui/src/button/button.stories.tsx new file mode 100644 index 0000000..a973b79 --- /dev/null +++ b/packages/ui/src/button/button.stories.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { Story, Meta } from '@storybook/react'; + +import { Button } from './index'; +import type { ButtonProps } from './types'; + +export default { + title: 'Example/Button', + component: Button, + argTypes: { + backgroundColor: { control: 'color' }, + }, +} as Meta; + +const Template: Story = args =>