@indico-data/design-system 2.1.3 → 2.3.0

package/lib/{legacy → src/legacy}/components/inputs/NumberInput/NumberInput.stories.d.ts

@@ -6,12 +6,12 @@ declare const meta: {
     argTypes: {
         className: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
         value: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
     };

package/lib/src/legacy/components/inputs/NumberInput/NumberInput.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledNumberField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/src/legacy/components/inputs/RadioButtons/RadioButtons.styles.d.ts

@@ -0,0 +1,13 @@
+import { AbstractRadioGroup } from '../RadioGroup';
+export declare const StyledRadioGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../../../../types").PermafrostComponent & {
+    value?: string;
+    onChange?: (value: string) => void;
+    children: import("react").ReactNode;
+    className?: string;
+} & import("@react-types/radio").AriaRadioGroupProps, {
+    hideFocusRing: boolean;
+    color: string;
+    labelColor: string;
+    hoverAndSelectedColor: string;
+    focusRingColor: string;
+}>> & string & Omit<typeof AbstractRadioGroup, keyof import("react").Component<any, {}, any>>;

package/lib/src/legacy/components/inputs/RadioGroup/RadioGroup.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledRadioGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/{legacy → src/legacy}/components/inputs/SearchInput/SearchInput.stories.d.ts

@@ -1,20 +1,19 @@
-/// <reference types="react" />
 import { StoryObj } from '@storybook/react';
 import { SearchInput } from './SearchInput';
 declare const meta: {
     component: {
         (props: import("../../../../types").PermafrostComponent & {
-            inputBorder?: boolean | undefined;
-            showClearInputIcon?: boolean | undefined;
-            showSearchIcon?: boolean | undefined;
+            inputBorder?: boolean;
+            showClearInputIcon?: boolean;
+            showSearchIcon?: boolean;
             inputProps?: {
                 [key: string]: string;
-            } | undefined;
-            onChange?: ((e: import("react").ChangeEvent<HTMLInputElement>) => void) | undefined;
+            };
+            onChange?: (e: import("react").ChangeEvent<HTMLInputElement>) => void;
             onClear?(): void;
-            onKeyUp?: ((e: import("react").KeyboardEvent<HTMLInputElement>) => void) | undefined;
-            placeholder?: string | undefined;
-            value?: string | undefined;
+            onKeyUp?: (e: import("react").KeyboardEvent<HTMLInputElement>) => void;
+            placeholder?: string;
+            value?: string;
         }): import("react/jsx-runtime").JSX.Element;
         defaultProps: {
             className: string;

package/lib/src/legacy/components/inputs/SearchInput/SearchInput.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledSearchField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/{legacy → src/legacy}/components/inputs/TextInput/TextInput.stories.d.ts

@@ -6,47 +6,47 @@ declare const meta: {
     argTypes: {
         autoComplete: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
         className: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
         defaultValue: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
         inputProps: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
         name: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
         promptProps: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
         type: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
         validationErrors: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
         value: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
     };

package/lib/src/legacy/components/inputs/TextInput/TextInput.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledTextInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledInputInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/src/legacy/components/loading-indicators/BarSpinner/BarSpinner.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledBarSpinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/src/legacy/components/loading-indicators/CirclePulse/CirclePulse.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledLoadingIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    overallsize: string;
+    ripplesize: string;
+}>> & string;
+export declare const StyledMessageLoadingIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    overallsize: string;
+}>> & string;

package/lib/{legacy → src/legacy}/components/loading-indicators/CircleSpinner/CircleSpinner.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
 import { PermafrostComponent } from '@/types';
+import { IconSizes } from '@/components/icons/types';
 type Props = PermafrostComponent & {
     ariaLabel?: string;
-    size?: string;
-    style?: {
-        [key: string]: string;
-    };
+    size?: IconSizes;
+    style?: React.CSSProperties;
     fill?: string;
 };
 export declare function CircleSpinner(props: Props): React.ReactElement;

package/lib/src/legacy/components/loading-indicators/LoadingIndicator/LoadingIndicator.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledLoadingIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    overallsize: string;
+    ripplesize: string;
+}>> & string;
+export declare const StyledMessageLoadingIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    overallsize: string;
+}>> & string;

package/lib/src/legacy/components/loading-indicators/LoadingList/LoadingList.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledLoadingList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/src/legacy/components/loading-indicators/PercentageRing/PercentageRing.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledPercentageRing: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/{legacy → src/legacy}/components/modals/ConfirmModal/ConfirmModal.stories.d.ts

