diff --git a/.changeset/proud-gifts-knock.md b/.changeset/proud-gifts-knock.md new file mode 100644 index 0000000..be51718 --- /dev/null +++ b/.changeset/proud-gifts-knock.md @@ -0,0 +1,7 @@ +--- +'@stacks/ui': minor +'@stacks/ui-core': minor +'@stacks/ui-theme': minor +--- + +This adds storybook to the ui library! diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..1593e08 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,17 @@ +module.exports = { + stories: ['../packages/ui/**/*.stories.@(js|jsx|ts|tsx)'], + addons: ['@storybook/addon-links', '@storybook/addon-essentials'], + babel: config => { + config.presets[2][1] = { runtime: 'classic' }; + return config; + }, + 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 e006d9d..fdf87e9 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,10 @@ "@octokit/core": "3.5.1", "@stacks/eslint-config": "1.0.9", "@stacks/prettier-config": "0.0.8", + "@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.11", "@types/react-dom": "17.0.8", "eslint": "7.29.0", @@ -49,7 +53,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-theme/src/typography.ts b/packages/ui-theme/src/typography.ts index d088214..ad73fef 100755 --- a/packages/ui-theme/src/typography.ts +++ b/packages/ui-theme/src/typography.ts @@ -30,7 +30,8 @@ const _typography = { 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"', + 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: [ diff --git a/packages/ui/src/button/button.stories.tsx b/packages/ui/src/button/button.stories.tsx new file mode 100644 index 0000000..7e191e3 --- /dev/null +++ b/packages/ui/src/button/button.stories.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { Story, Meta } from '@storybook/react'; + +import { Button } from './index'; +import type { ButtonProps } from './types'; + +export default { + title: 'Button', + component: Button, +} as Meta; + +const Template: Story = args => { + return