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

package/src/components/Chip/Chip.styles.ts

@@ -0,0 +1,114 @@
+import * as CSS from 'csstype';
+
+import theme from '@/theme/index';
+
+import { ChipProps, ChipUseCase } from './Chip.types';
+
+export const baseStyles = {
+  borderRadius: '32px', // large border radius to round it
+  px: 3,
+  py: 2, // Use direct spacing value instead of theme.spacing[2]
+  textTransform: 'none' as CSS.Property.TextTransform,
+};
+
+export const useCaseStyles: Record<
+  ChipUseCase,
+  Record<string, Partial<ChipProps>>
+> = {
+  primary: {
+    solid: {
+      bgColor: theme.semanticTokens.colors.primary.main,
+      color: 'white',
+    },
+    outline: {
+      border: '1px solid',
+      borderColor: theme.semanticTokens.colors.primary.main,
+      color: theme.semanticTokens.colors.primary.main,
+      bgColor: 'white',
+    },
+    subtle: {
+      bgColor: '#EBF0FB',
+      color: theme.semanticTokens.colors.primary.main,
+    },
+  },
+  secondary: {
+    solid: {
+      bgColor: theme.colors.blue[700],
+      color: theme.colors.white,
+    },
+    outline: {
+      border: '1px solid',
+      borderColor: theme.colors.blue[700],
+      color: theme.colors.blue[700],
+      bgColor: 'white',
+    },
+    subtle: {
+      bgColor: theme.colors.blue[50],
+      color: theme.colors.blue[700],
+    },
+  },
+  success: {
+    solid: {
+      bgColor: theme.semanticTokens.colors.success.main,
+      color: 'white',
+    },
+    outline: {
+      border: '1px solid',
+      borderColor: theme.semanticTokens.colors.success.main,
+      color: theme.semanticTokens.colors.success.main,
+      bgColor: 'white',
+    },
+    subtle: {
+      bgColor: theme.colors.green[50],
+      color: theme.semanticTokens.colors.success.main,
+    },
+  },
+  danger: {
+    solid: {
+      bgColor: theme.semanticTokens.colors.danger.main,
+      color: 'white',
+    },
+    outline: {
+      border: '1px solid',
+      borderColor: theme.semanticTokens.colors.danger.main,
+      color: theme.semanticTokens.colors.danger.main,
+      bgColor: 'white',
+    },
+    subtle: {
+      bgColor: theme.semanticTokens.colors.danger.lighter,
+      color: theme.semanticTokens.colors.danger.main,
+    },
+  },
+  dark: {
+    solid: {
+      bgColor: theme.colors.gray[800],
+      color: 'white',
+    },
+    outline: {
+      border: '1px solid',
+      backgroundColor: 'transparent',
+      borderColor: theme.colors.gray[700],
+      color: theme.colors.gray[700],
+    },
+    subtle: {
+      bgColor: theme.colors.gray[100],
+      color: theme.colors.gray[800],
+    },
+  },
+  highlight: {
+    solid: {
+      bgColor: theme.colors.purple[600],
+      color: 'white',
+    },
+    outline: {
+      border: '1px solid',
+      backgroundColor: 'transparent',
+      borderColor: theme.colors.purple[600],
+      color: theme.colors.purple[600],
+    },
+    subtle: {
+      bgColor: theme.colors.purple[50],
+      color: theme.colors.purple[600],
+    },
+  },
+};

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,23 @@
+import { Badge as ChakraBadge } from '@chakra-ui/react';
+
+import { baseStyles, useCaseStyles } from './Chip.styles';
+import { ChipProps } from './Chip.types';
+
+/**
+ * A component that wraps the Chakra Badge component, but styled to look like a Chip component
+ */
+export const Chip = ({
+  useCase = 'primary', // default to secondary as they are less likely to cause bigger design issues
+  variant = 'subtle',
+  ...rest
+}: ChipProps) => {
+  return (
+    <ChakraBadge
+      {...baseStyles}
+      {...useCaseStyles[useCase][variant]}
+      {...rest}
+    />
+  );
+};
+
+Chip.displayName = 'Chip';

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

@@ -0,0 +1,14 @@
+import { BadgeProps as ChakraBadgeProps } from '@chakra-ui/react';
+
+export type ChipUseCase =
+  | 'danger'
+  | 'success'
+  | 'primary'
+  | 'secondary'
+  | 'dark'
+  | 'highlight';
+
+export interface ChipProps extends ChakraBadgeProps {
+  useCase?: ChipUseCase;
+  variant?: string;
+}

