From 61916ce7ce978433d2ab40a25dd52ff792e17f87 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Wed, 26 Feb 2025 17:27:02 -0700 Subject: [PATCH] code card update Update toaster naming Update BusterNotifications.tsx Update BusterChart.tsx remove theme detector --- web/src/components/ui/buttons/Button.tsx | 6 +- web/src/components/ui/card/CardBase.tsx | 3 +- .../components/ui/card/CodeCard.stories.tsx | 91 +++++++++++++++++++ web/src/components/ui/card/CodeCard.tsx | 61 ++++--------- web/src/components/ui/charts/BusterChart.tsx | 2 +- .../ui/loaders/CircleSpinnerLoader.tsx | 2 - .../loaders/CircleSpinnerLoaderContainer.tsx | 5 +- ...oaster.stories.tsx => Toaster.stories.tsx} | 7 +- .../toaster/{AppToaster.tsx => Toaster.tsx} | 20 ++-- web/src/components/ui/toaster/index.ts | 2 +- .../BusterNotifications.tsx | 32 +------ web/src/hooks/dom/index.ts | 1 - web/src/hooks/dom/useThemeDetector.ts | 57 ------------ 13 files changed, 131 insertions(+), 158 deletions(-) create mode 100644 web/src/components/ui/card/CodeCard.stories.tsx rename web/src/components/ui/toaster/{AppToaster.stories.tsx => Toaster.stories.tsx} (93%) rename web/src/components/ui/toaster/{AppToaster.tsx => Toaster.tsx} (60%) delete mode 100644 web/src/hooks/dom/useThemeDetector.ts diff --git a/web/src/components/ui/buttons/Button.tsx b/web/src/components/ui/buttons/Button.tsx index 952eadfe9..fff141dcc 100644 --- a/web/src/components/ui/buttons/Button.tsx +++ b/web/src/components/ui/buttons/Button.tsx @@ -30,9 +30,9 @@ const roundingVariants = { }; const sizeVariants = { - default: 'h-7', - tall: 'h-8', - small: 'h-6' + default: 'h-6', + tall: 'h-7', + small: 'h-5' }; export const buttonVariants = cva( diff --git a/web/src/components/ui/card/CardBase.tsx b/web/src/components/ui/card/CardBase.tsx index 569c38d8d..e857306ab 100644 --- a/web/src/components/ui/card/CardBase.tsx +++ b/web/src/components/ui/card/CardBase.tsx @@ -5,6 +5,7 @@ import { cn } from '@/lib/utils'; const sizeVariants = cva('', { variants: { size: { + xsmall: 'h-[32px] min-h-[32px] px-2.5', small: 'p-2.5', default: 'p-4' } @@ -19,7 +20,7 @@ const Card = React.forwardRef = { + title: 'Base/Cards/CodeCard', + component: CodeCard, + parameters: { + layout: 'centered' + }, + tags: ['autodocs'], + decorators: [ + (Story) => ( +
+ +
+ ) + ] +}; + +export default meta; +type Story = StoryObj; + +const sampleCode = `function helloWorld() { + console.log('Hello, World!'); +}`; + +const longCode = `import React from 'react'; +import { Button } from 'antd'; + +export const MyComponent = () => { + const handleClick = () => { + console.log('Button clicked!'); + }; + + return ( +
+

Hello World

+ +
+ ); +};`; + +export const Default: Story = { + args: { + code: sampleCode, + language: 'javascript', + fileName: 'example.js', + className: 'w-[500px] h-[300px]' + } +}; + +export const ReadOnly: Story = { + args: { + code: sampleCode, + language: 'javascript', + fileName: 'readonly.js', + readOnly: true, + className: 'w-[500px] h-[300px]' + } +}; + +export const LargerEditor: Story = { + args: { + code: longCode, + language: 'typescript', + fileName: 'MyComponent.tsx', + className: 'w-[600px] h-[400px]' + } +}; + +export const NoButtons: Story = { + args: { + code: sampleCode, + language: 'javascript', + fileName: 'no-buttons.js', + buttons: false, + className: 'w-[500px] h-[300px]' + } +}; + +export const CustomButtons: Story = { + args: { + code: sampleCode, + language: 'javascript', + fileName: 'custom-buttons.js', + buttons:
Custom Buttons
, + className: 'w-[500px] h-[300px]' + } +}; diff --git a/web/src/components/ui/card/CodeCard.tsx b/web/src/components/ui/card/CodeCard.tsx index c96876632..7b82708db 100644 --- a/web/src/components/ui/card/CodeCard.tsx +++ b/web/src/components/ui/card/CodeCard.tsx @@ -1,11 +1,11 @@ -import { createStyles } from 'antd-style'; import React from 'react'; -import { Text } from '@/components/ui'; -import { AppCodeEditor } from '../inputs/AppCodeEditor'; -import { Button } from 'antd'; -import { AppMaterialIcons } from '../icons'; +import { AppCodeEditor } from '../inputs/AppCodeEditor/AppCodeEditor'; +import { Download, Copy } from '../icons'; import { useMemoizedFn } from 'ahooks'; import { useBusterNotifications } from '@/context/BusterNotifications'; +import { cn } from '@/lib/classMerge'; +import { Button } from '../buttons/Button'; +import { Card, CardHeader, CardContent, CardDescription, CardFooter, CardTitle } from './CardBase'; export const CodeCard: React.FC<{ code: string; @@ -28,22 +28,17 @@ export const CodeCard: React.FC<{ onChange, readOnly = false }) => { - const { styles, cx } = useStyles(); - const ShownButtons = buttons === true ? : buttons; return ( -
-
- {fileName} - - {ShownButtons} -
-
+ + +
+ {fileName} + {ShownButtons} +
+ + -
-
+ + ); }; @@ -90,15 +85,10 @@ const CardButtons: React.FC<{ return (
+
); }; - -export default CircleSpinnerLoader; diff --git a/web/src/components/ui/loaders/CircleSpinnerLoaderContainer.tsx b/web/src/components/ui/loaders/CircleSpinnerLoaderContainer.tsx index a5014e781..0a4e24b5b 100644 --- a/web/src/components/ui/loaders/CircleSpinnerLoaderContainer.tsx +++ b/web/src/components/ui/loaders/CircleSpinnerLoaderContainer.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import CircleSpinnerLoader from './CircleSpinnerLoader'; -import { Text } from '@/components/ui'; +import { CircleSpinnerLoader } from './CircleSpinnerLoader'; export const CircleSpinnerLoaderContainer: React.FC<{ text?: string; @@ -9,7 +8,7 @@ export const CircleSpinnerLoaderContainer: React.FC<{ return (
- {text && {text}} + {text && {text}}
); }; diff --git a/web/src/components/ui/toaster/AppToaster.stories.tsx b/web/src/components/ui/toaster/Toaster.stories.tsx similarity index 93% rename from web/src/components/ui/toaster/AppToaster.stories.tsx rename to web/src/components/ui/toaster/Toaster.stories.tsx index b82228ae3..073a4e920 100644 --- a/web/src/components/ui/toaster/AppToaster.stories.tsx +++ b/web/src/components/ui/toaster/Toaster.stories.tsx @@ -1,4 +1,3 @@ -import { BusterNotificationsProvider } from '@/context/BusterNotifications'; import type { Meta, StoryObj } from '@storybook/react'; import { useBusterNotifications } from '@/context/BusterNotifications'; @@ -84,11 +83,7 @@ const meta: Meta = { }, decorators: [ (Story) => { - return ( - - - - ); + return ; } ] }; diff --git a/web/src/components/ui/toaster/AppToaster.tsx b/web/src/components/ui/toaster/Toaster.tsx similarity index 60% rename from web/src/components/ui/toaster/AppToaster.tsx rename to web/src/components/ui/toaster/Toaster.tsx index a07462341..143536047 100644 --- a/web/src/components/ui/toaster/AppToaster.tsx +++ b/web/src/components/ui/toaster/Toaster.tsx @@ -2,13 +2,13 @@ import React from 'react'; import { useTheme } from 'next-themes'; -import { Toaster } from 'sonner'; -import { CircleCheck } from '@/components/ui/icons'; +import { Toaster as SonnerToaster } from 'sonner'; +import { CircleCheck, CircleXmark, CircleWarning } from '@/components/ui/icons'; -type ToasterProps = React.ComponentProps; +type ToasterProps = React.ComponentProps; -const AppToaster = ({ ...props }: ToasterProps) => { - const { theme = 'system' } = useTheme(); +export const Toaster = ({ ...props }: ToasterProps) => { + const { theme = 'light' } = useTheme(); return ( { expand={true} visibleToasts={5} icons={{ - success: + success: , + error: , + warning: }} swipeDirections={['right']} theme={theme as ToasterProps['theme']} @@ -24,8 +26,8 @@ const AppToaster = ({ ...props }: ToasterProps) => { toastOptions={{ classNames: { toast: - 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg', - description: 'group-[.toast]:text-muted-foreground', + 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-hard', + description: 'group-[.toast]:text-foreground', actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground', cancelButton: 'group-[.toast]:bg-border group-[.toast]:text-foreground' } @@ -34,5 +36,3 @@ const AppToaster = ({ ...props }: ToasterProps) => { /> ); }; - -export { AppToaster }; diff --git a/web/src/components/ui/toaster/index.ts b/web/src/components/ui/toaster/index.ts index fed0843ba..b4ded5960 100644 --- a/web/src/components/ui/toaster/index.ts +++ b/web/src/components/ui/toaster/index.ts @@ -1 +1 @@ -export * from './AppToaster'; +export * from './Toaster'; diff --git a/web/src/context/BusterNotifications/BusterNotifications.tsx b/web/src/context/BusterNotifications/BusterNotifications.tsx index a04141bdd..b9472a648 100644 --- a/web/src/context/BusterNotifications/BusterNotifications.tsx +++ b/web/src/context/BusterNotifications/BusterNotifications.tsx @@ -1,7 +1,7 @@ +'use client'; + import React, { PropsWithChildren } from 'react'; -// import { App, ModalFuncProps } from 'antd'; import { toast, type ExternalToast } from 'sonner'; -// import { createStyles } from 'antd-style'; import { useMemoizedFn } from 'ahooks'; import { useContextSelector, @@ -22,35 +22,7 @@ export interface NotificationProps { }; } -// const useStyles = createStyles(({ token, css }) => ({ -// modal: css` -// .busterv2-modal-body { -// padding: 0px !important; -// } - -// .busterv2-modal-confirm-body { -// padding: 24px 32px 16px 32px !important; -// } - -// .busterv2-modal-confirm-btns { -// margin-top: 0px !important; -// padding: 12px 32px !important; -// border-top: 0.5px solid ${token.colorBorder}; -// display: flex; -// align-items: center; -// justify-content: flex-end; -// } - -// .busterv2-modal-confirm-content { -// color: ${token.colorTextSecondary} !important; -// } -// ` -// })); - export const useBusterNotificationsInternal = () => { - // const { message, notification, modal } = App.useApp(); - // const { cx, styles } = useStyles(); - const openNotification = useMemoizedFn((props: NotificationProps) => { const { title, message, type } = props; diff --git a/web/src/hooks/dom/index.ts b/web/src/hooks/dom/index.ts index 7a25a09c1..64d0b979b 100644 --- a/web/src/hooks/dom/index.ts +++ b/web/src/hooks/dom/index.ts @@ -1,4 +1,3 @@ -export * from './useThemeDetector'; export * from './usePreventBackwardsNavigation'; export * from './useIsShowingEllipsis'; export * from './useBeforeUnload'; diff --git a/web/src/hooks/dom/useThemeDetector.ts b/web/src/hooks/dom/useThemeDetector.ts deleted file mode 100644 index ab6ffe712..000000000 --- a/web/src/hooks/dom/useThemeDetector.ts +++ /dev/null @@ -1,57 +0,0 @@ -'use client'; - -import { ENABLE_DARK_MODE } from '@/context/BusterStyles/BusterStyles'; -import { useMemoizedFn } from 'ahooks'; -import { useEffect, useLayoutEffect, useState } from 'react'; -import { isServer } from '@tanstack/react-query'; - -const DARK_MODE_MEDIA = '(prefers-color-scheme: dark)'; - -export const useThemeDetector = ({ addDarkClass }: { addDarkClass?: boolean }) => { - const [isDarkTheme, setIsDarkTheme] = useState(() => getSystemTheme()); - - const getSystemTheme = (e?: MediaQueryList | MediaQueryListEvent) => { - if (!ENABLE_DARK_MODE) return false; - if (isServer) return false; - if (!e) e = window.matchMedia(DARK_MODE_MEDIA); - const isDark = e.matches; - return isDark; - }; - - const getCurrentTheme = useMemoizedFn(() => { - if (!isServer) { - document.documentElement.style.display = 'none'; - - const isDarkMode = getSystemTheme(); - - if (addDarkClass) { - const d = document.documentElement; - d.classList.toggle('dark', isDarkMode); - d.classList.toggle('bg-black', isDarkMode); - d.setAttribute('data-color-scheme', !isDarkMode ? 'light' : 'dark'); - } - - // trigger reflow so that overflow style is applied - document.documentElement.style.display = ''; - - return isDarkMode; - } - return false; - }); - - const mqListener = useMemoizedFn(() => { - setIsDarkTheme(getCurrentTheme()); - }); - - useEffect(() => { - const darkThemeMq = window.matchMedia(DARK_MODE_MEDIA); - darkThemeMq.addEventListener('change', mqListener); - return () => darkThemeMq.removeEventListener('change', mqListener); - }, []); - - useLayoutEffect(() => { - setIsDarkTheme(getCurrentTheme()); - }, []); - - return isDarkTheme; -};