From e585ebfeab0c85a9f81d2ee952ec3369f5c19a48 Mon Sep 17 00:00:00 2001 From: Baptiste Augrain Date: Mon, 17 Apr 2023 15:06:43 +0200 Subject: [PATCH] feat: add previewer --- preview.sh | 46 + previewer/.editorconfig | 10 + previewer/.eslintignore | 5 + previewer/.eslintrc.json | 20 + previewer/.gitignore | 36 + previewer/.nvmrc | 1 + previewer/.prettierignore | 12 + previewer/components/icons.tsx | 8 + previewer/components/layout.tsx | 11 + previewer/components/ui/accordion.tsx | 63 + previewer/components/ui/alert-dialog.tsx | 156 + previewer/components/ui/aspect-ratio.tsx | 7 + previewer/components/ui/avatar.tsx | 50 + previewer/components/ui/button.tsx | 53 + previewer/components/ui/checkbox.tsx | 30 + previewer/components/ui/collapsible.tsx | 11 + previewer/components/ui/command.tsx | 158 + previewer/components/ui/context-menu.tsx | 200 + previewer/components/ui/dialog.tsx | 130 + previewer/components/ui/dropdown-menu.tsx | 203 + previewer/components/ui/hover-card.tsx | 29 + previewer/components/ui/input.tsx | 24 + previewer/components/ui/label.tsx | 23 + previewer/components/ui/menubar.tsx | 236 + previewer/components/ui/navigation-menu.tsx | 128 + previewer/components/ui/popover.tsx | 31 + .../components/ui/preview-app-icon.module.css | 44 + previewer/components/ui/preview-app-icon.tsx | 36 + previewer/components/ui/progress.tsx | 28 + previewer/components/ui/radio-group.tsx | 44 + previewer/components/ui/scroll-area.tsx | 48 + previewer/components/ui/select.tsx | 113 + previewer/components/ui/separator.tsx | 31 + previewer/components/ui/sheet.tsx | 234 + previewer/components/ui/slider.tsx | 28 + previewer/components/ui/switch.tsx | 29 + previewer/components/ui/tabs.tsx | 55 + previewer/components/ui/textarea.tsx | 24 + previewer/components/ui/toast.tsx | 128 + previewer/components/ui/toaster.tsx | 36 + previewer/components/ui/toggle.tsx | 45 + previewer/components/ui/tooltip.tsx | 31 + previewer/config/backgrounds.json | 18 + previewer/config/colors.json | 30 + previewer/config/platforms.json | 6 + previewer/config/shapes.json | 26 + previewer/config/site.ts | 18 + previewer/hooks/use-toast.ts | 188 + previewer/lib/utils.ts | 6 + previewer/next-env.d.ts | 5 + previewer/next.config.mjs | 14 + previewer/package.json | 74 + previewer/pages/_app.tsx | 26 + previewer/pages/_document.tsx | 15 + previewer/pages/index.tsx | 103 + previewer/postcss.config.js | 6 + previewer/prettier.config.js | 28 + previewer/public/icons | 1 + previewer/styles/globals.css | 3 + previewer/tailwind.config.js | 36 + previewer/tsconfig.json | 23 + previewer/types/nav.ts | 6 + previewer/yarn.lock | 3985 +++++++++++++++++ 63 files changed, 7252 insertions(+) create mode 100755 preview.sh create mode 100644 previewer/.editorconfig create mode 100644 previewer/.eslintignore create mode 100644 previewer/.eslintrc.json create mode 100644 previewer/.gitignore create mode 100644 previewer/.nvmrc create mode 100644 previewer/.prettierignore create mode 100644 previewer/components/icons.tsx create mode 100644 previewer/components/layout.tsx create mode 100644 previewer/components/ui/accordion.tsx create mode 100644 previewer/components/ui/alert-dialog.tsx create mode 100644 previewer/components/ui/aspect-ratio.tsx create mode 100644 previewer/components/ui/avatar.tsx create mode 100644 previewer/components/ui/button.tsx create mode 100644 previewer/components/ui/checkbox.tsx create mode 100644 previewer/components/ui/collapsible.tsx create mode 100644 previewer/components/ui/command.tsx create mode 100644 previewer/components/ui/context-menu.tsx create mode 100644 previewer/components/ui/dialog.tsx create mode 100644 previewer/components/ui/dropdown-menu.tsx create mode 100644 previewer/components/ui/hover-card.tsx create mode 100644 previewer/components/ui/input.tsx create mode 100644 previewer/components/ui/label.tsx create mode 100644 previewer/components/ui/menubar.tsx create mode 100644 previewer/components/ui/navigation-menu.tsx create mode 100644 previewer/components/ui/popover.tsx create mode 100644 previewer/components/ui/preview-app-icon.module.css create mode 100644 previewer/components/ui/preview-app-icon.tsx create mode 100644 previewer/components/ui/progress.tsx create mode 100644 previewer/components/ui/radio-group.tsx create mode 100644 previewer/components/ui/scroll-area.tsx create mode 100644 previewer/components/ui/select.tsx create mode 100644 previewer/components/ui/separator.tsx create mode 100644 previewer/components/ui/sheet.tsx create mode 100644 previewer/components/ui/slider.tsx create mode 100644 previewer/components/ui/switch.tsx create mode 100644 previewer/components/ui/tabs.tsx create mode 100644 previewer/components/ui/textarea.tsx create mode 100644 previewer/components/ui/toast.tsx create mode 100644 previewer/components/ui/toaster.tsx create mode 100644 previewer/components/ui/toggle.tsx create mode 100644 previewer/components/ui/tooltip.tsx create mode 100644 previewer/config/backgrounds.json create mode 100644 previewer/config/colors.json create mode 100644 previewer/config/platforms.json create mode 100644 previewer/config/shapes.json create mode 100644 previewer/config/site.ts create mode 100644 previewer/hooks/use-toast.ts create mode 100644 previewer/lib/utils.ts create mode 100644 previewer/next-env.d.ts create mode 100644 previewer/next.config.mjs create mode 100644 previewer/package.json create mode 100644 previewer/pages/_app.tsx create mode 100644 previewer/pages/_document.tsx create mode 100644 previewer/pages/index.tsx create mode 100644 previewer/postcss.config.js create mode 100644 previewer/prettier.config.js create mode 120000 previewer/public/icons create mode 100644 previewer/styles/globals.css create mode 100644 previewer/tailwind.config.js create mode 100644 previewer/tsconfig.json create mode 100644 previewer/types/nav.ts create mode 100644 previewer/yarn.lock diff --git a/preview.sh b/preview.sh new file mode 100755 index 0000000..1443910 --- /dev/null +++ b/preview.sh @@ -0,0 +1,46 @@ +#!/usr/bin/env bash + +# {{{ shapes +echo "[]" > "./previewer/config/shapes.json" + +for MY_PATH in "./templates/shapes/"* +do + MY_NAME="${MY_PATH/*\//}" + MY_NAME="${MY_NAME%.*}" + + echo "$( cat "./previewer/config/shapes.json" | jq --arg name "${MY_NAME}" '. += [{ + "value": $name, + "label": $name, + }]' )" > "./previewer/config/shapes.json" +done +# }}} + +# {{{ backgrounds +echo "[]" > "./previewer/config/backgrounds.json" + +for MY_PATH in "./templates/backgrounds/"* +do + MY_NAME="${MY_PATH/*\//}" + MY_NAME="${MY_NAME%.*}" + + echo "$( cat "./previewer/config/backgrounds.json" | jq --arg name "${MY_NAME}" '. += [{ + "value": $name, + "label": $name, + }]' )" > "./previewer/config/backgrounds.json" +done +# }}} + +# {{{ shapes +echo "[]" > "./previewer/config/colors.json" + +for MY_PATH in "./templates/colors/"* +do + MY_NAME="${MY_PATH/*\//}" + MY_NAME="${MY_NAME%.*}" + + echo "$( cat "./previewer/config/colors.json" | jq --arg name "${MY_NAME}" '. += [{ + "value": $name, + "label": $name, + }]' )" > "./previewer/config/colors.json" +done +# }}} diff --git a/previewer/.editorconfig b/previewer/.editorconfig new file mode 100644 index 0000000..9687e98 --- /dev/null +++ b/previewer/.editorconfig @@ -0,0 +1,10 @@ +# editorconfig.org +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_size = 4 +indent_style = tab +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/previewer/.eslintignore b/previewer/.eslintignore new file mode 100644 index 0000000..dc0f9d8 --- /dev/null +++ b/previewer/.eslintignore @@ -0,0 +1,5 @@ +dist/* +.cache +public +node_modules +*.esm.js diff --git a/previewer/.eslintrc.json b/previewer/.eslintrc.json new file mode 100644 index 0000000..45cf7c6 --- /dev/null +++ b/previewer/.eslintrc.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://json.schemastore.org/eslintrc", + "root": true, + "extends": [ + "next/core-web-vitals", + "prettier", + "plugin:tailwindcss/recommended" + ], + "plugins": ["tailwindcss"], + "rules": { + "@next/next/no-html-link-for-pages": "off", + "react/jsx-key": "off", + "tailwindcss/no-custom-classname": "off" + }, + "settings": { + "tailwindcss": { + "callees": ["cn"] + } + } +} diff --git a/previewer/.gitignore b/previewer/.gitignore new file mode 100644 index 0000000..ea0d26b --- /dev/null +++ b/previewer/.gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +node_modules +.pnp +.pnp.js + +# testing +coverage + +# next.js +.next/ +out/ +build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# turbo +.turbo + +.contentlayer +.env \ No newline at end of file diff --git a/previewer/.nvmrc b/previewer/.nvmrc new file mode 100644 index 0000000..f274881 --- /dev/null +++ b/previewer/.nvmrc @@ -0,0 +1 @@ +v16.16.0 diff --git a/previewer/.prettierignore b/previewer/.prettierignore new file mode 100644 index 0000000..2f73093 --- /dev/null +++ b/previewer/.prettierignore @@ -0,0 +1,12 @@ +cache +.cache +package.json +package-lock.json +public +CHANGELOG.md +.yarn +dist +node_modules +.next +build +.contentlayer \ No newline at end of file diff --git a/previewer/components/icons.tsx b/previewer/components/icons.tsx new file mode 100644 index 0000000..4e6b2cc --- /dev/null +++ b/previewer/components/icons.tsx @@ -0,0 +1,8 @@ +import { + type Icon as LucideIcon, +} from "lucide-react" + +export type Icon = LucideIcon + +export const Icons = { +} diff --git a/previewer/components/layout.tsx b/previewer/components/layout.tsx new file mode 100644 index 0000000..c905910 --- /dev/null +++ b/previewer/components/layout.tsx @@ -0,0 +1,11 @@ +interface LayoutProps { + children: React.ReactNode +} + +export function Layout({ children }: LayoutProps) { + return ( + <> +
{children}
+ + ) +} diff --git a/previewer/components/ui/accordion.tsx b/previewer/components/ui/accordion.tsx new file mode 100644 index 0000000..9dc85ae --- /dev/null +++ b/previewer/components/ui/accordion.tsx @@ -0,0 +1,63 @@ +"use client" + +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+
+)) +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/previewer/components/ui/alert-dialog.tsx b/previewer/components/ui/alert-dialog.tsx new file mode 100644 index 0000000..3c13f30 --- /dev/null +++ b/previewer/components/ui/alert-dialog.tsx @@ -0,0 +1,156 @@ +"use client" + +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@/lib/utils" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = ({ + className, + children, + ...props +}: AlertDialogPrimitive.AlertDialogPortalProps) => ( + +
+ {children} +
+
+) +AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/previewer/components/ui/aspect-ratio.tsx b/previewer/components/ui/aspect-ratio.tsx new file mode 100644 index 0000000..d6a5226 --- /dev/null +++ b/previewer/components/ui/aspect-ratio.tsx @@ -0,0 +1,7 @@ +"use client" + +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/previewer/components/ui/avatar.tsx b/previewer/components/ui/avatar.tsx new file mode 100644 index 0000000..f06eb32 --- /dev/null +++ b/previewer/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/previewer/components/ui/button.tsx b/previewer/components/ui/button.tsx new file mode 100644 index 0000000..46109da --- /dev/null +++ b/previewer/components/ui/button.tsx @@ -0,0 +1,53 @@ +import * as React from "react" +import { VariantProps, cva } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800", + { + variants: { + variant: { + default: + "bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-50 dark:text-slate-900", + destructive: + "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600", + outline: + "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100", + subtle: + "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100", + ghost: + "bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent", + link: "bg-transparent dark:bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent", + }, + size: { + default: "h-10 py-2 px-4", + sm: "h-9 px-2 rounded-md", + lg: "h-11 px-8 rounded-md", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps {} + +const Button = React.forwardRef( + ({ className, variant, size, ...props }, ref) => { + return ( +