@mindlogic-ai/logician-ui 2.0.0-alpha.2 → 2.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/LogicianProvider/LogicianProvider.stories.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { LogicianProvider } from "./LogicianProvider";
+import { Button } from "../Button";
+import { H1, Text } from "../Typography";
+import { Box, VStack } from "@chakra-ui/react";
+
+const meta: Meta<typeof LogicianProvider> = {
+  title: "Setup/LogicianProvider",
+  component: LogicianProvider,
+  parameters: { disableLogicianProvider: true },
+};
+
+export default meta;
+type Story = StoryObj<typeof LogicianProvider>;
+
+const SampleContent = () => (
+  <VStack spacing={6} p={8} align="start">
+    <H1 size="lg">Logician Design System</H1>
+    <Text fontSize="p">
+      This is a sample application wrapped in LogicianProvider. The provider
+      automatically applies the Logician theme to all Chakra UI components.
+    </Text>
+    <Box>
+      <Button variant="primary" mr={4}>
+        Primary Button
+      </Button>
+      <Button variant="secondary">Secondary Button</Button>
+    </Box>
+    <Text fontSize="subtitle" color="gray.1200">
+      This text uses the custom font sizes and colors from the Logician theme.
+    </Text>
+  </VStack>
+);
+
+export const Default: Story = {
+  render: () => (
+    <LogicianProvider>
+      <SampleContent />
+    </LogicianProvider>
+  ),
+};
+
+export const WithCustomTheme: Story = {
+  render: () => {
+    const customTheme = {
+      colors: {
+        primary: {
+          light: "purple.300",
+          main: "purple.500",
+          dark: "purple.700",
+        },
+      },
+      semanticTokens: {
+        colors: {
+          primary: {
+            light: "purple.300",
+            main: "purple.500",
+            dark: "purple.700",
+          },
+        },
+      },
+    };
+
+    return (
+      <LogicianProvider theme={customTheme}>
+        <SampleContent />
+      </LogicianProvider>
+    );
+  },
+};

package/src/components/LogicianProvider/LogicianProvider.tsx

@@ -0,0 +1,82 @@
+'use client';
+import React from 'react';
+import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react';
+
+import theme from '../../theme';
+
+/**
+ * Deep merge utility function that recursively merges objects
+ */
+function deepMerge<T extends Record<string, any>>(
+  target: T,
+  source: Partial<T>
+): T {
+  const result = { ...target };
+
+  for (const key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      const sourceValue = source[key];
+      const targetValue = result[key];
+
+      if (
+        sourceValue &&
+        typeof sourceValue === 'object' &&
+        !Array.isArray(sourceValue) &&
+        targetValue &&
+        typeof targetValue === 'object' &&
+        !Array.isArray(targetValue)
+      ) {
+        // Recursively merge nested objects
+        result[key] = deepMerge(targetValue, sourceValue);
+      } else {
+        // Override primitive values, arrays, or null/undefined
+        result[key] = sourceValue;
+      }
+    }
+  }
+
+  return result;
+}
+
+export interface LogicianProviderProps
+  extends Omit<ChakraProviderProps, 'theme'> {
+  /**
+   * Custom theme to override the default Logician theme
+   */
+  theme?: ChakraProviderProps['theme'];
+}
+
+/**
+ * LogicianProvider component that wraps ChakraProvider with the LogicianUI design system theme.
+ *
+ * This provider should be placed at the root of your application to provide
+ * the Logician design system theme and styling to all child components.
+ *
+ * @example
+ * ```tsx
+ * import { LogicianProvider } from '@mindlogic/logician-ui';
+ *
+ * function App() {
+ *   return (
+ *     <LogicianProvider>
+ *       <YourApp />
+ *     </LogicianProvider>
+ *   );
+ * }
+ * ```
+ */
+export const LogicianProvider: React.FC<LogicianProviderProps> = ({
+  children,
+  theme: customTheme,
+  ...rest
+}) => {
+  const mergedTheme = customTheme ? deepMerge(theme, customTheme) : theme;
+
+  return (
+    <ChakraProvider theme={mergedTheme} {...rest}>
+      {children}
+    </ChakraProvider>
+  );
+};
+
+LogicianProvider.displayName = 'LogicianProvider';

package/src/components/LogicianProvider/index.ts

@@ -0,0 +1 @@
+export * from './LogicianProvider';