create-tauri-ui 0.1.2 → 0.1.4

package/templates/sveltekit/src/lib/config/docs.ts

@@ -0,0 +1,356 @@
+import type { NavItem, SidebarNavItem } from '$lib/types/nav';
+
+interface DocsConfig {
+  mainNav: NavItem[];
+  sidebarNav: SidebarNavItem[];
+}
+
+export const docsConfig: DocsConfig = {
+  mainNav: [
+    {
+      title: 'Documentation',
+      href: '/docs'
+    },
+    {
+      title: 'Components',
+      href: '/docs/components/accordion'
+    },
+    {
+      title: 'Examples',
+      href: '/dashboard'
+    },
+    {
+      title: 'Figma',
+      href: '/docs/figma'
+    },
+    {
+      title: 'GitHub',
+      href: 'https://github.com/huntabyte/shadcn-svelte',
+      external: true
+    }
+  ],
+  sidebarNav: [
+    {
+      title: 'Getting Started',
+      items: [
+        {
+          title: 'Introduction',
+          href: '/docs',
+          items: []
+        },
+        {
+          title: 'Installation',
+          href: '/docs/installation',
+          items: []
+        },
+        {
+          title: 'Theming',
+          href: '/docs/theming',
+          items: []
+        },
+        {
+          title: 'CLI',
+          href: '/docs/cli',
+          items: []
+        },
+        {
+          title: 'Typography',
+          href: '/docs/typography',
+          items: []
+        }
+      ]
+    },
+    {
+      title: 'Community',
+      items: [
+        {
+          title: 'Figma',
+          href: '/docs/figma',
+          items: []
+        }
+      ]
+    },
+    {
+      title: 'Forms',
+      items: [
+        {
+          title: 'Superforms',
+          href: '#',
+          label: 'Soon',
+          disabled: true,
+          items: []
+        }
+      ]
+    },
+    {
+      title: 'Components',
+      items: [
+        {
+          title: 'Accordion',
+          href: '/docs/components/accordion',
+          items: []
+        },
+        {
+          title: 'Alert',
+          href: '/docs/components/alert',
+          items: []
+        },
+        {
+          title: 'Alert Dialog',
+          href: '/docs/components/alert-dialog',
+          items: []
+        },
+        {
+          title: 'Aspect Ratio',
+          href: '/docs/components/aspect-ratio',
+          items: []
+        },
+        {
+          title: 'Avatar',
+          href: '/docs/components/avatar',
+          items: []
+        },
+        {
+          title: 'Badge',
+          href: '/docs/components/badge',
+          items: []
+        },
+        {
+          title: 'Button',
+          href: '/docs/components/button',
+          items: []
+        },
+        // {
+        //   title: "Calendar",
+        //   href: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
+        {
+          title: 'Card',
+          href: '/docs/components/card',
+          items: []
+        },
+        {
+          title: 'Checkbox',
+          href: '/docs/components/checkbox',
+          items: []
+        },
+        {
+          title: 'Collapsible',
+          href: '/docs/components/collapsible',
+          items: []
+        },
+        // {
+        //   title: "Combobox",
+        //   href: "#",
+        //   label: "Soon",
+        //   items: [],
+        //   disabled: true
+        // },
+        // {
+        //   title: "Command",
+        //   href: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
+        // {
+        //   title: "Context Menu",
+        //   href: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
+        {
+          title: 'Data Table',
+          href: '#',
+          label: 'Soon',
+          disabled: true,
+          items: []
+        },
+        // {
+        //   title: "Date Picker",
+        //   href: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
+        {
+          title: 'Dialog',
+          href: '/docs/components/dialog',
+          items: []
+        },
+        // {
+        //   title: "Dropdown Menu",
+        //   href: "#",
+        //   items: []
+        // },
+        {
+          title: 'Hover Card',
+          href: '/docs/components/hover-card',
+          items: []
+        },
+        {
+          title: 'Input',
+          href: '/docs/components/input',
+          items: []
+        },
+        {
+          title: 'Label',
+          href: '/docs/components/label',
+          items: []
+        },
+        // {
+        //   title: "Menubar",
+        //   href: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
+        // {
+        //   title: "Navigation Menu",
+        //   href: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
+        // {
+        //   title: "Popover",
+        //   href: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
+        {
+          title: 'Progress',
+          href: '/docs/components/progress',
+          items: []
+        },
+        {
+          title: 'Radio Group',
+          href: '/docs/components/radio-group',
+          items: []
+        },
+        // {
+        //   title: "Scroll Area",
+        //   href: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
+        {
+          title: 'Select',
+          href: '#',
+          label: 'Soon',
+          disabled: true,
+          items: []
+        },
+        {
+          title: 'Separator',
+          href: '/docs/components/separator',
+          items: []
+        },
+        {
+          title: 'Sheet',
+          href: '/docs/components/sheet',
+          items: []
+        },
+        {
+          title: 'Skeleton',
+          href: '/docs/components/skeleton',
+          items: []
+        },
+        {
+          title: 'Slider',
+          href: '/docs/components/slider',
+          items: []
+        },
+        {
+          title: 'Switch',
+          href: '/docs/components/switch',
+          items: []
+        },
+        {
+          title: 'Table',
+          href: '/docs/components/table',
+          items: []
+        },
+        {
+          title: 'Tabs',
+          href: '/docs/components/tabs',
+          items: []
+        },
+        {
+          title: 'Textarea',
+          href: '/docs/components/textarea',
+          items: []
+        },
+        // {
+        //   title: "Toast",
+        //   href: "#",
+        //   label: "Soon",
+        //   disabled: true,
+        //   items: []
+        // },
+        {
+          title: 'Toggle',
+          href: '/docs/components/toggle',
+          items: []
+        },
+        {
+          title: 'Tooltip',
+          href: '/docs/components/tooltip',
+          items: []
+        }
+      ]
+    }
+  ]
+};
+
+type Example = {
+  name: string;
+  href: string;
+  label?: string;
+  code: string;
+};
+export const examples: Example[] = [
+  {
+    name: 'Dashboard',
+    href: '/dashboard',
+    code: 'https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/docs/dashboard'
+  },
+  {
+    name: 'Cards',
+    href: '/cards',
+    code: 'https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/routes/examples/cards'
+  },
+  // {
+  // 	name: "Tasks",
+  // 	href: "/tasks",
+  // 	label: "New",
+  // 	code: "https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/apps/www/app/examples/tasks"
+  // },
+  // {
+  // 	name: "Playground",
+  // 	href: "/playground",
+  // 	code: "https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/apps/www/app/examples/playground"
+  // },
+  // {
+  // 	name: "Music",
+  // 	href: "/music",
+  // 	code: "https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/apps/www/app/examples/music"
+  // },
+  {
+    name: 'Authentication',
+    href: '/authentication',
+    code: 'https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/routes/examples/authentication'
+  }
+  // {
+  // 	name: "Forms",
+  // 	href: "#",
+  // 	label: "Soon",
+  // 	code: "https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/routes/examples/forms"
+  // }
+];

