Tailwind Design System

.vscode/settings.json

@@ -3,6 +3,21 @@
   "git.ignoreLimitWarning": true,
   "deno.enable": true,
   "deno.unstable": true,
+  "material-icon-theme.folders.associations": {
+    "zipper.dev": "Client",
+    "blog": "Public",
+    "zipper.run": "Container",
+    "@zipper-ui": "mjml",
+    "@zipper-framework": "core",
+    "@zipper-types": "typescript",
+    "@zipper-utils": "Utils",
+    "deno-types": "Lib",
+    "tsconfig": "Less",
+    "connectors": "Connection"
+  },
+  "material-icon-theme.files.associations": {
+    ".ctirc": "verilog"
+  },
   "deno.enablePaths": [
     "./packages/@zipper-framework/bin",
     "./packages/@zipper-framework/deno",

apps/zipper.dev/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

apps/zipper.dev/package.json

@@ -63,6 +63,7 @@
     "@nivo/bar": "^0.84.0",
     "@nivo/line": "^0.84.0",
     "@prisma/client": "^5.4.2",
+    "@radix-ui/react-icons": "^1.3.0",
     "@react-email/components": "^0.0.7",
     "@sentry/nextjs": "^7.51.0",
     "@tanstack/react-query": "^4.35.3",
@@ -84,10 +85,13 @@
     "@zipper/ui": "*",
     "@zipper/utils": "*",
     "ai": "^2.1.14",
+    "autoprefixer": "^10.4.16",
     "bcryptjs": "^2.4.3",
     "boring-avatars": "^1.7.0",
     "bowser": "^2.11.0",
     "bullmq": "^3.2.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
     "comment-parser": "^1.3.1",
     "cors": "^2.8.5",
     "cron-parser": "^4.6.0",
@@ -137,6 +141,9 @@
     "start-server-and-test": "^1.12.0",
     "strip-comments": "^2.0.1",
     "superjson": "^1.7.4",
+    "tailwind-merge": "^2.1.0",
+    "tailwindcss": "^3.3.6",
+    "tailwindcss-animate": "^1.0.7",
     "ts-morph": "^17.0.1",
     "typescript": "4.9.5",
     "uploadthing": "^6.0.4",
@@ -165,6 +172,7 @@
     "@types/strip-comments": "^2.0.4",
     "@typescript-eslint/eslint-plugin": "^4.30.0",
     "@typescript-eslint/parser": "^5.14.0",
+    "autoprefixer": "^10.4.16",
     "eslint": "^7.32.0",
     "eslint-config-next": "^12.0.0",
     "eslint-config-prettier": "^8.3.0",
@@ -175,9 +183,11 @@
     "jest-mock-extended": "^3.0.1",
     "jscodeshift": "^0.15.1",
     "nodemon": "^2.0.22",
+    "postcss": "^8.4.32",
     "prettier": "^2.8.8",
     "prisma": "^5.4.2",
     "raw-loader": "^4.0.2",
+    "tailwindcss": "^3.3.6",
     "ts-jest": "^29.0.5",
     "ts-node": "^10.9.1"
   },

apps/zipper.dev/postcss.config.js

@@ -0,0 +1,8 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+module.exports = config;

apps/zipper.dev/src/components/accordion.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '../utils/cn';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b', className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 font-medium font-mono transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+      className,
+    )}
+    {...props}
+  >
+    <div className="pb-4 pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

apps/zipper.dev/src/components/app-dir/auth/profile-button.tsx

