Shinwon

.eslintrc.cjs

@@ -20,7 +20,9 @@ module.exports = {
   },
   plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
   rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
     'react/react-in-jsx-scope': 'off',
+    'react/no-unknown-property': ['error', { ignore: ['css'] }],
     'import/no-unresolved': 'off',
     'import/order': [
       'warn',

.storybook/main.ts

@@ -7,10 +7,6 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
-    {
-      name: "@storybook/addon-styling",
-      options: {},
-    },
   ],
   framework: {
     name: "@storybook/react-vite",

package.json

@@ -15,6 +15,7 @@
     "@emotion/babel-plugin": "^11.11.0",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "jackspeak": "^2.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -24,7 +25,6 @@
     "@storybook/addon-interactions": "^7.4.1",
     "@storybook/addon-links": "^7.4.1",
     "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/addon-styling": "^1.3.7",
     "@storybook/blocks": "^7.4.1",
     "@storybook/builder-vite": "^7.4.1",
     "@storybook/react": "^7.4.1",

src/components/Button/Button.stories.tsx

@@ -0,0 +1,25 @@
+import Button from './Button';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  decorators: [
+    (Story) => (
+      <div style={{ margin: '3rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Primary: StoryObj<typeof Button> = {
+  args: {
+    variant: 'filled',
+    size: 'medium',
+    children: 'Button',
+    disabled: false,
+  },
+};

src/components/Button/Button.styles.tsx

@@ -0,0 +1,114 @@
+import { IButton } from './Button.types';
+
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const ButtonBase = styled.button<IButton>`
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100px;
+
+  text-align: center;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.1px;
+  line-height: 20px;
+  cursor: pointer;
+
+  ${({ size }) => {
+    switch (size) {
+      case 'small':
+        return css`
+          font-size: 12px;
+          padding: 0.375rem 1.125rem;
+        `;
+      case 'medium':
+        return css`
+          font-size: 14px;
+          padding: 0.5rem 1.5rem;
+        `;
+      case 'large':
+        return css`
+          font-size: 16px;
+          padding: 0.625rem 1.875rem;
+        `;
+      default:
+        return css`
+          font-size: 14px;
+          padding: 0.5rem 1.5rem;
+        `;
+    }
+  }}
+
+  &:disabled {
+    cursor: default;
+  }
+`;
+
+export const filledButton = styled(ButtonBase)`
+  color: #ffffff;
+  background-color: #6750a4;
+  border: none;
+  outline: none;
+
+  &:not(:disabled):hover {
+    background-color: #735eab;
+    box-shadow:
+      0px 1px 3px 1px rgba(0, 0, 0, 0.15),
+      0px 1px 2px 0px rgba(0, 0, 0, 0.3);
+  }
+
+  &:not(:disabled):active {
+    background-color: #7965af;
+  }
+
+  &:disabled {
+    background-color: #1d1b201e;
+    color: #a8a3aa;
+  }
+`;
+
+export const elevatedButton = styled(ButtonBase)`
+  color: #6750a4;
+  background-color: #f7f2fa;
+  border: none;
+  outline: none;
+  box-shadow:
+    0px 1px 3px 1px rgba(0, 0, 0, 0.15),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.3);
+
+  &:not(:disabled):hover {
+    background-color: rgba(103, 80, 164, 0.08);
+  }
+
+  &:not(:disabled):active {
+    background-color: rgba(103, 80, 164, 0.12);
+  }
+
+  &:disabled {
+    background-color: #1d1b201e;
+    color: #a8a3aa;
+  }
+`;
+
+export const outlinedButton = styled(ButtonBase)`
+  color: #6750a4;
+  background-color: #f7f2fa;
+  border: #79747e 1px solid;
+
+  &:not(:disabled):hover {
+    background-color: rgba(103, 80, 164, 0.08);
+  }
+
+  &:not(:disabled):active {
+    background-color: rgba(103, 80, 164, 0.12);
+  }
+
+  &:disabled {
+    background-color: #fff;
+    color: #a8a3aa;
+    border: #1d1b201f 1px solid;
+  }
+`;

src/components/Button/Button.tsx

@@ -0,0 +1,28 @@
+import { filledButton, elevatedButton, outlinedButton } from './Button.styles';
+import { IButton } from './Button.types';
+
+function Button({
+  children,
+  size = 'medium',
+  variant = 'filled',
+  disabled,
+  onClick,
+  onBlur,
+  ...rest
+}: IButton) {
+  const VariantButton = {
+    filled: filledButton,
+    outlined: outlinedButton,
+    elevated: elevatedButton,
+  };
+
+  const StButton = VariantButton[variant];
+
+  return (
+    <StButton size={size} disabled={disabled} onClick={onClick} onBlur={onBlur} {...rest}>
+      {children}
+    </StButton>
+  );
+}
+
+export default Button;

src/components/Button/Button.types.tsx

@@ -0,0 +1,8 @@
+export interface IButton extends React.ComponentPropsWithoutRef<'button'> {
+  children: React.ReactNode;
+  size?: 'small' | 'medium' | 'large';
+  variant?: 'filled' | 'outlined' | 'elevated';
+  disabled?: boolean;
+  onClick?: () => void;
+  onBlur?: () => void;
+}

src/components/Grid/Grid.styles.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+export const GridContainer = styled.table``;
+
+export const GridHeader = styled.thead``;
+
+export const GridBody = styled.tbody``;
+
+export const GridRow = styled.tr``;
+
+export const GridHeaderCell = styled.th``;
+
+export const GridCell = styled.td``;

src/components/Grid/Grid.tsx

@@ -0,0 +1,34 @@
+import {
+  GridBody,
+  GridCell,
+  GridContainer,
+  GridHeader,
+  GridHeaderCell,
+  GridRow,
+} from './Grid.styles';
+import { IGridProps } from './Grid.types';
+
+function Grid({ columns, rows }: IGridProps) {
+  return (
+    <GridContainer>
+      <GridHeader>
+        <GridRow>
+          {columns.map((column) => (
+            <GridHeaderCell key={column.key}>{column.title}</GridHeaderCell>
+          ))}
+        </GridRow>
+      </GridHeader>
+      <GridBody>
+        {rows.map((row, index) => (
+          <GridRow key={index}>
+            {columns.map((column) => (
+              <GridCell key={column.key}>{row[column.dataIndex]}</GridCell>
+            ))}
+          </GridRow>
+        ))}
+      </GridBody>
+    </GridContainer>
+  );
+}
+
+export default Grid;

src/components/Grid/Grid.types.tsx

@@ -0,0 +1,14 @@
+export interface IGridProps {
+  columns: IGridColumn[];
+  rows: IGridRow[];
+}
+
+export interface IGridColumn {
+  title: string;
+  dataIndex: string;
+  key: string;
+}
+
+export interface IGridRow {
+  [key: IGridColumn['dataIndex']]: any;
+}

src/components/Grid/GridBase.tsx

@@ -0,0 +1,20 @@
+import {
+  GridBody,
+  GridCell,
+  GridContainer,
+  GridHeader,
+  GridHeaderCell,
+  GridRow,
+} from './Grid.styles';
+
+export const GridBase = Object.assign(
+  {},
+  {
+    Root: GridContainer,
+    Header: GridHeader,
+    Body: GridBody,
+    Row: GridRow,
+    HeaderCell: GridHeaderCell,
+    Cell: GridCell,
+  }
+);

src/components/Grid/index.tsx

@@ -0,0 +1,2 @@
+export * from './GridBase';
+export * from './Grid';

src/main.tsx

@@ -1,8 +1,22 @@
+import Grid from './components/Grid/Grid';
+
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
+const columns = [
+  { key: 'name', title: 'Name', dataIndex: 'name' },
+  { key: 'age', title: 'Age', dataIndex: 'age' },
+  { key: 'address', title: 'Address', dataIndex: 'address' },
+];
+
+const rows = [
+  { name: 'John', age: 32, address: 'New York' },
+  { name: 'Jane', age: 42, address: 'London' },
+  { name: 'Joe', age: 52, address: 'Paris' },
+];
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <div>Metamon Components</div>
+    <Grid columns={columns} rows={rows} />
   </React.StrictMode>
 );

vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 
 export default defineConfig({
   plugins: [