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

package/src/components/Banner/Banner.styles.ts

@@ -0,0 +1,79 @@
+import { BoxProps } from '@chakra-ui/react';
+
+import { IconProps } from '../Icon';
+import { TypographyProps } from '../Typography';
+import { BannerProps } from './Banner.types';
+
+type VariantType = NonNullable<BannerProps['variant']>;
+
+export const bannerStyles: Record<VariantType, BoxProps> = {
+  info: {
+    bg: 'primary.lighter',
+    borderColor: 'primary.light',
+    color: 'primary.dark',
+  },
+  success: {
+    bg: 'success.lighter',
+    borderColor: 'success.light',
+    color: 'success.dark',
+  },
+  warning: {
+    bg: 'warning.lighter',
+    borderColor: 'warning.light',
+    color: 'warning.dark',
+  },
+  danger: {
+    bg: 'danger.lighter',
+    borderColor: 'danger.light',
+    color: 'danger.dark',
+  },
+};
+
+export const accentStyles: Record<VariantType, BoxProps['_before']> = {
+  info: {
+    bg: 'primary.main',
+  },
+  success: {
+    bg: 'success.main',
+  },
+  warning: {
+    bg: 'warning.main',
+  },
+  danger: {
+    bg: 'danger.dark',
+  },
+};
+
+export const iconStyles: Record<VariantType, IconProps> = {
+  info: {
+    icon: 'LuInfo',
+    color: 'primary.main',
+  },
+  success: {
+    icon: 'IoIosCheckmarkCircle',
+    color: 'success.main',
+  },
+  warning: {
+    icon: 'IoWarning',
+    color: 'warning.main',
+  },
+  danger: {
+    icon: 'MdError',
+    color: 'danger.main',
+  },
+};
+
+export const textStyles: Record<VariantType, TypographyProps> = {
+  info: {
+    color: 'primary.dark',
+  },
+  success: {
+    color: 'success.dark',
+  },
+  warning: {
+    color: 'warning.dark',
+  },
+  danger: {
+    color: 'danger.dark',
+  },
+};

package/src/components/Banner/Banner.tsx

