@mindlogic-ai/logician-ui 2.0.0-alpha.0

package/src/components/Radio/Radio.stories.tsx

@@ -0,0 +1,226 @@
+import React, { useState } from 'react';
+import { Box, Stack, VStack } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Radio, RadioGroup } from '.';
+import { RadioOption } from './Radio.types';
+
+const meta: Meta<typeof Radio> = {
+  title: 'Components/Radio',
+  component: Radio,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Radio components allow users to select a single option from a set of mutually exclusive options. Use RadioGroup to manage a collection of related Radio components.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'The label text for the radio button',
+    },
+    value: {
+      control: 'text',
+      description: 'The value of the radio button',
+    },
+    isChecked: {
+      control: 'boolean',
+      description: 'Whether the radio button is checked',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Whether the radio button is disabled',
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg'],
+      description: 'The size of the radio button',
+    },
+  },
+  args: {
+    children: 'Radio option',
+    value: 'option1',
+  },
+};
+
+export default meta;
+type Story = StoryFn<typeof Radio>;
+
+export const Default: Story = (args) => <Radio {...args} />;
+
+export const Checked: Story = (args) => <Radio {...args} isChecked />;
+Checked.args = {
+  children: 'Selected option',
+};
+
+export const Disabled: Story = (args) => (
+  <Stack spacing={3}>
+    <Radio {...args} isDisabled>
+      Disabled unchecked
+    </Radio>
+    <Radio {...args} isDisabled isChecked>
+      Disabled checked
+    </Radio>
+  </Stack>
+);
+
+export const Sizes: Story = (args) => (
+  <Stack spacing={4}>
+    <Radio {...args} size="sm">
+      Small radio
+    </Radio>
+    <Radio {...args} size="md">
+      Medium radio
+    </Radio>
+    <Radio {...args} size="lg">
+      Large radio
+    </Radio>
+  </Stack>
+);
+
+export const States: Story = (args) => (
+  <Stack spacing={3}>
+    <Radio {...args}>Default state</Radio>
+    <Radio {...args} isChecked>
+      Checked state
+    </Radio>
+    <Radio {...args} isDisabled>
+      Disabled state
+    </Radio>
+    <Radio {...args} isDisabled isChecked>
+      Disabled checked state
+    </Radio>
+  </Stack>
+);
+
+export const BasicGroup: StoryFn<typeof RadioGroup> = () => {
+  const [value, setValue] = useState<string>('option1');
+
+  const options: RadioOption[] = [
+    { value: 'option1', label: 'First option' },
+    { value: 'option2', label: 'Second option' },
+    { value: 'option3', label: 'Third option' },
+  ];
+
+  return (
+    <VStack align="flex-start" spacing={4}>
+      <Box>Selected value: {value}</Box>
+      <RadioGroup options={options} value={value} onChange={setValue} />
+    </VStack>
+  );
+};
+
+export const HorizontalGroup: StoryFn<typeof RadioGroup> = () => {
+  const [value, setValue] = useState<string>('email');
+
+  const options: RadioOption[] = [
+    { value: 'email', label: 'Email' },
+    { value: 'sms', label: 'SMS' },
+    { value: 'phone', label: 'Phone call' },
+  ];
+
+  return (
+    <VStack align="flex-start" spacing={4}>
+      <Box>Preferred contact method: {value}</Box>
+      <RadioGroup
+        options={options}
+        value={value}
+        onChange={setValue}
+        direction="row"
+        spacing={6}
+      />
+    </VStack>
+  );
+};
+
+export const WithLongLabels: StoryFn<typeof RadioGroup> = () => {
+  const [value, setValue] = useState<string>('option1');
+
+  const options: RadioOption[] = [
+    {
+      value: 'option1',
+      label:
+        'This is a very long label that demonstrates how radio buttons handle longer text content',
+    },
+    {
+      value: 'option2',
+      label:
+        'Another option with extended descriptive text that might wrap to multiple lines',
+    },
+    {
+      value: 'option3',
+      label: 'A third choice with substantial explanatory content',
+    },
+  ];
+
+  return (
+    <Box maxW="400px">
+      <RadioGroup
+        options={options}
+        value={value}
+        onChange={setValue}
+        spacing={4}
+      />
+    </Box>
+  );
+};
+
+export const FormExample: StoryFn<typeof RadioGroup> = () => {
+  const [notifications, setNotifications] = useState<string>('all');
+  const [theme, setTheme] = useState<string>('light');
+
+  const notificationOptions: RadioOption[] = [
+    { value: 'all', label: 'All notifications' },
+    { value: 'important', label: 'Important only' },
+    { value: 'none', label: 'No notifications' },
+  ];
+
+  const themeOptions: RadioOption[] = [
+    { value: 'light', label: 'Light theme' },
+    { value: 'dark', label: 'Dark theme' },
+    { value: 'auto', label: 'Auto (system preference)' },
+  ];
+
+  return (
+    <VStack align="flex-start" spacing={6} maxW="300px">
+      <Box>
+        <Box fontWeight="semibold" mb={2}>
+          Notification Preferences
+        </Box>
+        <RadioGroup
+          options={notificationOptions}
+          value={notifications}
+          onChange={setNotifications}
+          spacing={3}
+        />
+      </Box>
+
+      <Box>
+        <Box fontWeight="semibold" mb={2}>
+          Theme Preference
+        </Box>
+        <RadioGroup
+          options={themeOptions}
+          value={theme}
+          onChange={setTheme}
+          direction="row"
+          spacing={4}
+        />
+      </Box>
+
+      <Box p={4} bg="gray.50" borderRadius="md" w="100%">
+        <Box fontWeight="semibold" mb={2}>
+          Current Settings:
+        </Box>
+        <Box fontSize="sm">
+          <Box>Notifications: {notifications}</Box>
+          <Box>Theme: {theme}</Box>
+        </Box>
+      </Box>
+    </VStack>
+  );
+};

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,35 @@
+import React, { forwardRef } from 'react';
+import { Radio as ChakraRadio } from '@chakra-ui/react';
+
+import { RadioProps } from './Radio.types';
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  ({ children, ...rest }, ref) => {
+    return (
+      <ChakraRadio
+        ref={ref}
+        _checked={{
+          bg: 'primary.main',
+          borderColor: 'primary.main',
+          position: 'relative',
+          _before: {
+            content: '""',
+            bg: 'white',
+            w: '50%',
+            h: '50%',
+            borderRadius: 'full',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+          },
+        }}
+        {...rest}
+      >
+        {children}
+      </ChakraRadio>
+    );
+  }
+);
+
+Radio.displayName = 'Radio';

