Merge pull request #81 from sopt-makers/feat/storybook

[DOCS] Icons, Colors storybook
sopt-makers · Apr 17, 2024 · b4aa77a · b4aa77a
2 parents 0ba2e47 + 7e592e7
commit b4aa77a
Show file tree

Hide file tree

Showing 6 changed files with 375 additions and 3 deletions.
diff --git a/apps/docs/.storybook/main.ts b/apps/docs/.storybook/main.ts
@@ -24,5 +24,12 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+  async viteFinal(config) {
+    const { mergeConfig } = await import('vite');
+
+    return mergeConfig(config, {
+      optimizeDeps: ['@sopt-makers/icons']
+    });
+  },
 };
 export default config;
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -13,9 +13,9 @@
     "chromatic": "npx chromatic --project-token=chpt_98c750b6bad066a"
   },
   "dependencies": {
-    "@sopt-makers/colors": "^3.0.0",
-    "@sopt-makers/fonts": "^2.0.0",
-    "@sopt-makers/icons": "^1.0.0",
+    "@sopt-makers/colors": "^3.0.1",
+    "@sopt-makers/fonts": "^2.0.1",
+    "@sopt-makers/icons": "^1.0.4",
     "@sopt-makers/ui": "^1.1.5"
   },
   "devDependencies": {

diff --git a/apps/docs/src/index.css b/apps/docs/src/index.css
@@ -44,4 +44,61 @@ body {
     format('woff2');
   font-weight: 700;
   font-style: normal;
+}
+
+.icons-wrap {
+  display: flex;
+  gap: 40px;
+  padding: 20px;
+  width: max-content;
+}
+
+.icons-group {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  color: white;
+  font-family: 'SUIT', sans-serif;
+
+  h4 {
+    font-size: 28px;
+    font-weight: 700;
+    margin-bottom: 10px;
+  }
+  div {
+    display: flex;
+    gap: 16px;
+  }
+  p {
+    font-size: 20px;
+  }
+}
+
+.colors-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 20px;
+  color: white;
+
+  h4 {
+    font-size: 28px;
+    font-weight: 700;
+    margin: 40px 0 20px 0;
+  }
+}
+
+.colors-group {
+  p {
+    font-size: 20px;
+    margin-bottom: 10px;
+  }
+  .color-chips {
+    display: flex;
+
+    a {
+      width: 80px;
+      height: 80px;
+    }
+  }
 }
