@indico-data/design-system 2.3.0 → 2.3.2

package/lib/src/components/button/Button.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Button } from './Button';
+import { Button } from '@/components';
 declare const meta: Meta;
 type Story = StoryObj<typeof Button>;
 export declare const Primary: Story;

package/lib/src/components/grid/col/Col.stories.d.ts

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Col } from '../col/Col';
-import '@/components/grid/Grid.scss';
+import { Col } from '@/components';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof Col>;

package/lib/src/components/grid/container/Container.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Container } from './Container';
+import { Container } from '@/components';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof Container>;

package/lib/src/components/grid/row/Row.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Row } from './Row';
+import { Row } from '@/components';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof Row>;

package/lib/src/components/icons/Icon.d.ts

@@ -1,4 +1,2 @@
-import React from 'react';
 import { IconProps } from './types';
-declare const Icon: React.FC<IconProps>;
-export default Icon;
+export declare const Icon: ({ name, size, className, ariaLabel, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element | null;

package/lib/src/components/icons/index.d.ts

@@ -1 +1 @@
-export { default as Icon } from './Icon';
+export { Icon } from './Icon';

package/lib/src/components/icons/types.d.ts

@@ -1,5 +1,5 @@
 import { MouseEventHandler } from 'react';
-import { IconName, PermafrostComponent } from '@/types';
+import { PermafrostComponent, IconName } from '../../types';
 export type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type IconProps = PermafrostComponent & {
     name: IconName;

package/lib/src/components/index.d.ts

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

package/lib/src/components/table/index.d.ts

@@ -0,0 +1 @@
+export { Table } from './Table';

package/lib/src/index.d.ts

@@ -6,3 +6,4 @@ export { numberUtils, stringUtils, colorUtils } from './legacy/utils';
 export { Container, Row, Col } from './components/grid';
 export { Button } from './components/button';
 export { Icon } from './components/icons';
+export { Table } from './components/table';

package/lib/src/legacy/components/Toggle/Toggle.d.ts

@@ -1,5 +1,4 @@
-import { PermafrostComponent, IconName } from '@/types';
-import { IconSizes } from '@/components/icons/types';
+import { PermafrostComponent, IconName, IconSizes } from '@/types';
 type Props = {
     disabled: boolean;
     onChange: any;

package/lib/src/legacy/components/Toggle/Toggle.stories.d.ts

@@ -6,7 +6,7 @@ declare const meta: {
         onChange: any;
         value: boolean;
         "aria-label"?: string;
-        iconSize?: import("../../../components/icons/types").IconSizes;
+        iconSize?: import("../../../types").IconSizes;
         checkedIconName?: import("../../../types").IconName;
         notCheckedIconName?: import("../../../types").IconName;
     } & import("../../../types").PermafrostComponent) => import("react/jsx-runtime").JSX.Element;

package/lib/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.d.ts

@@ -1,6 +1,5 @@
 import { DateRange } from 'react-day-picker';
-import { IconName, PermafrostComponent } from '@/types';
-import { IconSizes } from '@/components/icons/types';
+import { IconName, IconSizes, PermafrostComponent } from '@/types';
 type Props = PermafrostComponent & {
     ariaLabel?: string;
     disableBeforeDate?: Date;

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { PermafrostComponent } from '@/types';
-import { IconSizes } from '@/components/icons/types';
+import { PermafrostComponent, IconSizes } from '@/types';
 type Props = PermafrostComponent & {
     ariaLabel?: string;
     size?: IconSizes;

package/lib/src/types.d.ts

@@ -8,3 +8,5 @@ export type ButtonVariant = 'default' | 'primary' | 'destructive';
 export type ButtonSize = 'normal' | 'large';
 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.3.0",
+  "version": "2.3.2",
   "description": "",
   "author": "",
   "main": "lib/index.js",

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/icons/Icon.tsx

@@ -12,7 +12,7 @@ const kebabToCamel = (str?: string) => {
   return str.replace(/-./g, (match) => match.charAt(1).toUpperCase());
 };
 
-const Icon: React.FC<IconProps> = ({ name, size = 'md', className, ariaLabel, ...props }) => {
+export const Icon = ({ name, size = 'md', className, ariaLabel, ...props }: IconProps) => {
   const camelCaseName = kebabToCamel(name);
   const faIcon = solidIcons[camelCaseName as keyof typeof solidIcons] as IconDefinition | undefined;
   const customIcon = indicons[name as keyof typeof indicons];
@@ -41,5 +41,3 @@ const Icon: React.FC<IconProps> = ({ name, size = 'md', className, ariaLabel, ..
     })
   );
 };
-
-export default Icon;

package/src/components/icons/__tests__/Icon.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import Icon from '../Icon';
+import { Icon } from '@/components';
 
 describe('Icon Component', () => {
   describe('FontAwesome Icons', () => {

package/src/components/icons/index.ts

@@ -1 +1 @@
-export { default as Icon } from './Icon';
+export { Icon } from './Icon';

package/src/components/icons/types.ts

@@ -1,5 +1,5 @@
 import { MouseEventHandler } from 'react';
-import { IconName, PermafrostComponent } from '@/types';
+import { PermafrostComponent, IconName } from '../../types';
 
 export type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 

package/src/components/index.ts

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

package/src/components/table/index.ts

@@ -0,0 +1 @@
+export { Table } from './Table';

package/src/index.ts

@@ -60,3 +60,4 @@ export { numberUtils, stringUtils, colorUtils } from './legacy/utils';
 export { Container, Row, Col } from './components/grid';
 export { Button } from './components/button';
 export { Icon } from './components/icons';
+export { Table } from './components/table';

package/src/legacy/components/Accordion/Accordion.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 
 import { StyledAccordion } from './Accordion.styles';

package/src/legacy/components/ListTable/Header/Header.tsx

@@ -3,10 +3,8 @@
 import React from 'react';
 
 import { numberUtils } from '@/legacy/utils';
-
-import { BorderSelect } from '@/legacy/components/dropdowns';
-import { Button } from '@/legacy/components/buttons';
-import { Icon } from '@/components/icons';
+import { BorderSelect, Button } from '@/legacy/components';
+import { Icon } from '@/components';
 
 import { StyledHeader } from './Header.styles';
 

package/src/legacy/components/ListTable/ListTable.stories.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/legacy/components';
 
 import { ListTable } from './ListTable';
 import { mockUserHeaders, mockDocProcHeaders, mockAllUsers, mockDocProcReport } from './mock-data';
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 
 const meta = {
   component: ListTable,

package/src/legacy/components/Toggle/Toggle.tsx

@@ -3,10 +3,9 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { Icon } from '@/components/icons';
-import { PermafrostComponent, IconName } from '@/types';
+import { Icon } from '@/components';
+import { PermafrostComponent, IconName, IconSizes } from '@/types';
 import { StyledToggle } from './Toggle.styles';
-import { IconSizes } from '@/components/icons/types';
 
 type Props = {
   disabled: boolean;

package/src/legacy/components/Tooltip/Tooltip.tsx

@@ -2,7 +2,8 @@
 
 import React from 'react';
 
-import { Icon, COLORS } from '@/index';
+import { COLORS } from '@/index';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 

package/src/legacy/components/basic-section/SectionTable/SectionTable.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 
 import { IconName } from '@/types';
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { BorderSelect } from '@/legacy/components/dropdowns';
 
 import { StyledSectionTable } from './SectionTable.styles';

package/src/legacy/components/buttons/IconButton/IconButton.tsx

@@ -8,7 +8,7 @@ import { AriaButtonProps } from '@react-types/button';
 
 import { SPACING } from '@/legacy/tokens';
 import { IconName, PermafrostComponent } from '@/types';
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { CircleSpinner } from '@/legacy/components';
 import { ButtonSize, IconButtonVariant } from '../types';
 

package/src/legacy/components/dropdowns/BorderSelect/BorderSelect.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { v4 as uuid } from 'uuid';
 import classNames from 'classnames';
 
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 
 import { StyledSelect, StyledValidationError } from './BorderSelect.styles';

package/src/legacy/components/dropdowns/MultiCombobox/MultiCombobox.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { components } from 'react-select';
 
 import { PermafrostComponent } from '@/types';
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { addCustomProps } from '../utils';
 import type { ComboboxProps, ComboboxOption } from '../types';
 

package/src/legacy/components/dropdowns/Select/Select.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { v4 as uuid } from 'uuid';
 
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 
 import { StyledSelect } from './Select.styles';

package/src/legacy/components/dropdowns/SingleCombobox/SingleCombobox.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { components } from 'react-select';
 
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 import { addCustomProps } from '../utils';
 

package/src/legacy/components/inputs/EditableInput/EditableInput.tsx

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 
 import { stringUtils } from '@/legacy/utils';
 
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 
 import { StyledEditableInput } from './EditableInput.styles';

package/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.tsx

@@ -11,11 +11,10 @@ import {
   DateRange,
 } from 'react-day-picker';
 import { usePopper } from 'react-popper';
-import { IconName, PermafrostComponent } from '@/types';
-import { Icon } from '@/components/icons';
+import { IconName, IconSizes, PermafrostComponent } from '@/types';
+import { Icon } from '@/components';
 
 import { StyledNoInputDatePicker } from './NoInputDatePicker.styles';
-import { IconSizes } from '@/components/icons/types';
 
 type Props = PermafrostComponent & {
   ariaLabel?: string;

package/src/legacy/components/inputs/NumberInput/NumberInput.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { v4 as uuid } from 'uuid';
 
 import { Button } from '@/legacy/components/buttons';
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 
 import { StyledNumberField } from './NumberInput.styles';

package/src/legacy/components/inputs/SearchInput/SearchInput.stories.tsx

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof SearchInput>;
 export const Base: Story = {};
 
 export const Border: Story = {
-  args: { border: true },
+  args: { inputBorder: true },
 };
 
 export const SearchIcon: Story = {
@@ -25,7 +25,7 @@ export const SearchIcon: Story = {
 };
 
 export const BorderAndSearchIcon: Story = {
-  args: { border: true, showSearchIcon: true },
+  args: { inputBorder: true, showSearchIcon: true },
 };
 
 export const ClearInputIcon: Story = {
@@ -33,5 +33,5 @@ export const ClearInputIcon: Story = {
 };
 
 export const ClearInputIconWithBorder: Story = {
-  args: { showClearInputIcon: true, border: true },
+  args: { showClearInputIcon: true, inputBorder: true },
 };

package/src/legacy/components/inputs/SearchInput/SearchInput.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { v4 as uuid } from 'uuid';
 import classNames from 'classnames';
 
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 
 import { StyledSearchField } from './SearchInput.styles';

package/src/legacy/components/loading-indicators/CircleSpinner/CircleSpinner.tsx

@@ -2,9 +2,8 @@
 
 import React from 'react';
 
-import { Icon } from '@/components/icons';
-import { PermafrostComponent } from '@/types';
-import { IconSizes } from '@/components/icons/types';
+import { Icon } from '@/components';
+import { PermafrostComponent, IconSizes } from '@/types';
 
 type Props = PermafrostComponent & {
   ariaLabel?: string;

package/src/legacy/components/user-feedback/Shrug/Shrug.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { Button } from '@/legacy/components/buttons';
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 
 import { StyledShrug } from './Shrug.styles';

package/src/styles/index.scss

@@ -4,7 +4,8 @@
 // Components
 @import '../components/button/styles/Button.scss';
 @import '../components/icons/styles/Icon.scss';
-@import '../components/tables/table/Table.scss';
+@import '../components/grid/styles/Grid.scss';
+@import '../components/table/styles/Table.scss';
 
 @import 'typography';
 @import 'colors';

package/src/types.ts

@@ -10,3 +10,6 @@ export type ButtonSize = 'normal' | 'large';
 
 import { IconName } from '../build/generated/iconTypes';
 export type { IconName };
+
+import { IconSizes } from './components/icons/types';
+export type { IconSizes };

package/webpack.config.js

@@ -34,16 +34,23 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        use: ['style-loader', {
-          loader: 'css-loader',
-          options: {
-            modules: false,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: false,
+            },
           },
-        }, 'sass-loader'],
+          'sass-loader',
+        ],
       },
     ],
   },
   resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
     extensions: ['.mjs', '.js', '.cjs', '.jsx', '.tsx', '.ts', '.mdx'],
     modules: ['node_modules'],
   },
@@ -54,4 +61,4 @@ module.exports = {
     'react-select': 'react-select',
     'styled-components': 'styled-components',
   },
-};
+};

package/lib/src/components/tables/table/index.d.ts

@@ -1 +0,0 @@
-export { Table } from './table';

package/src/components/tables/table/index.ts

@@ -1 +0,0 @@
-export { Table } from './table';