fix(react): relagate theming to storybook alone

niledatabase · Apr 5, 2024 · 5318b19 · 5318b19
1 parent 11fc06e
commit 5318b19
Show file tree

Hide file tree

Showing 11 changed files with 54 additions and 21 deletions.
diff --git a/packages/react/src/context/config.ts → packages/react/.storybook/themeConfig.ts b/packages/react/src/context/config.ts → packages/react/.storybook/themeConfig.ts
@@ -128,4 +128,13 @@ mergedTheme.unstable_sxConfig = {
   ...muiSxConfig,
   ...joySxConfig,
 };
-export default mergedTheme;
+
+export default {
+  theme: mergedTheme,
+  defaultMode: 'dark',
+  slotProps: {
+    provider: {
+      defaultMode: 'dark',
+    },
+  },
+};
diff --git a/packages/react/src/GoogleLoginButton/GoogleLoginButton.stories.tsx b/packages/react/src/GoogleLoginButton/GoogleLoginButton.stories.tsx
@@ -4,6 +4,7 @@ import Stack from '@mui/joy/Stack';
 import Input from '@mui/joy/Input';
 
 import { NileProvider } from '../context';
+import theme from '../../.storybook/themeConfig';
 
 import GoogleLoginButton from './GoogleLoginButton';
 
