diff --git a/package.json b/package.json index b80c83c..45e1af5 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@yourssu/design-system-react", "packageManager": "pnpm@9.15.2", "private": false, - "version": "2.0.0", + "version": "2.0.1", "description": "Yourssu Design System for React", "keywords": [ "yourssu", diff --git a/src/components/LoadingIndicator/LoadingIndicator.mdx b/src/components/LoadingIndicator/LoadingIndicator.mdx new file mode 100644 index 0000000..4b6cba7 --- /dev/null +++ b/src/components/LoadingIndicator/LoadingIndicator.mdx @@ -0,0 +1,56 @@ +import { Canvas, Meta, Controls } from '@storybook/blocks'; +import * as LoadingIndicatorStories from './LoadingIndicator.stories'; +import { LoadingIndicator } from './LoadingIndicator'; +import React from 'react'; + + + +# Loading Indicator + +Loading Indicator는 사용자가 불특정한 시간을 기다려야 할 때 사용합니다.
+ + + + +
+
+ +## 개발 시 참고하면 좋을 내용 + +- Loading Indicator의 `width`는 기본적으로 부모 컴포넌트의 100%로 지정되어 있으며, 변경할 수 없습니다. + + - 컴포넌트가 항상 화면 수평 중앙에 위치하도록 보장하기 위함입니다.

