@indico-data/design-system 3.0.10 → 3.2.0

package/lib/types.d.ts

@@ -6,7 +6,9 @@ export type PermafrostComponent = {
 };
 import { IconSizes, IconName } from './components/icons/types';
 export type { IconSizes, IconName };
-export type SemanticColor = 'neutral' | 'info' | 'warning' | 'error' | 'success' | 'teal' | 'purple' | 'orange' | 'pending';
+export type ChromaticColor = 'blue' | 'purple' | 'red' | 'yellow' | 'gray' | 'green' | 'pink' | 'orange' | 'teal';
+export type Color = ChromaticColor | 'black' | 'white';
+export type SemanticColor = 'neutral' | 'info' | 'warning' | 'error' | 'success' | 'pending';
 import { SelectOption } from './components/forms/select/types';
 export type { SelectOption };
 import { TableProps, TableColumn, Direction, Alignment } from './components/table/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.0.10",
+  "version": "3.2.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -49,6 +49,7 @@
     "react-aria-components": "^1.2.1",
     "react-data-table-component": "^7.6.2",
     "react-day-picker": "9.1.3",
+    "react-docgen-typescript": "^2.4.0",
     "react-grid-system": "^8.2.0",
     "react-hook-form": "^7.52.1",
     "react-modal": "^3.16.1",

package/src/components/badge/Badge.stories.tsx

