From 59beb494c4bcdd4e6683d3a28f789da72aa5cec4 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Fri, 21 Feb 2025 15:05:21 -0700 Subject: [PATCH] update stwitch stories --- .../app/auth/_LoginComponents/LoginForm.tsx | 27 ++--- web/src/app/layout.tsx | 6 +- .../ui/switch/AppSwitch.stories.tsx | 11 +- web/src/components/ui/switch/AppSwitch.tsx | 11 +- web/src/context/BusterStyles/BusterStyles.tsx | 101 ++++-------------- .../context/BusterStyles/StyleRegistry.tsx | 25 ----- web/src/controllers/AppLayout.tsx | 34 ++---- web/src/lib/language.ts | 5 +- web/src/styles/tailwind.css | 25 +++-- 9 files changed, 68 insertions(+), 177 deletions(-) delete mode 100644 web/src/context/BusterStyles/StyleRegistry.tsx diff --git a/web/src/app/auth/_LoginComponents/LoginForm.tsx b/web/src/app/auth/_LoginComponents/LoginForm.tsx index bfb7ea211..4c9a85f5c 100644 --- a/web/src/app/auth/_LoginComponents/LoginForm.tsx +++ b/web/src/app/auth/_LoginComponents/LoginForm.tsx @@ -267,19 +267,20 @@ const LoginOptions: React.FC<{ or - { - setEmail(v.target.value); - }} - disabled={!!loading} - autoComplete="email" - /> - +
+ { + setEmail(v.target.value); + }} + disabled={!!loading} + autoComplete="email" + /> +
- {children} - {/* {children} */} + {children} ); diff --git a/web/src/components/ui/switch/AppSwitch.stories.tsx b/web/src/components/ui/switch/AppSwitch.stories.tsx index 33aacddc1..8f8f4c6a8 100644 --- a/web/src/components/ui/switch/AppSwitch.stories.tsx +++ b/web/src/components/ui/switch/AppSwitch.stories.tsx @@ -1,9 +1,9 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { Switch } from './AppSwitch'; +import { AppSwitch } from './AppSwitch'; -const meta: Meta = { +const meta: Meta = { title: 'Base/Switch', - component: Switch, + component: AppSwitch, tags: ['autodocs'], argTypes: { className: { control: 'text' }, @@ -14,7 +14,7 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: {} @@ -41,6 +41,7 @@ export const DisabledChecked: Story = { export const WithCustomClassName: Story = { args: { - className: 'data-[state=checked]:bg-green-500' + className: 'data-[state=checked]:bg-green-500', + defaultChecked: true } }; diff --git a/web/src/components/ui/switch/AppSwitch.tsx b/web/src/components/ui/switch/AppSwitch.tsx index e50cea15d..2c93ace5a 100644 --- a/web/src/components/ui/switch/AppSwitch.tsx +++ b/web/src/components/ui/switch/AppSwitch.tsx @@ -1,23 +1,20 @@ -'use client'; - import * as React from 'react'; import * as SwitchPrimitive from '@radix-ui/react-switch'; - import { cn } from '@/lib/classMerge'; -type SwitchProps = React.ComponentProps & { +type AppSwitchProps = React.ComponentProps & { checked?: boolean; defaultChecked?: boolean; required?: boolean; onCheckedChange?(checked: boolean): void; }; -function Switch({ className, ...props }: SwitchProps) { +function AppSwitch({ className, ...props }: AppSwitchProps) { return ( @@ -31,4 +28,4 @@ function Switch({ className, ...props }: SwitchProps) { ); } -export { Switch }; +export { AppSwitch }; diff --git a/web/src/context/BusterStyles/BusterStyles.tsx b/web/src/context/BusterStyles/BusterStyles.tsx index 40f7f01e4..979f9988f 100644 --- a/web/src/context/BusterStyles/BusterStyles.tsx +++ b/web/src/context/BusterStyles/BusterStyles.tsx @@ -3,110 +3,45 @@ import 'react-material-symbols/rounded'; import React, { PropsWithChildren } from 'react'; import { usePreventBackwardNavigation } from '@/hooks/dom/usePreventBackwardsNavigation'; -import { App, ConfigProvider, theme, ThemeConfig } from 'antd'; -import { - busterAppStyleConfig, - busterAppStyleConfigDark, - useBusterAppComponentConfig -} from '@/styles/busterAntDStyleConfig'; -import { ThemeProvider } from 'antd-style'; import { ThemeProvider as NextThemeProvider, useTheme as useNextTheme } from 'next-themes'; -import StyleRegistry from './StyleRegistry'; -import { AntdRegistry } from '@ant-design/nextjs-registry'; import { useContextSelector, createContext, ContextSelector } from '@fluentui/react-context-selector'; -const { defaultAlgorithm, darkAlgorithm } = theme; - export const ENABLE_DARK_MODE = false; -export const BaseBusterStyleProvider: React.FC> = React.memo( - ({ children }) => { - usePreventBackwardNavigation(); +const BaseBusterStyleProvider: React.FC> = React.memo(({ children }) => { + usePreventBackwardNavigation(); - const nextThemeMode = useNextTheme(); - const isDarkMode = - ENABLE_DARK_MODE && - (nextThemeMode.theme === 'dark' || nextThemeMode.resolvedTheme === 'dark'); - const selectedTheme = !isDarkMode ? busterAppStyleConfig : busterAppStyleConfigDark; - const selectedAlgorithm = isDarkMode ? darkAlgorithm : defaultAlgorithm; - const token = selectedTheme.token!; + const nextThemeMode = useNextTheme(); + const isDarkMode = + ENABLE_DARK_MODE && (nextThemeMode.theme === 'dark' || nextThemeMode.resolvedTheme === 'dark'); - const busterAppComponentConfig = useBusterAppComponentConfig(); - - const cssVariables = { - '--focus-border': '#E5E5E5', - '--separator-border': token.colorBorder - }; - - return ( - - - - - - {children} - - - - - - - ); - } -); + return {children}; +}); BaseBusterStyleProvider.displayName = 'BusterStyleProvider'; export const BusterStyleProvider: React.FC> = ({ children }) => { return ( - - - {children} - - + + {children} + ); }; -const BusterStyles = createContext<{ isDarkMode: boolean; theme: ThemeConfig }>({ - isDarkMode: false, - theme: busterAppStyleConfig +const BusterStyles = createContext<{ isDarkMode: boolean }>({ + isDarkMode: false }); export const useBusterStylesContext = ( - selector: ContextSelector< - { - isDarkMode: boolean; - theme: ThemeConfig; - }, - T - > + selector: ContextSelector<{ isDarkMode: boolean }, T> ) => { return useContextSelector(BusterStyles, selector); }; diff --git a/web/src/context/BusterStyles/StyleRegistry.tsx b/web/src/context/BusterStyles/StyleRegistry.tsx deleted file mode 100644 index b54dfba65..000000000 --- a/web/src/context/BusterStyles/StyleRegistry.tsx +++ /dev/null @@ -1,25 +0,0 @@ -'use client'; - -import { StyleProvider, extractStaticStyle } from 'antd-style'; -import { useServerInsertedHTML } from 'next/navigation'; -import { PropsWithChildren, useRef } from 'react'; - -const StyleRegistry = ({ children }: PropsWithChildren) => { - const isInsert = useRef(false); - - useServerInsertedHTML(() => { - // Avoid inserting styles repeatedly when rendering multiple times - // refs: https://github.com/vercel/next.js/discussions/49354#discussioncomment-6279917 - if (isInsert.current) return; - - isInsert.current = true; - - const styles = extractStaticStyle().map((item) => item.style); - - return <>{styles}; - }); - - return {children}; -}; - -export default StyleRegistry; diff --git a/web/src/controllers/AppLayout.tsx b/web/src/controllers/AppLayout.tsx index cb4992d15..762535014 100644 --- a/web/src/controllers/AppLayout.tsx +++ b/web/src/controllers/AppLayout.tsx @@ -1,19 +1,17 @@ 'use client'; -import { ConfigProvider, Layout } from 'antd'; import React, { PropsWithChildren, useMemo } from 'react'; import { AppSidebar } from './AppSidebar'; import { NewChatModal } from '@/components/features/NewChatModal'; import { InvitePeopleModal } from '@/components/features/Modals/InvitePeopleModal'; import { AppSplitter } from '@/components/ui/layout'; import { createStyles } from 'antd-style'; -import { useBusterStylesContext } from '@/context/BusterStyles/BusterStyles'; import { useUserConfigContextSelector } from '@/context/Users'; import { SupportModal } from '@/components/features/Modals/SupportModal'; import { useAppLayoutContextSelector } from '@/context/BusterAppLayout'; import { useMemoizedFn } from 'ahooks'; -import { ThemeConfig } from 'antd/lib'; import { useSearchParams } from 'next/navigation'; +import { cn } from '@/lib/classMerge'; const layoutStyle = { overflow: 'hidden', @@ -73,7 +71,6 @@ const AppLayoutContent: React.FC< embedView?: boolean; }> > = React.memo(({ children, isAnonymousUser, hideSidePanel, embedView }) => { - const { cx, styles } = useStyles(); const onToggleInviteModal = useAppLayoutContextSelector((s) => s.onToggleInviteModal); const openInviteModal = useAppLayoutContextSelector((s) => s.openInviteModal); const onToggleChatsModal = useAppLayoutContextSelector((s) => s.onToggleChatsModal); @@ -81,9 +78,6 @@ const AppLayoutContent: React.FC< const onToggleSupportModal = useAppLayoutContextSelector((s) => s.onToggleSupportModal); const openSupportModal = useAppLayoutContextSelector((s) => s.openSupportModal); const userOrganizations = useUserConfigContextSelector((x) => x.userOrganizations); - const colorBgContainerDisabled = useBusterStylesContext( - (s) => s.theme.token?.colorBgContainerDisabled - ); const onCloseChatsModal = useMemoizedFn(() => onToggleChatsModal(false)); const onCloseInviteModal = useMemoizedFn(() => onToggleInviteModal(false)); @@ -91,30 +85,20 @@ const AppLayoutContent: React.FC< const hasOrganization = !!userOrganizations; - const themeConfig = useMemo( - () => ({ - components: { - Layout: { - bodyBg: colorBgContainerDisabled - } - } - }), - [colorBgContainerDisabled] - ); - const layoutClassName = useMemo( () => embedView ? '' - : cx(`mr-2 mt-2 overflow-hidden rounded-md`, styles.layout, { - 'ml-2': hideSidePanel - }), - [embedView, hideSidePanel, styles.layout] + : cn( + `mr-2 mt-2 overflow-hidden rounded-md border-[0.5px] border-border min-h-[calc(100vh_-_16px)] h-[calc(100vh_-_16px)] max-h-[calc(100vh_-_16px)]`, + { 'ml-2': hideSidePanel } + ), + [embedView, hideSidePanel] ); return ( - - {children} + <> +
{children}
{!isAnonymousUser && hasOrganization && ( <> @@ -123,7 +107,7 @@ const AppLayoutContent: React.FC< )} - + ); }); AppLayoutContent.displayName = 'AppLayoutContent'; diff --git a/web/src/lib/language.ts b/web/src/lib/language.ts index a59cdf848..26137edb1 100644 --- a/web/src/lib/language.ts +++ b/web/src/lib/language.ts @@ -31,8 +31,8 @@ export const embedLanguageOptions = [ { label: 'English (en)', value: SupportedLanguages.EN - }, - { + } + /* { label: 'German (de)', value: SupportedLanguages.DE }, @@ -92,6 +92,7 @@ export const embedLanguageOptions = [ label: 'Arabic (ar)', value: SupportedLanguages.AR } + */ ]; export const getLanguageLabel = (language: SupportedLanguages) => diff --git a/web/src/styles/tailwind.css b/web/src/styles/tailwind.css index 4a88ca0a4..9ae0a90b8 100644 --- a/web/src/styles/tailwind.css +++ b/web/src/styles/tailwind.css @@ -37,6 +37,8 @@ --radius-xl: calc(var(--radius) + 4px); /* base color */ + --color-background: #ffffff; + --color-foreground: hsl(0 0% 3.9%); --color-primary: #7c3aed; --color-primary-light: #a26cff; --color-primary-dark: #6d28d9; @@ -46,7 +48,6 @@ --color-dark-gray: #575859; --color-black: #000000; --color-black-hover: #393939; - --color-background: #ffffff; /* component color */ --color-input: hsl(0 0% 89.8%); @@ -55,22 +56,20 @@ --color-nav-background: #f3f3f3; --color-nav-item-hover: #efeeee; --color-nav-item-select: #e6e6e6; + --color-ring: hsl(0 0% 3.9%); - /* --color-foreground: hsl(0 0% 3.9%); - --color-card: hsl(0 0% 100%); - --color-card-foreground: hsl(0 0% 3.9%); - --color-popover: hsl(0 0% 100%); + /* --color-card: hsl(0 0% 100%); + --color-card-foreground: hsl(0 0% 3.9%); */ + /* --color-popover: hsl(0 0% 100%); --color-popover-foreground: hsl(0 0% 3.9%); --color-secondary: hsl(0 0% 96.1%); - --color-secondary-foreground: hsl(0 0% 9%); - --color-muted: hsl(0 0% 96.1%); - --color-muted-foreground: hsl(0 0% 45.1%); - --color-accent: hsl(0 0% 96.1%); - --color-accent-foreground: hsl(0 0% 9%); - --color-destructive: hsl(0 84.2% 60.2%); + --color-secondary-foreground: hsl(0 0% 9%); */ + /* --color-muted: hsl(0 0% 96.1%); + --color-muted-foreground: hsl(0 0% 45.1%); */ + /* --color-accent: hsl(0 0% 96.1%); + --color-accent-foreground: hsl(0 0% 9%); */ + /* --color-destructive: hsl(0 84.2% 60.2%); --color-destructive-foreground: hsl(0 0% 98%); */ - /* --color-border: hsl(0 0% 89.8%); */ - /* --color-ring: hsl(0 0% 3.9%); */ } @import './tailwindAnimations.css';