package/templates/sveltekit/src/lib/config/site.ts

@@ -0,0 +1,15 @@
+export const siteConfig = {
+  name: 'shadcn-svelte',
+  url: 'https://shadcn-svelte.com',
+  ogImage: 'https://shadcn-svelte.com/og.jpg',
+  description: 'Beautifully designed components built with Radix Svelte and Tailwind CSS.',
+  links: {
+    twitter: 'https://twitter.com/huntabyte',
+    github: 'https://github.com/huntabyte/shadcn-svelte',
+    shadTwitter: 'https://twitter.com/shadcn',
+    shadGithub: 'https://github.com/shadcn/ui'
+  },
+  keywords: `shadcn,Svelte,SvelteKit,Svelte Components,TailwindCSS,Radix Svelte`
+};
+
+export type SiteConfig = typeof siteConfig;

package/templates/sveltekit/src/lib/types/docs.ts

@@ -0,0 +1,50 @@
+export type Metadata = {
+  title: string;
+  description: string;
+  openGraph: {
+    title: string;
+    description: string;
+    type: 'article';
+    url: string;
+    images: [
+      {
+        url: string;
+        width: number;
+        height: number;
+        alt: string;
+      }
+    ];
+  };
+  twitter: {
+    card: 'summary_large_image';
+    title: string;
+    description: string;
+    images: string[];
+    creator: string;
+  };
+};
+
+export type FrontMatter = {
+  title: string;
+  description: string;
+  component: boolean;
+  source: string;
+  radix?: string;
+};
+
+export type DocFile = {
+  default: import('svelte/internal').SvelteComponent;
+  metadata: FrontMatter;
+};
+
+export type DocResolver = () => Promise<DocFile>;
+
+export type TableOfContentsItem = {
+  title: string;
+  url: string;
+  items?: TableOfContentsItem[];
+};
+
+export type TableOfContents = {
+  items: TableOfContentsItem[];
+};

