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

package/src/components/GuideCue/GuideCue.tsx

@@ -0,0 +1,231 @@
+import { RefObject, useEffect, useRef, useState } from 'react';
+import {
+  Box,
+  Flex,
+  Popover,
+  PopoverArrow,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverProps,
+  PopoverTrigger,
+  Portal,
+} from '@chakra-ui/react';
+import { keyframes } from '@emotion/react';
+
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { Subtext, Subtitle } from '../Typography';
+import { useGuideCue } from './GuideCueContext';
+
+const PULSE_TIME = 950;
+
+/**
+ * The GuideCue component is designed to highlight a specific element on the page.
+ *
+ * It takes in a containerRef, and renders a Popover over it.
+ */
+
+const pulseRing = keyframes`
+  0% {
+    transform: scale(0.33);
+  }
+  80%, 100% {
+    opacity: 0;
+  }
+`;
+
+const pulseDot = keyframes`
+  0% {
+    transform: scale(0.8);
+  }
+  50% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.8);
+  }
+`;
+
+export const GuideCue = ({
+  index,
+  page: pageProp,
+  containerRef,
+  title,
+  description,
+  placement = 'bottom',
+  top,
+  left,
+}: {
+  index: number;
+  page: string;
+  containerRef: RefObject<HTMLElement>;
+  title: string;
+  description: string;
+  placement?: PopoverProps['placement'];
+  top?: number | string;
+  left?: number | string;
+}) => {
+  const {
+    cueRefs,
+    page,
+    currentIndex,
+    setCurrentIndex,
+    isDisabled,
+    onComplete,
+  } = useGuideCue();
+  const [isRendered, setIsRendered] = useState(false);
+  // Determines if the popover is rendering
+  const [isOpen, setIsOpen] = useState(false);
+  // Once the popover is closed, it will not open again
+  const [isClosed, setIsClosed] = useState(false);
+  const ctaRef = useRef<HTMLButtonElement>(null);
+
+  const handleClose = () => {
+    setIsOpen(false);
+    setIsClosed(true);
+  };
+
+  const handleNext = () => {
+    setCurrentIndex(currentIndex + 1);
+    handleClose();
+    if (currentIndex === cueRefs.length - 1) {
+      onComplete?.();
+    }
+  };
+
+  useEffect(() => {
+    if (
+      !isDisabled &&
+      page === pageProp &&
+      index === currentIndex &&
+      cueRefs[index] &&
+      containerRef.current
+    ) {
+      cueRefs[index]?.current?.focus();
+      // Set a timeout if it's the first step, but otherwise render immediately
+      if (currentIndex === 0) {
+        setTimeout(() => {
+          setIsRendered(true);
+          setTimeout(() => {
+            setIsOpen(true);
+          }, PULSE_TIME * 2);
+        }, 300);
+      } else {
+        setIsRendered(true);
+        setIsOpen(true);
+      }
+    }
+  }, [cueRefs, index, pageProp, currentIndex, containerRef]);
+
+  if (isClosed || isDisabled) {
+    return null;
+  }
+
+  const pulseRingAnimation = `${pulseRing} ${PULSE_TIME}ms cubic-bezier(0.215, 0.61, 0.355, 1) infinite`;
+  const pulseDotAnimation = `${pulseDot} ${PULSE_TIME}ms cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite`;
+
+  return (
+    <Portal containerRef={containerRef}>
+      <Popover
+        isOpen={isOpen}
+        onClose={handleClose}
+        initialFocusRef={ctaRef}
+        placement={placement}
+        returnFocusOnClose={false}
+      >
+        {isRendered && (
+          <PopoverTrigger>
+            <Box
+              position="absolute"
+              top={top ?? '50%'}
+              left={left ?? '50%'}
+              transform="translate(-50%, -50%)"
+              width={4}
+              height={4}
+              opacity={0.7}
+              tabIndex={0}
+              _focus={{
+                outline: 'none',
+              }}
+              ref={(el: HTMLDivElement | null) => {
+                if (cueRefs[index] && el) {
+                  (
+                    cueRefs[index] as React.MutableRefObject<HTMLDivElement>
+                  ).current = el;
+                }
+              }}
+              _before={{
+                content: '""',
+                position: 'absolute',
+                display: 'block',
+                width: '300%',
+                height: '300%',
+                boxSizing: 'border-box',
+                marginLeft: '-100%',
+                marginTop: '-100%',
+                borderRadius: 'full',
+                bgColor: 'primary.main',
+                animation: pulseRingAnimation,
+              }}
+              _after={{
+                content: '""',
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                display: 'block',
+                width: '100%',
+                height: '100%',
+                bgColor: 'primary.main',
+                borderRadius: 'full',
+                boxShadow: '0 0 8px rgba(0,0,0,.3)',
+                animation: pulseDotAnimation,
+              }}
+              zIndex={2}
+            />
+          </PopoverTrigger>
+        )}
+        <PopoverContent w="fit-content" minW="200px" maxW="400px">
+          <PopoverArrow />
+          <Box textAlign="left" p={0}>
+            <PopoverCloseButton color="gray.600" />
+            <Box py={4} px={2} color="black">
+              {cueRefs.length > 1 && (
+                <Subtext
+                  color="primary.dark"
+                  opacity={0.5}
+                  mb={2}
+                  fontSize="xs"
+                >{`${index + 1} / ${cueRefs.length}`}</Subtext>
+              )}
+              <Subtitle color="primary.dark" fontWeight="bold" mb={1}>
+                {title}
+              </Subtitle>
+              <Subtext color="gray.800" fontWeight="normal">
+                {description}
+              </Subtext>
+            </Box>
+            <Flex justifyContent="flex-end" gap={2} w="100%" p={3} pt={0}>
+              <Button
+                size="xs"
+                data-testid="guideCue-nextButton"
+                onClick={handleNext}
+                w="fit-content"
+                variant="secondary"
+                ref={ctaRef}
+                rightIcon={
+                  currentIndex < cueRefs.length - 1 ? (
+                    <Icon icon="IoChevronForward" boxSize="xs" />
+                  ) : (
+                    <Icon icon="FaCheck" boxSize="xs" />
+                  )
+                }
+              >
+                {currentIndex < cueRefs.length - 1 ? 'Next' : `Got it!`}
+              </Button>
+            </Flex>
+          </Box>
+        </PopoverContent>
+      </Popover>
+    </Portal>
+  );
+};

