@indico-data/design-system 1.0.58 → 2.0.1

package/.eslintrc.js

@@ -29,7 +29,7 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  plugins: ['@typescript-eslint', 'react', 'react-hooks'],
+  plugins: ['@typescript-eslint', 'react', 'react-hooks', 'react/jsx-runtime'],
   rules: {
     'no-debugger': 'error',
     'no-console': ['error', { allow: ['warn', 'error', 'info'] }],

package/.harness/input_github.yaml

@@ -0,0 +1,13 @@
+inputSet:
+  name: github push
+  identifier: github_push
+  orgIdentifier: default
+  projectIdentifier: Insights
+  pipeline:
+    identifier: design_system
+    template:
+      templateInputs:
+        properties:
+          ci:
+            codebase:
+              build: <+input>

package/.harness/pipeline.yaml

@@ -0,0 +1,14 @@
+pipeline:
+  name: design system
+  identifier: design_system
+  tags: {}
+  template:
+    templateRef: Design_System
+    versionLabel: 1.0.0
+    templateInputs:
+      properties:
+        ci:
+          codebase:
+            build: <+input>
+  projectIdentifier: Insights
+  orgIdentifier: default

package/.storybook/main.ts

@@ -1,6 +1,7 @@
+import { dirname, join } from 'path';
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -9,10 +10,11 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
-    '@storybook/addon-themes',
     '@storybook/addon-a11y',
-    '@storybook/addon-styling',
     '@storybook/addon-docs',
+    '@storybook/addon-webpack5-compiler-babel',
+    '@storybook/preset-scss',
+    '@storybook/addon-themes',
   ],
   webpackFinal: async (config) => {
     if (config.resolve) {
@@ -23,6 +25,7 @@ const config: StorybookConfig = {
         }),
       ];
     }
