@jordan-mace/chaser-design-system 2.1.1 → 2.2.0

package/src/components/Table/Table.tsx

@@ -11,17 +11,18 @@ import {
   tableContainer,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
+import {
+  type TableProps,
+  type TheadProps,
+  type TbodyProps,
+  type TfootProps,
+  type TrProps,
+  type ThProps,
+  type TdProps,
+} from './Table.types';
 
-// Context to pass striping info to rows
 const TableContext = createContext<{ striped?: boolean }>({});
 
-type TableProps = React.HTMLAttributes<HTMLTableElement> &
-  Sprinkles & {
-    children: React.ReactNode;
-    striped?: boolean;
-  };
-
 const TableComponent = ({
   children,
   striped = false,
@@ -39,11 +40,6 @@ const TableComponent = ({
   );
 };
 
-type TheadProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
 const Thead = ({ children, className }: TheadProps) => {
   return (
     <Box as="thead" className={clsx(thead, className)}>
@@ -52,11 +48,6 @@ const Thead = ({ children, className }: TheadProps) => {
   );
 };
 
-type TbodyProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
 const Tbody = ({ children, className }: TbodyProps) => {
   return (
     <Box as="tbody" className={clsx(tbody, className)}>
@@ -65,11 +56,6 @@ const Tbody = ({ children, className }: TbodyProps) => {
   );
 };
 
-type TfootProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
 const Tfoot = ({ children, className }: TfootProps) => {
   return (
     <Box as="tfoot" className={clsx(tfoot, className)}>
@@ -78,11 +64,6 @@ const Tfoot = ({ children, className }: TfootProps) => {
   );
 };
 
-type TrProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
 const Tr = ({ children, className }: TrProps) => {
   const { striped } = useContext(TableContext);
   return (
@@ -95,11 +76,6 @@ const Tr = ({ children, className }: TrProps) => {
   );
 };
 
-type ThProps = {
-  children?: React.ReactNode;
-  className?: string;
-};
-
 const Th = ({ children, className }: ThProps) => {
   return (
     <Box as="th" className={clsx(th, className)}>
@@ -108,13 +84,6 @@ const Th = ({ children, className }: ThProps) => {
   );
 };
 
-type TdProps = {
-  children?: React.ReactNode;
-  className?: string;
-  colSpan?: number;
-  rowSpan?: number;
-};
-
 const Td = ({ children, className, colSpan, rowSpan }: TdProps) => {
   return (
     <Box

package/src/components/Table/Table.types.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type TableProps = React.HTMLAttributes<HTMLTableElement> &
+  Sprinkles & {
+    children: React.ReactNode;
+    striped?: boolean;
+  };
+
+export type TheadProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export type TbodyProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export type TfootProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export type TrProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export type ThProps = {
+  children?: React.ReactNode;
+  className?: string;
+};
+
+export type TdProps = {
+  children?: React.ReactNode;
+  className?: string;
+  colSpan?: number;
+  rowSpan?: number;
+};

package/src/components/Tabs/Tabs.tsx

@@ -9,27 +9,19 @@ import {
   tabContent,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-type TabsContextType = {
-  activeTab: string;
-  setActiveTab: (value: string) => void;
-  orientation?: 'horizontal' | 'vertical';
-};
+import {
+  type TabsProps,
+  type TabListProps,
+  type TabProps,
+  type TabPanelProps,
+  type TabsContextType,
+} from './Tabs.types';
 
 const TabsContext = createContext<TabsContextType>({
   activeTab: '',
   setActiveTab: () => {},
 });
 
-type TabsProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    children: React.ReactNode;
-    defaultValue?: string;
-    orientation?: 'horizontal' | 'vertical';
-    onChange?: (value: string) => void;
-  };
-
 const Tabs = ({
   children,
   defaultValue = '',
@@ -58,11 +50,6 @@ const Tabs = ({
   );
 };
 
-type TabListProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
 const TabList = ({ children, className }: TabListProps) => {
   const { orientation } = useContext(TabsContext);
 
@@ -81,13 +68,6 @@ const TabList = ({ children, className }: TabListProps) => {
   );
 };
 
-type TabProps = {
-  value: string;
-  children: React.ReactNode;
-  disabled?: boolean;
-  className?: string;
-};
-
 const Tab = ({ value, children, disabled = false, className }: TabProps) => {
   const { activeTab, setActiveTab, orientation } = useContext(TabsContext);
   const isActive = activeTab === value;
@@ -123,12 +103,6 @@ const Tab = ({ value, children, disabled = false, className }: TabProps) => {
   );
 };
 
-type TabPanelProps = {
-  value: string;
-  children: React.ReactNode;
-  className?: string;
-};
-
 const TabPanel = ({ value, children, className }: TabPanelProps) => {
   const { activeTab } = useContext(TabsContext);
   const isActive = activeTab === value;

package/src/components/Tabs/Tabs.types.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type TabsOrientation = 'horizontal' | 'vertical';
+
+export type TabsContextType = {
+  activeTab: string;
+  setActiveTab: (value: string) => void;
+  orientation?: TabsOrientation;
+};
+
+export type TabsProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    children: React.ReactNode;
+    defaultValue?: string;
+    orientation?: TabsOrientation;
+    onChange?: (value: string) => void;
+  };
+
+export type TabListProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export type TabProps = {
+  value: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+};
+
+export type TabPanelProps = {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+};

package/src/components/Tag/Tag.tsx

@@ -2,15 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { tag, removeButton, tagGroup } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-type TagProps = React.HTMLAttributes<HTMLSpanElement> &
-  Sprinkles & {
-    children: React.ReactNode;
-    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
-    onRemove?: () => void;
-    removable?: boolean;
-  };
+import { type TagProps, type TagGroupProps } from './Tag.types';
 
 const Tag = ({
   children,
@@ -48,11 +40,6 @@ const Tag = ({
   );
 };
 
-type TagGroupProps = {
-  children: React.ReactNode;
-  className?: string;
-};
-
 const TagGroup = ({ children, className }: TagGroupProps) => {
   return (
     <Box

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type TagVariant = 'default' | 'primary' | 'success' | 'warning' | 'error';
+
+export type TagProps = React.HTMLAttributes<HTMLSpanElement> &
+  Sprinkles & {
+    children: React.ReactNode;
+    variant?: TagVariant;
+    onRemove?: () => void;
+    removable?: boolean;
+  };
+
+export type TagGroupProps = {
+  children: React.ReactNode;
+  className?: string;
+};

package/src/components/Text/Header.tsx

@@ -2,13 +2,7 @@ import clsx from 'clsx';
 import { heading, text } from './styles.css';
 import React from 'react';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-type HeaderProps = React.HTMLAttributes<HTMLHeadingElement> &
-  Sprinkles & {
-    variant: 'h1' | 'h2' | 'h3';
-    children?: React.ReactNode;
-  };
+import { type HeaderProps } from './Text.types';
 
 const Header = ({ variant, children, className }: HeaderProps) => {
   return (

package/src/components/Text/P.stories.tsx

@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import React from 'react';
-
 import { P } from '.';
 
 const meta = {

package/src/components/Text/P.tsx

@@ -2,12 +2,7 @@ import clsx from 'clsx';
 import { text } from './styles.css';
 import React from 'react';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-type PProps = React.HTMLAttributes<HTMLParagraphElement> &
-  Sprinkles & {
-    children: React.ReactNode;
-  };
+import { type PProps } from './Text.types';
 
 const P = (props: PProps) => {
   return (

package/src/components/Text/Text.types.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type HeaderVariant = 'h1' | 'h2' | 'h3';
+
+export type HeaderProps = React.HTMLAttributes<HTMLHeadingElement> &
+  Sprinkles & {
+    variant: HeaderVariant;
+    children?: React.ReactNode;
+  };
+
+export type PProps = React.HTMLAttributes<HTMLParagraphElement> &
+  Sprinkles & {
+    children: React.ReactNode;
+  };

package/src/components/TextArea/TextArea.stories.tsx

@@ -1,8 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { fn } from 'storybook/test';
-import React from 'react';
-
 import { TextArea } from '.';
 
 const meta = {

package/src/components/TextArea/TextArea.tsx

@@ -3,13 +3,7 @@ import React from 'react';
 import { textAreaStyle, label } from './styles.css';
 import { text } from '../Text/styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
-  Sprinkles & {
-    label?: string;
-    fullWidth?: boolean;
-  };
+import { type TextAreaProps } from './TextArea.types';
 
 const TextArea = (props: TextAreaProps) => {
   return (

package/src/components/TextArea/TextArea.types.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
+  Sprinkles & {
+    label?: string;
+    fullWidth?: boolean;
+  };

package/src/components/Toast/Toast.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect, useCallback, useRef, ReactNode } from 'react';
+import React, { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import clsx from 'clsx';
 import {
@@ -16,40 +16,16 @@ import {
   slideInRight,
 } from './styles.css';
 import { Icon } from '../Icon';
-
-export type ToastPosition =
-  | 'top-left'
-  | 'top-center'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-center'
-  | 'bottom-right';
-
-export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
-
-export type ToastOptions = {
-  duration?: number;
-  closable?: boolean;
-  position?: ToastPosition;
-  onClose?: () => void;
-};
-
-type ToastItem = {
-  id: string;
-  message: string;
-  variant: ToastVariant;
-  options: ToastOptions;
-  startTime: number;
-  paused: boolean;
-  duration: number;
-};
-
-type ToastContextType = {
-  addToast: (message: string, variant?: ToastVariant, options?: ToastOptions) => string;
-  removeToast: (id: string) => void;
-  handleDismissAll: () => void;
-  handleResumeAll: () => void;
-};
+import {
+  type ToastPosition,
+  type ToastVariant,
+  type ToastOptions,
+  type ToastItem,
+  type ToastContextType,
+  type ToastProviderProps,
+  type ToastContainerProps,
+  type ToastComponentProps,
+} from './Toast.types';
 
 const ToastContext = createContext<ToastContextType>({
   addToast: () => '',
@@ -77,13 +53,6 @@ const positionToClassKey: Record<ToastPosition, keyof typeof toastWrapper> = {
   'bottom-right': 'bottomRight',
 };
 
-type ToastProviderProps = {
-  children: ReactNode;
-  position?: ToastPosition;
-  maxVisible?: number;
-  stacking?: 'stack' | 'replace';
-};
-
 export const ToastProvider = ({
   children,
   position = 'top-right',
@@ -239,15 +208,6 @@ export const ToastProvider = ({
   );
 };
 
-type ToastContainerProps = {
-  toasts: ToastItem[];
-  position: ToastPosition;
-  pauseId: string | null;
-  onDismiss: (id: string) => void;
-  onDismissAll: () => void;
-  onResumeAll: () => void;
-};
-
 const ToastContainer = ({
   toasts,
   position,
@@ -328,14 +288,8 @@ export const useToast = () => {
   return context;
 };
 
-export type ToastComponentProps = {
-  message: string;
-  variant?: ToastVariant;
-  options?: ToastOptions;
-  className?: string;
-};
-
-export const Toast = ({ message, variant = 'info', options, className }: ToastComponentProps) => {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const Toast = (_props: ToastComponentProps) => {
   return null;
 };
 

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

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+
+export type ToastPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+
+export type ToastOptions = {
+  duration?: number;
+  closable?: boolean;
+  position?: ToastPosition;
+  onClose?: () => void;
+};
+
+export type ToastItem = {
+  id: string;
+  message: string;
+  variant: ToastVariant;
+  options: ToastOptions;
+  startTime: number;
+  paused: boolean;
+  duration: number;
+};
+
+export type ToastContextType = {
+  addToast: (message: string, variant?: ToastVariant, options?: ToastOptions) => string;
+  removeToast: (id: string) => void;
+  handleDismissAll: () => void;
+  handleResumeAll: () => void;
+};
+
+export type ToastProviderProps = {
+  children: ReactNode;
+  position?: ToastPosition;
+  maxVisible?: number;
+  stacking?: 'stack' | 'replace';
+};
+
+export type ToastContainerProps = {
+  toasts: ToastItem[];
+  position: ToastPosition;
+  pauseId: string | null;
+  onDismiss: (id: string) => void;
+  onDismissAll: () => void;
+  onResumeAll: () => void;
+};
+
+export type ToastComponentProps = {
+  message: string;
+  variant?: ToastVariant;
+  options?: ToastOptions;
+  className?: string;
+};

package/src/components/Toggle/Toggle.tsx

@@ -15,20 +15,7 @@ import {
 } from './styles.css';
 import React, { useState, useId } from 'react';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type ToggleSize = 'small' | 'medium' | 'large';
-
-export type ToggleProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  'size' | 'checked' | 'onChange'
-> &
-  Sprinkles & {
-    checked?: boolean;
-    onChange?: (checked: boolean) => void;
-    size?: ToggleSize;
-    label?: string;
-  };
+import { type ToggleProps } from './Toggle.types';
 
 const Toggle = ({
   checked = false,

package/src/components/Toggle/Toggle.types.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type ToggleSize = 'small' | 'medium' | 'large';
+
+export type ToggleProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'size' | 'checked' | 'onChange'
+> &
+  Sprinkles & {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    size?: ToggleSize;
+    label?: string;
+  };

package/src/components/Tooltip/Tooltip.tsx

@@ -11,17 +11,7 @@ import {
 } from './styles.css';
 import React, { useState } from 'react';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-
-export type TooltipProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    content: string;
-    position?: TooltipPosition;
-    showArrow?: boolean;
-    children: React.ReactNode;
-  };
+import { type TooltipProps } from './Tooltip.types';
 
 const Tooltip = ({
   content,

package/src/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export type TooltipProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    content: string;
+    position?: TooltipPosition;
+    showArrow?: boolean;
+    children: React.ReactNode;
+  };

package/src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -1,11 +1,6 @@
 import React from 'react';
 import { visuallyHidden } from './styles.css';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type VisuallyHiddenProps = Sprinkles & {
-  children: React.ReactNode;
-  as?: React.ElementType;
-};
+import { type VisuallyHiddenProps } from './VisuallyHidden.types';
 
 const VisuallyHidden = ({
   children,

package/src/components/VisuallyHidden/VisuallyHidden.types.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type VisuallyHiddenProps = Sprinkles & {
+  children: React.ReactNode;
+  as?: React.ElementType;
+};

package/src/components/VisuallyHidden/styles.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+
 import { styleWithLayer } from '../../styles/utils';
 
 export const visuallyHidden = styleWithLayer({