zyflow 0.6.4

package/.shadcn-admin-ref/src/context/theme-provider.tsx

@@ -0,0 +1,110 @@
+import { createContext, useContext, useEffect, useState, useMemo } from 'react'
+import { getCookie, setCookie, removeCookie } from '@/lib/cookies'
+
+type Theme = 'dark' | 'light' | 'system'
+type ResolvedTheme = Exclude<Theme, 'system'>
+
+const DEFAULT_THEME = 'system'
+const THEME_COOKIE_NAME = 'vite-ui-theme'
+const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 365 // 1 year
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+type ThemeProviderState = {
+  defaultTheme: Theme
+  resolvedTheme: ResolvedTheme
+  theme: Theme
+  setTheme: (theme: Theme) => void
+  resetTheme: () => void
+}
+
+const initialState: ThemeProviderState = {
+  defaultTheme: DEFAULT_THEME,
+  resolvedTheme: 'light',
+  theme: DEFAULT_THEME,
+  setTheme: () => null,
+  resetTheme: () => null,
+}
+
+const ThemeContext = createContext<ThemeProviderState>(initialState)
+
+export function ThemeProvider({
+  children,
+  defaultTheme = DEFAULT_THEME,
+  storageKey = THEME_COOKIE_NAME,
+  ...props
+}: ThemeProviderProps) {
+  const [theme, _setTheme] = useState<Theme>(
+    () => (getCookie(storageKey) as Theme) || defaultTheme
+  )
+
+  // Optimized: Memoize the resolved theme calculation to prevent unnecessary re-computations
+  const resolvedTheme = useMemo((): ResolvedTheme => {
+    if (theme === 'system') {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
+    }
+    return theme as ResolvedTheme
+  }, [theme])
+
+  useEffect(() => {
+    const root = window.document.documentElement
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
+    const applyTheme = (currentResolvedTheme: ResolvedTheme) => {
+      root.classList.remove('light', 'dark') // Remove existing theme classes
+      root.classList.add(currentResolvedTheme) // Add the new theme class
+    }
+
+    const handleChange = () => {
+      if (theme === 'system') {
+        const systemTheme = mediaQuery.matches ? 'dark' : 'light'
+        applyTheme(systemTheme)
+      }
+    }
+
+    applyTheme(resolvedTheme)
+
+    mediaQuery.addEventListener('change', handleChange)
+
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [theme, resolvedTheme])
+
+  const setTheme = (theme: Theme) => {
+    setCookie(storageKey, theme, THEME_COOKIE_MAX_AGE)
+    _setTheme(theme)
+  }
+
+  const resetTheme = () => {
+    removeCookie(storageKey)
+    _setTheme(DEFAULT_THEME)
+  }
+
+  const contextValue = {
+    defaultTheme,
+    resolvedTheme,
+    resetTheme,
+    theme,
+    setTheme,
+  }
+
+  return (
+    <ThemeContext value={contextValue} {...props}>
+      {children}
+    </ThemeContext>
+  )
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useTheme = () => {
+  const context = useContext(ThemeContext)
+
+  if (!context) throw new Error('useTheme must be used within a ThemeProvider')
+
+  return context
+}

package/.shadcn-admin-ref/src/features/apps/data/apps.tsx

@@ -0,0 +1,110 @@
+import {
+  IconTelegram,
+  IconNotion,
+  IconFigma,
+  IconTrello,
+  IconSlack,
+  IconZoom,
+  IconStripe,
+  IconGmail,
+  IconMedium,
+  IconSkype,
+  IconDocker,
+  IconGithub,
+  IconGitlab,
+  IconDiscord,
+  IconWhatsapp,
+} from '@/assets/brand-icons'
+
+export const apps = [
+  {
+    name: 'Telegram',
+    logo: <IconTelegram />,
+    connected: false,
+    desc: 'Connect with Telegram for real-time communication.',
+  },
+  {
+    name: 'Notion',
+    logo: <IconNotion />,
+    connected: true,
+    desc: 'Effortlessly sync Notion pages for seamless collaboration.',
+  },
+  {
+    name: 'Figma',
+    logo: <IconFigma />,
+    connected: true,
+    desc: 'View and collaborate on Figma designs in one place.',
+  },
+  {
+    name: 'Trello',
+    logo: <IconTrello />,
+    connected: false,
+    desc: 'Sync Trello cards for streamlined project management.',
+  },
+  {
+    name: 'Slack',
+    logo: <IconSlack />,
+    connected: false,
+    desc: 'Integrate Slack for efficient team communication',
+  },
+  {
+    name: 'Zoom',
+    logo: <IconZoom />,
+    connected: true,
+    desc: 'Host Zoom meetings directly from the dashboard.',
+  },
+  {
+    name: 'Stripe',
+    logo: <IconStripe />,
+    connected: false,
+    desc: 'Easily manage Stripe transactions and payments.',
+  },
+  {
+    name: 'Gmail',
+    logo: <IconGmail />,
+    connected: true,
+    desc: 'Access and manage Gmail messages effortlessly.',
+  },
+  {
+    name: 'Medium',
+    logo: <IconMedium />,
+    connected: false,
+    desc: 'Explore and share Medium stories on your dashboard.',
+  },
+  {
+    name: 'Skype',
+    logo: <IconSkype />,
+    connected: false,
+    desc: 'Connect with Skype contacts seamlessly.',
+  },
+  {
+    name: 'Docker',
+    logo: <IconDocker />,
+    connected: false,
+    desc: 'Effortlessly manage Docker containers on your dashboard.',
+  },
+  {
+    name: 'GitHub',
+    logo: <IconGithub />,
+    connected: false,
+    desc: 'Streamline code management with GitHub integration.',
+  },
+  {
+    name: 'GitLab',
+    logo: <IconGitlab />,
+    connected: false,
+    desc: 'Efficiently manage code projects with GitLab integration.',
+  },
+  {
+    name: 'Discord',
+    logo: <IconDiscord />,
+    connected: false,
+    desc: 'Connect with Discord for seamless team communication.',
+  },
+  {
+    name: 'WhatsApp',
+    logo: <IconWhatsapp />,
+    connected: false,
+    desc: 'Easily integrate WhatsApp for direct messaging.',
+  },
+]

package/.shadcn-admin-ref/src/features/apps/index.tsx

@@ -0,0 +1,179 @@
+import { type ChangeEvent, useState } from 'react'
+import { getRouteApi } from '@tanstack/react-router'
+import { SlidersHorizontal, ArrowUpAZ, ArrowDownAZ } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Separator } from '@/components/ui/separator'
+import { ConfigDrawer } from '@/components/config-drawer'
+import { Header } from '@/components/layout/header'
+import { Main } from '@/components/layout/main'
+import { ProfileDropdown } from '@/components/profile-dropdown'
+import { Search } from '@/components/search'
+import { ThemeSwitch } from '@/components/theme-switch'
+import { apps } from './data/apps'
+
+const route = getRouteApi('/_authenticated/apps/')
+
+type AppType = 'all' | 'connected' | 'notConnected'
+
+const appText = new Map<AppType, string>([
+  ['all', 'All Apps'],
+  ['connected', 'Connected'],
+  ['notConnected', 'Not Connected'],
+])
+
+export function Apps() {
+  const {
+    filter = '',
+    type = 'all',
+    sort: initSort = 'asc',
+  } = route.useSearch()
+  const navigate = route.useNavigate()
+
+  const [sort, setSort] = useState(initSort)
+  const [appType, setAppType] = useState(type)
+  const [searchTerm, setSearchTerm] = useState(filter)
+
+  const filteredApps = apps
+    .sort((a, b) =>
+      sort === 'asc'
+        ? a.name.localeCompare(b.name)
+        : b.name.localeCompare(a.name)
+    )
+    .filter((app) =>
+      appType === 'connected'
+        ? app.connected
+        : appType === 'notConnected'
+          ? !app.connected
+          : true
+    )
+    .filter((app) => app.name.toLowerCase().includes(searchTerm.toLowerCase()))
+
+  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value)
+    navigate({
+      search: (prev) => ({
+        ...prev,
+        filter: e.target.value || undefined,
+      }),
+    })
+  }
+
+  const handleTypeChange = (value: AppType) => {
+    setAppType(value)
+    navigate({
+      search: (prev) => ({
+        ...prev,
+        type: value === 'all' ? undefined : value,
+      }),
+    })
+  }
+
+  const handleSortChange = (sort: 'asc' | 'desc') => {
+    setSort(sort)
+    navigate({ search: (prev) => ({ ...prev, sort }) })
+  }
+
+  return (
+    <>
+      {/* ===== Top Heading ===== */}
+      <Header>
+        <Search />
+        <div className='ms-auto flex items-center gap-4'>
+          <ThemeSwitch />
+          <ConfigDrawer />
+          <ProfileDropdown />
+        </div>
+      </Header>
+
+      {/* ===== Content ===== */}
+      <Main fixed>
+        <div>
+          <h1 className='text-2xl font-bold tracking-tight'>
+            App Integrations
+          </h1>
+          <p className='text-muted-foreground'>
+            Here&apos;s a list of your apps for the integration!
+          </p>
+        </div>
+        <div className='my-4 flex items-end justify-between sm:my-0 sm:items-center'>
+          <div className='flex flex-col gap-4 sm:my-4 sm:flex-row'>
+            <Input
+              placeholder='Filter apps...'
+              className='h-9 w-40 lg:w-[250px]'
+              value={searchTerm}
+              onChange={handleSearch}
+            />
+            <Select value={appType} onValueChange={handleTypeChange}>
+              <SelectTrigger className='w-36'>
+                <SelectValue>{appText.get(appType)}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value='all'>All Apps</SelectItem>
+                <SelectItem value='connected'>Connected</SelectItem>
+                <SelectItem value='notConnected'>Not Connected</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <Select value={sort} onValueChange={handleSortChange}>
+            <SelectTrigger className='w-16'>
+              <SelectValue>
+                <SlidersHorizontal size={18} />
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent align='end'>
+              <SelectItem value='asc'>
+                <div className='flex items-center gap-4'>
+                  <ArrowUpAZ size={16} />
+                  <span>Ascending</span>
+                </div>
+              </SelectItem>
+              <SelectItem value='desc'>
+                <div className='flex items-center gap-4'>
+                  <ArrowDownAZ size={16} />
+                  <span>Descending</span>
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <Separator className='shadow-sm' />
+        <ul className='faded-bottom no-scrollbar grid gap-4 overflow-auto pt-4 pb-16 md:grid-cols-2 lg:grid-cols-3'>
+          {filteredApps.map((app) => (
+            <li
+              key={app.name}
+              className='rounded-lg border p-4 hover:shadow-md'
+            >
+              <div className='mb-8 flex items-center justify-between'>
+                <div
+                  className={`flex size-10 items-center justify-center rounded-lg bg-muted p-2`}
+                >
+                  {app.logo}
+                </div>
+                <Button
+                  variant='outline'
+                  size='sm'
+                  className={`${app.connected ? 'border border-blue-300 bg-blue-50 hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-950 dark:hover:bg-blue-900' : ''}`}
+                >
+                  {app.connected ? 'Connected' : 'Connect'}
+                </Button>
+              </div>
+              <div>
+                <h2 className='mb-1 font-semibold'>{app.name}</h2>
+                <p className='line-clamp-2 text-gray-500'>{app.desc}</p>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </Main>
+    </>
+  )
+}

package/.shadcn-admin-ref/src/features/auth/auth-layout.tsx

@@ -0,0 +1,19 @@
+import { Logo } from '@/assets/logo'
+
+type AuthLayoutProps = {
+  children: React.ReactNode
+}
+
+export function AuthLayout({ children }: AuthLayoutProps) {
+  return (
+    <div className='container grid h-svh max-w-none items-center justify-center'>
+      <div className='mx-auto flex w-full flex-col justify-center space-y-2 py-8 sm:w-[480px] sm:p-8'>
+        <div className='mb-4 flex items-center justify-center'>
+          <Logo className='me-2' />
+          <h1 className='text-xl font-medium'>Shadcn Admin</h1>
+        </div>
+        {children}
+      </div>
+    </div>
+  )
+}

package/.shadcn-admin-ref/src/features/auth/forgot-password/components/forgot-password-form.tsx

@@ -0,0 +1,82 @@
+import { useState } from 'react'
+import { z } from 'zod'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useNavigate } from '@tanstack/react-router'
+import { ArrowRight, Loader2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { sleep, cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+
+const formSchema = z.object({
+  email: z.email({
+    error: (iss) => (iss.input === '' ? 'Please enter your email' : undefined),
+  }),
+})
+
+export function ForgotPasswordForm({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLFormElement>) {
+  const navigate = useNavigate()
+  const [isLoading, setIsLoading] = useState(false)
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { email: '' },
+  })
+
+  function onSubmit(data: z.infer<typeof formSchema>) {
+    setIsLoading(true)
+    // eslint-disable-next-line no-console
+    console.log(data)
+
+    toast.promise(sleep(2000), {
+      loading: 'Sending email...',
+      success: () => {
+        setIsLoading(false)
+        form.reset()
+        navigate({ to: '/otp' })
+        return `Email sent to ${data.email}`
+      },
+      error: 'Error',
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className={cn('grid gap-2', className)}
+        {...props}
+      >
+        <FormField
+          control={form.control}
+          name='email'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input placeholder='name@example.com' {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button className='mt-2' disabled={isLoading}>
+          Continue
+          {isLoading ? <Loader2 className='animate-spin' /> : <ArrowRight />}
+        </Button>
+      </form>
+    </Form>
+  )
+}

package/.shadcn-admin-ref/src/features/auth/forgot-password/index.tsx

@@ -0,0 +1,44 @@
+import { Link } from '@tanstack/react-router'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { AuthLayout } from '../auth-layout'
+import { ForgotPasswordForm } from './components/forgot-password-form'
+
+export function ForgotPassword() {
+  return (
+    <AuthLayout>
+      <Card className='gap-4'>
+        <CardHeader>
+          <CardTitle className='text-lg tracking-tight'>
+            Forgot Password
+          </CardTitle>
+          <CardDescription>
+            Enter your registered email and <br /> we will send you a link to
+            reset your password.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ForgotPasswordForm />
+        </CardContent>
+        <CardFooter>
+          <p className='mx-auto px-8 text-center text-sm text-balance text-muted-foreground'>
+            Don't have an account?{' '}
+            <Link
+              to='/sign-up'
+              className='underline underline-offset-4 hover:text-primary'
+            >
+              Sign up
+            </Link>
+            .
+          </p>
+        </CardFooter>
+      </Card>
+    </AuthLayout>
+  )
+}

package/.shadcn-admin-ref/src/features/auth/otp/components/otp-form.tsx

@@ -0,0 +1,100 @@
+import { useState } from 'react'
+import { z } from 'zod'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useNavigate } from '@tanstack/react-router'
+import { showSubmittedData } from '@/lib/show-submitted-data'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+  InputOTPSeparator,
+} from '@/components/ui/input-otp'
+
+const formSchema = z.object({
+  otp: z
+    .string()
+    .min(6, 'Please enter the 6-digit code.')
+    .max(6, 'Please enter the 6-digit code.'),
+})
+
+type OtpFormProps = React.HTMLAttributes<HTMLFormElement>
+
+export function OtpForm({ className, ...props }: OtpFormProps) {
+  const navigate = useNavigate()
+  const [isLoading, setIsLoading] = useState(false)
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { otp: '' },
+  })
+
+  // eslint-disable-next-line react-hooks/incompatible-library
+  const otp = form.watch('otp')
+
+  function onSubmit(data: z.infer<typeof formSchema>) {
+    setIsLoading(true)
+    showSubmittedData(data)
+
+    setTimeout(() => {
+      setIsLoading(false)
+      navigate({ to: '/' })
+    }, 1000)
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className={cn('grid gap-2', className)}
+        {...props}
+      >
+        <FormField
+          control={form.control}
+          name='otp'
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className='sr-only'>One-Time Password</FormLabel>
+              <FormControl>
+                <InputOTP
+                  maxLength={6}
+                  {...field}
+                  containerClassName='justify-between sm:[&>[data-slot="input-otp-group"]>div]:w-12'
+                >
+                  <InputOTPGroup>
+                    <InputOTPSlot index={0} />
+                    <InputOTPSlot index={1} />
+                  </InputOTPGroup>
+                  <InputOTPSeparator />
+                  <InputOTPGroup>
+                    <InputOTPSlot index={2} />
+                    <InputOTPSlot index={3} />
+                  </InputOTPGroup>
+                  <InputOTPSeparator />
+                  <InputOTPGroup>
+                    <InputOTPSlot index={4} />
+                    <InputOTPSlot index={5} />
+                  </InputOTPGroup>
+                </InputOTP>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button className='mt-2' disabled={otp.length < 6 || isLoading}>
+          Verify
+        </Button>
+      </form>
+    </Form>
+  )
+}

package/.shadcn-admin-ref/src/features/auth/otp/index.tsx

@@ -0,0 +1,44 @@
+import { Link } from '@tanstack/react-router'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { AuthLayout } from '../auth-layout'
+import { OtpForm } from './components/otp-form'
+
+export function Otp() {
+  return (
+    <AuthLayout>
+      <Card className='gap-4'>
+        <CardHeader>
+          <CardTitle className='text-base tracking-tight'>
+            Two-factor Authentication
+          </CardTitle>
+          <CardDescription>
+            Please enter the authentication code. <br /> We have sent the
+            authentication code to your email.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <OtpForm />
+        </CardContent>
+        <CardFooter>
+          <p className='px-8 text-center text-sm text-muted-foreground'>
+            Haven't received it?{' '}
+            <Link
+              to='/sign-in'
+              className='underline underline-offset-4 hover:text-primary'
+            >
+              Resend a new code.
+            </Link>
+            .
+          </p>
+        </CardFooter>
+      </Card>
+    </AuthLayout>
+  )
+}