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

package/src/components/Carousel/Carousel.stories.tsx

@@ -0,0 +1,159 @@
+// src/components/Carousel.stories.tsx
+
+import React, { useState } from 'react';
+import {
+  Box,
+  Button,
+  ChakraProvider,
+  Heading,
+  Image,
+  Text,
+} from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Carousel } from './Carousel';
+
+// Define the metadata for the Carousel component
+const meta: Meta<typeof Carousel> = {
+  title: 'Components/Carousel',
+  component: Carousel,
+  decorators: [
+    (Story) => (
+      <ChakraProvider>
+        <Story />
+      </ChakraProvider>
+    ),
+  ],
+  args: {
+    children: [
+      <Image
+        width="100%"
+        height="100vh"
+        src="https://via.placeholder.com/800x400.png?text=Slide+1"
+        alt="Slide 1"
+      />,
+      <Image
+        width="100%"
+        height="100vh"
+        src="https://via.placeholder.com/800x400.png?text=Slide+2"
+        alt="Slide 2"
+      />,
+      <Image
+        width="100%"
+        height="100vh"
+        src="https://via.placeholder.com/800x400.png?text=Slide+3"
+        alt="Slide 3"
+      />,
+    ],
+  },
+};
+
+export default meta;
+type StoryType = StoryFn<typeof Carousel>;
+
+// Template for creating stories
+const Template: StoryType = (args) => <Carousel {...args} />;
+
+export const ImageCarousel: StoryType = Template.bind({});
+ImageCarousel.storyName = 'Carousel with Images';
+
+export const AutoplayCarousel: StoryType = Template.bind({});
+AutoplayCarousel.args = {
+  autoplayDuration: 1000,
+};
+
+export const HideIndicators: StoryType = Template.bind({});
+HideIndicators.args = {
+  showIndicators: false,
+};
+
+export const CustomComponentCarousel: StoryType = Template.bind({});
+CustomComponentCarousel.args = {
+  children: [
+    <Box
+      position="relative"
+      height="400px"
+      backgroundImage={`url(https://via.placeholder.com/800x400.png?text=Custom+Slide+1)`}
+      backgroundSize="contain"
+      backgroundPosition="center"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      color="white"
+      textAlign="center"
+      p={4}
+    >
+      <Box bg="rgba(0, 0, 0, 0.5)" p={6} borderRadius="md">
+        <Heading mb={4}>Custom Slide 1</Heading>
+        <Text mb={4}>This is a custom component slide.</Text>
+        <Button colorScheme="teal">Learn More</Button>
+      </Box>
+    </Box>,
+    <Box
+      position="relative"
+      height="400px"
+      backgroundImage={`url(https://via.placeholder.com/800x400.png?text=Custom+Slide+2)`}
+      backgroundSize="contain"
+      backgroundPosition="center"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      color="white"
+      textAlign="center"
+      p={4}
+    >
+      <Box bg="rgba(0, 0, 0, 0.5)" p={6} borderRadius="md">
+        <Heading mb={4}>Custom Slide 2</Heading>
+        <Text mb={4}>Another custom component slide.</Text>
+        <Button colorScheme="teal">Get Started</Button>
+      </Box>
+    </Box>,
+    <Box
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      height="400px"
+      bg="gray.100"
+      p={8}
+      textAlign="center"
+    >
+      <Box>
+        <Heading mb={4}>Text-Only Slide</Heading>
+        <Text mb={4}>This slide contains only text and a button.</Text>
+        <Button colorScheme="teal">CTA</Button>
+      </Box>
+    </Box>,
+  ],
+};
+CustomComponentCarousel.storyName = 'Carousel with Custom Components';
+
+export const ControlledCarouselExample = () => {
+  const [currentSlide, setCurrentSlide] = useState<number>(0);
+
+  const handleSlideChange = (newSlide: number) => {
+    setCurrentSlide(newSlide);
+  };
+
+  return (
+    <div>
+      <Carousel
+        // autoplayDuration={5000}
+        currentSlide={currentSlide}
+        onSlideChange={handleSlideChange}
+      >
+        <Box bg="red.500" height="200px">
+          Slide 1
+        </Box>
+        <Box bg="green.500" height="200px">
+          Slide 2
+        </Box>
+        <Box bg="blue.500" height="200px">
+          Slide 3
+        </Box>
+      </Carousel>
+      <Button onClick={() => setCurrentSlide((prev) => (prev + 1) % 3)}>
+        Next Slide
+      </Button>
+    </div>
+  );
+};

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,160 @@
+// src/components/Carousel.tsx
+
+import React, { Children, useEffect, useRef, useState } from 'react';
+import { Box, Flex, HStack, useBreakpointValue } from '@chakra-ui/react';
+
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { CarouselProps } from './Carousel.types';
+
+export const Carousel: React.FC<CarouselProps> = ({
+  children,
+  autoplayDuration,
+  currentSlide: controlledCurrentSlide,
+  onSlideChange,
+  defaultSlide = 0,
+  showIndicators = true,
+  showArrows = true,
+  ...rest
+}) => {
+  const slides = Children.toArray(children);
+  const slidesCount = slides.length;
+
+  // Determine button size based on screen size
+  const buttonSize = useBreakpointValue({ base: 'sm', md: 'md' });
+
+  // Controlled vs Uncontrolled
+  const isControlled = controlledCurrentSlide !== undefined;
+
+  // Internal state for uncontrolled usage
+  const [internalCurrentSlide, setInternalCurrentSlide] = useState<number>(
+    defaultSlide >= 0 && defaultSlide < slidesCount ? defaultSlide : 0
+  );
+
+  // Determine the current slide
+  const currentSlide = isControlled
+    ? controlledCurrentSlide!
+    : internalCurrentSlide;
+
+  // Create a ref to store the timer ID
+  const autoplayRef = useRef<NodeJS.Timeout | null>(null);
+
+  const resetAutoplay = () => {
+    if (autoplayDuration && autoplayRef.current) {
+      clearInterval(autoplayRef.current);
+      autoplayRef.current = setInterval(() => {
+        handleNext();
+      }, autoplayDuration);
+    }
+  };
+
+  const changeSlide = (newSlide: number) => {
+    if (isControlled) {
+      onSlideChange?.(newSlide);
+    } else {
+      setInternalCurrentSlide(newSlide);
+    }
+    resetAutoplay();
+  };
+
+  const handlePrev = () => {
+    const newSlide = currentSlide === 0 ? slidesCount - 1 : currentSlide - 1;
+    changeSlide(newSlide);
+  };
+
+  const handleNext = () => {
+    const newSlide = currentSlide === slidesCount - 1 ? 0 : currentSlide + 1;
+    changeSlide(newSlide);
+  };
+
+  const handleIndicatorClick = (index: number) => {
+    changeSlide(index);
+  };
+
+  useEffect(() => {
+    if (autoplayDuration) {
+      autoplayRef.current = setInterval(() => {
+        handleNext();
+      }, autoplayDuration);
+
+      // Cleanup on unmount
+      return () => {
+        if (autoplayRef.current) {
+          clearInterval(autoplayRef.current);
+        }
+      };
+    }
+  }, [slidesCount, autoplayDuration, currentSlide]); // Added currentSlide to dependencies
+
+  if (!slides) return null;
+
+  return (
+    <Box position="relative" width="full" overflow="hidden" {...rest}>
+      {/* Slides Container */}
+      <Flex
+        width={`${slidesCount * 100}%`}
+        transition="transform 0.5s ease-in-out"
+        transform={`translateX(-${currentSlide * (100 / slidesCount)}%)`}
+      >
+        {slides.map((child, index) => (
+          <Box flex={1} key={`slide-${index}`}>
+            {child}
+          </Box>
+        ))}
+      </Flex>
+
+      {/* Previous Button */}
+      {showArrows && (
+        <IconButton
+          aria-label="Previous Slide"
+          icon={<Icon icon="IoIosArrowBack" />}
+          position="absolute"
+          left={3}
+          top="50%"
+          transform="translateY(-50%)"
+          zIndex="1"
+          onClick={handlePrev}
+          size={buttonSize}
+        />
+      )}
+
+      {/* Next Button */}
+      {showArrows && (
+        <IconButton
+          aria-label="Next Slide"
+          icon={<Icon icon="IoChevronForward" />}
+          position="absolute"
+          right={3}
+          top="50%"
+          transform="translateY(-50%)"
+          zIndex="1"
+          onClick={handleNext}
+          size={buttonSize}
+        />
+      )}
+
+      {/* Indicators */}
+      {showIndicators && (
+        <HStack
+          position="absolute"
+          bottom={3}
+          width="full"
+          justifyContent="center"
+          spacing={2}
+        >
+          {slides.map((_, index) => (
+            <Box
+              key={index}
+              cursor="pointer"
+              boxSize={currentSlide === index ? 3 : 2}
+              bg={currentSlide === index ? 'gray.600' : 'gray.300'}
+              borderRadius="full"
+              onClick={() => handleIndicatorClick(index)}
+              transition="background-color 0.3s, box-size 0.3s"
+            />
+          ))}
+        </HStack>
+      )}
+    </Box>
+  );
+};

