@soul-refiner/design-system 0.0.25 → 0.1.0

package/package.json

@@ -1,86 +1,80 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.0.25",
-  "main": "./dist/index.umd.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/src/index.d.ts",
-  "files": [
-    "dist"
+  "version": "0.1.0",
+  "main": "src/index.ts",
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "include": [
+    "/src"
   ],
   "sideEffects": [
-    "**/*.css",
-    "**/*.scss"
+    "**/*.css"
   ],
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
-    },
-    "./styles": "./dist/style.css"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "mkdir -p dist && cp --parents `find -name \\*scss` ./dist && vite build && mv dist/index.mjs dist/index.js",
-    "preview": "vite preview",
-    "lint": "TIMING=1 eslint src/**/*.ts* --fix",
-    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "test": "jest"
-  },
+  "exports": "./src/index.ts",
   "devDependencies": {
-    "@soul-refiner/eslint-config": "0.0.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/emoji-mart": "^3.0.9",
-    "@types/jest": "^28.1.7",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.4",
-    "@vitejs/plugin-react": "^2.2.0",
-    "eslint": "^8.15.0",
-    "jest": "^28.1.3",
-    "jest-canvas-mock": "^2.4.0",
-    "jest-environment-jsdom": "^28.1.3",
-    "jest-transform-stub": "^2.0.0",
-    "react": "^18.1.0",
-    "sass": "^1.54.4",
-    "ts-jest": "^28.0.8",
-    "typescript": "^4.5.3",
-    "vite": "^3.2.5"
+    "@storybook/addon-essentials": "^7.0.10",
+    "@storybook/addon-interactions": "^7.0.10",
+    "@storybook/addon-links": "^7.0.10",
+    "@storybook/addons": "^7.0.10",
+    "@storybook/blocks": "^7.0.10",
+    "@storybook/react": "^7.0.10",
+    "@storybook/react-vite": "^7.0.10",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
+    "@vitejs/plugin-react": "^4.0.0",
+    "chromatic": "^6.17.4",
+    "eslint": "^8.40.0",
+    "husky": "^8.0.0",
+    "prettier": "^2.8.8",
+    "pretty-quick": "^3.1.3",
+    "prop-types": "^15.8.1",
+    "storybook": "^7.0.10",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.5",
+    "vite-tsconfig-paths": "^4.2.0"
   },
-  "publishConfig": {
-    "access": "restricted"
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "yarn eslint ./**/*.{ts,tsx}",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepare": "husky install"
   },
   "dependencies": {
-    "@emoji-mart/react": "^1.0.1",
-    "@soul-refiner/client": "^0.0.13",
-    "@soul-refiner/icons": "0.0.20",
-    "@soul-refiner/models": "^0.0.28",
-    "@soul-refiner/tsconfig": "^0.0.1",
-    "@soul-refiner/utils": "^0.0.8",
-    "@udecode/plate": "^18.7.0",
-    "emoji-mart": "^5.2.1",
-    "node-fetch": "^3.2.10",
-    "react": "^18.1.0",
+    "@emoji-mart/react": "^1.1.1",
+    "@udecode/plate": "^21.1.2",
+    "emoji-mart": "^5.5.2",
+    "react": "^18.2.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
-    "react-tooltip": "^4.5.0",
-    "slate": "^0.84.0",
-    "slate-history": "^0.66.0",
+    "react-is": "^18.2.0",
+    "scheduler": "^0.23.0",
+    "slate": "^0.94.1",
+    "slate-history": "^0.93.0",
     "slate-hyperscript": "^0.77.0",
-    "slate-react": "^0.83.2",
-    "styled-components": "^5.3.6",
-    "vite-plugin-dts": "^1.7.1"
+    "slate-react": "^0.94.0",
+    "styled-components": "^6.0.0-rc.1"
   },
-  "jest": {
-    "preset": "ts-jest",
-    "testEnvironment": "jsdom",
-    "setupFiles": [
-      "jest-canvas-mock"
-    ],
-    "transform": {
-      "^.+\\.js$": "babel-jest",
-      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg)$": "jest-transform-stub"
-    }
+  "peerDependencies": {
+    "@emoji-mart/react": "^1.1.1",
+    "@udecode/plate": "^21.1.2",
+    "emoji-mart": "^5.5.2",
+    "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "scheduler": "^0.23.0",
+    "slate": "^0.94.1",
+    "slate-history": "^0.93.0",
+    "slate-hyperscript": "^0.77.0",
+    "slate-react": "^0.94.0",
+    "styled-components": "^6.0.0-rc.1"
   }
 }

