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

package/src/components/Container/Container.tsx

@@ -0,0 +1,21 @@
+'use client';
+import { Container as ChakraContainer, ContainerProps } from '@chakra-ui/react';
+
+import useContainerSize from './useContainerSize';
+
+export const Container = ({
+  style,
+  disableResponsive,
+  ...rest
+}: ContainerProps & { disableResponsive?: boolean }) => {
+  const containerSize = useContainerSize();
+  return (
+    <ChakraContainer
+      style={{
+        ...style,
+        ...(disableResponsive ? {} : { minWidth: `${containerSize}px` }),
+      }}
+      {...rest}
+    />
+  );
+};

package/src/components/Container/index.ts

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

package/src/components/Container/useContainerSize.ts

@@ -0,0 +1,47 @@
+'use client';
+import { useEffect, useState } from 'react';
+
+import theme from '@/theme/index';
+
+// TODO: make this logic smarter or use something reusable
+// ratio minimum gutter on each side as decimal (i.e. 1 == 100%)
+const GUTTER_RATIO = 0.1;
+
+// TODO: optimize this so this calculation only runs once per page
+export const getContainerWidth: (screenSize: number) => number = (
+  screenSize
+) => {
+  const largestBreakpoint = Object.values(theme.breakpoints).reduce(function (
+    i: number,
+    j: string
+  ) {
+    const breakpoint = parseInt(j, 10);
+    const screenThreshold = screenSize * (1 - GUTTER_RATIO * 2);
+    return breakpoint < screenThreshold ? Math.max(i, breakpoint) : i;
+  }, 0) as number;
+
+  return largestBreakpoint;
+};
+
+const useContainerSize = () => {
+  const [containerSize, setContainerSize] = useState<number>();
+
+  useEffect(() => {
+    const handleResize = () => {
+      setContainerSize(getContainerWidth(window.innerWidth));
+    };
+
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+
+    // Clean up the event listener when the component unmounts
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return containerSize;
+};
+
+export default useContainerSize;

package/src/components/CopyableCode/CopyableCode.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { CopyableCode } from './CopyableCode';
+import { CopyableCodeProps } from './CopyableCode.types';
+
+const meta: Meta<typeof CopyableCode> = {
+  title: 'Components/CopyableCode',
+  component: CopyableCode,
+  args: {
+    children: `const example = 'This is a code example';
+console.log(example);`,
+    onCopy: () => {
+      console.log('Code copied to clipboard');
+    },
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<CopyableCodeProps> = (args: CopyableCodeProps) => (
+  <CopyableCode {...args} />
+);
+
+export const Basic: StoryFn<CopyableCodeProps> = Template.bind({});
+Basic.args = {};

package/src/components/CopyableCode/CopyableCode.tsx

@@ -0,0 +1,58 @@
+import { Box, Flex } from '@chakra-ui/react';
+
+import { useTranslate } from '@/hooks/useTranslate';
+
+import { Button } from '../Button';
+import { Card } from '../Card';
+import { Icon } from '../Icon';
+import { CopyableCodeProps } from './CopyableCode.types';
+
+/**
+ * Intended for a quick one-click copy of one-liner code snippets.
+ *
+ * @example
+ * <CopyableCode onCopy={() => {}}>
+ *   {`const example = 'This is a code example';
+ *    console.log(example);`}
+ * </CopyableCode>
+ */
+export const CopyableCode = ({
+  children,
+  onCopy,
+  containerProps,
+}: CopyableCodeProps) => {
+  const translate = useTranslate();
+  return (
+    <Flex position="relative" width="100%" {...containerProps}>
+      <Card overflow="hidden" maxW="100%" p={0} width="100%">
+        <Box as="pre" whiteSpace="nowrap" overflowX="scroll" p={4} pr={20}>
+          {children}
+        </Box>
+        <Box
+          position="absolute"
+          right={0}
+          top={0}
+          bottom={0}
+          w={24}
+          bg="linear-gradient(to right, transparent, #fff 15%)"
+          pointerEvents="none"
+        />
+      </Card>
+      <Button
+        variant="primary"
+        bgColor="primary.dark"
+        borderColor="primary.dark"
+        size="xs"
+        leftIcon={<Icon icon="FaRegCopy" boxSize="xs" />}
+        onClick={onCopy}
+        position="absolute"
+        right={4}
+        top="50%"
+        transform="translateY(-50%)"
+        zIndex={1}
+      >
+        {translate('copy')}
+      </Button>
+    </Flex>
+  );
+};

package/src/components/CopyableCode/CopyableCode.types.ts

@@ -0,0 +1,7 @@
+import { FlexProps } from '@chakra-ui/react';
+
+export type CopyableCodeProps = {
+  children: React.ReactNode;
+  onCopy: () => void;
+  containerProps?: FlexProps;
+};

package/src/components/CopyableCode/index.ts

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

package/src/components/CrossPageToasts/CrossPageToasts.tsx

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

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

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

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

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

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

@@ -0,0 +1,141 @@
+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 { Icon } 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={<Icon icon="Edit" color="gray.400" boxSize="sm" />}
+              onClick={handleEditButtonClick}
+            />
+            {isCopyable && (
+              <Tooltip label="Copied!" isOpen={hasOpenCopyTooltip}>
+                <IconButton
+                  aria-label={`Copy ${label}`}
+                  icon={<Icon 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={<Icon icon="FaRegCopy" color="gray.400" boxSize="sm" />}
+                  onClick={handleCopyButtonClick}
+                />
+              </Tooltip>
+            )}
+          </Box>
+        )}
+      </Text>
+    </Box>
+  );
+};

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

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

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

package/src/components/DatePicker/RangeDatePicker.stories.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { Box } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { formatDateByLocale } from '@/utils/formatDateByLocale';
+
+import { Text } from '../Typography';
+import { RangeDatePicker } from './RangeDatePicker';
+
+const meta: Meta<typeof RangeDatePicker> = {
+  title: 'Components/DatePicker/RangeDatePicker',
+  component: RangeDatePicker,
+  args: {},
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryFn<typeof RangeDatePicker>;
+
+export const Basic: Story = ({
+  selectedDates: datesProp,
+  onDateChange,
+  ...args
+}) => {
+  const [selectedDates, setSelectedDates] = useState<Array<Date>>([
+    new Date(),
+    new Date(),
+  ]);
+
+  return (
+    <>
+      <Box mb={2}>
+        <RangeDatePicker
+          {...args}
+          selectedDates={selectedDates}
+          onDateChange={setSelectedDates}
+        />
+      </Box>
+      <Text>
+        {formatDateByLocale(selectedDates[0])} -{' '}
+        {formatDateByLocale(selectedDates[1])}
+      </Text>
+    </>
+  );
+};

package/src/components/DatePicker/RangeDatePicker.tsx

@@ -0,0 +1,74 @@
+import {
+  RangeDatepicker as BaseRangeDatePicker,
+  RangeDatepickerProps,
+} from 'chakra-dayzed-datepicker';
+
+import { Icon } from '../Icon';
+
+export const RangeDatePicker = ({
+  propsConfigs,
+  configs,
+  usePortal = true,
+  ...rest
+}: RangeDatepickerProps) => {
+  return (
+    <BaseRangeDatePicker
+      usePortal={usePortal}
+      {...rest}
+      configs={{
+        ...configs,
+        dateFormat: configs?.dateFormat ?? 'MMM dd, yyyy',
+      }}
+      propsConfigs={{
+        // Manually make it look like an Input
+        triggerBtnProps: {
+          justifyContent: 'left',
+          pl: 2,
+          fontWeight: 'regular',
+          color: 'gray.1500',
+          fontSize: 'md',
+          leftIcon: (
+            <Icon
+              icon="MdOutlineCalendarToday"
+              color="gray.600"
+              style={{ marginInlineEnd: 3 }}
+            />
+          ),
+        },
+        inputProps: {
+          color: 'primary.dark',
+          ...propsConfigs?.inputProps,
+        },
+        dayOfMonthBtnProps: {
+          // Regular day
+          defaultBtnProps: {
+            fontWeight: 'regular',
+            _hover: {
+              background: 'primary.light',
+              ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps?._hover,
+            },
+            ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps,
+          },
+          // Today
+          todayBtnProps: {
+            color: 'gray.1200',
+            fontWeight: 'semibold',
+            ...propsConfigs?.dayOfMonthBtnProps?.todayBtnProps,
+          },
+          selectedBtnProps: {
+            color: 'primary.dark',
+            background: 'primary.light',
+            ...propsConfigs?.dayOfMonthBtnProps?.selectedBtnProps,
+          },
+          isInRangeBtnProps: {
+            color: 'primary.dark',
+            background: 'primary.light',
+            ...propsConfigs?.dayOfMonthBtnProps?.isInRangeBtnProps,
+          },
+          ...propsConfigs?.dayOfMonthBtnProps,
+        },
+        ...propsConfigs,
+      }}
+    />
+  );
+};

package/src/components/DatePicker/SingleDatePicker.stories.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { Box } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { formatDateByLocale } from '@/utils/formatDateByLocale';
+
+import { Text } from '../Typography';
+import { SingleDatePicker } from './SingleDatePicker';
+
+const meta: Meta<typeof SingleDatePicker> = {
+  title: 'Components/DatePicker/SingleDatePicker',
+  component: SingleDatePicker,
+  args: {},
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryFn<typeof SingleDatePicker>;
+
+export const Basic: Story = ({ date: dateProp, onDateChange, ...args }) => {
+  const [date, setDate] = useState(new Date());
+
+  return (
+    <>
+      <Box mb={2}>
+        <SingleDatePicker {...args} date={date} onDateChange={setDate} />
+      </Box>
+      <Text>Selected Date: {formatDateByLocale(date)}</Text>
+    </>
+  );
+};

package/src/components/DatePicker/SingleDatePicker.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {
+  SingleDatepicker,
+  SingleDatepickerProps,
+} from 'chakra-dayzed-datepicker';
+
+import { Icon } from '../Icon';
+
+export const SingleDatePicker = ({
+  propsConfigs,
+  configs,
+  usePortal = true,
+  ...rest
+}: SingleDatepickerProps) => {
+  return (
+    <SingleDatepicker
+      usePortal={usePortal}
+      {...rest}
+      configs={{
+        ...configs,
+        dateFormat: configs?.dateFormat ?? 'MM/dd/yyyy',
+      }}
+      propsConfigs={{
+        // Manually make it look like an Input
+        triggerBtnProps: {
+          justifyContent: 'left',
+          pl: 2,
+          fontWeight: 'regular',
+          color: 'gray.1500',
+          fontSize: 'md',
+          height: '100%',
+          leftIcon: (
+            <Icon
+              icon="MdOutlineCalendarToday"
+              color="gray.600"
+              style={{ marginInlineEnd: 3 }}
+            />
+          ),
+        },
+        inputProps: {
+          color: 'primary.dark',
+
+          ...propsConfigs?.inputProps,
+        },
+        dayOfMonthBtnProps: {
+          // Regular day
+          defaultBtnProps: {
+            fontWeight: 'regular',
+            _hover: {
+              background: 'primary.light',
+              ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps?._hover,
+            },
+            ...propsConfigs?.dayOfMonthBtnProps?.defaultBtnProps,
+          },
+          // Today
+          todayBtnProps: {
+            color: 'gray.1200',
+            fontWeight: 'semibold',
+            ...propsConfigs?.dayOfMonthBtnProps?.todayBtnProps,
+          },
+          selectedBtnProps: {
+            color: 'primary.dark',
+            background: 'primary.light',
+            ...propsConfigs?.dayOfMonthBtnProps?.selectedBtnProps,
+          },
+          ...propsConfigs?.dayOfMonthBtnProps,
+        },
+        ...propsConfigs,
+      }}
+    />
+  );
+};