package/src/components/Chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export { useCaseStyles } from './Chip.styles';

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

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

package/src/components/ChipButton/ChipButton.tsx

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

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

package/src/components/Code/Code.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Code } from './Code';
+import { CodeProps } from './Code.types';
+
+const meta: Meta<typeof Code> = {
+  title: 'Components/Code',
+  component: Code,
+  args: {
+    children: `const t = 'test';`,
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<CodeProps> = (args: CodeProps) => <Code {...args} />;
+
+export const Basic: StoryFn<CodeProps> = Template.bind({});
+Basic.args = {};
+
+export const Copyable: StoryFn<CodeProps> = Template.bind({});
+Copyable.args = {
+  onCopy: (str) => {
+    navigator.clipboard.writeText(str);
+    console.log(str);
+  },
+};

package/src/components/Code/Code.tsx

@@ -0,0 +1,160 @@
+import { lazy, Suspense, useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { Box, Flex, Spinner } from '@chakra-ui/react';
+
+import { useTranslate } from '@/hooks/useTranslate';
+
+import { Card } from '../Card';
+import { InlineCode } from '../InlineCode';
+import { SegmentedControl } from '../SegmentedControl';
+import { Subtext } from '../Typography';
+import { CopyButton } from './_components/CopyButton';
+import { CodeProps } from './Code.types';
+
+// Use dynamic import to break circular dependency
+const Markdown = lazy(() =>
+  import('../Markdown').then((module) => ({ default: module.Markdown }))
+);
+
+export const Code = ({
+  children,
+  language: languageProp,
+  onCopy,
+  style = a11yDark,
+  customStyle,
+  hideHeader = false,
+  containerProps,
+  ...rest
+}: CodeProps) => {
+  const language = languageProp === 'js' ? 'javascript' : languageProp;
+
+  const translate = useTranslate();
+
+  const [isMarkdownPreviewMode, setIsMarkdownPreviewMode] =
+    useState<boolean>(false);
+
+  const handleCopyClick = () => {
+    onCopy?.(children);
+  };
+
+  const handleMarkdownModeChange = (selectedValue: string) => {
+    setIsMarkdownPreviewMode(selectedValue === 'preview');
+  };
+
+  // On click (not drag), select the code content
+  const handleSyntaxHighlighterClick = (
+    e: React.MouseEvent<HTMLPreElement>
+  ) => {
+    // Skip selection on double-click or if user is already selecting text
+    if (e.detail > 1 || window.getSelection()?.toString() !== '') {
+      return;
+    }
+
+    try {
+      // Find the first child element that contains the code text
+      const codeElement = e.currentTarget.querySelector('code');
+
+      if (codeElement) {
+        const range = document.createRange();
+        range.selectNodeContents(codeElement);
+
+        const selection = window.getSelection();
+        if (selection) {
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      }
+    } catch (error) {
+      console.error('Error selecting code content:', error);
+    }
+  };
+
+  return (
+    <Card
+      p={0}
+      borderRadius="none"
+      {...containerProps}
+      className={['ml-code', containerProps?.className].join(' ')}
+    >
+      {!hideHeader && language && (
+        <Flex
+          className="ml-code-header"
+          justify="space-between"
+          align="center"
+          px={4}
+          py={2}
+          bgColor="white"
+          borderBottom="1px solid"
+          borderColor="primary.light"
+          width="100%"
+          zIndex={2} // show above the code block, but below the TopNav
+        >
+          <Subtext fontWeight="bold" color="gray.1200">
+            <pre>{language}</pre>
+          </Subtext>
+          <Flex align="center" justify="flex-end" gap={2}>
+            {language === 'markdown' && (
+              <SegmentedControl
+                size="sm"
+                options={[
+                  {
+                    label: translate('code_markdown_raw') as string,
+                    value: 'raw',
+                  },
+                  {
+                    label: translate('code_markdown_preview') as string,
+                    value: 'preview',
+                  },
+                ]}
+                onSelect={handleMarkdownModeChange}
+              />
+            )}
+            {onCopy && <CopyButton onClick={handleCopyClick} />}
+          </Flex>
+        </Flex>
+      )}
+      <Box overflow="hidden">
+        <Box position="relative" overflowY="scroll" h="fit-content" p={0}>
+          {isMarkdownPreviewMode ? (
+            <Box p={2}>
+              <Suspense fallback={<Spinner />}>
+                <Markdown
+                  // Prevent infinite loop of markdown rendering
+                  components={{
+                    code: ({ className, ...rest }: any) => {
+                      // className denotes the language of the code block and only exists for block code
+                      if (!className) {
+                        return <InlineCode {...rest} />;
+                      }
+                    },
+                  }}
+                >
+                  {children}
+                </Markdown>
+              </Suspense>
+            </Box>
+          ) : (
+            // @ts-expect-error - SyntaxHighlighter type issues with React 18
+            <SyntaxHighlighter
+              language={language}
+              style={style}
+              wrapLines
+              wrapLongLines
+              {...rest}
+              customStyle={{
+                maxWidth: '100%',
+                margin: 0,
+                borderRadius: 0,
+                ...customStyle,
+              }}
+              onClick={handleSyntaxHighlighterClick}
+            >
+              {children}
+            </SyntaxHighlighter>
+          )}
+        </Box>
+      </Box>
+    </Card>
+  );
+};

package/src/components/Code/Code.types.ts

@@ -0,0 +1,40 @@
+import { SyntaxHighlighterProps } from 'react-syntax-highlighter';
+import { BoxProps } from '@chakra-ui/react';
+
+/**
+ * Code component props
+ */
+export interface CodeProps
+  extends Omit<SyntaxHighlighterProps, 'style' | 'customStyle'> {
+  children: string;
+  /**
+   * Callback for when the copy button is clicked. No copy button is rendered if this prop is not provided.
+   * The user is expected to handle the copying behavior.
+   *
+   * @param str The copied text
+   */
+  onCopy?: (str: string) => void;
+
+  language?: string;
+
+  // Style object from react-syntax-highlighter
+  style?: { [key: string]: React.CSSProperties };
+
+  // Custom style object for the syntax highlighter
+  customStyle?: React.CSSProperties;
+
+  containerProps?: BoxProps;
+
+  /**
+   * Threshold in pixels for when the header should become sticky.
+   * This is typically the height of any fixed header above this component.
+   * @default 48
+   */
+  stickyHeaderThreshold?: number;
+
+  /**
+   * Whether to hide the header of the code block.
+   * @default false
+   */
+  hideHeader?: boolean;
+}

package/src/components/Code/_components/CopyButton.tsx

@@ -0,0 +1,48 @@
+import { MouseEventHandler, useState } from 'react';
+
+import { Icon } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
+import { IconButtonProps } from '@/components/IconButton/IconButton.types';
+import { Tooltip } from '@/components/Tooltip';
+import { useTranslate } from '@/hooks/useTranslate';
+
+export const CopyButton = ({
+  onClick,
+  ...rest
+}: Omit<IconButtonProps, 'aria-label'>) => {
+  const translate = useTranslate();
+  const [labelText, setLabelText] = useState<string>(
+    translate('copy') as string
+  );
+
+  //   Allow both boolean and undefined to toggle back and forth between controlled and uncontrolled states fluidly
+  const [isTooltipOpen, setIsTooltipOpen] = useState<boolean | undefined>(
+    undefined
+  );
+
+  const handleClick: MouseEventHandler = (e) => {
+    // Set it to 'Copied'
+    setLabelText(translate('copied') as string);
+    // @ts-expect-error - Event type mismatch between generic and specific button events
+    onClick?.(e);
+    setIsTooltipOpen(true);
+    // Set it back to 'Copy' after 2s, and back to an uncontrolled tooltip
+    const t = setTimeout(() => {
+      setLabelText(translate('copy') as string);
+      setIsTooltipOpen(undefined);
+      clearTimeout(t);
+    }, 3000);
+  };
+
+  return (
+    <Tooltip label={labelText} isOpen={isTooltipOpen} placement="top">
+      <IconButton
+        aria-label="Copy code"
+        icon={<Icon icon="FaRegCopy" boxSize="sm" />}
+        onClick={handleClick}
+        p={0}
+        {...rest}
+      />
+    </Tooltip>
+  );
+};

package/src/components/Code/index.ts

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

package/src/components/CodeTabs/CodeTabs.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CodeTabs } from './CodeTabs';
+
+const meta: Meta<typeof CodeTabs> = {
+  title: 'Components/CodeTabs',
+  component: CodeTabs,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CodeTabs>;
+
+const CODE_SAMPLES = {
+  javascript: `
+const response = await openai.chat.completions.create({
+  model: "gpt-3.5-turbo",
+  messages: [{ role: "user", content: "Hello, how are you?" }],
+});
+`,
+  python: `
+response = openai.chat.completions.create(
+    model="gpt-3.5-turbo",
+    messages=[{"role": "user", "content": "Hello, how are you?"}]
+)
+`,
+  typescript: `
+const response = await openai.chat.completions.create({
+  model: "gpt-3.5-turbo",
+  messages: [{ role: "user", content: "Hello, how are you?" }],
+});
+`,
+};
+
+export const Default: Story = {
+  args: {
+    code: CODE_SAMPLES,
+  },
+};
+
+export const WithCopyFunction: Story = {
+  args: {
+    code: CODE_SAMPLES,
+    onCopy: (code: string) => {
+      console.log('Copied code:', code);
+    },
+  },
+};

package/src/components/CodeTabs/CodeTabs.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { Flex } from '@chakra-ui/react';
+
+import { Code } from '@/components/Code';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@/components/Tabs';
+import { useTranslate } from '@/hooks/useTranslate';
+
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { useTabsContext } from '../Tabs/TabsContext';
+import { Tooltip } from '../Tooltip';
+import { CodeTabsProps } from './CodeTabs.types';
+const CopyButton = ({
+  onCopy,
+  code,
+}: Pick<CodeTabsProps, 'onCopy' | 'code'>) => {
+  const translate = useTranslate();
+  const [tooltipText, setTooltipText] = useState(translate('copy'));
+  const { selectedIndex } = useTabsContext();
+
+  const handleCopyClick = () => {
+    onCopy?.(code[Object.keys(code)[selectedIndex]]);
+    setTooltipText(translate('copied'));
+    const t = setTimeout(() => {
+      setTooltipText(translate('copy'));
+    }, 1500);
+    return () => clearTimeout(t);
+  };
+
+  return (
+    <Tooltip label={tooltipText} placement="top">
+      <IconButton
+        aria-label="Copy"
+        borderRadius="full"
+        icon={<Icon icon="FaRegCopy" boxSize="xs" />}
+        size="sm"
+        _hover={{
+          bgColor: 'whiteAlpha.500',
+        }}
+        onClick={handleCopyClick}
+      />
+    </Tooltip>
+  );
+};
+
+export const CodeTabs = ({ code, onCopy, ...rest }: CodeTabsProps) => {
+  // Extract languages from code samples
+  const languages = Object.keys(code);
+
+  if (languages.length === 0) {
+    return null;
+  }
+
+  return (
+    <Tabs bgColor="gray.1500" borderRadius="md" {...rest}>
+      <TabList px={2} alignItems="center">
+        <Flex w="100%" flex={1}>
+          {languages.map((language) => (
+            <Tab
+              key={`${language}-tab`}
+              color="gray.800"
+              px={3}
+              py={1}
+              m={2}
+              borderRadius="full"
+              textTransform="uppercase"
+              fontWeight="bold"
+              _selected={{ color: 'white' }}
+              _hover={{
+                bgColor: 'whiteAlpha.500',
+              }}
+            >
+              {language}
+            </Tab>
+          ))}
+        </Flex>
+        {onCopy && <CopyButton onCopy={onCopy} code={code} />}
+      </TabList>
+      <TabPanels>
+        {languages.map((language) => (
+          <TabPanel key={`${language}-tab-panel`}>
+            <Code
+              language={language}
+              hideHeader
+              containerProps={{
+                borderWidth: 0,
+                borderBottomRadius: 'md',
+                overflow: 'hidden',
+              }}
+            >
+              {code[language]?.trim() || ''}
+            </Code>
+          </TabPanel>
+        ))}
+      </TabPanels>
+    </Tabs>
+  );
+};

package/src/components/CodeTabs/CodeTabs.types.ts

@@ -0,0 +1,17 @@
+import { TabsProps } from '@chakra-ui/react';
+
+export interface CodeTabsProps extends Omit<TabsProps, 'children' | 'onCopy'> {
+  /**
+   * Code samples to display in tabs
+   * Each language contains code samples for different providers
+   */
+  code: {
+    [language: string]: string;
+  };
+
+  /**
+   * Callback for when the copy button is clicked
+   * The function will receive the selected code sample
+   */
+  onCopy?: (code: string) => void;
+}

package/src/components/CodeTabs/index.ts

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

package/src/components/Container/Container.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ContainerProps } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+import * as CSS from 'csstype';
+
+import { Container } from './Container';
+
+const meta: Meta<typeof Container> = {
+  title: 'Components/Container',
+  component: Container,
+};
+
+export default meta;
+type Story = StoryFn<typeof Container>;
+
+const containerStoryStyles = {
+  bg: 'red',
+  p: 32,
+  textAlign: 'center' as CSS.Property.TextAlign,
+};
+
+export const Basic: Story = (props: ContainerProps) => {
+  return (
+    <Container {...containerStoryStyles} {...props}>
+      Container
+    </Container>
+  );
+};