package/public/logo.svg

@@ -0,0 +1,12 @@
+<svg viewBox="3.65 -34.6 154.64 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path 
+    d="M22.25-24.6L22.25-24.6Q22.25-26.7 20.63-27.48 19-28.25 15.2-28.25L15.2-28.25 15.2-20.6Q17.55-20.6 19.03-20.95 20.5-21.3 21.38-22.18 22.25-23.05 22.25-24.6ZM22.9-11.25L22.9-11.25Q22.9-12.9 22.05-13.8 21.2-14.7 19.6-15.08 18-15.45 15.2-15.45L15.2-15.45 15.2-6.8Q19.1-6.8 21-7.78 22.9-8.75 22.9-11.25ZM29.05-17.8L29.05-17.8Q33.7-15.05 33.7-10.45L33.7-10.45Q33.7-8.45 32.93-6.63 32.15-4.8 30.63-3.3 29.1-1.8 26.6-0.93 24.1-0.05 20.95-0.05L20.95-0.05 9.35-0.05Q6.3-0.05 4.98-1.6 3.65-3.15 3.65-7.15L3.65-7.15 3.65-28.3Q3.65-30 4.25-31.3 4.85-32.6 6.18-33.4 7.5-34.2 9.35-34.2L9.35-34.2 20.8-34.2Q25.8-34.15 29.13-31.48 32.45-28.8 32.45-24.6L32.45-24.6Q32.45-23.25 32.23-22.23 32-21.2 31.55-20.4 31.1-19.6 30.5-19 29.9-18.4 29.05-17.8ZM38.8-30.8L38.8-30.8Q38.8-32.45 40.22-33.52 41.65-34.6 44.25-34.6L44.25-34.6Q49.7-34.6 49.7-30.8L49.7-30.8Q49.7-28.7 48.32-27.85 46.95-27 44.25-27L44.25-27Q41.9-27 40.35-27.9 38.8-28.8 38.8-30.8ZM49.65-18.35L49.65-5.35Q49.65-2.35 48.4-1.18 47.15 0 44 0L44 0Q41.05 0 39.97-1.38 38.9-2.75 38.9-5.9L38.9-5.9 38.9-18.2Q38.9-20.75 40.27-22.3 41.65-23.85 43.95-23.85L43.95-23.85Q46.65-23.85 48.15-22.68 49.65-21.5 49.65-18.35L49.65-18.35ZM65.25-28.65L65.25-21.8Q68.55-24.25 72.4-24.25L72.4-24.25Q76.3-24.25 78.9-20.95 81.5-17.65 81.5-12.6L81.5-12.6Q81.5-6.5 77.55-3.08 73.59 0.35 67.3 0.35L67.3 0.35Q63.45 0.35 60.57-0.75 57.7-1.85 56.07-4.05 54.45-6.25 54.4-9.35L54.4-9.35 54.3-28.2Q54.3-31.3 55.8-32.75 57.3-34.2 59.8-34.2L59.8-34.2Q62.6-34.2 63.92-32.88 65.25-31.55 65.25-28.65L65.25-28.65ZM65.3-7.65L65.3-7.65Q66.2-5.95 67.8-5.95L67.8-5.95Q69.15-5.95 69.9-7.65 70.65-9.35 70.65-11.55L70.65-11.55Q70.65-12.75 70.45-13.9 70.25-15.05 69.9-15.98 69.55-16.9 69-17.48 68.45-18.05 67.75-18.05L67.75-18.05Q66.2-18.05 65.3-16.2L65.3-16.2Q65.3-15.55 65.3-12.48 65.3-9.4 65.3-7.65ZM96.69-28.65L96.69-21.8Q99.99-24.25 103.84-24.25L103.84-24.25Q107.74-24.25 110.34-20.95 112.94-17.65 112.94-12.6L112.94-12.6Q112.94-6.5 108.99-3.08 105.04 0.35 98.74 0.35L98.74 0.35Q94.89 0.35 92.02-0.75 89.14-1.85 87.52-4.05 85.89-6.25 85.84-9.35L85.84-9.35 85.74-28.2Q85.74-31.3 87.24-32.75 88.74-34.2 91.24-34.2L91.24-34.2Q94.04-34.2 95.37-32.88 96.69-31.55 96.69-28.65L96.69-28.65ZM96.74-7.65L96.74-7.65Q97.64-5.95 99.24-5.95L99.24-5.95Q100.59-5.95 101.34-7.65 102.09-9.35 102.09-11.55L102.09-11.55Q102.09-12.75 101.89-13.9 101.69-15.05 101.34-15.98 100.99-16.9 100.44-17.48 99.89-18.05 99.19-18.05L99.19-18.05Q97.64-18.05 96.74-16.2L96.74-16.2Q96.74-15.55 96.74-12.48 96.74-9.4 96.74-7.65ZM128.09-28.7L128.09-7.55Q128.09-3.5 126.74-1.75 125.39 0 122.59 0L122.59 0Q119.79 0 118.49-1.58 117.19-3.15 117.19-7.15L117.19-7.15 117.09-28.25Q117.09-29.55 117.37-30.55 117.64-31.55 118.12-32.25 118.59-32.95 119.29-33.4 119.99-33.85 120.82-34.05 121.64-34.25 122.59-34.25L122.59-34.25Q125.34-34.25 126.72-33.15 128.09-32.05 128.09-28.7L128.09-28.7ZM146.44 0.3L146.44 0.3Q140.34 0.3 136.36-2.85 132.39-6 132.39-11.45L132.39-11.45Q132.39-17.35 136.31-20.78 140.24-24.2 146.44-24.2L146.44-24.2Q152.29-24.2 155.01-22.13 157.74-20.05 157.74-16.45L157.74-16.45Q157.74-15.75 157.56-15.1 157.39-14.45 157.01-13.83 156.64-13.2 156.01-12.68 155.39-12.15 154.59-11.73 153.79-11.3 152.69-11.08 151.59-10.85 150.34-10.85L150.34-10.85 143.29-10.8Q143.79-9.2 145.09-8.28 146.39-7.35 148.39-7.35L148.39-7.35Q150.54-7.35 152.79-7.9L152.79-7.9Q153.74-8.15 154.86-8.7 155.99-9.25 156.49-9.25L156.49-9.25Q157.34-9.25 157.81-8.75 158.29-8.25 158.29-7.5L158.29-7.5Q158.29-6.6 157.49-5.33 156.69-4.05 155.26-2.78 153.84-1.5 151.49-0.6 149.14 0.3 146.44 0.3ZM143.04-14L143.04-14Q146.49-14.05 146.79-14.05L146.79-14.05Q147.54-14.05 147.89-14.95L147.89-14.95Q148.14-15.6 148.14-16.75L148.14-16.75Q148.14-19.9 146.24-19.9L146.24-19.9Q145.54-19.9 144.86-19.15 144.19-18.4 143.69-17.03 143.19-15.65 143.04-14Z" 
+    opacity="1" 
+    transform="matrix(1,0,0,1,0,0)" 
+    fill="#1b7bcb" 
+    class="undefined-text-0" 
+    data-fill-palette-color="primary" 
+    id="text-0"
+  >
+  </path>
+</svg>

