@mindlogic-ai/logician-ui 2.0.0 → 3.0.0-alpha.1

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 
 import { Accordion, AccordionButton, AccordionItem, AccordionPanel } from '.';
 
@@ -11,7 +12,7 @@ const meta = {
   render: (args) => {
     return (
       <Accordion {...args}>
-        <AccordionItem>
+        <AccordionItem value="item-1">
           <AccordionButton>Test button</AccordionButton>
           <AccordionPanel>Test panel</AccordionPanel>
         </AccordionItem>
@@ -30,11 +31,11 @@ export const TwoItems: Story = {
   render: (args) => {
     return (
       <Accordion {...args}>
-        <AccordionItem>
+        <AccordionItem value="item-1">
           <AccordionButton>Test button</AccordionButton>
           <AccordionPanel>Test panel</AccordionPanel>
         </AccordionItem>
-        <AccordionItem>
+        <AccordionItem value="item-2">
           <AccordionButton>Test button 2</AccordionButton>
           <AccordionPanel>Test panel 2</AccordionPanel>
         </AccordionItem>
@@ -42,3 +43,191 @@ export const TwoItems: Story = {
     );
   },
 };
+
+export const EnclosedVariant: Story = {
+  args: {
+    variant: 'enclosed',
+  },
+  render: (args) => {
+    return (
+      <Accordion {...args}>
+        <AccordionItem value="item-1">
+          <AccordionButton>Section 1</AccordionButton>
+          <AccordionPanel>Content for section 1</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionButton>Section 2</AccordionButton>
+          <AccordionPanel>Content for section 2</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionButton>Section 3</AccordionButton>
+          <AccordionPanel>Content for section 3</AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+};
+
+export const OutlineVariant: Story = {
+  args: {
+    variant: 'outline',
+  },
+  render: (args) => {
+    return (
+      <Accordion {...args}>
+        <AccordionItem value="item-1">
+          <AccordionButton>Section 1</AccordionButton>
+          <AccordionPanel>Content for section 1</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionButton>Section 2</AccordionButton>
+          <AccordionPanel>Content for section 2</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionButton>Section 3</AccordionButton>
+          <AccordionPanel>Content for section 3</AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+};
+
+export const SubtleVariant: Story = {
+  args: {
+    variant: 'subtle',
+  },
+  render: (args) => {
+    return (
+      <Accordion {...args}>
+        <AccordionItem value="item-1">
+          <AccordionButton>Section 1</AccordionButton>
+          <AccordionPanel>Content for section 1</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionButton>Section 2</AccordionButton>
+          <AccordionPanel>Content for section 2</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionButton>Section 3</AccordionButton>
+          <AccordionPanel>Content for section 3</AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+};
+
+export const PlainVariant: Story = {
+  args: {
+    variant: 'plain',
+  },
+  render: (args) => {
+    return (
+      <Accordion {...args}>
+        <AccordionItem value="item-1">
+          <AccordionButton>Section 1</AccordionButton>
+          <AccordionPanel>Content for section 1</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionButton>Section 2</AccordionButton>
+          <AccordionPanel>Content for section 2</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionButton>Section 3</AccordionButton>
+          <AccordionPanel>Content for section 3</AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+};
+
+export const Collapsible: Story = {
+  args: {
+    collapsible: true,
+    multiple: false,
+  },
+  render: (args) => {
+    return (
+      <Accordion {...args}>
+        <AccordionItem value="item-1">
+          <AccordionButton>Section 1 (only one can be open)</AccordionButton>
+          <AccordionPanel>Content for section 1</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionButton>Section 2 (only one can be open)</AccordionButton>
+          <AccordionPanel>Content for section 2</AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionButton>Section 3 (only one can be open)</AccordionButton>
+          <AccordionPanel>Content for section 3</AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+};
+
+export const WithCustomContent: Story = {
+  args: {
+    lazyMount: true,
+    unmountOnExit: true,
+  },
+  render: (args) => {
+    return (
+      <Accordion {...args} borderColor="red.500">
+        <AccordionItem value="errors">
+          <AccordionButton bg="red.50" p={3} borderBottomColor="red.500">
+            <Flex align="center" gap={2}>
+              <Box
+                as="span"
+                fontSize="xl"
+                color="red.500"
+                aria-label="Error icon"
+              >
+                ⚠️
+              </Box>
+              <Text fontWeight="bold" color="gray.800">
+                Failed Upload Rows (3 errors)
+              </Text>
+            </Flex>
+          </AccordionButton>
+          <AccordionPanel p={4}>
+            <Box bg="gray.50" p={4} borderRadius="md">
+              <Text fontSize="sm" color="gray.700" mb={2}>
+                This heavy content is lazy-loaded only when expanded
+              </Text>
+              <Box as="ul" pl={4}>
+                <li>Error 1: Invalid email format</li>
+                <li>Error 2: Duplicate entry</li>
+                <li>Error 3: Required field missing</li>
+              </Box>
+            </Box>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="warnings">
+          <AccordionButton bg="yellow.50" p={3} borderBottomColor="yellow.500">
+            <Flex align="center" gap={2}>
+              <Box
+                as="span"
+                fontSize="xl"
+                color="yellow.600"
+                aria-label="Warning icon"
+              >
+                ⚡
+              </Box>
+              <Text fontWeight="bold" color="gray.800">
+                Warning Messages (2 warnings)
+              </Text>
+            </Flex>
+          </AccordionButton>
+          <AccordionPanel p={4}>
+            <Box bg="gray.50" p={4} borderRadius="md">
+              <Text fontSize="sm" color="gray.700">
+                Content is mounted when expanded and unmounted when collapsed
+                (check React DevTools)
+              </Text>
+            </Box>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+};

package/src/components/Accordion/Accordion.tsx

@@ -1,14 +1,22 @@
-import { Accordion as ChakraAccordion, AccordionProps } from '@chakra-ui/react';
+import {
+  Accordion as ChakraAccordion,
+  AccordionRootProps as ChakraAccordionRootProps,
+} from '@chakra-ui/react';
 
-export const Accordion = (props: AccordionProps) => {
+export type AccordionProps = ChakraAccordionRootProps;
+
+export const Accordion = ({
+  collapsible,
+  multiple = true,
+  variant = 'enclosed',
+  ...rest
+}: AccordionProps) => {
   return (
-    <ChakraAccordion
-      allowMultiple
-      borderRadius={4}
-      overflow="hidden"
-      border="1px solid"
-      borderColor="gray.300"
-      {...props}
+    <ChakraAccordion.Root
+      collapsible={collapsible}
+      multiple={multiple}
+      variant={variant}
+      {...rest}
     />
   );
 };

package/src/components/Accordion/AccordionButton.tsx

@@ -1,40 +1,21 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import {
-  AccordionButton as ChakraAccordionButton,
-  AccordionIcon,
-  ChakraProps,
-  Flex,
-} from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import type { AccordionItemTriggerProps } from '@chakra-ui/react';
+import { Accordion, HStack } from '@chakra-ui/react';
 
-import theme from '@/theme/index';
+export type AccordionButtonProps = AccordionItemTriggerProps & {
+  children?: ReactNode;
+  customIcon?: ReactNode;
+};
 
 export const AccordionButton = ({
-  _hover = {},
-  _expanded = {},
-  customIcon = undefined,
+  customIcon,
   children,
   ...rest
-}: PropsWithChildren<ChakraProps> & {
-  customIcon?: ReactNode;
-}) => {
+}: AccordionButtonProps) => {
   return (
-    <ChakraAccordionButton
-      _hover={{
-        bg: `${theme.colors.main}08`,
-        ..._hover,
-      }}
-      _expanded={{
-        bg: `${theme.colors.main}12`,
-        borderBottomWidth: '1px',
-        ..._expanded,
-      }}
-      fontWeight="bold"
-      {...rest}
-    >
-      <Flex w="100%" justify="space-between" align="center">
-        {children}
-        {customIcon ? customIcon : <AccordionIcon />}
-      </Flex>
-    </ChakraAccordionButton>
+    <Accordion.ItemTrigger fontWeight="bold" {...rest}>
+      <HStack flex="1">{children}</HStack>
+      {customIcon ?? <Accordion.ItemIndicator />}
+    </Accordion.ItemTrigger>
   );
 };

package/src/components/Accordion/AccordionItem.tsx

@@ -1,17 +1,10 @@
-import { AccordionItem as ChakraAccordionItem } from '@chakra-ui/react';
+import {
+  Accordion,
+  AccordionItemProps as ChakraAccordionItemProps,
+} from '@chakra-ui/react';
 
-export const AccordionItem = ({ _first = {}, _last = {}, ...rest }) => {
-  return (
-    <ChakraAccordionItem
-      _first={{
-        borderTopWidth: 0,
-        ..._first,
-      }}
-      _last={{
-        borderBottomWidth: 0,
-        ..._last,
-      }}
-      {...rest}
-    />
-  );
+export type AccordionItemProps = ChakraAccordionItemProps;
+
+export const AccordionItem = (props: AccordionItemProps) => {
+  return <Accordion.Item {...props} />;
 };

package/src/components/Accordion/AccordionPanel.tsx

@@ -0,0 +1,29 @@
+import {
+  Accordion,
+  AccordionItemContentProps as ChakraAccordionItemContentProps,
+} from '@chakra-ui/react';
+
+export type AccordionPanelProps = ChakraAccordionItemContentProps;
+
+/**
+ * @deprecated This component doesn't exist in Chakra UI v3. Use `Accordion.ItemContent` and `Accordion.ItemBody` directly instead.
+ * This component will be removed in the next major version.
+ *
+ * @example
+ * ```tsx
+ * // Before
+ * <AccordionPanel>Content here</AccordionPanel>
+ *
+ * // After (Chakra v3)
+ * <Accordion.ItemContent>
+ *   <Accordion.ItemBody>Content here</Accordion.ItemBody>
+ * </Accordion.ItemContent>
+ * ```
+ */
+export const AccordionPanel = ({ children, ...rest }: AccordionPanelProps) => {
+  return (
+    <Accordion.ItemContent {...rest}>
+      <Accordion.ItemBody>{children}</Accordion.ItemBody>
+    </Accordion.ItemContent>
+  );
+};

package/src/components/Accordion/index.ts

@@ -1,4 +1,8 @@
+export type { AccordionProps } from './Accordion';
 export { Accordion } from './Accordion';
+export type { AccordionButtonProps } from './AccordionButton';
 export { AccordionButton } from './AccordionButton';
+export type { AccordionItemProps } from './AccordionItem';
 export { AccordionItem } from './AccordionItem';
-export { AccordionPanel } from '@chakra-ui/react';
+export type { AccordionPanelProps } from './AccordionPanel';
+export { AccordionPanel } from './AccordionPanel';