Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update stwitch stories

This commit is contained in:
Nate Kelley 2025-02-21 15:05:21 -07:00
parent 8a51853f06
commit 59beb494c4
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
9 changed files with 68 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/app/auth/_LoginComponents/LoginForm.tsx
View File

@ -267,6 +267,7 @@ const LoginOptions: React.FC<{
<Divider plain>or</Divider> <Divider plain>or</Divider>
<div>
<Input <Input
type="email" type="email"
placeholder="What is your email address?" placeholder="What is your email address?"
@ -279,7 +280,7 @@ const LoginOptions: React.FC<{
disabled={!!loading} disabled={!!loading}
autoComplete="email" autoComplete="email"
/> />
</div>
<div className="relative"> <div className="relative">
<Input <Input
value={password} value={password}

6
web/src/app/layout.tsx
View File

@ -1,8 +1,7 @@
import type { Metadata } from 'next'; import type { Metadata } from 'next';
import React from 'react'; import React from 'react';
import '../styles/styles.scss'; import '../styles/styles.scss';
import { BusterStyleProvider } from '@/context/BusterStyles';
// import { BusterStyleProvider } from '@/context/BusterStyles/BusterStyles';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Buster', title: 'Buster',
@ -25,8 +24,7 @@ export default async function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body> <body>
{children} <BusterStyleProvider>{children}</BusterStyleProvider>
{/* <BusterStyleProvider>{children}</BusterStyleProvider> */}
</body> </body>
</html> </html>
); );

11
web/src/components/ui/switch/AppSwitch.stories.tsx
View File

