feat: skeleton wip

component-docs/activities/skeleton/SkeletonPulseActivitiy.tsx

@@ -0,0 +1,46 @@
+import type { ActivityComponentType } from "@stackflow/react/future";
+import * as React from "react";
+
+import Layout from "@/activities/ActivityLayout";
+import { useSkeletonLoading } from "@/stores/skeleton";
+import { Skeleton } from "@/seed-design/ui/skeleton";
+
+declare module "@stackflow/config" {
+  interface Register {
+    SkeletonPulse: unknown;
+  }
+}
+
+const InfiniteLoader = () => {
+  throw new Promise(() => {});
+};
+
+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 SkeletonPulseActivitiy: ActivityComponentType<"SkeletonPulse"> = () => {
+  const isLoading = useSkeletonLoading();
+
+  return (
+    <Layout>
+      <div style={{ padding: "16px" }}>
+        <React.Suspense fallback={<Fallback />}>
+          <div>content</div>
+          {isLoading && <InfiniteLoader />}
+        </React.Suspense>
+      </div>
+    </Layout>
+  );
+};
+
+export default SkeletonPulseActivitiy;

component-docs/components/LoadingTrigger.tsx

@@ -0,0 +1,21 @@
+import { BoxButton } from "@/seed-design/ui/box-button";
+import { useSkeletonActions, useSkeletonLoading } from "@/stores/skeleton";
+import * as React from "react";
+
+export const LoadingTrigger = () => {
+  const isLoading = useSkeletonLoading();
+  const { toggleLoading } = useSkeletonActions();
+  return (
+    <BoxButton
+      style={{
+        position: "sticky",
+        bottom: "20px",
+        zIndex: 1000,
+      }}
+      variant={isLoading ? "neutral" : "brand"}
+      onClick={toggleLoading}
+    >
+      {isLoading ? "Stop Loading" : "Start Loading"}
+    </BoxButton>
+  );
+};

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/patterns/skeleton.mdx

@@ -0,0 +1,11 @@
+import { Stackflow } from "@/components/Stackflow";
+import { LoadingTrigger } from '@/components/LoadingTrigger';
+import SkeletonPulseActivity from "@/activities/skeleton/SkeletonPulseActivitiy";
+
+# Skeleton
+
+### Pulse
+
+<Stackflow Activity={SkeletonPulseActivity} />
+
+<LoadingTrigger />

component-docs/seed-design/ui/skeleton.css.ts

@@ -0,0 +1,49 @@
+import { keyframes } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+
+// #F7F8F9
+// #F7F8F950
+const pulse = keyframes({
+  "0%": {
+    backgroundPositionX: "100%",
+  },
+
+  "50%": {
+    backgroundPositionX: "100%",
+  },
+
+  "100%": {
+    backgroundPositionX: "-100%",
+  },
+});
+
+export const skeleton = recipe({
+  base: {},
+
+  variants: {
+    type: {
+      pulse: {
+        backgroundImage: "linear-gradient(90deg, #F7F8F9 0%, #F7F8F950 20%, #F7F8F9 40%)",
+        backgroundSize: "200% 100%",
+        animationFillMode: "forwards",
+
+        animationName: pulse,
+        animationDuration: "1s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+      },
+    },
+
+    borderRadius: {
+      circle: {
+        borderRadius: "50%",
+      },
+      rounded: {
+        borderRadius: "4px",
+      },
+      square: {
+        borderRadius: "0px",
+      },
+    },
+  },
+});

component-docs/seed-design/ui/skeleton.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+
+import * as css from "./skeleton.css";
+
+interface SkeletonProps {
+  width: number | string;
+  height: number | string;
+  borderRadius: "circle" | "rounded" | "square";
+  type?: "pulse";
+}
+
+// TODO: Spec
+// TODO: Recipe
+export const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {
+  const { width, height, borderRadius, type = "pulse" } = props;
+  return (
+    <div
+      ref={ref}
+      style={{
+        width,
+        height,
+      }}
+      className={css.skeleton({ type, borderRadius })}
+    />
+  );
+});

component-docs/stores/skeleton.ts

@@ -0,0 +1,18 @@
+import { create } from "zustand";
+
+interface SkeletonState {
+  isLoading: boolean;
+  actions: {
+    toggleLoading: () => void;
+  };
+}
+
+const useSkeleton = create<SkeletonState>((set) => ({
+  isLoading: true,
+  actions: {
+    toggleLoading: () => set((state) => ({ isLoading: !state.isLoading })),
+  },
+}));
+
+export const useSkeletonLoading = () => useSkeleton((state) => state.isLoading);
+export const useSkeletonActions = () => useSkeleton((state) => state.actions);