package/templates/sveltekit/src/lib/types/nav.ts

@@ -0,0 +1,18 @@
+import type { Icons } from '$components/docs/icons';
+
+export type NavItem = {
+  title: string;
+  href?: string;
+  disabled?: boolean;
+  external?: boolean;
+  icon?: keyof typeof Icons;
+  label?: string;
+};
+
+export type SidebarNavItem = NavItem & {
+  items: SidebarNavItem[];
+};
+
+export type NavItemWithChildren = NavItem & {
+  items: NavItemWithChildren[];
+};

package/templates/sveltekit/src/lib/utils.ts

@@ -0,0 +1,75 @@
+import type { ClassValue } from 'clsx';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function slugFromPath(path: string) {
+  return path.replace('/src/content/', '').replace('.md', '');
+}
+
+export function hexToHsl(hex: string): [number, number, number] {
+  if (hex) {
+    const sanitizedHex = hex.replace('#', '');
+
+    const red = parseInt(sanitizedHex.substring(0, 2), 16);
+    const green = parseInt(sanitizedHex.substring(2, 4), 16);
+    const blue = parseInt(sanitizedHex.substring(4, 6), 16);
+
+    const normalizedRed = red / 255;
+    const normalizedGreen = green / 255;
+    const normalizedBlue = blue / 255;
+
+    const max = Math.max(normalizedRed, normalizedGreen, normalizedBlue);
+    const min = Math.min(normalizedRed, normalizedGreen, normalizedBlue);
+
+    let hue, saturation, lightness;
+
+    if (max === min) {
+      hue = 0;
+    } else if (max === normalizedRed) {
+      hue = ((normalizedGreen - normalizedBlue) / (max - min)) % 6;
+    } else if (max === normalizedGreen) {
+      hue = (normalizedBlue - normalizedRed) / (max - min) + 2;
+    } else {
+      hue = (normalizedRed - normalizedGreen) / (max - min) + 4;
+    }
+
+    hue = Math.round(hue * 60);
+
+    if (hue < 0) {
+      hue += 360;
+    }
+
+    lightness = (max + min) / 2;
+
+    if (max === min) {
+      saturation = 0;
+    } else if (lightness <= 0.5) {
+      saturation = (max - min) / (max + min);
+    } else {
+      saturation = (max - min) / (2 - max - min);
+    }
+
+    saturation = Math.round(saturation * 100);
+    lightness = Math.round(lightness * 100);
+
+    return [hue, saturation, lightness];
+  }
+  return [0, 0, 0];
+}
+
+export function hexToRgb(hex: string): [number, number, number] {
+  if (hex) {
+    const sanitizedHex = hex.replace('#', '');
+
+    const red = parseInt(sanitizedHex.substring(0, 2), 16);
+    const green = parseInt(sanitizedHex.substring(2, 4), 16);
+    const blue = parseInt(sanitizedHex.substring(4, 6), 16);
+
+    return [red, green, blue];
+  }
+  return [0, 0, 0];
+}

