Merge pull request #56 from team-xquare/feat/foundation-setting

feat(xdesign-story): foundation(Color System 제외) 세팅

.github/workflows/pr-service.yml

@@ -18,7 +18,7 @@ jobs:
 
       - name: diff-workspace
         id: set-matrix
-        run: echo "::set-output name=matrix::{\"workspaces\":[$(yarn changed list --git-range $(git rev-parse HEAD^) --json --exclude xquare-frontend --exclude @shared/xbridge | tr "\n" ",")]}"
+        run: echo "::set-output name=matrix::{\"workspaces\":[$(yarn changed list --git-range $(git rev-parse HEAD^) --json --exclude xquare-frontend --exclude @shared/xbridge --exclude @shared/xdesign | tr "\n" ",")]}"
 
   build: 
     runs-on: ubuntu-latest
@@ -36,4 +36,4 @@ jobs:
         run: echo ::set-output name=SERVICE::$(echo ${{ matrix.workspaces.name }} | cut -d / -f 2)
 
       - name: Docker Build 
-        run: yarn docker build @service/${{steps.get_service.outputs.SERVICE}} 
+        run: yarn docker build @service/${{steps.get_service.outputs.SERVICE}} 

services/xdesign-story/.storybook/main.ts

@@ -15,5 +15,9 @@ const config = {
     docs: {
         autodocs: 'tag',
     },
+    staticDirs: ['../public'],
+    typescript: {
+        check: true,
+    },
 };
 export default config;

services/xdesign-story/.storybook/manager.ts

@@ -0,0 +1,8 @@
+import { addons } from '@storybook/addons';
+
+import theme from './theme';
+
+addons.setConfig({
+    theme,
+    panelPosition: 'right',
+});

services/xdesign-story/.storybook/preview.ts → services/xdesign-story/.storybook/preview.tsx

@@ -1,4 +1,6 @@
+import React from 'react';
 import type { Preview } from '@storybook/react';
+import { StyledProvider } from '../src/style/StyledProvider';
 
 const preview: Preview = {
     parameters: {
@@ -10,6 +12,13 @@ const preview: Preview = {
             },
         },
     },
+    decorators: [
+        (Story) => (
+            <StyledProvider>
+                <Story />
+            </StyledProvider>
+        ),
+    ],
 };
 
 export default preview;

services/xdesign-story/.storybook/theme.tsx

@@ -0,0 +1,7 @@
+import { create } from '@storybook/theming';
+
+export default create({
+    base: 'light',
+    brandTitle: 'Xquare Design System',
+    brandImage: '/images/vite.svg',
+});

services/xdesign-story/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

services/xdesign-story/next.config.js

@@ -5,4 +5,15 @@ module.exports = {
     experimental: {
         externalDir: true,
     },
-};
+    webpack: (config) => {
+        config.module.rules.push({
+            test: /\.(jpe?g|png|svg|gif|ico|eot|ttf|woff|woff2|mp4|pdf|webm|txt)$/,
+            loader: 'file-loader',
+            options: {
+                publicPath: 'public',
+            },
+        });
+
+        return config;
+    },
+};

services/xdesign-story/package.json

@@ -12,7 +12,11 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@emotion/core": "^11.0.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@xquare/utils": "1.0.8",
+    "file-loader": "^6.2.0",
     "next": "12.1.5",
     "react": "18.0.0",
     "react-dom": "18.0.0"
@@ -23,10 +27,14 @@
     "@storybook/addon-interactions": "^7.1.0-rc.2",
     "@storybook/addon-links": "^7.1.0-rc.2",
     "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addons": "^7.1.1",
     "@storybook/blocks": "^7.1.0-rc.2",
+    "@storybook/builder-webpack5": "^7.1.1",
     "@storybook/nextjs": "^7.1.0-rc.2",
-    "@storybook/react": "^7.1.0-rc.2",
+    "@storybook/react": "^7.3.1",
     "@storybook/testing-library": "^0.2.1-next.0",
+    "@storybook/theming": "^7.1.1",
+    "@types/file-loader": "^5.0.1",
     "@types/node": "17.0.24",
     "@types/react": "18.0.5",
     "@types/react-dom": "18.0.1",

