From 6afd6d3c9bef0edc0404fcd2db3a47799889a728 Mon Sep 17 00:00:00 2001 From: Ludovic Lerus Date: Sun, 26 May 2024 09:20:23 +0100 Subject: [PATCH 1/6] feat(components): Toggle added --- .../src/components/Toggle/Toggle.stories.tsx | 28 ++++++++++ .../src/components/Toggle/Toggle.tsx | 54 +++++++++++++++++++ .../src/components/Toggle/index.ts | 2 + packages/blandui/src/Color/backgroundColor.ts | 10 ++++ 4 files changed, 94 insertions(+) create mode 100644 packages/blandui-react/src/components/Toggle/Toggle.stories.tsx create mode 100644 packages/blandui-react/src/components/Toggle/Toggle.tsx create mode 100644 packages/blandui-react/src/components/Toggle/index.ts diff --git a/packages/blandui-react/src/components/Toggle/Toggle.stories.tsx b/packages/blandui-react/src/components/Toggle/Toggle.stories.tsx new file mode 100644 index 0000000..454287b --- /dev/null +++ b/packages/blandui-react/src/components/Toggle/Toggle.stories.tsx @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Toggle } from '.'; + +const meta: Meta = { + title: 'Component/Toggle', + component: Toggle, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( +
+
+ + + + +
+
+ + + +
+
+ ), +}; diff --git a/packages/blandui-react/src/components/Toggle/Toggle.tsx b/packages/blandui-react/src/components/Toggle/Toggle.tsx new file mode 100644 index 0000000..7bf558a --- /dev/null +++ b/packages/blandui-react/src/components/Toggle/Toggle.tsx @@ -0,0 +1,54 @@ +import { ComponentProps, forwardRef } from 'react'; +import cn from '../../utils/cn'; + +export interface ToggleProps extends Omit, 'size'> { + className?: string; + + label?: string; + size?: 'sm' | 'md'; +} + +export const Toggle = forwardRef(({ + className, + label, + size = 'md', + ...props +}: ToggleProps, ref) => { + const baseKnobCn = [ + 'flex items-center flex-shrink-0 px-xs rounded-full bg-toggle-surface-unchecked', + + 'peer-checked:bg-toggle-surface-checked', + 'peer-disabled:bg-toggle-surface-unchecked-disabled', + + 'group-has-[:checked]:bg-toggle-surface-checked-disabled', + + 'duration-300 ease-in-out', + + 'after:rounded-full after:bg-toggle-knob-rest', + 'after:duration-300', + 'peer-disabled:after:bg-toggle-knob-disabled', + ]; + + const sizeClasses = { + sm: 'w-3xl h-xl after:w-lg after:h-lg peer-checked:after:translate-x-lg', + md: 'w-5xl h-2xl after:w-xl after:h-xl peer-checked:after:translate-x-xl', + }; + + const knobCn = cn([ + baseKnobCn, + sizeClasses[size], + className, + ]); + + return ( + + ); +}); + +Toggle.displayName = 'Toggle'; diff --git a/packages/blandui-react/src/components/Toggle/index.ts b/packages/blandui-react/src/components/Toggle/index.ts new file mode 100644 index 0000000..e005a38 --- /dev/null +++ b/packages/blandui-react/src/components/Toggle/index.ts @@ -0,0 +1,2 @@ +export { Toggle } from './Toggle'; +export type { ToggleProps } from './Toggle'; diff --git a/packages/blandui/src/Color/backgroundColor.ts b/packages/blandui/src/Color/backgroundColor.ts index a77f775..333d11f 100644 --- a/packages/blandui/src/Color/backgroundColor.ts +++ b/packages/blandui/src/Color/backgroundColor.ts @@ -141,6 +141,16 @@ export default { 'input-surface-rest': colors.gray[50], 'input-surface-hover': colors.gray[100], + // TOGGLE + 'toggle-surface-checked': colors.carbon[1000], + 'toggle-surface-checked-disabled': colors.gray[200], + + 'toggle-surface-unchecked': colors.gray[200], + 'toggle-surface-unchecked-disabled': colors.gray[100], + + 'toggle-knob-rest': colors.gray[0], + 'toggle-knob-disabled': colors.gray[400], + // MENU 'menu-surface-rest': colors.gray[0], 'menu-surface-hover': colors.gray[50], From 2164dd1c678b50ab910634e139306f092dccb09a Mon Sep 17 00:00:00 2001 From: Ludovic Lerus Date: Sun, 26 May 2024 10:01:07 +0100 Subject: [PATCH 2/6] fix(blandui): Typogaphy -> Typography --- packages/blandui/src/{Typogaphy => Typography}/body.ts | 0 packages/blandui/src/{Typogaphy => Typography}/display.ts | 0 packages/blandui/src/{Typogaphy => Typography}/heading.ts | 0 packages/blandui/src/{Typogaphy => Typography}/index.ts | 0 packages/blandui/src/{Typogaphy => Typography}/title.ts | 0 packages/blandui/src/index.ts | 4 ++-- 6 files changed, 2 insertions(+), 2 deletions(-) rename packages/blandui/src/{Typogaphy => Typography}/body.ts (100%) rename packages/blandui/src/{Typogaphy => Typography}/display.ts (100%) rename packages/blandui/src/{Typogaphy => Typography}/heading.ts (100%) rename packages/blandui/src/{Typogaphy => Typography}/index.ts (100%) rename packages/blandui/src/{Typogaphy => Typography}/title.ts (100%) diff --git a/packages/blandui/src/Typogaphy/body.ts b/packages/blandui/src/Typography/body.ts similarity index 100% rename from packages/blandui/src/Typogaphy/body.ts rename to packages/blandui/src/Typography/body.ts diff --git a/packages/blandui/src/Typogaphy/display.ts b/packages/blandui/src/Typography/display.ts similarity index 100% rename from packages/blandui/src/Typogaphy/display.ts rename to packages/blandui/src/Typography/display.ts diff --git a/packages/blandui/src/Typogaphy/heading.ts b/packages/blandui/src/Typography/heading.ts similarity index 100% rename from packages/blandui/src/Typogaphy/heading.ts rename to packages/blandui/src/Typography/heading.ts diff --git a/packages/blandui/src/Typogaphy/index.ts b/packages/blandui/src/Typography/index.ts similarity index 100% rename from packages/blandui/src/Typogaphy/index.ts rename to packages/blandui/src/Typography/index.ts diff --git a/packages/blandui/src/Typogaphy/title.ts b/packages/blandui/src/Typography/title.ts similarity index 100% rename from packages/blandui/src/Typogaphy/title.ts rename to packages/blandui/src/Typography/title.ts diff --git a/packages/blandui/src/index.ts b/packages/blandui/src/index.ts index e93c941..77e85b7 100644 --- a/packages/blandui/src/index.ts +++ b/packages/blandui/src/index.ts @@ -1,6 +1,6 @@ import plugin from 'tailwindcss/plugin'; import forms from '@tailwindcss/forms'; -import typogaphy from './Typogaphy'; +import typography from './Typography'; import boxShadow from './Effect/boxShadow'; import colors from './Color/colors'; import backgroundColor from './Color/backgroundColor'; @@ -15,7 +15,7 @@ import borderWidth from './Spacing/borderWidth'; const blanduiPlugin = plugin(({ addUtilities, }) => { - addUtilities(typogaphy); + addUtilities(typography); }, { theme: { extend: { From bbbf134fe27f619ef2a86e77971675888a9290b5 Mon Sep 17 00:00:00 2001 From: Ludovic Lerus Date: Sun, 26 May 2024 10:01:23 +0100 Subject: [PATCH 3/6] fix(blandui-react): Tailwind content fixed --- packages/blandui-react/src/tailwind.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/blandui-react/src/tailwind.ts b/packages/blandui-react/src/tailwind.ts index c6fddff..cce7302 100644 --- a/packages/blandui-react/src/tailwind.ts +++ b/packages/blandui-react/src/tailwind.ts @@ -1,11 +1,11 @@ -import blanduiPlugin from 'blandui'; +import blanduiPlugin from '@blandui/blandui'; interface Content { base?: string; - } +} export function content({ base = './' }: Content = {}) { - const path = 'node_modules/blandui-react/dist/esm/**/*.mjs'; + const path = 'node_modules/@blandui/blandui-react/dist/esm/**/*.mjs'; return `${base}${path}`; } From 4412c3e44f04e5ed35c4bd36f69a7a2a0ca4b9c2 Mon Sep 17 00:00:00 2001 From: Ludovic Lerus Date: Sun, 26 May 2024 10:02:41 +0100 Subject: [PATCH 4/6] feat(storybook): Moved stories inside apps --- apps/storybook-react/.storybook/main.ts | 2 +- apps/storybook-react/package.json | 2 +- .../storybook-react/stories}/Badge.stories.tsx | 2 +- .../storybook-react/stories}/Button.stories.tsx | 2 +- .../storybook-react/stories}/Checkbox.stories.tsx | 2 +- .../storybook-react/stories}/SegmentedBar.stories.tsx | 2 +- .../storybook-react/stories}/TextInput.stories.tsx | 2 +- .../storybook-react/stories}/Typography.stories.tsx | 2 +- apps/storybook-react/tailwind.config.js | 10 +++++++--- 9 files changed, 15 insertions(+), 11 deletions(-) rename {packages/blandui-react/src/components/Badge => apps/storybook-react/stories}/Badge.stories.tsx (98%) rename {packages/blandui-react/src/components/Button => apps/storybook-react/stories}/Button.stories.tsx (97%) rename {packages/blandui-react/src/components/Checkbox => apps/storybook-react/stories}/Checkbox.stories.tsx (93%) rename {packages/blandui-react/src/components/SegmentedBar => apps/storybook-react/stories}/SegmentedBar.stories.tsx (94%) rename {packages/blandui-react/src/components/TextInput => apps/storybook-react/stories}/TextInput.stories.tsx (98%) rename {packages/blandui-react/src/components/Typography => apps/storybook-react/stories}/Typography.stories.tsx (96%) diff --git a/apps/storybook-react/.storybook/main.ts b/apps/storybook-react/.storybook/main.ts index 5c55cf2..28e3631 100644 --- a/apps/storybook-react/.storybook/main.ts +++ b/apps/storybook-react/.storybook/main.ts @@ -2,7 +2,7 @@ import type { StorybookConfig } from "@storybook/nextjs"; const config: StorybookConfig = { stories: [ - "../../../packages/blandui-react/src/**/*.stories.@(ts|tsx)", + "../stories/*.stories.@(ts|tsx)", ], addons: [ "@storybook/addon-links", diff --git a/apps/storybook-react/package.json b/apps/storybook-react/package.json index 5b4c35d..09a374f 100644 --- a/apps/storybook-react/package.json +++ b/apps/storybook-react/package.json @@ -8,9 +8,9 @@ "start": "npx http-server storybook-static -p $PORT" }, "dependencies": { + "@blandui/blandui-react": "workspace:*", "@tailwindcss/forms": "^0.5.7", "autoprefixer": "^10.4.19", - "@blandui/blandui-react": "workspace:*", "postcss": "^8.4.38", "tailwindcss": "^3.4.3", "typescript": "^5.4.5" diff --git a/packages/blandui-react/src/components/Badge/Badge.stories.tsx b/apps/storybook-react/stories/Badge.stories.tsx similarity index 98% rename from packages/blandui-react/src/components/Badge/Badge.stories.tsx rename to apps/storybook-react/stories/Badge.stories.tsx index b21dbae..0c0fb64 100644 --- a/packages/blandui-react/src/components/Badge/Badge.stories.tsx +++ b/apps/storybook-react/stories/Badge.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { Badge } from './Badge'; +import { Badge } from '@blandui/blandui-react'; const meta: Meta = { title: 'Component/Badge', diff --git a/packages/blandui-react/src/components/Button/Button.stories.tsx b/apps/storybook-react/stories/Button.stories.tsx similarity index 97% rename from packages/blandui-react/src/components/Button/Button.stories.tsx rename to apps/storybook-react/stories/Button.stories.tsx index f980544..1c1f27a 100644 --- a/packages/blandui-react/src/components/Button/Button.stories.tsx +++ b/apps/storybook-react/stories/Button.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { Button } from './Button'; +import { Button } from '@blandui/blandui-react'; const meta: Meta = { title: 'Component/Button', diff --git a/packages/blandui-react/src/components/Checkbox/Checkbox.stories.tsx b/apps/storybook-react/stories/Checkbox.stories.tsx similarity index 93% rename from packages/blandui-react/src/components/Checkbox/Checkbox.stories.tsx rename to apps/storybook-react/stories/Checkbox.stories.tsx index 304d207..9fc92ef 100644 --- a/packages/blandui-react/src/components/Checkbox/Checkbox.stories.tsx +++ b/apps/storybook-react/stories/Checkbox.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { Checkbox } from './Checkbox'; +import { Checkbox } from '@blandui/blandui-react'; const meta: Meta = { title: 'Component/Checkbox', diff --git a/packages/blandui-react/src/components/SegmentedBar/SegmentedBar.stories.tsx b/apps/storybook-react/stories/SegmentedBar.stories.tsx similarity index 94% rename from packages/blandui-react/src/components/SegmentedBar/SegmentedBar.stories.tsx rename to apps/storybook-react/stories/SegmentedBar.stories.tsx index 09982c7..29553dc 100644 --- a/packages/blandui-react/src/components/SegmentedBar/SegmentedBar.stories.tsx +++ b/apps/storybook-react/stories/SegmentedBar.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import { useState } from 'react'; -import { SegmentedBar } from './SegmentedBar'; +import { SegmentedBar } from '@blandui/blandui-react'; const meta: Meta = { title: 'Component/SegmentedBar', diff --git a/packages/blandui-react/src/components/TextInput/TextInput.stories.tsx b/apps/storybook-react/stories/TextInput.stories.tsx similarity index 98% rename from packages/blandui-react/src/components/TextInput/TextInput.stories.tsx rename to apps/storybook-react/stories/TextInput.stories.tsx index 0df16e9..10af6d0 100644 --- a/packages/blandui-react/src/components/TextInput/TextInput.stories.tsx +++ b/apps/storybook-react/stories/TextInput.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { TextInput } from './TextInput'; +import { TextInput } from '@blandui/blandui-react'; const meta: Meta = { title: 'Component/TextInput', diff --git a/packages/blandui-react/src/components/Typography/Typography.stories.tsx b/apps/storybook-react/stories/Typography.stories.tsx similarity index 96% rename from packages/blandui-react/src/components/Typography/Typography.stories.tsx rename to apps/storybook-react/stories/Typography.stories.tsx index e8e104a..394727c 100644 --- a/packages/blandui-react/src/components/Typography/Typography.stories.tsx +++ b/apps/storybook-react/stories/Typography.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { Typography } from './Typography'; +import { Typography } from '@blandui/blandui-react'; const meta: Meta = { title: 'Component/Typography', diff --git a/apps/storybook-react/tailwind.config.js b/apps/storybook-react/tailwind.config.js index df6bfe6..aa017f4 100644 --- a/apps/storybook-react/tailwind.config.js +++ b/apps/storybook-react/tailwind.config.js @@ -1,13 +1,17 @@ -import { plugin } from 'blandui-react/tailwind'; +import { content, plugin } from '@blandui/blandui-react/tailwind'; +import forms from '@tailwindcss/forms'; + +console.log(content); /** @type {import('tailwindcss').Config} */ module.exports = { content: [ + content(), "./storybook/**/*.{ts,tsx}", - "../../packages/blandui-react/src/**/*.{ts,tsx}", + "./stories/**/*.{ts,tsx}", ], plugins: [ + forms(), plugin(), - require('@tailwindcss/forms'), ], }; From f1012cba5eaed273a6ade773d85281087fa38263 Mon Sep 17 00:00:00 2001 From: Ludovic Lerus Date: Sun, 26 May 2024 10:08:31 +0100 Subject: [PATCH 5/6] feat(blandui): Toggle components added to index --- .../storybook-react/stories}/Toggle.stories.tsx | 2 +- packages/blandui-react/src/index.ts | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) rename {packages/blandui-react/src/components/Toggle => apps/storybook-react/stories}/Toggle.stories.tsx (93%) diff --git a/packages/blandui-react/src/components/Toggle/Toggle.stories.tsx b/apps/storybook-react/stories/Toggle.stories.tsx similarity index 93% rename from packages/blandui-react/src/components/Toggle/Toggle.stories.tsx rename to apps/storybook-react/stories/Toggle.stories.tsx index 454287b..15e53f4 100644 --- a/packages/blandui-react/src/components/Toggle/Toggle.stories.tsx +++ b/apps/storybook-react/stories/Toggle.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { Toggle } from '.'; +import { Toggle } from '@blandui/blandui-react'; const meta: Meta = { title: 'Component/Toggle', diff --git a/packages/blandui-react/src/index.ts b/packages/blandui-react/src/index.ts index 43c0ed4..feee30d 100644 --- a/packages/blandui-react/src/index.ts +++ b/packages/blandui-react/src/index.ts @@ -1,6 +1,7 @@ export * from './components/Badge'; -export * from './components/Button/Button'; -export * from './components/Checkbox/Checkbox'; -export * from './components/SegmentedBar/SegmentedBar'; -export * from './components/Typography/Typography'; -export * from './components/TextInput/TextInput'; +export * from './components/Button'; +export * from './components/Checkbox'; +export * from './components/SegmentedBar'; +export * from './components/Typography'; +export * from './components/TextInput'; +export * from './components/Toggle'; From 95d8e55f0a960132a7c80ca0ec3db8882ce83d2b Mon Sep 17 00:00:00 2001 From: Ludovic Lerus Date: Sun, 26 May 2024 10:36:27 +0100 Subject: [PATCH 6/6] chore(changelog): New release --- .changeset/purple-owls-explain.md | 6 ++++++ pnpm-workspace.yaml | 5 ++--- 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 .changeset/purple-owls-explain.md diff --git a/.changeset/purple-owls-explain.md b/.changeset/purple-owls-explain.md new file mode 100644 index 0000000..44d7eb0 --- /dev/null +++ b/.changeset/purple-owls-explain.md @@ -0,0 +1,6 @@ +--- +"@blandui/blandui-react": patch +"@blandui/blandui": patch +--- + +Toggle component added and tailwind plugin fixed diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 188922a..0796e8c 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,4 +1,3 @@ packages: - - 'apps/storybook-react/**' - - 'packages/blandui-react/**' - - 'packages/blandui/**' + - 'app/**' + - 'packages/**'