@@ -0,0 +1,175 @@
+'use client';
+import { Dropdown, Button, Avatar, Show } from '@zipper/ui';
+import React, { ReactNode, useCallback, useState } from 'react';
+import { signIn, signOut } from 'next-auth/react';
+import { SignedIn, SignedOut } from './user-status';
+import UserProfile from '../../auth/userProfile';
+import { useUser } from '~/hooks/use-user';
+import { useTheme } from 'next-themes';
+import { FeedbackModal as FeedbackDialog } from '../../auth/feedback-modal';
+import Link from 'next/link';
+import {
+  useDisclosure,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  useColorMode,
+} from '@chakra-ui/react';
+import {
+  PiGearDuotone,
+  PiMoonDuotone,
+  PiSunDuotone,
+  PiMegaphoneSimpleDuotone,
+  PiLifebuoyDuotone,
+  PiSignOutDuotone,
+} from 'react-icons/pi';
+
+const SettingsDialog: React.FC<{ isOpen: boolean; onClose: () => void }> = (
+  settingsModal,
+) => {
+  return (
+    <Modal
+      isOpen={settingsModal.isOpen}
+      onClose={settingsModal.onClose}
+      size="xl"
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>User Settings</ModalHeader>
+        <ModalCloseButton />
+        <main className="flex flex-col gap-8 px-6">
+          <UserProfile />
+        </main>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+const ProfileAvatar: React.FC = () => {
+  const { user } = useUser();
+
+  return (
+    <Avatar>
+      <Avatar.Image src={user?.image as string} alt={user?.name as string} />
+      <Avatar.Fallback>{user?.name?.charAt(0)}</Avatar.Fallback>
+    </Avatar>
+  );
+};
+
+const ProfileMenu = ({
+  trigger,
+  showExtraOptions,
+}: {
+  trigger: ReactNode;
+  showExtraOptions?: boolean;
+}) => {
+  const { setColorMode: setChakraColorMode } = useColorMode();
+  const { setTheme, theme } = useTheme();
+
+  const feedbackDialog = useDisclosure();
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+
+  const onChangeSettingsOpen = () => setIsSettingsOpen(!isSettingsOpen);
+  const onCloseSettings = () => setIsSettingsOpen(false);
+
+  const toggleColorMode = useCallback(() => {
+    const color = theme === 'dark' ? 'light' : 'dark';
+    /** TO-DO: remove it when chakra's gone. */
+    return setTheme(color), setChakraColorMode(color);
+  }, [setChakraColorMode, setTheme, theme]);
+
+  return (
+    <React.Fragment>
+      <Dropdown.Root>
+        <Dropdown.Trigger>{trigger}</Dropdown.Trigger>
+        <Dropdown.Content align="end">
+          <Dropdown.Label>Settings</Dropdown.Label>
+          <Dropdown.Separator />
+          <Dropdown.Item
+            onClick={onChangeSettingsOpen}
+            className="flex items-center gap-3 cursor-pointer"
+          >
+            <PiGearDuotone />
+            Manage profile
+          </Dropdown.Item>
+          <Dropdown.Item
+            onClick={toggleColorMode}
+            className="flex items-center gap-3 cursor-pointer"
+          >
+            <Show
+              when={theme === 'dark'}
+              fallback={<PiMoonDuotone color="DarkGoldenRod" />}
+            >
+              <PiSunDuotone color="DarkGoldenRod" />
+            </Show>
+            Switch to {theme === 'dark' ? 'light' : 'dark'} mode
+          </Dropdown.Item>
+
+          <Show when={showExtraOptions === true}>
+            <Dropdown.Item
+              onClick={feedbackDialog.onOpen}
+              className="flex items-center gap-3 cursor-pointer"
+            >
+              <PiMegaphoneSimpleDuotone />
+              Submit Feedback
+            </Dropdown.Item>
+            <Dropdown.Item
+              asChild
+              className="flex items-center gap-3 cursor-pointer"
+            >
+              <Link href="/docs">
+                <React.Fragment>
+                  <PiLifebuoyDuotone />
+                  View Docs
+                </React.Fragment>
+              </Link>
+            </Dropdown.Item>
+          </Show>
+
+          <Dropdown.Separator />
+          <Dropdown.Item
+            onClick={() => signOut()}
+            className="flex items-center gap-3 cursor-pointer"
+          >
+            <PiSignOutDuotone className="text-brand-red" />
+            Sign out
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+
+      {/** TO-DO: refactor to shadcn dialgos */}
+      <FeedbackDialog {...feedbackDialog} />
+      <SettingsDialog isOpen={isSettingsOpen} onClose={onCloseSettings} />
+    </React.Fragment>
+  );
+};
+
+interface ProfileButtonOptions {
+  showExtraOptions?: boolean;
+}
+
+export const ProfileButton: React.FC<ProfileButtonOptions> = ({
+  showExtraOptions = false,
+}) => {
+  return (
+    <React.Fragment>
+      <SignedIn>
+        <ProfileMenu
+          trigger={<ProfileAvatar />}
+          showExtraOptions={showExtraOptions}
+        />
+      </SignedIn>
+      <SignedOut>
+        <Button
+          onClick={() => {
+            signIn();
+          }}
+        >
+          Sign In
+        </Button>
+      </SignedOut>
+    </React.Fragment>
+  );
+};

apps/zipper.dev/src/components/app-dir/auth/user-status.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { useUser } from '~/hooks/use-user';
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+export const SignedIn: FC<Props> = (props) => {
+  const { isSignedIn } = useUser();
+
+  return <>{isSignedIn && <>{props.children}</>}</>;
+};
+
+export const SignedOut: FC<Props> = (props) => {
+  const { isSignedIn, isLoaded } = useUser();
+
+  return <>{isLoaded && !isSignedIn && <>{props.children}</>}</>;
+};