getting started with the kitchensink

HolodexNet · Oct 8, 2023 · 820768e · 820768e
1 parent 23049b3
commit 820768e
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 118 deletions.
diff --git a/packages/react/src/Kitchensink.css b/packages/react/src/Kitchensink.css
@@ -1,46 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-  @apply text-sm;
-}

diff --git a/packages/react/src/Kitchensink.tsx b/packages/react/src/Kitchensink.tsx
@@ -1,71 +1,48 @@
 import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
-import { Flex, RadioGroup, Text } from "@radix-ui/themes";
+import { Button } from "./shadcn/ui/button";
 
 function App() {
   const [count, setCount] = useState(0);
 
   return (
     <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React + Tailwind + Typescript + Radix-UI/Themes</h1>
-      <div className="card">
-        <button
-          onClick={() => setCount((count) => count + 1)}
-          className="text-red-400"
-        >
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
+      This page is for testing components and styling.
+
+      Regular spacing:
+      <div className="space-x-2">
+        <Button>OK</Button>
+        <Button variant="outline" size="lg">Cancel</Button>
       </div>
-      <p className="read-the-docs">
-        This class <code>read-the-docs</code> has been <code>@apply</code>'d to be <code>text-sm</code>
-        <div className="text-sm">This text is also small.</div>
-      </p>
-      <p className="read-the-docs">
-        Tailwind CSS Testing is <code>tailwindcss</code>
-        <div className="text-lg">
-          Large text
-        </div>
-        <div className="text-sm">
-          Small text
-        </div>
-        <div className="mt-2 hover:text-sm border-2 border-black">Margin top 2 text that becomes smaller when hovered.</div>
-      </p>
 
-      <RadioGroup.Root defaultValue="1">
-        <Flex gap="1" direction="column">
-          <label>
-            <Flex gap="2" align="center">
-              <RadioGroup.Item value="1" />
-              <Text>Default</Text>
-            </Flex>
-          </label>
-          <label>
-            <Flex gap="2" align="center">
-              <RadioGroup.Item value="2" />
-              <Text>Comfortable</Text>
-            </Flex>
-          </label>
-          <label>
-            <Flex gap="2" align="center">
-              <RadioGroup.Item value="3" />
-              <Text>Compact</Text>
-            </Flex>
-          </label>
-        </Flex>
-      </RadioGroup.Root>
+      Color and variants:
+      <div className="grid grid-cols-5 items-start justify-start gap-4">
+        <Button>Default button</Button>
+        <Button variant="ghost">Ghost button</Button>
+        <Button variant="outline">Outline button</Button>
+        <Button variant="secondary">Secondary button</Button>
+        <Button variant="link">Link button</Button>
+        <Button size="sm">Default button</Button>
+        <Button size="sm" variant="ghost">Ghost button</Button>
+        <Button size="sm" variant="outline">Outline button</Button>
+        <Button size="sm" variant="secondary">Secondary button</Button>
+        <Button size="sm" variant="link">Link button</Button>
+        <Button size="lg">Default button</Button>
+        <Button size="lg" variant="ghost">Ghost button</Button>
+        <Button size="lg" variant="outline">Outline button</Button>
+        <Button size="lg" variant="secondary">Secondary button</Button>
+        <Button size="lg" variant="link">Link button</Button>
+        <Button size="icon"><div className="i-heroicons:academic-cap"></div></Button>
+        <Button size="icon" variant="ghost"><div className="i-heroicons:academic-cap"></div></Button>
+        <Button size="icon" variant="outline"><div className="i-heroicons:academic-cap"></div></Button>
+        <Button size="icon" variant="secondary"><div className="i-heroicons:academic-cap"></div></Button>
+        <Button size="icon" variant="link"><div className="i-heroicons:academic-cap"></div></Button>
+        <Button size="icon-lg"><div className="i-heroicons:academic-cap"></div></Button>
+        <Button size="icon-lg" variant="ghost"><div className="i-heroicons:academic-cap"></div></Button>
+        <Button size="icon-lg" variant="outline"><div className="i-heroicons:academic-cap"></div></Button>
+        <Button size="icon-lg" variant="secondary"><div className="i-heroicons:academic-cap"></div></Button>
+        <Button size="icon-lg" variant="link"><div className="i-heroicons:academic-cap"></div></Button>
+
+      </div>
     </>
   );
 }

diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx
@@ -1,10 +1,10 @@
 import './Frame.scss'
 import { RouterProvider } from 'react-router-dom'
-import router from '../../routes/router'
+import router from '@/routes/router'
 import { ReactPropTypes, useEffect } from 'react'
 import classNames from 'classnames'
 import { Sidebar } from '../sidebar/sidebar'
-import { isFloatingAtom, isMobileAtom, onResizeAtom, sidebarOpenAtom, sidebarShouldBeFullscreenAtom, toggleAtom } from './useFrame'
+import { isFloatingAtom, isMobileAtom, onResizeAtom, sidebarOpenAtom, sidebarShouldBeFullscreenAtom, toggleAtom } from '@/hooks/useFrame'
 import { useAtom } from 'jotai/react'
 import { darkAtom } from '@/hooks/useTheme'
 