package/src/components/Radio/Radio.types.ts

@@ -0,0 +1,21 @@
+import {
+  RadioGroupProps as ChakraRadioGroupProps,
+  RadioProps as ChakraRadioProps,
+  StackDirection,
+} from '@chakra-ui/react';
+
+export interface RadioOption {
+  value: string;
+  label: string;
+}
+
+export interface RadioProps extends ChakraRadioProps {
+  children?: React.ReactNode;
+}
+
+export interface RadioGroupProps
+  extends Omit<ChakraRadioGroupProps, 'children'> {
+  options: RadioOption[];
+  direction?: StackDirection;
+  spacing?: number;
+}

package/src/components/Radio/RadioGroup.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from 'react';
+import { RadioGroup as ChakraRadioGroup, Stack } from '@chakra-ui/react';
+
+import { Radio } from './Radio';
+import { RadioGroupProps, RadioOption } from './Radio.types';
+
+export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  (
+    { options, value, onChange, direction = 'column', spacing = 3, ...rest },
+    ref
+  ) => {
+    return (
+      <ChakraRadioGroup value={value} onChange={onChange} {...rest}>
+        <Stack direction={direction} spacing={spacing} ref={ref}>
+          {options.map((option: RadioOption) => (
+            <Radio key={option.value} value={option.value}>
+              {option.label}
+            </Radio>
+          ))}
+        </Stack>
+      </ChakraRadioGroup>
+    );
+  }
+);
+
+RadioGroup.displayName = 'RadioGroup';

package/src/components/Radio/index.ts

@@ -0,0 +1,3 @@
+export { Radio } from './Radio';
+export type { RadioGroupProps, RadioOption, RadioProps } from './Radio.types';
+export { RadioGroup } from './RadioGroup';

package/src/components/SeeMoreButton/SeeMoreButton.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { SeeMoreButton } from './SeeMoreButton';
+import { SeeMoreButtonProps } from './SeeMoreButton.types';
+
+export default {
+  title: 'Components/SeeMoreButton',
+  component: SeeMoreButton,
+  args: {
+    currentCount: 0,
+    maxCount: 10,
+  },
+  argTypes: {
+    currentCount: {
+      control: 'number',
+    },
+    maxCount: {
+      control: 'number',
+    },
+  },
+  parameters: {
+    controls: {
+      expanded: true,
+    },
+  },
+} as Meta<typeof SeeMoreButton>;
+
+export const Default: StoryFn<SeeMoreButtonProps> = (args) => {
+  const [currentCount, setCurrentCount] = React.useState(args.currentCount);
+
+  const handleClick = () => {
+    setCurrentCount((prev) => Math.min(prev + 1, args.maxCount));
+  };
+
+  return (
+    <SeeMoreButton
+      {...args}
+      currentCount={currentCount}
+      onClick={handleClick}
+    />
+  );
+};
+
+Default.args = {
+  currentCount: 0,
+  maxCount: 10,
+};