package/src/components/GuideCue/GuideCueContext.tsx

@@ -0,0 +1,70 @@
+import {
+  createContext,
+  createRef,
+  Dispatch,
+  SetStateAction,
+  useContext,
+  useState,
+} from 'react';
+
+type GuideCueContextType = {
+  cueRefs: React.RefObject<HTMLElement>[];
+  setCueRefs: Dispatch<SetStateAction<React.RefObject<HTMLElement>[]>>;
+  page: string;
+  numSteps: number;
+  currentIndex: number;
+  setCurrentIndex: Dispatch<SetStateAction<number>>;
+  isDisabled: boolean;
+  onComplete?: () => void;
+};
+
+export const GuideCueContext = createContext<GuideCueContextType>({
+  cueRefs: [],
+  setCueRefs: () => {},
+  page: '',
+  numSteps: 0,
+  currentIndex: 0,
+  setCurrentIndex: () => {},
+  isDisabled: false,
+  onComplete: () => {},
+});
+
+export const useGuideCue = () => {
+  return useContext(GuideCueContext);
+};
+
+export const GuideCueProvider = ({
+  children,
+  page,
+  numSteps,
+  isDisabled = false,
+  onComplete,
+}: {
+  children: React.ReactNode;
+  page: string;
+  numSteps: number;
+  isDisabled?: boolean;
+  onComplete?: () => void;
+}) => {
+  const [cueRefs, setCueRefs] = useState<React.RefObject<HTMLElement>[]>(
+    Array.from({ length: numSteps }, () => createRef<HTMLElement>())
+  );
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  return (
+    <GuideCueContext.Provider
+      value={{
+        cueRefs,
+        setCueRefs,
+        page,
+        numSteps,
+        currentIndex,
+        setCurrentIndex,
+        isDisabled,
+        onComplete,
+      }}
+    >
+      {children}
+    </GuideCueContext.Provider>
+  );
+};

package/src/components/GuideCue/index.ts