@@ -0,0 +1,68 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+
+import { Icon } from '../Icon';
+import { Text } from '../Typography';
+import {
+  accentStyles,
+  bannerStyles,
+  iconStyles,
+  textStyles,
+} from './Banner.styles';
+import { BannerProps } from './Banner.types';
+
+export const Banner = forwardRef(
+  (
+    { children, variant = 'info', hideIcon = false, ...rest }: BannerProps,
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => {
+    return (
+      <Box
+        position="relative"
+        borderTopRightRadius="md"
+        borderBottomRightRadius="md"
+        borderTopLeftRadius="4px"
+        borderBottomLeftRadius="4px"
+        px={4}
+        py={2}
+        my={2}
+        border="1px solid"
+        textAlign="left"
+        _before={{
+          content: '""',
+          position: 'absolute',
+          top: '-1px',
+          left: '-2px',
+          bottom: '-1px',
+          width: '4px',
+          borderTopLeftRadius: 'lg',
+          borderBottomLeftRadius: 'lg',
+          ...accentStyles[variant],
+        }}
+        {...bannerStyles[variant]}
+        ref={ref}
+        {...rest}
+      >
+        <Flex align="stretch" gap={2}>
+          {!hideIcon && (
+            <Box>
+              {/* @ts-expect-error - Icon ref type incompatibility */}
+              <Icon boxSize="md" mr={2} {...iconStyles[variant]} />
+            </Box>
+          )}
+          {typeof children === 'string' ? (
+            <Text w="100%" {...textStyles[variant]}>
+              {children}
+            </Text>
+          ) : (
+            <Box w="100%" {...textStyles[variant]}>
+              {children}
+            </Box>
+          )}
+        </Flex>
+      </Box>
+    );
+  }
+);
+
+Banner.displayName = 'Banner';

package/src/components/Banner/Banner.types.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from '@chakra-ui/react';
+
+export interface BannerProps extends BoxProps {
+  variant?: 'info' | 'success' | 'warning' | 'danger';
+  hideIcon?: boolean;
+}

package/src/components/Banner/index.ts

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

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Breadcrumb } from './Breadcrumb';
+
+export default {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+} as Meta<typeof Breadcrumb>;
+
+const Template: StoryFn<typeof Breadcrumb> = (args) => <Breadcrumb {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,19 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { Breadcrumb as ChakraBreadcrumb } from '@chakra-ui/react';
+
+import { Icon } from '../Icon';
+import { BreadcrumbProps } from './Breadcrumb.types';
+
+export const Breadcrumb = forwardRef(
+  ({ ...rest }: BreadcrumbProps, ref?: ForwardedRef<HTMLDivElement>) => {
+    return (
+      <ChakraBreadcrumb
+        separator={<Icon icon="IoChevronForward" color="gray.800" />}
+        {...rest}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Breadcrumb.displayName = 'Breadcrumb';

package/src/components/Breadcrumb/Breadcrumb.types.ts

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

package/src/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.tsx

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

package/src/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.types.ts

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

package/src/components/Breadcrumb/BreadcrumbItem/index.ts

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

package/src/components/Breadcrumb/BreadcrumbLink/BreadcrumbLink.tsx

@@ -0,0 +1,30 @@
+import { ForwardedRef, forwardRef } from 'react';
+import { BreadcrumbLink as ChakraBreadcrumbLink } from '@chakra-ui/react';
+
+import { BreadcrumbLinkProps } from './BreadcrumbLink.types';
+// Optional Next.js Link import
+let NextLink: any;
+try {
+  NextLink = require('next/link').default;
+} catch {
+  NextLink = null;
+}
+
+export const BreadcrumbLink = forwardRef(
+  (
+    { href, ...rest }: BreadcrumbLinkProps,
+    ref?: ForwardedRef<HTMLDivElement>
+  ) => {
+    return (
+      <ChakraBreadcrumbLink
+        color="primary.dark"
+        as={NextLink || 'a'}
+        href={href}
+        {...rest}
+        ref={ref}
+      />
+    );
+  }
+);
+
+BreadcrumbLink.displayName = 'BreadcrumbLink';

package/src/components/Breadcrumb/BreadcrumbLink/BreadcrumbLink.types.ts

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

package/src/components/Breadcrumb/BreadcrumbLink/index.ts

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

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1,3 @@
+export * from './Breadcrumb';
+export * from './BreadcrumbItem';
+export * from './BreadcrumbLink';

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Icon } from '../Icon';
+import { Button, variantStyles } from '.';
+import { ButtonVariant } from './Button.types';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  args: {
+    children: 'This is a button',
+  },
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryFn<typeof Button>;
+
+export const Basic: Story = (args) => <Button {...args} />;
+
+export const AllButtonVariants: Story = (args) => {
+  const variants = Object.keys(variantStyles) as Array<ButtonVariant>;
+  return (
+    <Box>
+      {variants.map((variant) => (
+        <div>
+          <p>{variant}</p>
+          <Button {...args} variant={variant} onClick={() => {}} />
+        </div>
+      ))}
+    </Box>
+  );
+};
+
+export const ButtonsWithIcons: Story = (args) => {
+  const variants = Object.keys(variantStyles) as Array<ButtonVariant>;
+  return (
+    <Box>
+      {variants.map((variant) => (
+        <div>
+          <p>{variant}</p>
+          <Button {...args} variant={variant} onClick={() => {}} />
+        </div>
+      ))}
+    </Box>
+  );
+};
+ButtonsWithIcons.args = {
+  leftIcon: <Icon icon="Sparkles" />,
+};

package/src/components/Button/Button.styles.ts

@@ -0,0 +1,59 @@
+import { ButtonProps } from '@chakra-ui/react';
+
+import { ButtonVariant } from '@/components/Button/Button.types';
+import theme from '@/theme/index';
+
+export const variantStyles: Record<
+  Exclude<ButtonVariant, undefined>,
+  Partial<ButtonProps>
+> = {
+  primary: {
+    borderColor: 'primary.main',
+    bgColor: 'primary.main',
+    color: 'white',
+    _hover: {
+      borderColor: 'blue.800',
+      bgColor: 'blue.800',
+    },
+    // TODO: pressed styles currently not applying accurately in Storybook
+    _pressed: {
+      bgColor: 'blue.1000',
+    },
+  },
+  secondary: {
+    borderColor: '#dbe7ff',
+    bgColor: 'primary.light',
+    color: 'primary.main',
+    _hover: {
+      borderColor: '#c8d9ff',
+      bgColor: 'blue.200',
+    },
+    _pressed: {
+      bgColor: 'blue.400',
+    },
+  },
+  tertiary: {
+    borderColor: 'gray.400',
+    bgColor: 'white',
+    color: 'gray.1200',
+    _hover: {
+      bgColor: 'gray.50',
+    },
+  },
+  danger: {
+    borderColor: 'danger.main',
+    bgColor: 'danger.main',
+    color: 'white',
+    _hover: {
+      bgColor: theme.colors.red[600],
+    },
+  },
+  link: {
+    borderColor: 'transparent',
+    bgColor: 'transparent',
+    borderRadius: 'none',
+    _hover: {
+      bgColor: 'transparent',
+    },
+  },
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react';
+import { Button as ChakraButton, useTheme, useToken } from '@chakra-ui/react';
+
+import { variantStyles } from './Button.styles';
+import { ButtonProps } from './Button.types';
+
+export const Button = forwardRef(
+  (
+    {
+      variant = 'secondary', // default to secondary as they are less likely to cause bigger design issues
+      _focus,
+      size,
+      ...rest
+    }: ButtonProps,
+    ref
+  ) => {
+    const theme = useTheme();
+    const primaryMainColor = useToken(
+      'colors',
+      theme.semanticTokens.colors.primary.main
+    );
+    return (
+      <ChakraButton
+        border="1px solid"
+        lineHeight="1.2"
+        size={size}
+        fontSize={size === 'xs' ? 'sm' : size} // xs is too small
+        variant={variant === 'link' ? 'link' : undefined} // if variant isn't link, use our custom variant styles
+        {...variantStyles[variant]}
+        _focus={{
+          outline: 'none',
+          boxShadow: `rgb(255, 255, 255) 0px 0px 0px 2px, ${primaryMainColor} 0px 0px 0px 4px`,
+          ..._focus,
+        }}
+        transition="all 0.25s ease-in-out"
+        ref={ref}
+        {...rest}
+      />
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/src/components/Button/Button.types.ts

@@ -0,0 +1,13 @@
+import { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
+
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'danger'
+  | 'link'
+  | undefined;
+
+export type ButtonProps = Omit<ChakraButtonProps, 'variant'> & {
+  variant?: ButtonVariant;
+};

package/src/components/Button/index.tsx

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export { variantStyles } from './Button.styles';
+export type { ButtonProps } from './Button.types';

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryFn } from '@storybook/react';
+
+import { Card } from './Card';
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+  args: {
+    children: 'Default Card',
+    p: 8,
+  },
+};
+
+export default meta;
+type Story = StoryFn<typeof Card>;
+
+export const Default: Story = {};
+
+export const Gradient: Story = {
+  args: {
+    variant: 'gradient',
+    children: 'Gradient Card',
+  },
+};

package/src/components/Card/Card.styles.ts

@@ -0,0 +1,30 @@
+import theme from '@/theme/index';
+
+// Light mode styles only
+export const cardStyles = {
+  bgColor: theme.colors.white,
+  color: theme.colors.black,
+  borderColor: theme.colors.gray[100],
+};
+
+export const clickableStyles = {
+  cursor: 'pointer',
+  _hover: {
+    boxShadow: 'lg',
+    ['.card-image']: {
+      // TODO: define in theme
+      transition: '0.3s all',
+      transform: 'scale(1.05)',
+      backgroundSize: '105%',
+    },
+  },
+};
+
+export const variantStyles = {
+  default: {},
+  gradient: {
+    bg: `linear-gradient(180deg, #F5F8FD 0%, #FFFFFF 100%)`,
+    border: `1px solid`,
+    borderColor: 'blue.600',
+  },
+};

package/src/components/Card/Card.tsx

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import { Card as ChakraCard } from '@chakra-ui/react';
+
+import { clickableStyles, variantStyles } from './Card.styles';
+import { CardProps } from './Card.types';
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ clickable, variant = 'default', ...rest }, ref) => {
+    return (
+      <ChakraCard
+        ref={ref}
+        position="relative"
+        bgColor="inherit"
+        color="inherit"
+        boxShadow="none"
+        border="1px solid"
+        borderColor="gray.300"
+        borderRadius="lg"
+        transition="0.3s all"
+        p={8}
+        {...(clickable ? clickableStyles : {})}
+        {...variantStyles[variant]}
+        {...rest}
+      />
+    );
+  }
+);
+
+Card.displayName = 'Card';

package/src/components/Card/Card.types.ts

@@ -0,0 +1,8 @@
+import { CardProps as ChakraCardProps } from '@chakra-ui/react';
+
+export type CardVariant = 'default' | 'gradient';
+
+export type CardProps = ChakraCardProps & {
+  clickable?: boolean;
+  variant?: CardVariant;
+};

package/src/components/Card/index.ts

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