package/src/common/colors.ts

@@ -0,0 +1,137 @@
+export const COLORS = [
+  'page-bg',
+  'white',
+  'primary-blue-0',
+  'primary-blue-1',
+  'primary-blue-2',
+  'primary-blue-3',
+  'primary-blue-4',
+  'grey-0',
+  'grey-1',
+  'grey-2',
+  'grey-3',
+  'grey-4',
+  'grey-5',
+  'grey-6',
+  'grey-7',
+  'grey-8',
+  'grey-9',
+  'grey-10',
+  'red-0',
+  'red-1',
+  'red-2',
+  'red-3',
+  'red-4',
+  'red-5',
+  'red-6',
+  'red-7',
+  'red-8',
+  'red-9',
+  'red-10',
+  'green-0',
+  'green-1',
+  'green-2',
+  'green-3',
+  'green-4',
+  'green-5',
+  'green-6',
+  'green-7',
+  'green-8',
+  'green-9',
+  'green-10',
+  'blue-0',
+  'blue-1',
+  'blue-2',
+  'blue-3',
+  'blue-4',
+  'blue-5',
+  'blue-6',
+  'blue-7',
+  'blue-8',
+  'blue-9',
+  'blue-10',
+  'turquoise-0',
+  'turquoise-1',
+  'turquoise-2',
+  'turquoise-3',
+  'turquoise-4',
+  'turquoise-5',
+  'turquoise-6',
+  'turquoise-7',
+  'turquoise-8',
+  'turquoise-9',
+  'turquoise-10',
+  'purple-0',
+  'purple-1',
+  'purple-2',
+  'purple-3',
+  'purple-4',
+  'purple-5',
+  'purple-6',
+  'purple-7',
+  'purple-8',
+  'purple-9',
+  'purple-10',
+  'yellow-0',
+  'yellow-1',
+  'yellow-2',
+  'yellow-3',
+  'yellow-4',
+  'yellow-5',
+  'yellow-6',
+  'yellow-7',
+  'yellow-8',
+  'yellow-9',
+  'yellow-10',
+  'orange-0',
+  'orange-1',
+  'orange-2',
+  'orange-3',
+  'orange-4',
+  'orange-5',
+  'orange-6',
+  'orange-7',
+  'orange-8',
+  'orange-9',
+  'orange-10',
+  'hue-pink-1',
+  'hue-pink-2',
+  'hue-pink-3',
+  'hue-purple-1',
+  'hue-purple-2',
+  'hue-purple-3',
+  'hue-ocean-1',
+  'hue-ocean-2',
+  'hue-ocean-3',
+  'hue-mint-1',
+  'hue-mint-2',
+  'hue-mint-3',
+  'hue-blue-1',
+  'hue-blue-2',
+  'hue-blue-3',
+  'hue-orange-1',
+  'hue-orange-2',
+  'hue-orange-3',
+  'special-yellow-1',
+  'special-yellow-2',
+  'special-orange-1',
+  'special-orange-2',
+  'special-red-1',
+  'special-red-2',
+  'special-pink-1',
+  'special-pink-2',
+  'special-purple-1',
+  'special-purple-2',
+  'special-blue-1',
+  'special-blue-2',
+  'special-turquoise-1',
+  'special-turquoise-2',
+  'special-green-1',
+  'special-green-2',
+  'special-grape-1',
+  'special-grape-2',
+] as const;
+
+export const colorReference = Object.fromEntries(
+  COLORS.map((item) => [item, `var(--color-${item})`])
+) as Record<(typeof COLORS)[number], string>;

