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

package/lib/components/WeekdayPicker/WeekdayPicker.tsx

@@ -1,224 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-import {UnstyledButton} from '../Button';
-
-import css from './WeekdayPicker.module.css';
-
-
-const DEFAULT_WEEKDAYS = [
-  {key: 'sun', label: 'S'},
-  {key: 'mon', label: 'M'},
-  {key: 'tue', label: 'T'},
-  {key: 'wed', label: 'W'},
-  {key: 'thu', label: 'T'},
-  {key: 'fri', label: 'F'},
-  {key: 'sat', label: 'S'},
-];
-
-const WEEKEND_KEYS = ['sat', 'sun'];
-
-export const WEEKDAY_PICKER_SIZE = Object.freeze({
-  small: 'small',
-  medium: 'medium',
-});
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  button?: string;
-  label?: string;
-  helperText?: string;
-}>;
-type WeekdayPickerSize = typeof WEEKDAY_PICKER_SIZE[keyof typeof WEEKDAY_PICKER_SIZE];
-
-type Weekday = {
-  key: string;
-  label: string;
-  secondaryLabel?: string;
-};
-
-export type WeekdayPickerProps = {
-  size?: WeekdayPickerSize;
-  selectedWeekDays?: Array<Weekday>;
-  hiddenWeekDays?: Array<string>;
-  disabledWeekDays?: Array<string>;
-  customDayLabels?: Array<Weekday>;
-  onChange?: (
-    selectedDays: Array<Weekday>,
-    arg2?: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  readOnly?: boolean;
-  classNames?: ClassNames;
-  showWeekends?: boolean;
-  ariaLabel?: string;
-  label?: React.ReactNode;
-  helperText?: React.ReactNode;
-  disableMultiSelect?: boolean;
-};
-
-type DayButtonProps = {
-  day: Weekday;
-  isSelected: boolean;
-  isDisabled: boolean;
-  onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-  className?: string;
-  size: WeekdayPickerSize;
-  readOnly?: boolean;
-};
-
-const DayButton = ({
-  day,
-  isSelected,
-  isDisabled,
-  onClick,
-  className,
-  size,
-  readOnly,
-}: DayButtonProps) => (
-  <UnstyledButton
-    key={day.key}
-    className={classify(
-      css.weekdayButton,
-      {
-        [css.weekdayButtonMedium]: size === WEEKDAY_PICKER_SIZE.medium,
-        [css.weekdayButtonSmall]: size === WEEKDAY_PICKER_SIZE.small,
-        [css.weekdayButtonSelected]: isSelected,
-        [css.weekdayButtonDisabled]: isDisabled,
-      },
-      className,
-    )}
-    onClick={onClick}
-    disabled={isDisabled}
-    aria-label={`Select ${day.label}`}
-    tabIndex={isDisabled || readOnly ? -1 : 0}
-    role="checkbox"
-  >
-    {day.secondaryLabel && (
-      <div
-        className={classify(css.secondaryLabel, {
-          [css.secondaryLabelSelected]: isSelected,
-          [css.secondaryLabelDisabled]: isDisabled,
-        })}
-      >
-        {day.secondaryLabel}
-      </div>
-    )}
-    {day.label}
-  </UnstyledButton>
-);
-
-export const WeekdayPicker: Flow.AbstractComponent<WeekdayPickerProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, WeekdayPickerProps>((
-  {
-    size = 'medium',
-    selectedWeekDays = [],
-    disabledWeekDays = [],
-    hiddenWeekDays = [],
-    customDayLabels = DEFAULT_WEEKDAYS,
-    onChange,
-    readOnly = false,
-    classNames = {},
-    showWeekends = true,
-    ariaLabel = 'Select weekdays',
-    label,
-    helperText,
-    disableMultiSelect = false,
-  }: WeekdayPickerProps,
-  ref,
-) => {
-  const [selectedDays, setSelectedDays] =
-    React.useState<Array<Weekday>>(selectedWeekDays);
-
-  const handleDayToggle = (
-    day: Weekday,
-    event: React.SyntheticEvent<HTMLElement>,
-  ) => {
-    if (readOnly || disabledWeekDays.includes(day.key)) {
-      return;
-    }
-
-    let updatedSelectedDays = selectedDays;
-
-    if (disableMultiSelect) {
-      if (selectedDays.some((selected) => selected.key === day.key)) {
-        updatedSelectedDays = [];
-      } else {
-        updatedSelectedDays = [day];
-      }
-    } else {
-      const isSelected = selectedDays.some(
-        (selected) => selected.key === day.key,
-      );
-
-      if (isSelected) {
-        updatedSelectedDays = selectedDays.filter(
-          (selected) => selected.key !== day.key,
-        );
-      } else {
-        updatedSelectedDays = [...selectedDays, day];
-      }
-    }
-
-    setSelectedDays(updatedSelectedDays);
-    onChange?.(updatedSelectedDays, event);
-  };
-
-  return (
-    <div
-      data-testid="Weekday-Picker"
-      ref={ref}
-      className={classify(css.weekdayPickerContainer, classNames.wrapper, {
-        [css.weekdayReadOnly]: readOnly,
-      })}
-      aria-label={ariaLabel}
-      role="group"
-    >
-      {!!label && (
-        <div className={classify(css.weekdayLabel, classNames.label)}>
-          {label}
-        </div>
-      )}
-      <div className={css.weekdayPickerDays}>
-        {customDayLabels.map((day) => {
-          const isWeekend = WEEKEND_KEYS.includes(day.key);
-          const isHidden = hiddenWeekDays.includes(day.key);
-          if ((!showWeekends && isWeekend) || isHidden) {
-            return null;
-          }
-
-          const isSelected = selectedDays.some(
-            (selected) => selected.key === day.key,
-          );
-          const isDisabled = disabledWeekDays.includes(day.key);
-
-          return (
-            <DayButton
-              key={day.key}
-              day={day}
-              isSelected={isSelected}
-              isDisabled={isDisabled}
-              onClick={(event) => {
-                if (isDisabled) {
-                  event.preventDefault();
-                } else {
-                  handleDayToggle(day, event);
-                }
-              }}
-              className={classNames.button}
-              size={size}
-              readOnly={readOnly}
-            />
-          );
-        })}
-      </div>
-      {!!helperText && (
-        <div
-          className={classify(css.weekdayHelperText, classNames.helperText)}
-        >
-          {helperText}
-        </div>
-      )}
-    </div>
-  );
-});

package/lib/components/WeekdayPicker/index.ts

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

package/lib/components/index.ts

@@ -1,77 +0,0 @@
-export * from './Accordion';
-export * from './Avatar';
-export * from './AvatarGroup';
-export * from './Badge';
-export * from './BadgedIcon';
-export * from './Banner';
-export * from './Breadcrumbs';
-export * from './Button';
-export * from './ButtonDropdown';
-export * from './ButtonTabs';
-export * from './Card';
-export * from './Charts';
-// @ts-ignore - TS2308 - Module './Charts' has already exported a member named 'ClassNames'. Consider explicitly re-exporting to resolve the ambiguity.
-export * from './ChatBubble';
-export * from './Checkbox';
-export * from './Chip';
-export * from './CircularLoader';
-export * from './CollapsibleCard';
-export * from './Combobox';
-export * from './ConditionalWrapper';
-export * from './DateRangePicker';
-export * from './Dialog';
-export * from './Disclaimer';
-export * from './Dropdown';
-export * from './EmptyState';
-export * from './ErrorMessage';
-export * from './FileUpload';
-export * from './FilterButtonOverlay';
-export * from './FocusManager';
-export * from './FocusManagerWithArrowKeyNavigation';
-export * from './FormTitleWrapper';
-export * from './Grid';
-export * from './Icon';
-export * from './InContextAlert';
-export * from './InfinitePagination';
-export * from './InlineDropdown';
-export * from './Input';
-export * from './KPIBox';
-export * from './LinearLoader';
-export * from './Link';
-export * from './Menu';
-export * from './Modal';
-export * from './Notification';
-export * from './OptionButton';
-export * from './PageTitle';
-export * from './Pagination';
-export * from './Panel';
-export * from './ProgressDonut';
-export * from './PromptChip';
-export * from './PromptInput';
-export * from './RadioButton';
-export * from './RadioTile';
-export * from './RangeSlider';
-export * from './Rating';
-// @ts-ignore - TS2308 - Module './Charts' has already exported a member named 'ClassNames'. Consider explicitly re-exporting to resolve the ambiguity.
-export * from './ScoreBar';
-export * from './SearchInput';
-export * from './Separator';
-export * from './Shimmer';
-export * from './SideMenuLink';
-export * from './StatusIndicator';
-export * from './Stepper';
-export * from './StickyBar';
-export * from './SubMenu';
-export * from './Table';
-export * from './Tabs';
-export * from './Text';
-export * from './Textarea';
-export * from './TextTile';
-export * from './Toast';
-export * from './Toggle';
-export * from './TokenListInput';
-export * from './Tooltip';
-export * from './Truncate';
-export * from './TruncatedTextWithTooltip';
-export * from './Typeahead';
-export * from './WeekdayPicker';

package/lib/hooks/index.ts

@@ -1,16 +0,0 @@
-export * from './useArbitraryOptionAddition';
-export * from './useCopyToClipboard';
-export * from './useDebounce';
-export * from './useFileUpload';
-export * from './useFilteredOptions';
-export * from './useInfiniteScroll';
-export * from './useInputState';
-export * from './useLockedBody';
-export * from './useModal';
-export * from './useMountTransition';
-export * from './usePagination';
-export * from './useReferenceElementWidth';
-export * from './useResizeObserver';
-export * from './useToastPortal';
-export * from './useToggle';
-export * from './useWindowSize';

package/lib/hooks/useArbitraryOptionAddition/index.ts

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

package/lib/hooks/useArbitraryOptionAddition/useArbitraryOptionAddition.stories.tsx

@@ -1,158 +0,0 @@
-import * as React from 'react';
-
-import {Input} from '../../components/Input';
-import {Menu} from '../../components/Menu';
-
-// Use a plain input to avoid import errors
-import {useArbitraryOptionAddition} from './useArbitraryOptionAddition';
-
-import css from './useArbitraryOptionAddition.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Hooks/useArbitraryOptionAddition',
-  component: useArbitraryOptionAddition,
-  parameters: {
-    docs: {
-      description: {
-        component: `
-\`\`\`js
-import { useArbitraryOptionAddition } from "@spaced-out/ui-design-system/lib/hooks/useArbitraryOptionAddition";
-\`\`\`
-The \`useArbitraryOptionAddition\` hook allows you to add arbitrary (user-defined) options to a list, such as for tag or token inputs. It works with both flat and grouped options, and supports custom validation and creation logic.
-
-### Parameters
-- \`searchTerm\`: The search term to filter the options.
-- \`options\`: The options to filter.
-- \`groupTitleOptions\`: The grouped options to filter.
-- \`excludedKeys\`: The keys to exclude from the options.
-- \`allowArbitraryValues\`: Whether to allow arbitrary values. Defaults to \`true\`.
-- \`allowMultiArbitraryValues\`: Whether to allow multiple arbitrary values. Defaults to \`false\`.
-- \`validateArbitraryValue\`: The function to validate the arbitrary value. Defaults to \`(value) => value.trim() !== ''.\`
-- \`makeArbitraryValue\`: The function to make the arbitrary value. Defaults to \`(searchTerm) => ({key: searchTerm, label: searchTerm, arbitrary: true}).\`
-- \`makeMultiArbitraryValue\`: The function to make the multi-arbitrary value. Defaults to \`(searchTerm) => ({key: searchTerm, label: searchTerm, multiArbitrary: true}).\`
-
-
-### Return Type
-- An object with:
-  - \`arbitraryOptionsAdded\`: The filtered options array, with arbitrary options added if appropriate.
-  - \`arbitraryGroupTitleOptionsAdded\`: The filtered grouped options array, with arbitrary options added if appropriate.
-
-### Usage
-\`\`\`jsx
-const { arbitraryOptionsAdded, arbitraryGroupTitleOptionsAdded } = useArbitraryOptionAddition({
-  searchTerm,
-  options,
-  groupTitleOptions,
-  excludedKeys,
-  allowArbitraryValues,
-  allowMultiArbitraryValues,
-  validateArbitraryValue,
-  makeArbitraryValue,
-  makeMultiArbitraryValue,
-});
-\`\`\`
-
-####Note:
- - The \`arbitraryOptionsAdded\` and \`arbitraryGroupTitleOptionsAdded\` arrays are the filtered options with arbitrary options added if appropriate.
-        `,
-      },
-    },
-  },
-};
-
-const options = [
-  {key: 'apple', label: 'Apple'},
-  {key: 'banana', label: 'Banana'},
-  {key: 'orange', label: 'Orange'},
-  {key: 'grape', label: 'Grape'},
-];
-
-export const Basic = () => {
-  const [searchTerm, setSearchTerm] = React.useState('');
-  const { optionsWithArbitrary } = useArbitraryOptionAddition({
-    searchTerm,
-    options,
-  });
-
-  return (
-    <div className={css.container}>
-      <Input
-        type="text"
-        value={searchTerm}
-        onChange={(e) => setSearchTerm(String(e.target.value))}
-        placeholder="Search for fruits"
-      />
-      <Menu
-        options={optionsWithArbitrary}
-        onSelect={(option) => {
-          // eslint-disable-next-line no-console
-          console.log('Selected:', option);
-        }}
-        resolveLabel={(option) => {
-// @ts-ignore - TS2339 - Property 'arbitrary' does not exist on type 'MenuOption'.
-          if (option.arbitrary && option.label) {
-            return `Create New "${option.label}"`;
-          }
-          return option.label;
-        }}
-      />
-    </div>
-  );
-};
-
-const groupTitleOptions = [
-  {
-    groupTitle: <span>Fruits</span>,
-    groupId: 'fruits',
-    options: [
-      {key: 'apple', label: 'Apple'},
-      {key: 'banana', label: 'Banana'},
-      {key: 'orange', label: 'Orange'},
-      {key: 'grape', label: 'Grape'},
-    ],
-  },
-  {
-    groupTitle: <span>Vegetables</span>,
-    groupId: 'vegetables',
-    options: [
-      {key: 'carrot', label: 'Carrot'},
-      {key: 'broccoli', label: 'Broccoli'},
-      {key: 'spinach', label: 'Spinach'},
-    ],
-  },
-];
-
-export const Grouped = () => {
-  const [searchTerm, setSearchTerm] = React.useState('');
-  const { groupTitleOptionsWithArbitrary } = useArbitraryOptionAddition({
-    searchTerm,
-    groupTitleOptions,
-  });
-
-  return (
-    <div className={css.container}>
-      <Input
-        type="text"
-        value={searchTerm}
-        onChange={(e) => setSearchTerm(String(e.target.value))}
-        placeholder="Type to add or filter..."
-      />
-      <Menu
-        groupTitleOptions={groupTitleOptionsWithArbitrary}
-        onSelect={(option) => {
-          // eslint-disable-next-line no-console
-          console.log('Selected:', option);
-        }}
-        resolveLabel={(option) => {
-// @ts-ignore - TS2339 - Property 'arbitrary' does not exist on type 'MenuOption'.
-          if (option.arbitrary && option.label) {
-            return `Create New "${option.label}"`;
-          }
-          return option.label;
-        }}
-      />
-    </div>
-  );
-};