services/xdesign-story/public/images/image.d.ts

@@ -0,0 +1 @@
+declare module '*.svg';

services/xdesign-story/src/components/Flex/Flex.types.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'react';
+
+export interface FlexProps extends HTMLAttributes<HTMLElement> {
+    gap?: number;
+    align?:
+        | 'center'
+        | 'flex-start'
+        | 'flex-end'
+        | 'space-between'
+        | 'space-around'
+        | 'space-evenly'
+        | 'stretch';
+    justify?:
+        | 'center'
+        | 'flex-start'
+        | 'flex-end'
+        | 'space-between'
+        | 'space-around'
+        | 'space-evenly';
+    fullWidth?: boolean;
+}

services/xdesign-story/src/components/Flex/FlexCol.tsx

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+import { FlexProps } from './Flex.types';
+
+export const FlexCol = styled.div<FlexProps>`
+    display: flex;
+    flex-direction: column;
+    justify-content: ${({ justify }) => justify};
+    align-items: ${({ align }) => align};
+    gap: ${({ gap = 0 }) => gap}px;
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'initial')};
+`;

services/xdesign-story/src/components/Flex/FlexRow.tsx

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+import { FlexProps } from './Flex.types';
+
+export const FlexRow = styled.div<FlexProps>`
+    display: flex;
+    flex-direction: row;
+    justify-content: ${({ justify }) => justify};
+    align-items: ${({ align }) => align};
+    gap: ${({ gap = 0 }) => gap}px;
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'initial')};
+`;

services/xdesign-story/src/components/Flex/index.ts

@@ -0,0 +1,2 @@
+export * from './FlexCol';
+export * from './FlexRow';

services/xdesign-story/src/components/Logo/Logo.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Logo } from './Logo';
+
+const meta: Meta<typeof Logo> = {
+    title: 'Components/Logo',
+    component: Logo,
+};
+
+export default meta;
+type Story = StoryObj<typeof Logo>;
+
+export const Default: Story = {
+    args: { symbol: true, wordmark: true, height: 60 },
+};

services/xdesign-story/src/components/Logo/Logo.tsx

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+import { FlexCol, FlexRow } from '../Flex';
+import { LogoProps } from './Logo.types';
+import { Spacing } from './Spacing';
+import { Symbol } from './Symbol';
+import { Wordmark } from './Wordmark';
+
+export const Logo = ({
+    symbol = true,
+    wordmark = true,
+    height = 40,
+    serviceName,
+    ...props
+}: LogoProps) => {
+    return (
+        <FlexRow align="center" {...props}>
+            {symbol && <Symbol height={height} />}
+            {symbol && wordmark && <Spacing height={height * 0.7} />}
+            {serviceName
+                ? wordmark && (
+                      <FlexCol justify="space-between">
+                          <Wordmark height={height * 0.45} />
+                          <ServiceName height={height * 0.3}>{serviceName}</ServiceName>
+                      </FlexCol>
+                  )
+                : wordmark && <Wordmark height={height * 0.7} />}
+        </FlexRow>
+    );
+};
+
+const ServiceName = styled.div<{ height: number }>`
+    font-size: ${({ height }) => height}px;
+`;

services/xdesign-story/src/components/Logo/Logo.types.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+
+export interface LogoProps extends HTMLAttributes<HTMLElement> {
+    symbol?: boolean;
+    wordmark?: boolean;
+    height?: number;
+    serviceName?: string;
+}

services/xdesign-story/src/components/Logo/Spacing/Spacing.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const Spacing = ({ ...props }) => {
+    return (
+        <svg viewBox="0 0 62 160" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <rect width="62" height="160" />
+        </svg>
+    );
+};

services/xdesign-story/src/components/Logo/Spacing/index.ts

@@ -0,0 +1 @@
+export { Spacing } from './Spacing';

services/xdesign-story/src/components/Logo/Symbol/index.ts

@@ -0,0 +1 @@
+export { Symbol } from './Symbol';