package/src/common/index.ts

@@ -0,0 +1,2 @@
+export { colorReference, COLORS } from './colors';
+export { Styles } from './styles';

package/src/common/styles.ts

@@ -0,0 +1,93 @@
+import { css } from 'styled-components';
+import {
+  BackgroundColor,
+  BorderRadius,
+  Color,
+  Elevation,
+  Flex,
+  Margin,
+  Padding,
+  Styleable,
+  TextClamp,
+  TypographyStyle,
+  TypographyWeight,
+} from 'types';
+import { colorReference } from 'common';
+
+export namespace Styles {
+  export const backgroundColor = css<BackgroundColor>`
+    background-color: ${({ $backgroundColor }) =>
+      $backgroundColor ? colorReference[$backgroundColor] : 'var(--page-bg)'};
+  `;
+
+  export const borderRadius = css<BorderRadius>`
+    border-radius: ${({ $borderRadius }) =>
+      $borderRadius ? `var(--${$borderRadius})` : ''};
+  `;
+
+  export const color = css<Color>`
+    color: ${({ $color }) =>
+      $color ? colorReference[$color] : 'var(--color-grey-3)'};
+  `;
+
+  export const elevation = css<Elevation>`
+    box-shadow: ${({ $elevation }) =>
+      $elevation ? `var(--elevation-${$elevation})` : 'none'};
+  `;
+
+  export const flex = css<Flex>`
+    align-items: ${({ $align }) => $align ?? 'normal'};
+    gap: ${({ $gap }) =>
+      $gap && typeof $gap === 'number'
+        ? `${$gap}px`
+        : $gap && typeof $gap === 'string'
+        ? `var(--${$gap})`
+        : '0px'};
+    flex: ${({ $flex }) => $flex ?? 'none'};
+    flex-flow: ${({ $flow }) => $flow ?? 'row'};
+    flex-direction: ${({ $dir }) => $dir ?? 'row'};
+    justify-content: ${({ $justify }) => $justify ?? 'normal'};
+  `;
+
+  export const margin = css<Margin>`
+    margin: ${({ $margin }) =>
+      $margin && typeof $margin === 'number'
+        ? `${$margin}px`
+        : $margin && typeof $margin === 'string'
+        ? `var(--${$margin})`
+        : '0px'};
+  `;
+
+  export const padding = css<Padding>`
+    padding: ${({ $padding }) =>
+      $padding && typeof $padding === 'number'
+        ? `${$padding}px`
+        : $padding && typeof $padding === 'string'
+        ? `var(--${$padding})`
+        : '0px'};
+  `;
+
+  export const styleable = css<Styleable>`
+    ${({ sx }) => (sx ? sx : '')}
+  `;
+
+  export const textClamp = css<TextClamp>`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: ${({ $textClampLines }) => $textClampLines ?? 1};
+    -webkit-line-clamp: ${({ $textClampLines }) => $textClampLines ?? 1};
+    -webkit-box-orient: vertical;
+  `;
+
+  export const typography = css<TypographyStyle>`
+    font-style: ${({ $italic }) => ($italic ? 'italic' : 'normal')};
+    text-decoration: ${({ $strikethrough, $underline }) =>
+      $strikethrough ? 'line-through' : $underline ? 'underline' : 'none'};
+  `;
+
+  export const weight = css<TypographyWeight>`
+    font-weight: ${({ $bold, $semiBold, $mediumBold }) =>
+      $bold ? 700 : $semiBold ? 600 : $mediumBold ? 500 : 400};
+  `;
+}