@@ -12,7 +12,6 @@ const meta: Meta = {
     size: {
       control: 'select',
       options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'The size of the badge',
       table: {
         category: 'Props',
         type: {
@@ -22,7 +21,6 @@ const meta: Meta = {
     },
     className: {
       control: 'text',
-      description: 'Additional classes for the badge component',
       table: {
         category: 'Props',
         type: {
@@ -32,7 +30,6 @@ const meta: Meta = {
     },
     children: {
       control: false,
-      description: 'The content of the badge (superseded by the string prop)',
       table: {
         category: 'Props',
         type: {
@@ -42,7 +39,6 @@ const meta: Meta = {
     },
     string: {
       control: 'text',
-      description: 'The string to display in the badge. (supersedes children prop)',
       table: {
         category: 'Props',
         type: {

package/src/components/badge/types.ts

@@ -1,8 +1,12 @@
 export type BadgeSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export interface BadgeProps {
+  /** Additional classes for the badge component */
   className?: string;
+  /** The content of the badge (superseded by the string prop) */
   children?: React.ReactNode;
+  /** The string to display in the badge. (supersedes children prop) */
   string?: string;
+  /** The size of the badge */
   size?: BadgeSizes;
 }

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

@@ -19,7 +19,7 @@ const meta: Meta = {
           summary: 'button | submit | reset',
         },
       },
-      description: 'Sets the HTML button type attribute',
+
       defaultValue: { summary: 'button' },
       control: 'select',
       options: ['button', 'submit', 'reset'],
@@ -30,7 +30,6 @@ const meta: Meta = {
         category: 'Core Props',
       },
       defaultValue: { summary: '' },
-      description: 'URL destination for the button when it needs to function as a link',
     },
     children: {
       control: 'text',
@@ -40,12 +39,10 @@ const meta: Meta = {
           summary: 'ReactNode',
         },
       },
-      description: 'The content of the button. Can be text, elements, or other React components',
     },
 
     // Accessibility
     ariaLabel: {
-      description: 'Sets the aria-label attribute for the button.',
       table: {
         category: 'Accessibility',
         type: {
@@ -61,7 +58,7 @@ const meta: Meta = {
         category: 'Icon Props',
         type: { summary: 'string' },
       },
-      description: 'Sets an icon on the left side of the button content',
+
       control: 'select',
       options: iconNames,
     },
@@ -70,7 +67,7 @@ const meta: Meta = {
         category: 'Icon Props',
         type: { summary: 'string' },
       },
-      description: 'Sets an icon on the right side of the button content',
+
       control: 'select',
       options: iconNames,
     },
@@ -79,7 +76,7 @@ const meta: Meta = {
     variant: {
       control: 'select',
       options: ['action', 'destructive', 'soft', 'link', 'outline', 'solid'],
-      description: 'Determines the visual style and emphasis level of the button',
+
       table: {
         category: 'Style Props',
         type: {
@@ -91,7 +88,7 @@ const meta: Meta = {
     size: {
       control: 'select',
       options: ['xs', 'sm', 'md', 'lg'],
-      description: "Controls the button's padding and text size",
+
       defaultValue: { summary: 'md' },
       table: {
         category: 'Style Props',
@@ -107,7 +104,6 @@ const meta: Meta = {
         category: 'Style Props',
       },
       defaultValue: { summary: false },
-      description: 'Makes the button round, pill-shaped when true',
     },
     className: {
       control: 'text',
@@ -115,7 +111,6 @@ const meta: Meta = {
         category: 'Style Props',
         defaultValue: { summary: '' },
       },
-      description: 'Allows the passing of classes',
     },
 
     // State Props
@@ -126,9 +121,6 @@ const meta: Meta = {
         category: 'State Props',
       },
       defaultValue: { summary: false },
-      description: `Disables the button and shows a load spinner on the left hand side of the button children by default.
-        If iconLeft is passed, the loading icon will be displayed on the left hand side of the iconLeft.
-        If iconRight is passed, the loading icon will be displayed on the right hand side of the iconRight.`,
     },
     isDisabled: {
       control: 'boolean',
@@ -137,27 +129,22 @@ const meta: Meta = {
         category: 'State Props',
       },
       defaultValue: { summary: false },
-      description: 'Disables the button',
     },
 
     // Event Handlers
     onClick: {
-      description: 'Triggers a callback on button click',
       table: { category: 'Event Handlers' },
       action: 'clicked',
     },
     onMouseEnter: {
-      description: 'Triggers a callback on mouse enter.',
       table: { category: 'Event Handlers' },
       action: 'mouse entered',
     },
     onMouseExit: {
-      description: 'Triggers a callback on mouse exit.',
       table: { category: 'Event Handlers' },
       action: 'mouse exited',
     },
     onKeyDown: {
-      description: 'Triggers a callback on key press.',
       table: { category: 'Event Handlers' },
       action: 'key pressed',
     },

package/src/components/button/types.ts

@@ -7,20 +7,70 @@ export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
 export type ButtonTypes = 'button' | 'submit' | 'reset';
 
 export interface ButtonProps {
+  /**
+   * The class name to apply to the button
+   */
   className?: string;
+  /**
+   * The aria-label to apply to the button
+   */
   ariaLabel: string;
+  /**
+   * The children to apply to the button
+   */
   children?: React.ReactNode | React.ReactNode[];
+  /**
+   * The function to call when the mouse enters the button
+   */
   onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * The function to call when the mouse exits the button
+   */
   onMouseExit?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
-  isLoading?: boolean;
+  /**
+   * The function to call when the button is clicked
+   */
   onClick?: (...args: any[]) => void;
+  /**
+   * The function to call when the button is pressed
+   */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+  /**
+   * Determines the visual style and emphasis level of the button
+   */
   variant?: ButtonVariants;
+  /**
+   * Disables the button and shows a load spinner on the left hand side of the button children by default.
+   * If iconLeft is passed, the loading icon will be displayed on the left hand side of the iconLeft.
+   * If iconRight is passed, the loading icon will be displayed on the right hand side of the iconRight.
+   */
+  isLoading?: boolean;
+  /**
+   * Makes the button round, pill-shaped when true
+   */
   isPill?: boolean;
+  /**
+   * The icon to display on the left hand side of the button
+   */
   iconLeft?: IconName;
+  /**
+   * The icon to display on the right hand side of the button
+   */
   iconRight?: IconName;
+  /**
+   * Controls the button's padding and text size
+   */
   size?: ButtonSizes;
+  /**
+   * The type of the button
+   */
   type?: ButtonTypes;
+  /**
+   * URL destination for the button when it needs to function as a link
+   */
   href?: string;
+  /**
+   * Disables the button
+   */
   isDisabled?: boolean;
 }

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

@@ -9,7 +9,6 @@ const meta: Meta = {
   argTypes: {
     title: {
       control: 'text',
-      description: 'The title of the card',
       table: {
         category: 'Props',
         type: {
@@ -20,7 +19,6 @@ const meta: Meta = {
     },
     subtitle: {
       control: 'text',
-      description: 'The subtitle of the card',
       table: {
         category: 'Props',
         type: {
@@ -31,7 +29,6 @@ const meta: Meta = {
     },
     hasBoxShadow: {
       control: 'boolean',
-      description: 'Adds a box shadow to the card',
       table: {
         category: 'Props',
         type: {
@@ -42,7 +39,6 @@ const meta: Meta = {
     },
     className: {
       control: 'text',
-      description: 'Additional classes for the card component',
       table: {
         category: 'Props',
         type: {
@@ -52,7 +48,6 @@ const meta: Meta = {
     },
     children: {
       control: false,
-      description: 'The content of the card',
       table: {
         category: 'Props',
         type: {

package/src/components/card/Card.tsx

@@ -2,10 +2,15 @@ import React from 'react';
 import classNames from 'classnames';
 
 type Props = {
+  /** Additional classes for the card component */
   className?: string;
+  /** The content of the card */
   children: React.ReactNode;
+  /** The title of the card */
   title?: string;
+  /** The subtitle of the card */
   subtitle?: string;
+  /** Adds a box shadow to the card */
   hasBoxShadow?: boolean;
 };
 

package/src/components/floatUI/FloatUI.stories.tsx

@@ -11,8 +11,6 @@ const meta: Meta<typeof FloatUI> = {
   argTypes: {
     children: {
       control: false,
-      description:
-        'An array of exactly two elements: the first element is the trigger that opens the FloatUI, and the second element is the content displayed within the FloatUI.',
       table: {
         category: 'Props',
         type: {
@@ -22,7 +20,6 @@ const meta: Meta<typeof FloatUI> = {
     },
     ariaLabel: {
       control: 'text',
-      description: 'Sets the aria-label attribute for the FloatUI.',
       table: {
         category: 'Props',
         type: {
@@ -32,8 +29,6 @@ const meta: Meta<typeof FloatUI> = {
     },
     floatingOptions: {
       control: false,
-      description:
-        'Options for configuring the floating UI behavior. For more, see the [floating-ui docs](https://floating-ui.com/docs/useFloating#options).',
       table: {
         category: 'Props',
         type: {
@@ -43,7 +38,6 @@ const meta: Meta<typeof FloatUI> = {
     },
     isOpen: {
       control: false,
-      description: 'Controls the visibility of the FloatUI (for controlled mode).',
       table: {
         category: 'Props',
         type: {
@@ -54,8 +48,6 @@ const meta: Meta<typeof FloatUI> = {
     isPortal: {
       control: false,
       defaultValue: false,
-      description:
-        'Controls whether the FloatUI content is rendered as a portal (i.e. rendered outside the app root and into the body)',
       table: {
         category: 'Props',
         type: {
@@ -65,8 +57,6 @@ const meta: Meta<typeof FloatUI> = {
     },
     portalOptions: {
       control: false,
-      description:
-        'Options for configuring the portal behavior. Includes the rootId, which is the id of the root element to render the portal into.',
       table: {
         category: 'Props',
         type: {
@@ -76,7 +66,6 @@ const meta: Meta<typeof FloatUI> = {
     },
     setIsOpen: {
       control: false,
-      description: 'Function to toggle the visibility of the FloatUI (for controlled mode).',
       table: {
         category: 'Props',
         type: {

package/src/components/floatUI/types.ts

@@ -2,14 +2,21 @@ import { ReactElement } from 'react';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 
 export type FloatUIProps = {
+  /** An array of exactly two elements: the first element is the trigger that opens the FloatUI, and the second element is the content displayed within the FloatUI. */
   children: [ReactElement, ReactElement];
+  /** Sets the aria-label attribute for the FloatUI. */
   ariaLabel: string;
+  /** Options for configuring the floating UI behavior. For more, see the [floating-ui docs](https://floating-ui.com/docs/useFloating#options). */
   floatingOptions?: UseFloatingOptions;
+  /** Controls the visibility of the FloatUI (for controlled mode). */
   isOpen?: boolean;
   className?: string;
+  /** Controls whether the FloatUI content is rendered as a portal (i.e. rendered outside the app root and into the body) */
   isPortal?: boolean;
+  /** Options for configuring the portal behavior. Includes the rootId, which is the id of the root element to render the portal into. */
   portalOptions?: {
     rootId?: string;
   };
+  /** Function to toggle the visibility of the FloatUI (for controlled mode). */
   setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 };

package/src/components/forms/checkbox/Checkbox.stories.tsx

@@ -13,7 +13,6 @@ const meta: Meta = {
     },
     onChange: {
       control: false,
-      description: 'onChange event handler',
       table: {
         category: 'Callbacks',
         type: {
@@ -24,7 +23,6 @@ const meta: Meta = {
     },
     label: {
       control: 'text',
-      description: 'The label for the checkbox field',
       table: {
         category: 'Props',
         type: {
@@ -35,7 +33,6 @@ const meta: Meta = {
     },
     name: {
       control: 'text',
-      description: 'The name for the checkbox field',
       table: {
         category: 'Props',
         type: {
@@ -46,7 +43,6 @@ const meta: Meta = {
     },
     value: {
       control: 'text',
-      description: 'This holds the value that will be emitted when the checkbox is selected',
       table: {
         category: 'Props',
         type: {
@@ -57,7 +53,6 @@ const meta: Meta = {
     },
     id: {
       control: 'text',
-      description: 'This explains what button group this checkbox belongs to.',
       table: {
         category: 'Props',
         type: {
@@ -68,7 +63,6 @@ const meta: Meta = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Toggles the disabled state of the checkbox field',
       table: {
         category: 'Props',
         type: {
@@ -79,7 +73,6 @@ const meta: Meta = {
     },
     isChecked: {
       control: false,
-      description: 'Toggles the checked state of the checkbox field when true',
       table: {
         category: 'Props',
         type: {

package/src/components/forms/checkbox/Checkbox.tsx

@@ -3,12 +3,19 @@ import classNames from 'classnames';
 
 export interface CheckboxProps {
   ref?: React.LegacyRef<HTMLInputElement>;
+  /** This explains what button group this checkbox belongs to. */
   id: string;
+  /** The label for the checkbox field */
   label: string;
+  /** The name for the checkbox field */
   name: string;
+  /** This holds the value that will be emitted when the checkbox is selected */
   value?: string;
+  /** Toggles the checked state of the checkbox field when true */
   isChecked?: boolean | undefined;
+  /** onChange event handler */
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Toggles the disabled state of the checkbox field */
   isDisabled?: boolean;
   defaultChecked?: boolean;
   className?: string;

package/src/components/forms/date/datePicker/DatePicker.stories.tsx

@@ -8,35 +8,30 @@ const meta: Meta = {
   argTypes: {
     timeValue: {
       control: 'text',
-      description: 'The time value to display in the date picker.',
       table: {
         category: 'Props',
       },
     },
     onTimeChange: {
       control: false,
-      description: 'Callback when the time changes.',
       table: {
         category: 'Callbacks',
       },
     },
     hasTimePicker: {
       control: 'boolean',
-      description: 'Whether to show the time picker.',
       table: {
         category: 'Props',
       },
     },
     min: {
       control: 'date',
-      description: 'The minimum date that can be selected.',
       table: {
         category: 'Props',
       },
     },
     max: {
       control: 'date',
-      description: 'The maximum date that can be selected.',
       table: {
         category: 'Props',
       },
@@ -44,8 +39,6 @@ const meta: Meta = {
     captionLayout: {
       control: 'select',
       options: ['dropdown', 'dropdown-months', 'dropdown-years', 'label'],
-      description:
-        'The layout of the caption. Enables you to add or remove the dropdown navigation for months/years',
       table: {
         category: 'Props',
         type: {
@@ -55,7 +48,6 @@ const meta: Meta = {
     },
     onSelect: {
       control: false,
-      description: 'Event handler when a day is selected.',
       table: {
         category: 'Callbacks',
         type: {
@@ -66,7 +58,6 @@ const meta: Meta = {
     },
     selected: {
       control: 'date',
-      description: 'The selected day(s).',
       table: {
         category: 'Props',
         type: {
@@ -76,7 +67,6 @@ const meta: Meta = {
     },
     className: {
       control: false,
-      description: 'Accepts a CSS class name',
       table: {
         category: 'Props',
         type: {
@@ -87,7 +77,6 @@ const meta: Meta = {
     mode: {
       control: 'select',
       options: ['single', 'range', 'multiple'],
-      description: 'Allows you to select a single day, a range of days, or multiple days.',
       table: {
         category: 'Props',
         type: {
@@ -98,7 +87,6 @@ const meta: Meta = {
     },
     id: {
       control: false,
-      description: 'id',
       table: {
         category: 'Props',
         type: {
@@ -108,7 +96,6 @@ const meta: Meta = {
     },
     month: {
       control: 'date',
-      description: 'The month displayed in the calendar.',
       table: {
         category: 'Props',
         type: {
@@ -118,7 +105,6 @@ const meta: Meta = {
     },
     defaultMonth: {
       control: 'date',
-      description: 'The initial month to show in the calendar. Default is the current month.',
       table: {
         category: 'Props',
         type: {
@@ -128,7 +114,6 @@ const meta: Meta = {
     },
     startMonth: {
       control: 'date',
-      description: 'The earliest month to start the navigation.',
       table: {
         category: 'Props',
         type: {
@@ -138,7 +123,6 @@ const meta: Meta = {
     },
     endMonth: {
       control: 'date',
-      description: 'The latest month to end the navigation.',
       table: {
         category: 'Props',
         type: {
@@ -148,8 +132,6 @@ const meta: Meta = {
     },
     components: {
       control: false,
-      description:
-        'Components you can pass to the DayPicker to override defaults [Full Components Documentation](https://daypicker.dev/guides/custom-components)',
       table: {
         category: 'Props',
         type: {
@@ -159,7 +141,6 @@ const meta: Meta = {
     },
     numberOfMonths: {
       control: 'number',
-      description: 'The number of displayed months. Default is 1.',
       table: {
         category: 'Props',
         type: {
@@ -169,7 +150,6 @@ const meta: Meta = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Disables selecton, more info [here](https://daypicker.dev/guides/disabled)',
       table: {
         category: 'Props',
         type: {
@@ -179,8 +159,6 @@ const meta: Meta = {
     },
     formatters: {
       control: false,
-      description:
-        'Use the formatters prop to customize the formatting of dates, week numbers, day names, and more. [Full Formatters Documentation](https://daypicker.dev/guides/formatters)',
       table: {
         category: 'Props',
         type: {
@@ -191,8 +169,6 @@ const meta: Meta = {
     weekStartsOn: {
       control: 'select',
       options: [0, 1, 2, 3, 4, 5, 6],
-      description:
-        "The index of the first day of the week (0 - Sunday). Overrides the locale's one.",
       table: {
         category: 'Props',
         type: {
@@ -202,8 +178,6 @@ const meta: Meta = {
     },
     firstWeekContainsDate: {
       control: 'date',
-      description:
-        "The firstWeekContainsDate prop sets the first day of the year's initial week, which is used to calculate week numbers. Acceptable values are 1 for Monday and 4 for Thursday.",
       table: {
         category: 'Props',
         type: {
@@ -213,8 +187,6 @@ const meta: Meta = {
     },
     today: {
       control: 'date',
-      description:
-        'The today’s date. Default is the current date. This date will get the today modifier to style the day.',
       table: {
         category: 'Props',
         type: {
@@ -224,7 +196,6 @@ const meta: Meta = {
     },
     isRequired: {
       control: 'boolean',
-      description: 'When true, the selection is required.',
       table: {
         category: 'Props',
         type: {
@@ -234,7 +205,6 @@ const meta: Meta = {
     },
     onMonthChange: {
       control: false,
-      description: 'Callback when the month changes.',
       table: {
         category: 'Callbacks',
         type: {
@@ -245,7 +215,6 @@ const meta: Meta = {
     onNextClick: {
       control: false,
 
-      description: 'Callback when the next month is clicked.',
       table: {
         category: 'Callbacks',
         type: {
@@ -255,7 +224,6 @@ const meta: Meta = {
     },
     onPrevClick: {
       control: false,
-      description: 'Callback when the previous month is clicked.',
       table: {
         category: 'Callbacks',
         type: {
@@ -265,7 +233,6 @@ const meta: Meta = {
     },
     onDayClick: {
       control: false,
-      description: 'Callback when a day is clicked.',
       table: {
         category: 'Callbacks',
         type: {