services/xdesign-story/src/components/Logo/Wordmark/Wordmark.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const Wordmark = ({ ...props }) => {
+    return (
+        <svg viewBox="0 0 192 38" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                d="M8.67969 1.0625L15.6172 12.7344H15.8516L22.8359 1.0625H30.8047L20.4453 18.0312L31.0391 35H22.8828L15.8516 23.3281H15.6172L8.58594 35H0.476562L11.1172 18.0312L0.664062 1.0625H8.67969ZM46.2734 23.2344H52.3203L54.8984 26.5391C56.5156 24.6641 57.4531 21.7812 57.4297 18.0312C57.4531 10.7656 53.9844 6.85156 48.7578 6.82812C43.4844 6.85156 40.0391 10.7656 40.0391 18.0312C40.0391 25.2734 43.4844 29.2109 48.7578 29.2344C49.4375 29.2344 50.0938 29.1641 50.7031 29.0234L46.2734 23.2344ZM32.8672 18.0312C32.8672 6.94531 39.7109 0.59375 48.7578 0.59375C57.7344 0.59375 64.6016 6.94531 64.6016 18.0312C64.6016 24.1016 62.5391 28.7422 59.2109 31.7188L64.0391 37.8125H57.4297L54.7109 34.4375C52.8828 35.1172 50.8672 35.4688 48.7578 35.4688C39.7109 35.4688 32.8672 29.0703 32.8672 18.0312ZM90.7109 1.0625H97.7891V23.0938C97.7891 30.5234 92.1406 35.4922 83.7266 35.4688C75.2891 35.4922 69.7109 30.5234 69.7109 23.0938V1.0625H76.7422V22.5312C76.7656 26.4453 79.5312 29.2578 83.7266 29.2812C87.9688 29.2578 90.7344 26.4453 90.7109 22.5312V1.0625ZM109.18 35H101.586L113.352 1.0625H122.398L134.117 35H126.57L124.016 27.1719H111.734L109.18 35ZM113.516 21.6875H122.234L117.992 8.70312H117.758L113.516 21.6875ZM137.961 35V1.0625H151.273C158.984 1.0625 163.414 5.39844 163.414 12.125C163.414 16.7656 161.281 20.1406 157.414 21.8047L164.633 35H156.852L150.359 22.9531H144.992V35H137.961ZM144.992 17.2344H149.961C154.133 17.2344 156.172 15.5234 156.148 12.125C156.172 8.70312 154.133 6.85156 149.961 6.82812H144.992V17.2344ZM168.289 35V1.0625H191.07V6.875H175.32V15.125H189.898V20.9375H175.32V29.1875H191.117V35H168.289Z"
+                fill="black"
+            />
+        </svg>
+    );
+};

services/xdesign-story/src/components/Logo/Wordmark/index.ts

@@ -0,0 +1 @@
+export { Wordmark } from './Wordmark';

services/xdesign-story/src/components/Logo/index.ts

@@ -0,0 +1,4 @@
+export { Logo } from './Logo';
+export { Symbol } from './Symbol';
+export { Spacing } from './Spacing';
+export { Wordmark } from './Wordmark';

services/xdesign-story/src/components/Text/Text.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Text } from './Text';
+
+const meta: Meta<typeof Text> = {
+    title: 'Components/Text',
+    component: Text,
+};
+
+export default meta;
+type Story = StoryObj<typeof Text>;
+
+export const Default: Story = {
+    args: { children: '테스트' },
+};

services/xdesign-story/src/components/Text/Text.tsx