@@ -12,27 +12,27 @@ declare const meta: {
     argTypes: {
         open: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
         className: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
         describedBy: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
         modalNode: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
         width: {
             control: {
-                disable: boolean;
+                disable: true;
             };
         };
     };

package/lib/src/legacy/components/modals/ConfirmModal/ConfirmModal.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledConfirmModal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/src/legacy/components/modals/ModalBase/ModalBase.styles.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare function ModalAdapter(props: any): React.ReactElement;
+export declare const StyledModalBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<any, never>> & string & Omit<typeof ModalAdapter, keyof React.Component<any, {}, any>>;
+export {};

package/lib/src/legacy/components/text-truncate/TextTruncate.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledTextTruncate: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/lib/{legacy → src/legacy}/components/user-feedback/Shrug/Shrug.stories.d.ts

@@ -8,19 +8,19 @@ declare const meta: {
     args: {
         message: string;
     };
-    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react/dist/types-bf5e6555").R, {
-        id?: string | undefined;
-        className?: string | undefined;
-        'data-cy'?: string | undefined;
-        'data-testid'?: string | undefined;
-        actionLink?: string | undefined;
-        actionText?: string | undefined;
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        id?: string;
+        className?: string;
+        'data-cy'?: string;
+        'data-testid'?: string;
+        actionLink?: string;
+        actionText?: string;
         buttonAction?: (() => void) | undefined;
-        buttonText?: string | undefined;
-        message?: React.ReactNode;
+        buttonText?: string;
+        message?: string | React.ReactNode;
         messageProps?: {
-            'data-cy': string;
-        } | undefined;
+            "data-cy": string;
+        };
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/lib/src/legacy/components/user-feedback/Shrug/Shrug.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledShrug: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/{legacy → src/legacy}/styles/globals/buttons.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Buttons: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/{legacy → src/legacy}/styles/globals/forms.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Forms: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/{legacy → src/legacy}/styles/globals/layout.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Layout: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/{legacy → src/legacy}/styles/globals/lists.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Lists: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/{legacy → src/legacy}/styles/globals/margin-padding.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const MarginPadding: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/{legacy → src/legacy}/styles/globals/media.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Media: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/{legacy → src/legacy}/styles/globals/tables.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Tables: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/{legacy → src/legacy}/styles/globals/typography.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Typography: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/{legacy → src/legacy}/styles/globals/utility-classes.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const UtilityClasses: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;

package/lib/src/types.d.ts

@@ -0,0 +1,10 @@
+export type PermafrostComponent = {
+    id?: string;
+    className?: string;
+    'data-cy'?: string;
+    'data-testid'?: string;
+};
+export type ButtonVariant = 'default' | 'primary' | 'destructive';
+export type ButtonSize = 'normal' | 'large';
+import { IconName } from '../build/generated/iconTypes';
+export type { IconName };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.1.3",
+  "version": "2.3.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -12,15 +12,17 @@
     "url": "https://github.com/IndicoDataSolutions/permafrost.git"
   },
   "scripts": {
-    "dev": "storybook dev -p 6006",
+    "dev": "npm run generate-icons && storybook dev -p 6006",
     "lint": "yarn eslint src --ext ts,js,tsx,jsx",
-    "build": "rollup -c",
+    "build": "npm run generate-icons && rollup -c",
     "build storybook": "storybook build",
     "test-storybook": "test-storybook",
     "test": "DEBUG_PRINT_LIMIT=10000 jest",
     "test:watch": "DEBUG_PRINT_LIMIT=10000 jest --watch",
     "all-releases": "npm view @indico-data/design-system versions",
-    "latest-release": "npm dist-tags ls @indico-data/design-system"
+    "latest-release": "npm dist-tags ls @indico-data/design-system",
+    "generate-icons": "node scripts/generateIconTypes.js",
+    "postinstall": "yarn generate-icons"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
@@ -29,27 +31,30 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@indico-data/utils": "^0.0.5",
     "@popperjs/core": "^2.11.8",
-    "@react-aria/radio": "^3.10.2",
-    "@react-aria/visually-hidden": "^3.8.10",
-    "@react-types/button": "^3.9.2",
-    "@react-types/checkbox": "^3.7.1",
-    "@react-types/radio": "^3.7.1",
+    "@react-aria/radio": "^3.10.3",
+    "@react-aria/visually-hidden": "^3.8.12",
+    "@react-types/button": "^3.9.3",
+    "@react-types/checkbox": "^3.8.1",
+    "@react-types/radio": "^3.8.0",
+    "@testing-library/react": "^16.0.0",
     "classnames": "^2.5.1",
     "date-fns": "^3.6.0",
     "focus-trap-react": "^10.2.3",
     "html-webpack-plugin": "^5.6.0",
     "prop-types": "^15.8.1",
-    "react-aria-components": "^1.1.1",
+    "react-aria-components": "^1.2.1",
+    "react-data-table-component": "^7.6.2",
     "react-day-picker": "^8.10.1",
     "react-grid-system": "^8.2.0",
     "react-modal": "^3.16.1",
     "react-popper": "^2.3.0",
-    "react-stately": "^3.30.1",
-    "react-tooltip": "5.26.3",
-    "svgo": "^3.2.0",
-    "ts-jest": "^29.1.2",
+    "react-stately": "^3.31.0",
+    "react-tooltip": "5.26.4",
+    "svgo": "^3.2.2",
+    "ts-jest": "^29.1.3",
     "tslib": "^2.6.2",
     "uuid": "^9.0.1",
     "webpack": "^5.91.0",
@@ -90,7 +95,7 @@
     "@storybook/theming": "^8.0.8",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/css-modules": "^1.0.5",
     "@types/jest": "^29.5.12",

package/rollup.config.mjs

@@ -45,9 +45,9 @@ export default [
     ],
   },
   {
-    input: 'lib/index.d.ts',
+    input: 'src/types.ts',
     output: [{ file: 'lib/index.d.ts', format: 'es' }],
     plugins: [dts()],
     external: [/\.css$/, /\.scss$/],
   },
