npm - create-tauri-ui - Versions diffs - 0.1.0 - Mend

create-tauri-ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (448) hide show

package/templates/next/src/app/examples/tasks/page.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import { promises as fs } from "fs"
+import path from "path"
+import { Metadata } from "next"
+import Image from "next/image"
+import { z } from "zod"
+import { columns } from "./components/columns"
+import { DataTable } from "./components/data-table"
+import { UserNav } from "./components/user-nav"
+import { taskSchema } from "./data/schema"
+export const metadata: Metadata = {
+  title: "Tasks",
+  description: "A task and issue tracker build using Tanstack Table.",
+}
+// Simulate a database read for tasks.
+async function getTasks() {
+  const data = await fs.readFile(
+    path.join(process.cwd(), "src/app/examples/tasks/data/tasks.json")
+  )
+  const tasks = JSON.parse(data.toString())
+  return z.array(taskSchema).parse(tasks)
+}
+export default async function TaskPage() {
+  const tasks = await getTasks()
+  return (
+    <div className=" flex-1 flex-col space-y-8 p-8 ">
+      <div className="flex items-center justify-between space-y-2">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">Welcome back!</h2>
+          <p className="text-muted-foreground">
+            Here&apos;s a list of your tasks for this month!
+          </p>
+        </div>
+        <div className="flex items-center space-x-2">
+          <UserNav />
+        </div>
+      </div>
+      <DataTable data={tasks} columns={columns} />
+    </div>
+  )
+}

package/templates/next/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,43 @@
+import "@/styles/globals.css"
+import { Metadata } from "next"
+import { fontMono, fontSans } from "@/lib/fonts"
+import { cn } from "@/lib/utils"
+import { Greeting } from "@/components/greeting"
+import { Menu } from "@/components/menu"
+import { StyleSwitcher } from "@/components/style-switcher"
+import { TailwindIndicator } from "@/components/tailwind-indicator"
+import { ThemeProvider } from "@/components/theme-provider"
+export default function MyApp({ children }) {
+  return (
+    <html lang="en" suppressHydrationWarning className="overflow-clip bg-black">
+      <head />
+      <body className="overflow-clip bg-transparent font-sans antialiased scrollbar-none">
+        <Greeting />
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <div className="h-screen overflow-clip">
+            <Menu />
+            <div
+              className={cn(
+                "h-screen overflow-auto border-t bg-background pb-8",
+                // "scrollbar-none"
+                "scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-md"
+              )}
+            >
+              {children}
+            </div>
+          </div>
+          <TailwindIndicator />
+        </ThemeProvider>
+        <StyleSwitcher />
+      </body>
+    </html>
+  )
+}
+export const metadata: Metadata = {
+  icons: {
+    shortcut: ["#"],
+  },
+}

package/templates/next/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import MusicPage from "./examples/music/page"
+export default function App() {
+  return <MusicPage />
+}

package/templates/next/src/assets/Inter.var.woff2 ADDED Viewed

Binary file

package/templates/next/src/assets/logo.png ADDED Viewed

Binary file

package/templates/next/src/components/examples/.eslintrc.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/eslintrc",
+  "rules": {
+    "react/no-unescaped-entities": "off"
+  }
+}

package/templates/next/src/components/examples/accordion/demo.tsx ADDED Viewed

