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

package/lib/components/RadioTile/RadioTile.stories.tsx

@@ -1,276 +0,0 @@
-import * as React from 'react';
-
-import {ALERT_SEMANTIC} from '../../types/common';
-import {ICON_SIZE, ICON_TYPE} from '../Icon';
-import {SubTitleSmall} from '../Text';
-
-import type {RadioTileProps} from './';
-import {RadioTile} from './';
-
-import css from './RadioTile.stories.module.css';
-
-
-const semanticOptions: Array<unknown> = [...Object.values(ALERT_SEMANTIC)];
-const iconSizeOptions: Array<unknown> = [...Object.values(ICON_SIZE)];
-const iconTypeOptions: Array<unknown> = [...Object.values(ICON_TYPE)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'AI Prompt Components/Radio Tile',
-  component: RadioTile,
-  argTypes: {
-    id: {
-      description: 'id to be set for each RadioTile.',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    header: {
-      description: 'Content to be displayed at the top of the RadioTile.',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    description: {
-      description: 'Content to be displayed in the middle of the RadioTile.',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    chipItems: {
-      description:
-        'Content to be displayed at the bottom in chips of the RadioTile.',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: 'Array<string>',
-        },
-      },
-    },
-    isSelected: {
-      description: 'isSelected indicates selection of the RadioTile.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {
-          summary: 'boolean',
-        },
-      },
-    },
-    onTileClick: {
-      description:
-        '**onTileClick** handler that is applied to the RadioTile when clicked.',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    iconName: {
-      description: 'Name of the icon to be displayed in the RadioTile.',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    semantic: {
-      description: 'Semantic of the icon to be displayed in the RadioTile.',
-      options: semanticOptions,
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {
-          summary: 'AlertSemanticType',
-          defaultValue: {summary: ALERT_SEMANTIC.neutral},
-        },
-      },
-    },
-    iconSize: {
-      description: 'Size of the icon in the RadioTile.',
-      control: {
-        type: 'select',
-      },
-      options: iconSizeOptions,
-      table: {
-        type: {
-          summary: 'IconSize',
-        },
-        defaultValue: {summary: ICON_SIZE.medium},
-      },
-    },
-    iconType: {
-      description: 'Type of the icon (e.g., outline, solid, duotone).',
-      control: {
-        type: 'select',
-      },
-      options: iconTypeOptions,
-      table: {
-        type: {
-          summary: 'IconType',
-        },
-        defaultValue: {summary: ICON_TYPE.solid},
-      },
-    },
-    classNames: {
-      description:
-        'Additional CSS classes to customize the appearance of the RadioTile.',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string}',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a RadioTile component.',
-      description: {
-        component: `
-\`\`\`js
-import { RadioTile } from "@spaced-out/ui-design-system/lib/components/RadioTile";
-\`\`\`
-The RadioTile component is a user-interactive tile that combines a RadioButton with customizable content and optional icons. It is ideal for selection-based interfaces where users need to pick one option among a group of visually distinct tiles.
-This component is particularly useful in dashboards, reporting applications, or forms where highlighting specific metrics, options, or data is required.
-
-### Usage
-
-\`\`\`jsx
-<RadioTile
-  header="Candidate Skills"
-  description="Extract skills from an VoiceFlow conversation"
-  chipItems={['ATS Candidate', 'Candidate']}
-  iconName="chart-bar"
-/>
-\`\`\`
-
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/RadioTile/RadioTile.jsx',
-    },
-  },
-};
-
-export const _RadioTile = (args: RadioTileProps) => {
-  const [isSelected, setIsSelected] = React.useState(false);
-
-// @ts-ignore - TS6133 - 'e' is declared but its value is never read. | TS6133 - 'id' is declared but its value is never read.
-  const handleTileClick = (e: React.SyntheticEvent<HTMLElement>, id: string) => {
-    setIsSelected(true);
-  };
-  return (
-    <>
-      <SubTitleSmall>Customizable</SubTitleSmall>
-      <br />
-      <div className={css.container}>
-        <RadioTile
-          {...args}
-          id="tile0"
-          isSelected={isSelected}
-          onTileClick={handleTileClick}
-        />
-      </div>
-    </>
-  );
-};
-
-_RadioTile.args = {
-  header: 'Candidate Skills',
-  description: 'Extract skills from an VoiceFlow conversation',
-  chipItems: ['ATS Candidate', 'Candidate'],
-  iconName: 'users',
-  semantic: 'neutral',
-  iconType: 'duotone',
-};
-
-export const _RadioTileGroup = (args: RadioTileProps) => {
-  const [selectedId, setSelectedId] = React.useState<string | null>(null);
-
-// @ts-ignore - TS6133 - 'e' is declared but its value is never read.
-  const handleTileClick = (e: React.SyntheticEvent<HTMLElement>, id: string) => {
-    setSelectedId(id);
-  };
-
-  return (
-    <div className={css.groupContainer}>
-      <RadioTile
-        {...args}
-        id="tile1"
-        isSelected={selectedId === 'tile1'}
-        semantic="information"
-        header="Summarize Text"
-        description="Extract skills from an VoiceFlow conversation."
-        chipItems={['Text Analyzation']}
-        iconName="calendar"
-        onTileClick={handleTileClick}
-      />
-
-      <RadioTile
-        {...args}
-        id="tile2"
-        isSelected={selectedId === 'tile2'}
-        semantic="warning"
-        header="Candidate Skills"
-        description="Extract skills from an VoiceFlow conversation."
-        chipItems={['ATS Database', 'Candidate']}
-        iconName="chart-bar"
-        onTileClick={handleTileClick}
-      />
-
-      <RadioTile
-        {...args}
-        id="tile3"
-        isSelected={selectedId === 'tile3'}
-        semantic="neutral"
-        header="Categorize Sentiment"
-        description="Categorize the sentiment of SMS survey results."
-        chipItems={['Text Analyzation', 'Survey']}
-        iconName="analytics"
-        onTileClick={handleTileClick}
-      />
-
-      <RadioTile
-        {...args}
-        id="tile4"
-        isSelected={selectedId === 'tile4'}
-        semantic="danger"
-        header="Custom Report"
-        description="Generate an automation with your own custom prompt"
-        chipItems={['Custom Config']}
-        iconName="books"
-        onTileClick={handleTileClick}
-      />
-    </div>
-  );
-};
-
-_RadioTileGroup.args = {
-  iconSize: 'medium',
-  iconType: 'solid',
-};

package/lib/components/RadioTile/RadioTile.tsx

@@ -1,107 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import type {AlertSemanticType} from '../../types/common';
-import {ALERT_SEMANTIC} from '../../types/common';
-import classify from '../../utils/classify';
-import {ClickableCard} from '../Card';
-import {Chip} from '../Chip';
-import type {IconSize, IconType} from '../Icon';
-import {ICON_SIZE, ICON_TYPE, SemanticIcon} from '../Icon';
-import {RadioButton} from '../RadioButton';
-import {BodyMedium, SubTitleMedium} from '../Text';
-
-import css from './RadioTile.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-}>;
-
-export type RadioTileProps = {
-  id: string;
-  classNames?: ClassNames;
-  semantic?: AlertSemanticType;
-  header?: string;
-  description?: string;
-  chipItems?: Array<string>;
-  onTileClick?: (e: React.SyntheticEvent<HTMLElement>, id: string) => void;
-  iconName?: string;
-  iconSize?: IconSize;
-  iconType?: IconType;
-  isSelected?: boolean;
-};
-
-export const RadioTile: Flow.AbstractComponent<RadioTileProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, RadioTileProps>((
-  {
-    classNames,
-    id,
-    semantic = ALERT_SEMANTIC.neutral,
-    header,
-    description,
-    chipItems,
-    iconName,
-// @ts-ignore - TS2322 - Type 'string' is not assignable to type '"small" | "large" | "medium"'.
-    iconSize = ICON_SIZE.medium,
-// @ts-ignore - TS2322 - Type 'string' is not assignable to type '"regular" | "solid" | "duotone" | "brands"'.
-    iconType = ICON_TYPE.solid,
-    onTileClick,
-    isSelected = false,
-    ...props
-  }: RadioTileProps,
-  ref,
-) => {
-  const handleTileClick = (e: React.SyntheticEvent<HTMLElement>) => {
-    onTileClick && onTileClick(e, id);
-  };
-
-  return (
-    <ClickableCard
-      {...props}
-      ref={ref}
-      data-testid="RadioTile"
-      classNames={{
-        wrapper: classify(css.wrapper, classNames?.wrapper),
-      }}
-      onClick={handleTileClick}
-    >
-      <div className={css.iconContainer}>
-        {!!iconName && (
-          <SemanticIcon
-            semantic={semantic}
-            name={iconName}
-            size={iconSize}
-            type={iconType}
-          />
-        )}
-      </div>
-      <div className={css.contentContainer}>
-        <div className={css.textContainer}>
-          {!!header && <SubTitleMedium>{header}</SubTitleMedium>}
-          {!!description && (
-            <BodyMedium color="secondary">{description}</BodyMedium>
-          )}
-        </div>
-        {!!chipItems?.length && (
-          <div className={css.chipsContainer}>
-            {chipItems.map((item, index) => (
-              // eslint-disable-next-line react/no-array-index-key
-              (<Chip key={index} semantic="primary">
-                {item}
-              </Chip>)
-            ))}
-          </div>
-        )}
-      </div>
-      <div className={css.btnContainer}>
-        <RadioButton
-          classNames={{wrapper: css.radioButtonWrapper}}
-          value={id}
-          selectedValue={isSelected ? id : ''}
-          tabIndex={-1}
-        />
-      </div>
-    </ClickableCard>
-  );
-});

package/lib/components/RadioTile/index.ts

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