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

package/lib/components/Accordion/Accordion.tsx

@@ -1,112 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import {Button} from '../Button';
-import {Toggle} from '../Toggle';
-
-import css from './Accordion.module.css';
-
-
-export type AccordionClassNames = Readonly<{
-  wrapper?: string;
-  headerWrapper?: string;
-  header?: string;
-  content?: string;
-}>;
-
-export type AccordionPropsType = {
-  id: string;
-  header: React.ReactNode;
-  children: React.ReactNode;
-  classNames?: AccordionClassNames;
-  isOpen?: boolean;
-  disabled?: boolean;
-  showToggle?: boolean;
-  onChange?: ((id: string, isOpen: boolean) => unknown) | null | undefined;
-  onToggle?: ((id?: string, checked?: boolean) => unknown) | null | undefined;
-};
-
-export const Accordion: Flow.AbstractComponent<AccordionPropsType, HTMLDivElement> = React.forwardRef<HTMLDivElement, AccordionPropsType>((
-  {
-    id,
-    header,
-    onChange,
-    onToggle,
-    disabled = false,
-    classNames,
-    isOpen = false,
-    showToggle = false,
-    children,
-  }: AccordionPropsType,
-  ref,
-) => {
-  const [accordionIsOpen, setAccordionIsOpen] = React.useState(isOpen);
-
-  const [checked, setChecked] = React.useState<boolean>(false);
-
-  const handleToggle = () => {
-    setChecked(!checked);
-    onToggle?.(id, !checked);
-  };
-
-  const handleAccordionClick = () => {
-    if (!disabled) {
-      onChange?.(id, !accordionIsOpen);
-      setAccordionIsOpen((prev) => !prev);
-    }
-  };
-
-  React.useEffect(() => {
-    setAccordionIsOpen(isOpen);
-  }, [isOpen]);
-
-  return (
-    <div
-      ref={ref}
-      data-testid="Accordion"
-      className={classify(css.wrapper, classNames?.wrapper)}
-    >
-      <div
-        className={classify(css.headerWrapper, classNames?.headerWrapper)}
-        onClick={handleAccordionClick}
-      >
-        <div className={classify(css.header, classNames?.header)}>
-          {showToggle && (
-            <div
-              onClick={(e) => {
-                e.stopPropagation(); // prevent toggle click from triggering accordion toggle
-              }}
-            >
-              <Toggle
-                checked={checked}
-                onChange={handleToggle}
-                ariaLabel={'toggle'}
-              />
-            </div>
-          )}
-          {header}
-        </div>
-        <Button
-          iconLeftName={accordionIsOpen ? 'chevron-up' : 'chevron-down'}
-          disabled={disabled}
-          size="small"
-          type="ghost"
-// @ts-ignore - TS2769 - No overload matches this call.
-          className={css.icon}
-          ariaLabel={'Collapse button'}
-          // we are not defining onClick here as we are using onClick of the parent here.
-        />
-      </div>
-
-      {accordionIsOpen && (
-        <div className={classify(css.content, classNames?.content)}>
-          {children}
-        </div>
-      )}
-    </div>
-  );
-});
-
-Accordion.displayName = 'Accordion';

package/lib/components/Accordion/AccordionGroup.stories.tsx

