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

package/src/components/AutowidthInput/AutowidthInput.stories.tsx

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { AutowidthInput } from './AutowidthInput';
-
-const meta = {
-  title: 'Components/AutowidthInput',
-  component: AutowidthInput,
-  args: {
-    value: 'test',
-  },
-} satisfies Meta<typeof AutowidthInput>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  args: {
-    value: 'test',
-  },
-};
-
-export const AsHeading: Story = {
-  args: {
-    value: 'Heading Text',
-  },
-};

package/src/components/AutowidthInput/AutowidthInput.tsx

@@ -1,47 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { Box, Input, InputProps } from '@chakra-ui/react';
-
-export const AutowidthInput = ({
-  value,
-  placeholder,
-  style = {},
-  widthMeasureProps,
-  ...rest
-}: InputProps & { widthMeasureProps?: any }) => {
-  const valueWidthMeasureRef = useRef<HTMLDivElement>(null);
-  const [inputWidth, setInputWidth] = useState<number>();
-
-  useEffect(() => {
-    if (valueWidthMeasureRef.current)
-      setInputWidth(valueWidthMeasureRef.current.offsetWidth);
-  }, [value, style]);
-
-  return (
-    <Box>
-      <span
-        ref={valueWidthMeasureRef}
-        {...widthMeasureProps}
-        style={{
-          position: 'absolute',
-          opacity: 0,
-          pointerEvents: 'none',
-          width: 'fit-content',
-          display: 'inline-flex',
-          ...widthMeasureProps?.style,
-        }}
-      >
-        {value || placeholder}
-      </span>
-      <Input
-        value={value}
-        placeholder={placeholder}
-        {...rest}
-        style={{
-          width: inputWidth,
-          boxSizing: 'content-box',
-          ...style,
-        }}
-      />
-    </Box>
-  );
-};

package/src/components/AutowidthInput/index.ts

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

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

@@ -1,154 +0,0 @@
-import { useState } from 'react';
-import {
-  Box,
-  Button,
-  Heading,
-  Image,
-  Text,
-} from '@chakra-ui/react';
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Carousel } from './Carousel';
-
-const meta = {
-  title: 'Components/Carousel',
-  component: Carousel,
-  args: {
-    children: [
-      <Image
-        key="slide-1"
-        width="100%"
-        height="100%"
-        src="https://picsum.photos/1000?random=1"
-        alt="Slide 1"
-      />,
-      <Image
-        key="slide-2"
-        width="100%"
-        height="100%"
-        src="https://picsum.photos/1000?random=2"
-        alt="Slide 2"
-      />,
-      <Image
-        key="slide-3"
-        width="100%"
-        height="100%"
-        src="https://picsum.photos/1000?random=3"
-        alt="Slide 3"
-      />,
-    ],
-  },
-} satisfies Meta<typeof Carousel>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const ImageCarousel: Story = {
-  name: 'Carousel with Images',
-};
-
-export const AutoplayCarousel: Story = {
-  args: {
-    autoplayDuration: 2000,
-  },
-};
-
-export const HideIndicators: Story = {
-  args: {
-    showIndicators: false,
-  },
-};
-
-export const CustomComponentCarousel: Story = {
-  name: 'Carousel with Custom Components',
-  args: {
-    children: [
-      <Box
-        key="custom-1"
-        position="relative"
-        height="400px"
-        backgroundImage={`url(https://picsum.photos/1000?random=4)`}
-        backgroundSize="cover"
-        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
-        key="custom-2"
-        position="relative"
-        height="400px"
-        backgroundImage={`url(https://picsum.photos/1000?random=5)`}
-        backgroundSize="cover"
-        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
-        key="custom-3"
-        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>,
-    ],
-  },
-};
-
-export const ControlledCarouselExample: Story = {
-  render: () => {
-    const [currentSlide, setCurrentSlide] = useState<number>(0);
-
-    const handleSlideChange = (newSlide: number) => {
-      setCurrentSlide(newSlide);
-    };
-
-    return (
-      <div>
-        <Carousel 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

@@ -1,160 +0,0 @@
-// src/components/Carousel.tsx
-
-import React, { Children, useEffect, useRef, useState } from 'react';
-import { Box, Flex, HStack, useBreakpointValue } from '@chakra-ui/react';
-
-import { IoChevronForward, IoIosArrowBack } 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={<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={<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

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,52 +0,0 @@
-import { Box } from '@chakra-ui/react';
-import { Meta, StoryObj } from '@storybook/react';
-
-import { H4, Text } from '../Typography';
-import { CarouselModal } from './CarouselModal';
-
-const meta = {
-  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>
-        ),
-      },
-    ],
-  },
-} satisfies Meta<typeof CarouselModal>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {};

package/src/components/CarouselModal/CarouselModal.tsx

@@ -1,106 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

package/src/components/ChipButton/Chip.types.ts

@@ -1,4 +0,0 @@
-export type ChipButtonPropsTypes = {
-  rightIcon?: React.ReactElement;
-  leftIcon?: React.ReactElement;
-};

package/src/components/ChipButton/ChipButton.tsx

@@ -1,25 +0,0 @@
-import { ForwardedRef, forwardRef } from 'react';
-import { Button as ChakraButton, ButtonProps } from '@chakra-ui/react';
-
-import { ChipButtonPropsTypes } from './Chip.types';
-
-export const ChipButton = forwardRef(
-  (
-    { rightIcon, leftIcon, ...rest }: ChipButtonPropsTypes & ButtonProps,
-    ref?: ForwardedRef<HTMLButtonElement>
-  ) => {
-    return (
-      <ChakraButton
-        rightIcon={rightIcon ?? undefined}
-        leftIcon={leftIcon ?? undefined}
-        iconSpacing={1}
-        border="1px solid"
-        width="fit-content"
-        {...rest}
-        ref={ref}
-      />
-    );
-  }
-);
-
-ChipButton.displayName = 'ChipButton';

package/src/components/ChipButton/index.ts

@@ -1,2 +0,0 @@
-export type * from './Chip.types';
-export { ChipButton } from './ChipButton';

package/src/components/CrossPageToasts/CrossPageToasts.tsx

@@ -1,33 +0,0 @@
-import { useEffect } from 'react';
-
-import { useTranslate } from '@/hooks/useTranslate';
-
-import { useToast } from '../Toast/useToast';
-// Optional Next.js navigation import
-let useSearchParams: any;
-try {
-  useSearchParams = require('next/navigation').useSearchParams;
-} catch {
-  useSearchParams = () => ({ get: () => null });
-}
-
-/**
- * Separate any cross-page toasts sent using the message query param to ensure these can be wrapped with Suspense tags.
- */
-export function CrossPageToasts() {
-  const translate = useTranslate();
-  const pushToast = useToast();
-  const searchParams = useSearchParams();
-  const message = searchParams.get('message'); // Retrieve message with Suspense support
-
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      if (message) {
-        pushToast({ description: translate(message) as string });
-      }
-    }, 500);
-    return () => clearTimeout(timeout);
-  }, [message]);
-
-  return null;
-}

package/src/components/CrossPageToasts/index.ts

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