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

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -12,36 +12,11 @@ import {
   dropdownMenuLabel,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type DropdownMenuPosition =
-  | 'bottomLeft'
-  | 'bottomRight'
-  | 'topLeft'
-  | 'topRight';
-export type DropdownMenuItemVariant = 'default' | 'destructive' | 'disabled';
-
-export interface DropdownMenuItemProps {
-  label: string;
-  onClick?: () => void;
-  variant?: DropdownMenuItemVariant;
-  icon?: React.ReactNode;
-  disabled?: boolean;
-}
-
-export interface DropdownMenuGroupProps {
-  label?: string;
-  items: DropdownMenuItemProps[];
-}
-
-export type DropdownMenuProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    trigger: React.ReactNode;
-    items?: DropdownMenuItemProps[];
-    groups?: DropdownMenuGroupProps[];
-    position?: DropdownMenuPosition;
-    closeOnItemClick?: boolean;
-  };
+import {
+  type DropdownMenuProps,
+  type DropdownMenuItemProps,
+  type DropdownMenuGroupProps,
+} from './DropdownMenu.types';
 
 const DropdownMenu = ({
   trigger,

package/src/components/DropdownMenu/DropdownMenu.types.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type DropdownMenuPosition =
+  | 'bottomLeft'
+  | 'bottomRight'
+  | 'topLeft'
+  | 'topRight';
+export type DropdownMenuItemVariant = 'default' | 'destructive' | 'disabled';
+
+export interface DropdownMenuItemProps {
+  label: string;
+  onClick?: () => void;
+  variant?: DropdownMenuItemVariant;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface DropdownMenuGroupProps {
+  label?: string;
+  items: DropdownMenuItemProps[];
+}
+
+export type DropdownMenuProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    trigger: React.ReactNode;
+    items?: DropdownMenuItemProps[];
+    groups?: DropdownMenuGroupProps[];
+    position?: DropdownMenuPosition;
+    closeOnItemClick?: boolean;
+  };

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

@@ -1,4 +1,4 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { styleVariants } from '@vanilla-extract/css';
 import { vars } from '../../styles/theme.css';
 import { styleWithLayer } from '../../styles/utils';
 

package/src/components/EmptyState/EmptyState.tsx

@@ -8,15 +8,7 @@ import {
   emptyStateAction,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type EmptyStateProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    icon?: React.ReactNode;
-    title?: string;
-    description?: string;
-    action?: React.ReactNode;
-  };
+import { type EmptyStateProps } from './EmptyState.types';
 
 const EmptyState = ({
   icon,

package/src/components/EmptyState/EmptyState.types.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type EmptyStateProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    action?: React.ReactNode;
+  };

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

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+
 import { vars } from '../../styles/theme.css';
 import { styleWithLayer } from '../../styles/utils';
 

package/src/components/FileUpload/FileUpload.stories.tsx

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

package/src/components/FileUpload/FileUpload.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useCallback } from 'react';
 import {
   fileUploadContainer,
   fileUploadDropzone,
@@ -21,34 +21,7 @@ import {
   fileUploadProgressFillVariants,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export interface FileUploadFile {
-  id: string;
-  file: File;
-  name: string;
-  size: number;
-  progress: number;
-  status: 'uploading' | 'success' | 'error';
-  errorMessage?: string;
-}
-
-export type FileUploadProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    label?: string;
-    files?: FileUploadFile[];
-    onFilesChange?: (files: FileUploadFile[]) => void;
-    onFileAdd?: (files: File[]) => void;
-    onFileRemove?: (fileId: string) => void;
-    accept?: string;
-    multiple?: boolean;
-    maxFileSize?: number;
-    maxFiles?: number;
-    disabled?: boolean;
-    dropzoneText?: string;
-    hint?: string;
-    showProgress?: boolean;
-  };
+import { type FileUploadProps } from './FileUpload.types';
 
 const formatFileSize = (bytes: number): string => {
   if (bytes === 0) return '0 Bytes';
@@ -61,7 +34,6 @@ const formatFileSize = (bytes: number): string => {
 const FileUpload = ({
   label,
   files = [],
-  onFilesChange,
   onFileAdd,
   onFileRemove,
   accept,

package/src/components/FileUpload/FileUpload.types.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type FileUploadStatus = 'uploading' | 'success' | 'error';
+
+export interface FileUploadFile {
+  id: string;
+  file: File;
+  name: string;
+  size: number;
+  progress: number;
+  status: FileUploadStatus;
+  errorMessage?: string;
+}
+
+export type FileUploadProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    label?: string;
+    files?: FileUploadFile[];
+    onFilesChange?: (files: FileUploadFile[]) => void;
+    onFileAdd?: (files: File[]) => void;
+    onFileRemove?: (fileId: string) => void;
+    accept?: string;
+    multiple?: boolean;
+    maxFileSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    dropzoneText?: string;
+    hint?: string;
+    showProgress?: boolean;
+  };

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

@@ -1,4 +1,4 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { styleVariants } from '@vanilla-extract/css';
 import { vars } from '../../styles/theme.css';
 import { styleWithLayer } from '../../styles/utils';
 

package/src/components/Form/Form.stories.tsx

@@ -1,10 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { fn } from 'storybook/test';
-
 import { Form } from '.';
-import React from 'react';
-import { Input } from '../Input';
 import FormInput from './FormInput';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export

package/src/components/Form/Form.tsx

@@ -2,12 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { formStyle } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-type FormProps = React.FormHTMLAttributes<HTMLFormElement> &
-  Sprinkles & {
-    children?: React.ReactNode;
-  };
+import { type FormProps } from './Form.types';
 
 const Form = (props: FormProps) => {
   return (

package/src/components/Form/Form.types.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type FormProps = React.FormHTMLAttributes<HTMLFormElement> &
+  Sprinkles & {
+    children?: React.ReactNode;
+  };

package/src/components/Form/FormInput.tsx

@@ -2,10 +2,8 @@ import clsx from 'clsx';
 import React from 'react';
 import { formInputStyle } from './styles.css';
 import { Input } from '../..';
-import { InputProps } from '../Input/Input';
 import Box from '../Box';
-
-type FormInputProps = React.InputHTMLAttributes<HTMLInputElement> & InputProps;
+import { type FormInputProps } from './FormInput.types';
 
 const FormInput = (props: FormInputProps) => {
   return (

package/src/components/Form/FormInput.types.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InputProps } from '../Input/Input.types';
+
+export type FormInputProps = React.InputHTMLAttributes<HTMLInputElement> & InputProps;

package/src/components/Grid/Grid.tsx

@@ -1,17 +1,6 @@
 import React, { forwardRef } from 'react';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
-export type GridGap = 'none' | 'small' | 'medium' | 'large';
-
-export type GridProps = React.HTMLAttributes<HTMLDivElement> &
-  Sprinkles & {
-    columns?: GridColumns;
-    gap?: GridGap;
-    minChildWidth?: string;
-    children?: React.ReactNode;
-  };
+import { type GridProps, type GridGap } from './Grid.types';
 
 const gapMap: Record<GridGap, string> = {
   none: '0',

package/src/components/Grid/Grid.types.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
+export type GridGap = 'none' | 'small' | 'medium' | 'large';
+
+export type GridProps = React.HTMLAttributes<HTMLDivElement> &
+  Sprinkles & {
+    columns?: GridColumns;
+    gap?: GridGap;
+    minChildWidth?: string;
+    children?: React.ReactNode;
+  };

package/src/components/Icon/Icon.tsx

@@ -2,14 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { icon } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-type IconProps = React.HTMLAttributes<HTMLSpanElement> &
-  Sprinkles & {
-    name?: string;
-    children?: React.ReactNode;
-    color?: string;
-  };
+import { type IconProps } from './Icon.types';
 
 const IconComponent = ({ name, children, className, color }: IconProps) => {
   const iconMap: Record<string, string> = {

package/src/components/Icon/Icon.types.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type IconProps = React.HTMLAttributes<HTMLSpanElement> &
+  Sprinkles & {
+    name?: string;
+    children?: React.ReactNode;
+    color?: string;
+  };

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

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

package/src/components/Input/Input.stories.tsx

@@ -1,8 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { fn } from 'storybook/test';
-import React from 'react';
-
 import { Input } from '.';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export

package/src/components/Input/Input.tsx

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

package/src/components/Input/Input.types.ts

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

package/src/components/Input/index.ts

@@ -1 +1,2 @@
 export { default as Input } from './Input';
+export type { InputProps } from './Input';

package/src/components/Kbd/Kbd.tsx

@@ -1,11 +1,6 @@
 import React from 'react';
 import { kbd } from './styles.css';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type KbdProps = React.HTMLAttributes<HTMLElement> &
-  Sprinkles & {
-    children: React.ReactNode;
-  };
+import { type KbdProps } from './Kbd.types';
 
 const Kbd = ({ children, className, ...props }: KbdProps) => {
   return (

package/src/components/Kbd/Kbd.types.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type KbdProps = React.HTMLAttributes<HTMLElement> &
+  Sprinkles & {
+    children: React.ReactNode;
+  };

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

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+
 import { vars } from '../../styles/theme.css';
 import { styleWithLayer } from '../../styles/utils';
 

package/src/components/List/List.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import { list } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
+import { type ListProps } from './List.types';
 
-const List = ({
-  children,
-  ...props
-}: { children: React.ReactNode } & Sprinkles) => {
+const List = ({ children, ...props }: ListProps) => {
   return (
     <Box as="ul" className={list} {...props}>
       {children}

package/src/components/List/List.types.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type ListProps = Sprinkles & {
+  children: React.ReactNode;
+};

package/src/components/List/ListItem.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import { listItem } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
+import { type ListItemProps } from './ListItem.types';
 
-const ListItem = ({
-  children,
-  ...props
-}: { children: React.ReactNode } & Sprinkles) => {
+const ListItem = ({ children, ...props }: ListItemProps) => {
   return (
     <Box as="li" className={listItem} {...props}>
       {children}

package/src/components/List/ListItem.types.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type ListItemProps = Sprinkles & {
+  children: React.ReactNode;
+};

package/src/components/Modal/Modal.tsx

@@ -10,21 +10,7 @@ import {
 } from './styles.css';
 import React, { useEffect, useRef } from 'react';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type ModalSize = 'small' | 'medium' | 'large' | 'full';
-
-type ModalPropsType = React.HTMLAttributes<HTMLDialogElement> & {
-  isOpen: boolean;
-  onClose: () => void;
-  title?: string;
-  size?: ModalSize;
-  children?: React.ReactNode;
-  footer?: React.ReactNode;
-  showCloseButton?: boolean;
-};
-
-export type ModalProps = ModalPropsType & Sprinkles;
+import { type ModalProps } from './Modal.types';
 
 interface DialogMethods {
   showModal: () => void;

package/src/components/Modal/Modal.types.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type ModalSize = 'small' | 'medium' | 'large' | 'full';
+
+type ModalPropsType = React.HTMLAttributes<HTMLDialogElement> & {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  size?: ModalSize;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  showCloseButton?: boolean;
+};
+
+export type ModalProps = ModalPropsType & Sprinkles;

package/src/components/Navbar/Navbar.stories.tsx

@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { fn } from 'storybook/test';
-
 import { Navbar, NavbarItem } from './';
-import React from 'react';
 import { P } from '../Text';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export

package/src/components/Navbar/Navbar.tsx

@@ -2,11 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { navbarStyle } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-type NavbarProps = React.HTMLAttributes<HTMLElement> & Sprinkles & {
-  children?: React.ReactNode;
-};
+import { type NavbarProps } from './Navbar.types';
 
 const Navbar = (props: NavbarProps) => {
   return (

package/src/components/Navbar/Navbar.types.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type NavbarProps = React.HTMLAttributes<HTMLElement> & Sprinkles & {
+  children?: React.ReactNode;
+};

package/src/components/Navbar/NavbarItem.tsx

@@ -2,11 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { navbarItemStyle } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-type NavbarItemProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-  children?: React.ReactNode;
-};
+import { type NavbarItemProps } from './NavbarItem.types';
 
 const NavbarItem = (props: NavbarItemProps) => {
   return <Box as="div" className={clsx(navbarItemStyle, props.className)} {...props} />;

package/src/components/Navbar/NavbarItem.types.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type NavbarItemProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
+  children?: React.ReactNode;
+};

package/src/components/NumberInput/NumberInput.stories.tsx

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

package/src/components/NumberInput/NumberInput.tsx

@@ -13,30 +13,7 @@ import {
   numberInputErrorMessage,
 } from './styles.css';
 import Box from '../Box';
-import { Sprinkles } from '../../styles/sprinkles.css';
-
-export type NumberInputPosition = 'right' | 'left';
-
-export type NumberInputProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  'onChange' | 'value' | 'min' | 'max'
-> &
-  Sprinkles & {
-    label?: string;
-    value?: number | '';
-    onChange?: (value: number | '') => void;
-    min?: number;
-    max?: number;
-    step?: number;
-    stepperPosition?: NumberInputPosition;
-    placeholder?: string;
-    hint?: string;
-    error?: boolean;
-    errorMessage?: string;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    allowEmpty?: boolean;
-  };
+import { type NumberInputProps } from './NumberInput.types';
 
 const NumberInput = ({
   label,

package/src/components/NumberInput/NumberInput.types.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+
+export type NumberInputPosition = 'right' | 'left';
+
+export type NumberInputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'onChange' | 'value' | 'min' | 'max'
+> &
+  Sprinkles & {
+    label?: string;
+    value?: number | '';
+    onChange?: (value: number | '') => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    stepperPosition?: NumberInputPosition;
+    placeholder?: string;
+    hint?: string;
+    error?: boolean;
+    errorMessage?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    allowEmpty?: boolean;
+  };

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

@@ -1,4 +1,4 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { styleVariants } from '@vanilla-extract/css';
 import { vars } from '../../styles/theme.css';
 import { styleWithLayer } from '../../styles/utils';
 

package/src/components/Pagination/Pagination.stories.tsx

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