diff --git a/packages/react/src/components/sidebar/sidebar.tsx b/packages/react/src/components/sidebar/sidebar.tsx
@@ -1,11 +1,16 @@
+import { darkAtom } from "@/hooks/useTheme"
 import { cn } from "@/lib/utils"
 import { Button } from "@/shadcn/ui/button"
+import { useAtom } from "jotai"
 // import { ScrollArea } from "@/shadcn/ui/scroll-area"
 
 interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export function Sidebar({ className, id }: SidebarProps) {
+
+  const [dark, toggle] = useAtom(darkAtom);
+
   return (
     <div className={cn("pb-12", className)} id={id}>
       <div className="space-y-4 py-4">
@@ -85,6 +90,11 @@ export function Sidebar({ className, id }: SidebarProps) {
             </div>
           </ScrollArea> */}
         </div>
+        <div className="relative bottom-0">
+          <Button size="icon" className="w-20 h-20" onClick={() => toggle(!dark)}>
+            <div className="i-heroicons:sun-20-solid w-20 h-20 text-4xl" />
+          </Button>
+        </div>
       </div>
     </div>
   )

diff --git a/...s/react/src/components/layout/useFrame.ts → packages/react/src/hooks/useFrame.ts b/...s/react/src/components/layout/useFrame.ts → packages/react/src/hooks/useFrame.ts
diff --git a/packages/react/src/hooks/useTheme.ts b/packages/react/src/hooks/useTheme.ts
@@ -2,10 +2,14 @@ import { useEffect } from "react";
 import { atomWithStorageBroadcast } from "@/lib/atomWithStorageBroadcast";
 import { useAtom } from "jotai";
 
+
+/** STORE **/
 export const baseAtom = atomWithStorageBroadcast('theme-base', 'mauve');
 export const primaryAtom = atomWithStorageBroadcast('theme-primary', 'blue');
 export const secondaryAtom = atomWithStorageBroadcast('theme-secondary', 'pink');
 export const darkAtom = atomWithStorageBroadcast('theme-dark', true);
+/** END STORE **/
+
 
 /**
  * Configures CSS variables using the body tag for all 1-12 levels
@@ -14,8 +18,6 @@ export const darkAtom = atomWithStorageBroadcast('theme-dark', true);
  * @param targetColor to be this target color
  * @param alpha with optionally the alpha palette
  */
-
-
 const setCssVariable = (property: string, targetColor: string, alpha: boolean = false) => {
   const A = alpha ? 'a' : ''
   for (let i = 1; i <= 12; i++) {
@@ -25,6 +27,11 @@ const setCssVariable = (property: string, targetColor: string, alpha: boolean =
 };
 
 
+/**
+ * Initializes the theme based on the current state. This function should only be called once
+ *
+ * @return {null} This function does not return any value.
+ */
 export function useThemeInit() {
 
   const [base] = useAtom(baseAtom)

diff --git a/packages/react/src/index.css b/packages/react/src/index.css
@@ -20,6 +20,6 @@
   }
 
   body {
-    @apply bg-base-1 text-base-11;
+    @apply bg-base-2 text-base-11;
   }
 }
diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx
@@ -1,3 +1,4 @@
+import Kitchensink from "@/Kitchensink";
 import { Outlet, createBrowserRouter, redirect } from "react-router-dom";
 
 const settings = {} as any; // TODO: replace with your actual settings store
@@ -13,7 +14,8 @@ const router = createBrowserRouter([
 
       if (orgInParam || settings.defaultOpen === "Home" || !site.jwtToken) {
         // Do the necessary redirect logic here
-        return redirect('/org/' + params.org)
+        // return redirect('/org/' + params.org)
+        return redirect('/kitchensink')
       } else {
         // Do the necessary redirect logic here
         return redirect('/favorites/')
@@ -95,7 +97,7 @@ const router = createBrowserRouter([
   },
   {
     path: "/kitchensink",
-    element: <div>Kitchen Sink</div>,
+    element: <Kitchensink />,
   },
   {
     path: "/login",

diff --git a/packages/react/src/shadcn/ui/button.tsx b/packages/react/src/shadcn/ui/button.tsx
@@ -10,19 +10,20 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary-2 text-base-12 hover:bg-primaryA-4",
+          "bg-primary-9 text-base-12 hover:bg-primaryA-4",
         outline:
           "border border-primary-7 bg-transparent hover:bg-primaryA-4 hover:border-primaryA-8",
         secondary:
-          "bg-secondary-2 text-base-12 hover:bg-secondaryA-4",
-        ghost: "hover:bg-primary-1 hover:text-base-12",
+          "bg-secondary-9 text-base-12 hover:bg-secondaryA-4",
+        ghost: "hover:bg-primary-4 hover:text-base-12",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 gap-2",
-        sm: "h-8 rounded-md px-2 text-xs gap-1.5",
+        default: "h-8 px-4 py-2 gap-2",
+        sm: "h-6 rounded-md px-1 text-xs gap-1.5",
         lg: "h-10 rounded-md px-6 text-lg gap-3 ",
-        icon: "h-9 w-9",
+        icon: "h-8 w-8",
+        "icon-lg": "h-10 w-10 text-lg",
       },
     },
     defaultVariants: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,6 @@ @@
       }
       body {
-        @apply bg-base-1 text-base-11;
+        @apply bg-base-2 text-base-11;
       }
     }