-];
+];

package/scripts/generateIconTypes.js

@@ -0,0 +1,50 @@
+const fs = require('fs');
+const path = require('path');
+const { fas } = require('@fortawesome/free-solid-svg-icons');
+
+// Read custom icons from indicons.tsx
+const indiconsPath = path.resolve(__dirname, '../src/components/icons/indicons.tsx');
+const indiconsFileContent = fs.readFileSync(indiconsPath, 'utf-8');
+
+// Extract keys (icon names) from the indicons file, including both quoted and non-quoted keys
+const customIconMatches = [...indiconsFileContent.matchAll(/['"]?(\w+(-\w+)*)['"]?:\s*\(/g)];
+const customIcons = customIconMatches.map((match) => match[1]);
+
+// Convert camelCase to kebab-case, this is a kinda gross but more readable than alternatives (unless we add a new package)
+const camelToKebab = (str) => {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+    .replace(/(\d)([A-Za-z])/g, '$1-$2')
+    .replace(/([a-zA-Z])([0-9])/g, '$1-$2')
+    .replace(/([A-Z]+)([A-Z][a-z])/g, (_, p1, p2) => `${p1.toLowerCase()}-${p2}`)
+    .replace(/([a-zA-Z])([A-Z]+)/g, (_, p1, p2) => `${p1}-${p2.toLowerCase()}`)
+    .toLowerCase();
+};
+
+const outputDir = path.resolve(__dirname, '../build/generated');
+const outputPath = path.join(outputDir, 'iconTypes.ts');
+
+// Ensure the directory exists
+if (!fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir, { recursive: true });
+}
+
+// Convert FontAwesome icon names to kebab-case and create a mapping
+const fontAwesomeIconNames = Object.keys(fas).map(camelToKebab);
+
+const iconNames = fontAwesomeIconNames
+  .concat(customIcons)
+  .sort()
+  .map((name) => `'${name}'`);
+
+const content = `
+export const iconNames = [
+  ${iconNames.join(', ')}
+] as const;
+
+export type IconName = typeof iconNames[number];
+`;
+
+fs.writeFileSync(outputPath, content.trim());
+console.log('Icon types and names generated');

package/src/components/button/Button.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
-import { Icon } from '../../legacy/components/Icon/Icon';
+import { Icon } from '@/components/icons';
 
 import { ButtonProps } from './types';
 
@@ -57,7 +57,6 @@ export const Button = (props: ButtonProps) => {
       onKeyDown={onKeyDown}
       {...rest}
     >
-      {/* TODO -- Redo Icon component */}
       {isLoading && (
         <Icon
           name="fa-circle-notch"

package/src/components/button/types.ts

@@ -1,4 +1,5 @@
-import { IconName } from '../../types';
+import { IconName } from '@/types';
+
 export type ButtonVariants = 'solid' | 'outline' | 'text';
 
 export type ButtonColors = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';

package/src/components/icons/Icon.mdx

@@ -0,0 +1,49 @@
+import { Meta, Canvas, Controls, Story } from '@storybook/blocks';
+import * as IconStories from './Icon.stories';
+import { Col, Row } from '../grid/';
+
+<Meta title="Components/Icon" name="Icon" of={IconStories} />
+
+# Icon
+
+The `Icon` component provides unified rendering of both custom SVG icons (Indicons) and FontAwesome icons.
+
+<Canvas
+  of={IconStories.DefaultIcon}
+  source={{
+    code: `<Icon name="indico-o" />`,
+  }}
+/>
+
+## Props
+
+<Controls of={IconStories.DefaultIcon} />
+
+## Sizes
+
+The `Icon` component supports five predefined sizes:
+
+<Story of={IconStories.IconStates} />
+
+## Custom Styling
+
+You can use the `className` prop to apply custom styles to the icons.
+
+<Story of={IconStories.CustomStyledIcon} />
+```tsx // .tsx
+<Icon name="fa-mountain-sun" className="color-primary-600" />
+```
+
+## Indicons (Custom Icons)
+
+Indicons are custom SVG icons created specifically for our design system. Below is a list of all available custom icons.
+
+<Story of={IconStories.Indicons} />
+## Font Awesome Icons
+
+Font Awesome provides a wide range of icons for various purposes. Below is a list
+of FontAwesome icons available in our design system. Use the search bar to find specific icons, and navigate
+through the pages to explore all icons.
+
+<Story of={IconStories.FontAwesomeIcons} />
+```