@@ -1,215 +0,0 @@
-import * as React from 'react';
-
-import {Button} from '../Button/index';
-import {
-  Card,
-  CardActions,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '../Card/Card';
-import {SemanticIcon} from '../Icon/index';
-import {Truncate} from '../Truncate/index';
-
-import {Accordion} from './Accordion';
-import type {AccordionGroupPropsType} from './AccordionGroup';
-import {AccordionGroup} from './AccordionGroup';
-
-import css from './AccordionGroup.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/AccordionGroup',
-  component: AccordionGroup,
-  argTypes: {
-    classNames: {
-      description:
-        'Optional class name overrides for styling the group container.',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string}',
-        },
-      },
-    },
-    children: {
-      description:
-        'One or more Accordion components to be rendered inside the group.',
-      control: false,
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-    onAccordionClick: {
-      description:
-        'Callback triggered when any accordion is toggled open or closed.',
-      control: false,
-      table: {
-        type: {
-          summary: '(id: string, isOpen: boolean) => mixed',
-        },
-      },
-    },
-    onToggle: {
-      description:
-        'Whether to display toggle switches on all child accordions. If true, toggle logic and disabledIds apply.',
-      control: false,
-      table: {
-        type: {
-          summary: '(id: string, checked?: boolean) => mixed',
-        },
-      },
-    },
-    enabledToggleIds: {
-      description:
-        'List of accordion ids that should be disabled (toggle off). These override any disabled prop on individual children.',
-      control: {
-        type: 'array',
-      },
-      table: {
-        type: {summary: 'string[]'},
-        defaultValue: {summary: '[]'},
-      },
-    },
-    initialOpenId: {
-      description:
-        'The id of the Accordion that should be expanded on initial render.',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates an ToggleAccordionGroup component.',
-      description: {
-        component: `
-\`\`\`js
-import { AccordionGroup } from "@spaced-out/ui-design-system/lib/components/Accordion/AccordionGroup";
-\`\`\`
-The \`AccordionGroup\` is a controlled component designed to manage the state and behavior of multiple \`Accordion\` components in a unified manner.
-
-It centralizes control over toggling and open states by providing the following props to its children:
-- \`isOpen\`
-- \`disabled\`
-- \`onChange\`
-- \`onToggle\`
-- \`showToggle\`
-
-**Note:** For scenarios that require custom group behaviors beyond toggle control (e.g., conditional logic, external state),
-you can compose your own group using standalone Accordion components. This allows full flexibility without being constrained by
-the group's internal logic.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Accordion/AccordionGroup.jsx',
-    },
-  },
-};
-
-const accordionRecords = [
-  {
-    id: 'accordion-1',
-    header: 'Resume Review',
-    content:
-      'Review and approve the candidate’s submitted resume and attached documents.',
-  },
-  {
-    id: 'accordion-2',
-    header: 'Skill Assessment',
-    content:
-      'Evaluate the candidate’s technical and soft skills using provided assessments.',
-  },
-  {
-    id: 'accordion-3',
-    header: 'Interview Feedback',
-    content:
-      'Summarize feedback from panel interviews and rate performance on key metrics.',
-  },
-  {
-    id: 'accordion-4',
-    header: 'Background Check',
-    content:
-      'Verify the candidate’s previous employment, education, and criminal history.',
-  },
-  {
-    id: 'accordion-5',
-    header: 'Final Decision',
-    content:
-      'Make a final decision to proceed with an offer or reject the application.',
-  },
-];
-
-export const _Default = (args: AccordionGroupPropsType) => {
-  const [enabledToggles, _setEnabledToggles] = React.useState<Array<string>>([]);
-
-  return (
-    <AccordionGroup {...args} enabledToggleIds={enabledToggles}>
-      {accordionRecords.map(({id, header, content}) => (
-        <Accordion key={id} id={id} header={header}>
-          <div>{content}</div>
-        </Accordion>
-      ))}
-    </AccordionGroup>
-  );
-};
-
-_Default.args = {
-  classNames: {wrapper: ''},
-};
-
-export const _InsideCard = (args: AccordionGroupPropsType) => {
-  const [enabledToggles, _setEnabledToggles] = React.useState<Array<string>>([]);
-  return (
-    <Card
-      classNames={{
-        wrapper: css.card,
-      }}
-    >
-      <CardHeader>
-        <CardTitle className={css.cardTitle}>
-          <SemanticIcon name="face-party" semantic="neutral" type="solid" />
-          <Truncate>Candidate Screening Summary</Truncate>
-        </CardTitle>
-        <div>
-          <CardActions>
-            <Button
-              ariaLabel={'download'}
-              iconLeftName="cloud-arrow-down"
-              type="ghost"
-            />
-            <Button
-              ariaLabel={'add'}
-              iconLeftName="add"
-              type="ghost"
-              role="button"
-            />
-          </CardActions>
-        </div>
-      </CardHeader>
-
-      <CardContent className={css.cardContent}>
-        <AccordionGroup {...args} enabledToggleIds={enabledToggles}>
-          {accordionRecords.map(({id, header, content}) => (
-            <Accordion key={id} id={id} header={header}>
-              <div>{content}</div>
-            </Accordion>
-          ))}
-        </AccordionGroup>
-      </CardContent>
-    </Card>
-  );
-};
-
-_InsideCard.args = {
-  classNames: {wrapper: css.accordionGroupWrapper},
-};

package/lib/components/Accordion/AccordionGroup.tsx

@@ -1,77 +0,0 @@
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-
-import css from './AccordionGroup.module.css';
-
-
-export type AccordionGroupClassNames = Readonly<{
-  wrapper?: string;
-}>;
-
-export type AccordionGroupPropsType = {
-  children: React.ReactNode;
-  onAccordionClick?: (id: string, isOpen: boolean) => unknown;
-  onToggle?: (id: string, checked?: boolean) => unknown;
-  enabledToggleIds?: Array<string>;
-  initialOpenId?: string;
-  classNames?: AccordionGroupClassNames;
-};
-
-export const AccordionGroup = (
-  {
-    children,
-    onAccordionClick,
-    onToggle,
-    enabledToggleIds = [],
-    initialOpenId = '',
-    classNames,
-  }: AccordionGroupPropsType,
-) => {
-  const [openId, setOpenedId] = React.useState(initialOpenId);
-  const [checks, setChecks] = React.useState(enabledToggleIds);
-  const handleAccordionChange = (id: any, isOpen: any) => {
-    setOpenedId(isOpen ? id : '');
-    onAccordionClick?.(id, isOpen);
-  };
-  const handleToggle = (id: any, checked: any) => {
-    setChecks((prev) =>
-      checked ? [...prev, id] : prev.filter((x) => x !== id),
-    );
-    setOpenedId((prev) => (checked ? id : prev === id ? '' : prev));
-    onToggle?.(id, checked);
-  };
-  const enhancedChildren = React.Children.map(children, (child) => {
-    if (!React.isValidElement(child)) {
-      return null;
-    }
-
-// @ts-ignore - TS2571 - Object is of type 'unknown'.
-    const childId = child.props.id;
-
-    const isDisabled = !checks.includes(childId);
-
-    const isOpen = openId === childId;
-
-    return React.cloneElement(child, {
-// @ts-ignore - TS2769 - No overload matches this call.
-      classNames: {
-        headerWrapper: css.accordionHeaderWrapper,
-        wrapper: css.accordionWrapper,
-      },
-      onChange: handleAccordionChange,
-      onToggle: handleToggle,
-      showToggle: true,
-      disabled: isDisabled,
-      isOpen,
-    });
-  });
-
-  return (
-    <div className={classify(css.wrapper, classNames?.wrapper)}>
-      {enhancedChildren}
-    </div>
-  );
-};
-
-AccordionGroup.displayName = 'AccordionGroup';

package/lib/components/Accordion/index.ts

@@ -1,2 +0,0 @@
-export * from './Accordion';
-export * from './AccordionGroup';

package/lib/components/Avatar/Avatar.stories.tsx

@@ -1,152 +0,0 @@
-import * as React from 'react';
-
-import * as COLORS from '../../styles/variables/_color';
-import {STATUS_SEMANTIC} from '../StatusIndicator';
-import {Tooltip} from '../Tooltip';
-
-import type {AvatarProps} from './';
-import {Avatar, avatarSizeOptions} from './Avatar';
-import {AVATAR_COLOR, AVATAR_SIZE} from './';
-
-import css from './Avatar.stories.module.css';
-
-
-const colorOptions: Array<unknown> = [...Object.keys(AVATAR_COLOR)];
-const statusOptions: Array<unknown> = [...Object.values(STATUS_SEMANTIC)];
-const statusColorOptions: Array<unknown> = [...Object.keys(COLORS)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Avatar',
-  argTypes: {
-    status: {
-      options: statusOptions,
-      description:
-        'Status type of a the indicator. It will have different background color for different status',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-      },
-    },
-    statusBorderColorToken: {
-      description:
-        'Pass different color token string to show border of status indicator in different color',
-      options: statusColorOptions,
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'colorBackgroundTertiary'},
-      },
-    },
-    imageSrc: {
-      description: 'Url of image to show in Avatar',
-    },
-    text: {
-      description: 'User name to show in the avatar',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    size: {
-      description:
-        'Avatar supports four size variants namely small, medium, large, extraLarge.',
-      control: {
-        type: 'select',
-      },
-      options: avatarSizeOptions,
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    color: {
-      options: colorOptions,
-      description: 'Background Color of avatar.',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'blue'},
-      },
-    },
-    iconName: {
-      name: 'iconName',
-      description: 'Icon name for icon avatar',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    iconType: {
-      description:
-        'Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
-      options: ['regular', 'solid', 'duotone', 'brands'],
-      control: {type: 'select'},
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'regular'},
-      },
-    },
-    ring: {
-      description: 'Ring around the avatar',
-      options: [false, true],
-      control: 'boolean',
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    classNames: {
-      description: 'Provide an optional className to be applied to the wrapper',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{wrapper?: string, ring?: string, content?: string, image?: string, icon?: string, text?: string}',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Avatar component.',
-      description: {
-        component: `
-\`\`\`js
-import { Avatar } from "@spaced-out/ui-design-system/lib/components/Avatar";
-\`\`\`
-Avatar component can be used to show image avatars, icon based avatars or text based avatars. It will first look for imageSrc props, then Icon name and optional icon type
-and in the last it use first two initials of text to show text avatar.
-Make sure to pass name for all the avatars which will be used internally as key and to show in tooltip in case of avatar group.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Avatar/Avatar.jsx',
-    },
-  },
-};
-
-export const _Avatar = (args: AvatarProps) => (<div className={css.container}>
-  <Tooltip body={args.text}>
-    <Avatar {...args} />
-  </Tooltip>
-</div>);
-
-_Avatar.args = {
-  imageSrc:
-    'https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png',
-  size: AVATAR_SIZE.medium,
-  text: 'Adam Craig Gilchrist',
-  iconName: 'face-party',
-  ring: false,
-  color: 'blue',
-  iconType: 'regular',
-  // classNames: {content: css.avatarContent, text: css.avatarText},
-};