@ -1,9 +1,9 @@
import type { Meta, StoryObj } from '@storybook/react'; import type { Meta, StoryObj } from '@storybook/react';
import { Switch } from './AppSwitch'; import { AppSwitch } from './AppSwitch';
const meta: Meta<typeof Switch> = { const meta: Meta<typeof AppSwitch> = {
title: 'Base/Switch', title: 'Base/Switch',
component: Switch, component: AppSwitch,
tags: ['autodocs'], tags: ['autodocs'],
argTypes: { argTypes: {
className: { control: 'text' }, className: { control: 'text' },
@ -14,7 +14,7 @@ const meta: Meta<typeof Switch> = {
}; };
export default meta; export default meta;
type Story = StoryObj<typeof Switch>; type Story = StoryObj<typeof AppSwitch>;
export const Default: Story = { export const Default: Story = {
args: {} args: {}
@ -41,6 +41,7 @@ export const DisabledChecked: Story = {
export const WithCustomClassName: Story = { export const WithCustomClassName: Story = {
args: { args: {
className: 'data-[state=checked]:bg-green-500' className: 'data-[state=checked]:bg-green-500',
defaultChecked: true
} }
}; };

11
web/src/components/ui/switch/AppSwitch.tsx
View File

@ -1,23 +1,20 @@
'use client';
import * as React from 'react'; import * as React from 'react';
import * as SwitchPrimitive from '@radix-ui/react-switch'; import * as SwitchPrimitive from '@radix-ui/react-switch';
import { cn } from '@/lib/classMerge'; import { cn } from '@/lib/classMerge';
type SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> & { type AppSwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> & {
checked?: boolean; checked?: boolean;
defaultChecked?: boolean; defaultChecked?: boolean;
required?: boolean; required?: boolean;
onCheckedChange?(checked: boolean): void; onCheckedChange?(checked: boolean): void;
}; };
function Switch({ className, ...props }: SwitchProps) { function AppSwitch({ className, ...props }: AppSwitchProps) {
return ( return (
<SwitchPrimitive.Root <SwitchPrimitive.Root
data-slot="switch" data-slot="switch"
className={cn( className={cn(
'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', 'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50',
className className
)} )}
{...props}> {...props}>
@ -31,4 +28,4 @@ function Switch({ className, ...props }: SwitchProps) {
); );
} }
export { Switch }; export { AppSwitch };

85
web/src/context/BusterStyles/BusterStyles.tsx
View File

@ -3,110 +3,45 @@
import 'react-material-symbols/rounded'; import 'react-material-symbols/rounded';
import React, { PropsWithChildren } from 'react'; import React, { PropsWithChildren } from 'react';
import { usePreventBackwardNavigation } from '@/hooks/dom/usePreventBackwardsNavigation'; 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 { ThemeProvider as NextThemeProvider, useTheme as useNextTheme } from 'next-themes';
import StyleRegistry from './StyleRegistry';
import { AntdRegistry } from '@ant-design/nextjs-registry';
import { import {
useContextSelector, useContextSelector,
createContext, createContext,
ContextSelector ContextSelector
} from '@fluentui/react-context-selector'; } from '@fluentui/react-context-selector';
const { defaultAlgorithm, darkAlgorithm } = theme;
export const ENABLE_DARK_MODE = false; export const ENABLE_DARK_MODE = false;
export const BaseBusterStyleProvider: React.FC<PropsWithChildren<{}>> = React.memo( const BaseBusterStyleProvider: React.FC<PropsWithChildren<{}>> = React.memo(({ children }) => {
({ children }) => {
usePreventBackwardNavigation(); usePreventBackwardNavigation();
const nextThemeMode = useNextTheme(); const nextThemeMode = useNextTheme();
const isDarkMode = const isDarkMode =
ENABLE_DARK_MODE && ENABLE_DARK_MODE && (nextThemeMode.theme === 'dark' || nextThemeMode.resolvedTheme === 'dark');
(nextThemeMode.theme === 'dark' || nextThemeMode.resolvedTheme === 'dark');
const selectedTheme = !isDarkMode ? busterAppStyleConfig : busterAppStyleConfigDark;
const selectedAlgorithm = isDarkMode ? darkAlgorithm : defaultAlgorithm;
const token = selectedTheme.token!;
const busterAppComponentConfig = useBusterAppComponentConfig(); return <BusterStyles.Provider value={{ isDarkMode }}>{children}</BusterStyles.Provider>;
});
const cssVariables = {
'--focus-border': '#E5E5E5',
'--separator-border': token.colorBorder
};
return (
<StyleRegistry>
<BusterStyles.Provider value={{ isDarkMode, theme: selectedTheme }}>
<ThemeProvider
themeMode={isDarkMode ? 'dark' : 'light'}
appearance={isDarkMode ? 'dark' : 'light'}
prefixCls="busterv2"
theme={{
algorithm: selectedAlgorithm,
...selectedTheme
}}>
<ConfigProvider
popupMatchSelectWidth={false}
virtual={true}
locale={{
locale: 'en'
}}
{...busterAppComponentConfig}>
<App
message={{
maxCount: 4,
duration: 2.5
}}
className="min-h-[100vh] w-full text-base"
style={{
...(cssVariables as any)
}}>
{children}
<div id="modal-root"></div>
</App>
</ConfigProvider>
</ThemeProvider>
</BusterStyles.Provider>
</StyleRegistry>
);
}
);
BaseBusterStyleProvider.displayName = 'BusterStyleProvider'; BaseBusterStyleProvider.displayName = 'BusterStyleProvider';
export const BusterStyleProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => { export const BusterStyleProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
return ( return (
<AntdRegistry>
<NextThemeProvider <NextThemeProvider
attribute="class" attribute="class"
defaultTheme="light"
enableSystem={ENABLE_DARK_MODE} enableSystem={ENABLE_DARK_MODE}
themes={['light', 'dark']}> themes={['light', 'dark']}
disableTransitionOnChange>
<BaseBusterStyleProvider>{children}</BaseBusterStyleProvider> <BaseBusterStyleProvider>{children}</BaseBusterStyleProvider>
</NextThemeProvider> </NextThemeProvider>
</AntdRegistry>
); );
}; };
const BusterStyles = createContext<{ isDarkMode: boolean; theme: ThemeConfig }>({ const BusterStyles = createContext<{ isDarkMode: boolean }>({
isDarkMode: false, isDarkMode: false
theme: busterAppStyleConfig
}); });
export const useBusterStylesContext = <T,>( export const useBusterStylesContext = <T,>(
selector: ContextSelector< selector: ContextSelector<{ isDarkMode: boolean }, T>
{
isDarkMode: boolean;
theme: ThemeConfig;
},
T
>
) => { ) => {
return useContextSelector(BusterStyles, selector); return useContextSelector(BusterStyles, selector);
}; };

25
web/src/context/BusterStyles/StyleRegistry.tsx
View File

@ -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 <StyleProvider cache={extractStaticStyle.cache}>{children}</StyleProvider>;
};
export default StyleRegistry;

34
web/src/controllers/AppLayout.tsx
View File

@ -1,19 +1,17 @@
'use client'; 'use client';
import { ConfigProvider, Layout } from 'antd';
import React, { PropsWithChildren, useMemo } from 'react'; import React, { PropsWithChildren, useMemo } from 'react';
import { AppSidebar } from './AppSidebar'; import { AppSidebar } from './AppSidebar';
import { NewChatModal } from '@/components/features/NewChatModal'; import { NewChatModal } from '@/components/features/NewChatModal';
import { InvitePeopleModal } from '@/components/features/Modals/InvitePeopleModal'; import { InvitePeopleModal } from '@/components/features/Modals/InvitePeopleModal';
import { AppSplitter } from '@/components/ui/layout'; import { AppSplitter } from '@/components/ui/layout';
import { createStyles } from 'antd-style'; import { createStyles } from 'antd-style';
import { useBusterStylesContext } from '@/context/BusterStyles/BusterStyles';
import { useUserConfigContextSelector } from '@/context/Users'; import { useUserConfigContextSelector } from '@/context/Users';
import { SupportModal } from '@/components/features/Modals/SupportModal'; import { SupportModal } from '@/components/features/Modals/SupportModal';
import { useAppLayoutContextSelector } from '@/context/BusterAppLayout'; import { useAppLayoutContextSelector } from '@/context/BusterAppLayout';
import { useMemoizedFn } from 'ahooks'; import { useMemoizedFn } from 'ahooks';
import { ThemeConfig } from 'antd/lib';
import { useSearchParams } from 'next/navigation'; import { useSearchParams } from 'next/navigation';
import { cn } from '@/lib/classMerge';
const layoutStyle = { const layoutStyle = {
overflow: 'hidden', overflow: 'hidden',
@ -73,7 +71,6 @@ const AppLayoutContent: React.FC<
embedView?: boolean; embedView?: boolean;
}> }>
> = React.memo(({ children, isAnonymousUser, hideSidePanel, embedView }) => { > = React.memo(({ children, isAnonymousUser, hideSidePanel, embedView }) => {
const { cx, styles } = useStyles();
const onToggleInviteModal = useAppLayoutContextSelector((s) => s.onToggleInviteModal); const onToggleInviteModal = useAppLayoutContextSelector((s) => s.onToggleInviteModal);
const openInviteModal = useAppLayoutContextSelector((s) => s.openInviteModal); const openInviteModal = useAppLayoutContextSelector((s) => s.openInviteModal);
const onToggleChatsModal = useAppLayoutContextSelector((s) => s.onToggleChatsModal); const onToggleChatsModal = useAppLayoutContextSelector((s) => s.onToggleChatsModal);
@ -81,9 +78,6 @@ const AppLayoutContent: React.FC<
const onToggleSupportModal = useAppLayoutContextSelector((s) => s.onToggleSupportModal); const onToggleSupportModal = useAppLayoutContextSelector((s) => s.onToggleSupportModal);
const openSupportModal = useAppLayoutContextSelector((s) => s.openSupportModal); const openSupportModal = useAppLayoutContextSelector((s) => s.openSupportModal);
const userOrganizations = useUserConfigContextSelector((x) => x.userOrganizations); const userOrganizations = useUserConfigContextSelector((x) => x.userOrganizations);
const colorBgContainerDisabled = useBusterStylesContext(
(s) => s.theme.token?.colorBgContainerDisabled
);
const onCloseChatsModal = useMemoizedFn(() => onToggleChatsModal(false)); const onCloseChatsModal = useMemoizedFn(() => onToggleChatsModal(false));
const onCloseInviteModal = useMemoizedFn(() => onToggleInviteModal(false)); const onCloseInviteModal = useMemoizedFn(() => onToggleInviteModal(false));
@ -91,30 +85,20 @@ const AppLayoutContent: React.FC<
const hasOrganization = !!userOrganizations; const hasOrganization = !!userOrganizations;
const themeConfig = useMemo<ThemeConfig>(
() => ({
components: {
Layout: {
bodyBg: colorBgContainerDisabled
}
}
}),
[colorBgContainerDisabled]
);
const layoutClassName = useMemo( const layoutClassName = useMemo(
() => () =>
embedView embedView
? '' ? ''
: cx(`mr-2 mt-2 overflow-hidden rounded-md`, styles.layout, { : cn(
'ml-2': hideSidePanel `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, styles.layout] ),
[embedView, hideSidePanel]
); );
return ( return (
<ConfigProvider theme={themeConfig}> <>
<Layout className={layoutClassName}>{children}</Layout> <div className={layoutClassName}>{children}</div>
{!isAnonymousUser && hasOrganization && ( {!isAnonymousUser && hasOrganization && (
<> <>
@ -123,7 +107,7 @@ const AppLayoutContent: React.FC<
<SupportModal open={openSupportModal} onClose={onCloseSupportModal} /> <SupportModal open={openSupportModal} onClose={onCloseSupportModal} />
</> </>
)} )}
</ConfigProvider> </>
); );
}); });
AppLayoutContent.displayName = 'AppLayoutContent'; AppLayoutContent.displayName = 'AppLayoutContent';

5
web/src/lib/language.ts
View File

@ -31,8 +31,8 @@ export const embedLanguageOptions = [
{ {
label: 'English (en)', label: 'English (en)',
value: SupportedLanguages.EN value: SupportedLanguages.EN
}, }
{ /* {
label: 'German (de)', label: 'German (de)',
value: SupportedLanguages.DE value: SupportedLanguages.DE
}, },
@ -92,6 +92,7 @@ export const embedLanguageOptions = [
label: 'Arabic (ar)', label: 'Arabic (ar)',
value: SupportedLanguages.AR value: SupportedLanguages.AR
} }
*/
]; ];
export const getLanguageLabel = (language: SupportedLanguages) => export const getLanguageLabel = (language: SupportedLanguages) =>

25
web/src/styles/tailwind.css
View File

@ -37,6 +37,8 @@
--radius-xl: calc(var(--radius) + 4px); --radius-xl: calc(var(--radius) + 4px);
/* base color */ /* base color */
--color-background: #ffffff;
--color-foreground: hsl(0 0% 3.9%);
--color-primary: #7c3aed; --color-primary: #7c3aed;
--color-primary-light: #a26cff; --color-primary-light: #a26cff;
--color-primary-dark: #6d28d9; --color-primary-dark: #6d28d9;
@ -46,7 +48,6 @@
--color-dark-gray: #575859; --color-dark-gray: #575859;
--color-black: #000000; --color-black: #000000;
--color-black-hover: #393939; --color-black-hover: #393939;
--color-background: #ffffff;
/* component color */ /* component color */
--color-input: hsl(0 0% 89.8%); --color-input: hsl(0 0% 89.8%);
@ -55,22 +56,20 @@
--color-nav-background: #f3f3f3; --color-nav-background: #f3f3f3;
--color-nav-item-hover: #efeeee; --color-nav-item-hover: #efeeee;
--color-nav-item-select: #e6e6e6; --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: hsl(0 0% 100%); --color-card-foreground: hsl(0 0% 3.9%); */
--color-card-foreground: hsl(0 0% 3.9%); /* --color-popover: hsl(0 0% 100%);
--color-popover: hsl(0 0% 100%);
--color-popover-foreground: hsl(0 0% 3.9%); --color-popover-foreground: hsl(0 0% 3.9%);
--color-secondary: hsl(0 0% 96.1%); --color-secondary: hsl(0 0% 96.1%);
--color-secondary-foreground: hsl(0 0% 9%); --color-secondary-foreground: hsl(0 0% 9%); */
--color-muted: hsl(0 0% 96.1%); /* --color-muted: hsl(0 0% 96.1%);
--color-muted-foreground: hsl(0 0% 45.1%); --color-muted-foreground: hsl(0 0% 45.1%); */
--color-accent: hsl(0 0% 96.1%); /* --color-accent: hsl(0 0% 96.1%);
--color-accent-foreground: hsl(0 0% 9%); --color-accent-foreground: hsl(0 0% 9%); */
--color-destructive: hsl(0 84.2% 60.2%); /* --color-destructive: hsl(0 84.2% 60.2%);
--color-destructive-foreground: hsl(0 0% 98%); */ --color-destructive-foreground: hsl(0 0% 98%); */
/* --color-border: hsl(0 0% 89.8%); */
/* --color-ring: hsl(0 0% 3.9%); */
} }
@import './tailwindAnimations.css'; @import './tailwindAnimations.css';