chore: add recipe in git

.github/workflows/component-docs-deploy-alpha-pages.yml

@@ -27,9 +27,6 @@ jobs:
 
       - name: Build Packages
         run: yarn build-only-package
-
-      - name: Build styles
-        run: yarn build:style
 
       - name: Build `Seed Component Docs`
         working-directory: ./component-docs

.github/workflows/component-docs-deploy-production-pages.yml

@@ -25,9 +25,6 @@ jobs:
 
       - name: Build Packages
         run: yarn build-only-package
-
-      - name: Build styles
-        run: yarn build:style
 
       - name: Build `Seed Component Docs`
         working-directory: ./component-docs

component-docs/README.md

@@ -15,4 +15,3 @@ component-docs
  ┣ 📂seed-design    # snippet은 진실의 원천으로 사용하고, Docs에서 사용하는 코드는 생성해서 사용
  ┗ 📂snippets       # registry에 담김
 ```
-

packages/recipe/.gitignore

@@ -0,0 +1 @@
+!lib

packages/recipe/lib/avatar.d.ts

@@ -0,0 +1,17 @@
+interface AvatarVariant {
+  size: "20" | "24" | "36" | "48" | "64" | "80" | "96"
+}
+
+type AvatarVariantMap = {
+  [key in keyof AvatarVariant]: Array<AvatarVariant[key]>;
+};
+
+export type AvatarVariantProps = Partial<AvatarVariant>;
+
+export type AvatarSlotName = "root" | "image" | "fallback" | "badge";
+
+export const avatarVariantMap: AvatarVariantMap;
+
+export function avatar(
+  props?: AvatarVariantProps,
+): Record<AvatarSlotName, string>;

packages/recipe/lib/avatar.mjs

@@ -0,0 +1,49 @@
+import { createClassName } from "./className.mjs";
+
+const avatarSlotNames = [
+  [
+    "root",
+    "avatar__root"
+  ],
+  [
+    "image",
+    "avatar__image"
+  ],
+  [
+    "fallback",
+    "avatar__fallback"
+  ],
+  [
+    "badge",
+    "avatar__badge"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const avatarVariantMap = {
+  "size": [
+    "20",
+    "24",
+    "36",
+    "48",
+    "64",
+    "80",
+    "96"
+  ]
+};
+
+export const avatarVariantKeys = Object.keys(avatarVariantMap);
+
+export function avatar(props) {
+  return Object.fromEntries(
+    avatarSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, { ...defaultVariant, ...props }, compoundVariants),
+      ];
+    }),
+  );
+}

packages/recipe/lib/chipTab.d.ts

@@ -0,0 +1,17 @@
+interface ChipTabVariant {
+
+}
+
+type ChipTabVariantMap = {
+  [key in keyof ChipTabVariant]: Array<ChipTabVariant[key]>;
+};
+
+export type ChipTabVariantProps = Partial<ChipTabVariant>;
+
+export type ChipTabSlotName = "root" | "label";
+
+export const chipTabVariantMap: ChipTabVariantMap;
+
+export function chipTab(
+  props?: ChipTabVariantProps,
+): Record<ChipTabSlotName, string>;

packages/recipe/lib/chipTab.mjs

@@ -0,0 +1,31 @@
+import { createClassName } from "./className.mjs";
+
+const chipTabSlotNames = [
+  [
+    "root",
+    "chipTab__root"
+  ],
+  [
+    "label",
+    "chipTab__label"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const chipTabVariantMap = {};
+
+export const chipTabVariantKeys = Object.keys(chipTabVariantMap);
+
+export function chipTab(props) {
+  return Object.fromEntries(
+    chipTabSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, { ...defaultVariant, ...props }, compoundVariants),
+      ];
+    }),
+  );
+}

packages/recipe/lib/chipTabs.d.ts

@@ -0,0 +1,17 @@
+interface ChipTabsVariant {
+
+}
+
+type ChipTabsVariantMap = {
+  [key in keyof ChipTabsVariant]: Array<ChipTabsVariant[key]>;
+};
+
+export type ChipTabsVariantProps = Partial<ChipTabsVariant>;
+
+export type ChipTabsSlotName = "root" | "triggerList" | "contentList" | "contentCamera" | "content";
+
+export const chipTabsVariantMap: ChipTabsVariantMap;
+
+export function chipTabs(
+  props?: ChipTabsVariantProps,
+): Record<ChipTabsSlotName, string>;

packages/recipe/lib/chipTabs.mjs

@@ -0,0 +1,43 @@
+import { createClassName } from "./className.mjs";
+
+const chipTabsSlotNames = [
+  [
+    "root",
+    "chipTabs__root"
+  ],
+  [
+    "triggerList",
+    "chipTabs__triggerList"
+  ],
+  [
+    "contentList",
+    "chipTabs__contentList"
+  ],
+  [
+    "contentCamera",
+    "chipTabs__contentCamera"
+  ],
+  [
+    "content",
+    "chipTabs__content"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const chipTabsVariantMap = {};
+
+export const chipTabsVariantKeys = Object.keys(chipTabsVariantMap);
+
+export function chipTabs(props) {
+  return Object.fromEntries(
+    chipTabsSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, { ...defaultVariant, ...props }, compoundVariants),
+      ];
+    }),
+  );
+}

packages/recipe/lib/helpBubble.d.ts

@@ -0,0 +1,17 @@
+interface HelpBubbleVariant {
+  variant: "nonModal" | "modal"
+}
+
+type HelpBubbleVariantMap = {
+  [key in keyof HelpBubbleVariant]: Array<HelpBubbleVariant[key]>;
+};
+
+export type HelpBubbleVariantProps = Partial<HelpBubbleVariant>;
+
+export type HelpBubbleSlotName = "positioner" | "backdrop" | "content" | "arrow" | "title" | "description";
+
+export const helpBubbleVariantMap: HelpBubbleVariantMap;
+
+export function helpBubble(
+  props?: HelpBubbleVariantProps,
+): Record<HelpBubbleSlotName, string>;

packages/recipe/lib/helpBubble.mjs

@@ -0,0 +1,54 @@
+import { createClassName } from "./className.mjs";
+
+const helpBubbleSlotNames = [
+  [
+    "positioner",
+    "helpBubble__positioner"
+  ],
+  [
+    "backdrop",
+    "helpBubble__backdrop"
+  ],
+  [
+    "content",
+    "helpBubble__content"
+  ],
+  [
+    "arrow",
+    "helpBubble__arrow"
+  ],
+  [
+    "title",
+    "helpBubble__title"
+  ],
+  [
+    "description",
+    "helpBubble__description"
+  ]
+];
+
+const defaultVariant = {
+  "variant": "nonModal"
+};
+
+const compoundVariants = [];
+
+export const helpBubbleVariantMap = {
+  "variant": [
+    "nonModal",
+    "modal"
+  ]
+};
+
+export const helpBubbleVariantKeys = Object.keys(helpBubbleVariantMap);
+
+export function helpBubble(props) {
+  return Object.fromEntries(
+    helpBubbleSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, { ...defaultVariant, ...props }, compoundVariants),
+      ];
+    }),
+  );
+}

packages/recipe/lib/switch.d.ts

@@ -0,0 +1,17 @@
+interface SwitchVariant {
+
+}
+
+type SwitchVariantMap = {
+  [key in keyof SwitchVariant]: Array<SwitchVariant[key]>;
+};
+
+export type SwitchVariantProps = Partial<SwitchVariant>;
+
+export type SwitchSlotName = "root" | "control" | "thumb";
+
+export const switchVariantMap: SwitchVariantMap;
+
+export function switchStyle(
+  props?: SwitchVariantProps,
+): Record<SwitchSlotName, string>;

packages/recipe/lib/switch.mjs

@@ -0,0 +1,35 @@
+import { createClassName } from "./className.mjs";
+
+const switchSlotNames = [
+  [
+    "root",
+    "switch__root"
+  ],
+  [
+    "control",
+    "switch__control"
+  ],
+  [
+    "thumb",
+    "switch__thumb"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const switchVariantMap = {};
+
+export const switchVariantKeys = Object.keys(switchVariantMap);
+
+export function switchStyle(props) {
+  return Object.fromEntries(
+    switchSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, { ...defaultVariant, ...props }, compoundVariants),
+      ];
+    }),
+  );
+}

packages/recipe/lib/tab.d.ts

@@ -0,0 +1,18 @@
+interface TabVariant {
+  layout: "fill" | "hug";
+  size: "medium" | "small"
+}
+
+type TabVariantMap = {
+  [key in keyof TabVariant]: Array<TabVariant[key]>;
+};
+
+export type TabVariantProps = Partial<TabVariant>;
+
+export type TabSlotName = "root" | "label" | "notification";
+
+export const tabVariantMap: TabVariantMap;
+
+export function tab(
+  props?: TabVariantProps,
+): Record<TabSlotName, string>;