diff --git a/apps/docs/src/stories/Colors.stories.tsx b/apps/docs/src/stories/Colors.stories.tsx
@@ -0,0 +1,111 @@
+import { colors } from '@sopt-makers/colors';
+
+export default {
+  title: 'colors/Colors'
+}
+
+export const Default = {
+  render: () => {
+    const grayScales = [950, 900, 800, 700, 600, 500, 400, 300, 200, 100, 50, 30, 10];
+    const scales = [900, 800, 700, 600, 500, 400, 300, 200, 100, 50];
+    const alphaScales = [900, 800, 700, 600, 500, 400, 300, 200, 100];
+
+    const renderColorChips = (scalesArr: number[], name: string) =>
+      scalesArr.map(item => {
+        const key = `${name}${item}` as keyof typeof colors;
+        return <a key={key} title={`${key}(${colors[key]})`} style={{ background: colors[key] }}></a>
+      });
+
+    return <div className="colors-wrap">
+      <p>* 마우스 오버시 이름과 코드가 뜹니다 *</p>
+
+      <h4>Main Color</h4>
+      <div className="colors-group">
+        <p>black</p>
+        <div className="color-chips"><a title={`black(${colors.black})`} style={{ background: colors.black }}></a></div>
+      </div>
+      <div className="colors-group">
+        <p>white</p>
+        <div className="color-chips"><a title={`white(${colors.white})`} style={{ background: colors.white }}></a></div>
+      </div>
+
+      <h4>Gray Scale</h4>
+      <div className="colors-group">
+        <p>grayscale</p>
+        <div className="color-chips">{renderColorChips(grayScales, 'gray')}</div>
+      </div>
+
+      <h4>Scale Color</h4>
+      <div className="colors-group">
+        <p>blue</p>
+        <div className="color-chips">{renderColorChips(scales, 'blue')}</div>
+      </div>
+      <div className="colors-group">
+        <p>red</p>
+        <div className="color-chips">{renderColorChips(scales, 'red')}</div>
+      </div>
+      <div className="colors-group">
+        <p>green</p>
+        <div className="color-chips">{renderColorChips(scales, 'green')}</div>
+      </div>
+      <div className="colors-group">
+        <p>yellow</p>
+        <div className="color-chips">{renderColorChips(scales, 'yellow')}</div>
+      </div>
+
+      <h4>Sub Color</h4>
+      <div className="colors-group">
+        <p>orange</p>
+        <div className="color-chips">{renderColorChips(scales, 'orange')}</div>
+      </div>
+
+      <h4>Alpha Color</h4>
+      <div className="colors-group">
+        <p>red</p>
+        <div className="color-chips">{renderColorChips(alphaScales, 'red')}</div>
+      </div>
+      <div className="colors-group">
+        <p>orange</p>
+        <div className="color-chips">{renderColorChips(alphaScales, 'orange')}</div>
+      </div>
+      <div className="colors-group">
+        <p>blue</p>
+        <div className="color-chips">{renderColorChips(alphaScales, 'blue')}</div>
+      </div>
+      <div className="colors-group">
+        <p>gray</p>
+        <div className="color-chips">{renderColorChips(alphaScales, 'gray')}</div>
+      </div>
+
+      <h4>Semantic Color</h4>
+      <div className="colors-group">
+        <p>background</p>
+        <div className="color-chips"><a title={`background(${colors.background}, gray950)`} style={{ background: colors.background }}></a></div>
+      </div>
+      <div className="colors-group">
+        <p>background-dimmed</p>
+        <div className="color-chips"><a title={`background-dimmed(${colors.backgroundDimmed}, gray-alpha100)`} style={{ background: colors.backgroundDimmed }}></a></div>
+      </div>
+      <div className="colors-group">
+        <p>secondary</p>
+        <div className="color-chips"><a title={`secondary(${colors.secondary}, orange400)`} style={{ background: colors.secondary }}></a></div>
+      </div>
+      <div className="colors-group">
+        <p>success</p>
+        <div className="color-chips"><a title={`success(${colors.success}, blue400)`} style={{ background: colors.success }}></a></div>
+      </div>
+      <div className="colors-group">
+        <p>error</p>
+        <div className="color-chips"><a title={`error(${colors.error}, red400)`} style={{ background: colors.error }}></a></div>
+      </div>
+      <div className="colors-group">
+        <p>information</p>
+        <div className="color-chips"><a title={`information(${colors.information}, green400)`} style={{ background: colors.information }}></a></div>
+      </div>
+      <div className="colors-group">
+        <p>attention</p>
+        <div className="color-chips"><a title={`attention(${colors.attention}, yellow400)`} style={{ background: colors.attention }}></a></div>
+      </div>
+    </div>
+  }
+}
diff --git a/apps/docs/src/stories/Icons.stories.tsx b/apps/docs/src/stories/Icons.stories.tsx
@@ -0,0 +1,192 @@
+import * as Icons from '@sopt-makers/icons';
+
+export default {
+  title: 'icons/Icons'
+}
+
+export const Default = {
+  argTypes: {
+    color: { control: 'color' },
+  },
+  render: (props: { color: string }) => {
+    const style = { width: 24, height: 24, color: props.color };
+
+    return <div className="icons-wrap">
+      <div className="icons-group">
+        <h4>Communication</h4>
+        <div><Icons.IconArchive style={style} /><p>archive</p></div>
+        <div><Icons.IconBookMark style={style} /><p>bookmark</p></div>
+        <div><Icons.IconEdit style={style} /><p>edit</p></div>
+        <div><Icons.IconEyeOff style={style} /><p>eye-off</p></div>
+        <div><Icons.IconEye style={style} /><p>eye</p></div>
+        <div><Icons.IconMail style={style} /><p>mail</p></div>
+        <div><Icons.IconMento style={style} /><p>mento</p></div>
+        <div><Icons.IconMessageAlert style={style} /><p>message-alert</p></div>
+        <div><Icons.IconMessageChat style={style} /><p>message-chat</p></div>
+        <div><Icons.IconMessageCheck style={style} /><p>message-check</p></div>
+        <div><Icons.IconMessageDots style={style} /><p>message-dots</p></div>
+        <div><Icons.IconMessagePlus style={style} /><p>message-plus</p></div>
+        <div><Icons.IconMessageQuestion style={style} /><p>message-question</p></div>
+        <div><Icons.IconMessageSquare style={style} /><p>message-square</p></div>
+        <div><Icons.IconMessageText style={style} /><p>message-text</p></div>
+        <div><Icons.IconMessageX style={style} /><p>message-x</p></div>
+        <div><Icons.IconPin style={style} /><p>pin</p></div>
+        <div><Icons.IconSend style={style} /><p>send</p></div>
+      </div>
+
+      <div className="icons-group">
+        <h4>Editor</h4>
+        <div><Icons.IconAlignCenter style={style} /><p>align-center</p></div>
+        <div><Icons.IconAlignJustify style={style} /><p>align-justify</p></div>
+        <div><Icons.IconAlignLeft style={style} /><p>align-left</p></div>
+        <div><Icons.IconAlignRight style={style} /><p>align-right</p></div>
+        <div><Icons.IconAttachment style={style} /><p>attachment</p></div>
+        <div><Icons.IconBold style={style} /><p>bold</p></div>
+        <div><Icons.IconCode style={style} /><p>code</p></div>
+        <div><Icons.IconDelete style={style} /><p>delete</p></div>
+        <div><Icons.IconDotpoints style={style} /><p>dotpoints</p></div>
+        <div><Icons.IconItalic style={style} /><p>italic</p></div>
+        <div><Icons.IconLeftIndent style={style} /><p>left-indent</p></div>
+        <div><Icons.IconLetterSpacing style={style} /><p>letter-spacing</p></div>
+        <div><Icons.IconLineHeight style={style} /><p>line-height</p></div>
+        <div><Icons.IconParagraphSpacing style={style} /><p>paragraph-spacing</p></div>
+        <div><Icons.IconParagraphWrap style={style} /><p>paragraph-wrap</p></div>
+        <div><Icons.IconRightIndent style={style} /><p>right-indent</p></div>
+        <div><Icons.IconTypeStrikethrough style={style} /><p>type-strikethrough</p></div>
+        <div><Icons.IconType style={style} /><p>type</p></div>
+        <div><Icons.IconUnderline style={style} /><p>underline</p></div>
+        <div><Icons.IconWrite style={style} /><p>write</p></div>
+        <div><Icons.IconZoomIn style={style} /><p>zoom-in</p></div>
+        <div><Icons.IconZoomOut style={style} /><p>zoom-out</p></div>
+      </div>
+
+      <div className="icons-group">
+        <h4>Feedback</h4>
+        <div><Icons.IconAlertCircle style={style} /><p>alert-circle</p></div>
+        <div><Icons.IconAlertTriangle style={style} /><p>alert-triangle</p></div>
+        <div><Icons.IconBellActive style={style} /><p>bell-active</p></div>
+        <div><Icons.IconBellOff style={style} /><p>bell-off</p></div>
+        <div><Icons.IconBell style={style} /><p>bell</p></div>
+        <div><Icons.IconHelpCircle style={style} /><p>help-circle</p></div>
+        <div><Icons.IconInfoCircle style={style} /><p>info-circle</p></div>
+        <div><Icons.IconThumbsDown style={style} /><p>thumbs-down</p></div>
+        <div><Icons.IconThumbsUp style={style} /><p>thumbs-up</p></div>
+      </div>
+
+      <div className="icons-group">
+        <h4>Files</h4>
+        <div><Icons.IconFileCheck style={style} /><p>file-check</p></div>
+        <div><Icons.IconFileDownload style={style} /><p>file-download</p></div>
+        <div><Icons.IconFileMinus style={style} /><p>file-minus</p></div>
+        <div><Icons.IconFilePlus style={style} /><p>file-plus</p></div>
+        <div><Icons.IconFileSearch style={style} /><p>file-search</p></div>
+        <div><Icons.IconFileText style={style} /><p>file-text</p></div>
+        <div><Icons.IconFileX style={style} /><p>file-x</p></div>
+        <div><Icons.IconFile style={style} /><p>file</p></div>
+        <div><Icons.IconFolderCheck style={style} /><p>folder-check</p></div>
+        <div><Icons.IconFolderDownload style={style} /><p>folder-download</p></div>
+        <div><Icons.IconFolder style={style} /><p>folder</p></div>
+      </div>
+
+      <div className="icons-group">
+        <h4>General</h4>
+        <div><Icons.IconCopy style={style} /><p>icon-copy</p></div>
+        <div><Icons.IconDotsVertical style={style} /><p>dots-vertical</p></div>
+        <div><Icons.IconDownloadCloud style={style} /><p>download-cloud</p></div>
+        <div><Icons.IconHome style={style} /><p>home</p></div>
+        <div><Icons.IconLink style={style} /><p>link</p></div>
+        <div><Icons.IconLock style={style} /><p>lock</p></div>
+        <div><Icons.IconLogIn style={style} /><p>log-in</p></div>
+        <div><Icons.IconLogOut style={style} /><p>log-out</p></div>
+        <div><Icons.IconMenu style={style} /><p>menu</p></div>
+        <div><Icons.IconSearch style={style} /><p>search</p></div>
+        <div><Icons.IconSettings style={style} /><p>settings</p></div>
+        <div><Icons.IconShare style={style} /><p>share</p></div>
+        <div><Icons.IconSliders style={style} /><p>sliders</p></div>
+        <div><Icons.IconTrash style={style} /><p>trash</p></div>
+        <div><Icons.IconUnlocked style={style} /><p>unlocked</p></div>
+        <div><Icons.IconUploadCloud style={style} /><p>upload-cloud</p></div>
+      </div>
+
+      <div className="icons-group">
+        <h4>Interaction</h4>
+        <div><Icons.IconArrowDownLeft style={style} /><p>arrow-down-left</p></div>
+        <div><Icons.IconArrowDownRight style={style} /><p>arrow-down-right</p></div>
+        <div><Icons.IconArrowDown style={style} /><p>arrow-down</p></div>
+        <div><Icons.IconArrowLeft style={style} /><p>arrow-left</p></div>
+        <div><Icons.IconArrowRight style={style} /><p>arrow-right</p></div>
+        <div><Icons.IconArrowUpLeft style={style} /><p>arrow-up-left</p></div>
+        <div><Icons.IconArrowUpRight style={style} /><p>arrow-up-right</p></div>
+        <div><Icons.IconArrowUp style={style} /><p>arrow-up</p></div>
+        <div><Icons.IconCheckCircle style={style} /><p>check-circle</p></div>
+        <div><Icons.IconCheckSquare style={style} /><p>check-square</p></div>
+        <div><Icons.IconCheck style={style} /><p>check</p></div>
+        <div><Icons.IconChevronDown style={style} /><p>chevron-down</p></div>
+        <div><Icons.IconChevronLeft style={style} /><p>chevron-left</p></div>
+        <div><Icons.IconChevronRight style={style} /><p>chevron-right</p></div>
+        <div><Icons.IconChevronUp style={style} /><p>chevron-up</p></div>
+        <div><Icons.IconFlipBackward style={style} /><p>flip-backward</p></div>
+        <div><Icons.IconFlipForward style={style} /><p>flip-forward</p></div>
+        <div><Icons.IconHeart style={style} /><p>heart</p></div>
+        <div><Icons.IconPlusCircle style={style} /><p>plus-circle</p></div>
+        <div><Icons.IconPlusSquare style={style} /><p>plus-square</p></div>
+        <div><Icons.IconPlus style={style} /><p>plus</p></div>
+        <div><Icons.IconRefresh style={style} /><p>refresh</p></div>
+        <div><Icons.IconSwitchHorizontal style={style} /><p>switch-horizontal</p></div>
+        <div><Icons.IconSwitchVertical style={style} /><p>switch-vertical</p></div>
+        <div><Icons.IconXCircle style={style} /><p>x-circle</p></div>
+        <div><Icons.IconXClose style={style} /><p>x-close</p></div>
+      </div>
+
+      <div className="icons-group">
+        <h4>Media</h4>
+        <div><Icons.IconCameraOff style={style} /><p>camera-off</p></div>
+        <div><Icons.IconCameraPlus style={style} /><p>camera-plus</p></div>
+        <div><Icons.IconCamera style={style} /><p>camera</p></div>
+        <div><Icons.IconImageCheck style={style} /><p>image-check</p></div>
+        <div><Icons.IconImageDown style={style} /><p>image-down</p></div>
+        <div><Icons.IconImageLeft style={style} /><p>image-left</p></div>
+        <div><Icons.IconImagePlus style={style} /><p>image-plus</p></div>
+        <div><Icons.IconImageRight style={style} /><p>image-right</p></div>
+        <div><Icons.IconImageUp style={style} /><p>image-up</p></div>
+        <div><Icons.IconImage style={style} /><p>image</p></div>
+        <div><Icons.IconPower style={style} /><p>power</p></div>
+        <div><Icons.IconRepeat style={style} /><p>repeat</p></div>
+        <div><Icons.IconVideoOff style={style} /><p>video-off</p></div>
+        <div><Icons.IconVideo style={style} /><p>video</p></div>
+      </div>
+
+      <div className="icons-group">
+        <h4>Time</h4>
+        <div><Icons.IconAlarmClockCheck style={style} /><p>alarm-clock-check</p></div>
+        <div><Icons.IconAlarmClockMinus style={style} /><p>alarm-clock-minus</p></div>
+        <div><Icons.IconAlarmClockOff style={style} /><p>alarm-clock-off</p></div>
+        <div><Icons.IconAlarmClockPlus style={style} /><p>alarm-clock-plus</p></div>
+        <div><Icons.IconAlarmClock style={style} /><p>alarm-clock</p></div>
+        <div><Icons.IconCalendarCheck style={style} /><p>calendar-check</p></div>
+        <div><Icons.IconCalendarDate style={style} /><p>calendar-date</p></div>
+        <div><Icons.IconCalendarPlus style={style} /><p>calendar-plus</p></div>
+        <div><Icons.IconCalendar style={style} /><p>calendar</p></div>
+        <div><Icons.IconClockCheck style={style} /><p>clock-check</p></div>
+        <div><Icons.IconClockPlus style={style} /><p>clock-plus</p></div>
+        <div><Icons.IconClockSnooze style={style} /><p>clock-snooze</p></div>
+        <div><Icons.IconClock style={style} /><p>clock</p></div>
+      </div>
+
+      <div className="icons-group">
+        <h4>Users</h4>
+        <div><Icons.IconUserCheck style={style} /><p>user-check</p></div>
+        <div><Icons.IconUserEdit style={style} /><p>user-edit</p></div>
+        <div><Icons.IconUserMinus style={style} /><p>user-minus</p></div>
+        <div><Icons.IconUserPlus style={style} /><p>user-plus</p></div>
+        <div><Icons.IconUserX style={style} /><p>user-x</p></div>
+        <div><Icons.IconUser style={style} /><p>user</p></div>
+        <div><Icons.IconUsersCheck style={style} /><p>users-check</p></div>
+        <div><Icons.IconUsersMinus style={style} /><p>users-minus</p></div>
+        <div><Icons.IconUsersPlus style={style} /><p>users-plus</p></div>
+        <div><Icons.IconUsersX style={style} /><p>users-x</p></div>
+        <div><Icons.IconUsers style={style} /><p>users</p></div>
+      </div>
+    </div>
+  }
+};