+
     return config;
   },
   framework: {

package/.storybook/manager-head.html

@@ -0,0 +1,5 @@
+<style>
+  button[data-item-id^="remove-"], div[data-item-id="remove"] {
+    display: none;
+  }
+</style>

package/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import { themes } from '@storybook/theming';
+
+addons.setConfig({
+  theme: themes.light,
+});

package/.storybook/preview.ts

@@ -1,17 +1,39 @@
-import type { Preview } from '@storybook/react';
+import type { Preview, ReactRenderer } from '@storybook/react';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
+// import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+// import { GlobalStyles } from '../src/legacy/styles/globals'; // TODO -- replace
+import '@/styles/index.scss';
 
-import { withThemeFromJSXProvider } from '@storybook/addon-themes';
-import { GlobalStyles } from '../src/styles/globals';
+// export const decorators = [
+// withThemeFromJSXProvider({
+//   GlobalStyles, // Adds your GlobalStyle component to all stories
+// }),
+// ];
 
-export const decorators = [
-  withThemeFromJSXProvider({
-    GlobalStyles, // Adds your GlobalStyle component to all stories
-  }),
-];
+import React from 'react';
 
 const preview: Preview = {
+  decorators: [
+    (Story: React.ComponentType) =>
+      React.createElement(
+        'div',
+        { style: { padding: '1em' } },
+        // 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it
+        React.createElement(Story),
+      ),
+    withThemeByDataAttribute({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+      attributeName: 'data-theme',
+      parentSelector: 'body',
+    }),
+  ],
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
+    backgrounds: { disable: true },
+    layout: 'fullscreen',
     controls: {
       matchers: {
         color: /(background|color)$/i,

package/.yarnrc.yml

@@ -1 +1,3 @@
+compressionLevel: 0
+enableGlobalCache: true
 yarnPath: .yarn/releases/yarn-4.0.2.cjs

package/README.md

@@ -1,11 +1,5 @@
 # Indico Design System - codename Permafrost
 
-## Module Organization
-
-- Components and Stories are now in `src/stories`
-- Global Styles `src/styles`
-- Design Tokens `src/tokens`
-
 ## Storybook Dev Server Initialization
 
 Install dependencies with a simple `yarn` command.
@@ -27,9 +21,12 @@ Run the below like `yarn <my command>`
 "prepare": "husky install"
 ```
 
-## Concerning TODOS
+## Themeing addon documentation
+
+### Addon - Themes
+
+https://github.com/storybookjs/storybook/tree/next/code/addons/themes
+
+### CSS Data ATTR
 
-Ideally, each component migrated from the Intake mono-repo (aka stratosphere) will have a corresponding JIRA ticket,
-including ACs for potential refactor, updated documentation, and unit tests. However, the first migration of
-core componenets has been fast-tracked to facilitate work on the Insights client MVP; therefore, these
-components have not benefitted from the above and have `TODOS` indicating this. Corresponding JIRA tickets will follow.
+https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#writing-a-custom-decorator

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

@@ -0,0 +1,2 @@
+import { ButtonProps } from './types';
+export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+declare const meta: Meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const Secondary: Story;
+export declare const PrimaryOutline: Story;
+export declare const SecondaryOutline: Story;
+export declare const Info: Story;
+export declare const InfoOutline: Story;
+export declare const Text: Story;
+export declare const IconLeft: Story;
+export declare const IconRight: Story;
+export declare const Error: Story;
+export declare const Success: Story;
+export declare const Warning: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;
+export default meta;

package/lib/components/button/enums.d.ts

@@ -0,0 +1,5 @@
+export type ButtonVariants = 'solid' | 'outline' | 'text';
+export type ButtonColors = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
+export type ButtonIconPositions = 'left' | 'right';
+export type ButtonSizes = 'sm' | 'md' | 'lg';
+export type ButtonTypes = 'button' | 'submit' | 'reset';

package/lib/components/button/types.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { IconName } from '../../types';
+export type ButtonVariants = 'solid' | 'outline' | 'text';
+export type ButtonColors = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
+export type ButtonIconPositions = 'left' | 'right';
+export type ButtonSizes = 'sm' | 'md' | 'lg';
+export type ButtonTypes = 'button' | 'submit' | 'reset';
+export interface ButtonProps {
+    className?: string;
+    ariaLabel: string;
+    children?: React.ReactNode | React.ReactNode[];
+    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseExit?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    isLoading?: boolean;
+    onClick?: (...args: any[]) => void;
+    variant?: ButtonVariants;
+    iconPosition?: ButtonIconPositions;
+    color?: ButtonColors;
+    size?: ButtonSizes;
+    iconName?: IconName;
+    type?: ButtonTypes;
+    href?: string;
+    isDisabled?: boolean;
+}

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

@@ -0,0 +1,2 @@
+import { ColProps } from 'react-grid-system';
+export declare const Col: ({ ref: _ref, ...rest }: ColProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,2 @@
+import { ContainerProps } from 'react-grid-system';
+export declare const Container: ({ ref: _ref, ...rest }: ContainerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Container } from './Container';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof Container>;
+export declare const Default: Story;
+export declare const Fluid: Story;
+export declare const Responsive: Story;
+export declare const NestedGrids: Story;
+export declare const Offset: Story;

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

@@ -0,0 +1,3 @@
+export { Container } from './container/Container';
+export { Row } from './row/Row';
+export { Col } from './col/Col';

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

@@ -0,0 +1,2 @@
+import { RowProps } from 'react-grid-system';
+export declare const Row: ({ ref: _ref, ...rest }: RowProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/lib/components/index.d.ts

@@ -1,18 +1,2 @@
-export { Accordion } from './Accordion';
-export { Section, SectionBlock, SectionBody, SectionHeader, SectionTable } from './basic-section';
-export { Button, IconButton } from './buttons';
-export { BorderSelect, MultiCombobox, Select, SingleCombobox } from './dropdowns';
-export { Icon, faIcons, indicons } from './Icon';
-export { EditableInput, NumberInput, SearchInput, TextInput, Radio, RadioGroup, AbstractRadio, AbstractRadioGroup, DatePicker, NoInputDatePicker, } from './inputs';
-export { BarSpinner, CirclePulse, CircleSpinner, LoadingList, PercentageRing, RandomLoadingMessage, LoadingIndicator, } from './loading-indicators';
-export { ListTable } from './ListTable';
-export { Pagination } from './Pagination';
-export { Shrug } from './user-feedback';
-export { ConfirmModal, ModalBase } from './modals';
-export { LoadingAwareContainer } from './LoadingAwareContainer';
-export { Wizard, WizardCard, WizardSection, StyledWizard } from './Wizard';
-export { WizardWithSidebar } from './WizardWithSidebar';
-export { Drawer } from './Navigation/Drawer';
-export { TextTruncate } from './text-truncate';
-export { Toggle } from './Toggle';
-export { Tooltip } from './Tooltip';
+export { Container, Col, Row } from './grid';
+export { Button } from './button';

package/lib/components/sampleButton/SampleButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface SampleButtonProps {
+    onClick?: () => void;
+    children: React.ReactNode;
+}
+export declare const SampleButton: ({ onClick, children }: SampleButtonProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/sampleButton/SampleButton.stories.d.ts

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

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

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