diff --git a/.changeset/wild-walls-suffer.md b/.changeset/wild-walls-suffer.md new file mode 100644 index 0000000000..40a0cdc836 --- /dev/null +++ b/.changeset/wild-walls-suffer.md @@ -0,0 +1,58 @@ +--- +"@channel.io/bezier-react": major +--- + +**Breaking Changes: Deprecate support for `styled-components` related modules** + +- No longer support legacy foundation modules. Use the `useToken` hook and components to replace it + - `LightFoundation` and `DarkFoundation` + - `Spacing` + - `ev1`, `ev2`, `ev3`, `ev4`, `ev5` and `ev6` + - `createThemes`, `Theme`, `SemanticNames`, `LightTheme` and `DarkTheme` + - `TransitionDuration` and `Transition` + - `Border` + - `Typography`, `TypoAbsoluteNumber`, `LineHeightAbsoluteNumber` and `TypographyType` + - `absoluteCenter`, `disableAutoMinimum`, `hideScrollbars` and `ellipsis` + - `ThemeVarsAdditionalType` and `ThemeVars` + - `GlobalStyle` + - `Foundation` + - `GlobalStyleProp` + - `createGlobalStyle`, `styled`, `css`, `FoundationProvider`, `useFoundation`, `keyframes`, `StyleSheetManager` and `ServerStyleSheet` +- No longer support `BezierProvider`. Use the `AppProvider` instead +- No longer support `gap` and `touchableHover` mixins. Please implement and use your own + +```tsx +function gap(spacing: number): InjectedInterpolation { + return css` + gap: ${spacing}px; + + @supports not(gap: ${spacing}px) { + margin-top: ${-spacing}px; + margin-left: ${-spacing}px; + + > * { + margin-top: ${spacing}px; + margin-left: ${spacing}px; + } + } + ` +} + +function touchableHover(interpolation: InjectedInterpolation): InjectedInterpolation { + return css` + @media (hover: hover) { + &:hover { + ${interpolation} + } + } + + @media (hover: none) { + &:active { + ${interpolation} + } + } + ` +} +``` + +- No longer support `inputTextStyle`, `inputPlaceholderStyle`, `inputWrapperStyle`, `focusedInputWrapperStyle` and `erroredInputWrapperStyle`. Please migrate using `@channel.io/bezier-codemod`'s `v2-interpolation-to-css-variable` transformer. diff --git a/packages/bezier-react/.eslintignore b/packages/bezier-react/.eslintignore index ec13a43fa6..aae788cff5 100644 --- a/packages/bezier-react/.eslintignore +++ b/packages/bezier-react/.eslintignore @@ -2,3 +2,4 @@ node_modules dist coverage __mocks__ +!.storybook diff --git a/packages/bezier-react/.eslintrc.js b/packages/bezier-react/.eslintrc.js index 88ad76be25..b97410d56a 100644 --- a/packages/bezier-react/.eslintrc.js +++ b/packages/bezier-react/.eslintrc.js @@ -30,23 +30,13 @@ module.exports = { group: 'external', position: 'before', }, - { - pattern: '~/src/foundation', - group: 'internal', - position: 'before', - }, - { - pattern: '~/src/foundation/**', - group: 'internal', - position: 'before', - }, { pattern: '~/src/components/**', group: 'internal', position: 'after', }, { - pattern: './**/*.+(styled|scss)', + pattern: './**/*.scss', group: 'sibling', position: 'after', }, diff --git a/packages/bezier-react/.storybook/WithFoundationProvider.jsx b/packages/bezier-react/.storybook/WithFoundationProvider.jsx deleted file mode 100644 index 30f0c6a6bf..0000000000 --- a/packages/bezier-react/.storybook/WithFoundationProvider.jsx +++ /dev/null @@ -1,110 +0,0 @@ -import React from 'react' - -import { - LightFoundation, - DarkFoundation, -} from '~/src/foundation' -import { SmoothCornersFeature } from '~/src/features' -import BezierProvider from '~/src/providers/BezierProvider' -import { AppProvider } from '~/src/providers/AppProvider' -import { InvertedThemeProvider } from '~/src/providers/ThemeProvider' -import { Text } from '~/src/components/Text' - -const FoundationKeyword = { - Light: 'light', - Dark: 'dark', -} - -function getFoundation(keyword) { - const isDarkFoundation = keyword === FoundationKeyword.Dark - return { - isDarkFoundation, - foundation: isDarkFoundation ? DarkFoundation : LightFoundation, - invertedFoundation: isDarkFoundation ? LightFoundation : DarkFoundation, - } -} - -const wrapperStyle = { - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - alignItems: 'center', - justifyContent: 'center', - gap: 20, - width: '100%', - height: '100%', -} - -const storyWrapperStyle = { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - gap: 20, - padding: 20, -} - -const innerWrapperStyle = { - height: '100%', - padding: 40, - borderRadius: 20, -} - -// TODO: Migrate to AppProvider -export function WithFoundationProvider(Story, context) { - const { - isDarkFoundation, - foundation, - invertedFoundation, - } = getFoundation(context.globals.Foundation) - - const [backgroundColor, invertedBackgroundColor, themeName, invertedThemeName] = (() => { - const lightBackgroundColor = LightFoundation.theme['bg-white-normal'] - const darkBackgroundColor = DarkFoundation.theme['bg-white-normal'] - const lightThemeName = 'Light Theme' - const darkThemeName = 'Dark Theme' - - return isDarkFoundation - ? [darkBackgroundColor, lightBackgroundColor, darkThemeName, lightThemeName] - : [lightBackgroundColor, darkBackgroundColor, lightThemeName, darkThemeName] - })() - - return ( - - -
-
-
- { Story(context) } -
- - { themeName } - -
- - - -
-
- { Story(context) } -
- - { invertedThemeName } - -
- - -
- - - ) -} diff --git a/packages/bezier-react/.storybook/WithProvider.tsx b/packages/bezier-react/.storybook/WithProvider.tsx new file mode 100644 index 0000000000..6a436b8313 --- /dev/null +++ b/packages/bezier-react/.storybook/WithProvider.tsx @@ -0,0 +1,42 @@ +import React from 'react' + +import type { Preview } from '@storybook/react' + +import { SmoothCornersFeature } from '~/src/features' +import { AppProvider } from '~/src/providers/AppProvider' +import { InvertedThemeProvider } from '~/src/providers/ThemeProvider' + +import { Text } from '~/src/components/Text' + +import styles from './preview.module.scss' + +const features = [SmoothCornersFeature] + +export const WithProvider: NonNullable[number] = (Story, context) => ( + +
+
+
+ { Story(context) } +
+ + Light Theme + +
+ + +
+
+ { Story(context) } +
+ + Dark Theme + +
+ +
+ +) diff --git a/packages/bezier-react/.storybook/main.ts b/packages/bezier-react/.storybook/main.ts index 4215d4694e..2f761c4725 100644 --- a/packages/bezier-react/.storybook/main.ts +++ b/packages/bezier-react/.storybook/main.ts @@ -1,24 +1,27 @@ -import { dirname, join } from "path" +import { + dirname, + join, +} from 'path' -import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin' import { type StorybookConfig } from '@storybook/react-webpack5' +import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin' function getAbsolutePath(value) { - return dirname(require.resolve(join(value, "package.json"))) + return dirname(require.resolve(join(value, 'package.json'))) } -const config: StorybookConfig = { +export default { stories: [ '../src/**/*.stories.(tsx|mdx)', ], addons: [ - getAbsolutePath("@storybook/addon-controls"), - getAbsolutePath("@storybook/addon-actions"), - getAbsolutePath("@storybook/addon-a11y"), - getAbsolutePath("@storybook/addon-toolbars"), - getAbsolutePath("@storybook/addon-docs"), - getAbsolutePath("@storybook/addon-backgrounds"), + getAbsolutePath('@storybook/addon-controls'), + getAbsolutePath('@storybook/addon-actions'), + getAbsolutePath('@storybook/addon-a11y'), + getAbsolutePath('@storybook/addon-toolbars'), + getAbsolutePath('@storybook/addon-docs'), + getAbsolutePath('@storybook/addon-backgrounds'), { name: '@storybook/addon-styling', options: { @@ -49,27 +52,27 @@ const config: StorybookConfig = { ...config.resolve, // Apply tsconfig alias path plugins: [ - ...(config?.resolve?.plugins ?? []), - new TsconfigPathsPlugin({}), + ...(config?.resolve?.plugins ?? []), + new TsconfigPathsPlugin({}), ], extensions: [ ...(config.resolve?.extensions ?? []), '.ts', '.tsx', - ] + ], } config.module = { ...config.module, rules: [ ...(config.module?.rules ?? []), { - test: /\.(ts|tsx)$/, - loader: require.resolve('babel-loader'), - options: { - presets: [['react-app', { flow: false, typescript: true }]], - } - } - ] + test: /\.(ts|tsx)$/, + loader: require.resolve('babel-loader'), + options: { + presets: [['react-app', { flow: false, typescript: true }]], + }, + }, + ], } return config @@ -77,12 +80,10 @@ const config: StorybookConfig = { framework: { name: '@storybook/react-webpack5', - options: {} + options: {}, }, docs: { - autodocs: true - } -} - -export default config + autodocs: true, + }, +} as StorybookConfig diff --git a/packages/bezier-react/.storybook/preview.module.scss b/packages/bezier-react/.storybook/preview.module.scss new file mode 100644 index 0000000000..d63194eef3 --- /dev/null +++ b/packages/bezier-react/.storybook/preview.module.scss @@ -0,0 +1,27 @@ +.Wrapper { + display: flex; + flex-flow: row wrap; + gap: 20px; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; +} + +.Theme { + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; + justify-content: center; + + padding: 20px; +} + +.Story { + height: 100%; + padding: 40px; + background-color: var(--bg-white-normal); + border-radius: 20px; +} diff --git a/packages/bezier-react/.storybook/preview.ts b/packages/bezier-react/.storybook/preview.ts index 463b95a38d..5fb312ff9e 100644 --- a/packages/bezier-react/.storybook/preview.ts +++ b/packages/bezier-react/.storybook/preview.ts @@ -1,11 +1,11 @@ -import type { Preview } from "@storybook/react" +import type { Preview } from '@storybook/react' -import '~/src/styles/index.scss' +import { WithProvider } from './WithProvider' -import { WithFoundationProvider } from './WithFoundationProvider' +import '~/src/styles/index.scss' const preview: Preview = { - decorators: [WithFoundationProvider], + decorators: [WithProvider], } export default preview diff --git a/packages/bezier-react/babel.config.js b/packages/bezier-react/babel.config.js index 3ba532e3da..6eb1f9a746 100644 --- a/packages/bezier-react/babel.config.js +++ b/packages/bezier-react/babel.config.js @@ -9,11 +9,4 @@ module.exports = { ['@babel/preset-react', { useBuiltIns: true }], ['@babel/preset-typescript', { isTSX: true, allExtensions: true }], ], - plugins: [ - ['babel-plugin-styled-components', { - minify: true, - pure: true, - topLevelImportPaths: ['~/src/foundation'], - }], - ], } diff --git a/packages/bezier-react/jest.setup.ts b/packages/bezier-react/jest.setup.ts index 8494e9e7dc..12f4e041bc 100644 --- a/packages/bezier-react/jest.setup.ts +++ b/packages/bezier-react/jest.setup.ts @@ -1,5 +1,4 @@ import '@testing-library/jest-dom' -import 'jest-styled-components' Object.defineProperty(window, 'requestAnimationFrame', { writable: true, diff --git a/packages/bezier-react/package.json b/packages/bezier-react/package.json index 1b99de0451..de3d632ff6 100644 --- a/packages/bezier-react/package.json +++ b/packages/bezier-react/package.json @@ -93,18 +93,15 @@ "@types/jest": "^29.5.4", "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", - "@types/styled-components": "^5.1.27", "@types/uuid": "^9.0.3", "autoprefixer": "^10.4.14", "babel-loader": "^9.1.3", - "babel-plugin-styled-components": "^2.1.4", "babel-preset-react-app": "^10.0.1", "chromatic": "^7.0.0", "core-js": "^3.32.2", "eslint-config-bezier": "workspace:*", "eslint-plugin-storybook": "^0.6.13", "identity-obj-proxy": "^3.0.0", - "jest-styled-components": "^7.1.1", "lightningcss": "^1.22.1", "minimatch": "^9.0.3", "paths.macro": "^3.0.1", @@ -118,7 +115,6 @@ "rollup-plugin-visualizer": "^5.9.2", "sass": "^1.63.6", "storybook": "^7.4.2", - "styled-components": "^5.3.11", "the-new-css-reset": "^1.11.2", "ts-prune": "^0.10.3", "tsconfig": "workspace:*", @@ -130,8 +126,7 @@ "peerDependencies": { "@channel.io/bezier-icons": ">=0.2.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": ">=5" + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { "@channel.io/bezier-icons": { diff --git a/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.types.ts b/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.types.ts index 8276ab9791..8c00c533f2 100644 --- a/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.types.ts +++ b/packages/bezier-react/src/components/AlphaSmoothCornersBox/AlphaSmoothCornersBox.types.ts @@ -1,10 +1,9 @@ -import { type SemanticNames } from '~/src/foundation' - import type { AlphaBezierComponentProps, ChildrenProps, DisableProps, } from '~/src/types/ComponentProps' +import { type SemanticColor } from '~/src/types/Token' /** * NOTE: The `inset` property is not currently supported. @@ -34,7 +33,7 @@ export interface BoxShadow { * The color of the shadow. * @default transparent */ - color?: SemanticNames + color?: SemanticColor } interface AlphaSmoothCornersBoxOwnProps { @@ -56,7 +55,7 @@ interface AlphaSmoothCornersBoxOwnProps { * The background color of an element. * @default 'transparent' */ - backgroundColor?: SemanticNames + backgroundColor?: SemanticColor /** * The background image url of an element. */ diff --git a/packages/bezier-react/src/components/Avatars/Avatar/Avatar.stories.tsx b/packages/bezier-react/src/components/Avatars/Avatar/Avatar.stories.tsx index b4f573fc64..f281583af4 100644 --- a/packages/bezier-react/src/components/Avatars/Avatar/Avatar.stories.tsx +++ b/packages/bezier-react/src/components/Avatars/Avatar/Avatar.stories.tsx @@ -6,8 +6,6 @@ import { type StoryObj, } from '@storybook/react' -import { styled } from '~/src/foundation' - import { isNaN } from '~/src/utils/type' import { StatusType } from '~/src/components/Status' @@ -56,20 +54,8 @@ const meta:Meta = { } export default meta -// NOTE: (@ed) border 색상을 명확하게 보여주기 위해 회색의 Wrapper를 추가했습니다 -const Wrapper = styled.div` - display: flex; - align-items: center; - justify-content: center; - width: 200px; - height: 200px; - background-color: ${({ foundation }) => foundation?.theme?.['bg-grey-light']}; -` - const Template: StoryFn = (args) => ( - - - + ) export const Primary: StoryObj = { @@ -86,16 +72,14 @@ export const Primary: StoryObj = { } const TemplateWithCustomStatus: StoryFn = (args) => ( - - - - - + + + ) export const WithCustomStatus: StoryObj = { diff --git a/packages/bezier-react/src/components/Avatars/Avatars.stories.tsx b/packages/bezier-react/src/components/Avatars/Avatars.stories.tsx index 60ce1be6e8..e96530e39f 100644 --- a/packages/bezier-react/src/components/Avatars/Avatars.stories.tsx +++ b/packages/bezier-react/src/components/Avatars/Avatars.stories.tsx @@ -6,8 +6,6 @@ import { type StoryObj, } from '@storybook/react' -import { styled } from '~/src/foundation' - import { range } from '~/src/utils/number' import { @@ -235,16 +233,6 @@ export const UsagePresetStatusWithSize: StoryObj<{}> = { name: 'Usage (with preset status and size)', } -const EmojiStatusWrapper = styled.div` - display: flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - background-color: ${({ foundation }) => foundation?.theme['bg-white-high']}; - border-radius: 42%; -` - export const UsageCustomStatus: StoryObj<{}> = { render: () => ( @@ -268,13 +256,22 @@ export const UsageCustomStatus: StoryObj<{}> = { - +
- +
diff --git a/packages/bezier-react/src/components/Button/Button.mdx b/packages/bezier-react/src/components/Button/Button.mdx index 80a9b124c0..8418c8adbb 100644 --- a/packages/bezier-react/src/components/Button/Button.mdx +++ b/packages/bezier-react/src/components/Button/Button.mdx @@ -1,65 +1,11 @@ -import { - useState, -} from 'react' -import { - PlayIcon, - TriangleDownIcon, -} from '@channel.io/bezier-icons' import { ArgsTable, Canvas, Story, } from '@storybook/addon-docs' -import { - Avatar, -} from '~/src/components/Avatars/Avatar' import { Button, - ButtonSize, - ButtonColorVariant, - ButtonStyleVariant, } from '~/src/components/Button' -import { - ListItem, -} from '~/src/components/ListItem' -import { - Overlay, - OverlayPosition, -} from '~/src/components/Overlay' -import { - SectionLabel, -} from '~/src/components/SectionLabel' -import { - StackItem, - HStack, - VStack, -} from '~/src/components/Stack' -import { - StatusType, -} from '~/src/components/Status' -import { - Text, -} from '~/src/components/Text' -import { - styled, - Typography, -} from '~/src/foundation' -import { - OverviewCTA, - OverviewFloating, - UsageAsync, - UsageComposite, - UsageCTA, - UsageCTA2, - UsageDropdown, - UsageVariousContentsComposite, - UsageVariousContentsCustom, - UsageVariousContentsIconOnly, - UsageWebLinks, - VariantsColor, - VariantsSize, - VariantsStyle, -} from './Button.stories' # Button diff --git a/packages/bezier-react/src/components/Button/Button.stories.tsx b/packages/bezier-react/src/components/Button/Button.stories.tsx index ff79b1a3c2..be6dd62354 100644 --- a/packages/bezier-react/src/components/Button/Button.stories.tsx +++ b/packages/bezier-react/src/components/Button/Button.stories.tsx @@ -24,10 +24,10 @@ import { type StoryObj, } from '@storybook/react' -import { styled } from '~/src/foundation' - import { Avatar } from '~/src/components/Avatars/Avatar' +import { Box } from '~/src/components/Box' import { ButtonGroup } from '~/src/components/ButtonGroup' +import { Center } from '~/src/components/Center' import { LegacyHStack, LegacyStackItem, @@ -240,18 +240,16 @@ export const UsageWebLinks: StoryObj<{}> = { name: 'Usage (as web link)', } -const Card = styled.div` - width: 360px; - padding: 6px; - ${({ foundation }) => foundation?.elevation.ev3()} - ${({ foundation }) => foundation?.rounding.round12} -` - export const UsageComposite: StoryObj<{}> = { render: () => ( - + = { /> - + ), @@ -361,16 +359,6 @@ export const UsageVariousContentsIconOnly: StoryObj<{}> = { name: 'Usage (icon only button)', } -const AlertBadge = styled.div` - display: flex; - justify-content: center; - align-items: center; - width: 20px; - height: 20px; - background-color: var(--bgtxt-red-dark); - border-radius: 50%; -` - export const UsageVariousContentsCustom: StoryObj<{}> = { render: () => ( @@ -385,11 +373,16 @@ export const UsageVariousContentsCustom: StoryObj<{}> = { )} text="New messages" rightContent={( - +
1 - +
)} colorVariant={ButtonColorVariant.Red} styleVariant={ButtonStyleVariant.Floating} @@ -434,13 +427,6 @@ export const UsageAsync: StoryObj<{}> = { name: 'Usage (with asyncrhonous actions)', } -const Dropdown = styled.div` - width: 200px; - padding: 6px; - ${({ foundation }) => foundation?.elevation.ev2()} - ${({ foundation }) => foundation?.rounding.round8} -` - const OpenDropdownButton = () => { const [isOpen, setIsOpen] = useState(false) const [target, setTarget] = useState(null) @@ -464,9 +450,14 @@ const OpenDropdownButton = () => { position={OverlayPosition.BottomLeft} marginY={6} > - + Dropdown content - + ) diff --git a/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.stories.tsx b/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.stories.tsx index fd611db07e..14554bfd37 100644 --- a/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.stories.tsx +++ b/packages/bezier-react/src/components/ButtonGroup/ButtonGroup.stories.tsx @@ -6,12 +6,11 @@ import type { StoryObj, } from '@storybook/react' -import { styled } from '~/src/foundation' - import { Button, ButtonStyleVariant, } from '~/src/components/Button' +import { Center } from '~/src/components/Center' import { LegacySpacer, LegacyStackItem, @@ -31,16 +30,11 @@ const meta: Meta = { } export default meta -const Wrapper = styled.div` - display: flex; - align-items: center; - justify-content: center; - width: 200px; - height: 200px; -` - const Template: StoryFn = (props) => ( - +
@@ -49,7 +43,7 @@ const Template: StoryFn = (props) => ( - +
) export const Playground: StoryObj = { diff --git a/packages/bezier-react/src/components/Divider/Divider.stories.tsx b/packages/bezier-react/src/components/Divider/Divider.stories.tsx index 234c29c460..3e3950b531 100644 --- a/packages/bezier-react/src/components/Divider/Divider.stories.tsx +++ b/packages/bezier-react/src/components/Divider/Divider.stories.tsx @@ -6,9 +6,8 @@ import type { StoryObj, } from '@storybook/react' -import { styled } from '~/src/foundation' - import { ListItem } from '~/src/components/ListItem' +import { Stack } from '~/src/components/Stack' import { Divider } from './Divider' import { type DividerProps } from './Divider.types' @@ -42,23 +41,16 @@ const meta = { export default meta -interface WrapperProps { - direction?: 'column' | 'row' -} - -const Wrapper = styled.div` - display: flex; - align-items: center; - justify-content: center; - flex-direction: ${({ direction = 'column' }) => direction}; - width: 200px; - height: 200px; -` - const Template: StoryFn = (props) => ( - + - + ) export const Primary: StoryObj = { @@ -73,11 +65,17 @@ const CompositionTemplate: StoryFn = ({ orientation, ...rest }) => ( - + - + ) export const Composition: StoryObj = { diff --git a/packages/bezier-react/src/components/Emoji/Emoji.stories.tsx b/packages/bezier-react/src/components/Emoji/Emoji.stories.tsx index aa88ae3612..5f471871e4 100644 --- a/packages/bezier-react/src/components/Emoji/Emoji.stories.tsx +++ b/packages/bezier-react/src/components/Emoji/Emoji.stories.tsx @@ -1,12 +1,8 @@ -import React from 'react' - import { type Meta, - type StoryFn, + type StoryObj, } from '@storybook/react' -import { styled } from '~/src/foundation' - import { getObjectFromEnum } from '~/src/utils/story' import { Emoji } from './Emoji' @@ -33,70 +29,13 @@ const meta: Meta = { }, }, } -export default meta - -export const Primary = { - args: { - size: EmojiSize.Size24, - imageUrl: MOCK_EMOJI_URL, - }, -} - -const Wrapper = styled.button` - display: flex; - align-items: center; - justify-content: center; - padding: 0; - cursor: pointer; - background: transparent; - border: 0; - border-radius: ${({ foundation }) => foundation?.rounding.round4}; - &:hover { - background-color: ${({ foundation }) => foundation?.theme['bg-black-light']}; - } -` - -const HoverTemplate: StoryFn = (args) => ( - - - -) - -export const WithHover = { - render: HoverTemplate, +export default meta +export const Primary: StoryObj = { args: { size: EmojiSize.Size24, imageUrl: MOCK_EMOJI_URL, }, } -const MultipleTemplate: StoryFn = (args) => ( - <> - - - - - - - - - - - - - - - - -) - -export const WithMultipleEmoji = { - render: MultipleTemplate, - - args: { - size: EmojiSize.Size24, - imageUrl: MOCK_EMOJI_URL, - }, -} diff --git a/packages/bezier-react/src/components/Forms/Inputs/mixins.ts b/packages/bezier-react/src/components/Forms/Inputs/mixins.ts deleted file mode 100644 index dcb88763e8..0000000000 --- a/packages/bezier-react/src/components/Forms/Inputs/mixins.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { css } from '~/src/foundation' - -import { type FormComponentProps } from '~/src/components/Forms/Form.types' - -export const inputTextStyle = css` - color: ${({ foundation }) => foundation?.theme?.['txt-black-darkest']}; - - ${(props: FormComponentProps) => props?.readOnly && css` - color: ${({ foundation }) => foundation?.theme?.['txt-black-darker']}; - `} -` - -export const inputPlaceholderStyle = css` - &::placeholder { - color: ${({ foundation }) => foundation?.theme?.['txt-black-dark']}; - } -` - -export const inputWrapperStyle = css` - box-shadow: 0 1px 2px ${({ foundation }) => foundation?.theme?.['bg-black-lighter']}, - inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bg-black-dark']}; -` - -export const focusedInputWrapperStyle = css` - box-shadow: 0 0 0 3px ${({ foundation }) => foundation?.theme?.['bgtxt-blue-light']}, - inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bgtxt-blue-normal']}; -` - -export const erroredInputWrapperStyle = css` - box-shadow: 0 0 0 3px ${({ foundation }) => foundation?.theme?.['bgtxt-orange-light']}, - inset 0 0 0 1px ${({ foundation }) => foundation?.theme?.['bgtxt-orange-normal']}; -` diff --git a/packages/bezier-react/src/components/Icon/Icon.stories.tsx b/packages/bezier-react/src/components/Icon/Icon.stories.tsx index b19955f133..dea3f7030f 100644 --- a/packages/bezier-react/src/components/Icon/Icon.stories.tsx +++ b/packages/bezier-react/src/components/Icon/Icon.stories.tsx @@ -26,12 +26,8 @@ import { type StoryObj, } from '@storybook/react' -import { - LightFoundation, - type SemanticNames, - styled, -} from '~/src/foundation' - +import { useToken } from '~/src/providers/ThemeProvider' +import { type SemanticColor } from '~/src/types/Token' import { getObjectFromEnum, iconList, @@ -45,6 +41,7 @@ import { LegacyVStack, } from '~/src/components/LegacyStack' import { ListItem } from '~/src/components/ListItem' +import { Stack } from '~/src/components/Stack' import { Text } from '~/src/components/Text' import { Icon } from './Icon' @@ -72,19 +69,6 @@ const meta: Meta = { } export default meta -const IconInfo = styled.div` - display: inline-flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 120px; - height: 120px; -` - -const Name = styled.p` - text-align: center; -` - export const Playground: StoryObj = { args: { source: ChannelIcon, @@ -100,10 +84,18 @@ export const AllIcons: StoryObj> = { render: (args) => ( <> { iconList.map((iconName) => ( - + - { pascalCase(iconName) } - + { pascalCase(iconName) } + )) } ), @@ -197,7 +189,8 @@ export const Overview: StoryFn<{}> = () => ( export const UsageColor: StoryObj<{}> = { render: function Render() { - const [color, setColor] = useState('bgtxt-blue-normal') + const [color, setColor] = useState('bgtxt-blue-normal') + const token = useToken() return ( @@ -211,11 +204,11 @@ export const UsageColor: StoryObj<{}> = {