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

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

@ -267,19 +267,20 @@ const LoginOptions: React.FC<{
<Divider plain>or</Divider>
<Input
type="email"
placeholder="What is your email address?"
name="email"
id="email"
value={email}
onChange={(v) => {
setEmail(v.target.value);
}}
disabled={!!loading}
autoComplete="email"
/>
<div>
<Input
type="email"
placeholder="What is your email address?"
name="email"
id="email"
value={email}
onChange={(v) => {
setEmail(v.target.value);
}}
disabled={!!loading}
autoComplete="email"
/>
</div>
<div className="relative">
<Input
value={password}

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

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

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

@ -1,9 +1,9 @@
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',
component: Switch,
component: AppSwitch,
tags: ['autodocs'],
argTypes: {
className: { control: 'text' },
@ -14,7 +14,7 @@ const meta: Meta<typeof Switch> = {
};
export default meta;
type Story = StoryObj<typeof Switch>;
type Story = StoryObj<typeof AppSwitch>;
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
}
};

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

@ -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<typeof SwitchPrimitive.Root> & {
type AppSwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> & {
checked?: boolean;
defaultChecked?: boolean;
required?: boolean;
onCheckedChange?(checked: boolean): void;
};
function Switch({ className, ...props }: SwitchProps) {
function AppSwitch({ className, ...props }: AppSwitchProps) {
return (
<SwitchPrimitive.Root
data-slot="switch"
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
)}
{...props}>
@ -31,4 +28,4 @@ function Switch({ className, ...props }: SwitchProps) {
);
}
export { Switch };
export { AppSwitch };

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

@ -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<PropsWithChildren<{}>> = React.memo(
({ children }) => {
usePreventBackwardNavigation();
const BaseBusterStyleProvider: React.FC<PropsWithChildren<{}>> = 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 (
<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>
);
}
);
return <BusterStyles.Provider value={{ isDarkMode }}>{children}</BusterStyles.Provider>;
});
BaseBusterStyleProvider.displayName = 'BusterStyleProvider';
export const BusterStyleProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
return (
<AntdRegistry>
<NextThemeProvider
attribute="class"
enableSystem={ENABLE_DARK_MODE}
themes={['light', 'dark']}>
<BaseBusterStyleProvider>{children}</BaseBusterStyleProvider>
</NextThemeProvider>
</AntdRegistry>
<NextThemeProvider
attribute="class"
defaultTheme="light"
enableSystem={ENABLE_DARK_MODE}
themes={['light', 'dark']}
disableTransitionOnChange>
<BaseBusterStyleProvider>{children}</BaseBusterStyleProvider>
</NextThemeProvider>
);
};
const BusterStyles = createContext<{ isDarkMode: boolean; theme: ThemeConfig }>({
isDarkMode: false,
theme: busterAppStyleConfig
const BusterStyles = createContext<{ isDarkMode: boolean }>({
isDarkMode: false
});
export const useBusterStylesContext = <T,>(
selector: ContextSelector<
{
isDarkMode: boolean;
theme: ThemeConfig;
},
T
>
selector: ContextSelector<{ isDarkMode: boolean }, T>
) => {
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';
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<ThemeConfig>(
() => ({
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 (
<ConfigProvider theme={themeConfig}>
<Layout className={layoutClassName}>{children}</Layout>
<>
<div className={layoutClassName}>{children}</div>
{!isAnonymousUser && hasOrganization && (
<>
@ -123,7 +107,7 @@ const AppLayoutContent: React.FC<
<SupportModal open={openSupportModal} onClose={onCloseSupportModal} />
</>
)}
</ConfigProvider>
</>
);
});
AppLayoutContent.displayName = 'AppLayoutContent';

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

@ -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) =>

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

@ -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';