package/src/components/Carousel/Carousel.types.ts

@@ -0,0 +1,22 @@
+import { BoxProps } from '@chakra-ui/react';
+
+export interface CarouselProps extends BoxProps {
+  /**
+   * Will autoplay if defined
+   */
+  autoplayDuration?: number;
+  currentSlide?: number;
+  onSlideChange?: (newSlide: number) => void;
+  /**
+   * @default 0
+   */
+  defaultSlide?: number;
+  /**
+   * @default true
+   */
+  showIndicators?: boolean;
+  /**
+   * @default true
+   */
+  showArrows?: boolean;
+}

package/src/components/Carousel/index.ts

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

package/src/components/CarouselModal/CarouselModal.stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { H4, Text } from '../Typography';
+import { CarouselModal } from './CarouselModal';
+
+const meta: Meta<typeof CarouselModal> = {
+  title: 'Components/CarouselModal',
+  component: CarouselModal,
+  args: {
+    isOpen: true,
+    onClose: () => alert('should close here!'),
+    slides: [
+      {
+        image: 'https://via.placeholder.com/800x400.png?text=Slide+1',
+        text: (
+          <Box>
+            <H4>Welcome! This is a test slide title.</H4>
+            <Text>
+              Are you ready for this crazy modal?! This is a test slide
+              description.
+            </Text>
+          </Box>
+        ),
+      },
+      {
+        image: 'https://via.placeholder.com/800x400.png?text=Slide+2',
+        text: (
+          <Box>
+            <H4>This is a title for more content.</H4>
+            <Text>Woohoo! This is a test slide description.</Text>
+          </Box>
+        ),
+      },
+      {
+        image: 'https://via.placeholder.com/800x400.png?text=Slide+3',
+        text: (
+          <Box>
+            <H4>This is a test slide title for even more content!</H4>
+            <Text>This is a test slide description. Wowza!</Text>
+          </Box>
+        ),
+      },
+    ],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CarouselModal>;
+
+export const Basic: Story = {};

package/src/components/CarouselModal/CarouselModal.tsx

@@ -0,0 +1,106 @@
+import { useRef, useState } from 'react';
+import { Box, Flex, Image } from '@chakra-ui/react';
+
+import { Button } from '@/components/Button';
+import { Carousel } from '@/components/Carousel';
+import {
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+} from '@/components/Modal';
+import { useTranslate } from '@/hooks/useTranslate';
+
+import { CarouselModalProps } from './CarouselModal.types';
+
+export const CarouselModal = ({
+  slides,
+  onClose,
+  ...rest
+}: CarouselModalProps) => {
+  const nextButtonRef = useRef(null);
+  const translate = useTranslate();
+  const [currentSlide, setCurrentSlide] = useState<number>(0);
+  const handleNextClick = () => {
+    if (currentSlide === slides.length - 1) {
+      onClose();
+    } else {
+      setCurrentSlide(currentSlide + 1);
+    }
+  };
+  const handleBackClick = () => {
+    const newSlide = currentSlide === 0 ? slides.length - 1 : currentSlide - 1;
+    setCurrentSlide(newSlide);
+  };
+  const handleIndicatorClick = (index: number) => {
+    setCurrentSlide(index);
+  };
+
+  const handleEndClick = () => {
+    onClose();
+  };
+
+  return (
+    <Modal
+      size="2xl"
+      onClose={onClose}
+      initialFocusRef={nextButtonRef}
+      {...rest}
+    >
+      <ModalContent overflow="hidden">
+        <ModalCloseButton />
+        <ModalBody pb={0} pt={12}>
+          <Carousel
+            showIndicators={false}
+            currentSlide={currentSlide}
+            onSlideChange={setCurrentSlide}
+            mb={4}
+            borderRadius="md"
+            overflow="hidden"
+          >
+            {slides.map((_, index) => (
+              <Image
+                key={`slider-modal-image-${index}`}
+                width="100%"
+                height="400px"
+                src={slides[index].image}
+                alt={`Slide ${index}`}
+              />
+            ))}
+          </Carousel>
+          <Box mb={5} textAlign="left">
+            {slides[currentSlide].text}
+          </Box>
+        </ModalBody>
+        <ModalFooter mt={4} py={8} borderTop="1px solid" borderColor="gray.300">
+          <Button px={0} variant="tertiary" onClick={handleBackClick}>
+            {translate('previous')}
+          </Button>
+          <Flex align="center" flex={1} gap={2} justify="center">
+            {slides.map((_, index) => (
+              <Box
+                key={`slider-modal-slide-text-${index}`}
+                cursor="pointer"
+                boxSize={currentSlide === index ? 3 : 2}
+                bg={currentSlide === index ? 'gray.1000' : 'gray.600'}
+                borderRadius="full"
+                onClick={() => handleIndicatorClick(index)}
+                transition="background-color 0.3s, box-size 0.3s"
+              />
+            ))}
+          </Flex>
+          {currentSlide === slides.length - 1 ? (
+            <Button px={0} onClick={handleEndClick}>
+              {translate('get_started')}
+            </Button>
+          ) : (
+            <Button px={0} onClick={handleNextClick} ref={nextButtonRef}>
+              {translate('next')}
+            </Button>
+          )}
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};

package/src/components/CarouselModal/CarouselModal.types.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+import { ModalProps } from '@/components/Modal';
+
+export type CarouselModalProps = Omit<
+  ModalProps,
+  'children' | 'initialFocusRef'
+> & {
+  slides: Array<{
+    /**
+     * Recommended image resolution is 400 x 540 ish.
+     */
+    image: string;
+    text: ReactNode;
+  }>;
+};

package/src/components/CarouselModal/index.ts

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

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { Checkbox } from './Checkbox';
+
+export default {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+} as ComponentMeta<typeof Checkbox>;
+
+const Template: ComponentStory<typeof Checkbox> = (args) => (
+  <Checkbox {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import { Checkbox as ChakraCheckbox } from '@chakra-ui/react';
+
+import { CheckboxProps } from './Checkbox.types';
+
+export const Checkbox = forwardRef(({ sx, ...rest }: CheckboxProps, ref) => {
+  return (
+    <ChakraCheckbox
+      ref={ref}
+      {...rest}
+      sx={{
+        '.chakra-checkbox__control': {
+          borderRadius: '4px',
+          borderColor: 'gray.400',
+          _checked: {
+            bg: 'primary.main',
+            borderColor: 'primary.main',
+          },
+          _indeterminate: {
+            bg: 'primary.main',
+            borderColor: 'primary.main',
+          },
+        },
+      }}
+    />
+  );
+});
+
+Checkbox.displayName = 'Checkbox';

package/src/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,3 @@
+import { CheckboxProps as ChakraCheckboxProps } from '@chakra-ui/react';
+
+export interface CheckboxProps extends ChakraCheckboxProps {}

package/src/components/Checkbox/index.ts

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

package/src/components/Chip/Chip.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Chip, useCaseStyles } from '.';
+import { ChipUseCase } from './Chip.types';
+
+const meta: Meta<typeof Chip> = {
+  title: 'Components/Chip',
+  component: Chip,
+  args: {
+    children: 'Chip',
+  },
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryFn<typeof Chip>;
+
+export const Basic: Story = (args) => <Chip {...args} />;
+
+export const AllChipVariants: Story = (args) => {
+  const useCases = Object.keys(useCaseStyles) as Array<ChipUseCase>;
+  const variants = ['solid', 'outline', 'subtle'];
+  return (
+    <Box>
+      <Flex mb="16px" gap="16px" align="center">
+        <p>default</p>
+        <Chip {...args} />
+      </Flex>
+      {useCases.map((useCase) => (
+        <Flex mb="16px" gap="16px" align="center">
+          <p style={{ width: '100px' }}>{useCase}</p>
+          {variants.map((variant) => (
+            <div>
+              <p>{variant}</p>
+              <Chip {...args} useCase={useCase} variant={variant} />
+            </div>
+          ))}
+        </Flex>
+      ))}
+    </Box>
+  );
+};