package/lib/hooks/useArbitraryOptionAddition/useArbitraryOptionAddition.ts

@@ -1,127 +0,0 @@
-import type {GroupTitleOption} from '../useFilteredOptions';
-import {useFilteredOptions} from '../useFilteredOptions';
-
-
-export type ArbitraryOption = {
-  key: string;
-  label: string;
-  arbitrary?: boolean;
-  multiArbitrary?: boolean;
-};
-
-export function useArbitraryOptionAddition<V>(
-  {
-    searchTerm,
-    options = [],
-    excludedKeys = [],
-    allowArbitraryValues = true,
-    allowMultiArbitraryValues = false,
-    validateArbitraryValue = (value: string): boolean => value.trim() !== '',
-
-// @ts-ignore - TS2322 - Type '{ key: string; label: string; arbitrary: boolean; }' is not assignable to type 'V'.
-    makeArbitraryValue = (searchTerm: string): V => ({
-      key: searchTerm,
-      label: searchTerm,
-      arbitrary: true,
-    }),
-
-// @ts-ignore - TS2366 - Function lacks ending return statement and return type does not include 'undefined'.
-    makeMultiArbitraryValue = (searchTerm: string): V => {
-      const regex = /^(?=.*[,\n]).+$/s;
-      if (regex.test(searchTerm)) {
-        // $FlowFixMe - Object literal is compatible with V due to type constraint
-// @ts-ignore - TS2322 - Type '{ key: string; label: string; multiArbitrary: boolean; }' is not assignable to type 'V'.
-        return {key: searchTerm, label: searchTerm, multiArbitrary: true};
-      }
-    },
-
-    groupTitleOptions = [],
-    arbitraryGroup = {groupTitle: '', showLineDivider: false, options: []},
-
-    searchOptionsBy = (option: V, searchTerm: string): boolean => {
-      // $FlowFixMe
-// @ts-ignore - TS2322 - Type 'V' is not assignable to type '{ label: string; key: string; }'.
-      const {
-        label,
-        key,
-      }: {
-        label: string;
-        key: string;
-      } = option;
-      return (
-        key.toLowerCase().includes(searchTerm) ||
-        label.toLowerCase().includes(searchTerm)
-      );
-    },
-  }: {
-    searchTerm: string;
-    options?: V[];
-    excludedKeys?: string[];
-    allowArbitraryValues?: boolean;
-    allowMultiArbitraryValues?: boolean;
-    validateArbitraryValue?: (arg1: string) => boolean;
-    makeArbitraryValue?: (arg1: string) => V;
-    makeMultiArbitraryValue?: (arg1: string) => V;
-    groupTitleOptions?: GroupTitleOption<V>[];
-    arbitraryGroup?: GroupTitleOption<V>;
-    searchOptionsBy?: (option: V, searchTerm: string) => boolean;
-  },
-): {
-  optionsWithArbitrary: Array<V>;
-  groupTitleOptionsWithArbitrary: Array<GroupTitleOption<V>>;
-} {
-  const trimmedSearchTerm = (searchTerm || '').trim().toLowerCase();
-
-  const {filteredOptions, filteredGroupTitleOptions} = useFilteredOptions({
-    searchTerm: trimmedSearchTerm,
-    options,
-    groupTitleOptions,
-    searchOptionsBy,
-  });
-
-  // Find if an arbitrary option should be added
-  const arbitraryOption =
-    allowArbitraryValues &&
-    trimmedSearchTerm &&
-// @ts-ignore - TS2532 - Object is possibly 'undefined'. | TS2339 - Property 'key' does not exist on type 'V'.
-    !filteredOptions.some((option) => option.key === trimmedSearchTerm) &&
-// @ts-ignore - TS2532 - Object is possibly 'undefined'.
-    !filteredGroupTitleOptions.some(
-      (group) =>
-        Array.isArray(group.options) &&
-// @ts-ignore - TS2339 - Property 'key' does not exist on type 'V'.
-        group.options.some((option) => option.key === trimmedSearchTerm),
-    ) &&
-    !excludedKeys.includes(trimmedSearchTerm) &&
-    validateArbitraryValue(trimmedSearchTerm) &&
-    makeArbitraryValue(trimmedSearchTerm);
-
-  // Find if a multi-arbitrary option should be added
-  const multiArbitraryOption =
-    allowMultiArbitraryValues &&
-    trimmedSearchTerm &&
-    makeMultiArbitraryValue(trimmedSearchTerm);
-
-  // Compose the results
-  let optionsWithArbitrary = filteredOptions;
-  let groupTitleOptionsWithArbitrary = groupTitleOptions;
-
-  if (arbitraryOption) {
-// @ts-ignore - TS2488 - Type 'V[] | undefined' must have a '[Symbol.iterator]()' method that returns an iterator.
-    optionsWithArbitrary = [arbitraryOption, ...optionsWithArbitrary];
-    groupTitleOptionsWithArbitrary = [
-      {...arbitraryGroup, options: [arbitraryOption]},
-      ...groupTitleOptionsWithArbitrary,
-    ];
-  }
-
-  if (multiArbitraryOption) {
-    optionsWithArbitrary = [multiArbitraryOption, ...optionsWithArbitrary];
-    groupTitleOptionsWithArbitrary = [
-      {...arbitraryGroup, options: [multiArbitraryOption]},
-      ...groupTitleOptionsWithArbitrary,
-    ];
-  }
-// @ts-ignore - TS2322 - Type 'V[] | undefined' is not assignable to type 'V[]'.
-  return {optionsWithArbitrary, groupTitleOptionsWithArbitrary};
-}

package/lib/hooks/useCopyToClipboard/index.ts

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