@spaced-out/ui-design-system 0.4.13-beta.0 → 0.4.13-beta.1

package/lib/components/Dialog/Dialog.stories.tsx

@@ -1,254 +0,0 @@
-import * as React from 'react';
-
-import {Button} from '../Button';
-import {BodyLarge, SubTitleLarge} from '../Text';
-
-import type {DialogProps} from './Dialog';
-import {
-  BasicDialog,
-  Dialog,
-  DIALOG_SEMANTIC,
-  DialogBody,
-  DialogFooter,
-  DialogHeader,
-} from './Dialog';
-
-import css from './Dialog.stories.module.css';
-
-
-const semanticOptions: Array<unknown> = [...Object.values(DIALOG_SEMANTIC)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Dialog',
-  argTypes: {
-    semantic: {
-      options: semanticOptions,
-      description: 'Semantic type of Dialog',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: DIALOG_SEMANTIC.neutral},
-      },
-    },
-    iconName: {
-      description: 'Custom icon. This overrides the default semantic icon',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    isOpen: {
-      description: 'if **true**, the modal is presented',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    tapOutsideToClose: {
-      description: 'if **true**, closes the modal on tap of backdrop',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    classNames: {
-      description: 'External classnames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{container?: string, content?: string, backdrop?: string}',
-        },
-      },
-    },
-    children: {
-      description: 'The children to rendered inside the Modal window',
-      table: {
-        type: {summary: 'React.ReactNode'},
-      },
-    },
-    onClose: {
-      description: '**onClose** handler is triggered on backdrop click',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    customAnimation: {
-      description: `\`<Modal>\` and its derivatives(\`<Dialog>\`, \`<Panel>\`) support
-      \`customAnimation: UseTransitionStylesProps\` prop for
-      all your custom animation needs.
-      It defines the following properties: \n\n
-- \`duration\` (optional): Specifies the duration of the animation in milliseconds.
-It can be a single number to set the duration for both opening and closing animations,
-or an object with separate open and close properties to specify different durations
-for opening and closing animations.
-- \`initial\` (optional): Represents the initial CSS styles for the modal component when
-it is first mounted. This property allows you to define the initial appearance of the
-modal before any animations occur.
-- \`open\` (optional): Defines the CSS styles that should be applied when the modal is fully
-opened. This property specifies the appearance of the modal when it transitions from the
-initial state to the fully open state.
-- \`close\` (optional): Specifies the CSS styles for the modal when it is being closed. This
-property determines the appearance of the modal when it transitions from the fully open
-state to the closed state.
-- \`common\` (optional): Represents the CSS styles that are common to all states of the modal
-component. These styles will be applied throughout the entire lifecycle of the modal,
-regardless of whether it is in the initial, open, or close state. You can use this property
-to define shared styles that should be present in all states.
-\n\nThe modal component follows a predefined order of states as it transitions through
-its lifecycle. It starts in the \`unmounted\` state, then moves to the \`initial\` state when mounted.
-From there, it can transition to the \`open\` state when fully opened, and then to the \`close\` state
-when being closed. Finally, it returns to the \`unmounted\` state when it is no longer needed. This
-is the transition order: \`unmounted\` -> \`initial\` -> \`open\` -> \`close\` -> \`unmounted\`
-By specifying the appropriate values for the \`duration\`, \`initial\`, \`open\`, \`close\`, and \`common\` properties,
-you can control the animation and styling of the modal at each stage of its lifecycle.
-      `,
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'UseTransitionStylesProps'},
-      },
-    },
-    hideBackdrop: {
-      description:
-        'if **true**, dark backdrop is removed and transparent backdrop is applied on the DOM',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    initialFocus: {
-      description:
-        'Which element to initially focus. Can be a number (tabbable index as specified by the order)',
-      control: {
-        type: 'number',
-      },
-      table: {
-        type: {summary: 'number'},
-        defaultValue: {summary: '-1'},
-      },
-    },
-  },
-
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Dialog component',
-      description: {
-        component: `
-\`\`\`js
-import { Dialog, DialogBody, DialogHeader, DialogFooter } from "@spaced-out/ui-design-system/lib/components/Dialog";
-\`\`\`
-A **dialog** is a particular kind of **<a href="../?path=/docs/components-modal--docs">Modal</a>** window that appears in front of the app's content to offer important information or solicit input.
-When they appear, dialogues **turn off** all app functions. They stay on screen until they are acknowledged, dismissed, or a necessary action is made.
-
-Dialogs should only be used occasionally because they are intended to be disruptive. Dialogs come in multiple variants as listed below.
-
-you can either use a Basic Dialog or
-Semantically a Dialog component should be composed from \`DialogHeader\`, \`DialogBody\`, and \`DialogFooter\` components,
-these are nothing but layout components which defines appropriate spacing for the children living in them.
-Each of these components also exposes a className
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Dialog/Dialog.jsx',
-    },
-  },
-};
-
-export const _Dialog = (args: DialogProps) => {
-  const [isOpen, setIsOpen] = React.useState(args.isOpen);
-
-  React.useEffect(() => {
-    setIsOpen(args.isOpen);
-  }, [args.isOpen]);
-
-  return (
-    <div className={css.container}>
-      <Button onClick={() => setIsOpen(!isOpen)}>Open Dialog</Button>
-      <Dialog {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        <DialogHeader>
-          <SubTitleLarge> Dialog Title</SubTitleLarge>
-        </DialogHeader>
-
-        <DialogBody>
-          <BodyLarge color="secondary">
-            Dialogs should only be used occasionally because they are intended
-            to be disruptive. Dialogs come in multiple variants.
-          </BodyLarge>
-        </DialogBody>
-
-        <DialogFooter>
-          <Button type="tertiary" isFluid onClick={() => setIsOpen(false)}>
-            Close
-          </Button>
-
-          <Button type="primary" isFluid onClick={() => setIsOpen(false)}>
-            Confirm
-          </Button>
-        </DialogFooter>
-      </Dialog>
-    </div>
-  );
-};
-
-_Dialog.args = {
-  classNames: {container: ''},
-  initialFocus: 1,
-  semantic: 'neutral',
-};
-
-/**
- * Basic Dialog supports these additional props <br><br>
- * `heading?: React.ReactNode` <br>
- * `body?: React.ReactNode` <br>
- * `confirmText?: string` <br>
- * `abortText?: string` <br>
- * `handleConfirm?: (event: SyntheticEvent<>) => mixed` <br>
- * `handleAbort?: (event: SyntheticEvent<>) => mixed`
- */
-export const _BasicDialog = (args: DialogProps) => {
-  const [isOpen, setIsOpen] = React.useState(args.isOpen);
-
-  React.useEffect(() => {
-    setIsOpen(args.isOpen);
-  }, [args.isOpen]);
-
-  return (
-    <div className={css.container}>
-      <Button onClick={() => setIsOpen(!isOpen)}>Open Basic Dialog</Button>
-      <BasicDialog
-        {...args}
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        handleAbort={() => setIsOpen(false)}
-        handleConfirm={() => setIsOpen(false)}
-      />
-    </div>
-  );
-};
-
-_BasicDialog.args = {
-  semantic: 'danger',
-  heading: 'Dialog Title',
-  body: 'A basic dialog supports text props to prepare content. You don\'t need to import semantic components to prepare the desired layout.',
-  abortText: 'Close',
-  confirmText: 'Confirm',
-};

package/lib/components/Dialog/Dialog.tsx

@@ -1,222 +0,0 @@
-import * as React from 'react';
-
-import {TEXT_COLORS} from '../../types/typography';
-import classify from '../../utils/classify';
-import {Button} from '../Button';
-import {Icon} from '../Icon';
-import type {ModalProps} from '../Modal';
-import {Modal} from '../Modal';
-
-import css from './Dialog.module.css';
-
-
-type FooterClassNames = Readonly<{
-  wrapper?: string;
-  actions?: string;
-}>;
-
-export const DIALOG_SEMANTIC = Object.freeze({
-  neutral: 'neutral',
-  success: 'success',
-  information: 'information',
-  warning: 'warning',
-  danger: 'danger',
-});
-
-export type DialogSemanticType = typeof DIALOG_SEMANTIC[keyof typeof DIALOG_SEMANTIC];
-
-export type DialogHeaderProps = {
-  children?: React.ReactNode;
-  className?: string;
-};
-
-export type DialogFooterProps = {
-  children?: React.ReactNode;
-  classNames?: FooterClassNames;
-};
-
-export type DialogBodyProps = {
-  children?: React.ReactNode;
-  className?: string;
-};
-
-export type DialogPropsBase = (ModalProps);
-
-export type DialogProps = ((DialogPropsBase) & {
-  semantic?: DialogSemanticType;
-  iconName?: string;
-});
-
-export type BasicDialogProps = ((DialogProps) & {
-  heading?: React.ReactNode;
-  body?: React.ReactNode;
-  confirmText?: string;
-  abortText?: string;
-  handleConfirm?: (event: React.SyntheticEvent) => unknown;
-  handleAbort?: (event: React.SyntheticEvent) => unknown;
-});
-
-const DialogIcon = ({
-  semantic,
-  iconName,
-}: {
-  semantic: DialogSemanticType;
-  iconName: string;
-}) => {
-  switch (semantic) {
-  case DIALOG_SEMANTIC.neutral:
-    return (
-      <Icon
-        color={TEXT_COLORS.neutral}
-        name={iconName ? iconName : 'face-smile'}
-        type="solid"
-      />
-    );
-  case DIALOG_SEMANTIC.success:
-    return (
-      <Icon
-        name={iconName ? iconName : 'circle-check'}
-        color={TEXT_COLORS.success}
-        type="solid"
-      />
-    );
-
-  case DIALOG_SEMANTIC.information:
-    return (
-      <Icon
-        name={iconName ? iconName : 'circle-info'}
-        color={TEXT_COLORS.information}
-        type="solid"
-      />
-    );
-
-  case DIALOG_SEMANTIC.warning:
-    return (
-      <Icon
-        name={iconName ? iconName : 'circle-exclamation'}
-        color={TEXT_COLORS.warning}
-        type="solid"
-      />
-    );
-
-  case DIALOG_SEMANTIC.danger:
-    return (
-      <Icon
-        name={iconName ? iconName : 'shield-exclamation'}
-        color={TEXT_COLORS.danger}
-        type="solid"
-      />
-    );
-
-  default:
-    return (
-      <Icon
-        color={TEXT_COLORS.neutral}
-        name={iconName ? iconName : 'face-smile'}
-        type="solid"
-      />
-    );
-  }
-};
-
-export const DialogHeader = (
-  {
-    children,
-    className,
-  }: DialogHeaderProps,
-) => (<>
-  {React.Children.count(children) > 0 && (
-    <div className={classify(css.dialogHeader, className)}>
-      <div className={css.headerContent}>{children}</div>
-    </div>
-  )}
-</>);
-
-export const DialogBody = (
-  {
-    children,
-    className,
-  }: DialogBodyProps,
-) => (<div className={classify(css.dialogBody, className)}>{children}</div>);
-
-export const DialogFooter = (
-  {
-    children,
-    classNames,
-  }: DialogFooterProps,
-) => (<>
-  {React.Children.count(children) > 0 && (
-    <div className={classify(css.dialogFooter, classNames?.wrapper)}>
-      <div className={classify(css.dialogFooterActions, classNames?.actions)}>
-        {children}
-      </div>
-    </div>
-  )}
-</>);
-
-export const Dialog = (
-  {
-    children,
-    isOpen = false,
-    hideBackdrop = false,
-    onClose,
-    tapOutsideToClose = false,
-    iconName = '',
-    semantic = 'neutral',
-    classNames,
-    ...restDialogProps
-  }: DialogProps,
-) => (<Modal
-  isOpen={isOpen}
-  onClose={onClose}
-  hideBackdrop={hideBackdrop}
-  tapOutsideToClose={tapOutsideToClose}
-  {...restDialogProps}
-  classNames={{
-    content: classify(css.dialog, classNames?.content),
-    container: classify(classNames?.container),
-    backdrop: classify(classNames?.backdrop),
-  }}
->
-  <div className={css.topBlock}>
-    <div
-      className={classify(css.iconContainer, {
-        [css.neutral]: semantic === DIALOG_SEMANTIC.neutral,
-        [css.success]: semantic === DIALOG_SEMANTIC.success,
-        [css.information]: semantic === DIALOG_SEMANTIC.information,
-        [css.warning]: semantic === DIALOG_SEMANTIC.warning,
-        [css.danger]: semantic === DIALOG_SEMANTIC.danger,
-      })}
-    >
-      <DialogIcon semantic={semantic} iconName={iconName} />
-    </div>
-  </div>
-  {children}
-</Modal>);
-
-export const BasicDialog = (
-  {
-    heading,
-    body,
-    confirmText,
-    abortText,
-    handleConfirm,
-    handleAbort,
-    ...restDialogProps
-  }: BasicDialogProps,
-) => (<Dialog {...restDialogProps}>
-  {!!heading && <DialogHeader>{heading}</DialogHeader>}
-  {!!body && <DialogBody>{body}</DialogBody>}
-  <DialogFooter>
-    {!!abortText && (
-      <Button isFluid type="tertiary" onClick={handleAbort}>
-        {abortText}
-      </Button>
-    )}
-    {!!confirmText && (
-      <Button isFluid onClick={handleConfirm}>
-        {confirmText}
-      </Button>
-    )}
-  </DialogFooter>
-</Dialog>);

package/lib/components/Dialog/index.ts

@@ -1 +0,0 @@
-export * from './Dialog';

package/lib/components/Disclaimer/Disclaimer.stories.tsx

@@ -1,148 +0,0 @@
-import * as React from 'react';
-
-import type {DisclaimerProps} from './';
-import {Disclaimer} from './Disclaimer';
-
-import css from './Disclaimer.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'AI Prompt Components/Disclaimer',
-  component: Disclaimer,
-  argTypes: {
-    actionText: {
-      name: 'actionText',
-      description: 'Action text to be displayed on **right** of Alert',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    onAction: {
-      name: 'onAction',
-      action: 'Action Click',
-      description: 'Callback function for action text click',
-      type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-    },
-    alignment: {
-      options: ['top', 'bottom'],
-      description:
-        'Semantic type of Banner. It will have different Icon and background color for different semantic type',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'top'},
-      },
-    },
-    dismissable: {
-      description: 'Close Icon will appear in right side in case it is true',
-      name: 'dismissable',
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    onCloseClick: {
-      name: 'onCloseClick',
-      action: 'Close Click',
-      description: 'Callback function for dismissable alert',
-      type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-    },
-    selfDismiss: {
-      description: `This prop is valid only in case dismissable is true.
-      It handles whether the dismissal should be handled by the component or it will just pass callback onclick of closeIcon and dismissal will be handled externally`,
-      name: 'selfDismiss',
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    semantic: {
-      description:
-        'Semantic type of Banner. It will have different Icon and background color for different semantic type',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        disable: true,
-      },
-    },
-    leftIconName: {
-      name: 'leftIconName',
-      control: {
-        type: 'text',
-      },
-      description: 'Custom left icon. This overrides the default semantic icon',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    leftIconType: {
-      options: ['regular', 'solid'],
-      description: 'Type of Icon',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'regular'},
-      },
-    },
-    children: {
-      description: 'Pass the alert message text as children',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    classNames: {
-      description:
-        'Provide an optional className to be applied to the wrapper, alertText',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{wrapper?: string, alertText?: string, actionContainer?: string}',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Disclaimer component',
-      description: {
-        component: `
-\`\`\`js
-import { Disclaimer } from "@spaced-out/ui-design-system/lib/components/Disclaimer";
-\`\`\`
-Use Disclaimer component to show alert message specific of AI Prompts use cases. It will take width of the container
-and will show only two lines of text. Post that it will get truncated. As there is no way for user to see the truncated message, it is recommended
-to use it for messages up to two lines only or add a tooltip along with it for showcasing complete message.
-
-Disclaimer should ideally be absolutely positioned and should stick to top or bottom of container
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Disclaimer/Disclaimer.jsx',
-    },
-  },
-};
-
-export const _Disclaimer = (args: DisclaimerProps) => (<div className={css.container}>
-  <Disclaimer {...args} />
-</div>);
-
-_Disclaimer.args = {
-  children: 'Always check content generated by AI',
-};

package/lib/components/Disclaimer/Disclaimer.tsx

@@ -1,35 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import type {BannerProps} from '../Banner';
-import {Banner} from '../Banner';
-import {ICON_TYPE} from '../Icon';
-
-import css from './Disclaimer.module.css';
-
-
-export type DisclaimerProps = (BannerProps);
-
-export const Disclaimer: Flow.AbstractComponent<DisclaimerProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, DisclaimerProps>((
-  {
-    classNames,
-    leftIconName = 'info-circle',
-// @ts-ignore - TS2322 - Type 'string' is not assignable to type '"regular" | "solid" | "duotone" | "brands"'.
-    leftIconType = ICON_TYPE.regular,
-    ...restProps
-  }: DisclaimerProps,
-  ref,
-) => (
-  <Banner
-    ref={ref}
-    {...restProps}
-    leftIconName={leftIconName}
-    leftIconType={leftIconType}
-    classNames={{
-      ...classNames,
-      wrapper: css.disclaimerWrapper,
-      icon: css.iconWrapper,
-    }}
-  ></Banner>
-));

package/lib/components/Disclaimer/index.ts

@@ -1 +0,0 @@
-export * from './Disclaimer';