@@ -0,0 +1,39 @@
+import styled from '@emotion/styled';
+import { TextProps } from './Text.type';
+
+export const Text = ({
+    align,
+    children,
+    typograghy = 'Body',
+    size = 'Large',
+    whiteSpace,
+    underline,
+    htmlFor,
+    userSelect,
+    textOverflow,
+    ...props
+}: TextProps) => {
+    return (
+        <TextView
+            align={align}
+            whiteSpace={whiteSpace}
+            underline={underline}
+            htmlFor={htmlFor}
+            userSelect={userSelect}
+            textOverflow={textOverflow}
+            size={size}
+            typograghy={typograghy}
+            {...props}>
+            {children}
+        </TextView>
+    );
+};
+
+export const TextView = styled.span<TextProps>`
+    ${({ theme, typograghy = 'Body', size = 'Large' }) => theme.fontStyle[typograghy][size]};
+    text-align: ${({ align }) => align};
+    white-space: ${({ whiteSpace }) => whiteSpace};
+    text-decoration: ${({ underline }) => (underline ? 'underline' : 'none')};
+    user-select: ${({ userSelect }) => userSelect};
+    text-overflow: ${({ textOverflow }) => textOverflow};
+`;

services/xdesign-story/src/components/Text/Text.type.ts

@@ -0,0 +1,21 @@
+import { TypoGraphyType, FontSizeKeyType } from '@/foundations';
+import { HTMLAttributes } from 'react';
+
+export interface TextProps extends HTMLAttributes<HTMLSpanElement> {
+    align?: 'start' | 'end' | 'left' | 'right' | 'center' | 'justify' | 'match-parent' | 'inherit';
+    typograghy?: TypoGraphyType;
+    size?: FontSizeKeyType;
+    // color?: ;
+    whiteSpace?: 'normal' | 'pre' | 'nowrap' | 'pre-wrap' | 'pre-line' | 'break-spaces' | 'inherit';
+    underline?: boolean;
+    htmlFor?: string;
+    userSelect?: 'auto' | 'text' | 'none' | 'contain' | 'all';
+    textOverflow?:
+        | 'clip'
+        | 'ellipsis'
+        | 'inherit'
+        | 'initial'
+        | 'revert'
+        | 'revert-layer'
+        | 'unset';
+}

services/xdesign-story/src/components/Text/index.ts

@@ -0,0 +1,2 @@
+export { Text } from './Text';
+export type { TextProps } from './Text.type';

services/xdesign-story/src/foundations/Corner/Corner.stories.tsx

@@ -0,0 +1,40 @@
+import { FlexCol, FlexRow } from '@/components/Flex';
+import { Text } from '@/components/Text';
+import styled from '@emotion/styled';
+import type { Meta } from '@storybook/react';
+import { cornerList } from './Corner';
+import { CornerKeyType } from './Corner.types';
+
+const meta: Meta = {
+    title: 'Foundations/Corner',
+};
+
+export default meta;
+
+export const FontWeightTemplate = () => (
+    <FlexCol gap={20}>
+        {cornerList.map((corner) => (
+            <FlexRow align="center" gap={30}>
+                <Rect radius={corner[0]} />
+                <FlexCol>
+                    <Text userSelect="none" typograghy="Display" size="Small">
+                        {corner[0]}
+                    </Text>
+                    <Text userSelect="none" typograghy="Body" size="Large">
+                        {corner[1]}px
+                    </Text>
+                </FlexCol>
+            </FlexRow>
+        ))}
+    </FlexCol>
+);
+
+FontWeightTemplate.storyName = 'Corner';
+
+const Rect = styled.div<{ radius: CornerKeyType }>`
+    width: 120px;
+    height: 120px;
+    border-radius: ${({ theme, radius }) => theme.corner[radius]}px;
+    // TODO 색상 컬러시스템으로 변경 필요
+    background-color: #9650fa;
+`;

services/xdesign-story/src/foundations/Corner/Corner.ts

@@ -0,0 +1,14 @@
+import { CornerKeyType, CornerType } from './Corner.types';
+
+export const corner: CornerType = {
+    xSmall: 8,
+    Small: 16,
+    Medium: 24,
+    Large: 32,
+    xLarge: 40,
+};
+
+export const cornerList: [CornerKeyType, number][] = Object.entries(corner) as [
+    CornerKeyType,
+    number,
+][];

services/xdesign-story/src/foundations/Corner/Corner.types.ts

@@ -0,0 +1,3 @@
+export type CornerKeyType = 'xSmall' | 'Small' | 'Medium' | 'Large' | 'xLarge';
+
+export type CornerType = Record<CornerKeyType, number>;