Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: ✨ add storybook to cli #1561

Open
wants to merge 185 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
185 commits
Select commit Hold shift + click to select a range
0d4e33c
Storybook support
XavierGeerinck Jan 25, 2023
8b42574
build(storybook): :arrow_up: upgrade Storybook to v7.0.26
lloydrichards Jul 10, 2023
6e1af2e
refactor(storybook): :recycle: move stories out of /registry
lloydrichards Jul 10, 2023
406a675
refactor(storybook): :arrow_up: change to @storybook/nextjs
lloydrichards Jul 10, 2023
a41c81e
fix(storybook): :bug: fix single story in mdx
lloydrichards Jul 10, 2023
49708ff
fix(storybook): :bug: get tailwind and nextjs working with storybook
lloydrichards Jul 11, 2023
e9a86d5
refactor(storybook): :recycle: changed stories from MDX to CSF3
lloydrichards Jul 11, 2023
8c120e4
ci: :green_heart: format prettier
lloydrichards Jul 11, 2023
3754b0b
ci: :green_heart: lock unist-builder to v3.0.0
lloydrichards Jul 11, 2023
fc966fc
chore: :recycle: nit fixes for dependancies and comments
lloydrichards Jul 13, 2023
e520dde
feat(ui): :sparkles: added typography for NewYork style
lloydrichards Jul 13, 2023
1f16ddf
fix(storybook): :bug: globally set font variable
lloydrichards Jul 13, 2023
205868a
build: :arrow_up: upgrade storybook to v7.0.27
lloydrichards Jul 13, 2023
7b23b74
ci: :green_heart: formatted preview.tsx
lloydrichards Jul 13, 2023
6f61b2c
feat(storybook): :sparkles: added storybook files to registry and CLI
lloydrichards Jul 16, 2023
22630e3
fix: :white_check_mark: fix get-config.test.ts
lloydrichards Jul 16, 2023
9db924a
refactor(ui): :fire: remove typography component
lloydrichards Sep 19, 2023
dbc0c74
docs(www): improve astro guide (#858)
lgastler Jul 12, 2023
893f918
docs(www): update label in card demo (#799)
0ui Jul 12, 2023
b90ca86
docs(www): add typescript configuration question to cli docs (#898)
pedrovrima Jul 12, 2023
0058410
ci: rename repo owner (#1056)
shadcn Jul 27, 2023
8ab8458
docs(www): update import path next.mdx (#1062)
munan56 Jul 28, 2023
b163b6b
fix(www): overflow issue in documentation (#1055)
dev-shetty Jul 28, 2023
cbf7c90
fix(www): responsive cards (#1066)
shadcn Jul 28, 2023
0d55bd5
fix(combobox): search language by label in examples (#989)
limitless-dev Jul 30, 2023
6dfbe1b
fix(alert): padding on Firefox (#1059)
AntsiferovMaxim Jul 30, 2023
7b81ca6
style(card): remove extra spacing (#1082)
bernaferrari Aug 1, 2023
17aad57
fix(next-template): remove experimental `appdir` (#979)
vinaykulk621 Aug 1, 2023
3f6e1d1
docs(www): update import path for button (#839)
GrungeElFz Aug 3, 2023
71b30cb
docs(www): add dark mode for Vite. (#814)
stylessh Aug 3, 2023
c763815
docs(www): add missing "command" component to imports (#550)
rudyorre Aug 3, 2023
15f5bf2
fix(examples): update keyboard shortcut for opening dialog on Windows…
vinaykulk621 Aug 3, 2023
75c1404
docs(www): update import in remix installation (#974)
gutenye Aug 3, 2023
3c4631b
docs(www): add api reference for components.json (#982)
plbstl Aug 4, 2023
998d717
docs(www): fix typo
shadcn Aug 4, 2023
139088d
feat: themes (#1135)
shadcn Aug 7, 2023
7e70e51
fix: remove semicolon duplicated in theme.css (#1146)
torn4dom4n Aug 15, 2023
5a0e8a9
fix(www): extra semi
shadcn Aug 15, 2023
2f28cbc
fix(docs): missing form manual installation and aspect-ratio typo (#1…
dan5py Aug 16, 2023
a1a4b7a
fix(docs): add missing files in toast manual installation (#1243)
dan5py Aug 16, 2023
d5849b8
fix(www): payment method :has selector not working on Firefox (#1209)
alonsourena Aug 16, 2023
afc669f
fix(www): error in color values for slaet (#1224)
zsio Aug 17, 2023
566019e
docs(www): @hookform/resolvers installation missing (#1257)
edgarasben Aug 17, 2023
056f798
docs(www): remove unused `Link` import in form docs. (#1251)
vinaykulk621 Aug 17, 2023
f24b5be
fix(www): issue with border radius in component preview (#1265)
shadcn Aug 17, 2023
c9d9f04
docs: add contributing guide (#1266)
shadcn Aug 17, 2023
aac8557
docs: update CONTRIBUTING.md
shadcn Aug 17, 2023
eff5439
fix(toast): toast add missing text color class (#1162)
1danii Aug 17, 2023
3f388c9
docs(www): fix typo (#1270)
jsparkdev Aug 17, 2023
96cbe27
chore: remove a duplicate call in init.test (#1319)
K-Sato1995 Aug 24, 2023
c83bba8
chore(www): remove unneccesary imports (#1311)
dev-shetty Aug 24, 2023
cbb7975
docs(www): add Laravel install docs (#1279)
rcrosbourne Aug 24, 2023
75afc2b
fix(www): don't allow empty chat messages (#1137)
kevinmitch14 Aug 25, 2023
1675b7c
fix(scroll-area): missing key prop error (#1295)
SoyDiego Aug 25, 2023
13567bc
docs(www): update dark-mode for vite (#1118)
sankaSanjeeva Aug 26, 2023
946eb89
docs(www): update contrubuting.md and next.mdx (#1343)
NikharPandya Aug 31, 2023
9096d33
docs(www): update cli add options (#1484)
rajarju Sep 18, 2023
9e8f114
docs(www): update manual.mdx (#1471)
xbtmd Sep 18, 2023
9e8b34d
fix(www): rename DataTableFacetedFilter interface (#1438)
wobsoriano Sep 18, 2023
13fcaf3
docs(www): add missing prop to ThemeProvider (#1447)
RahimGuerfi Sep 18, 2023
95793b2
fix(www): enable input editing in the dialog demo (#1428)
yportfolio Sep 18, 2023
db35a19
fix(cli): deduplicate classNames in applyColorMapping (#1089)
santidalmasso Sep 19, 2023
100bc62
fix(cli): handle ts file extension (#1466)
c0b41 Sep 19, 2023
cc54329
feat(cli): support adding all components via CLI (#1033)
sramam Sep 19, 2023
cee0c25
feat(cli): add overwrite confirmation for existing components (#973)
plbstl Sep 19, 2023
b6e7468
chore: update repo for changeset
shadcn Sep 19, 2023
13ca8bd
feat(cli): do not ask for confirmation (#1554)
shadcn Sep 19, 2023
ce599fd
docs(cli): update link to documentation (#1555)
shadcn Sep 19, 2023
98606ef
chore(release): version packages (#1556)
github-actions[bot] Sep 19, 2023
354542b
fix(table): add relative class to handle overflow issue (#1370)
PixeledCode Sep 19, 2023
771bff5
fix: :recycle: remove old color story and update lock file
lloydrichards Sep 19, 2023
ddf9db8
build(storybook): :arrow_up: upgrade to storybook v7.4.2
lloydrichards Sep 19, 2023
f22c661
chore(storybook): :arrow_up: upgrade storybook to v7.4.5
lloydrichards Sep 28, 2023
d4be9fd
feat(storybook): :sparkles: add missing stories
lloydrichards Sep 28, 2023
d34e45f
refactor(storybook): :recycle: add missing Destructive story to Button
lloydrichards Sep 28, 2023
f4cb863
chore(storybook): :recycle: swap to alias import for stories
lloydrichards Sep 28, 2023
819caa7
chore(storybook): :construction_worker: update registry with new stor…
lloydrichards Sep 28, 2023
0f39a3f
feat(storybook): :sparkles: added Alert, Calender, Command and Form s…
lloydrichards Sep 28, 2023
e4dd1b5
feat(storybook): :sparkles: added Skeleton, Table and Toggle stories
lloydrichards Sep 28, 2023
8a1c761
fix(storybook): :bug: add args to all stories
lloydrichards Sep 28, 2023
a4f7be7
docs(www): add bun support for installation commands (#1445)
rgodha24 Sep 21, 2023
3027b1e
fix(scroll-area): added conditional flex-1 (#1296)
SoyDiego Sep 25, 2023
2799475
feat(storybook): :sparkles: added option to include stories in CLI init
lloydrichards Sep 28, 2023
24ce6b2
chore(storybook): :recycle: change default selected for stories in CL…
lloydrichards Sep 28, 2023
d41a900
chore(storybook): :memo: build registry with new stories
lloydrichards Sep 28, 2023
82a60dc
Merge branch 'main' into feat/storybook-cli
lloydrichards Oct 3, 2023
cccdc5b
chore(storybook): :green_heart: rebuild registry after merge
lloydrichards Oct 3, 2023
4b83d85
feat(storybook): :sparkles: added Toast story
lloydrichards Oct 15, 2023
8f669ca
chore(storybook): :arrow_up: upgrade storybook to v7.4.6
lloydrichards Oct 15, 2023
9763fda
Merge branch 'main' into feat/storybook-cli
lloydrichards Oct 15, 2023
3249b20
Merge branch 'main' into feat/storybook-cli
lloydrichards Oct 23, 2023
f4279c1
Merge branch 'main' into feat/storybook-cli
lloydrichards Oct 28, 2023
ca724cc
chore(storybook): :arrow_up: upgrade storybook to v7.5.2 and remove s…
lloydrichards Nov 3, 2023
d9ee6bd
fix(storybook): :pencil2: typo in colors story
lloydrichards Nov 3, 2023
74bff0c
Merge branch 'main' into feat/storybook-cli
lloydrichards Nov 6, 2023
8ef99b4
fix(storybook): :bug: wrap tooltip story in TooltipProvider
lloydrichards Nov 13, 2023
23ef40f
Merge branch 'main' into feat/storybook-cli
lloydrichards Nov 13, 2023
6ffaabf
Merge branch 'main' into feat/storybook-cli
lloydrichards Nov 19, 2023
15ce571
Merge branch 'main' into feat/storybook-cli
lloydrichards Nov 26, 2023
d739966
chore(storybook): :truck: move color stories into theme folder
lloydrichards Nov 29, 2023
fad6a6d
Merge branch 'main' into feat/storybook-cli
lloydrichards Dec 25, 2023
36c28a8
chore(deps): :arrow_up: update storybook to v7.6.6
lloydrichards Dec 25, 2023
16d2174
chore: :construction_worker: rebuilt registry
lloydrichards Dec 25, 2023
4e5601a
fix: :memo: remove comment in changelog
lloydrichards Dec 25, 2023
20c09c4
Merge branch 'main' into feat/storybook-cli
lloydrichards Dec 26, 2023
ef2e891
Merge branch 'main' into feat/storybook-cli
lloydrichards Jan 4, 2024
9c776c1
feat(storybook): :sparkles: add stories for new 0.5.0 components
lloydrichards Jan 4, 2024
727d7ba
fix(storybook): :bug: swap Geist font to Inter using preview-body.html
lloydrichards Jan 4, 2024
778ae19
fix: :green_heart: add Storybook addon-actions as a dep
lloydrichards Jan 5, 2024
fc209a7
Merge branch 'main' into feat/storybook-cli
lloydrichards Jan 7, 2024
bfecab0
chore: :adhesive_bandage: rebuild registry
lloydrichards Jan 7, 2024
35841cc
Merge branch 'main' into feat/storybook-cli
lloydrichards Jan 14, 2024
ab70ac2
Merge branch 'main' into feat/storybook-cli
lloydrichards Jan 16, 2024
b9a1747
Merge branch 'main' into feat/storybook-cli
lloydrichards Jan 20, 2024
b74c848
chore: :memo: rebuild registry
lloydrichards Jan 20, 2024
d8bfd38
docs(storybook): :memo: add JSDocs to all stories
lloydrichards Jan 22, 2024
4e6c05a
feat(storybook): :sparkles: add ToggleGroup story
lloydrichards Jan 22, 2024
1027b61
refactor(storybook): :recycle: abstract render and args to Base when …
lloydrichards Jan 22, 2024
044cd49
refactor(storybook): :recycle: add more Radix API based stories
lloydrichards Jan 22, 2024
12dbba5
style(storybook): :lipstick: center stories when appropriate
lloydrichards Jan 22, 2024
66313c8
chore: :adhesive_bandage: rebuild registry
lloydrichards Jan 22, 2024
ddaca57
docs(storybook): :memo: add note to Giest font fix
lloydrichards Jan 22, 2024
c32eb71
refactor(storybook): only import types for storybook
lloydrichards Jan 26, 2024
c4a2ec8
docs(storybook): :memo: expand documentation for each story
lloydrichards Jan 26, 2024
b6e90d2
Merge branch 'main' into feat/storybook-cli
lloydrichards Jan 29, 2024
63b7d45
refactor(storybook): :recycle: use satisfies and move default renders…
lloydrichards Jan 30, 2024
f43dd67
fix: :bug: rebuild lock file
lloydrichards Jan 30, 2024
bb9f883
refactor(storybook): :recycle: remove redundent render functions in meta
lloydrichards Jan 30, 2024
e9b1246
Merge branch 'main' into feat/storybook-cli
lloydrichards Feb 5, 2024
0401545
refactor(storybook): :recycle: remove dependencies between components
lloydrichards Feb 5, 2024
6b36499
Merge branch 'feat/storybook-cli' of https://github.com/lloydrichards…
lloydrichards Feb 5, 2024
c038954
chore(storybook): :arrow_up: upgrade storybook to v7.6.12
lloydrichards Feb 5, 2024
322a289
revert: :rewind: remove registry build outputs
lloydrichards Feb 5, 2024
d43b3c7
chore: :package: rebuild lock file from latest commit
lloydrichards Feb 6, 2024
df3fe5e
revert(storybook): :rewind: change stories back to using render and o…
lloydrichards Feb 6, 2024
c5c90a4
fix(storybook): :bug: added missing props to button story
lloydrichards Feb 7, 2024
452b613
fix(storybook): :fire: remove center layout on aspect ratio story
lloydrichards Feb 7, 2024
c1bb547
fix(storybook): :fire: remove unused imports
lloydrichards Feb 7, 2024
eedbb55
docs(storybook): :memo: expand menu components with new stories
lloydrichards Feb 8, 2024
1a3d6d2
build: :heavy_plus_sign: add eslint-plugin-storybook
lloydrichards Feb 20, 2024
d209695
chore: :arrow_up: upgrade storybook v7.6.17
lloydrichards Feb 20, 2024
3b5cf29
chore: :wrench: remove eslint config from package.json
lloydrichards Feb 20, 2024
85871c9
docs(storybook): :memo: add token stories from tailwind config
lloydrichards Feb 20, 2024
f144708
fix(storybook): :bug: missing key and test-xs
lloydrichards Feb 21, 2024
9531bc8
Merge branch 'main' into feat/storybook-cli
lloydrichards Mar 6, 2024
c6960bf
Merge branch 'main' into feat/storybook-cli
lloydrichards Mar 9, 2024
e747041
fix(storybook): :memo: add stories for Breadcrumb and InputOTP
lloydrichards Mar 9, 2024
b95441a
chore(deps): :arrow_up: upgrade input-otp v1.1.0
lloydrichards Mar 11, 2024
4c70498
Merge branch 'main' into feat/storybook-cli
lloydrichards Mar 12, 2024
97e9c21
chore(deps): :arrow_up: upgrade storybook v8.0
lloydrichards Mar 12, 2024
65a3244
Merge branch 'main' into feat/storybook-cli
lloydrichards Mar 14, 2024
b7db662
Merge branch 'main' into feat/storybook-cli
lloydrichards Mar 20, 2024
02a2dd0
Merge branch 'main' into feat/storybook-cli
lloydrichards Mar 21, 2024
4713feb
Merge branch 'main' into feat/storybook-cli
lloydrichards Mar 26, 2024
cc156ab
chore: :green_heart: rebuild lock
lloydrichards Mar 26, 2024
b99c4c0
refactor: :recycle: move stories into ui registry
lloydrichards Mar 26, 2024
5b02963
refactor(storybook): :recycle: use composition for InputOTP story
lloydrichards Mar 26, 2024
dda0db1
Merge branch 'main' into feat/storybook-cli
lloydrichards Apr 2, 2024
1443abb
chore: remove lock file
lloydrichards Apr 8, 2024
5c2e01a
chore: replace lock
lloydrichards Apr 8, 2024
b229832
chore: :recycle: align build-registry script
lloydrichards Apr 8, 2024
3073bdd
chore: :recycle: align build-registry
lloydrichards Apr 8, 2024
4baf8c3
Merge remote-tracking branch 'original/main' into feat/storybook-cli
lloydrichards Apr 8, 2024
d9c3002
chore: :recycle: add back the storybook build scripts
lloydrichards Apr 8, 2024
b41f39c
Merge branch 'main' into feat/storybook-cli
lloydrichards Apr 9, 2024
f4d23f7
Merge branch 'main' into feat/storybook-cli
lloydrichards Apr 9, 2024
3065240
Merge branch 'main' into feat/storybook-cli
lloydrichards Apr 22, 2024
c342747
refactor(script): :recycle: use switch to alternate between file type…
lloydrichards Apr 30, 2024
2a8f829
Merge branch 'main' into feat/storybook-cli
lloydrichards May 19, 2024
5df58f1
chore: remove update to registry.ts
lloydrichards Jun 3, 2024
9a53eed
Merge branch 'main' into feat/storybook-cli
lloydrichards Jul 28, 2024
50d7636
chore: upgrade storybook to 8.2.6
lloydrichards Jul 28, 2024
2f27087
feat(storybook): ✨ add chart stories
lloydrichards Jul 30, 2024
3ccdf16
Merge branch 'main' into feat/storybook-cli
lloydrichards Aug 7, 2024
085afc4
Merge branch 'main' into feat/storybook-cli
lloydrichards Aug 24, 2024
0a9b085
Merge branch 'main' into feat/storybook-cli
lloydrichards Aug 31, 2024
9d430c1
chore: rebuild lock
lloydrichards Aug 31, 2024
3f9c0ea
refactor: :recycle: extend registry with item type for stories
lloydrichards Aug 31, 2024
f0683e4
chore: :arrow_up: upgrade storybook to v8.2.9
lloydrichards Aug 31, 2024
4d679ee
chore: :rotating_light: fix linting for stories
lloydrichards Aug 31, 2024
b096c9a
Merge branch 'main' into feat/storybook-cli
lloydrichards Sep 3, 2024
f3b6ac1
Merge branch 'main' into feat/storybook-cli
lloydrichards Sep 23, 2024
6af9889
Merge branch 'main' into feat/storybook-cli
lloydrichards Oct 9, 2024
2220d66
Merge branch 'main' into feat/storybook-cli
lloydrichards Oct 25, 2024
e25fae1
fix: drawer type bug
Rikard-Johansson97 May 9, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
"next/core-web-vitals",
"turbo",
"prettier",
"plugin:tailwindcss/recommended"
"plugin:tailwindcss/recommended",
"plugin:storybook/recommended"
],
"plugins": ["tailwindcss"],
"ignorePatterns": ["**/fixtures/**"],
Expand Down
21 changes: 21 additions & 0 deletions apps/www/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import type { StorybookConfig } from "@storybook/nextjs"

const config = {
stories: [
"../registry/stories/**/*.mdx",
"../registry/stories/**/*.stories.@(js|jsx|ts|tsx)",
"./tokens/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
],
framework: {
name: "@storybook/nextjs",
options: {},
},
docs: {},
} satisfies StorybookConfig

export default config
6 changes: 6 additions & 0 deletions apps/www/.storybook/preview-body.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<style>
:root {
/* HACK: related to https://github.com/vercel/geist-font/issues/72 */
--font-geist-sans: Inter, sans-serif;
}
</style>
19 changes: 19 additions & 0 deletions apps/www/.storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import type { Preview } from "@storybook/react"

import "../styles/globals.css"

const preview = {
parameters: {
nextjs: {
appDirectory: true,
},
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
} satisfies Preview

export default preview
125 changes: 125 additions & 0 deletions apps/www/.storybook/tokens/color.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import React from "react"
import type { Meta, StoryObj } from "@storybook/react"
import resolveConfig from "tailwindcss/resolveConfig"

import tailwindConfig from "../../tailwind.config.cjs"
import { hexToHSL, hslToHex } from "./util"

const meta: Meta<{
swatch: {
name: string
colors: Record<string, string>
}[]
}> = {
title: "design/Color",
argTypes: {},
render: (args) => (
<table className="w-full table-auto text-left text-sm text-foreground rtl:text-right">
<thead className="text-xs bg-muted uppercase">
<tr>
<th scope="col" className="px-6 py-3">
Name
</th>
<th scope="col" className="px-6 py-3">
<span className="sr-only">Swatch</span>
</th>
</tr>
</thead>
<tbody>
{args.swatch.map(({ name, colors }) => (
<tr key={name} className="border-b bg-card">
<td className="px-6 py-4">{name}</td>
<td className="px-6 py-4">
<div className="flex overflow-x-clip rounded-md border shadow">
{Object.entries(colors).map(([name, value], idx) => {
const isHex = value.startsWith("#")
const style = window.getComputedStyle(document.body)
const variable = value.match(/var\(([^)]+)\)/)?.[1] ?? ""
const [h, s, l] =
style.getPropertyValue(variable).match(/\d+/g) ?? []
const colorHSL = isHex
? hexToHSL(value)
: `hsl(${h}, ${s}%, ${l}%)`
const colorHex = isHex
? value
: hslToHex(Number(h), Number(s), Number(l))
return (
<div key={idx} className="flex w-full flex-col pb-2">
<div
className="h-16 w-full"
style={{ backgroundColor: value }}
></div>
<p className="text-center font-semibold">{name}</p>
<p className="text-xs text-center opacity-70">
{variable}
</p>
<p className="text-xs text-center">{colorHex}</p>
<p className="text-xs text-center">{colorHSL}</p>
</div>
)
})}
</div>
</td>
</tr>
))}
</tbody>
</table>
),
}

export default meta

const fullConfig = resolveConfig(tailwindConfig)
type ColorKey = keyof typeof fullConfig.theme.colors

type Story = StoryObj<typeof meta>

const functionalSwatch = [
"foreground",
"background",
"primary",
"secondary",
"card",
"accent",
"muted",
"popover",
"destructive",
"input",
"border",
"ring",
] as unknown as Array<ColorKey>

export const Functional: Story = {
args: {
swatch: Object.entries(fullConfig.theme.colors)
.filter((d) => functionalSwatch.includes(d[0] as ColorKey))
.sort(
([a], [b]) =>
functionalSwatch.indexOf(a as ColorKey) -
functionalSwatch.indexOf(b as ColorKey)
)
.map(([name, colors]) => {
return {
name,
colors: typeof colors === "string" ? { [name]: colors } : colors,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this does not cover when user update the config to be more have more object in their color systems.

Maybe we can do flatten the object here instead?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/hughsk/flat/blob/master/index.js

can use util function from "flat" to flatten the object.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
colors: typeof colors === "string" ? { [name]: colors } : colors,
colors: typeof colors === "string" ? { [name]: colors } : flatten(colors),

}
}),
},
}
export const Tailwind: Story = {
args: {
swatch: Object.entries(fullConfig.theme.colors)
.filter(
(d) =>
![...functionalSwatch, "inherit", "current", "transparent"].includes(
d[0] as keyof typeof fullConfig.theme.colors
)
)
.map(([name, colors]) => {
return {
name,
colors: typeof colors === "string" ? { [name]: colors } : colors,
}
}),
},
}
74 changes: 74 additions & 0 deletions apps/www/.storybook/tokens/radius.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import React from "react"
import type { Meta, StoryObj } from "@storybook/react"
import resolveConfig from "tailwindcss/resolveConfig"

import tailwindConfig from "../../tailwind.config.cjs"

const fullConfig = resolveConfig(tailwindConfig)

const meta: Meta<{
radius: {
name: string
value: string
}[]
}> = {
title: "design/Radius",
argTypes: {},
args: {
radius: Object.keys(fullConfig.theme.borderRadius).map((name) => {
const value =
fullConfig.theme.borderRadius[
name as keyof typeof fullConfig.theme.borderRadius
]
return {
name,
value,
}
}),
},
render: (args) => (
<table className="w-full table-auto text-left text-sm text-foreground rtl:text-right">
<thead className="text-xs bg-muted uppercase">
<tr>
<th scope="col" className="px-6 py-3">
Name
</th>
<th scope="col" className="hidden px-6 py-3 sm:table-cell">
Size
</th>
<th scope="col" className="px-6 py-3">
<span className="sr-only">Preview</span>
</th>
</tr>
</thead>
<tbody>
{args.radius.map(({ name, value }) => {
const style = window.getComputedStyle(document.body)
const variable = value.match(/var\(([^)]+)\)/)?.[1] ?? ""
const resolved = style.getPropertyValue(variable)
const resolvedValue = value.replace(/var\(--(.*?)\)/, resolved)
return (
<tr key={name} className="border-b bg-card">
<td className="px-6 py-4">{name}</td>
<td className="hidden px-6 py-4 sm:table-cell">
{resolvedValue}
</td>
<td className="px-6 py-4">
<div
className="size-20 border-2 bg-background"
style={{ borderRadius: value }}
/>
</td>
</tr>
)
})}
</tbody>
</table>
),
}

export default meta

type Story = StoryObj<typeof meta>

export const Core: Story = {}
77 changes: 77 additions & 0 deletions apps/www/.storybook/tokens/shadow.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import React from "react"
import type { Meta, StoryObj } from "@storybook/react"
import resolveConfig from "tailwindcss/resolveConfig"

import tailwindConfig from "../../tailwind.config.cjs"

const fullConfig = resolveConfig(tailwindConfig)

const meta: Meta<{
shadow: {
name: string
value: string
}[]
}> = {
title: "design/Shadow",
argTypes: {},
args: {
shadow: Object.keys(fullConfig.theme.boxShadow).map((name) => {
const value =
fullConfig.theme.boxShadow[
name as keyof typeof fullConfig.theme.boxShadow
]
return {
name,
value,
}
}),
},
render: (args) => (
<table className="w-full table-auto text-left text-sm text-foreground rtl:text-right">
<thead className="text-xs bg-muted uppercase">
<tr>
<th scope="col" className="px-6 py-3">
Name
</th>
<th scope="col" className="hidden px-6 py-3 sm:table-cell">
Size
</th>
<th scope="col" className="px-6 py-3">
<span className="sr-only">Preview</span>
</th>
</tr>
</thead>
<tbody>
{args.shadow.map(({ name, value }) => {
const style = window.getComputedStyle(document.body)
const variable = value.match(/var\(([^)]+),/)?.[1] ?? ""
const resolved = style.getPropertyValue(variable)
const resolvedValue = value
.replace(/var\(--(.*?)\)/, resolved)
.replace(/,/g, ",\n")
.replace(/\n\n/g, "\n")
return (
<tr key={name} className="border-b bg-card">
<td className="px-6 py-4">{name}</td>
<td className="hidden whitespace-pre-line px-6 py-4 sm:table-cell">
{resolvedValue}
</td>
<td className="px-6 py-4">
<div
className="size-20 rounded border bg-background"
style={{ boxShadow: value }}
/>
</td>
</tr>
)
})}
</tbody>
</table>
),
}

export default meta

type Story = StoryObj<typeof meta>

export const Core: Story = {}
Loading