From aa6341ace7f003b8227a885b6126aacb291fcfa4 Mon Sep 17 00:00:00 2001 From: Ben Orloff <99829882+benorloff@users.noreply.github.com> Date: Fri, 19 Apr 2024 12:11:23 -0700 Subject: [PATCH] update config files to ES5 for compatibility with storybook --- .storybook/main.ts | 1 - .storybook/preview.ts | 16 ++--- .storybook/tokens/color.stories.tsx | 2 +- .storybook/tokens/radius.stories.tsx | 2 +- .storybook/tokens/shadow.stories.tsx | 2 +- .storybook/tokens/spacing.stories.tsx | 2 +- .storybook/tokens/typography.stories.tsx | 2 +- package-lock.json | 60 +++++++++++++++++++ package.json | 1 + postcss.config.cjs | 6 ++ postcss.config.mjs | 8 --- stories/Button.stories.ts | 60 ------------------- stories/Button.tsx | 52 ---------------- stories/Header.stories.ts | 32 ---------- stories/Header.tsx | 56 ----------------- stories/Page.stories.ts | 32 ---------- stories/Page.tsx | 73 ----------------------- stories/button.css | 30 ---------- stories/header.css | 32 ---------- stories/page.css | 69 --------------------- styles/globals.css | 4 +- tailwind.config.ts => tailwind.config.cjs | 8 +-- tsconfig.json | 3 +- 23 files changed, 87 insertions(+), 466 deletions(-) create mode 100644 postcss.config.cjs delete mode 100644 postcss.config.mjs delete mode 100644 stories/Button.stories.ts delete mode 100644 stories/Button.tsx delete mode 100644 stories/Header.stories.ts delete mode 100644 stories/Header.tsx delete mode 100644 stories/Page.stories.ts delete mode 100644 stories/Page.tsx delete mode 100644 stories/button.css delete mode 100644 stories/header.css delete mode 100644 stories/page.css rename tailwind.config.ts => tailwind.config.cjs (95%) diff --git a/.storybook/main.ts b/.storybook/main.ts index 915d4d2..b5dd0c6 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -21,6 +21,5 @@ const config: StorybookConfig = { docs: { autodocs: "tag", }, - staticDirs: ["../public"], }; export default config; diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 2da376f..c695c3f 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -16,14 +16,14 @@ const preview: Preview = { }, }, - decorators: [withThemeByClassName({ - themes: { - // nameOfTheme: 'classNameForTheme', - light: '', - dark: 'dark', - }, - defaultTheme: 'light', - })] + // decorators: [withThemeByClassName({ + // themes: { + // // nameOfTheme: 'classNameForTheme', + // light: '', + // dark: 'dark', + // }, + // defaultTheme: 'light', + // })] }; export default preview; diff --git a/.storybook/tokens/color.stories.tsx b/.storybook/tokens/color.stories.tsx index daa5336..a5ce5e2 100644 --- a/.storybook/tokens/color.stories.tsx +++ b/.storybook/tokens/color.stories.tsx @@ -2,7 +2,7 @@ import React from "react" import type { Meta, StoryObj } from "@storybook/react" import resolveConfig from "tailwindcss/resolveConfig" -import config from "../../tailwind.config.ts" +import config from "../../tailwind.config.cjs" import { hexToHSL, hslToHex } from "./util" const meta: Meta<{ diff --git a/.storybook/tokens/radius.stories.tsx b/.storybook/tokens/radius.stories.tsx index a86104b..d3bd1e6 100644 --- a/.storybook/tokens/radius.stories.tsx +++ b/.storybook/tokens/radius.stories.tsx @@ -2,7 +2,7 @@ import React from "react" import type { Meta, StoryObj } from "@storybook/react" import resolveConfig from "tailwindcss/resolveConfig" -import config from "../../tailwind.config.ts" +import config from "../../tailwind.config.cjs" const fullConfig = resolveConfig(config) diff --git a/.storybook/tokens/shadow.stories.tsx b/.storybook/tokens/shadow.stories.tsx index ab970dd..27a6105 100644 --- a/.storybook/tokens/shadow.stories.tsx +++ b/.storybook/tokens/shadow.stories.tsx @@ -2,7 +2,7 @@ import React from "react" import type { Meta, StoryObj } from "@storybook/react" import resolveConfig from "tailwindcss/resolveConfig" -import config from "../../tailwind.config.ts" +import config from "../../tailwind.config.cjs" const fullConfig = resolveConfig(config) diff --git a/.storybook/tokens/spacing.stories.tsx b/.storybook/tokens/spacing.stories.tsx index b1aa675..e83a4f5 100644 --- a/.storybook/tokens/spacing.stories.tsx +++ b/.storybook/tokens/spacing.stories.tsx @@ -2,7 +2,7 @@ import React from "react" import type { Meta, StoryObj } from "@storybook/react" import resolveConfig from "tailwindcss/resolveConfig" -import config from "../../tailwind.config.ts" +import config from "../../tailwind.config.cjs" const fullConfig = resolveConfig(config) diff --git a/.storybook/tokens/typography.stories.tsx b/.storybook/tokens/typography.stories.tsx index 53ffaa6..ebd1bb9 100644 --- a/.storybook/tokens/typography.stories.tsx +++ b/.storybook/tokens/typography.stories.tsx @@ -2,7 +2,7 @@ import React, { CSSProperties } from "react" import type { Meta, StoryObj } from "@storybook/react" import resolveConfig from "tailwindcss/resolveConfig" -import config from "../../tailwind.config.ts" +import config from "../../tailwind.config.cjs" const fullConfig = resolveConfig(config) diff --git a/package-lock.json b/package-lock.json index 8632cca..34b4258 100644 --- a/package-lock.json +++ b/package-lock.json @@ -70,6 +70,7 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "autoprefixer": "^10.4.19", "chromatic": "^11.3.0", "eslint": "^8", "eslint-config-next": "14.2.2", @@ -7525,6 +7526,43 @@ "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==", "dev": true }, + "node_modules/autoprefixer": { + "version": "10.4.19", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz", + "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "browserslist": "^4.23.0", + "caniuse-lite": "^1.0.30001599", + "fraction.js": "^4.3.7", + "normalize-range": "^0.1.2", + "picocolors": "^1.0.0", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -11153,6 +11191,19 @@ "node": ">= 0.6" } }, + "node_modules/fraction.js": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", + "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", + "dev": true, + "engines": { + "node": "*" + }, + "funding": { + "type": "patreon", + "url": "https://github.com/sponsors/rawify" + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -13631,6 +13682,15 @@ "node": ">=0.10.0" } }, + "node_modules/normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", diff --git a/package.json b/package.json index 595ec1a..a5d5306 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,7 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "autoprefixer": "^10.4.19", "chromatic": "^11.3.0", "eslint": "^8", "eslint-config-next": "14.2.2", diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..12a703d --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/postcss.config.mjs b/postcss.config.mjs deleted file mode 100644 index 1a69fd2..0000000 --- a/postcss.config.mjs +++ /dev/null @@ -1,8 +0,0 @@ -/** @type {import('postcss-load-config').Config} */ -const config = { - plugins: { - tailwindcss: {}, - }, -}; - -export default config; diff --git a/stories/Button.stories.ts b/stories/Button.stories.ts deleted file mode 100644 index 3026a2b..0000000 --- a/stories/Button.stories.ts +++ /dev/null @@ -1,60 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; -import { Button } from './Button'; - -// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export -const meta = { - title: 'Example/Button', - component: Button, - parameters: { - // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout - layout: 'centered', - }, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs - tags: ['autodocs'], - // More on argTypes: https://storybook.js.org/docs/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - }, - // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args - args: { onClick: fn() }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -export const Primary: Story = { - args: { - primary: true, - label: 'Button', - }, -}; - -export const Secondary: Story = { - args: { - label: 'Button', - }, -}; - -export const Large: Story = { - args: { - size: 'large', - label: 'Button', - }, -}; - -export const Small: Story = { - args: { - size: 'small', - label: 'Button', - }, -}; - -export const Warning: Story = { - args: { - primary: true, - label: 'Delete now', - backgroundColor: 'red', - } -}; diff --git a/stories/Button.tsx b/stories/Button.tsx deleted file mode 100644 index e3cb2f2..0000000 --- a/stories/Button.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import './button.css'; - -interface ButtonProps { - /** - * Is this the principal call to action on the page? - */ - primary?: boolean; - /** - * What background color to use - */ - backgroundColor?: string; - /** - * How large should the button be? - */ - size?: 'small' | 'medium' | 'large'; - /** - * Button contents - */ - label: string; - /** - * Optional click handler - */ - onClick?: () => void; -} - -/** - * Primary UI component for user interaction - */ -export const Button = ({ - primary = false, - size = 'medium', - backgroundColor, - label, - ...props -}: ButtonProps) => { - const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - return ( - - ); -}; diff --git a/stories/Header.stories.ts b/stories/Header.stories.ts deleted file mode 100644 index 39d1587..0000000 --- a/stories/Header.stories.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; -import { Header } from './Header'; - -const meta = { - title: 'Example/Header', - component: Header, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs - tags: ['autodocs'], - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout - layout: 'fullscreen', - }, - args: { - onLogin: fn(), - onLogout: fn(), - onCreateAccount: fn(), - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const LoggedIn: Story = { - args: { - user: { - name: 'Jane Doe', - }, - }, -}; - -export const LoggedOut: Story = {}; diff --git a/stories/Header.tsx b/stories/Header.tsx deleted file mode 100644 index c806ddf..0000000 --- a/stories/Header.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; - -import { Button } from './Button'; -import './header.css'; - -type User = { - name: string; -}; - -interface HeaderProps { - user?: User; - onLogin?: () => void; - onLogout?: () => void; - onCreateAccount?: () => void; -} - -export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => ( -
-
-
- - - - - - - -

Acme

-
-
- {user ? ( - <> - - Welcome, {user.name}! - -
-
-
-); diff --git a/stories/Page.stories.ts b/stories/Page.stories.ts deleted file mode 100644 index f7a0681..0000000 --- a/stories/Page.stories.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { within, userEvent, expect } from '@storybook/test'; - -import { Page } from './Page'; - -const meta = { - title: 'Example/Page', - component: Page, - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout - layout: 'fullscreen', - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const LoggedOut: Story = {}; - -// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing -export const LoggedIn: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { name: /Log in/i }); - await expect(loginButton).toBeInTheDocument(); - await userEvent.click(loginButton); - await expect(loginButton).not.toBeInTheDocument(); - - const logoutButton = canvas.getByRole('button', { name: /Log out/i }); - await expect(logoutButton).toBeInTheDocument(); - }, -}; diff --git a/stories/Page.tsx b/stories/Page.tsx deleted file mode 100644 index e117483..0000000 --- a/stories/Page.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; - -import { Header } from './Header'; -import './page.css'; - -type User = { - name: string; -}; - -export const Page: React.FC = () => { - const [user, setUser] = React.useState(); - - return ( -
-
setUser({ name: 'Jane Doe' })} - onLogout={() => setUser(undefined)} - onCreateAccount={() => setUser({ name: 'Jane Doe' })} - /> - -
-

Pages in Storybook

-

- We recommend building UIs with a{' '} - - component-driven - {' '} - process starting with atomic components and ending with pages. -

-

- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page - data in Storybook: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock these services out - using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at{' '} - - Storybook tutorials - - . Read more in the{' '} - - docs - - . -

-
- Tip Adjust the width of the canvas with the{' '} - - - - - - Viewports addon in the toolbar -
-
-
- ); -}; diff --git a/stories/button.css b/stories/button.css deleted file mode 100644 index dc91dc7..0000000 --- a/stories/button.css +++ /dev/null @@ -1,30 +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/stories/header.css b/stories/header.css deleted file mode 100644 index d9a7052..0000000 --- a/stories/header.css +++ /dev/null @@ -1,32 +0,0 @@ -.storybook-header { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - padding: 15px 20px; - display: flex; - align-items: center; - justify-content: space-between; -} - -.storybook-header svg { - display: inline-block; - vertical-align: top; -} - -.storybook-header h1 { - font-weight: 700; - font-size: 20px; - line-height: 1; - margin: 6px 0 6px 10px; - display: inline-block; - vertical-align: top; -} - -.storybook-header button + button { - margin-left: 10px; -} - -.storybook-header .welcome { - color: #333; - font-size: 14px; - margin-right: 10px; -} diff --git a/stories/page.css b/stories/page.css deleted file mode 100644 index 098dad1..0000000 --- a/stories/page.css +++ /dev/null @@ -1,69 +0,0 @@ -.storybook-page { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 24px; - padding: 48px 20px; - margin: 0 auto; - max-width: 600px; - color: #333; -} - -.storybook-page h2 { - font-weight: 700; - font-size: 32px; - line-height: 1; - margin: 0 0 4px; - display: inline-block; - vertical-align: top; -} - -.storybook-page p { - margin: 1em 0; -} - -.storybook-page a { - text-decoration: none; - color: #1ea7fd; -} - -.storybook-page ul { - padding-left: 30px; - margin: 1em 0; -} - -.storybook-page li { - margin-bottom: 8px; -} - -.storybook-page .tip { - display: inline-block; - border-radius: 1em; - font-size: 11px; - line-height: 12px; - font-weight: 700; - background: #e7fdd8; - color: #66bf3c; - padding: 4px 12px; - margin-right: 10px; - vertical-align: top; -} - -.storybook-page .tip-wrapper { - font-size: 13px; - line-height: 20px; - margin-top: 40px; - margin-bottom: 40px; -} - -.storybook-page .tip-wrapper svg { - display: inline-block; - height: 12px; - width: 12px; - margin-right: 4px; - vertical-align: top; - margin-top: 3px; -} - -.storybook-page .tip-wrapper svg path { - fill: #1ea7fd; -} diff --git a/styles/globals.css b/styles/globals.css index b0e6fff..c51c2ba 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,6 +1,6 @@ @tailwind base; - @tailwind components; - @tailwind utilities; +@tailwind components; +@tailwind utilities; @layer base { :root { diff --git a/tailwind.config.ts b/tailwind.config.cjs similarity index 95% rename from tailwind.config.ts rename to tailwind.config.cjs index 84287e8..2e7ea94 100644 --- a/tailwind.config.ts +++ b/tailwind.config.cjs @@ -1,6 +1,6 @@ -import type { Config } from "tailwindcss" -const config = { +/** @type {import('tailwindcss').Config} */ +module.exports = { darkMode: ["class"], content: [ './pages/**/*.{ts,tsx}', @@ -75,6 +75,4 @@ const config = { }, }, plugins: [require("tailwindcss-animate")], -} satisfies Config - -export default config \ No newline at end of file +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index e7ff90f..ca1f566 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,6 @@ { "compilerOptions": { + "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, @@ -21,6 +22,6 @@ "@/*": ["./*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "tailwind.config.cjs"], "exclude": ["node_modules"] }