feat: themming with provider and utils for theme actions

Author: Thauan

.storybook/main.ts

@@ -1,5 +1,8 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
 
+const path = require("path");
+const toPath = (filePath) => path.join(process.cwd(), filePath);
+
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
@@ -13,5 +16,18 @@ const config: StorybookConfig = {
     name: "@storybook/react-webpack5",
     options: {},
   },
+  webpackFinal: async (config) => {
+    return {
+      ...config!,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config!.resolve!.alias,
+          "@emotion/core": toPath("node_modules/@emotion/react"),
+          "emotion-theming": toPath("node_modules/@emotion/react"),
+        },
+      },
+    };
+  },
 };
 export default config;

.storybook/preview.ts

@@ -1,14 +1,24 @@
 import type { Preview } from "@storybook/react";
+import { withThemeProvider } from "../src/utils/withThemeProvider";
 
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
+export const decorators = [withThemeProvider];
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    expanded: true,
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/i,
     },
   },
+  docs: {
+    inlineStories: true,
+  },
+};
+
+const preview: Preview = {
+  parameters,
 };
 
 export default preview;

src/components/Button/Button.stories.tsx

@@ -1,10 +1,47 @@
 import React from "react";
-import { Button } from "./Button";
+import { Button, ButtonWithLoading } from ".";
+import { WithLoadingProps } from "../../hoc/withLoading";
+import { ButtonProps } from "./Button.styles";
 
 export default {
   title: "Components/Button",
   component: Button,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["primary", "secondary"],
+    },
+    isLoading: {
+      control: { type: "boolean" },
+    },
+    loadingText: {
+      control: { type: "text" },
+    },
+    children: {
+      control: { type: "text" },
+    },
+  },
 };
 
-export const Primary = () => <Button>Primary Button</Button>;
-export const Secondary = () => <Button variant="secondary">Secondary Button</Button>;
+const Template = (args: React.JSX.IntrinsicAttributes & ButtonProps) => <Button {...args} />;
+const LoadingTemplate = (args: React.JSX.IntrinsicAttributes & WithLoadingProps & ButtonProps) => <ButtonWithLoading {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  children: "Primary Button",
+  variant: "primary",
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  children: "Secondary Button",
+  variant: "secondary",
+};
+
+export const WithLoading = LoadingTemplate.bind({});
+WithLoading.args = {
+  children: "Secondary Button",
+  variant: "secondary",
+  isLoading: true,
+  loadingText: "Loading...",
+};

src/components/Button/Button.styles.ts

@@ -2,20 +2,33 @@ import styled from "@emotion/styled";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
   variant?: "primary" | "secondary";
 }
 
 export const StyledButton = styled.button<ButtonProps>`
-  padding: 10px 20px;
+  padding: 10px 30px;
   font-size: 1rem;
   border-radius: 5px;
   border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
   cursor: pointer;
   background-color: ${({ variant }) =>
     variant === "secondary" ? "gray" : "blue"};
   color: white;
+  transition: all 0.3s ease;
 
   &:hover {
     opacity: 0.9;
+    transform: scale(1.04);
+  }
+
+  &:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
   }
 `;

src/components/Button/Button.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import { ButtonProps, StyledButton } from "./Button.styles";
 
