@indico-data/design-system 2.2.0 → 2.3.1

package/lib/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

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const StyledShrug: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+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/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/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/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/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/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/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/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/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/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

@@ -6,7 +6,7 @@ export type PermafrostComponent = {
 };
 export type ButtonVariant = 'default' | 'primary' | 'destructive';
 export type ButtonSize = 'normal' | 'large';
-import { ListItem } from './legacy/components/Navigation/Drawer/types';
-export type { ListItem };
 import { IconName } from '../build/generated/iconTypes';
 export type { IconName };
+import { IconSizes } from '@/components/icons/types';
+export type { IconSizes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -39,12 +39,14 @@
     "@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.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",
@@ -93,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,7 +45,7 @@ export default [
     ],
   },
   {
-    input: 'src/types.ts',
+    input: 'src/index.ts',
     output: [{ file: 'lib/index.d.ts', format: 'es' }],
     plugins: [dts()],
     external: [/\.css$/, /\.scss$/],

package/src/components/button/Button.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
-import { Col, Row } from '../grid/';
+import { Col, Row } from '@/components';
 
 <Meta title="Components/Button" name="Button Docs" of={ButtonStories} />
 

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

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Button } from './Button';
+import { Button } from '@/components';
 const exampleIcons = ['fa-check', 'fa-times']; // TODO -- get ALL icons
 
 const meta: Meta = {
@@ -18,7 +18,7 @@ const meta: Meta = {
       table: {
         category: 'Styling',
         type: {
-          summary: ['solid', 'outline', 'text'],
+          summary: 'solid | outline | text',
         },
         defaultValue: { summary: 'solid' },
       },
@@ -30,7 +30,7 @@ const meta: Meta = {
       table: {
         category: 'Styling',
         type: {
-          summary: ['primary', 'secondary', 'warning', 'error', 'success', 'info'],
+          summary: 'primary | secondary | warning | error | success | info',
         },
         defaultValue: { summary: 'primary' }, // replace 'default' with your actual default color
       },
@@ -43,7 +43,7 @@ const meta: Meta = {
       table: {
         category: 'Styling',
         type: {
-          summary: ['sm', 'md', 'lg'],
+          summary: 'sm | md | lg',
         },
       },
     },
@@ -51,7 +51,7 @@ const meta: Meta = {
       table: {
         category: 'accessibility',
         type: {
-          summary: ['button', 'submit', 'reset'],
+          summary: 'button | submit | reset',
         },
       },
       description: 'It sets the type for the button.',
@@ -66,7 +66,7 @@ const meta: Meta = {
         category: 'Styling',
         defaultValue: { summary: 'left' },
         type: {
-          summary: ['left', 'right'],
+          summary: 'left | right',
         },
       },
       control: 'select',
@@ -117,7 +117,7 @@ const meta: Meta = {
     isLoading: {
       control: 'boolean',
       table: {
-        type: { summary: 'true | false', name: 'boolean', required: false },
+        type: { summary: 'true | false' },
         category: 'Styling',
       },
       defaultValue: { summary: false },
@@ -127,7 +127,7 @@ const meta: Meta = {
     isDisabled: {
       control: 'boolean',
       table: {
-        type: { summary: 'true | false', name: 'boolean', required: false },
+        type: { summary: 'true | false' },
         category: 'Styling',
       },
       defaultValue: { summary: false },

package/src/components/button/Button.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 
 import { ButtonProps } from './types';
 

package/src/components/grid/GridSystem.mdx

@@ -1,6 +1,5 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks';
 import * as ContainerStories from './container/Container.stories';
-import '@/components/grid/Grid.scss';
 
 <Meta title="Layout/Grid" name="Grid System" />
 

package/src/components/grid/col/Col.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Col } from '../col/Col';
 import { Container, Row } from 'react-grid-system';
-import '@/components/grid/Grid.scss';
+import { Col } from '@/components';
 
 const meta: Meta = {
   title: 'remove/grid/col',

package/src/components/grid/container/Container.mdx

@@ -1,6 +1,5 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks';
 import * as ContainerStories from './Container.stories';
-import '@/components/grid/Grid.scss';
 
 <Meta title="Layout/Grid" name="Container" />
 

package/src/components/grid/container/Container.stories.tsx

@@ -1,7 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Container } from './Container';
-import { Row } from '../row/Row';
-import { Col } from '../col/Col';
+import { Container, Row, Col } from '@/components';
 
 const meta: Meta = {
   title: 'remove/grid/container',

package/src/components/grid/row/Row.mdx

@@ -1,6 +1,5 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks';
 import * as RowStories from './Row.stories';
-import '@/components/grid/Grid.scss';
 
 <Meta title="Layout/Grid" name="Row" />
 

package/src/components/grid/row/Row.stories.tsx

@@ -1,7 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Row } from './Row';
-import { Col } from '../col/Col';
-import { Container } from 'react-grid-system';
+import { Row, Col, Container } from '@/components';
 
 const meta: Meta = {
   title: 'remove/grid/row',

package/src/components/icons/Icon.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas, Controls, Story } from '@storybook/blocks';
 import * as IconStories from './Icon.stories';
-import { Col, Row } from '../grid/';
+import { Col, Row } from '@/components';
 
 <Meta title="Components/Icon" name="Icon" of={IconStories} />
 

package/src/components/icons/Icon.stories.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import Icon from './Icon';
+
+import { Icon, Row, Col, Button } from '@/components';
 import { IconProps, IconSizes } from './types';
 
-import { Row, Col } from '../grid/';
-import { Button } from '../button';
 import { iconNames } from 'build/generated/iconTypes';
 
 const meta: Meta = {

package/src/components/index.ts

@@ -1,3 +1,4 @@
 export { Container, Col, Row } from './grid';
 export { Button } from './button';
 export { Icon } from './icons';
+export { Table } from './table';

package/src/components/table/LoadingComponent.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const LoadingComponent = () => {
+  return <div className="table-loading">Loading...</div>;
+};

package/src/components/table/Table.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as TableStories from './Table.stories';
+
+<Meta title="Layout/Table" name="Table" />
+
+# Table
+
+This component facilitates the rapid creation of responsive and paginated tables. This component was created using the React [Data Table Component](https://react-data-table-component.netlify.app/?path=/docs/api-props--docs) library as a base. You can read more on additional props not listed in this documentation at [this link](https://react-data-table-component.netlify.app/?path=/docs/api-props--docs).
+
+<Canvas
+  of={TableStories.Default}
+/>
+
+
+<Controls of={TableStories.Default} />