chore: folder structure (#435)

component-docs/activities/ActivityLayout.css.ts → component-docs/src/activities/ActivityLayout.css.ts

@@ -1,7 +1,7 @@
 import { style } from "@vanilla-extract/css";
 import { vars } from "@seed-design/design-token";
 
-import { f } from "@/styles";
+import { f } from "@/src/styles";
 
 export const wrapper = style([f.posAbsFull, f.flexColumn, f.rootLineHeight]);
 

component-docs/activities/ActivityLayout.tsx → component-docs/src/activities/ActivityLayout.tsx

@@ -1,14 +1,14 @@
 import { AppScreen } from "@stackflow/plugin-basic-ui";
 
-import IconExpandMore from "@/assets/IconExpandMore";
-import IconSearch from "@/assets/IconSearch";
-import IconSettings from "@/assets/IconSettings";
-import IconBell from "@/assets/IconBell";
-import IconHome from "@/assets/IconHome";
-import IconMenu from "@/assets/IconMenu";
-import IconSell from "@/assets/IconSell";
-import IconChatting from "@/assets/IconChatting";
-import IconProfile from "@/assets/IconProfile";
+import IconExpandMore from "@/src/assets/IconExpandMore";
+import IconSearch from "@/src/assets/IconSearch";
+import IconSettings from "@/src/assets/IconSettings";
+import IconBell from "@/src/assets/IconBell";
+import IconHome from "@/src/assets/IconHome";
+import IconMenu from "@/src/assets/IconMenu";
+import IconSell from "@/src/assets/IconSell";
+import IconChatting from "@/src/assets/IconChatting";
+import IconProfile from "@/src/assets/IconProfile";
 
 import * as css from "./ActivityLayout.css";
 

component-docs/activities/skeleton/SkeletonWaveActivity.tsx → component-docs/src/activities/skeleton/SkeletonWaveActivity.tsx

@@ -1,13 +1,13 @@
 import type { ActivityComponentType } from "@stackflow/react/future";
 import * as React from "react";
 
-import Layout from "@/activities/ActivityLayout";
+import Layout from "@/src/activities/ActivityLayout";
 import { Skeleton } from "@/seed-design/ui/skeleton";
 import {
   useSkeletonDuration,
   useSkeletonLoading,
   useSkeletonTimingFunction,
-} from "@/stores/skeleton";
+} from "@/src/stores/skeleton";
 
 declare module "@stackflow/config" {
   interface Register {

component-docs/assets/IconBell.tsx → component-docs/src/assets/IconBell.tsx

@@ -1,4 +1,4 @@
-import { f } from "@/styles";
+import { f } from "@/src/styles";
 
 const SVG = `
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

component-docs/assets/IconChatting.tsx → component-docs/src/assets/IconChatting.tsx

@@ -1,4 +1,4 @@
-import { f } from "@/styles";
+import { f } from "@/src/styles";
 
 const SVG = `
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

component-docs/assets/IconExpandMore.tsx → component-docs/src/assets/IconExpandMore.tsx

@@ -1,4 +1,4 @@
-import { f } from "@/styles";
+import { f } from "@/src/styles";
 
 const SVG = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

component-docs/assets/IconHome.tsx → component-docs/src/assets/IconHome.tsx

@@ -1,4 +1,4 @@
-import { f } from "@/styles";
+import { f } from "@/src/styles";
 
 const SVG = `
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

component-docs/assets/IconMenu.tsx → component-docs/src/assets/IconMenu.tsx

@@ -1,4 +1,4 @@
-import { f } from "@/styles";
+import { f } from "@/src/styles";
 
 const SVG = `
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

component-docs/assets/IconProfile.tsx → component-docs/src/assets/IconProfile.tsx

@@ -1,4 +1,4 @@
-import { f } from "@/styles";
+import { f } from "@/src/styles";
 
 const SVG = `
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

component-docs/assets/IconSearch.tsx → component-docs/src/assets/IconSearch.tsx

@@ -1,4 +1,4 @@
-import { f } from "@/styles";
+import { f } from "@/src/styles";
 
 const SVG = `
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

component-docs/assets/IconSell.tsx → component-docs/src/assets/IconSell.tsx

@@ -1,4 +1,4 @@
-import { f } from "@/styles";
+import { f } from "@/src/styles";
 
 const SVG = `
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

component-docs/assets/IconSettings.tsx → component-docs/src/assets/IconSettings.tsx

@@ -1,4 +1,4 @@
-import { f } from "@/styles";
+import { f } from "@/src/styles";
 
 const SVG = `
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

component-docs/seed-design/components/alert-dialog.tsx → component-docs/src/components/AlertDialog.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
-import { AlertDialog as UIAlertDialog } from "../ui/alert-dialog";
-import { BoxButton } from "../ui/box-button";
+import { AlertDialog as UIAlertDialog } from "../../seed-design/ui/alert-dialog";
+import { BoxButton } from "../../seed-design/ui/box-button";
 
 export const AlertDialog: React.FC = () => {
   const [open, setOpen] = React.useState(false);

component-docs/seed-design/components/progress-circle.tsx → component-docs/src/components/ProgressCircle.tsx

@@ -10,7 +10,7 @@ import {
   useProgressCircleMaxValue,
   useProgressCircleMinValue,
   useProgressCircleValue,
-} from "@/stores/progress-circle";
+} from "@/src/stores/progress-circle";
 
 export const ProgressCircle: React.FC = (props: ProgressCircleProps) => {
   const value = useProgressCircleValue();

component-docs/components/ProgressCircleControls.tsx → component-docs/src/components/ProgressCircleControls.tsx

@@ -6,7 +6,7 @@ import {
   useProgressCircleEasing,
   useProgressCircleValue,
   useProgressCircleActions,
-} from "@/stores/progress-circle";
+} from "@/src/stores/progress-circle";
 import * as React from "react";
 
 import * as css from "./ProgressCircleControls.css";

component-docs/components/SkeletonControls.tsx → component-docs/src/components/SkeletonControls.tsx

@@ -5,7 +5,7 @@ import {
   useSkeletonGradient,
   useSkeletonLoading,
   useSkeletonTimingFunction,
-} from "@/stores/skeleton";
+} from "@/src/stores/skeleton";
 import * as React from "react";
 import { controlBlock, controlInput, controlLabel } from "./SkeletonControls.css";
 

component-docs/components/Stackflow.tsx → component-docs/src/components/Stackflow.tsx

@@ -1,4 +1,4 @@
-import { makeStack } from "@/stackflow";
+import { makeStack } from "@/src/stackflow";
 import type { Register } from "@stackflow/config";
 import type { ActivityComponentType } from "@stackflow/react/future";
 import { useSimpleReveal } from "simple-reveal";

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

@@ -1,10 +1,10 @@
-import { AlertDialog } from '@/seed-design/components/alert-dialog';
-import { Installation } from '@/components/Installation';
-import { Preview } from '@/components/Preview';
-import { Stackflow } from "@/components/Stackflow";
+import { AlertDialog } from '@/src/components/AlertDialog';
+import { Installation } from '@/src/components/Installation';
+import { Preview } from '@/src/components/Preview';
+import { Stackflow } from "@/src/components/Stackflow";
 
 import registry from '@/public/registry/components/alert-dialog.json';
-import AlertDialogDefaultActivity from "@/activities/AlertDialogDefaultActivity";
+import AlertDialogDefaultActivity from "@/src/activities/AlertDialogDefaultActivity";
 
 # Alert Dialog
 

component-docs/pages/components/box-button.mdx → component-docs/src/pages/components/box-button.mdx

@@ -1,6 +1,6 @@
 import { BoxButton } from '@/seed-design/ui/box-button';
-import { Installation } from '@/components/Installation';
-import { Preview } from '@/components/Preview';
+import { Installation } from '@/src/components/Installation';
+import { Preview } from '@/src/components/Preview';
 
 import registry from '@/public/registry/components/box-button.json';
 

component-docs/pages/components/checkbox.mdx → component-docs/src/pages/components/checkbox.mdx

@@ -1,6 +1,6 @@
 import { Checkbox } from '@/seed-design/ui/checkbox';
-import { Installation } from '@/components/Installation';
-import { Preview } from '@/components/Preview';
+import { Installation } from '@/src/components/Installation';
+import { Preview } from '@/src/components/Preview';
 
 import registry from '@/public/registry/components/checkbox.json';
 

component-docs/pages/components/progress-circle.mdx → component-docs/src/pages/components/progress-circle.mdx

@@ -1,5 +1,5 @@
-import { ProgressCircle } from '@/seed-design/components/progress-circle';
-import { ProgressCircleControls } from '@/components/ProgressCircleControls';
+import { ProgressCircle } from '@/src/components/ProgressCircle';
+import { ProgressCircleControls } from '@/src/components/ProgressCircleControls';
 
 # Progress Circle
 

component-docs/pages/components/tabs/chip-tabs.mdx → component-docs/src/pages/components/tabs/chip-tabs.mdx

@@ -1,11 +1,11 @@
-import { Installation } from '@/components/Installation';
-import { Preview } from '@/components/Preview';
-import { Stackflow } from "@/components/Stackflow";
+import { Installation } from '@/src/components/Installation';
+import { Preview } from '@/src/components/Preview';
+import { Stackflow } from "@/src/components/Stackflow";
 
-import { ChipTabs } from '@/seed-design/components/chip-tabs';
+import { ChipTabs } from '@/src/components/ChipTabs';
 
 import registry from '@/public/registry/components/chip-tabs.json';
-import ChipTabsBasicActivity from "@/activities/ChipTabsBasicActivity";
+import ChipTabsBasicActivity from "@/src/activities/ChipTabsBasicActivity";
 
 # ChipTabs
 

component-docs/pages/components/tabs/tabs.mdx → component-docs/src/pages/components/tabs/tabs.mdx

@@ -1,12 +1,12 @@
-import { Installation } from '@/components/Installation';
-import { Preview } from '@/components/Preview';
-import { Stackflow } from "@/components/Stackflow";
+import { Installation } from '@/src/components/Installation';
+import { Preview } from '@/src/components/Preview';
+import { Stackflow } from "@/src/components/Stackflow";
 
-import { Tabs } from '@/seed-design/components/tabs';
+import { Tabs } from '@/src/components/Tabs';
 
 import registry from '@/public/registry/components/tabs.json';
-import TabsDisabledActivity from "@/activities/TabsDisabledActivity";
-import TabsAlertActivity from "@/activities/TabsAlertActivity";
+import TabsDisabledActivity from "@/src/activities/TabsDisabledActivity";
+import TabsAlertActivity from "@/src/activities/TabsAlertActivity";
 
 # Tabs
 

component-docs/pages/get-started/CLI.mdx → component-docs/src/pages/get-started/CLI.mdx

@@ -1,4 +1,4 @@
-import SeedDesignConfiguration from "@/templates/seed-design-configuration.mdx";
+import SeedDesignConfiguration from "@/src/templates/seed-design-configuration.mdx";
 
 # CLI
 

component-docs/pages/get-started/installation/next.mdx → component-docs/src/pages/get-started/installation/next.mdx

@@ -1,7 +1,7 @@
 import { Steps, Tabs } from 'nextra/components'
 
-import SeedDesignConfiguration from "@/templates/seed-design-configuration.mdx"
-import Installation from "@/templates/get-started-installation.mdx"
+import SeedDesignConfiguration from "@/src/templates/seed-design-configuration.mdx"
+import Installation from "@/src/templates/get-started-installation.mdx"
 
 # 설치
 

component-docs/pages/get-started/installation/vite.mdx → component-docs/src/pages/get-started/installation/vite.mdx

@@ -1,7 +1,7 @@
 import { Steps, Tabs } from 'nextra/components'
 
-import SeedDesignConfiguration from "@/templates/seed-design-configuration.mdx"
-import Installation from "@/templates/get-started-installation.mdx"
+import SeedDesignConfiguration from "@/src/templates/seed-design-configuration.mdx"
+import Installation from "@/src/templates/get-started-installation.mdx"
 
 # 설치
 

component-docs/pages/get-started/seed-design.json.mdx → component-docs/src/pages/get-started/seed-design.json.mdx

@@ -1,6 +1,6 @@
 import { FileTree } from 'nextra/components';
 
-import SeedDesignConfiguration from "@/templates/seed-design-configuration.mdx";
+import SeedDesignConfiguration from "@/src/templates/seed-design-configuration.mdx";
 
 # seed-design.json
 

component-docs/src/pages/patterns/skeleton.mdx

@@ -0,0 +1,11 @@
+import { Stackflow } from "@/src/components/Stackflow";
+import { SkeletonControls } from '@/src/components/SkeletonControls';
+import SkeletonWaveActivity from "@/src/activities/skeleton/SkeletonWaveActivity";
+
+# Skeleton
+
+### Wave
+
+<Stackflow Activity={SkeletonWaveActivity} />
+
+<SkeletonControls />

packages/recipe-generator/preset/src/progress-circle.recipe.ts

@@ -82,8 +82,10 @@ const progressCircle = defineRecipe({
       },
       determinate: {
         "indicator-path": {
-          transition:
-            "stroke-dasharray var(--seed-spinner-determinate-duration, 0.3s) var(--seed-spinner-determinate-timing-function, cubic-bezier(0.35, 0.25, 0.65, 0.75)) 0s",
+          transitionDuration: "var(--seed-spinner-determinate-duration, 0.3s)",
+          transitionTimingFunction:
+            "var(--seed-spinner-determinate-timing-function, cubic-bezier(0.35, 0.25, 0.65, 0.75))",
+          transitionProperty: "stroke-dasharray, stroke-linecap",
         },
       },
     },

packages/stylesheet/progressCircle.css

@@ -51,7 +51,9 @@
 
 }
 .progressCircle__indicator-path--variant_determinate {
-    transition: stroke-dasharray var(--seed-spinner-determinate-duration, 0.3s) var(--seed-spinner-determinate-timing-function, cubic-bezier(0.35, 0.25, 0.65, 0.75)) 0s
+    transition-duration: var(--seed-spinner-determinate-duration, 0.3s);
+    transition-timing-function: var(--seed-spinner-determinate-timing-function, cubic-bezier(0.35, 0.25, 0.65, 0.75));
+    transition-property: stroke-dasharray, stroke-linecap
 }
 @keyframes rotate {
     from {