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

package/src/components/DataField/DataField.stories.tsx

@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { H1 } from '../Typography';
-import { DataField } from './DataField';
-
-const meta = {
-  title: 'Components/DataField',
-  component: DataField,
-  args: {
-    label: 'Session name',
-    value: 'test-test-test',
-  },
-} satisfies Meta<typeof DataField>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {};
-
-export const EditableField: Story = {
-  args: {
-    isEditable: true,
-    onChange: (val) => console.log(val),
-    editableProps: {
-      onSubmit: (e) => console.log(e),
-    },
-  },
-};
-
-export const EditableHeaderField: Story = {
-  args: {
-    isEditable: true,
-    as: H1,
-    onChange: (val) => console.log(val),
-    editableProps: {
-      onSubmit: (e) => console.log(e),
-    },
-  },
-};
-
-export const CopyableField: Story = {
-  args: {
-    isCopyable: true,
-  },
-};
-
-export const EditableCopyableField: Story = {
-  args: {
-    isEditable: true,
-    onChange: (val) => console.log(val),
-    editableProps: {
-      onSubmit: (val) => console.log(val),
-    },
-    isCopyable: true,
-  },
-};

package/src/components/DataField/DataField.styles.ts

@@ -1,33 +0,0 @@
-import * as CSS from 'csstype';
-
-import theme from '@/theme/index';
-
-export const editableStyles = {
-  display: 'flex',
-  alignItems: 'center',
-  gap: 4, // Use direct spacing value instead of theme.spacing[4]
-};
-
-export const previewWrapperStyles = {
-  display: 'inline-flex',
-};
-
-export const editablePreviewStyles = {
-  transition: '0.3s border',
-  borderColor: 'transparent',
-  overflowWrap: 'anywhere' as CSS.Property.OverflowWrap,
-  _hover: {
-    borderColor: 'inherit',
-  },
-};
-
-export const inputStyles = {
-  maxWidth: '100%',
-  display: 'inline',
-  styles: {
-    boxSizing: 'content-box',
-  },
-  _focus: {
-    backgroundColor: theme.colors.white,
-  },
-};

package/src/components/DataField/DataField.tsx

@@ -1,141 +0,0 @@
-import { useRef, useState } from 'react';
-import {
-  Box,
-  Editable,
-  EditableInput,
-  EditablePreview,
-  Tooltip,
-} from '@chakra-ui/react';
-
-import { AutowidthInput } from '@/components/AutowidthInput';
-import {
-  editablePreviewStyles,
-  editableStyles,
-  inputStyles,
-  previewWrapperStyles,
-} from '@/components/DataField/DataField.styles';
-import { DataFieldProps } from '@/components/DataField/DataField.types';
-import { IconButton } from '@/components/IconButton';
-import { Text } from '@/components/Typography';
-
-import { Edit, FaRegCopy } from '../Icon';
-
-const TOOLTIP_DISPLAY_TIME = 3000;
-
-export const DataField = ({
-  label,
-  value,
-  inputProps: inputPropsProp, // only relevant if `isEditable`
-  editableProps, // only relevant if `isEditable`
-  editablePreviewProps, // only relevant if `isEditable`
-  onChange,
-  as,
-  isCopyable = false,
-  isEditable = false,
-  allowEmpty = false,
-}: DataFieldProps) => {
-  const previewRef = useRef<HTMLDivElement>(null);
-  const [hasOpenCopyTooltip, setOpenCopyTooltip] = useState<boolean>(false);
-  const [initialValue, setInitialValue] = useState<string>(value);
-  const { onBlur, ...inputProps } = inputPropsProp ?? {};
-
-  const handleCopyButtonClick = () => {
-    navigator.clipboard.writeText(value);
-    setOpenCopyTooltip(true);
-    const timeout = setTimeout(() => {
-      setOpenCopyTooltip(false);
-      clearTimeout(timeout);
-    }, TOOLTIP_DISPLAY_TIME);
-  };
-
-  const handleEditButtonClick = () => {
-    previewRef.current?.focus();
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange?.(e.target.value);
-  };
-
-  const actIfAllowed = (
-    fn: ((value: string) => void) | undefined,
-    newValue: string
-  ) => {
-    if (!allowEmpty && newValue.length < 1) {
-      // act with initial value if not allowed
-      fn?.(initialValue);
-    } else {
-      // act with new value if allowed
-      fn?.(newValue);
-      setInitialValue(newValue);
-    }
-  };
-
-  const handleSubmit = (val: string) => {
-    actIfAllowed(editableProps?.onSubmit, val);
-  };
-
-  const PreviewComponent = as ? as : (props: any) => <span {...props} />;
-
-  return (
-    <Box>
-      {/* TODO: replace with label component */}
-      {label && (
-        <Text fontWeight="bold" color="black">
-          {label}
-        </Text>
-      )}
-      <Text>
-        {isEditable ? (
-          <Editable
-            value={value}
-            {...editableStyles}
-            {...editableProps}
-            onSubmit={handleSubmit}
-          >
-            <PreviewComponent {...previewWrapperStyles}>
-              <EditablePreview
-                {...editablePreviewStyles}
-                {...editablePreviewProps}
-                ref={previewRef}
-              />
-            </PreviewComponent>
-            <AutowidthInput
-              as={EditableInput}
-              value={value}
-              {...inputStyles}
-              {...inputProps}
-              onChange={handleInputChange}
-            />
-            <IconButton
-              aria-label={`Edit ${label}`}
-              icon={<Edit color="gray.400" boxSize="sm" />}
-              onClick={handleEditButtonClick}
-            />
-            {isCopyable && (
-              <Tooltip label="Copied!" isOpen={hasOpenCopyTooltip}>
-                <IconButton
-                  aria-label={`Copy ${label}`}
-                  icon={<FaRegCopy color="gray.400" boxSize="sm" />}
-                  onClick={handleCopyButtonClick}
-                />
-              </Tooltip>
-            )}
-          </Editable>
-        ) : (
-          <Box>
-            {value}{' '}
-            {isCopyable && (
-              <Tooltip label="Copied!" isOpen={hasOpenCopyTooltip}>
-                <IconButton
-                  aria-label={`Copy ${label}`}
-                  icon={<FaRegCopy color="gray.400" boxSize="sm" />}
-                  onClick={handleCopyButtonClick}
-                />
-              </Tooltip>
-            )}
-          </Box>
-        )}
-      </Text>
-    </Box>
-  );
-};