package/src/components/atoms/box/box.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from 'common';
+import {
+  BackgroundColor,
+  BorderRadius,
+  Elevation,
+  Flex,
+  Margin,
+  Padding,
+  Polymorphic,
+  Styleable,
+} from 'types';
+
+type NativeProps = Pick<
+  React.HTMLAttributes<HTMLDivElement>,
+  | 'children'
+  | 'dangerouslySetInnerHTML'
+  | 'onBlur'
+  | 'onBlurCapture'
+  | 'onClick'
+  | 'onChange'
+  | 'onCopy'
+  | 'onCut'
+  | 'onKeyDown'
+  | 'onKeyDownCapture'
+  | 'onKeyUp'
+  | 'onKeyUpCapture'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseOut'
+  | 'onMouseOver'
+  | 'title'
+> & { value?: string };
+
+export interface BoxProps
+  extends BackgroundColor,
+    BorderRadius,
+    Elevation,
+    Flex,
+    Margin,
+    Padding,
+    Polymorphic,
+    Styleable,
+    NativeProps {
+  $display?: 'block' | 'flex';
+}
+
+export const Box = ({ $display = 'flex', ...args }: BoxProps) => (
+  <Component $display={$display} {...args} />
+);
+
+export const Component = styled.div<BoxProps>`
+  ${({ $display }) => ($display === 'flex' ? 'display: flex;' : '')}
+  ${Styles.flex}
+  ${Styles.backgroundColor}
+  ${Styles.borderRadius}
+  ${Styles.elevation}
+  ${Styles.margin}
+  ${Styles.padding}
+  ${Styles.styleable}
+`;

package/src/components/atoms/box/index.ts

@@ -0,0 +1,2 @@
+export { Box } from './box';
+export type { BoxProps } from './box';

package/src/components/atoms/colors/colors.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from 'styled-components';
+import { H, P } from '../typography';
+
+export interface ColorProps {
+  colors: string[];
+  title: string;
+}
+
+export const Colors = ({ colors, title }: ColorProps) => {
+  return (
+    <>
+      <H.Two $textAlign="center" sx="padding-right: 16px;">
+        {title}
+      </H.Two>
+      <Row>
+        {colors.map((color) => (
+          <ColorWrapper key={color} background={color}>
+            <div />
+            <P $fontSize={12} $textAlign="center">
+              {color
+                .replaceAll(/color|-{2,}|var|\(|\)/g, '')
+                .replaceAll(/-/g, ' ')
+                .trim()
+                .split(' ')
+                .map((item) => item[0].toUpperCase() + item.slice(1))
+                .join(' ')}
+            </P>
+          </ColorWrapper>
+        ))}
+      </Row>
+    </>
+  );
+};
+
+const Row = styled.div`
+  display: flex;
+  gap: var(--spacing-2);
+  padding: 0px var(--spacing-4);
+  margin: var(--spacing-3) auto;
+  max-width: 80%;
+`;
+
+const ColorWrapper = styled.div<{
+  background: string;
+}>`
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  div {
+    background: ${({ background }) => background || '--color-primary-blue-2'};
+    width: var(--extra-large);
+    height: var(--extra-large);
+  }
+`;

