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

package/src/components/Select/Select.stories.tsx

@@ -1,5 +1,6 @@
-import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Box, Text } from '@chakra-ui/react';
 
 import { Select } from '.';
 
@@ -38,43 +39,393 @@ export const Combobox: Story = {
   },
 };
 
-export const OnScrollToBottom: Story = {
+export const ManyOptions: Story = {
   args: {
-    options: Array.from({ length: 50 }, (_, i) => ({
+    options: Array.from({ length: 100 }, (_, i) => ({
       label: `Option ${i + 1}`,
       value: `option${i + 1}`,
     })),
-    onMenuScrollToBottom: () => {
-      console.log('scrolled to bottom');
-    },
   },
 };
 
-export const OnScrollToBottomNewItems: Story = {
-  render: (args) => {
-    const [options, setOptions] = useState(
-      Array.from({ length: 500 }, (_, i) => ({
-        label: `Option ${i + 1}`,
-        value: `option${i + 1}`,
-      }))
-    );
-    return (
+export const WithValueDisplay = () => {
+  const [selectedOption, setSelectedOption] = useState<{
+    label: string;
+    value: string;
+  } | null>({ label: 'Option 1', value: 'option1' });
+
+  const options = [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+    { label: 'Option 4', value: 'option4' },
+  ];
+
+  return (
+    <Box>
       <Select
-        {...args}
         options={options}
-        isMulti={true}
-        isSearchable={true}
-        onMenuScrollToBottom={() => {
-          console.log('scrolled to bottom');
-          setOptions((prev) => [
-            ...prev,
-            ...Array.from({ length: 500 }, (_, i) => ({
-              label: `Option ${prev.length + i + 1}`,
-              value: `option${prev.length + i + 1}`,
-            })),
-          ]);
-        }}
+        value={selectedOption}
+        onChange={(newValue) => setSelectedOption(newValue)}
       />
+      <Box mt={4} p={4} borderWidth="1px" borderRadius="md" bg="gray.50">
+        <Text fontWeight="semibold" mb={2}>
+          Selected Value:
+        </Text>
+        <Text color="primary.dark" fontWeight="bold">
+          {selectedOption
+            ? `${selectedOption.label} (${selectedOption.value})`
+            : 'None selected'}
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+export const CustomWidth: Story = {
+  render: () => {
+    const options = [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ];
+
+    return (
+      <Box>
+        <Text mb={2} fontWeight="semibold">
+          Width: 200px
+        </Text>
+        <Select
+          options={options}
+          defaultValue={options[0]}
+          styles={{
+            container: (base) => ({
+              ...base,
+              width: 200,
+            }),
+          }}
+        />
+
+        <Text mb={2} mt={6} fontWeight="semibold">
+          Width: 300px
+        </Text>
+        <Select
+          options={options}
+          defaultValue={options[0]}
+          styles={{
+            container: (base) => ({
+              ...base,
+              width: 300,
+            }),
+          }}
+        />
+
+        <Text mb={2} mt={6} fontWeight="semibold">
+          Width: 400px
+        </Text>
+        <Select
+          options={options}
+          defaultValue={options[0]}
+          styles={{
+            container: (base) => ({
+              ...base,
+              width: 400,
+            }),
+          }}
+        />
+
+        <Text mb={2} mt={6} fontWeight="semibold">
+          Width: 50%
+        </Text>
+        <Select
+          options={options}
+          defaultValue={options[0]}
+          styles={{
+            container: (base) => ({
+              ...base,
+              width: '50%',
+            }),
+          }}
+        />
+      </Box>
+    );
+  },
+};
+
+export const CustomHeight: Story = {
+  render: () => {
+    const options = [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ];
+
+    return (
+      <Box>
+        <Text mb={2} fontWeight="semibold">
+          Height: 32px (Compact)
+        </Text>
+        <Select
+          options={options}
+          defaultValue={options[0]}
+          styles={{
+            control: (base) => ({
+              ...base,
+              minHeight: '32px',
+              height: '32px',
+            }),
+            valueContainer: (base) => ({
+              ...base,
+              height: '32px',
+              padding: '0 8px',
+            }),
+            input: (base) => ({
+              ...base,
+              margin: '0px',
+            }),
+            indicatorsContainer: (base) => ({
+              ...base,
+              height: '32px',
+            }),
+          }}
+        />
+
+        <Text mb={2} mt={6} fontWeight="semibold">
+          Height: 48px (Default)
+        </Text>
+        <Select options={options} defaultValue={options[0]} />
+
+        <Text mb={2} mt={6} fontWeight="semibold">
+          Height: 64px (Large)
+        </Text>
+        <Select
+          options={options}
+          defaultValue={options[0]}
+          styles={{
+            control: (base) => ({
+              ...base,
+              minHeight: '64px',
+              height: '64px',
+            }),
+            valueContainer: (base) => ({
+              ...base,
+              height: '64px',
+              padding: '0 16px',
+            }),
+            input: (base) => ({
+              ...base,
+              margin: '0px',
+            }),
+            indicatorsContainer: (base) => ({
+              ...base,
+              height: '64px',
+            }),
+          }}
+        />
+      </Box>
+    );
+  },
+};
+
+export const CustomFontSize: Story = {
+  render: () => {
+    const options = [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ];
+
+    return (
+      <Box>
+        <Text mb={2} fontWeight="semibold">
+          Font Size: 12px (Small)
+        </Text>
+        <Select
+          options={options}
+          defaultValue={options[0]}
+          styles={{
+            control: (base) => ({
+              ...base,
+              fontSize: '12px',
+            }),
+            menu: (base) => ({
+              ...base,
+              fontSize: '12px',
+            }),
+            option: (base) => ({
+              ...base,
+              fontSize: '12px',
+            }),
+          }}
+        />
+
+        <Text mb={2} mt={6} fontWeight="semibold">
+          Font Size: 14px (Default)
+        </Text>
+        <Select options={options} defaultValue={options[0]} />
+
+        <Text mb={2} mt={6} fontWeight="semibold">
+          Font Size: 18px (Large)
+        </Text>
+        <Select
+          options={options}
+          defaultValue={options[0]}
+          styles={{
+            control: (base) => ({
+              ...base,
+              fontSize: '18px',
+            }),
+            menu: (base) => ({
+              ...base,
+              fontSize: '18px',
+            }),
+            option: (base) => ({
+              ...base,
+              fontSize: '18px',
+            }),
+          }}
+        />
+
+        <Text mb={2} mt={6} fontWeight="semibold">
+          Font Size: 24px (Extra Large)
+        </Text>
+        <Select
+          options={options}
+          defaultValue={options[0]}
+          styles={{
+            control: (base) => ({
+              ...base,
+              fontSize: '24px',
+              minHeight: '56px',
+            }),
+            menu: (base) => ({
+              ...base,
+              fontSize: '24px',
+            }),
+            option: (base) => ({
+              ...base,
+              fontSize: '24px',
+              padding: '12px',
+            }),
+            valueContainer: (base) => ({
+              ...base,
+              padding: '0 16px',
+            }),
+          }}
+        />
+      </Box>
+    );
+  },
+};
+
+export const FullyCustomized: Story = {
+  render: () => {
+    const options = [
+      { label: 'Apple', value: 'apple' },
+      { label: 'Banana', value: 'banana' },
+      { label: 'Cherry', value: 'cherry' },
+      { label: 'Date', value: 'date' },
+    ];
+
+    return (
+      <Box>
+        <Text mb={2} fontWeight="semibold">
+          Compact Select with Custom Styling
+        </Text>
+        <Select
+          options={options}
+          defaultValue={options[0]}
+          placeholder="Select a fruit..."
+          styles={{
+            container: (base) => ({
+              ...base,
+              width: '250px',
+            }),
+            control: (base) => ({
+              ...base,
+              minHeight: '36px',
+              height: '36px',
+              fontSize: '13px',
+              borderRadius: '8px',
+              backgroundColor: '#f8f9fa',
+            }),
+            valueContainer: (base) => ({
+              ...base,
+              height: '36px',
+              padding: '0 12px',
+            }),
+            input: (base) => ({
+              ...base,
+              margin: '0px',
+            }),
+            indicatorsContainer: (base) => ({
+              ...base,
+              height: '36px',
+            }),
+            menu: (base) => ({
+              ...base,
+              fontSize: '13px',
+              borderRadius: '8px',
+              marginTop: '4px',
+            }),
+            option: (base) => ({
+              ...base,
+              fontSize: '13px',
+              padding: '8px 12px',
+            }),
+          }}
+        />
+
+        <Text mb={2} mt={8} fontWeight="semibold">
+          Large Select with Bold Typography
+        </Text>
+        <Select
+          options={options}
+          defaultValue={options[1]}
+          styles={{
+            container: (base) => ({
+              ...base,
+              width: '100%',
+            }),
+            control: (base) => ({
+              ...base,
+              minHeight: '60px',
+              height: '60px',
+              fontSize: '20px',
+              fontWeight: '600',
+              borderRadius: '12px',
+              borderWidth: '2px',
+            }),
+            valueContainer: (base) => ({
+              ...base,
+              height: '60px',
+              padding: '0 20px',
+            }),
+            input: (base) => ({
+              ...base,
+              margin: '0px',
+              fontWeight: '600',
+            }),
+            indicatorsContainer: (base) => ({
+              ...base,
+              height: '60px',
+            }),
+            menu: (base) => ({
+              ...base,
+              fontSize: '18px',
+              borderRadius: '12px',
+              marginTop: '8px',
+              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+            }),
+            option: (base) => ({
+              ...base,
+              fontSize: '18px',
+              fontWeight: '500',
+              padding: '14px 20px',
+            }),
+          }}
+        />
+      </Box>
     );
   },
 };

package/src/components/Select/Select.styles.ts

@@ -1,100 +1,76 @@
-import { useToken } from '@chakra-ui/react';
+/**
+ * Select component styles (Chakra v3 compatible)
+ *
+ * Note: These functions accept resolved color values from useToken()
+ * since Chakra v3 doesn't export useTheme() hook.
+ */
 
-import theme from '@/theme/index';
+export type SelectColors = Record<string, string>;
 
-import { SelectVariant } from './Select.types';
-
-export const placeholderStyles = {
-  color: theme.colors.gray[800],
-  fontSize: theme.fontSizes.p,
-  fontWeight: theme.fontWeights.semibold,
-};
+export const getPlaceholderStyles = (colors: SelectColors) => ({
+  color: colors.gray600,
+  fontSize: '14px',
+  fontWeight: 'semibold',
+});
 
-export const menuStyles = {
+export const getMenuStyles = (colors: SelectColors) => ({
   width: 'max-content',
   minWidth: '100%',
-  backgroundColor: theme.colors.white,
-  borderRadius: theme.radii.md,
-  border: `1px solid ${theme.colors.gray[400]}`,
-  marginTop: 3,
+  backgroundColor: 'white',
+  borderRadius: 8,
+  border: `1px solid ${colors.gray300}`,
+  marginTop: 12,
   boxShadow: '0px 5px 20px 0px rgba(0, 0, 0, 0.10)',
   zIndex: 9,
-};
+});
 
-export const optionStyles = ({
-  isDisabled,
-  isFocused,
+export const getOptionStyles = ({
   isSelected,
+  isFocused,
+  isDisabled,
+  colors,
 }: {
-  isDisabled: boolean;
-  isFocused: boolean;
   isSelected: boolean;
+  isFocused: boolean;
+  isDisabled: boolean;
+  colors?: SelectColors;
 }) => ({
   cursor: isDisabled ? 'not-allowed' : 'pointer',
-  height: theme.sizes[9],
-  margin: `${theme.space[1]} 0`,
-  borderRadius: theme.radii.sm,
-  fontSize: theme.fontSizes.p,
+  minHeight: 36,
+  margin: '4px 0',
+  borderRadius: 4,
+  fontSize: 14,
   backgroundColor:
-    isSelected || isFocused || isDisabled
-      ? theme.colors.gray[50]
-      : theme.colors.white,
+    isSelected || isFocused || isDisabled ? colors.primaryLightest : 'white',
   color: isSelected
-    ? theme.colors.gray[1500]
+    ? colors.primaryDark
     : isDisabled
-      ? theme.colors.gray[800]
-      : theme.colors.gray[1200],
-  fontWeight: isSelected
-    ? theme.fontWeights.semibold
-    : theme.fontWeights.normal,
+      ? colors.gray500
+      : colors.gray1200,
+  fontWeight: isSelected ? 700 : 400,
   '&:hover': {
-    backgroundColor: theme.colors.gray[50],
+    backgroundColor: colors.gray50,
   },
 });
 
-export const controlStyles = {
-  borderRadius: theme.radii.md,
-  cursor: 'pointer',
-  maxWidth: '100%',
-  height: '100%',
-  color: theme.colors.gray[1200],
-  fontSize: theme.fontSizes.p,
-  fontWeight: theme.fontWeights.semibold,
-  paddingLeft: 4,
-  paddingRight: 3,
-  border: `1px solid ${theme.colors.gray[400]}`,
-  boxShadow: 'none',
-};
+export const getControlStyles = (variant: string, colors: SelectColors) => {
+  const baseStyles = {
+    borderRadius: 6,
+    cursor: 'pointer',
+    minHeight: 40,
+    fontSize: 14,
+    fontWeight: 600,
+    paddingLeft: 4,
+    paddingRight: 3,
+  };
 
-export const getControlVariantStyles = (state: any, variant: SelectVariant) => {
-  const primaryColor = useToken(
-    'colors',
-    theme.semanticTokens.colors.primary.main
-  );
-  const dangerColor = useToken(
-    'colors',
-    theme.semanticTokens.colors.danger.main
-  );
-  switch (variant) {
-    case 'danger':
-      return {
-        border: `1px solid ${dangerColor}`,
-        boxShadow: `0 0 0 1px ${dangerColor}`,
-      };
-    default:
-      return {
-        fontWeight: theme.fontWeights.semibold,
-        border: `1px solid ${state.isFocused ? primaryColor : theme.colors.gray[400]}`,
-        boxShadow: state.isFocused
-          ? `0 0 0 1px ${primaryColor} !important`
-          : 'none',
-        '&:hover': state.isFocused
-          ? {
-              borderColor: primaryColor,
-            }
-          : {
-              borderColor: useToken('colors', 'gray.600'),
-            },
-      };
+  if (variant === 'danger') {
+    return {
+      ...baseStyles,
+      border: `1px solid ${colors.dangerColor}`,
+      boxShadow: `0 0 0 1px ${colors.dangerColor}`,
+    };
   }
+
+  return baseStyles;
 };