Consolidate all the provider to single Provider (#147)

* Consolidate all the provider to single Provider * Fix import * Fix CUIProvider Props * Fix test cases
ClickHouse · Sep 22, 2023 · ffdbdc5 · ffdbdc5 · vercel · Sep 22, 2023
1 parent 6b58460
commit ffdbdc5
Show file tree

Hide file tree

Showing 16 changed files with 107 additions and 100 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import type { Preview } from "@storybook/react";
 import "../src/styles/variables.css";
 import { Decorator } from "@storybook/react";
-import { ThemeProvider } from "../src/theme";
 import styled from "styled-components";
 import { themes } from "@storybook/theming";
+import ClickUIProvider from "../src/components/ClickUIProvider/ClickUIProvider";
 
 const ThemeBlock = styled.div<{ $left?: boolean; $bfill?: boolean }>(
   ({ $left, $bfill: fill, theme }) => `
@@ -44,11 +44,14 @@ const withTheme: Decorator = (StoryFn, context) => {
   const parameters = context.parameters;
   const theme = parameters?.theme || context.globals.theme;
   return (
-    <ThemeProvider theme={theme}>
+    <ClickUIProvider
+      theme={theme}
+      config={{ tooltip: { delayDuration: 0 } }}
+    >
       <ThemeBlock $left>
         <StoryFn />
       </ThemeBlock>
-    </ThemeProvider>
+    </ClickUIProvider>
   );
 };
 

diff --git a/README.md b/README.md
@@ -7,10 +7,10 @@ Click UI has been tested in NextJS, Gatsby, and Vite. If you run into problems u
    `npm i @clickhouse/click-ui`
    or
    `yarn add @clickhouse/click-ui`
-2. Make sure to wrap your application in the Click UI `ThemeProvider`, without doing this, you may run into issues with styled-components. Once thats done, you'll be able to import the individual components that you want to use on each page. Here's an example an `App.tsx` in NextJS.
+2. Make sure to wrap your application in the Click UI `ClickUIProvider`, without doing this, you may run into issues with styled-components. Once thats done, you'll be able to import the individual components that you want to use on each page. Here's an example an `App.tsx` in NextJS.
 
 ```
-import { Switch, Text, ThemeName, ThemeProvider, Title } from '@clickhouse/click-ui'
+import { Switch, Text, ThemeName, ClickUIProvider, Title } from '@clickhouse/click-ui'
 
 function App() {
   const [theme, setTheme] = useState<ThemeName>('dark')
@@ -20,25 +20,25 @@ function App() {
   }
 
   return (
-    <ThemeProvider theme={theme}>
+    <ClickUIProvider theme={theme} config={{tooltip:{ delayDuration: 0 }}}>
       <Switch checked={theme === 'dark'} onClick={() => toggleTheme() } />
 
       <Title type='h1'>Click UI Example</Title>
       <Text>Welcome to Click UI. Get started here.</Text>
-    </ThemeProvider>
+    </ClickUIProvider>
   )
 }
 
 export default App
 ```
-    
+
 
 
 ### To develop this library locally 🚀
 1. Clone this repo, cd into the `click-ui` directory
-2. To install dependencies, run `npm i` 
+2. To install dependencies, run `npm i`
 3. To build the latest styles, run `npm run generate-tokens`
 4. To run ClickUI locally, run `npm run dev` and navigate to https://localhost:5173
 5. To run Storybook locally, run `npm run storybook` and navigate to https://localhost:6006
 
-Enjoy! 
+Enjoy!
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,14 +5,15 @@ import "./styles/variables.css";
 import "./styles/variables.dark.css";
 
 import styles from "./App.module.css";
-import { ThemeName, ThemeProvider } from "./theme";
+import { ThemeName } from "./theme";
 import {
   Accordion,
   Alert,
   Avatar,
   Badge,
   Button,
   ButtonGroup,
+  ClickUIProvider,
   CardSecondary,
   Checkbox,
   DangerAlert,
@@ -35,7 +36,10 @@ const App = () => {
   const [disabled] = useState(false);
 
   return (
-    <ThemeProvider theme={currentTheme}>
+    <ClickUIProvider
+      theme={currentTheme}
+      config={{ tooltip: { delayDuration: 0 } }}
+    >
       <div className={styles.flexWrap}>
         <IconButton
           icon="user"
@@ -233,7 +237,7 @@ const App = () => {
         title="Title"
       />
       <Avatar text="CH" />
-    </ThemeProvider>
+    </ClickUIProvider>
   );
 };
 

diff --git a/src/Introduction.mdx b/src/Introduction.mdx
@@ -12,18 +12,18 @@ While this library is primarily meant for ClickHouse designers and developers, i
 
 The source code is available on [GitHub](https://github.com/ClickHouse/click-ui) and the latest version of the package can be on [npm.js](https://www.npmjs.com/package/@clickhouse/click-ui). Once ready, we’ll be publishing the design system to the Figma community.
 <br />
---- 
+---
 <br />
 ### Using Click UI in an external app
 Click UI has been tested in NextJS, Gatsby, and Vite. If you run into problems using it in your app, please create an issue and our team will try to answer.
 1. Navigate to your app's route and run
    `npm i @clickhouse/click-ui`
    or
    `yarn add @clickhouse/click-ui`
-2. Make sure to wrap your application in the Click UI `ThemeProvider`, without doing this, you may run into issues with styled-components. Once thats done, you'll be able to import the individual components that you want to use on each page. Here's an example an `App.tsx` in NextJS.
+2. Make sure to wrap your application in the Click UI `ClickUIProvider`, without doing this, you may run into issues with styled-components. Once thats done, you'll be able to import the individual components that you want to use on each page. Here's an example an `App.tsx` in NextJS.
 
 ```
-import { Switch, Text, ThemeName, ThemeProvider, Title } from '@clickhouse/click-ui'
+import { Switch, Text, ThemeName, ClickUIProvider, Title } from '@clickhouse/click-ui'
 
 function App() {
   const [theme, setTheme] = useState<ThemeName>('dark')
@@ -33,25 +33,25 @@ function App() {
   }
 
   return (
-    <ThemeProvider theme={theme}>
+    <ClickUIProvider theme={theme}>
       <Switch checked={theme === 'dark'} onClick={() => toggleTheme() } />
 
       <Title type='h1'>Click UI Example</Title>
       <Text>Welcome to Click UI. Get started here.</Text>
-    </ThemeProvider>
+    </ClickUIProvider>
   )
 }
 
 export default App
 ```
-    
+
 
 
 ### To develop this library locally 🚀
 1. Clone this repo, cd into the `click-ui` directory
-2. To install dependencies, run `npm i` 
+2. To install dependencies, run `npm i`
 3. To build the latest styles, run `npm run generate-tokens`
 4. To run Click UI locally, run `npm run dev` and navigate to [https://localhost:5173](https://localhost:5173)
 5. To run Storybook locally, run `npm run storybook` and navigate to [https://localhost:6006](https://localhost:6006)
 
-Enjoy! 
+Enjoy!
diff --git a/src/components/ClickUIProvider/ClickUIProvider.tsx b/src/components/ClickUIProvider/ClickUIProvider.tsx
@@ -0,0 +1,31 @@
+import {
+  Provider as TooltipProvider,
+  TooltipProviderProps,
+} from "@radix-ui/react-tooltip";
+import { ToastProps } from "@radix-ui/react-toast";
+import { ToastProvider } from "@/components/Toast/Toast";
+import { ThemeName } from "@/theme";
+import { ThemeProvider } from "@/theme/theme";
+import { ReactNode } from "react";
+
+interface Props {
+  config?: {
+    tooltip?: Omit<TooltipProviderProps, "children">;
+    toast?: Omit<ToastProps, "children">;
+  };
+  theme: ThemeName;
+  children: ReactNode;
+}
+
+const ClickUIProvider = ({ children, theme, config = {} }: Props) => {
+  const { toast = {}, tooltip = {} } = config;
+  return (
+    <ThemeProvider theme={theme}>
+      <ToastProvider {...toast}>
+        <TooltipProvider {...tooltip}>{children}</TooltipProvider>
+      </ToastProvider>
+    </ThemeProvider>
+  );
+};
+
+export default ClickUIProvider;
diff --git a/src/components/Link/Link.test.tsx b/src/components/Link/Link.test.tsx
@@ -1,6 +1,5 @@
-import { render } from "@testing-library/react";
 import { Link } from "./Link";
-import { ThemeProvider } from "@/theme";
+import { renderCUI } from "@/utils/test-utils";
 
 interface LinkProps {
   hasIcon?: boolean;
@@ -10,20 +9,16 @@ describe("Link Component", () => {
   const text = "text to render";
 
   const renderLink = (props: LinkProps) => {
-    return render(
-      <ThemeProvider theme="light">
-        <Link {...props}>{text}</Link>
-      </ThemeProvider>
-    );
+    return renderCUI(<Link {...props}>{text}</Link>);
   };
 
   test("renders the text", () => {
-    const rendered = renderLink({ hasIcon: false});
+    const rendered = renderLink({ hasIcon: false });
     expect(rendered.getByText(text).textContent).toEqual(text);
   });
 
   test("displays icon when isExternal is true", () => {
     const rendered = renderLink({ hasIcon: true });
     expect(rendered.getAllByTestId("external-icon").length).toEqual(1);
   });
-});
+});
diff --git a/src/components/Logos/Logos.mdx b/src/components/Logos/Logos.mdx
@@ -1,18 +1,18 @@
 import { Meta, IconGallery, IconItem } from "@storybook/blocks";
 import LogosLight from "./LogosLight.ts"
 import { Logo } from "./Logo"
-import { ThemeProvider } from "../../theme";
+import { ClickUIProvider } from "..";
 
 <Meta title='Display/Logo/Logos' />
 
 # Logos
 
-<ThemeProvider theme='light'>
+<ClickUIProvider theme='light'>
 <IconGallery>
   {Object.keys(LogosLight).map((iconName) => (
     <IconItem name={iconName} key={iconName}>
       <Logo name={iconName} />
     </IconItem>
   ))}
 </IconGallery>
-</ThemeProvider>
+</ClickUIProvider>
diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx
@@ -1,4 +1,4 @@
-import { Button, useToast, ToastProvider, ToastProps } from "@/components";
+import { Button, useToast, ToastProps } from "@/components";
 const ToastTrigger = (props: ToastProps) => {
   const { createToast } = useToast();
   return (
@@ -12,11 +12,7 @@ const ToastTrigger = (props: ToastProps) => {
   );
 };
 const ToastExample = (props: ToastProps) => {
-  return (
-    <ToastProvider>
-      <ToastTrigger {...props} />
-    </ToastProvider>
-  );
+  return <ToastTrigger {...props} />;
 };
 export default {
   component: ToastExample,

diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
@@ -3,10 +3,10 @@ import * as RadixUIToast from "@radix-ui/react-toast";
 import { Button, ButtonProps, Icon, IconButton, IconName } from "@/components";
 import styled, { keyframes } from "styled-components";
 
-interface ContextProps {
+interface ToastContextProps {
   createToast: (toast: ToastProps) => void;
 }
-export const ToastContext = createContext<ContextProps>({
+export const ToastContext = createContext<ToastContextProps>({
   createToast: () => null,
 });
 

diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -1,21 +1,11 @@
 import { TooltipProps } from "@radix-ui/react-tooltip";
-import { Tooltip, TooltipProvider } from "./Tooltip";
+import { Tooltip } from "./Tooltip";
 
 interface Props extends TooltipProps {
   showArrow?: boolean;
-  delayDuration?: number;
-  skipDelayDuration?: number;
-  disableHoverableContent?: boolean;
   side: "top" | "right" | "left" | "bottom";
 }
-const TooltipExample = ({
-  delayDuration,
-  skipDelayDuration,
-  showArrow,
-  disableHoverableContent,
-  side,
-  ...props
-}: Props) => {
+const TooltipExample = ({ showArrow, side, ...props }: Props) => {
   return (
     <div
       style={{
@@ -25,23 +15,17 @@ const TooltipExample = ({
         height: "100%",
       }}
     >
-      <TooltipProvider
-        delayDuration={delayDuration}
-        disableHoverableContent={disableHoverableContent}
-        skipDelayDuration={skipDelayDuration}
-      >
-        <Tooltip {...props}>
-          <Tooltip.Trigger>
-            <div>Tooltip Trigger(Hover)</div>
-          </Tooltip.Trigger>
-          <Tooltip.Content
-            showArrow={showArrow}
-            side={side}
-          >
-            Tooltip content
-          </Tooltip.Content>
-        </Tooltip>
-      </TooltipProvider>
+      <Tooltip {...props}>
+        <Tooltip.Trigger>
+          <div>Tooltip Trigger(Hover)</div>
+        </Tooltip.Trigger>
+        <Tooltip.Content
+          showArrow={showArrow}
+          side={side}
+        >
+          Tooltip content
+        </Tooltip.Content>
+      </Tooltip>
     </div>
   );
 };
@@ -53,9 +37,6 @@ export default {
     open: { control: "inline-radio", options: [undefined, true, false] },
     defaultOpen: { control: "boolean" },
     showArrow: { control: "boolean" },
-    delayDuration: { control: "number" },
-    skipDelayDuration: { control: "number" },
-    disableHoverableContent: { control: "boolean" },
     side: { control: "select", options: ["top", "right", "left", "bottom"] },
   },
 };

diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
@@ -1,20 +1,18 @@
 import { TooltipProps } from "@radix-ui/react-tooltip";
-import { Tooltip, TooltipProvider } from "..";
+import { Tooltip } from "..";
 import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { renderCUI } from "@/utils/test-utils";
 
 describe("Tooltip", () => {
   const renderTooltip = (props: TooltipProps) =>
     renderCUI(
-      <TooltipProvider delayDuration={0}>
-        <Tooltip {...props}>
-          <Tooltip.Trigger>
-            <div>Hover Here</div>
-          </Tooltip.Trigger>
-          <Tooltip.Content data-testid="tooltip-content">Tooltip content</Tooltip.Content>
-        </Tooltip>
-      </TooltipProvider>
+      <Tooltip {...props}>
+        <Tooltip.Trigger>
+          <div>Hover Here</div>
+        </Tooltip.Trigger>
+        <Tooltip.Content data-testid="tooltip-content">Tooltip content</Tooltip.Content>
+      </Tooltip>
     );
 
   it("should open tooltip on hover", async () => {

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -1,13 +1,6 @@
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 import styled from "styled-components";
 
-export const TooltipProvider = ({
-  children,
-  ...props
-}: RadixTooltip.TooltipProviderProps) => {
-  return <RadixTooltip.Provider {...props}>{children}</RadixTooltip.Provider>;
-};
-
 export const Tooltip = ({ children, ...props }: RadixTooltip.TooltipProps) => {
   return <RadixTooltip.Root {...props}>{children}</RadixTooltip.Root>;
 };