@@ -17,7 +18,7 @@ export default meta;
 
 export function Basic() {
   return (
-    <NileProvider>
+    <NileProvider {...theme}>
       <div style={{ maxWidth: '20rem', margin: '0 auto' }}>
         <GoogleLoginButton />
       </div>
@@ -28,7 +29,7 @@ export function Basic() {
 export function BasicWithTenantNameProvider() {
   const [newTenant, setNewTenant] = React.useState<string | undefined>();
   return (
-    <NileProvider>
+    <NileProvider {...theme}>
       <div style={{ maxWidth: '20rem', margin: '0 auto' }}>
         <Stack gap={2}>
           <Stack>
@@ -57,7 +58,7 @@ export function AlphaVersionWithOutProvider() {
 
 export function AlphaVersionWithProvider() {
   return (
-    <NileProvider>
+    <NileProvider {...theme}>
       <div style={{ maxWidth: '20rem', margin: '0 auto' }}>
         <GoogleLoginButton />
       </div>

diff --git a/packages/react/src/LoginForm/UserLoginForm.stories.tsx b/packages/react/src/LoginForm/UserLoginForm.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Meta } from '@storybook/react';
 import Stack from '@mui/joy/Stack';
 
+import theme from '../../.storybook/themeConfig';
 import LoginForm from '../../src/LoginForm';
 import { NileProvider } from '../../src/context';
 
@@ -14,8 +15,12 @@ export default meta;
 
 export function Basic() {
   return (
-    <NileProvider>
-      <Stack sx={{ maxWidth: '20rem', margin: '0 auto' }} spacing={2}>
+    <NileProvider {...theme}>
+      <Stack
+        sx={{ maxWidth: '20rem', margin: '0 auto' }}
+        spacing={2}
+        data-joy-color-scheme="dark"
+      >
         <LoginForm onSuccess={() => alert('success!')} />
       </Stack>
     </NileProvider>

diff --git a/packages/react/src/SSO/SSO.stories.tsx b/packages/react/src/SSO/SSO.stories.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
+import Typography from '@mui/joy/Typography';
 import { Meta } from '@storybook/react';
 
 import { NileProvider } from '../context';
+import theme from '../../.storybook/themeConfig';
 
 import BaseSSOForm, { Okta } from '.';
 
@@ -14,9 +16,16 @@ export default meta;
 
 export function BasicSSO() {
   return (
-    <NileProvider>
-      <div style={{ maxWidth: '20rem', margin: '0 auto' }}>
+    <NileProvider {...theme}>
+      <div
+        style={{ maxWidth: '20rem', margin: '0 auto' }}
+        data-joy-color-scheme="dark"
+      >
+        <Typography>Some kind of cool explaination</Typography>
         <BaseSSOForm
+          configurationGuide={
+            <Typography>Some kind of cool explaination</Typography>
+          }
           providerName="placeholder"
           onSuccess={() => alert('success!')}
         />
@@ -26,8 +35,11 @@ export function BasicSSO() {
 }
 export function OktaSSO() {
   return (
-    <NileProvider>
-      <div style={{ maxWidth: '20rem', margin: '0 auto' }}>
+    <NileProvider {...theme}>
+      <div
+        style={{ maxWidth: '20rem', margin: '0 auto' }}
+        data-joy-color-scheme="dark"
+      >
         <Okta
           onSuccess={() => {
             alert('success!');

diff --git a/packages/react/src/SignUpForm/NewUserSignUp.stories.tsx b/packages/react/src/SignUpForm/NewUserSignUp.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Meta } from '@storybook/react';
 
 import { NileProvider } from '../context';
+import theme from '../../.storybook/themeConfig';
 
 import SignUpForm from '.';
 
@@ -14,8 +15,11 @@ export default meta;
 
 export function Basic() {
   return (
-    <NileProvider>
-      <div style={{ maxWidth: '20rem', margin: '0 auto' }}>
+    <NileProvider {...theme}>
+      <div
+        style={{ maxWidth: '20rem', margin: '0 auto' }}
+        data-joy-color-scheme="dark"
+      >
         <SignUpForm onSuccess={() => alert('success!')} />
       </div>
     </NileProvider>

diff --git a/packages/react/src/UserTenantList/UserList.stories.tsx b/packages/react/src/UserTenantList/UserList.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Meta } from '@storybook/react';
 
 import { NileProvider } from '../context';
+import theme from '../../.storybook/themeConfig';
 
 import UserList from '.';
 
@@ -22,7 +23,7 @@ const users = [
 ];
 export function Basic() {
   return (
-    <NileProvider tenantId="tenantId">
+    <NileProvider {...theme} tenantId="tenantId" data-joy-color-scheme="dark">
       <UserList data={users} />
     </NileProvider>
   );

diff --git a/packages/react/src/context/index.tsx b/packages/react/src/context/index.tsx
@@ -34,6 +34,7 @@ export const NileProvider = (props: NileProviderProps) => {
   const {
     children,
     theme,
+    slotProps,
     tenantId,
     QueryProvider = BaseQueryProvider,
     basePath = 'https://api.thenile.dev',
@@ -55,7 +56,7 @@ export const NileProvider = (props: NileProviderProps) => {
 
   return (
     <QueryProvider>
-      <ThemeProvider theme={theme}>
+      <ThemeProvider slotProps={slotProps?.provider} theme={theme}>
         <Provider value={values}>{children}</Provider>
       </ThemeProvider>
     </QueryProvider>

diff --git a/packages/react/src/context/theme.tsx b/packages/react/src/context/theme.tsx
@@ -4,17 +4,17 @@ import CssBaseline from '@mui/material/CssBaseline';
 import { Theme } from '@mui/joy/styles';
 import { CssVarsProvider as JoyCssVarsProvider } from '@mui/joy/styles';
 
-import defaultTheme from './config';
-
 export default function Themer({
   theme,
   children,
+  slotProps,
 }: {
   theme?: Theme;
   children: JSX.Element;
+  slotProps?: Record<string, string>;
 }) {
   return (
-    <JoyCssVarsProvider theme={theme ?? defaultTheme} defaultMode="dark">
+    <JoyCssVarsProvider {...slotProps} theme={theme}>
       <CssBaseline enableColorScheme />
       {children}
     </JoyCssVarsProvider>

diff --git a/packages/react/src/context/types.ts b/packages/react/src/context/types.ts
@@ -14,6 +14,9 @@ export type NileContext = NileReactConfig & {
 export type NileProviderProps = NileReactConfig & {
   children: JSX.Element | JSX.Element[];
   theme?: Theme;
+  slotProps?: {
+    provider?: Record<string, string>;
+  };
   QueryProvider?: (props: { children: JSX.Element }) => JSX.Element;
   api?: Browser;
 };
diff --git a/packages/react/src/lib/SimpleForm/index.tsx b/packages/react/src/lib/SimpleForm/index.tsx
@@ -164,9 +164,6 @@ export default function SimpleForm(props: {
                           endDecorator={
                             field.value ? options[0].label : options[1].label
                           }
-                          sx={{
-                            '--Switch-thumbSize': '28px',
-                          }}
                         />
                       );
                     }}

diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig",
   // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
-  "include": ["src/**/*", "test", "src/**/*.stories.tsx"],
+  "include": ["src/**/*", "test", "src/**/*.stories.tsx", ".storybook/config.ts"],
   "compilerOptions": {
     "jsx": "react",
     "lib": ["dom", "esnext"],