+ +- Loading Indicator의 크기는 40 \* 40(px)로 고정되어 있습니다. + +
+
+ +## 사용법 + +Loading Indicator의 기본 사용법입니다. + +```tsx +import { LoadingIndicator } from '@yourssu/design-system-react'; +``` + +```tsx + +``` + +
+
+ +## 예시 + +### indicatorColor + +Loading Indicator는 기본적으로 `line/brand/primary` 색상을 사용합니다.
+ +`indicatorColor` 프로퍼티를 지정하여 색상을 변경할 수 있습니다. + +```tsx + +``` + + diff --git a/src/components/LoadingIndicator/LoadingIndicator.stories.tsx b/src/components/LoadingIndicator/LoadingIndicator.stories.tsx new file mode 100644 index 0000000..c96b787 --- /dev/null +++ b/src/components/LoadingIndicator/LoadingIndicator.stories.tsx @@ -0,0 +1,28 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { LoadingIndicator } from './LoadingIndicator'; +import { LoadingIndicatorProps } from './LoadingIndicator.type'; + +const meta: Meta = { + title: 'Components/Loading Indicator', + component: LoadingIndicator, + parameters: { + layout: 'centered', + }, + argTypes: { + indicatorColor: { + description: 'Loading Indicator의 색상을 결정하는 속성', + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Primary: Story = {}; + +export const Color: Story = { + args: { + indicatorColor: '#000000', + }, +}; diff --git a/src/components/LoadingIndicator/LoadingIndicator.style.ts b/src/components/LoadingIndicator/LoadingIndicator.style.ts new file mode 100644 index 0000000..4fac6b2 --- /dev/null +++ b/src/components/LoadingIndicator/LoadingIndicator.style.ts @@ -0,0 +1,23 @@ +import { styled } from 'styled-components'; + +export const StyledIndicator = styled.div` + width: 100%; + display: flex; + justify-content: center; + + svg { + flex-shrink: 0; + } + + transform: rotate(0deg); + animation: rotateAnimation 600ms linear infinite; + + @keyframes rotateAnimation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } +`; diff --git a/src/components/LoadingIndicator/LoadingIndicator.tsx b/src/components/LoadingIndicator/LoadingIndicator.tsx new file mode 100644 index 0000000..b862927 --- /dev/null +++ b/src/components/LoadingIndicator/LoadingIndicator.tsx @@ -0,0 +1,31 @@ +import { useTheme } from 'styled-components'; + +import { StyledIndicator } from './LoadingIndicator.style'; +import { LoadingIndicatorProps } from './LoadingIndicator.type'; + +export const LoadingIndicator = ({ indicatorColor }: LoadingIndicatorProps) => { + const theme = useTheme(); + + return ( + + + + + + + ); +}; diff --git a/src/components/LoadingIndicator/LoadingIndicator.type.ts b/src/components/LoadingIndicator/LoadingIndicator.type.ts new file mode 100644 index 0000000..2723cbf --- /dev/null +++ b/src/components/LoadingIndicator/LoadingIndicator.type.ts @@ -0,0 +1,3 @@ +export interface LoadingIndicatorProps { + indicatorColor?: string; +} diff --git a/src/components/LoadingIndicator/index.ts b/src/components/LoadingIndicator/index.ts new file mode 100644 index 0000000..2965080 --- /dev/null +++ b/src/components/LoadingIndicator/index.ts @@ -0,0 +1,2 @@ +export { LoadingIndicator } from './LoadingIndicator'; +export type { LoadingIndicatorProps } from './LoadingIndicator.type'; diff --git a/src/components/index.ts b/src/components/index.ts index 94d7216..5311839 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -58,3 +58,6 @@ export type { DividerProps } from './Divider'; export { SnackbarProvider } from './Snackbar/SnackbarProvider'; export { useSnackbar } from './Snackbar/hooks/useSnackbar'; export type * from './Snackbar'; + +export { LoadingIndicator } from './LoadingIndicator'; +export type { LoadingIndicatorProps } from './LoadingIndicator'; diff --git a/src/style/foundation/color/color.mdx b/src/style/foundation/color/color.mdx index a29b648..ed5dba1 100644 --- a/src/style/foundation/color/color.mdx +++ b/src/style/foundation/color/color.mdx @@ -60,4 +60,12 @@ const StyledDiv = styled.div`
- + + {({ colors }) => ( + + {colors.map((color) => ( + + ))} + + )} + diff --git a/src/style/foundation/color/color.stories.tsx b/src/style/foundation/color/color.stories.tsx index c926178..2de0abf 100644 --- a/src/style/foundation/color/color.stories.tsx +++ b/src/style/foundation/color/color.stories.tsx @@ -1,9 +1,17 @@ -import { ColorItem, ColorPalette } from '@storybook/blocks'; -import { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { styled } from 'styled-components'; import { semanticColorPalette } from '@/style/foundation/color/semanticColor'; +type SemanticColorPalette = { + title: string; + colors: Record; +}; + +interface AllThemeColorsProps { + children?: ({ colors }: { colors: SemanticColorPalette[] }) => React.ReactElement; +} + const meta: Meta = { title: 'Foundation/Color', parameters: { @@ -19,7 +27,7 @@ const StyledColorExample = styled.div` background-color: ${({ theme }) => theme.semantic.color.bgBrandPrimary}; `; -const AllThemeColors = () => { +const AllThemeColors = ({ children }: AllThemeColorsProps) => { const getSemanticColorPalette = (prefix: string) => { const colors: Record = {}; @@ -42,8 +50,8 @@ const AllThemeColors = () => { const semanticColorCategories = { background: ['bgBasic', 'bgBrand', 'bgStatus'], text: ['textBasic', 'textBrand', 'textStatus'], - line: ['lineBasic', 'lineStatus'], - 'button/box': ['buttonBoxPrimary', 'buttonBoxSecondary', 'buttonBoxTertiary'], + line: ['lineBasic', 'lineBrand', 'lineStatus'], + 'button/box': ['buttonFilledPrimary', 'buttonFilledSecondary', 'buttonOutlined'], 'button/text': ['buttonTextPrimary', 'buttonTextSecondary'], 'button/fab': ['buttonFabPrimary', 'buttonFabSecondary'], 'button/radio': ['buttonRadio'], @@ -51,6 +59,8 @@ const AllThemeColors = () => { checkbox: ['checkbox'], chip: ['chip'], pagination: ['paginationBrand', 'paginationBasic'], + switch: ['switch'], + snackbar: ['snackbar'], }; return ( @@ -63,17 +73,7 @@ const AllThemeColors = () => { return (

{section}

- - {colors.map((color) => { - return ( - - ); - })} - + {children && children({ colors })}