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

package/src/components/Tabs/TabsContext.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import React, {
+  createContext,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import { TabsProps as ChakraTabsProps } from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+
+// Optional Next.js navigation hooks with fallbacks
+let useRouter:
+  | (() => { replace: (url: string, options?: any) => void })
+  | null = null;
+let usePathname: (() => string) | null = null;
+
+try {
+  // Try to import Next.js navigation hooks
+  const nextNavigation = require('next/navigation');
+  useRouter = nextNavigation.useRouter;
+  usePathname = nextNavigation.usePathname;
+} catch (error) {
+  // Next.js not available - create fallback implementations
+  useRouter = () => ({
+    replace: (url: string, options?: any) => {
+      if (typeof window !== 'undefined') {
+        window.history.replaceState(null, '', url);
+      }
+    },
+  });
+  usePathname = () =>
+    typeof window !== 'undefined' ? window.location.pathname : '/';
+}
+
+interface TabsContextProps {
+  orientation: ChakraTabsProps['orientation'];
+  urlParam?: string;
+  tabNames: string[];
+  setTabNames: React.Dispatch<React.SetStateAction<string[]>>;
+  selectedIndex: number;
+  setSelectedIndex: (index: number) => void;
+  registerTabName: (index: number, name: string) => void;
+}
+
+const TabsContext = createContext<TabsContextProps>({
+  orientation: undefined,
+  urlParam: undefined,
+  tabNames: [],
+  setTabNames: () => {},
+  selectedIndex: 0,
+  setSelectedIndex: () => {},
+  registerTabName: () => {},
+});
+
+export const useTabsContext = () => useContext(TabsContext);
+
+export function TabsProvider({
+  children,
+  orientation,
+  urlParam,
+}: PropsWithChildren<{
+  orientation: ChakraTabsProps['orientation'];
+  urlParam?: string;
+}>) {
+  const [tabNames, setTabNames] = useState<string[]>([]);
+  const [selectedIndex, setSelectedIndexState] = useState(0);
+  const router = useRouter?.() || { replace: () => {} };
+  const pathname = usePathname?.() || '/';
+
+  // A function to register a tab name at a specific index
+  const registerTabName = useCallback((index: number, name: string) => {
+    setTabNames((prev) => {
+      const newNames = [...prev];
+      newNames[index] = name;
+      return newNames;
+    });
+  }, []);
+
+  // On mount and when search parameters or tab names change, check URL for the tab parameter
+  useLayoutEffect(() => {
+    // Only sync from URL if Next.js navigation is available and urlParam is provided
+    if (!useRouter || !urlParam || tabNames.length === 0) return;
+
+    const searchParams = new URLSearchParams(window.location.search);
+    if (!searchParams) return;
+
+    const tabParam = searchParams.get(urlParam);
+
+    if (tabParam) {
+      const index = tabNames.indexOf(tabParam);
+      if (index !== -1) {
+        setSelectedIndexState(index);
+      }
+    } else {
+      // Handle case where the URL parameter doesn't match any tab
+      // Options: set to default tab, clear parameter, or log warning
+      console.warn(`Tab '${tabParam}' not found, defaulting to first tab`);
+      setSelectedIndexState(0);
+    }
+  }, [urlParam, tabNames, pathname]);
+
+  // When the selected index changes, update the URL
+  const setSelectedIndex = useCallback(
+    (index: number) => {
+      // Don't update if the index hasn't changed
+      if (index === selectedIndex) return;
+
+      setSelectedIndexState(index);
+
+      // Only sync with URL if Next.js navigation is available and urlParam is provided
+      if (
+        typeof window !== 'undefined' &&
+        urlParam &&
+        tabNames.length > index &&
+        tabNames[index] &&
+        useRouter && // Check if Next.js navigation is available
+        router.replace !== (() => {}) // Check if we have real router, not fallback
+      ) {
+        const searchParams = new URLSearchParams(window.location.search);
+        // Create a new URLSearchParams based on the current search params
+        const params = new URLSearchParams(searchParams.toString());
+        const tabName = tabNames[index];
+
+        // Don't update URL if the parameter is already set correctly
+        if (searchParams.get(urlParam) === tabName) return;
+
+        params.set(urlParam, tabName);
+
+        // Replace the current URL
+        const newUrl = `${pathname}?${params.toString()}`;
+        router.replace(newUrl, { scroll: false });
+      }
+    },
+    [urlParam, tabNames, router, pathname, selectedIndex]
+  );
+
+  return (
+    <TabsContext.Provider
+      value={{
+        orientation,
+        urlParam,
+        tabNames,
+        setTabNames,
+        selectedIndex,
+        setSelectedIndex,
+        registerTabName,
+      }}
+    >
+      {children}
+    </TabsContext.Provider>
+  );
+}
+
+TabsProvider.displayName = 'TabsProvider';
+
+TabsProvider.propTypes = {
+  children: PropTypes.node,
+  contextDarkMode: PropTypes.bool,
+};

package/src/components/Tabs/index.tsx

@@ -0,0 +1,5 @@
+export { Tab } from './Tab';
+export { TabList } from './TabList';
+export { TabPanel } from './TabPanel';
+export { TabPanels } from './TabPanels';
+export { Tabs } from './Tabs';

package/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Tag } from './Tag';
+import { TagCloseButton } from './TagCloseButton';
+
+export default {
+  title: 'Components/Tag',
+  component: Tag,
+  args: {
+    children: 'Insert your tag',
+  },
+} as Meta<typeof Tag>;
+
+const Template: StoryFn<typeof Tag> = (args) => <Tag {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Closable = Template.bind({});
+Closable.args = {
+  children: (
+    <>
+      Insert your tag
+      <TagCloseButton />
+    </>
+  ),
+};

package/src/components/Tag/Tag.styles.ts

@@ -0,0 +1,12 @@
+export const variantStyles = {
+  default: {
+    bgColor: 'gray.50',
+    borderColor: 'gray.400',
+    color: 'gray.1200',
+  },
+  active: {
+    bgColor: 'primary.light',
+    borderColor: 'primary.main',
+    color: 'primary.dark',
+  },
+};

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,23 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { Tag as ChakraTag } from '@chakra-ui/react';
+
+import { variantStyles } from './Tag.styles';
+import { TagProps } from './Tag.types';
+
+export const Tag = forwardRef(
+  (
+    { variant = 'default', ...rest }: TagProps,
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => {
+    return (
+      <ChakraTag
+        border="1px solid"
+        {...variantStyles[variant]}
+        {...rest}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Tag.displayName = 'Tag';

package/src/components/Tag/Tag.types.ts

@@ -0,0 +1,5 @@
+import { TagProps as ChakraTagProps } from '@chakra-ui/react';
+
+export interface TagProps extends ChakraTagProps {
+  variant?: 'default' | 'active';
+}

package/src/components/Tag/TagCloseButton/TagCloseButton.tsx

@@ -0,0 +1,12 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { TagCloseButton as ChakraTagCloseButton } from '@chakra-ui/react';
+
+import { TagCloseButtonProps } from './TagCloseButton.types';
+
+export const TagCloseButton = forwardRef(
+  ({ ...rest }: TagCloseButtonProps, ref?: ForwardedRef<HTMLDivElement>) => {
+    return <ChakraTagCloseButton {...rest} ref={ref} />;
+  }
+);
+
+TagCloseButton.displayName = 'TagCloseButton';

package/src/components/Tag/TagCloseButton/TagCloseButton.types.ts

@@ -0,0 +1,3 @@
+import { TagCloseButtonProps as ChakraTagCloseButtonProps } from '@chakra-ui/react';
+
+export interface TagCloseButtonProps extends ChakraTagCloseButtonProps {}

package/src/components/Tag/TagCloseButton/index.ts

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

package/src/components/Tag/TagLabel/TagLabel.tsx

@@ -0,0 +1,12 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { TagLabel as ChakraTagLabel } from '@chakra-ui/react';
+
+import { TagLabelProps } from './TagLabel.types';
+
+export const TagLabel = forwardRef(
+  ({ ...rest }: TagLabelProps, ref?: ForwardedRef<HTMLDivElement>) => {
+    return <ChakraTagLabel {...rest} ref={ref} />;
+  }
+);
+
+TagLabel.displayName = 'TagLabel';

package/src/components/Tag/TagLabel/TagLabel.types.ts

@@ -0,0 +1,3 @@
+import { TagLabelProps as ChakraTagLabelProps } from '@chakra-ui/react';
+
+export interface TagLabelProps extends ChakraTagLabelProps {}

package/src/components/Tag/TagLabel/index.ts

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

package/src/components/Tag/TagLeftIcon/TagLeftIcon.tsx

@@ -0,0 +1,12 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { TagLeftIcon as ChakraTagLeftIcon } from '@chakra-ui/react';
+
+import { TagLeftIconProps } from './TagLeftIcon.types';
+
+export const TagLeftIcon = forwardRef(
+  ({ ...rest }: TagLeftIconProps, ref?: ForwardedRef<SVGSVGElement>) => {
+    return <ChakraTagLeftIcon {...rest} ref={ref} />;
+  }
+);
+
+TagLeftIcon.displayName = 'TagLeftIcon';

package/src/components/Tag/TagLeftIcon/TagLeftIcon.types.ts

@@ -0,0 +1,3 @@
+import { IconProps } from '@chakra-ui/react';
+
+export interface TagLeftIconProps extends IconProps {}

package/src/components/Tag/TagLeftIcon/index.ts

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

package/src/components/Tag/TagRightIcon/TagRightIcon.tsx

@@ -0,0 +1,12 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { TagRightIcon as ChakraTagRightIcon } from '@chakra-ui/react';
+
+import { TagRightIconProps } from './TagRightIcon.types';
+
+export const TagRightIcon = forwardRef(
+  ({ ...rest }: TagRightIconProps, ref?: ForwardedRef<SVGSVGElement>) => {
+    return <ChakraTagRightIcon {...rest} ref={ref} />;
+  }
+);
+
+TagRightIcon.displayName = 'TagRightIcon';

package/src/components/Tag/TagRightIcon/TagRightIcon.types.ts

@@ -0,0 +1,3 @@
+import { IconProps } from '@chakra-ui/react';
+
+export interface TagRightIconProps extends IconProps {}

package/src/components/Tag/TagRightIcon/index.ts

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

package/src/components/Tag/index.ts

@@ -0,0 +1,5 @@
+export * from './Tag';
+export * from './TagCloseButton';
+export * from './TagLabel';
+export * from './TagLeftIcon';
+export * from './TagRightIcon';

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,56 @@
+import {
+  ChangeEvent,
+  ForwardedRef,
+  forwardRef,
+  useEffect,
+  useState,
+} from 'react';
+import {
+  Textarea as ChakraTextarea,
+  TextareaProps,
+  useTheme,
+} from '@chakra-ui/react';
+
+export const Textarea = forwardRef(
+  (
+    {
+      placeholder,
+      onChange,
+      value: propValue,
+      _focusVisible,
+      ...props
+    }: TextareaProps,
+    ref?: ForwardedRef<HTMLTextAreaElement>
+  ) => {
+    const theme = useTheme();
+    const [currentValue, setCurrentValue] = useState<
+      string | number | readonly string[] | undefined
+    >(propValue);
+
+    useEffect(() => {
+      setCurrentValue(propValue);
+    }, [propValue]);
+
+    const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+      setCurrentValue(e.target.value);
+
+      if (onChange) {
+        onChange(e);
+      }
+    };
+    return (
+      <ChakraTextarea
+        ref={ref}
+        placeholder={placeholder}
+        value={currentValue}
+        onChange={handleChange}
+        overflow="hidden"
+        resize="none"
+        focusBorderColor={theme.semanticTokens.colors.primary.main}
+        {...props}
+      />
+    );
+  }
+);
+
+Textarea.displayName = 'Textarea';

package/src/components/Textarea/adjustHeight.tsx

@@ -0,0 +1,9 @@
+export const adjustHeight = (
+  textareaRef: React.RefObject<HTMLTextAreaElement>
+) => {
+  const textarea = textareaRef.current;
+  if (textarea) {
+    textarea.style.height = 'auto';
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }
+};

package/src/components/Textarea/index.ts

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

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,49 @@
+import { Flex } from '@chakra-ui/react';
+import { Meta } from '@storybook/react';
+
+import { Button } from '../Button';
+import { useToast } from './useToast';
+
+const meta: Meta<typeof Text> = {
+  title: 'Components/Toast',
+};
+export default meta;
+
+export function Toasts() {
+  const showToast = useToast();
+
+  return (
+    <Flex gap={3}>
+      <Button
+        onClick={() =>
+          showToast({
+            description: 'Your action was successful.',
+            status: 'success',
+          })
+        }
+      >
+        Show Success Toast
+      </Button>
+      <Button
+        onClick={() =>
+          showToast({
+            description: 'There was an error processing your request.',
+            status: 'info',
+          })
+        }
+      >
+        Show Info Toast
+      </Button>
+      <Button
+        onClick={() =>
+          showToast({
+            description: 'There was an error processing your request.',
+            status: 'error',
+          })
+        }
+      >
+        Show Error Toast
+      </Button>
+    </Flex>
+  );
+}

package/src/components/Toast/Toast.styles.ts

@@ -0,0 +1,19 @@
+import { BoxProps } from '@chakra-ui/react';
+
+export const toastStyles: Record<string, BoxProps> = {
+  success: {
+    bg: 'success.lighter',
+    color: 'success.dark',
+    borderColor: 'success.light',
+  },
+  info: {
+    bg: 'primary.light',
+    color: 'primary.dark',
+    borderColor: 'primary.lighter',
+  },
+  error: {
+    bg: 'danger.lighter',
+    color: 'danger.dark',
+    borderColor: 'danger.light',
+  },
+};

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,38 @@
+import { Box, CloseButton, Flex } from '@chakra-ui/react'; // Import CloseButton
+
+import { H5, Text } from '../Typography';
+import { ToastProps } from './Toast.types';
+import { ToastIcon } from './ToastIcon/ToastIcon';
+
+export const Toast = ({
+  title,
+  description,
+  status = 'success',
+  onClose, // Add onClose prop
+  ...rest
+}: ToastProps & { onClose?: () => void }) => (
+  <Flex
+    align="center"
+    p={4}
+    gap={3}
+    borderWidth="1px"
+    borderRadius="md"
+    boxShadow="lg"
+    whiteSpace="pre-line"
+    position="relative"
+    {...rest}
+  >
+    <ToastIcon status={status} />
+    <Box flex={1}>
+      {title && (
+        <H5 fontWeight="bold" mb={2}>
+          {title}
+        </H5>
+      )}
+      <Text color="inherit">{description}</Text>
+    </Box>
+    <CloseButton
+      onClick={onClose} // Call onClose when clicked
+    />
+  </Flex>
+);

package/src/components/Toast/Toast.types.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import {
+  BoxProps,
+  ChakraProps,
+  UseToastOptions as ChakraUseToastOptions,
+} from '@chakra-ui/react';
+
+export interface MLToastOptions {
+  title?: ReactNode;
+  description: ReactNode;
+  status?: Extract<
+    ChakraUseToastOptions['status'],
+    'success' | 'error' | 'info'
+  >;
+}
+
+export interface ToastProps extends Omit<BoxProps, 'title'>, MLToastOptions {}
+
+export type UseToastOptions = ChakraUseToastOptions &
+  MLToastOptions & {
+    styles?: ChakraProps;
+  };

package/src/components/Toast/ToastIcon/ToastIcon.tsx

@@ -0,0 +1,26 @@
+import { useTheme, useToken } from '@chakra-ui/react';
+
+import { Icon, IconProps } from '../../Icon';
+import { ToastProps } from '../Toast.types';
+
+export const ToastIcon = ({ status }: Required<Pick<ToastProps, 'status'>>) => {
+  const theme = useTheme();
+
+  const iconProps: { [K in typeof status]: Omit<IconProps, 'ref'> } = {
+    success: {
+      icon: 'IoIosCheckmarkCircle',
+      color: useToken('colors', theme.semanticTokens.colors.success.main),
+    },
+    error: {
+      icon: 'MdError',
+      color: useToken('colors', theme.semanticTokens.colors.danger.main),
+    },
+    info: {
+      icon: 'LuInfo',
+      color: useToken('colors', theme.semanticTokens.colors.primary.main),
+      boxSize: 'md',
+    },
+  };
+
+  return <Icon boxSize="lg" {...iconProps[status]} />;
+};

package/src/components/Toast/index.ts

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

package/src/components/Toast/useToast.tsx

@@ -0,0 +1,65 @@
+import { useRef } from 'react';
+import { ToastId, useToast as useChakraToast } from '@chakra-ui/react';
+
+import { Toast } from './Toast';
+import { toastStyles } from './Toast.styles';
+import { UseToastOptions } from './Toast.types';
+
+const MAX_TOASTS = 3;
+
+export const useToast = (props?: UseToastOptions) => {
+  const toast = useChakraToast();
+  const activeToasts = useRef<ToastId[]>([]); // Track active toast IDs
+
+  const showToast = ({
+    status = 'success',
+    title,
+    description,
+    position = 'top',
+    styles: stylesProp,
+    ...rest
+  }: UseToastOptions) => {
+    const styles = {
+      ...toastStyles[status],
+      ...stylesProp,
+    };
+
+    // Close the earliest toast if the limit is reached
+    if (activeToasts.current.length >= MAX_TOASTS) {
+      const [oldestToastId] = activeToasts.current;
+      if (oldestToastId) {
+        toast.close(oldestToastId); // Close the oldest toast
+        activeToasts.current.shift(); // Remove it from the list
+      }
+    }
+
+    // Create a new toast and capture its ID
+    const toastId = toast({
+      duration: 5000,
+      isClosable: true,
+      position,
+      ...props,
+      render: () => (
+        <Toast
+          title={title || ''}
+          description={description}
+          status={status}
+          onClose={() => toast.close(toastId)} // Close this specific toast
+          {...styles} // Apply status-specific styles
+        />
+      ),
+      onCloseComplete: () => {
+        // Remove the toast ID from the active list once closed
+        activeToasts.current = activeToasts.current.filter(
+          (id) => id !== toastId
+        );
+      },
+      ...rest,
+    });
+
+    // Add the new toast ID to the active list
+    activeToasts.current.push(toastId);
+  };
+
+  return showToast;
+};