feat: skeleton, progress-circle

component-docs/activities/AlertDialogActivity.tsx → component-docs/activities/AlertDialogDefaultActivity.tsx

@@ -8,16 +8,16 @@ import { AlertDialog as UIAlertDialog } from "@/seed-design/ui/alert-dialog";
 
 declare module "@stackflow/config" {
   interface Register {
-    Main: {
+    AlertDialogDefault: {
       alert: boolean;
     };
   }
 }
 
-const AlertDialogActivity: ActivityComponentType<"Main"> = ({ params }) => {
+const AlertDialogDefaultActivity: ActivityComponentType<"AlertDialogDefault"> = ({ params }) => {
   const { alert } = params;
   const stack = useStack();
-  const { pushStep, popStep } = useStepFlow("Main");
+  const { pushStep, popStep } = useStepFlow("AlertDialogDefault");
 
   const appBarLeft = () => <div>Left</div>;
   const appBarRight = () => <div>Right</div>;
@@ -102,4 +102,6 @@ const AlertDialogActivity: ActivityComponentType<"Main"> = ({ params }) => {
   );
 };
 
-export default AlertDialogActivity;
+export default AlertDialogDefaultActivity;
+
+AlertDialogDefaultActivity.displayName = "AlertDialogDefaultActivity";

component-docs/activities/ChipTabsBasicActivity.tsx

@@ -39,3 +39,5 @@ const ChipTabsBasicActivity: ActivityComponentType<"ChipTabsBasic"> = () => {
 };
 
 export default ChipTabsBasicActivity;
+
+ChipTabsBasicActivity.displayName = "ChipTabsBasicActivity";

component-docs/activities/TabsAlertActivity.tsx

@@ -69,3 +69,5 @@ const TabsAlertActivity: ActivityComponentType<"TabsAlert"> = () => {
 };
 
 export default TabsAlertActivity;
+
+TabsAlertActivity.displayName = "TabsAlertActivity";

component-docs/activities/TabsDisabledActivity.tsx

@@ -65,3 +65,5 @@ const TabsDisabledActivity: ActivityComponentType<"TabsDisabled"> = () => {
 };
 
 export default TabsDisabledActivity;
+
+TabsDisabledActivity.displayName = "TabsDisabledActivity";

component-docs/activities/skeleton/SkeletonWaveActivity.tsx

@@ -0,0 +1,55 @@
+import type { ActivityComponentType } from "@stackflow/react/future";
+import * as React from "react";
+
+import Layout from "@/activities/ActivityLayout";
+import { Skeleton } from "@/seed-design/ui/skeleton";
+import {
+  useSkeletonDuration,
+  useSkeletonLoading,
+  useSkeletonTimingFunction,
+} from "@/stores/skeleton";
+
+declare module "@stackflow/config" {
+  interface Register {
+    SkeletonWave: unknown;
+  }
+}
+
+const Fallback = () => {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+      <Skeleton width="100%" height="300px" borderRadius="square" />
+      <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+        <Skeleton width="50px" height="50px" borderRadius="circle" />
+        <Skeleton width="100%" height="20px" borderRadius="rounded" />
+        <Skeleton width="200px" height="20px" borderRadius="rounded" />
+      </div>
+    </div>
+  );
+};
+
+const SkeletonWaveActivity: ActivityComponentType<"SkeletonWave"> = () => {
+  const isLoading = useSkeletonLoading();
+  const animationDuration = useSkeletonDuration();
+  const animationTiming = useSkeletonTimingFunction();
+
+  return (
+    <Layout>
+      <div
+        style={
+          {
+            padding: "16px",
+            "--skeleton-animation-duration": animationDuration,
+            "--skeleton-animation-timing-function": animationTiming,
+          } as React.CSSProperties
+        }
+      >
+        {isLoading ? <Fallback /> : <div>content</div>}
+      </div>
+    </Layout>
+  );
+};
+
+export default SkeletonWaveActivity;
+
+SkeletonWaveActivity.displayName = "SkeletonWaveActivity";

component-docs/components/ProgressCircleControls.css.ts

@@ -0,0 +1,13 @@
+import { style } from "@vanilla-extract/css";
+
+export const controlBlock = style({
+  display: "flex",
+  gap: "8px",
+});
+
+export const controlLabel = style({});
+
+export const controlInput = style({
+  flex: 1,
+  border: "1px solid #e5e5e5",
+});

component-docs/components/ProgressCircleControls.tsx

@@ -0,0 +1,87 @@
+import { BoxButton } from "@/seed-design/ui/box-button";
+import {
+  useProgressCircleMaxValue,
+  useProgressCircleMinValue,
+  useProgressCircleDuration,
+  useProgressCircleEasing,
+  useProgressCircleValue,
+  useProgressCircleActions,
+} from "@/stores/progress-circle";
+import * as React from "react";
+
+import * as css from "./ProgressCircleControls.css";
+
+export const ProgressCircleControls = () => {
+  const [value, setValue] = React.useState(useProgressCircleValue());
+  const [maxValue, setMaxValue] = React.useState(useProgressCircleMaxValue());
+  const [minValue, setMinValue] = React.useState(useProgressCircleMinValue());
+  const [duration, setDuration] = React.useState(useProgressCircleDuration());
+  const [easing, setEasing] = React.useState(useProgressCircleEasing());
+
+  const { set } = useProgressCircleActions();
+
+  return (
+    <div>
+      <div className={css.controlBlock}>
+        <label className={css.controlLabel} htmlFor="value">
+          value
+        </label>
+        <input
+          className={css.controlInput}
+          id="value"
+          value={value}
+          onChange={(e) => setValue(Number(e.target.value))}
+          min={minValue}
+          max={maxValue}
+        />
+      </div>
+      <div className={css.controlBlock}>
+        <label className={css.controlLabel} htmlFor="min-value">
+          Min Value
+        </label>
+        <input
+          className={css.controlInput}
+          id="min-value"
+          value={minValue}
+          onChange={(e) => setMinValue(Number(e.target.value))}
+        />
+      </div>
+      <div className={css.controlBlock}>
+        <label className={css.controlLabel} htmlFor="max-value">
+          Max Value
+        </label>
+        <input
+          className={css.controlInput}
+          id="max-value"
+          value={maxValue}
+          onChange={(e) => setMaxValue(Number(e.target.value))}
+        />
+      </div>
+      <div className={css.controlBlock}>
+        <label className={css.controlLabel} htmlFor="duration">
+          Duration
+        </label>
+        <input
+          className={css.controlInput}
+          id="duration"
+          value={duration}
+          onChange={(e) => setDuration(e.target.value)}
+        />
+      </div>
+      <div className={css.controlBlock}>
+        <label className={css.controlLabel} htmlFor="easing">
+          Easing
+        </label>
+        <input
+          className={css.controlInput}
+          id="easing"
+          value={easing}
+          onChange={(e) => setEasing(e.target.value)}
+        />
+      </div>
+      <BoxButton type="button" onClick={() => set({ value, minValue, maxValue, duration, easing })}>
+        적용
+      </BoxButton>
+    </div>
+  );
+};

component-docs/components/SkeletonControls.css.ts

@@ -0,0 +1,13 @@
+import { style } from "@vanilla-extract/css";
+
+export const controlBlock = style({
+  display: "flex",
+  gap: "8px",
+});
+
+export const controlLabel = style({});
+
+export const controlInput = style({
+  flex: 1,
+  border: "1px solid #e5e5e5",
+});

component-docs/components/SkeletonControls.tsx

@@ -0,0 +1,64 @@
+import { BoxButton } from "@/seed-design/ui/box-button";
+import {
+  useSkeletonActions,
+  useSkeletonDuration,
+  useSkeletonGradient,
+  useSkeletonLoading,
+  useSkeletonTimingFunction,
+} from "@/stores/skeleton";
+import * as React from "react";
+import { controlBlock, controlInput, controlLabel } from "./SkeletonControls.css";
+
+export const SkeletonControls = () => {
+  const isLoading = useSkeletonLoading();
+  const { toggleLoading, setControls } = useSkeletonActions();
+  const [duration, setDuration] = React.useState(useSkeletonDuration());
+  const [gradient, setGradient] = React.useState(useSkeletonGradient());
+  const [timingFunction, setTimingFunction] = React.useState(useSkeletonTimingFunction());
+
+  return (
+    <div>
+      <BoxButton variant={isLoading ? "neutralSolid" : "brandSolid"} onClick={toggleLoading}>
+        {isLoading ? "Stop Loading" : "Start Loading"}
+      </BoxButton>
+      <div>
+        <div className={controlBlock}>
+          <label className={controlLabel} htmlFor="duration">
+            Duration
+          </label>
+          <input
+            className={controlInput}
+            id="duration"
+            value={duration}
+            onChange={(e) => setDuration(e.target.value)}
+          />
+        </div>
+        <div className={controlBlock}>
+          <label className={controlLabel} htmlFor="gradient">
+            Gradient
+          </label>
+          <input
+            className={controlInput}
+            id="gradient"
+            value={gradient}
+            onChange={(e) => setGradient(e.target.value)}
+          />
+        </div>
+        <div className={controlBlock}>
+          <label className={controlLabel} htmlFor="timing-function">
+            Timing Function
+          </label>
+          <input
+            className={controlInput}
+            id="timing-function"
+            value={timingFunction}
+            onChange={(e) => setTimingFunction(e.target.value)}
+          />
+        </div>
+        <BoxButton type="button" onClick={() => setControls({ duration, gradient })}>
+          적용
+        </BoxButton>
+      </div>
+    </div>
+  );
+};

component-docs/package.json

@@ -22,13 +22,15 @@
     "@stackflow/plugin-renderer-basic": "^1.1.11",
     "@stackflow/react": "^1.2.1",
     "@vanilla-extract/css": "^1.15.5",
+    "@vanilla-extract/recipes": "^0.5.5",
     "next": "^14.2.5",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "simple-reveal": "^0.8.0",
-    "ts-morph": "^23.0.0"
+    "ts-morph": "^23.0.0",
+    "zustand": "^4.5.5"
   },
   "devDependencies": {
     "@seed-design/cli": "workspace:^",
@@ -38,6 +40,7 @@
     "autoprefixer": "^10.4.20",
     "chalk": "^5.3.0",
     "ts-node": "^10.9.2",
+    "ts-pattern": "^5.3.1",
     "tslib": "^2.6.3",
     "typescript": "^5.5.4",
     "zod": "^3.23.8"

component-docs/pages/_meta.json

@@ -1,4 +1,7 @@
 {
   "index": "Introduction",
-  "get-started": "Get Started"
+  "get-started": "Get Started",
+  "components": "Components",
+  "patterns": "Patterns",
+  "libraries": "Libraries"
 }

component-docs/pages/components/_meta.json

@@ -2,5 +2,6 @@
   "alert-dialog": "AlertDialog",
   "box-button": "BoxButton",
   "checkbox": "Checkbox",
+  "progress-circle": "ProgressCircle",
   "tabs": "Tabs"
 }

component-docs/pages/components/alert-dialog.mdx

@@ -4,7 +4,7 @@ import { Preview } from '@/components/Preview';
 import { Stackflow } from "@/components/Stackflow";
 
 import registry from '@/public/registry/components/alert-dialog.json';
-import AlertDialogActivity from "@/activities/AlertDialogActivity";
+import AlertDialogDefaultActivity from "@/activities/AlertDialogDefaultActivity";
 
 # Alert Dialog
 
@@ -46,4 +46,4 @@ export const AlertDialog: React.FC = () => {
 
 ### 예시
 
-<Stackflow Activity={AlertDialogActivity} />
+<Stackflow Activity={AlertDialogDefaultActivity} />