package/src/components/atoms/colors/index.ts

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

package/src/components/atoms/index.ts

@@ -0,0 +1,9 @@
+export { Box } from './box';
+export type { BoxProps } from './box';
+export { Display, H, P, Typography } from './typography';
+export type {
+  DisplayProps,
+  HeadingProps,
+  ParagraphProps,
+  TypographyProps,
+} from './typography';

package/src/components/atoms/typography/display.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Typography, TypographyProps } from './typography';
+
+export interface CommonProps extends TypographyProps {
+  as?: React.ElementType;
+  $textAlign?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
+}
+
+export interface DisplayProps extends CommonProps {
+  $fontSize?: 56 | 64;
+  $lineHeight?: 84 | 96;
+}
+
+export const Display = ({
+  as = 'h1',
+  $fontSize = 64,
+  $lineHeight = 96,
+  $textAlign = 'left',
+  ...rest
+}: DisplayProps) => (
+  <StyledDisplay
+    as={as || 'h1'}
+    $fontSize={$fontSize}
+    $lineHeight={$lineHeight}
+    $textAlign={$textAlign}
+    {...rest}
+  />
+);
+
+const StyledDisplay = styled(Typography)<DisplayProps>`
+  font-size: ${({ $fontSize }) => $fontSize + 'px'};
+  line-height: ${({ $lineHeight }) => $lineHeight + 'px'};
+  text-align: ${({ $textAlign }) => $textAlign || 'left'};
+`;

package/src/components/atoms/typography/heading.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Typography, TypographyProps } from './typography';
+
+export interface CommonProps extends TypographyProps {
+  $textAlign?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
+}
+
+export interface HeadingProps extends CommonProps {
+  as?: React.ElementType;
+  $fontSize?: 18 | 20 | 24 | 28 | 32 | 36 | 40 | 48;
+  $lineHeight?: 64 | 60 | 54 | 48 | 36 | 28 | 26;
+}
+
+const StyledH = styled(Typography)<HeadingProps>`
+  font-size: ${({ $fontSize }) => $fontSize + 'px'};
+  line-height: ${({ $lineHeight }) => $lineHeight + 'px'};
+  text-align: ${({ $textAlign }) => $textAlign || 'left'};
+`;
+
+export const H = (args: HeadingProps) => <StyledH {...args} />;
+
+const One = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h1'} $fontSize={48} $lineHeight={64} {...rest} />
+);
+One.displayName = 'H.One';
+H.One = One;
+
+const Two = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h2'} $fontSize={40} $lineHeight={60} {...rest} />
+);
+Two.displayName = 'H.Two';
+H.Two = Two;
+
+const Three = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h3'} $fontSize={36} $lineHeight={54} {...rest} />
+);
+Three.displayName = 'H.Three';
+H.Three = Three;
+
+const Four = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h4'} $fontSize={32} $lineHeight={48} {...rest} />
+);
+Four.displayName = 'H.Four';
+H.Four = Four;
+
+const Five = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h5'} $fontSize={28} $lineHeight={36} {...rest} />
+);
+Five.displayName = 'H.Five';
+H.Five = Five;
+
+const Six = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h6'} $fontSize={24} $lineHeight={36} {...rest} />
+);
+Six.displayName = 'H.Six';
+H.Six = Six;
+
+const Seven = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h6'} $fontSize={20} $lineHeight={28} {...rest} />
+);
+Seven.displayName = 'H.Seven';
+H.Seven = Seven;
+
+const Eight = ({ ...rest }: CommonProps) => (
+  <StyledH as={'h6'} $fontSize={18} $lineHeight={26} {...rest} />
+);
+Eight.displayName = 'H.Eight';
+H.Eight = Eight;

package/src/components/atoms/typography/index.ts

@@ -0,0 +1,8 @@
+export { Display } from './display';
+export type { DisplayProps } from './display';
+export { H } from './heading';
+export type { HeadingProps } from './heading';
+export { P } from './paragraph';
+export type { ParagraphProps } from './paragraph';
+export { Typography } from './typography';
+export type { TypographyProps } from './typography';