-export const Button: React.FC<ButtonProps> = ({ variant = "primary", ...props }) => {
-  return <StyledButton variant={variant} {...props} />;
+export const Button: React.FC<ButtonProps> = ({ variant = "primary", children, ...props }) => {
+  return (
+    <StyledButton variant={variant} {...props}>
+      {children}
+    </StyledButton>
+  );
 };

src/components/Button/index.tsx

@@ -0,0 +1,6 @@
+import { Button as ButtonBase } from "./Button";
+import { withLoading } from "../../hoc/withLoading";
+
+export const Button = ButtonBase;
+
+export const ButtonWithLoading = withLoading(ButtonBase);

src/contexts/ThemeProvider.tsx

@@ -0,0 +1,40 @@
+import React, { createContext, useContext, useState } from "react";
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
+import { lightTheme, darkTheme, Theme } from "../theme/defaultTheme";
+
+interface ThemeContextProps {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextProps | undefined>(undefined);
+
+interface LnbThemeProviderProps {
+  children: React.ReactNode;
+  theme?: Theme;
+}
+
+export const LnbThemeProvider: React.FC<LnbThemeProviderProps> = ({
+  children,
+  theme = lightTheme,
+}) => {
+    const [currentTheme, setCurrentTheme] = useState<Theme>(theme);
+
+  const toggleTheme = () => {
+    setCurrentTheme((prev: any) => (prev === lightTheme ? darkTheme : lightTheme));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme: currentTheme, toggleTheme }}>
+      <EmotionThemeProvider theme={currentTheme}>{children}</EmotionThemeProvider>
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = (): ThemeContextProps => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a CustomThemeProvider");
+  }
+  return context;
+};

src/hoc/withLoading/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StyledSpinner } from './spinner';
+import { useTheme } from '../../contexts/ThemeProvider';
+
+export interface WithLoadingProps {
+    isLoading?: boolean;
+    children: React.ReactNode;
+    variant?: "primary" | "secondary";
+    loadingText?: string;
+}
+
+export interface SpinnerProps {
+  variant?: "primary" | "secondary";
+}
+  
+
+function Spinner({ variant = "primary" }: SpinnerProps) {
+  const { theme } = useTheme();
+  
+  console.log(theme.colors[variant])
+  return (
+    <StyledSpinner viewBox="0 0 50 50">
+      <circle
+        className="path"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        strokeWidth="4"
+        stroke={theme.colors[variant]}
+      />
+    </StyledSpinner>
+  )
+}
+  
+export function withLoading<T extends object>(
+  WrappedComponent: React.ComponentType<T>
+) {
+  return ({
+    isLoading = false,
+    loadingText = "Carregando...",
+    variant = "primary",
+    children,
+    ...props
+  }: WithLoadingProps & T) => {
+    return (
+      <WrappedComponent
+        {...(props as T)}
+        disabled={isLoading || (props as any).disabled}
+      >
+        {isLoading ? <>{loadingText} <Spinner variant={variant} /></> : children}
+      </WrappedComponent>
+    );
+  };
+}
+  

src/hoc/withLoading/spinner.ts

@@ -0,0 +1,32 @@
+import styled from "@emotion/styled";
+
+export const StyledSpinner = styled.svg`
+  animation: rotate 2s linear infinite;
+  width: 20px;
+  height: 20px;
+
+  & .path {
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 150;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -124;
+    }
+  }
+`;

src/theme/defaultTheme.ts

@@ -1,7 +1,31 @@
-export const defaultTheme = {
+export const lightTheme = {
   colors: {
-    primary: "#007BFF",
+    background: "#ffffff",
+    text: "#000000",
+    primary: "#dc3545",
     secondary: "#6C757D",
+    border: "#DDDDDD",
   },
   spacing: (factor: number) => `${factor * 8}px`,
+  typography: {
+    fontFamily: "'Roboto', sans-serif",
+    fontSize: "16px",
+  },
+};
+
+export const darkTheme = {
+  colors: {
+    background: "#121212",
+    text: "#ffffff",
+    primary: "#1E88E5",
+    secondary: "#8A8A8A",
+    border: "#333333",
+  },
+  spacing: (factor: number) => `${factor * 8}px`,
+  typography: {
+    fontFamily: "'Roboto', sans-serif",
+    fontSize: "16px",
+  },
 };
+
+export type Theme = typeof lightTheme;

src/utils/withThemeProvider.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { LnbThemeProvider } from "../contexts/ThemeProvider";
+import { lightTheme } from "../theme/defaultTheme";
+
+export const withThemeProvider = (Story: any, context: any) => {
+    return (<LnbThemeProvider theme={lightTheme}><Story /></LnbThemeProvider>)
+};