package/src/components/DataField/DataField.types.ts

@@ -1,18 +0,0 @@
-import {
-  EditablePreviewProps,
-  EditableProps,
-  InputProps,
-} from '@chakra-ui/react';
-
-export interface DataFieldProps {
-  label?: string;
-  value: string;
-  as?: EditableProps['as'];
-  onChange?: (val?: string) => void;
-  inputProps?: Omit<InputProps, 'value'>;
-  editableProps?: Omit<EditableProps, 'value'>;
-  editablePreviewProps?: EditablePreviewProps;
-  isEditable?: boolean;
-  isCopyable?: boolean;
-  allowEmpty?: boolean;
-}

package/src/components/DataField/index.ts

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

package/src/components/GuideCue/GuideCue.stories.tsx

@@ -1,64 +0,0 @@
-import { useRef } from 'react';
-import { Box, Flex } from '@chakra-ui/react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from '../Button';
-import { GuideCue } from './GuideCue';
-import { GuideCueProvider } from './GuideCueContext';
-
-const meta = {
-  title: 'Components/GuideCue',
-  component: GuideCue,
-  args: {
-    page: 'storybook',
-    index: 0,
-    title: 'Hello',
-    description: 'This is a description',
-  },
-} satisfies Meta<typeof GuideCue>;
-
-export default meta;
-
-type Story = StoryObj<typeof GuideCue>;
-
-export const Default: Story = {
-  render: (args) => {
-    const containerRef = useRef<HTMLButtonElement>(null);
-    return (
-      <GuideCueProvider page="storybook" numSteps={1}>
-        <Box p={20}>
-          <Button ref={containerRef} mb={20} position="relative">
-            Trigger
-          </Button>
-          <GuideCue {...args} containerRef={containerRef} />
-        </Box>
-      </GuideCueProvider>
-    );
-  },
-};
-
-export const MultipleSteps: Story = {
-  render: (args) => {
-    const step1Ref = useRef<HTMLButtonElement>(null);
-    const step2Ref = useRef<HTMLButtonElement>(null);
-    return (
-      <GuideCueProvider page="storybook" numSteps={2}>
-        <Flex p={20} gap={4}>
-          <Button ref={step1Ref} mb={20} position="relative">
-            Bottom popover step
-          </Button>
-          <Button ref={step2Ref} mb={20} position="relative">
-            Right popover step
-          </Button>
-          <GuideCue {...args} index={0} containerRef={step1Ref} />
-          <GuideCue
-            {...args}
-            index={1}
-            containerRef={step2Ref}
-            placement="right"
-          />
-        </Flex>
-      </GuideCueProvider>
-    );
-  },
-};

package/src/components/GuideCue/GuideCue.tsx

@@ -1,231 +0,0 @@
-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 { FaCheck, IoChevronForward } 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 ? (
-                    <IoChevronForward boxSize="xs" />
-                  ) : (
-                    <FaCheck boxSize="xs" />
-                  )
-                }
-              >
-                {currentIndex < cueRefs.length - 1 ? 'Next' : `Got it!`}
-              </Button>
-            </Flex>
-          </Box>
-        </PopoverContent>
-      </Popover>
-    </Portal>
-  );
-};

package/src/components/GuideCue/GuideCueContext.tsx

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

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

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

@@ -1,28 +0,0 @@
-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/Textarea/AutosizeTextarea.tsx

@@ -1,50 +0,0 @@
-import { FocusEvent, useState } from 'react';
-import ResizeTextarea from 'react-textarea-autosize';
-import { TextareaProps } from '@chakra-ui/react';
-
-import { Textarea } from './Textarea';
-
-type AutosizeTextareaProps = TextareaProps & {
-  minRows?: number;
-  maxRows?: number;
-  /**
-   * Limits rows before focus. On focus, the textarea grows to fit full content.
-   * Set to undefined to allow full growth pre-focus as well.
-   */
-  preFocusMaxRows?: number;
-};
-
-export const AutosizeTextarea = ({
-  onFocus,
-  onBlur,
-  minRows = 6,
-  maxRows = 14,
-  preFocusMaxRows = 8,
-  ...props
-}: AutosizeTextareaProps) => {
-  const [isFocused, setIsFocused] = useState<boolean>(false);
-
-  const handleFocus = (e: FocusEvent<HTMLTextAreaElement>) => {
-    setIsFocused(true);
-    if (onFocus) onFocus(e);
-  };
-
-  const handleBlur = (e: FocusEvent<HTMLTextAreaElement>) => {
-    setIsFocused(false);
-    if (onBlur) onBlur(e);
-  };
-
-  const effectiveMaxRows = isFocused ? maxRows : preFocusMaxRows;
-
-  return (
-    <Textarea
-      as={ResizeTextarea}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      minRows={minRows}
-      maxRows={effectiveMaxRows}
-      overflow="auto"
-      {...props}
-    />
-  );
-};