[chore]: merge upstream updates

foxgis · Jul 24, 2024 · 0efa13b · 0efa13b
2 parents 43622a3 + 43240e0
commit 0efa13b
Show file tree

Hide file tree

Showing 227 changed files with 3,059 additions and 3,150 deletions.
diff --git a/.github/workflows/typecheck.yml b/.github/workflows/typecheck.yml
@@ -1,4 +1,4 @@
-name: Check code with TypeScript
+name: Check code with TypeScript & Lint
 
 on:
   pull_request:
@@ -30,3 +30,6 @@ jobs:
 
       - name: Run TypeScript type check
         run: npx turbo run typecheck
+
+      - name: Run Lint
+        run: npx turbo run lint
diff --git a/apps/design-system/__registry__/index.tsx b/apps/design-system/__registry__/index.tsx
@@ -1160,6 +1160,39 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
+    "sonner-demo": {
+      name: "sonner-demo",
+      type: "components:example",
+      registryDependencies: ["sonner"],
+      component: React.lazy(() => import("@/registry/default/example/sonner-demo")),
+      source: "",
+      files: ["registry/default/example/sonner-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "sonner-types": {
+      name: "sonner-types",
+      type: "components:example",
+      registryDependencies: ["sonner"],
+      component: React.lazy(() => import("@/registry/default/example/sonner-types")),
+      source: "",
+      files: ["registry/default/example/sonner-types.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "sonner-upload": {
+      name: "sonner-upload",
+      type: "components:example",
+      registryDependencies: ["sonner"],
+      component: React.lazy(() => import("@/registry/default/example/sonner-upload")),
+      source: "",
+      files: ["registry/default/example/sonner-upload.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "switch-demo": {
       name: "switch-demo",
       type: "components:example",

diff --git a/apps/design-system/app/SonnerToast.tsx b/apps/design-system/app/SonnerToast.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import { useConfig } from '@/hooks/use-config'
+import { SonnerToaster as Toaster } from 'ui'
+
+export function SonnerToaster() {
+  const [config] = useConfig()
+  return <Toaster position={config.sonnerPosition} expand={config.sonnerExpand} />
+}
diff --git a/apps/design-system/app/layout.tsx b/apps/design-system/app/layout.tsx
@@ -2,6 +2,8 @@ import '@/styles/globals.css'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import { ThemeProvider } from './Providers'
+import { Toaster } from 'ui'
+import { SonnerToaster } from './SonnerToast'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -15,22 +17,16 @@ interface RootLayoutProps {
 }
 
 export default async function Layout({ children }: RootLayoutProps) {
-  // console.log('Root Layout mounted or re-rendered')
-
   return (
-    <html
-      // className="dark"
-      lang="en"
-      // data-theme="dark"
-      // style={{ colorScheme: 'dark' }}
-      suppressHydrationWarning
-    >
+    <html lang="en" suppressHydrationWarning>
       <head />
       <body className={inter.className}>
         <ThemeProvider themes={['dark', 'light', 'deep-dark']} defaultTheme="system" enableSystem>
           <div vaul-drawer-wrapper="">
             <div className="relative flex min-h-screen flex-col bg-background">{children}</div>
           </div>
+          <Toaster />
+          <SonnerToaster />
         </ThemeProvider>
       </body>
     </html>

diff --git a/apps/design-system/components/mdx-components.tsx b/apps/design-system/components/mdx-components.tsx
@@ -44,6 +44,8 @@ import { Icons } from '@/components/icons'
 import { ThemeSettings } from '@/components/theme-settings'
 import { CodeFragment } from '@/components/code-fragment'
 import { Admonition } from 'ui-patterns/admonition'
+import { SonnerExpandConfig } from './sonner-expand-config'
+import { SonnerPositionConfig } from './sonner-expand-position'
 
 const components = {
   Accordion,
@@ -273,6 +275,8 @@ const components = {
   ThemeSettings,
   CodeFragment,
   Admonition,
+  SonnerExpandConfig,
+  SonnerPositionConfig,
 }
 
 interface MdxProps {

diff --git a/apps/design-system/components/sonner-expand-config.tsx b/apps/design-system/components/sonner-expand-config.tsx
@@ -0,0 +1,37 @@
+import { useConfig } from '@/hooks/use-config'
+import { Switch } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+function SonnerExpandConfig() {
+  const [config, setConfig] = useConfig()
+
+  return (
+    <div className="px-5 py-5 border rounded-lg my-2 bg-surface-75">
+      <form>
+        <FormItemLayout
+          name="sonnerExpand"
+          id="sonnerExpand"
+          isReactForm={false}
+          label="Use expand prop"
+          description="You will need to fire a few Sonner toasts first"
+          layout="flex"
+        >
+          <Switch
+            name="sonnerExpand"
+            id="sonnerExpand"
+            size="large"
+            checked={config.sonnerExpand}
+            onCheckedChange={(e) =>
+              setConfig({
+                ...config,
+                sonnerExpand: e,
+              })
+            }
+          />
+        </FormItemLayout>
+      </form>
+    </div>
+  )
+}
+
+export { SonnerExpandConfig }
diff --git a/apps/design-system/components/sonner-expand-position.tsx b/apps/design-system/components/sonner-expand-position.tsx
@@ -0,0 +1,70 @@
+import { useConfig } from '@/hooks/use-config'
+import { ComponentProps } from 'react'
+import {
+  SelectContent_Shadcn_,
+  SelectGroup_Shadcn_,
+  SelectItem_Shadcn_,
+  SelectLabel_Shadcn_,
+  SelectTrigger_Shadcn_,
+  SelectValue_Shadcn_,
+  Select_Shadcn_,
+  SonnerToaster,
+} from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+function SonnerPositionConfig() {
+  const [config, setConfig] = useConfig()
+
+  type Position = NonNullable<ComponentProps<typeof SonnerToaster>['position']>
+
+  const positions: Position[] = [
+    'top-left',
+    'top-right',
+    'bottom-left',
+    'bottom-right',
+    'top-center',
+    'bottom-center',
+  ]
+
+  return (
+    <div className="px-5 py-5 border rounded-lg my-2 bg-surface-75">
+      <form>
+        <FormItemLayout
+          name="sonnerExpand"
+          id="sonnerExpand"
+          isReactForm={false}
+          label="Use position prop"
+          description="You will need to fire a few Sonner toasts first"
+          layout="flex"
+        >
+          <Select_Shadcn_
+            value={config.sonnerPosition}
+            defaultValue={config.sonnerPosition}
+            onValueChange={(e: Position) => {
+              setConfig({
+                ...config,
+                sonnerPosition: e,
+              })
+            }}
+          >
+            <SelectTrigger_Shadcn_ className="w-[180px]">
+              <SelectValue_Shadcn_ placeholder="Select a position" />
+            </SelectTrigger_Shadcn_>
+            <SelectContent_Shadcn_>
+              <SelectGroup_Shadcn_>
+                <SelectLabel_Shadcn_>Positions available</SelectLabel_Shadcn_>
+                {positions.map((position) => (
+                  <SelectItem_Shadcn_ key={position} value={position}>
+                    {position}
+                  </SelectItem_Shadcn_>
+                ))}
+              </SelectGroup_Shadcn_>
+            </SelectContent_Shadcn_>
+          </Select_Shadcn_>
+        </FormItemLayout>
+      </form>
+    </div>
+  )
+}
+
+export { SonnerPositionConfig }
diff --git a/apps/design-system/content/docs/components/sonner.mdx b/apps/design-system/content/docs/components/sonner.mdx
@@ -16,22 +16,18 @@ Sonner is built and maintained by [emilkowalski\_](https://twitter.com/emilkowal
 
 ## Installation
 
-<Tabs defaultValue="cli">
-
-<TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
-
 <Steps>
 
-<Step>Run the following command:</Step>
+<Step>Install the following dependencies:</Step>
 
 ```bash
-npx shadcn-ui@latest add sonner
+npm install sonner next-themes
 ```
 
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="sonner" />
+
 <Step>Add the Toaster component</Step>
 
 ```tsx title="app/layout.tsx" {1,9}
@@ -52,52 +48,50 @@ export default function RootLayout({ children }) {
 
 </Steps>
 
-</TabsContent>
+## Usage
+
+```tsx
+import { toast } from 'sonner'
+```
 
-<TabsContent value="manual">
+```tsx
+toast('Event has been created.')
+```
 
-<Steps>
+## Expand
 
-<Step>Install the following dependencies:</Step>
+You can change the amount of toasts visible through the visibleToasts prop.
 
-```bash
-npm install sonner next-themes
+```tsx
+<Toaster expand={true | false} />
 ```
 
-<Step>Copy and paste the following code into your project.</Step>
+You can use the Input below to try it out.
 
-<ComponentSource name="sonner" />
+<SonnerExpandConfig />
 
-<Step>Add the Toaster component</Step>
+## Position
 
-```tsx title="app/layout.tsx" {1,9}
-import { Toaster } from '@/components/ui/sonner'
+You can change the amount of toasts visible through the visibleToasts prop.
 
-export default function RootLayout({ children }) {
-  return (
-    <html lang="en">
-      <head />
-      <body>
-        <main>{children}</main>
-        <Toaster />
-      </body>
-    </html>
-  )
-}
+```tsx
+<Toaster
+  position={
+    'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center'
+  }
+/>
 ```
 
-</Steps>
+You can use the Input below to try it out.
 
-</TabsContent>
+<SonnerPositionConfig />
 
-</Tabs>
+## Types
 
-## Usage
+You can customize the type of toast you want to render, and pass an options object as the second argument.
 
-```tsx
-import { toast } from 'sonner'
-```
+<ComponentPreview name="sonner-types" />
 
-```tsx
-toast('Event has been created.')
-```
+## Upload example
+
+<ComponentPreview name="sonner-upload" />
diff --git a/apps/design-system/hooks/use-config.ts b/apps/design-system/hooks/use-config.ts
@@ -1,22 +1,27 @@
+import { Style } from '@/registry/styles'
+import { Theme } from '@/registry/themes'
 import { useAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
-
+import { ComponentProps } from 'react'
+import { SonnerToaster } from 'ui'
 // import { BackendProvider } from '@/registry/backend-provider'
-import { Style } from '@/registry/styles'
-import { Theme } from '@/registry/themes'
 
 type Config = {
   style: Style['name']
   theme: Theme['name']
   radius: number
+  sonnerPosition: ComponentProps<typeof SonnerToaster>['position']
+  sonnerExpand: boolean
   // backendProvider: BackendProvider['name'] | undefined
 }
 
 const configAtom = atomWithStorage<Config>('config', {
   style: 'default',
-  // backendProvider: 'nextjs-auth',
   theme: 'zinc',
   radius: 0.5,
+  sonnerPosition: 'bottom-right',
+  sonnerExpand: false,
+  // backendProvider: 'nextjs-auth',
 })
 
 export function useConfig() {

diff --git a/apps/design-system/registry/default/example/sonner-demo.tsx b/apps/design-system/registry/default/example/sonner-demo.tsx
@@ -0,0 +1,21 @@
+import { toast } from 'sonner'
+import { Button } from 'ui'
+
+export default function SonnerDemo() {
+  return (
+    <Button
+      type="default"
+      onClick={() =>
+        toast('Event has been created', {
+          description: 'Sunday, December 03, 2023 at 9:00 AM',
+          cancel: {
+            label: 'Undo',
+            onClick: () => console.log('Undo'),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  )
+}