@@ -0,0 +1,32 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+export function AccordionDemo() {
+  return (
+    <Accordion type="single" collapsible className="w-full">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that matches the other components'
+          aesthetic.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It's animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}

package/templates/next/src/components/examples/alert/demo.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+import { Terminal, Waves } from "lucide-react"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+export function AlertDemo() {
+  return (
+    <Alert>
+      <Terminal className="h-4 w-4" />
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>
+        You can add components to your app using the cli.
+      </AlertDescription>
+    </Alert>
+  )
+}

package/templates/next/src/components/examples/alert/destructive.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+import { AlertCircle, FileWarning, Terminal } from "lucide-react"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+export function AlertDestructive() {
+  return (
+    <Alert variant="destructive">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        Your session has expired. Please log in again.
+      </AlertDescription>
+    </Alert>
+  )
+}

package/templates/next/src/components/examples/alert-dialog/demo.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Button } from "@/components/ui/button"
+export function AlertDialogDemo() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Show Dialog</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/templates/next/src/components/examples/aspect-ratio/demo.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+import Image from "next/image"
+import { AspectRatio } from "@/components/ui/aspect-ratio"
+export function AspectRatioDemo() {
+  return (
+    <AspectRatio ratio={16 / 9} className="bg-muted">
+      <Image
+        src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+        alt="Photo by Drew Beamer"
+        fill
+        className="rounded-md object-cover"
+      />
+    </AspectRatio>
+  )
+}

package/templates/next/src/components/examples/avatar/demo.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+export function AvatarDemo() {
+  return (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  )
+}

package/templates/next/src/components/examples/badge/demo.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { Badge } from "@/components/ui/badge"
+export function BadgeDemo() {
+  return <Badge>Badge</Badge>
+}

package/templates/next/src/components/examples/badge/destructive.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { Badge } from "@/components/ui/badge"
+export function BadgeDestructive() {
+  return <Badge variant="destructive">Destructive</Badge>
+}

package/templates/next/src/components/examples/badge/outline.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { Badge } from "@/components/ui/badge"
+export function BadgeOutline() {
+  return <Badge variant="outline">Outline</Badge>
+}

package/templates/next/src/components/examples/badge/secondary.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { Badge } from "@/components/ui/badge"
+export function BadgeSecondary() {
+  return <Badge variant="secondary">Secondary</Badge>
+}

package/templates/next/src/components/examples/button/as-child.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+import { Button } from "@/components/ui/button"
+export function ButtonAsChild() {
+  return (
+    <Button>
+      {/*asChild*/}
+      <a href="/login">Login</a>
+    </Button>
+  )
+}

package/templates/next/src/components/examples/button/demo.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { Button } from "@/components/ui/button"
+export function ButtonDemo() {
+  return <Button>Button</Button>
+}

package/templates/next/src/components/examples/button/destructive.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { Button } from "@/components/ui/button"
+export function ButtonDestructive() {
+  return <Button variant="destructive">Destructive</Button>
+}

package/templates/next/src/components/examples/button/ghost.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { Button } from "@/components/ui/button"
+export function ButtonGhost() {
+  return <Button variant="ghost">Ghost</Button>
+}

package/templates/next/src/components/examples/button/link.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { Button } from "@/components/ui/button"
+export function ButtonLink() {
+  return <Button variant="link">Link</Button>
+}

package/templates/next/src/components/examples/button/loading.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+import { Loader2 } from "lucide-react"
+import { Button } from "@/components/ui/button"
+export function ButtonLoading() {
+  return (
+    <Button disabled>
+      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+      Please wait
+    </Button>
+  )
+}

package/templates/next/src/components/examples/button/outline.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { Button } from "@/components/ui/button"
+export function ButtonOutline() {
+  return <Button variant="outline">Outline</Button>
+}

package/templates/next/src/components/examples/button/secondary.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { Button } from "@/components/ui/button"
+export function ButtonSecondary() {
+  return <Button variant="secondary">Secondary</Button>
+}

package/templates/next/src/components/examples/button/with-icon.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import { Mail } from "lucide-react"
+import { Button } from "@/components/ui/button"
+export function ButtonWithIcon() {
+  return (
+    <Button>
+      <Mail className="mr-2 h-4 w-4" /> Login with Email
+    </Button>
+  )
+}

package/templates/next/src/components/examples/calendar/date-picker.tsx ADDED Viewed

@@ -0,0 +1,43 @@
+"use client"
+import * as React from "react"
+import { format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+export function CalendarDatePicker() {
+  const [date, setDate] = React.useState<Date>()
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[280px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}

package/templates/next/src/components/examples/calendar/date-range-picker.tsx ADDED Viewed

@@ -0,0 +1,65 @@
+"use client"
+import * as React from "react"
+import { addDays, format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+export function CalendarDateRangePicker({
+  className,
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2022, 0, 20),
+    to: addDays(new Date(2022, 0, 20), 20),
+  })
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant={"outline"}
+            className={cn(
+              "w-[300px] justify-start text-left font-normal",
+              !date && "text-muted-foreground"
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, "LLL dd, y")} -{" "}
+                  {format(date.to, "LLL dd, y")}
+                </>
+              ) : (
+                format(date.from, "LLL dd, y")
+              )
+            ) : (
+              <span>Pick a date</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={date?.from}
+            selected={date}
+            onSelect={setDate}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}

package/templates/next/src/components/examples/calendar/demo.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+"use client"
+import * as React from "react"
+import { Calendar } from "@/components/ui/calendar"
+export function CalendarDemo() {
+  const [date, setDate] = React.useState<Date | undefined>(new Date())
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-md border"
+    />
+  )
+}

package/templates/next/src/components/examples/calendar/react-hook-form.tsx ADDED Viewed

@@ -0,0 +1,101 @@
+"use client"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { toast } from "@/components/ui/use-toast"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/react-hook-form/form"
+const FormSchema = z.object({
+  dob: z.date({
+    required_error: "A date of birth is required.",
+  }),
+})
+export function CalendarReactHookForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="dob"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Date of birth</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant={"outline"}
+                      className={cn(
+                        "w-[240px] pl-3 text-left font-normal",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value ? (
+                        format(field.value, "PPP")
+                      ) : (
+                        <span>Pick a date</span>
+                      )}
+                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={field.value}
+                    onSelect={field.onChange}
+                    disabled={(date) =>
+                      date > new Date() || date < new Date("1900-01-01")
+                    }
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+              <FormDescription>
+                Your date of birth is used to calculate your age.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}

package/templates/next/src/components/examples/calendar/with-presets.tsx ADDED Viewed

@@ -0,0 +1,62 @@
+"use client"
+import * as React from "react"
+import { addDays, format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+export function CalendarDatePickerWithPresets() {
+  const [date, setDate] = React.useState<Date>()
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[280px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="flex w-auto flex-col space-y-2 p-2">
+        <Select
+          onValueChange={(value) =>
+            setDate(addDays(new Date(), parseInt(value)))
+          }
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent position="popper">
+            <SelectItem value="0">Today</SelectItem>
+            <SelectItem value="1">Tomorrow</SelectItem>
+            <SelectItem value="3">In 3 days</SelectItem>
+            <SelectItem value="7">In a week</SelectItem>
+          </SelectContent>
+        </Select>
+        <div className="rounded-md border">
+          <Calendar mode="single" selected={date} onSelect={setDate} />
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}