@@ -0,0 +1,2 @@
+export { GuideCue } from './GuideCue';
+export { GuideCueProvider } from './GuideCueContext';

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { getChakraArgTypes } from '@/../.storybook/getChakraArgTypes';
+import { IconTypes } from '@/components/Icon/IconMap';
+
+import { Icon } from './Icon';
+import { IconProps } from './Icon.types';
+
+const meta: Meta<typeof Icon> = {
+  title: 'Components/Icon',
+  component: Icon,
+  argTypes: {
+    icon: {
+      control: 'select',
+      options: Object.keys(IconTypes),
+      defaultValue: Object.keys(IconTypes)[0],
+    },
+    ...getChakraArgTypes({ exclude: ['width', 'height'] }),
+  },
+  args: {
+    color: 'black',
+    icon: IconTypes.Addition,
+  },
+};
+
+export default meta;
+type Story = StoryFn<typeof Icon>;
+
+export const Single: Story = ({ icon, ...rest }: IconProps) => {
+  return <Icon icon={IconTypes[icon]} {...rest} />;
+};
+
+export const AllIcons: StoryFn<IconProps> = (
+  args: Omit<IconProps, 'glyph'>
+) => (
+  <div
+    style={{
+      width: '100%',
+      display: 'grid',
+      gridTemplateColumns: 'repeat(5, 1fr)',
+    }}
+  >
+    {Object.keys(IconTypes).map((iconName) => {
+      return (
+        <div
+          key={iconName}
+          style={{
+            padding: '8px',
+            textAlign: 'center',
+            border: '1px solid gray',
+            borderRadius: '8px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            margin: '0.5rem',
+          }}
+        >
+          <Icon {...args} icon={IconTypes[iconName]} />
+          <div
+            style={{
+              fontSize: '12px',
+              color: 'gray',
+              marginTop: '0.5rem',
+            }}
+          >
+            {iconName}
+          </div>
+        </div>
+      );
+    })}
+  </div>
+);
+AllIcons.argTypes = {
+  icon: { control: false },
+};

package/src/components/Icon/Icon.styles.ts

@@ -0,0 +1,6 @@
+import theme from '@/theme/index';
+
+// Light mode styles only
+export const iconStyles = {
+  color: theme.colors.black,
+};

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,73 @@
+import React, { forwardRef } from 'react';
+import { IconType as ReactIconType } from 'react-icons/lib';
+import { chakra, useToken } from '@chakra-ui/react';
+
+import { iconStyles } from '@/components/Icon/Icon.styles';
+
+import { IconProps } from './Icon.types';
+import { CUSTOM_ICON_MAP, REACT_ICONS_MAP } from './IconMap';
+
+export const Icon = forwardRef<SVGSVGElement, IconProps>(
+  (
+    {
+      icon,
+      color,
+      boxSize = 'md', // Default to 'md' size
+      ...rest
+    }: IconProps,
+    ref
+  ) => {
+    // Map `boxSize` to Chakra size tokens using `useToken`
+    const sizeMapping = {
+      xs: '4',
+      sm: '5',
+      md: '6',
+      lg: '8',
+      xl: '10',
+    };
+
+    const mappedBoxSize =
+      sizeMapping[boxSize as keyof typeof sizeMapping] || boxSize;
+    const [resolvedBoxSize] = useToken('sizes', [
+      mappedBoxSize as string | number,
+    ]);
+    const [resolvedColor] = useToken('colors', [color || '']);
+
+    // Handle react-icons
+    if (icon in REACT_ICONS_MAP) {
+      const IconComponent = chakra(REACT_ICONS_MAP[icon] as ReactIconType);
+      return (
+        <IconComponent
+          size={resolvedBoxSize}
+          color={resolvedColor || color}
+          ref={ref}
+          {...rest}
+        />
+      );
+    }
+
+    // Handle custom SVG icons
+    let IconComponent = CUSTOM_ICON_MAP[icon];
+    if (!IconComponent) {
+      console.warn(
+        `No icon component found for ${icon}. Rendering fallback icon.`
+      );
+      IconComponent = CUSTOM_ICON_MAP['VerticalEllipsis'];
+    }
+
+    // Wrap the custom icon in Chakra's `chakra` for compatibility
+    const ChakraIcon = chakra(IconComponent);
+
+    return (
+      <ChakraIcon
+        {...iconStyles}
+        color={resolvedColor}
+        boxSize={resolvedBoxSize}
+        ref={ref}
+        {...rest}
+      />
+    );
+  }
+);
+
+Icon.displayName = 'Icon';

package/src/components/Icon/Icon.types.ts

@@ -0,0 +1,10 @@
+import { SVGProps } from 'react';
+import { BoxProps } from '@chakra-ui/react';
+
+import { IconType } from './IconMap';
+
+export type IconProps = Partial<SVGProps<SVGElement>> &
+  // Omit the size prop to avoid confusion. Only the boxSize prop should be used
+  Omit<BoxProps, 'size' | 'icon'> & {
+    icon: IconType;
+  };