From 292e471aedd40bee9f3258083114a0ad84709087 Mon Sep 17 00:00:00 2001 From: Mehdi BHA Date: Sat, 30 Dec 2023 17:38:52 +0100 Subject: [PATCH] feat: shadcn preview --- .../app/(app)/playground/form-provider.tsx | 68 ++++++ apps/web/src/app/(app)/playground/layout.tsx | 9 +- apps/web/src/app/(app)/playground/page.tsx | 6 +- apps/web/src/app/(app)/playground/preview.tsx | 9 +- apps/web/src/app/layout.tsx | 22 +- .../shadcn-preview/dashboard/index.tsx | 2 +- .../shadcn-preview/dynamic-theme-wrapper.tsx | 138 +++++------ .../preview/shadcn-preview/shadcn-preview.tsx | 9 +- .../components/theme-form/copy-button.tsx | 119 ++++++++++ .../components/theme-form/library-select.tsx | 4 +- .../components/theme-form/theme-form.tsx | 216 +++++++++--------- .../components/theme-form/theme-select.tsx | 10 +- apps/web/src/styles/globals.css | 4 + apps/web/tsconfig.tsbuildinfo | 2 +- packages/ui/package.json | 2 + packages/ui/src/components/scroll-area.tsx | 46 ++++ packages/ui/src/components/tooltip.tsx | 29 +++ packages/ui/src/icons/index.tsx | 1 + packages/ui/src/index.tsx | 2 + packages/ui/src/styles/shared-globals.css | 2 +- yarn.lock | 4 +- 21 files changed, 485 insertions(+), 219 deletions(-) create mode 100644 apps/web/src/app/(app)/playground/form-provider.tsx create mode 100644 apps/web/src/modules/theme-previewer/components/theme-form/copy-button.tsx create mode 100644 packages/ui/src/components/scroll-area.tsx create mode 100644 packages/ui/src/components/tooltip.tsx diff --git a/apps/web/src/app/(app)/playground/form-provider.tsx b/apps/web/src/app/(app)/playground/form-provider.tsx new file mode 100644 index 0000000..60990b7 --- /dev/null +++ b/apps/web/src/app/(app)/playground/form-provider.tsx @@ -0,0 +1,68 @@ +"use client"; + +import React from "react"; +import { useForm } from "react-hook-form"; +import { Form } from "@palettify/ui"; + +const lightTheme = { + background: "0 0% 100%", + foreground: "222.2 47.4% 11.2%", + muted: "210 40% 96.1%", + mutedForeground: "215.4 16.3% 46.9%", + popover: "0 0% 100%", + popoverForeground: "222.2 47.4% 11.2%", + border: "214.3 31.8% 91.4%", + input: "214.3 31.8% 91.4%", + card: "0 0% 100%", + cardForeground: "222.2 47.4% 11.2%", + primary: "222.2 47.4% 11.2%", + primaryForeground: "210 40% 98%", + secondary: "210 40% 96.1%", + secondaryForeground: "222.2 47.4% 11.2%", + accent: "210 40% 96.1%", + accentForeground: "222.2 47.4% 11.2%", + destructive: "0 100% 50%", + destructiveForeground: "210 40% 98%", + ring: "215 20.2% 65.1%", + radius: "0.5rem", +}; + +const darkTheme = { + background: "224 71% 4%", + foreground: "213 31% 91%", + muted: "223 47% 11%", + mutedForeground: "215.4 16.3% 56.9%", + accent: "216 34% 17%", + accentForeground: "210 40% 98%", + popover: "224 71% 4%", + popoverForeground: "215 20.2% 65.1%", + border: "216 34% 17%", + input: "216 34% 17%", + card: "224 71% 4%", + cardForeground: "213 31% 91%", + primary: "210 40% 98%", + primaryForeground: "222.2 47.4% 1.2%", + secondary: "222.2 47.4% 11.2%", + secondaryForeground: "210 40% 98%", + destructive: "0 63% 31%", + destructiveForeground: "210 40% 98%", + ring: "216 34% 17%", + radius: "0.5rem", +}; + +interface FormProviderProps { + children: React.ReactNode; +} + +export const FormProvider = (props: FormProviderProps) => { + const { children } = props; + + const form = useForm({ + values: { + library: "shadcn", + lightTheme, + darkTheme, + }, + }); + return
{children}
; +}; diff --git a/apps/web/src/app/(app)/playground/layout.tsx b/apps/web/src/app/(app)/playground/layout.tsx index b5f60e2..5401ce0 100644 --- a/apps/web/src/app/(app)/playground/layout.tsx +++ b/apps/web/src/app/(app)/playground/layout.tsx @@ -1,16 +1,17 @@ import { ReactNode } from "react"; +import { FormProvider } from "./form-provider"; import { Preview } from "./preview"; interface DashboardLayoutProps { children: ReactNode; } -export default async function DashboardLayout(props: DashboardLayoutProps) { +export default function DashboardLayout(props: DashboardLayoutProps) { const { children } = props; return ( -
-
+ +
{children}
@@ -18,6 +19,6 @@ export default async function DashboardLayout(props: DashboardLayoutProps) {
-
+ ); } diff --git a/apps/web/src/app/(app)/playground/page.tsx b/apps/web/src/app/(app)/playground/page.tsx index b61e171..f6eea07 100644 --- a/apps/web/src/app/(app)/playground/page.tsx +++ b/apps/web/src/app/(app)/playground/page.tsx @@ -1,5 +1,9 @@ +import { useSearchParams } from "next/navigation"; import { UpdateSiteAppearance } from "@/modules/theme-previewer/components/theme-form"; -export default function PalettesPage() { +function PalettesPage() { + useSearchParams(); return ; } + +export default PalettesPage; diff --git a/apps/web/src/app/(app)/playground/preview.tsx b/apps/web/src/app/(app)/playground/preview.tsx index 2a379d2..59f0974 100644 --- a/apps/web/src/app/(app)/playground/preview.tsx +++ b/apps/web/src/app/(app)/playground/preview.tsx @@ -1,11 +1,13 @@ "use client"; import React from "react"; +import { useFormContext } from "react-hook-form"; import { Button, Maximize2Icon, Minimize2Icon, MonitorIcon, + ScrollArea, SmartphoneIcon, } from "@palettify/ui"; import { cn } from "@palettify/utils"; @@ -15,6 +17,7 @@ import { Preview as LibraryPreview } from "@/modules/theme-previewer/components/ export const Preview = () => { const [mobileView, setMobileView] = React.useState(false); const [fullScreen, setFullScreen] = React.useState(false); + const form = useFormContext(); useScrollLock(fullScreen); const handleChangeMobileView = () => { @@ -39,15 +42,15 @@ export const Preview = () => {
-
+
- +
-
+ ); diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 0084d75..8b76d0d 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -55,19 +55,15 @@ export default function RootLayout({ children }: { children: React.ReactNode }) - -
- {/* */} - }> -
- -
{children}
-