chore: init shadcn-svelte demo

hyoban · hyoban · commit 36d9abc3ae13 · 2023-12-21T17:49:36.000+08:00
diff --git a/examples/shadcn-svelte/.gitignore b/examples/shadcn-svelte/.gitignore
@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/examples/shadcn-svelte/.npmrc b/examples/shadcn-svelte/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/examples/shadcn-svelte/README.md b/examples/shadcn-svelte/README.md
@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
diff --git a/examples/shadcn-svelte/components.json b/examples/shadcn-svelte/components.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app.pcss",
+    "baseColor": "neutral"
+  },
+  "aliases": {
+    "components": "$lib/components",
+    "utils": "$lib/utils"
+  }
+}
diff --git a/examples/shadcn-svelte/package.json b/examples/shadcn-svelte/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "shadcn-svelte",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "postcss-load-config": "^5.0.2",
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.6.0",
+    "tailwindcss": "^3.3.6",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.3"
+  },
+  "type": "module",
+  "dependencies": {
+    "bits-ui": "^0.11.8",
+    "clsx": "^2.0.0",
+    "lucide-svelte": "^0.299.0",
+    "tailwind-merge": "^2.1.0",
+    "tailwind-variants": "^0.1.19"
+  }
+}
diff --git a/examples/shadcn-svelte/postcss.config.cjs b/examples/shadcn-svelte/postcss.config.cjs
@@ -0,0 +1,13 @@
+const tailwindcss = require("tailwindcss")
+const autoprefixer = require("autoprefixer")
+
+const config = {
+  plugins: [
+    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+    tailwindcss(),
+    //But others, like autoprefixer, need to run after,
+    autoprefixer,
+  ],
+}
+
+module.exports = config
diff --git a/examples/shadcn-svelte/src/app.d.ts b/examples/shadcn-svelte/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
+}
+
+export {}
diff --git a/examples/shadcn-svelte/src/app.html b/examples/shadcn-svelte/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
diff --git a/examples/shadcn-svelte/src/app.pcss b/examples/shadcn-svelte/src/app.pcss
@@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --ring: 0 0% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --ring: 0 0% 83.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/examples/shadcn-svelte/src/lib/components/ui/button/button.svelte b/examples/shadcn-svelte/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils";
+	import { buttonVariants, type Props, type Events } from ".";
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>
diff --git a/examples/shadcn-svelte/src/lib/components/ui/button/index.ts b/examples/shadcn-svelte/src/lib/components/ui/button/index.ts
@@ -0,0 +1,53 @@
+import { tv } from "tailwind-variants"
+
+import Root from "./button.svelte"
+
+import type { Button as ButtonPrimitive } from "bits-ui"
+import type { VariantProps } from "tailwind-variants"
+
+const buttonVariants = tv({
+  base: "inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      destructive:
+        "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+      outline:
+        "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground",
+      link: "text-primary underline-offset-4 hover:underline",
+    },
+    size: {
+      default: "h-10 px-4 py-2",
+      sm: "h-9 rounded-md px-3",
+      lg: "h-11 rounded-md px-8",
+      icon: "h-10 w-10",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+})
+
+type Variant = VariantProps<typeof buttonVariants>["variant"]
+type Size = VariantProps<typeof buttonVariants>["size"]
+
+type Props = ButtonPrimitive.Props & {
+  variant?: Variant
+  size?: Size
+}
+
+type Events = ButtonPrimitive.Events
+
+export {
+  Root,
+  type Props,
+  type Events,
+  //
+  Root as Button,
+  type Props as ButtonProps,
+  type Events as ButtonEvents,
+  buttonVariants,
+}
diff --git a/examples/shadcn-svelte/src/lib/index.ts b/examples/shadcn-svelte/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
diff --git a/examples/shadcn-svelte/src/lib/utils.ts b/examples/shadcn-svelte/src/lib/utils.ts
@@ -0,0 +1,64 @@
+import { clsx } from "clsx"
+import { cubicOut } from "svelte/easing"
+import { twMerge } from "tailwind-merge"
+
+import type { ClassValue } from "clsx"
+import type { TransitionConfig } from "svelte/transition"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+type FlyAndScaleParams = {
+  y?: number
+  x?: number
+  start?: number
+  duration?: number
+}
+
+export const flyAndScale = (
+  node: Element,
+  params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 },
+): TransitionConfig => {
+  const style = getComputedStyle(node)
+  const transform = style.transform === "none" ? "" : style.transform
+
+  const scaleConversion = (
+    valueA: number,
+    scaleA: [number, number],
+    scaleB: [number, number],
+  ) => {
+    const [minA, maxA] = scaleA
+    const [minB, maxB] = scaleB
+
+    const percentage = (valueA - minA) / (maxA - minA)
+    const valueB = percentage * (maxB - minB) + minB
+
+    return valueB
+  }
+
+  const styleToString = (
+    style: Record<string, number | string | undefined>,
+  ): string => {
+    return Object.keys(style).reduce((str, key) => {
+      if (style[key] === undefined) return str
+      return str + `${key}:${style[key]};`
+    }, "")
+  }
+
+  return {
+    duration: params.duration ?? 200,
+    delay: 0,
+    css: (t) => {
+      const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0])
+      const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0])
+      const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1])
+
+      return styleToString({
+        transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+        opacity: t,
+      })
+    },
+    easing: cubicOut,
+  }
+}
diff --git a/examples/shadcn-svelte/src/routes/+layout.svelte b/examples/shadcn-svelte/src/routes/+layout.svelte
@@ -0,0 +1 @@
+<script>import "../app.pcss";</script><slot></slot>
diff --git a/examples/shadcn-svelte/src/routes/+page.svelte b/examples/shadcn-svelte/src/routes/+page.svelte
@@ -0,0 +1,4 @@
+<script lang="ts">
+  import { Button } from "$lib/components/ui/button";
+</script>
+<Button >Button</Button>
diff --git a/examples/shadcn-svelte/static/favicon.png b/examples/shadcn-svelte/static/favicon.png
diff --git a/examples/shadcn-svelte/svelte.config.js b/examples/shadcn-svelte/svelte.config.js
@@ -0,0 +1,18 @@
+import adapter from "@sveltejs/adapter-auto"
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // for more information about preprocessors
+  preprocess: [vitePreprocess({})],
+
+  kit: {
+    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+    adapter: adapter(),
+  },
+}
+
+export default config
diff --git a/examples/shadcn-svelte/tailwind.config.js b/examples/shadcn-svelte/tailwind.config.js
diff --git a/examples/shadcn-svelte/tsconfig.json b/examples/shadcn-svelte/tsconfig.json
diff --git a/examples/shadcn-svelte/vite.config.ts b/examples/shadcn-svelte/vite.config.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	+// place files you want to import through the `$lib` alias in this folder.
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<script>import "../app.pcss";</script><slot></slot>`