package/templates/sveltekit/src/routes/+layout.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { dev } from '$app/environment';
+  import '../styles/globals.css';
+
+  import {
+    ExamplesNav,
+    Icons,
+    PageHeader,
+    PageHeaderDescription,
+    PageHeaderHeading,
+    TailwindIndicator
+  } from '$components/docs';
+  import { Button } from '$components/ui/button';
+  import { cn } from '$lib/utils';
+  import { Maximize, Sailboat, X } from 'lucide-svelte';
+
+  import { onMount } from 'svelte';
+  import Minimize from '$components/docs/icons/Minimize.svelte';
+  import LightSwitch from '$components/docs/light-switch/LightSwitch.svelte';
+
+  let appWindow;
+
+  const minimizeWindow = async () => {
+    const { appWindow: windowPlugin } = await import('@tauri-apps/plugin-window');
+    appWindow = windowPlugin;
+    appWindow?.minimize();
+  };
+
+  const maximizeWindow = async () => {
+    const { appWindow: windowPlugin } = await import('@tauri-apps/plugin-window');
+    appWindow = windowPlugin;
+    const isMaximized = await appWindow?.isMaximized();
+
+    if (isMaximized) {
+      appWindow?.unmaximize();
+    } else {
+      appWindow?.maximize();
+    }
+  };
+
+  const closeWindow = async () => {
+    const { appWindow: windowPlugin } = await import('@tauri-apps/plugin-window');
+    appWindow = windowPlugin;
+    appWindow.close();
+  };
+
+  onMount(async () => {
+    const { appWindow: windowPlugin } = await import('@tauri-apps/plugin-window');
+    appWindow = windowPlugin;
+  });
+</script>
+
+<div class="h-screen overflow-clip">
+  <div data-tauri-drag-region class="ml-2 flex items-center p-1">
+    <Sailboat class="h-5 w-5 " />
+
+    <ExamplesNav data-tauri-drag-region class="pl-1" />
+    <LightSwitch />
+
+    <div data-tauri-drag-region class="inline-flex h-full justify-end">
+      <Button
+        variant="ghost"
+        class="h-8 focus:outline-none"
+        id="titlebar-minimize"
+        on:click={() => minimizeWindow()}
+      >
+        <Minimize class="h-3 w-3" />
+      </Button>
+      <Button
+        variant="ghost"
+        class="h-8 focus:outline-none"
+        id="titlebar-minimize"
+        on:click={() => maximizeWindow()}
+      >
+        <Maximize class="h-4 w-4" />
+      </Button>
+      <Button
+        variant="ghost"
+        class="h-8 focus:outline-none"
+        id="titlebar-minimize"
+        on:click={() => closeWindow()}
+      >
+        <X class="h-4 w-4" />
+      </Button>
+    </div>
+  </div>
+  <div
+    class={cn(
+      'h-screen overflow-auto border-t bg-background pb-8',
+      // "scrollbar-none"
+      'scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-md'
+    )}
+  >
+    <slot />
+  </div>
+  {#if dev}
+    <TailwindIndicator />
+  {/if}
+</div>

package/templates/sveltekit/src/routes/+layout.ts

@@ -0,0 +1,4 @@
+import { dev } from '$app/environment';
+
+export const prerender = true;
+export const ssr = dev === true;

package/templates/sveltekit/src/routes/+page.ts

@@ -0,0 +1,6 @@
+import type { PageLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+
+export const load: PageLoad = async () => {
+  throw redirect(302, '/dashboard');
+};

package/templates/sveltekit/src/routes/authentication/+page.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { Button } from '$components/ui/button';
+  import UserAuthForm from './UserAuthForm.svelte';
+</script>
+
+<div class="md:hidden">
+  <img
+    src="/examples/authentication-light.png"
+    width={1280}
+    height={843}
+    alt="Authentication"
+    class="block dark:hidden"
+  />
+  <img
+    src="/examples/authentication-dark.png"
+    width={1280}
+    height={843}
+    alt="Authentication"
+    class="hidden dark:block"
+  />
+</div>
+<div
+  class="container relative hidden h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0"
+>
+  <Button
+    href="/examples/authentication"
+    variant="ghost"
+    class="absolute right-4 top-4 md:right-8 md:top-8"
+  >
+    Login
+  </Button>
+  <div class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
+    <div
+      class="absolute inset-0 bg-cover"
+      style="
+				background-image:
+					url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80);"
+    />
+    <div class="relative z-20 flex items-center text-lg font-medium">
+      <!-- <Command class="mr-2 h-6 w-6" /> -->
+      Acme Inc
+    </div>
+    <div class="relative z-20 mt-auto">
+      <blockquote class="space-y-2">
+        <p class="text-lg">
+          &ldquo;This library has saved me countless hours of work and helped me deliver stunning
+          designs to my clients faster than ever before. Highly recommended!&rdquo;
+        </p>
+        <footer class="text-sm">Sofia Davis</footer>
+      </blockquote>
+    </div>
+  </div>
+  <div class="lg:p-8">
+    <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+      <div class="flex flex-col space-y-2 text-center">
+        <h1 class="text-2xl font-semibold tracking-tight">Create an account</h1>
+        <p class="text-sm text-muted-foreground">Enter your email below to create your account</p>
+      </div>
+      <UserAuthForm />
+      <p class="px-8 text-center text-sm text-muted-foreground">
+        By clicking continue, you agree to our{' '}
+        <a href="/terms" class="underline underline-offset-4 hover:text-primary">
+          Terms of Service
+        </a>{' '}
+        and{' '}
+        <a href="/privacy" class="underline underline-offset-4 hover:text-primary">
+          Privacy Policy
+        </a>
+        .
+      </p>
+    </div>
+  </div>
+</div>