chore(ui-kit): updates

propeldata · Mar 28, 2024 · 5a04145 · 5a04145
1 parent bbb9f3c
commit 5a04145
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/app/storybook/.storybook/preview.tsx b/app/storybook/.storybook/preview.tsx
@@ -16,13 +16,20 @@ const GlobalStyles = () => {
   return null
 }
 
+const MyCustomButton = ({ children }: React.ComponentPropsWithoutRef<'button'>) => <button>{children}</button>
+
 const withThemeProvider = (Story: React.FC, context: StoryContext) => {
   if (context.parameters.skipThemeProvider) {
     return <Story />
   }
 
   return (
-    <ThemeProvider baseTheme={context.globals.theme}>
+    <ThemeProvider
+      baseTheme={context.globals.theme}
+      // components={{
+      //   Button: (props) => <MyCustomButton {...props} />
+      // }}
+    >
       <GlobalStyles />
       <Story />
     </ThemeProvider>

diff --git a/app/storybook/documentation/ui-kit/Fallbacks.mdx b/app/storybook/documentation/ui-kit/Fallbacks.mdx
@@ -2,9 +2,9 @@ import { Meta, Source, Canvas } from '@storybook/blocks'
 import { SourceCode } from '../../.storybook/blocks/SourceCode'
 import * as CounterStories from '../../../../packages/ui-kit/src/components/Counter/Counter.stories'
 
-<Meta title="Customization/Fallbacks" />
+<Meta title="Customization/Default components" />
 
-# Fallbacks
+# Default components
 
 It's possible to customize the `Loading`, `Error`, and `Empty` states of the UI Kit components. This is useful when you
 want to provide a consistent look and feel across your app. You can customize the fallbacks globally for all components
@@ -23,6 +23,10 @@ via `ThemeProvider`.
           renderLoader={() => <div>Loading...</div>}
           errorFallback={() => <h1>Error</h1>}
           renderEmpty={() => <span>No Data</span>}
+          components={{
+            Input: ({ props }) => <MyCustomInput {...props} />
+            Button: ({ props }) => <MyCustomButton {...props} />
+          }}
         >
           <Counter />
 

diff --git a/packages/ui-kit/src/components/shared.types.ts b/packages/ui-kit/src/components/shared.types.ts
@@ -3,10 +3,15 @@ import { FilterInput, MetricInput, TimeRangeInput } from '../helpers'
 import type { ErrorFallback as ErrorFallbackComponent, ErrorFallbackProps } from './ErrorFallback'
 import type { Loader as LoaderComponent, LoaderProps } from './Loader'
 import type { ThemeStateProps } from './ThemeProvider/ThemeProvider.types'
+import { ButtonProps } from './Button'
 
 /** Shared props for the data components. */
 
 export interface FallbackComponents {
+  components?: {
+    Button?: (props: ButtonProps) => React.ReactElement
+  }
+
   /**
    * A fallback react component that will be used when the component is in error state.
    *