package/src/components/SeeMoreButton/SeeMoreButton.styles.ts

@@ -0,0 +1,11 @@
+export const seeMoreButtonStyles = {
+  alignSelf: 'stretch',
+  w: '100%',
+  variant: 'unstyled',
+  display: 'flex',
+  borderTop: '1px solid',
+  borderRadius: 'none',
+  borderColor: 'gray.300',
+  color: 'gray.600',
+  fontSize: 'subtitle',
+};

package/src/components/SeeMoreButton/SeeMoreButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button } from '@chakra-ui/react';
+
+import { Icon } from '@/components/Icon';
+import { useTranslate } from '@/hooks/useTranslate';
+
+import { seeMoreButtonStyles } from './SeeMoreButton.styles';
+import { SeeMoreButtonProps } from './SeeMoreButton.types';
+
+/**
+ * A button component that allows users to load or see more items.
+ * It displays the current count and the maximum count of items.
+ *
+ * @param {object} props - Props for the SeeMoreButton component.
+ * @param {number} props.currentCount - The current number of items shown.
+ * @param {number} props.maxCount - The maximum number of items available.
+ */
+export const SeeMoreButton = ({
+  currentCount,
+  maxCount,
+  ...rest
+}: SeeMoreButtonProps) => {
+  const translate = useTranslate();
+
+  return (
+    <Button
+      rightIcon={<Icon icon="IoChevronDownOutline" color="inherit" />}
+      {...seeMoreButtonStyles}
+      {...rest}
+    >
+      {translate('see_more')} ({currentCount}/{maxCount})
+    </Button>
+  );
+};

package/src/components/SeeMoreButton/SeeMoreButton.types.ts

@@ -0,0 +1,6 @@
+import { ButtonProps } from '@chakra-ui/react';
+
+export interface SeeMoreButtonProps extends ButtonProps {
+  currentCount: number;
+  maxCount: number;
+}

package/src/components/SeeMoreButton/index.tsx

