From bed95ff9b833ad017c1429c8bb07f6fd970be899 Mon Sep 17 00:00:00 2001 From: Roman Date: Thu, 5 Dec 2024 17:31:06 +0100 Subject: [PATCH 1/4] 0.2.5 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index a57d72d..95bdb00 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@blue-tomato/blueto", - "version": "0.2.4", + "version": "0.2.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@blue-tomato/blueto", - "version": "0.2.4", + "version": "0.2.5", "license": "EUPL-1.2", "dependencies": { "classnames": "^2.5.1", diff --git a/package.json b/package.json index 9e3e31e..01ae08d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@blue-tomato/blueto", - "version": "0.2.4", + "version": "0.2.5", "license": "EUPL-1.2", "description": "🪐 BLUETO - the design system of Blue Tomato", "homepage": "https://blueto.blue-tomato.com", From ba6eec32f34133a906b1b0c5778155e98f1a69a5 Mon Sep 17 00:00:00 2001 From: Roman Date: Mon, 9 Dec 2024 16:03:07 +0100 Subject: [PATCH 2/4] Update storybook hierachy --- .../components/Button.stories.module.scss | 5 +++ src/stories/components/Button.stories.ts | 25 ------------ src/stories/components/Button.stories.tsx | 40 +++++++++++++++++++ .../CategoryButton.stories.module.scss | 6 +++ .../Buttongroup/CategoryButton.stories.tsx | 24 +++++++++++ .../SizeButton.stories.module.scss | 6 +++ .../Buttongroup/SizeButton.stories.tsx | 23 +++++++++++ .../components/CategoryButton.stories.ts | 15 ------- src/stories/components/Checkbox.stories.ts | 11 +++-- src/stories/components/Icon.stories.ts | 9 +++-- .../RadioButton.stories.module.scss | 7 ++++ ...on.stories.tsx => RadioButton.stories.tsx} | 16 +++++--- src/stories/components/SizeButton.stories.ts | 14 ------- src/stories/foundations/index.stories.tsx | 39 ++++++++++++------ 14 files changed, 161 insertions(+), 79 deletions(-) create mode 100644 src/stories/components/Button.stories.module.scss delete mode 100644 src/stories/components/Button.stories.ts create mode 100644 src/stories/components/Button.stories.tsx create mode 100644 src/stories/components/Buttongroup/CategoryButton.stories.module.scss create mode 100644 src/stories/components/Buttongroup/CategoryButton.stories.tsx create mode 100644 src/stories/components/Buttongroup/SizeButton.stories.module.scss create mode 100644 src/stories/components/Buttongroup/SizeButton.stories.tsx delete mode 100644 src/stories/components/CategoryButton.stories.ts create mode 100644 src/stories/components/RadioButton.stories.module.scss rename src/stories/components/{Radiobutton.stories.tsx => RadioButton.stories.tsx} (53%) delete mode 100644 src/stories/components/SizeButton.stories.ts diff --git a/src/stories/components/Button.stories.module.scss b/src/stories/components/Button.stories.module.scss new file mode 100644 index 0000000..332f22c --- /dev/null +++ b/src/stories/components/Button.stories.module.scss @@ -0,0 +1,5 @@ +@use "@/index.module.scss" as *; + +.long-text { + max-width: 128px; +} diff --git a/src/stories/components/Button.stories.ts b/src/stories/components/Button.stories.ts deleted file mode 100644 index b60b27c..0000000 --- a/src/stories/components/Button.stories.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Button } from "@/components"; -import type { Meta } from "@storybook/react"; - -export default { - title: "components/Button", - component: Button, - args: { - children: "Button", - disabled: false, - icon: undefined, - loading: false, - variant: "primary", - }, - argTypes: { - icon: { control: "text" }, - }, -}; - -export const Default: Meta = {}; - -export const WithIcon: Meta = { - args: { - icon: "flag.at", - }, -}; diff --git a/src/stories/components/Button.stories.tsx b/src/stories/components/Button.stories.tsx new file mode 100644 index 0000000..6fe0874 --- /dev/null +++ b/src/stories/components/Button.stories.tsx @@ -0,0 +1,40 @@ +import { Button } from "@/components"; +import type { Meta } from "@storybook/react"; +import styles from "./Button.stories.module.scss"; + +const Docs: Meta = { + title: "BLUETO/components/Button", + component: Button, + args: { + children: "Button", + disabled: false, + icon: undefined, + loading: false, + variant: "primary", + }, + argTypes: { + icon: { control: "text" }, + }, +}; + +const Default: Meta = {}; + +const WithIcon: Meta = { + args: { + icon: "flag.at", + }, +}; + +const WithLongText: Meta = { + render: (props) => ( +
+
+ ), + args: { + children: "Button long text", + }, +}; + +export default Docs; +export { Default, WithIcon, WithLongText }; diff --git a/src/stories/components/Buttongroup/CategoryButton.stories.module.scss b/src/stories/components/Buttongroup/CategoryButton.stories.module.scss new file mode 100644 index 0000000..edae2a2 --- /dev/null +++ b/src/stories/components/Buttongroup/CategoryButton.stories.module.scss @@ -0,0 +1,6 @@ +@use "@/index.module.scss" as *; + +.wrapper { + display: flex; + gap: $space-16; +} diff --git a/src/stories/components/Buttongroup/CategoryButton.stories.tsx b/src/stories/components/Buttongroup/CategoryButton.stories.tsx new file mode 100644 index 0000000..e35bde3 --- /dev/null +++ b/src/stories/components/Buttongroup/CategoryButton.stories.tsx @@ -0,0 +1,24 @@ +import { CategoryButton } from "@/components"; +import type { Meta } from "@storybook/react"; +import styles from "./CategoryButton.stories.module.scss"; + +const Docs: Meta = { + title: "BLUETO/components/Buttongroup/CategoryButton", + render: (props) => ( +
+ + +
+ ), + args: { + active: false, + children: "CategoryButton", + color: "white", + size: "large", + }, +}; + +const Default: Meta = {}; + +export default Docs; +export { Default }; diff --git a/src/stories/components/Buttongroup/SizeButton.stories.module.scss b/src/stories/components/Buttongroup/SizeButton.stories.module.scss new file mode 100644 index 0000000..edae2a2 --- /dev/null +++ b/src/stories/components/Buttongroup/SizeButton.stories.module.scss @@ -0,0 +1,6 @@ +@use "@/index.module.scss" as *; + +.wrapper { + display: flex; + gap: $space-16; +} diff --git a/src/stories/components/Buttongroup/SizeButton.stories.tsx b/src/stories/components/Buttongroup/SizeButton.stories.tsx new file mode 100644 index 0000000..615faa6 --- /dev/null +++ b/src/stories/components/Buttongroup/SizeButton.stories.tsx @@ -0,0 +1,23 @@ +import { SizeButton } from "@/components"; +import type { Meta } from "@storybook/react"; +import styles from "./SizeButton.stories.module.scss"; + +const Docs: Meta = { + title: "BLUETO/components/Buttongroup/SizeButton", + render: (props) => ( +
+ + +
+ ), + args: { + active: false, + children: "46", + disabled: false, + }, +}; + +const Default: Meta = {}; + +export default Docs; +export { Default }; diff --git a/src/stories/components/CategoryButton.stories.ts b/src/stories/components/CategoryButton.stories.ts deleted file mode 100644 index dd53c56..0000000 --- a/src/stories/components/CategoryButton.stories.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { CategoryButton } from "@/components"; -import type { Meta } from "@storybook/react"; - -export default { - title: "components/CategoryButton", - component: CategoryButton, - args: { - active: false, - children: "CategoryButton", - color: "white", - size: "large", - }, -}; - -export const Default: Meta = {}; diff --git a/src/stories/components/Checkbox.stories.ts b/src/stories/components/Checkbox.stories.ts index 8aa926f..799f680 100644 --- a/src/stories/components/Checkbox.stories.ts +++ b/src/stories/components/Checkbox.stories.ts @@ -1,8 +1,8 @@ import { Checkbox } from "@/components"; import type { Meta } from "@storybook/react"; -export default { - title: "components/Checkbox", +const Docs: Meta = { + title: "BLUETO/components/Checkbox", component: Checkbox, args: { children: "Checkbox", @@ -13,10 +13,13 @@ export default { }, }; -export const Default: Meta = {}; +const Default: Meta = {}; -export const WithError: Meta = { +const WithError: Meta = { args: { error: "Error", }, }; + +export default Docs; +export { Default, WithError }; diff --git a/src/stories/components/Icon.stories.ts b/src/stories/components/Icon.stories.ts index b587fc3..b4aacc1 100644 --- a/src/stories/components/Icon.stories.ts +++ b/src/stories/components/Icon.stories.ts @@ -1,8 +1,8 @@ import { Icon } from "@/components"; import type { Meta } from "@storybook/react"; -export default { - title: "components/Icon", +const Docs: Meta = { + title: "BLUETO/components/Icon", component: Icon, args: { icon: "flag.at", @@ -12,4 +12,7 @@ export default { }, }; -export const Default: Meta = {}; +const Default: Meta = {}; + +export default Docs; +export { Default }; diff --git a/src/stories/components/RadioButton.stories.module.scss b/src/stories/components/RadioButton.stories.module.scss new file mode 100644 index 0000000..1f1df81 --- /dev/null +++ b/src/stories/components/RadioButton.stories.module.scss @@ -0,0 +1,7 @@ +@use "@/index.module.scss" as *; + +.wrapper { + display: flex; + flex-direction: column; + gap: $space-16; +} diff --git a/src/stories/components/Radiobutton.stories.tsx b/src/stories/components/RadioButton.stories.tsx similarity index 53% rename from src/stories/components/Radiobutton.stories.tsx rename to src/stories/components/RadioButton.stories.tsx index d183dea..3a05fd4 100644 --- a/src/stories/components/Radiobutton.stories.tsx +++ b/src/stories/components/RadioButton.stories.tsx @@ -1,10 +1,11 @@ import { RadioButton } from "@/components"; import type { Meta } from "@storybook/react"; +import styles from "./RadioButton.stories.module.scss"; -export default { - title: "components/RadioButton", - component: (props: React.ComponentProps) => ( -
+const Docs: Meta = { + title: "BLUETO/components/RadioButton", + render: (props: React.ComponentProps) => ( + = {}; +const Default: Meta = {}; -export const WithError: Meta = { +const WithError: Meta = { args: { error: "Error", }, }; + +export default Docs; +export { Default, WithError }; diff --git a/src/stories/components/SizeButton.stories.ts b/src/stories/components/SizeButton.stories.ts deleted file mode 100644 index be4d738..0000000 --- a/src/stories/components/SizeButton.stories.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { SizeButton } from "@/components"; -import type { Meta } from "@storybook/react"; - -export default { - title: "components/SizeButton", - component: SizeButton, - args: { - active: false, - children: "46", - disabled: false, - }, -}; - -export const Default: Meta = {}; diff --git a/src/stories/foundations/index.stories.tsx b/src/stories/foundations/index.stories.tsx index 46412a4..fdafa1d 100644 --- a/src/stories/foundations/index.stories.tsx +++ b/src/stories/foundations/index.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from "@storybook/react"; +import type { Meta } from "@storybook/react"; import BrandlogosStory from "./BrandlogosStory"; import BreakpointsStory from "./BreakpointsStory"; import ColorsStory from "./ColorsStory"; @@ -7,21 +7,36 @@ import ResponsiveExampleStory from "./ResponsiveExampleStory"; import SpacingStory from "./SpacingStory"; import TypographyStory from "./TypographyStory"; -const BrandLogo: StoryObj = { render: BrandlogosStory }; -const Breakpoints: StoryObj = { render: BreakpointsStory }; -const Colors: StoryObj = { render: ColorsStory }; -const Icons: StoryObj = { render: IconsStory }; -const ResponsiveExample: StoryObj = { render: ResponsiveExampleStory }; -const Spacing: StoryObj = { render: SpacingStory }; -const Typography: StoryObj = { render: TypographyStory }; +const Docs: Meta = { + title: "BLUETO/foundations", + tags: ["!autodocs"], +}; + +const Brandlogos: Meta = { + render: BrandlogosStory, +}; + +const Breakpoints: Meta = { + render: BreakpointsStory, +}; + +const Colors: Meta = { render: ColorsStory }; + +const Icons: Meta = { render: IconsStory }; + +const ResponsiveExample: Meta = { + render: ResponsiveExampleStory, +}; + +const Spacing: Meta = { render: SpacingStory }; -const meta: Meta = { - title: "Foundations", +const Typography: Meta = { + render: TypographyStory, }; -export default meta; +export default Docs; export { - BrandLogo, + Brandlogos, Breakpoints, Colors, Icons, From 214eca61154e1dc35afadb174d080276c932b65e Mon Sep 17 00:00:00 2001 From: Roman Date: Fri, 13 Dec 2024 11:38:24 +0100 Subject: [PATCH 3/4] Update readem --- README.md | 6 ++++++ src/components/Icon.module.scss | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9d212cf..52f1999 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,9 @@ > the design system of Blue Tomato ![Logo](logo.png) + +## Development + +1. Clone the repository via `git clone git@github.com:blue-tomato/blueto.git` +2. Run `npm install` inside of the repository +3. Run `npm run dev` diff --git a/src/components/Icon.module.scss b/src/components/Icon.module.scss index 60998e3..96058b0 100644 --- a/src/components/Icon.module.scss +++ b/src/components/Icon.module.scss @@ -1,5 +1,5 @@ @use "@/index.module.scss" as *; .icon { - display: flex; + display: block; } From dbd8d2fe762101c462504cf0a28e71cd44ddfec3 Mon Sep 17 00:00:00 2001 From: Roman Date: Thu, 9 Jan 2025 14:14:11 +0100 Subject: [PATCH 4/4] Add confluence and figma links --- .storybook/preview.tsx | 4 ++ .storybook/preview/DocsLinks.scss | 15 +++++++ .storybook/preview/DocsLinks.tsx | 40 +++++++++++++++++++ biome.json | 2 +- src/stories/components/Button.stories.tsx | 16 +++++--- .../Buttongroup/CategoryButton.stories.tsx | 6 +++ .../Buttongroup/SizeButton.stories.tsx | 6 +++ src/stories/components/Checkbox.stories.ts | 6 +++ src/stories/components/Icon.stories.ts | 6 +++ .../components/RadioButton.stories.tsx | 6 +++ src/types.ts | 14 +++++++ todo.txt | 2 - 12 files changed, 115 insertions(+), 8 deletions(-) create mode 100644 .storybook/preview/DocsLinks.scss create mode 100644 .storybook/preview/DocsLinks.tsx create mode 100644 src/types.ts diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 60bfcd2..fdb7eca 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,8 +1,12 @@ import type { Preview } from "@storybook/react"; import "./preview.scss"; +import DocsLinks from "./preview/DocsLinks"; const preview: Preview = { parameters: { + docs: { + container: DocsLinks, + }, layout: "padded", }, tags: ["autodocs"], diff --git a/.storybook/preview/DocsLinks.scss b/.storybook/preview/DocsLinks.scss new file mode 100644 index 0000000..d5b8a20 --- /dev/null +++ b/.storybook/preview/DocsLinks.scss @@ -0,0 +1,15 @@ +@use "@/index.module.scss" as *; + +.docs-links { + position: absolute; + top: 0; + right: 0; + display: flex; + flex-direction: column; + background-color: $grey-1; + + a { + padding: $space-4 $space-8; + color: $white; + } +} diff --git a/.storybook/preview/DocsLinks.tsx b/.storybook/preview/DocsLinks.tsx new file mode 100644 index 0000000..50ff7bc --- /dev/null +++ b/.storybook/preview/DocsLinks.tsx @@ -0,0 +1,40 @@ +import type { DocsContainerProps } from "@storybook/blocks"; +import type { StoryMetaParameters } from "../../src/types"; + +import { DocsContainer } from "@storybook/blocks"; +import type { PropsWithChildren } from "react"; +import "./DocsLinks.scss"; + +type Props = PropsWithChildren & { + context: { primaryStory: { parameters: StoryMetaParameters } }; +}; + +const DocsLinks = ({ children, ...props }: Props) => { + const links = props.context.primaryStory.parameters.links; + + return ( + + {links && ( + + )} + {children} + + ); +}; + +export default DocsLinks; diff --git a/biome.json b/biome.json index 355c81f..a002ecf 100644 --- a/biome.json +++ b/biome.json @@ -4,7 +4,7 @@ "enabled": true }, "javascript": { - "globals": ["React"] + "globals": ["React", "StoryMeta"] }, "linter": { "enabled": true, diff --git a/src/stories/components/Button.stories.tsx b/src/stories/components/Button.stories.tsx index 6fe0874..b185988 100644 --- a/src/stories/components/Button.stories.tsx +++ b/src/stories/components/Button.stories.tsx @@ -1,8 +1,8 @@ import { Button } from "@/components"; -import type { Meta } from "@storybook/react"; +import type { StoryMeta } from "@/types"; import styles from "./Button.stories.module.scss"; -const Docs: Meta = { +const Docs: StoryMeta = { title: "BLUETO/components/Button", component: Button, args: { @@ -15,17 +15,23 @@ const Docs: Meta = { argTypes: { icon: { control: "text" }, }, + parameters: { + links: { + confluence: "3ArPKQ", + figma: "rUIq4O2W7nCzofq3nFoURP/BLUETO-Components?node-id=19-2", + }, + }, }; -const Default: Meta = {}; +const Default: StoryMeta = {}; -const WithIcon: Meta = { +const WithIcon: StoryMeta = { args: { icon: "flag.at", }, }; -const WithLongText: Meta = { +const WithLongText: StoryMeta = { render: (props) => (