diff --git a/packages/react/src/Kitchensink.css b/packages/react/src/Kitchensink.css index 8ca200700..e69de29bb 100644 --- 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; -} \ No newline at end of file diff --git a/packages/react/src/Kitchensink.tsx b/packages/react/src/Kitchensink.tsx index 27222220b..bbaff7cf6 100644 --- 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 ( <> -
- - Vite logo - - - React logo - -
-

Vite + React + Tailwind + Typescript + Radix-UI/Themes

-
- -

- Edit src/App.tsx and save to test HMR -

+ This page is for testing components and styling. + + Regular spacing: +
+ +
-

- This class read-the-docs has been @apply'd to be text-sm -

This text is also small.
-

-

- Tailwind CSS Testing is tailwindcss -

- Large text -
-
- Small text -
-
Margin top 2 text that becomes smaller when hovered.
-

- - - - - - - + Color and variants: +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
); } diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx index 9a66fa578..5cb9e02a5 100644 --- 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 index f78468da6..bd03c442c 100644 --- 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 { } export function Sidebar({ className, id }: SidebarProps) { + + const [dark, toggle] = useAtom(darkAtom); + return (
@@ -85,6 +90,11 @@ export function Sidebar({ className, id }: SidebarProps) {
*/}
+
+ +
) diff --git a/packages/react/src/components/layout/useFrame.ts b/packages/react/src/hooks/useFrame.ts similarity index 100% rename from packages/react/src/components/layout/useFrame.ts rename to packages/react/src/hooks/useFrame.ts diff --git a/packages/react/src/hooks/useTheme.ts b/packages/react/src/hooks/useTheme.ts index 7693c10b1..6c1a1a8f7 100644 --- 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 index 95617847a..cbf052fb2 100644 --- 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; } } \ No newline at end of file diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx index 623e4a5b3..9eeda6a78 100644 --- 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:
Kitchen Sink
, + element: , }, { path: "/login", diff --git a/packages/react/src/shadcn/ui/button.tsx b/packages/react/src/shadcn/ui/button.tsx index 3ad6e25f4..a78d47c75 100644 --- 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: {