From f02a03591192fc454b8d0c267614204d5166ebc2 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 2 Feb 2023 21:06:14 -0600 Subject: [PATCH] Make Tailwind work with Storybook. Have it use our Button --- .storybook/main.ts | 23 ++++++++++++++++++ .storybook/preview.ts | 2 ++ package.json | 1 + stories/Button.stories.tsx | 30 +++++++++++++++++------- stories/Button.tsx | 48 -------------------------------------- stories/button.css | 35 --------------------------- yarn.lock | 15 ++++++++++-- 7 files changed, 60 insertions(+), 94 deletions(-) delete mode 100644 stories/Button.tsx delete mode 100644 stories/button.css diff --git a/.storybook/main.ts b/.storybook/main.ts index 23a824b53..00f1703c0 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,3 +1,5 @@ +import sharedConfig from '../webpack/shared'; + import type { StorybookConfig } from '@storybook/core-common'; const config: StorybookConfig = { @@ -9,11 +11,32 @@ const config: StorybookConfig = { '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', + { + name: '@storybook/addon-postcss', + options: { + postcssLoaderOptions: { + implementation: require('postcss'), + }, + }, + }, ], framework: '@storybook/react', core: { builder: '@storybook/builder-webpack5', }, + webpackFinal: async (config) => { + config.resolve!.alias = { + ...sharedConfig.resolve!.alias, + ...config.resolve!.alias, + }; + + config.resolve!.modules = [ + ...sharedConfig.resolve!.modules!, + ...config.resolve!.modules!, + ]; + + return config; + }, }; export default config; \ No newline at end of file diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 48afd568a..331938e1e 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,3 +1,5 @@ +import '../app/styles/tailwind.css'; + export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, controls: { diff --git a/package.json b/package.json index 7a582c89b..457c40614 100644 --- a/package.json +++ b/package.json @@ -200,6 +200,7 @@ "@storybook/addon-essentials": "^6.5.16", "@storybook/addon-interactions": "^6.5.16", "@storybook/addon-links": "^6.5.16", + "@storybook/addon-postcss": "^2.0.0", "@storybook/builder-webpack5": "^6.5.16", "@storybook/manager-webpack5": "^6.5.16", "@storybook/react": "^6.5.16", diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx index 70d075835..6db583e0f 100644 --- a/stories/Button.stories.tsx +++ b/stories/Button.stories.tsx @@ -1,7 +1,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'; import React from 'react'; -import { Button } from './Button'; +import Button from 'soapbox/components/ui/button/button'; // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export export default { @@ -9,7 +9,19 @@ export default { component: Button, // More on argTypes: https://storybook.js.org/docs/react/api/argtypes argTypes: { - backgroundColor: { control: 'color' }, + theme: { + control: 'select', + options: [ + 'primary', + 'secondary', + 'tertiary', + 'accent', + 'danger', + 'transparent', + 'outline', + 'muted', + ], + }, }, } as ComponentMeta; @@ -19,23 +31,23 @@ const Template: ComponentStory = (args) => - ); -}; diff --git a/stories/button.css b/stories/button.css deleted file mode 100644 index ce430e5a6..000000000 --- a/stories/button.css +++ /dev/null @@ -1,35 +0,0 @@ -.storybook-button { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-weight: 700; - border: 0; - border-radius: 3em; - cursor: pointer; - display: inline-block; - line-height: 1; -} - -.storybook-button--primary { - color: white; - background-color: #1ea7fd; -} - -.storybook-button--secondary { - color: #333; - background-color: transparent; - box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; -} - -.storybook-button--small { - font-size: 12px; - padding: 10px 16px; -} - -.storybook-button--medium { - font-size: 14px; - padding: 11px 20px; -} - -.storybook-button--large { - font-size: 16px; - padding: 12px 24px; -} diff --git a/yarn.lock b/yarn.lock index fab1eceee..4ef5193dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3028,6 +3028,17 @@ regenerator-runtime "^0.13.7" ts-dedent "^2.0.0" +"@storybook/addon-postcss@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@storybook/addon-postcss/-/addon-postcss-2.0.0.tgz#ec61cb9bb2662f408072b35c466c7df801c28498" + integrity sha512-Nt82A7e9zJH4+A+VzLKKswUfru+T6FJTakj4dccP0i8DSn7a0CkzRPrLuZBq8tg4voV6gD74bcDf3gViCVBGtA== + dependencies: + "@storybook/node-logger" "^6.1.14" + css-loader "^3.6.0" + postcss "^7.0.35" + postcss-loader "^4.2.0" + style-loader "^1.3.0" + "@storybook/addon-toolbars@6.5.16": version "6.5.16" resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.5.16.tgz#9de04f9cc64b68d6cb680aa1c4fbf874e11afa32" @@ -3571,7 +3582,7 @@ prettier ">=2.2.1 <=2.3.0" ts-dedent "^2.0.0" -"@storybook/node-logger@6.5.16": +"@storybook/node-logger@6.5.16", "@storybook/node-logger@^6.1.14": version "6.5.16" resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.16.tgz#d57fd6204c2abfbc297551d98ad5475dd73207cc" integrity sha512-YjhBKrclQtjhqFNSO+BZK+RXOx6EQypAELJKoLFaawg331e8VUfvUuRCNB3fcEWp8G9oH13PQQte0OTjLyyOYg== @@ -14002,7 +14013,7 @@ postcss-value-parser@^4.1.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== -postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6: +postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6: version "7.0.39" resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309" integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==