@@ -0,0 +1 @@
+export { SeeMoreButton } from './SeeMoreButton';

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { SegmentedControl } from './SegmentedControl';
+
+const meta: Meta<typeof SegmentedControl> = {
+  title: 'Components/SegmentedControl',
+  component: SegmentedControl,
+  args: {
+    options: [
+      {
+        label: 'Complete',
+        value: 'complete',
+      },
+      {
+        label: 'Incomplete',
+        value: 'incomplete',
+      },
+      {
+        label: 'Pending',
+        value: 'pending',
+      },
+    ],
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryFn<typeof SegmentedControl>;
+
+const Template: Story = (props: any) => <SegmentedControl {...props} />;
+
+export const Uncontrolled = Template.bind({});
+Uncontrolled.args = {
+  options: [
+    {
+      label: 'Complete',
+      value: 'complete',
+    },
+    {
+      label: 'Incomplete',
+      value: 'incomplete',
+    },
+    {
+      label: 'Pending',
+      value: 'pending',
+    },
+  ],
+};
+
+export const Controlled: Story = (props: any) => {
+  const [selectedValue, setSelectedValue] = useState<string>('complete');
+  return (
+    <SegmentedControl
+      {...props}
+      value={selectedValue}
+      onSelect={(val: string) => {
+        setSelectedValue(val);
+        console.log('changed to ', val);
+      }}
+    />
+  );
+};
+Controlled.args = {
+  options: [
+    {
+      label: 'Complete',
+      value: 'complete',
+    },
+    {
+      label: 'Incomplete',
+      value: 'incomplete',
+    },
+    {
+      label: 'Pending',
+      value: 'pending',
+    },
+  ],
+};
+
+export const Rounded = Template.bind({});
+Rounded.args = {
+  borderRadius: 'full',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'sm',
+  borderRadius: 'full',
+  w: 'fit-content',
+};

package/src/components/SegmentedControl/SegmentedControl.styles.ts

@@ -0,0 +1,28 @@
+import { ButtonProps } from '../Button/Button.types';
+import { SegmentedControlProps } from './SegmentedControl.types';
+
+export const OptionStyles: Record<
+  Exclude<SegmentedControlProps['size'], undefined>,
+  ButtonProps
+> = {
+  xs: {
+    minW: 6,
+    paddingInlineStart: 2,
+    paddingInlineEnd: 2,
+    h: 6,
+  },
+  sm: {
+    minW: 10,
+    paddingInlineStart: 6,
+    paddingInlineEnd: 6,
+    h: 8,
+  },
+  md: {
+    paddingInlineStart: 6,
+    paddingInlineEnd: 6,
+    minW: 10,
+    h: 10,
+  },
+  lg: {},
+  xl: {},
+};

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { Button, Flex, useTheme } from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+
+import { OptionStyles } from './SegmentedControl.styles';
+import { SegmentedControlProps } from './SegmentedControl.types';
+
+export const SegmentedControl = ({
+  options,
+  value,
+  onSelect,
+  borderRadius = 'md',
+  size,
+  ...rest
+}: SegmentedControlProps) => {
+  const [internalValue, setInternalValue] = useState(options[0].value);
+  const theme = useTheme();
+
+  // Use the controlled value if provided, otherwise use the internal state
+  const activeValue = value !== undefined ? value : internalValue;
+  const activeIndex = options.findIndex(
+    (option) => option.value === activeValue
+  );
+
+  const getControlPadding: (
+    size: SegmentedControlProps['size']
+  ) => SegmentedControlProps['padding'] = (size = 'md') => {
+    const paddings = {
+      xs: theme.space[1],
+      sm: theme.space[1],
+      md: theme.space[1],
+      lg: {},
+      xl: {},
+    };
+    return paddings[size];
+  };
+
+  const handleSelect = (selectedValue: string) => {
+    if (value === undefined) {
+      setInternalValue(selectedValue);
+    }
+    if (onSelect) onSelect(selectedValue);
+  };
+
+  return (
+    <Flex
+      position="relative"
+      borderRadius={borderRadius}
+      bg="gray.50"
+      // p="1"
+      {...rest}
+    >
+      <motion.div
+        initial={false}
+        animate={{
+          x: `calc(${100 * activeIndex}% + ${getControlPadding(size)})`,
+        }}
+        transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+        style={{
+          position: 'absolute',
+          // @ts-expect-error - Chakra UI responsive values in Framer Motion styles
+          top: getControlPadding(size),
+          // @ts-expect-error - Chakra UI responsive values in Framer Motion styles
+          bottom: getControlPadding(size),
+          left: `calc(${activeIndex * 2} * ${getControlPadding(size)})`,
+          width: `calc(${100 / options.length}% - 2 * ${getControlPadding(size)})`,
+          borderRadius: theme.radii[borderRadius],
+          background: theme.colors.white,
+          boxShadow: theme.shadows.md,
+        }}
+      />
+
+      {options.map((option) => (
+        <Button
+          key={option.value}
+          flex={1}
+          variant="ghost"
+          color={activeValue === option.value ? 'gray.1200' : 'gray.600'}
+          onClick={() => handleSelect(option.value)}
+          _hover={{ bg: 'transparent' }}
+          fontSize={size}
+          {...OptionStyles[size ?? 'md']}
+        >
+          {option.label}
+        </Button>
+      ))}
+    </Flex>
+  );
+};

package/src/components/SegmentedControl/SegmentedControl.types.ts

@@ -0,0 +1,15 @@
+import { FlexProps, theme } from '@chakra-ui/react';
+
+export type SegmentedControlOption = {
+  label: string;
+  value: string;
+};
+
+export type SegmentedControlProps = Omit<FlexProps, 'onSelect'> & {
+  options: Array<SegmentedControlOption>;
+  value?: string;
+  onSelect?: (selectedValue: string) => void;
+  // Value is key in Chakra theme
+  borderRadius?: string;
+  size?: Extract<keyof typeof theme.sizes, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
+};

package/src/components/SegmentedControl/index.ts

@@ -0,0 +1,2 @@
+export { SegmentedControl } from './SegmentedControl';
+export { type SegmentedControlProps } from './SegmentedControl.types';

package/src/components/SegmentedProgressBar/ProgressSegment.tsx

@@ -0,0 +1,18 @@
+import { ProgressBar } from '../ProgressBar';
+import { ProgressSegmentProps } from './SegmentedProgressBar.types';
+import { useSegmentedProgressBarContext } from './SegmentedProgressBarContext';
+
+export const ProgressSegment = ({ value, ...rest }: ProgressSegmentProps) => {
+  const { max } = useSegmentedProgressBarContext();
+  return (
+    <ProgressBar
+      value={value}
+      max={value}
+      width={`${(value / max) * 100}%`}
+      height="100%"
+      bg="gray.200"
+      borderRadius={0}
+      {...rest}
+    />
+  );
+};