From c30a3c3f0c7b76448ad8e32a6acb695eabb2e275 Mon Sep 17 00:00:00 2001 From: Yoshiharu KAMATA Date: Sun, 28 Jan 2024 09:46:01 +0900 Subject: [PATCH] release 0.4.0 --- README.md | 4 +- apps/web/package.json | 2 +- packages/rsc-daisyui/.storybook/main.ts | 2 +- packages/rsc-daisyui/package.json | 2 +- .../src/accordion/accordion.stories.tsx | 1 - .../rsc-daisyui/src/avatar/avatar.stories.tsx | 1 - .../rsc-daisyui/src/badge/badge.stories.tsx | 1 - .../src/breadcrumbs/breadcrumbs.stories.tsx | 1 - .../rsc-daisyui/src/button/button.stories.tsx | 1 - .../rsc-daisyui/src/card/card.stories.tsx | 1 - .../src/carousel/carousel.stories.tsx | 1 - .../src/chat-bubble/chat-bubble.stories.tsx | 1 - .../src/collapse/collapse.stories.tsx | 1 - .../src/countdown/countdown.stories.tsx | 1 - .../rsc-daisyui/src/diff/diff.stories.tsx | 1 - .../src/dropdown/dropdown.stories.tsx | 1 - packages/rsc-daisyui/src/index.tsx | 2 + packages/rsc-daisyui/src/kbd/kbd.stories.tsx | 3 +- .../src/loading/loading.stories.tsx | 1 - .../rsc-daisyui/src/menu/menu.stories.tsx | 1 - .../rsc-daisyui/src/modal/modal.stories.tsx | 1 - .../rsc-daisyui/src/navbar/navbar.stories.tsx | 1 - .../rsc-daisyui/src/stat/stat.stories.tsx | 1 - packages/rsc-daisyui/src/table/index.tsx | 1 + .../rsc-daisyui/src/table/table.stories.tsx | 585 ++++++++++++++++++ packages/rsc-daisyui/src/table/table.tsx | 25 + packages/rsc-daisyui/src/timeline/index.tsx | 1 + .../rsc-daisyui/src/timeline/timeline-end.tsx | 13 + .../src/timeline/timeline-middle.tsx | 30 + .../src/timeline/timeline-start.tsx | 10 + .../src/timeline/timeline.stories.tsx | 350 +++++++++++ .../rsc-daisyui/src/timeline/timeline.tsx | 31 + pnpm-lock.yaml | 2 +- 33 files changed, 1055 insertions(+), 25 deletions(-) create mode 100644 packages/rsc-daisyui/src/table/index.tsx create mode 100644 packages/rsc-daisyui/src/table/table.stories.tsx create mode 100644 packages/rsc-daisyui/src/table/table.tsx create mode 100644 packages/rsc-daisyui/src/timeline/index.tsx create mode 100644 packages/rsc-daisyui/src/timeline/timeline-end.tsx create mode 100644 packages/rsc-daisyui/src/timeline/timeline-middle.tsx create mode 100644 packages/rsc-daisyui/src/timeline/timeline-start.tsx create mode 100644 packages/rsc-daisyui/src/timeline/timeline.stories.tsx create mode 100644 packages/rsc-daisyui/src/timeline/timeline.tsx diff --git a/README.md b/README.md index 355a91f..e86093c 100644 --- a/README.md +++ b/README.md @@ -84,8 +84,8 @@ export default (props) => { - [x] Diff - [x] Kbd - [x] Stat -- [ ] Table -- [ ] Timeline +- [x] Table +- [x] Timeline #### Navigation diff --git a/apps/web/package.json b/apps/web/package.json index e1615ba..ce95671 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -12,7 +12,7 @@ "next": "^14.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "rsc-daisyui": "^0.3.4" + "rsc-daisyui": "^0.4.0" }, "devDependencies": { "@next/eslint-plugin-next": "^13.5.6", diff --git a/packages/rsc-daisyui/.storybook/main.ts b/packages/rsc-daisyui/.storybook/main.ts index 0484eac..6c8e758 100644 --- a/packages/rsc-daisyui/.storybook/main.ts +++ b/packages/rsc-daisyui/.storybook/main.ts @@ -25,7 +25,7 @@ const config: StorybookConfig = { options: {}, }, docs: { - autodocs: "tag", + autodocs: true, }, }; export default config; diff --git a/packages/rsc-daisyui/package.json b/packages/rsc-daisyui/package.json index f544c9d..c23c851 100644 --- a/packages/rsc-daisyui/package.json +++ b/packages/rsc-daisyui/package.json @@ -1,7 +1,7 @@ { "name": "rsc-daisyui", "main": "./dist/index.js", - "version": "0.3.4", + "version": "0.4.0", "description": "daisyUI for React Server Component", "homepage": "https://yoshi6jp.github.io/rsc-daisyui/", "bugs": { diff --git a/packages/rsc-daisyui/src/accordion/accordion.stories.tsx b/packages/rsc-daisyui/src/accordion/accordion.stories.tsx index 363fdb5..f3005e9 100644 --- a/packages/rsc-daisyui/src/accordion/accordion.stories.tsx +++ b/packages/rsc-daisyui/src/accordion/accordion.stories.tsx @@ -8,7 +8,6 @@ import { default as Accordion, AccordionBase } from "./accordion"; const meta: Meta = { title: "Data Display/Accordion", component: Accordion, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(AccordionBase)), }; diff --git a/packages/rsc-daisyui/src/avatar/avatar.stories.tsx b/packages/rsc-daisyui/src/avatar/avatar.stories.tsx index 895051c..6e0341c 100644 --- a/packages/rsc-daisyui/src/avatar/avatar.stories.tsx +++ b/packages/rsc-daisyui/src/avatar/avatar.stories.tsx @@ -8,7 +8,6 @@ import { Avatar } from "."; const meta: Meta = { title: "Data Display/Avatar", component: Avatar, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(Avatar)), }; diff --git a/packages/rsc-daisyui/src/badge/badge.stories.tsx b/packages/rsc-daisyui/src/badge/badge.stories.tsx index d7c48ef..5073d8e 100644 --- a/packages/rsc-daisyui/src/badge/badge.stories.tsx +++ b/packages/rsc-daisyui/src/badge/badge.stories.tsx @@ -8,7 +8,6 @@ import { Badge } from "."; const meta: Meta = { title: "Data Display/Badge", component: Badge, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(Badge)), }; diff --git a/packages/rsc-daisyui/src/breadcrumbs/breadcrumbs.stories.tsx b/packages/rsc-daisyui/src/breadcrumbs/breadcrumbs.stories.tsx index fe0cc20..3a189c4 100644 --- a/packages/rsc-daisyui/src/breadcrumbs/breadcrumbs.stories.tsx +++ b/packages/rsc-daisyui/src/breadcrumbs/breadcrumbs.stories.tsx @@ -7,7 +7,6 @@ import { BreadcrumbsBase, Breadcrumbs } from "./breadcrumbs"; const meta: Meta = { title: "Navigation/Breadcrumbs", component: Breadcrumbs, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(BreadcrumbsBase)), }; diff --git a/packages/rsc-daisyui/src/button/button.stories.tsx b/packages/rsc-daisyui/src/button/button.stories.tsx index c618b6e..dbe297f 100644 --- a/packages/rsc-daisyui/src/button/button.stories.tsx +++ b/packages/rsc-daisyui/src/button/button.stories.tsx @@ -8,7 +8,6 @@ import { Button } from "./button"; const meta: Meta = { title: "Actions/Button", component: Button, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(Button)), render: ({ children, ...args }) => , }; diff --git a/packages/rsc-daisyui/src/card/card.stories.tsx b/packages/rsc-daisyui/src/card/card.stories.tsx index b60feae..9f6d94b 100644 --- a/packages/rsc-daisyui/src/card/card.stories.tsx +++ b/packages/rsc-daisyui/src/card/card.stories.tsx @@ -8,7 +8,6 @@ import { Card } from "."; const meta: Meta = { title: "Data Display/Card", component: Card, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(Card)), }; diff --git a/packages/rsc-daisyui/src/carousel/carousel.stories.tsx b/packages/rsc-daisyui/src/carousel/carousel.stories.tsx index 5d12333..0339d00 100644 --- a/packages/rsc-daisyui/src/carousel/carousel.stories.tsx +++ b/packages/rsc-daisyui/src/carousel/carousel.stories.tsx @@ -8,7 +8,6 @@ import { Carousel } from "."; const meta: Meta = { title: "Data Display/Carousel", component: Carousel, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(Carousel)), }; export default meta; diff --git a/packages/rsc-daisyui/src/chat-bubble/chat-bubble.stories.tsx b/packages/rsc-daisyui/src/chat-bubble/chat-bubble.stories.tsx index ecc7ea7..b028d92 100644 --- a/packages/rsc-daisyui/src/chat-bubble/chat-bubble.stories.tsx +++ b/packages/rsc-daisyui/src/chat-bubble/chat-bubble.stories.tsx @@ -7,7 +7,6 @@ import { Chat } from "."; const meta: Meta = { title: "Data Display/Chat bubble", component: Chat.Bubble, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(Chat.Bubble)), }; diff --git a/packages/rsc-daisyui/src/collapse/collapse.stories.tsx b/packages/rsc-daisyui/src/collapse/collapse.stories.tsx index 415f82f..26081e2 100644 --- a/packages/rsc-daisyui/src/collapse/collapse.stories.tsx +++ b/packages/rsc-daisyui/src/collapse/collapse.stories.tsx @@ -7,7 +7,6 @@ import { default as Collapse } from "./collapse"; const meta: Meta = { title: "Data Display/Collapse", component: Collapse, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(Collapse)), }; export default meta; diff --git a/packages/rsc-daisyui/src/countdown/countdown.stories.tsx b/packages/rsc-daisyui/src/countdown/countdown.stories.tsx index cca3554..bd3bcf8 100644 --- a/packages/rsc-daisyui/src/countdown/countdown.stories.tsx +++ b/packages/rsc-daisyui/src/countdown/countdown.stories.tsx @@ -7,7 +7,6 @@ import { default as Countdown } from "./countdown"; const meta: Meta = { title: "Data Display/Countdown", component: Countdown, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(Countdown)), }; diff --git a/packages/rsc-daisyui/src/diff/diff.stories.tsx b/packages/rsc-daisyui/src/diff/diff.stories.tsx index fe18213..f49f5f4 100644 --- a/packages/rsc-daisyui/src/diff/diff.stories.tsx +++ b/packages/rsc-daisyui/src/diff/diff.stories.tsx @@ -7,7 +7,6 @@ import { Diff, DiffBase } from "./diff"; const meta: Meta = { title: "Data Display/Diff", component: Diff, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(DiffBase)), parameters: { controls: { diff --git a/packages/rsc-daisyui/src/dropdown/dropdown.stories.tsx b/packages/rsc-daisyui/src/dropdown/dropdown.stories.tsx index 500b4d1..fc9cce1 100644 --- a/packages/rsc-daisyui/src/dropdown/dropdown.stories.tsx +++ b/packages/rsc-daisyui/src/dropdown/dropdown.stories.tsx @@ -8,7 +8,6 @@ import { default as Dropdown, DropdownBase } from "./dropdown"; const meta: Meta = { title: "Actions/Dropdown", component: Dropdown, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(DropdownBase)), }; diff --git a/packages/rsc-daisyui/src/index.tsx b/packages/rsc-daisyui/src/index.tsx index eb2b853..32c8770 100644 --- a/packages/rsc-daisyui/src/index.tsx +++ b/packages/rsc-daisyui/src/index.tsx @@ -25,5 +25,7 @@ export * from "./navbar"; export * from "./radio"; export * from "./swap"; export * from "./stat"; +export * from "./table"; export * from "./theme"; +export * from "./timeline"; export * from "./toggle"; diff --git a/packages/rsc-daisyui/src/kbd/kbd.stories.tsx b/packages/rsc-daisyui/src/kbd/kbd.stories.tsx index 65d7f96..bb684aa 100644 --- a/packages/rsc-daisyui/src/kbd/kbd.stories.tsx +++ b/packages/rsc-daisyui/src/kbd/kbd.stories.tsx @@ -1,13 +1,12 @@ import React from "react"; import type { Meta, StoryObj } from "@storybook/react"; import { getVariantConfig } from "@tw-classed/react"; -import { Kbd } from "."; import { toArgTypes } from "../storybook-helpers"; +import { Kbd } from "."; const meta: Meta = { title: "Data Display/Kbd", component: Kbd, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(Kbd)), }; export default meta; diff --git a/packages/rsc-daisyui/src/loading/loading.stories.tsx b/packages/rsc-daisyui/src/loading/loading.stories.tsx index 77cd1df..c4bdcec 100644 --- a/packages/rsc-daisyui/src/loading/loading.stories.tsx +++ b/packages/rsc-daisyui/src/loading/loading.stories.tsx @@ -7,7 +7,6 @@ import { Loading } from "."; const meta: Meta = { title: "Feedback/Loading", component: Loading, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(Loading)), }; diff --git a/packages/rsc-daisyui/src/menu/menu.stories.tsx b/packages/rsc-daisyui/src/menu/menu.stories.tsx index ee5e984..0e1c269 100644 --- a/packages/rsc-daisyui/src/menu/menu.stories.tsx +++ b/packages/rsc-daisyui/src/menu/menu.stories.tsx @@ -7,7 +7,6 @@ import { Menu } from "."; const meta: Meta = { title: "Navigation/Menu", component: Menu, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(Menu)), }; diff --git a/packages/rsc-daisyui/src/modal/modal.stories.tsx b/packages/rsc-daisyui/src/modal/modal.stories.tsx index 391b1e2..14ee3fd 100644 --- a/packages/rsc-daisyui/src/modal/modal.stories.tsx +++ b/packages/rsc-daisyui/src/modal/modal.stories.tsx @@ -9,7 +9,6 @@ import { Modal } from "."; const meta: Meta = { title: "Actions/Modal", component: Modal, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(ModalBase), { backdrop: "boolean", }), diff --git a/packages/rsc-daisyui/src/navbar/navbar.stories.tsx b/packages/rsc-daisyui/src/navbar/navbar.stories.tsx index 1c42f32..8f33028 100644 --- a/packages/rsc-daisyui/src/navbar/navbar.stories.tsx +++ b/packages/rsc-daisyui/src/navbar/navbar.stories.tsx @@ -8,7 +8,6 @@ import { Navbar } from "."; const meta: Meta = { title: "Navigation/Navbar", component: Navbar, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(Navbar)), }; diff --git a/packages/rsc-daisyui/src/stat/stat.stories.tsx b/packages/rsc-daisyui/src/stat/stat.stories.tsx index b76db4b..40ea839 100644 --- a/packages/rsc-daisyui/src/stat/stat.stories.tsx +++ b/packages/rsc-daisyui/src/stat/stat.stories.tsx @@ -8,7 +8,6 @@ import { Stats } from "."; const meta: Meta = { title: "Data Display/Stat", component: Stats, - tags: ["autodocs"], argTypes: toArgTypes(getVariantConfig(Stats)), }; diff --git a/packages/rsc-daisyui/src/table/index.tsx b/packages/rsc-daisyui/src/table/index.tsx new file mode 100644 index 0000000..8efc431 --- /dev/null +++ b/packages/rsc-daisyui/src/table/index.tsx @@ -0,0 +1 @@ +export { Table } from "./table"; diff --git a/packages/rsc-daisyui/src/table/table.stories.tsx b/packages/rsc-daisyui/src/table/table.stories.tsx new file mode 100644 index 0000000..18633d5 --- /dev/null +++ b/packages/rsc-daisyui/src/table/table.stories.tsx @@ -0,0 +1,585 @@ +import React from "react"; +import type { Meta, StoryObj } from "@storybook/react"; +import { getVariantConfig } from "@tw-classed/react"; +import { toArgTypes } from "../storybook-helpers"; +import { Avatar, Badge, Button, Checkbox, Mask } from ".."; +import { Table } from "."; + +const meta: Meta = { + title: "Data Display/Table", + component: Table, + argTypes: toArgTypes(getVariantConfig(Table)), +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: (args) => ( +
+ + {/* head */} + + + + + + + + + {/* row 1 */} + + + + + + + {/* row 2 */} + + + + + + + {/* row 3 */} + + + + + + + +
+ NameJobFavorite Color
1Cy GandertonQuality Control SpecialistBlue
2Hart HagertyDesktop Support TechnicianPurple
3Brice SwyreTax AccountantRed
+
+ ), +}; + +export const ActiveRow: Story = { + render: (args) => ( +
+ + {/* head */} + + + + + + + + + {/* row 1 */} + + + + + + + {/* row 2 */} + + + + + + + {/* row 3 */} + + + + + + + +
+ NameJobFavorite Color
1Cy GandertonQuality Control SpecialistBlue
2Hart HagertyDesktop Support TechnicianPurple
3Brice SwyreTax AccountantRed
+
+ ), +}; + +export const HighlightsOnHover: Story = { + render: (args) => ( +
+ + {/* head */} + + + + + + + + + {/* row 1 */} + + + + + + + {/* row 2 */} + + + + + + + {/* row 3 */} + + + + + + + +
+ NameJobFavorite Color
1Cy GandertonQuality Control SpecialistBlue
2Hart HagertyDesktop Support TechnicianPurple
3Brice SwyreTax AccountantRed
+
+ ), +}; + +export const Zebra: Story = { + args: { + zebra: true, + }, + render: (args) => ( +
+ + {/* head */} + + + + + + + + + {/* row 1 */} + + + + + + + {/* row 2 */} + + + + + + + {/* row 3 */} + + + + + + + +
+ NameJobFavorite Color
1Cy GandertonQuality Control SpecialistBlue
2Hart HagertyDesktop Support TechnicianPurple
3Brice SwyreTax AccountantRed
+
+ ), +}; +export const VisualElements: Story = { + render: (args) => ( +
+ + {/* head */} + + + + + + + + + + {/* row 1 */} + + + + + + + + {/* row 2 */} + + + + + + + + {/* row 3 */} + + + + + + + + {/* row 4 */} + + + + + + + + + {/* foot */} + + + + + + + +
+ + NameJobFavorite Color +
+ + +
+ + + Avatar Tailwind CSS Component + + +
+
Hart Hagerty
+
United States
+
+
+ 		+ Zemlak, Daniel and Leannon +
+ + Desktop Support Technician + + 		Purple + +
+ + +
+ + + Avatar Tailwind CSS Component + + +
+
Brice Swyre
+
China
+
+
+ 		+ Carroll Group +
+ + Tax Accountant + + 		Red + +
+ + +
+ + + Avatar Tailwind CSS Component + + +
+
Marjy Ferencz
+
Russia
+
+
+ 		+ Rowe-Schoen +
+ + Office Assistant I + + 		Crimson + +
+ + +
+ + + Avatar Tailwind CSS Component + + +
+
Yancy Tear
+
Brazil
+
+
+ 		+ Wyman-Ledner +
+ + Community Outreach Specialist + + 		Indigo + +
+ NameJobFavorite Color +
+
+ ), +}; + +export const TableXs: Story = { + args: { + size: "xs", + }, + render: (args) => ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ NameJobcompanylocationLast LoginFavorite Color
1Cy GandertonQuality Control SpecialistLittel, Schaden and VandervortCanada12/16/2020Blue
2Hart HagertyDesktop Support TechnicianZemlak, Daniel and LeannonUnited States12/5/2020Purple
3Brice SwyreTax AccountantCarroll GroupChina8/15/2020Red
4Marjy FerenczOffice Assistant IRowe-SchoenRussia3/25/2021Crimson
5Yancy TearCommunity Outreach SpecialistWyman-LednerBrazil5/22/2020Indigo
6Irma VasilikEditorWiza, Bins and EmardVenezuela12/8/2020Purple
7Meghann DurtnalStaff Accountant IVSchuster-SchimmelPhilippines2/17/2021Yellow
8Sammy SestonAccountant IO'Hara, Welch and KeeblerIndonesia5/23/2020Crimson
9Lesya TinhamSafety Technician IVTurner-KuhlmanPhilippines2/21/2021Maroon
10Zaneta TewkesburyVP MarketingSauer LLCChad6/23/2020Green
11Andy TippleLibrarianHilpert GroupPoland7/9/2020Indigo
12Sophi BilesRecruiting ManagerGutmann IncIndonesia2/12/2021Maroon
13Florida GarcesWeb Developer IVGaylord, Pacocha and BaumbachPoland5/31/2020Purple
14Maribeth PoppingAnalyst ProgrammerDeckow-PourosPortugal4/27/2021Aquamarine
15Moritz DryburghDental HygienistSchiller, Cole and HackettSri Lanka8/8/2020Crimson
16Reid SemirasTeacherSporer, Sipes and RogahnPoland7/30/2020Green
17Alec LethbyTeacherReichel, Glover and HamillChina2/28/2021Khaki
18Aland WilberQuality Control SpecialistKshlerin, Rogahn and SwaniawskiCzech Republic9/29/2020Purple
19Teddie DuerdenStaff Accountant IIIPouros, Ullrich and WindlerFrance10/27/2020Aquamarine
20Lorelei BlackstoneData CoordiatorWitting, Kutch and GreenfelderKazakhstan6/3/2020Red
+ NameJobcompanylocationLast LoginFavorite Color
+
+ ), +}; diff --git a/packages/rsc-daisyui/src/table/table.tsx b/packages/rsc-daisyui/src/table/table.tsx new file mode 100644 index 0000000..f6b7bdc --- /dev/null +++ b/packages/rsc-daisyui/src/table/table.tsx @@ -0,0 +1,25 @@ +import { classed } from "../classed.config"; +import { configWithThemeFn } from "../config"; + +export const Table = classed( + "table", + "table", + configWithThemeFn({ + zebra: { + true: "table-zebra", + }, + size: { + lg: "table-lg", + md: "table-md", + sm: "table-sm", + xs: "table-xs", + }, + pinRows: { + true: "table-pin-rows", + }, + pinCols: { + true: "table-pin-cols", + }, + }) +); +Table.displayName = "Table"; diff --git a/packages/rsc-daisyui/src/timeline/index.tsx b/packages/rsc-daisyui/src/timeline/index.tsx new file mode 100644 index 0000000..21bbc20 --- /dev/null +++ b/packages/rsc-daisyui/src/timeline/index.tsx @@ -0,0 +1 @@ +export { default as Timeline } from "./timeline"; diff --git a/packages/rsc-daisyui/src/timeline/timeline-end.tsx b/packages/rsc-daisyui/src/timeline/timeline-end.tsx new file mode 100644 index 0000000..3fe0131 --- /dev/null +++ b/packages/rsc-daisyui/src/timeline/timeline-end.tsx @@ -0,0 +1,13 @@ +import { classed } from "../classed.config"; + +export const TimelineEnd = classed("div", "timeline-end", { + variants: { + box: { + true: "timeline-box", + }, + }, + defaultVariants: { + box: true, + }, +}); +TimelineEnd.displayName = "TimelineEnd"; diff --git a/packages/rsc-daisyui/src/timeline/timeline-middle.tsx b/packages/rsc-daisyui/src/timeline/timeline-middle.tsx new file mode 100644 index 0000000..702df22 --- /dev/null +++ b/packages/rsc-daisyui/src/timeline/timeline-middle.tsx @@ -0,0 +1,30 @@ +import { type ComponentProps, deriveClassed } from "@tw-classed/react"; +import { classed } from "../classed.config"; + +export const TimelineMiddleBase = classed("div", "timeline-middle"); + +export type TimelineMiddleProps = ComponentProps; +export const TimelineMiddle = deriveClassed< + typeof TimelineMiddleBase, + TimelineMiddleProps +>(({ children, ...rest }, ref) => ( + + {children ? ( + children + ) : ( + + + + )} + +)); +TimelineMiddle.displayName = "TimelineMiddle"; diff --git a/packages/rsc-daisyui/src/timeline/timeline-start.tsx b/packages/rsc-daisyui/src/timeline/timeline-start.tsx new file mode 100644 index 0000000..7ce78ff --- /dev/null +++ b/packages/rsc-daisyui/src/timeline/timeline-start.tsx @@ -0,0 +1,10 @@ +import { classed } from "../classed.config"; + +export const TimelineStart = classed("div", "timeline-start", { + variants: { + box: { + true: "timeline-box", + }, + }, +}); +TimelineStart.displayName = "TimelineStart"; diff --git a/packages/rsc-daisyui/src/timeline/timeline.stories.tsx b/packages/rsc-daisyui/src/timeline/timeline.stories.tsx new file mode 100644 index 0000000..d0a208c --- /dev/null +++ b/packages/rsc-daisyui/src/timeline/timeline.stories.tsx @@ -0,0 +1,350 @@ +import React from "react"; +import type { Meta, StoryObj } from "@storybook/react"; +import { getVariantConfig } from "@tw-classed/react"; +import { toArgTypes } from "../storybook-helpers"; +import { Timeline } from "."; + +const meta: Meta = { + title: "Data Display/Timeline", + component: Timeline, + argTypes: toArgTypes(getVariantConfig(Timeline)), +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: (args) => ( + +
  • + 1984 + + First Macintosh computer +
    +
    • +
  • +
    + 1998 + + iMac +
    +
    • +
  • +
    + 2001 + + iPod +
    +
    • +
  • +
    + 2007 + + iPhone +
    +
    • +
  • +
    + 2015 + + Apple Watch +
    • +     + ), +}; + +export const BottomSideOnly: Story = { + render: (args) => ( + +
  • + + First Macintosh computer +
    +
    • +
  • +
    + + iMac +
    +
    • +
  • +
    + + iPod +
    +
    • +
  • +
    + + iPhone +
    +
    • +
  • +
    + + Apple Watch +
    • +     + ), +}; + +export const TopSideOnly: Story = { + render: (args) => ( + +
  • + First Macintosh computer + +
    +
    • +
  • +
    + iMac + +
    +
    • +
  • +
    + iPod + +
    +
    • +
  • +
    + iPhone + +
    +
    • +
  • +
    + Apple Watch + +
    • +     + ), +}; + +export const DifferentSides: Story = { + render: (args) => ( + +
  • + First Macintosh computer + +
    +
    • +
  • +
    + + iMac +
    +
    • +
  • +
    + iPod + +
    +
    • +
  • +
    + + iPhone +
    +
    • +
  • +
    + Apple Watch + +
    • +     + ), +}; + +export const ColorfulLines: Story = { + render: (args) => ( + +
  • + First Macintosh computer + +
    +
    • +
  • +
    + + iMac +
    +
    • +
  • +
    + iPod + +
    +
    • +
  • +
    + + iPhone +
    +
    • +
  • +
    + Apple Watch + +
    • +     + ), +}; + +export const WithoutIcons: Story = { + render: (args) => ( + +
  • + First Macintosh computer +
    +
    • +
  • +
    + iMac +
    +
    • +
  • +
    + iPod +
    +
    • +
  • +
    + iPhone +
    +
    • +
  • +
    + Apple Watch +
    • +     + ), +}; + +export const Vertical: Story = { + ...Default, + args: { + vertical: true, + }, +}; +export const VerticalWithBottomSideOnly: Story = { + ...BottomSideOnly, + args: { + vertical: true, + }, +}; + +export const VerticalWithTopSideOnly: Story = { + ...TopSideOnly, + args: { + vertical: true, + }, +}; + +export const VerticalWithDifferentSides: Story = { + ...DifferentSides, + args: { + vertical: true, + }, +}; + +export const VerticalWithColorfulLines: Story = { + ...ColorfulLines, + args: { + vertical: true, + }, +}; + +export const Responsive: Story = { + ...Default, + args: { + vertical: true, + className: "lg:timeline-horizontal", + }, +}; + +export const IconSnappedToStart: Story = { + args: { + snapIcon: true, + vertical: true, + className: "max-md:timeline-compact", + }, + render: (args) => ( + +
  • + + + +
    First Macintosh computer
    + The Apple Macintosh—later rebranded as the Macintosh 128K—is the + original Apple Macintosh personal computer. It played a pivotal role + in establishing desktop publishing as a general office function. The + motherboard, a 9 in (23 cm) CRT monitor, and a floppy drive were + housed in a beige case with integrated carrying handle; it came with a + keyboard and single-button mouse. +     +
    +
    • +
  • +
    + + + +
    iMac
    + iMac is a family of all-in-one Mac desktop computers designed and + built by Apple Inc. It has been the primary part of Apple's + consumer desktop offerings since its debut in August 1998, and has + evolved through seven distinct forms +     +
    +
    • +
  • +
    + + + +
    iPod
    + The iPod is a discontinued series of portable media players and + multi-purpose mobile devices designed and marketed by Apple Inc. The + first version was released on October 23, 2001, about 8+1⁄2 months + after the Macintosh version of iTunes was released. Apple sold an + estimated 450 million iPod products as of 2022. Apple discontinued the + iPod product line on May 10, 2022. At over 20 years, the iPod brand is + the oldest to be discontinued by Apple +     +
    +
    • +
  • +
    + + + +
    iPhone
    + iPhone is a line of smartphones produced by Apple Inc. that use + Apple's own iOS mobile operating system. The first-generation + iPhone was announced by then-Apple CEO Steve Jobs on January 9, 2007. + Since then, Apple has annually released new iPhone models and iOS + updates. As of November 1, 2018, more than 2.2 billion iPhones had + been sold. As of 2022, the iPhone accounts for 15.6% of global + smartphone market share +     +
    +
    • +
  • +
    + + +
    + +
    Apple Watch
    + The Apple Watch is a line of smartwatches produced by Apple Inc. It + incorporates fitness tracking, health-oriented capabilities, and + wireless telecommunication, and integrates with iOS and other Apple + products and services +
    +
    • +     + ), +}; diff --git a/packages/rsc-daisyui/src/timeline/timeline.tsx b/packages/rsc-daisyui/src/timeline/timeline.tsx new file mode 100644 index 0000000..7b5975c --- /dev/null +++ b/packages/rsc-daisyui/src/timeline/timeline.tsx @@ -0,0 +1,31 @@ +import { classed } from "../classed.config"; +import { configWithThemeFn } from "../config"; +import { TimelineEnd } from "./timeline-end"; +import { TimelineMiddle } from "./timeline-middle"; +import { TimelineStart } from "./timeline-start"; + +export const Timeline = classed( + "ul", + "timeline", + configWithThemeFn({ + horizontal: { + true: "timeline-horizontal", + }, + vertical: { + true: "timeline-vertical", + }, + compact: { + true: "timeline-compact", + }, + snapIcon: { + true: "timeline-snap-icon", + }, + }) +); +Timeline.displayName = "Timeline"; + +export default Object.assign(Timeline, { + Start: TimelineStart, + Middle: TimelineMiddle, + End: TimelineEnd, +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8f25b3f..39e7098 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,7 +39,7 @@ importers: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) rsc-daisyui: - specifier: ^0.3.4 + specifier: ^0.4.0 version: link:../../packages/rsc-daisyui devDependencies: '@next/eslint-plugin-next':