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

package/lib/components/Typeahead/Typeahead.tsx

@@ -1,243 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-import {
-  autoUpdate,
-  flip,
-  FloatingFocusManager,
-  FloatingPortal,
-  offset,
-  useFloating,
-} from '@floating-ui/react';
-
-import {useReferenceElementWidth} from '../../hooks';
-import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
-import {classify} from '../../utils/classify';
-import {ClickAwayRefType, ClickAway} from '../../utils/click-away';
-import {mergeRefs} from '../../utils/merge-refs';
-import type {InputProps} from '../Input';
-import type {MenuOption, MenuProps} from '../Menu';
-import {Menu} from '../Menu';
-import {SearchInput} from '../SearchInput';
-import type {ElevationType} from '../Tooltip';
-import {getElevationValue} from '../Tooltip';
-
-import css from './Typeahead.module.css';
-
-
-type ClassNames = Readonly<{
-  wrapper?: string;
-  box?: string;
-}>;
-
-type BaseTypeaheadProps = ((InputProps) & {
-  classNames?: ClassNames;
-  onSelect?: (
-    option: MenuOption,
-    arg2?: React.SyntheticEvent<HTMLElement> | null | undefined,
-  ) => unknown;
-  onSearch?: (evt: React.ChangeEvent<HTMLInputElement>) => unknown;
-  onMenuOpen?: () => unknown;
-  onMenuClose?: () => unknown;
-  typeaheadInputText?: string;
-  menu?: MenuProps;
-  onClear?: () => void;
-  isLoading?: boolean;
-  menuOpenOffset?: number;
-  clickAwayRef?: ClickAwayRefType;
-  elevation?: ElevationType;
-});
-
-export type TypeaheadProps = ((BaseTypeaheadProps) & {
-  allowInternalFilter?: boolean;
-});
-
-const BaseTypeahead: Flow.AbstractComponent<BaseTypeaheadProps, HTMLInputElement> = React.forwardRef<HTMLInputElement, BaseTypeaheadProps>((
-  {
-    size = 'medium',
-    classNames,
-    placeholder = 'Select...',
-    onSelect,
-    onSearch,
-    onClear,
-    menu,
-    onMenuOpen,
-    onMenuClose,
-    typeaheadInputText = '',
-    isLoading,
-    menuOpenOffset = 1,
-    onFocus,
-    clickAwayRef,
-    elevation = 'modal',
-    ...inputProps
-  }: BaseTypeaheadProps,
-  ref,
-) => {
-  const menuOptions = menu?.options;
-
-  const {x, y, refs, strategy, context} = useFloating({
-    open: true,
-    strategy: 'absolute',
-    placement: 'bottom-start',
-    whileElementsMounted: autoUpdate,
-    middleware: [flip(), offset(parseInt(spaceXXSmall))],
-  });
-
-// @ts-ignore - TS2345 - Argument of type '(ReferenceType & ReferenceType) | null' is not assignable to parameter of type 'HTMLElement | null | undefined'.
-  const dropdownWidth = useReferenceElementWidth(refs.reference?.current);
-
-  const onMenuToggle = (isOpen: boolean) => {
-    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
-  };
-
-  return (
-    <ClickAway onChange={onMenuToggle} clickAwayRef={clickAwayRef}>
-      {({isOpen, onOpen, clickAway, boundaryRef, triggerRef}) => (
-        <div
-          data-testid="Typeahead"
-          className={classify(css.typeaheadContainer, classNames?.wrapper)}
-        >
-          <SearchInput
-            {...inputProps}
-            ref={ref}
-// @ts-ignore - TS2322 - Type '((node: ReferenceType | null) => void) & ((node: ReferenceType | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-            boxRef={mergeRefs([refs.setReference, triggerRef])}
-            size={size}
-            placeholder={placeholder}
-            value={typeaheadInputText}
-            classNames={{box: classNames?.box}}
-            isLoading={isLoading}
-            onChange={(e) => {
-              e.stopPropagation();
-              onSearch && onSearch(e);
-              if (e.target.value.length >= menuOpenOffset) {
-                !isOpen && onOpen();
-              } else {
-                clickAway();
-              }
-            }}
-            onFocus={(_e) => {
-              if (typeaheadInputText.length >= menuOpenOffset) {
-                !isOpen && onOpen();
-              } else {
-                clickAway();
-              }
-              onFocus?.(_e);
-            }}
-// @ts-ignore - TS2769 - No overload matches this call. | TS7006 - Parameter '_e' implicitly has an 'any' type.
-            onClear={(_e) => {
-              onClear?.();
-            }}
-          />
-          {isOpen &&
-            !isLoading &&
-            menu &&
-            menuOptions &&
-            !!menuOptions.length && (
-            <FloatingPortal>
-              <FloatingFocusManager
-                modal={false}
-                context={context}
-                returnFocus={false}
-// @ts-ignore - TS2322 - Type 'MutableRefObject<ReferenceType | null> & MutableRefObject<ReferenceType | null>' is not assignable to type 'number | MutableRefObject<HTMLElement | null> | undefined'.
-                initialFocus={refs.reference}
-              >
-                <div
-// @ts-ignore - TS2322 - Type '((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void)' is not assignable to type '{ current: HTMLElement | null | undefined; }'.
-                  ref={mergeRefs([refs.setFloating, boundaryRef])}
-                  className={css.menuWrapper}
-                  style={{
-                    position: strategy,
-                    top: y ?? spaceNone,
-                    left: x ?? spaceNone,
-                    /* NOTE(Sharad): The FloatingPortal renders the menu outside the normal DOM structure,
-                     so its parent is effectively the <body> element. This means the menu
-                     would otherwise default to the body's width. To support fluid width,
-                     we must manually set the dropdown width here; otherwise, it uses a fixed width.
-                     Also, Only treat menu as non-fluid if isFluid is strictly false, since default is true in menu and undefined means fluid. */
-                    ...(menu.isFluid !== false && {
-                      '--dropdown-width': dropdownWidth,
-                    }),
-                    '--menu-elevation': getElevationValue(elevation),
-                  }}
-                >
-                  <Menu
-                    {...menu}
-                    options={menuOptions}
-                    onSelect={(option, e) => {
-                      onSelect && onSelect(option, e);
-                      if (
-                      // option.keepMenuOpenOnOptionSelect - to allow the menu persist its open stat upon option selection in normal variant
-                        !option.keepMenuOpenOnOptionSelect &&
-                          (!menu.optionsVariant ||
-                            menu.optionsVariant === 'normal')
-                      ) {
-                        clickAway();
-                      }
-                    }}
-                    size={menu.size || size}
-                    onTabOut={clickAway}
-                  />
-                </div>
-              </FloatingFocusManager>
-            </FloatingPortal>
-          )}
-        </div>
-      )}
-    </ClickAway>
-  );
-});
-
-const StatefulTypeahead: Flow.AbstractComponent<BaseTypeaheadProps, HTMLInputElement> = React.forwardRef<HTMLInputElement, BaseTypeaheadProps>((
-  {
-    menu,
-    ...props
-  }: BaseTypeaheadProps,
-  ref,
-) => {
-  const {typeaheadInputText = ''} = props;
-  const [filteredOptions, setFilteredOptions] = React.useState(menu?.options);
-
-  React.useEffect(() => {
-    const optionsFiltered =
-      menu?.options &&
-      menu.options.filter((option) => {
-        if (!option.label || !typeaheadInputText) {
-          return true;
-        } else {
-          return (
-            option.label
-              .toLowerCase()
-              .indexOf(typeaheadInputText.toLowerCase()) !== -1
-          );
-        }
-      });
-    setFilteredOptions(optionsFiltered || []);
-  }, [typeaheadInputText, menu?.options]);
-
-  return (
-    <BaseTypeahead
-      {...props}
-      menu={{...menu, options: filteredOptions}}
-      ref={ref}
-    />
-  );
-});
-
-const StatelessTypeahead: Flow.AbstractComponent<BaseTypeaheadProps, HTMLInputElement> = React.forwardRef<HTMLInputElement, BaseTypeaheadProps>(
-  (props: BaseTypeaheadProps, ref) => (<BaseTypeahead {...props} ref={ref} />),
-);
-
-export const Typeahead: Flow.AbstractComponent<TypeaheadProps, HTMLInputElement> = React.forwardRef<HTMLInputElement, TypeaheadProps>((
-  {
-    allowInternalFilter = true,
-    ...props
-  }: TypeaheadProps,
-  ref,
-) => {
-  if (allowInternalFilter) {
-    return <StatefulTypeahead {...props} ref={ref} />;
-  } else {
-    return <StatelessTypeahead {...props} ref={ref} />;
-  }
-});

package/lib/components/Typeahead/index.ts

@@ -1,2 +0,0 @@
-export * from './SimpleTypeahead';
-export * from './Typeahead';

package/lib/components/WeekdayPicker/WeekdayPicker.stories.tsx

@@ -1,263 +0,0 @@
-import * as React from 'react';
-
-import type {WeekdayPickerProps} from './';
-import {WeekdayPicker} from './WeekdayPicker';
-
-
-export default {
-  title: 'Form Components/Weekday Picker',
-  component: WeekdayPicker,
-  tags: ['autodocs'],
-  argTypes: {
-    size: {
-      description: 'The size of the WeekdayPicker, either small or medium.',
-      control: {
-        type: 'radio',
-      },
-      options: ['small', 'medium'],
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    selectedWeekDays: {
-      description: 'The days that are selected by default.',
-      control: {type: 'object'},
-      table: {
-        type: {summary: 'Array<{ key: string, label: string }>'},
-      },
-    },
-    hiddenWeekDays: {
-      description: 'Days that should be hidden from the picker.',
-      control: {type: 'object'},
-      table: {
-        type: {summary: 'Array<string>'},
-      },
-    },
-    disabledWeekDays: {
-      description: 'Days that are disabled and cannot be selected.',
-      control: {type: 'object'},
-      table: {
-        type: {summary: 'Array<string>'},
-      },
-    },
-    customDayLabels: {
-      description: 'Custom labels for the days of the week.',
-      control: {type: 'object'},
-      table: {
-        type: {
-          summary:
-            'Array<{ key: string, label: string, secondaryLabel?: string }>',
-        },
-      },
-    },
-    showWeekends: {
-      description: 'Show or hide weekends (Saturday and Sunday).',
-      control: {type: 'boolean'},
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: true},
-      },
-    },
-    readOnly: {
-      description: 'If true, the picker becomes non-interactive and read-only.',
-      control: {type: 'boolean'},
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    disableMultiSelect: {
-      description: 'If true, only one day can be selected at a time.',
-      control: {type: 'boolean'},
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-    onChange: {
-      description: 'Callback function triggered when the selected days change.',
-      action: 'onChange',
-      table: {
-        type: {
-          summary:
-            '(selectedDays: Array<Weekday>, event?: SyntheticEvent<HTMLElement>) => void',
-        },
-      },
-    },
-    label: {
-      description: 'Optional label for the picker.',
-      control: {type: 'text'},
-      table: {
-        type: {summary: 'React.ReactNode'},
-      },
-    },
-    helperText: {
-      description: 'Optional helper text for the picker.',
-      control: {type: 'text'},
-      table: {
-        type: {summary: 'React.ReactNode'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle:
-        'Generates a WeekdayPicker component for selecting days of the week.',
-      description: {
-        component: `
-\`\`\`js
-import { WeekdayPicker } from "@spaced-out/ui-design-system/lib/components/WeekdayPicker";
-\`\`\`
-The \`WeekdayPicker\` component allows users to select one or multiple days of the week. It supports custom labels, disabled days, hidden days, and customizable size variants. It is also accessible, allowing for read-only mode, keyboard navigation, and ARIA support.
-
-- **Single Selection Mode**: When \`disableMultiSelect\` is set to true, only one day can be selected at a time, similar to a radio button group.
-- **Custom Labels**: You can provide custom day labels (e.g., localization).
-- **Disabled Days**: Certain days can be disabled from selection.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/WeekdayPicker/WeekdayPicker.jsx',
-    },
-  },
-};
-
-export const _WithWeekendDisabled = (args: WeekdayPickerProps) => {
-  const [selectedDays, setSelectedDays] = React.useState([]);
-
-  return (
-    <WeekdayPicker
-      {...args}
-      selectedWeekDays={selectedDays}
-// @ts-ignore - TS2345 - Argument of type 'Weekday[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
-      onChange={(days) => setSelectedDays(days)}
-    />
-  );
-};
-
-_WithWeekendDisabled.args = {
-  size: 'medium',
-  selectedWeekDays: [{key: 'mon', label: 'M'}],
-  disabledWeekDays: ['sun', 'sat'],
-  showWeekends: true,
-  label: 'Select your preferred weekdays',
-  helperText: 'Click to select multiple days. Weekends are disabled.',
-};
-
-export const _WithCustomLabels = (args: WeekdayPickerProps) => (<WeekdayPicker {...args} />);
-
-_WithCustomLabels.args = {
-  size: 'medium',
-  customDayLabels: [
-    {key: 'sun', label: 'Do'},
-    {key: 'mon', label: 'Lu'},
-    {key: 'tue', label: 'Ma'},
-    {key: 'wed', label: 'Mi'},
-    {key: 'thu', label: 'Ju'},
-    {key: 'fri', label: 'Vi'},
-    {key: 'sat', label: 'Sá'},
-  ],
-  showWeekends: true,
-};
-
-export const _WithoutWeekends = (args: WeekdayPickerProps) => (<WeekdayPicker {...args} />);
-
-_WithoutWeekends.args = {
-  size: 'medium',
-  showWeekends: false,
-};
-
-export const _ReadOnly = (args: WeekdayPickerProps) => (<WeekdayPicker {...args} />);
-
-_ReadOnly.args = {
-  readOnly: true,
-  selectedWeekDays: [
-    {key: 'mon', label: 'M'},
-    {key: 'wed', label: 'W'},
-    {key: 'fri', label: 'F'},
-  ],
-  showWeekends: true,
-};
-
-export const _MultipleSelection = (args: WeekdayPickerProps) => {
-  const [selectedDays, setSelectedDays] = React.useState([
-    {key: 'mon', label: 'M'},
-    {key: 'wed', label: 'W'},
-  ]);
-
-  return (
-    <WeekdayPicker
-      {...args}
-      selectedWeekDays={selectedDays}
-      onChange={(days) => setSelectedDays(days)}
-    />
-  );
-};
-
-_MultipleSelection.args = {
-  size: 'medium',
-  showWeekends: true,
-};
-
-export const _DisabledWeekDays = (args: WeekdayPickerProps) => {
-  const [selectedDays, setSelectedDays] = React.useState([
-    {key: 'wed', label: 'W'},
-  ]);
-
-  return (
-    <WeekdayPicker
-      {...args}
-      selectedWeekDays={selectedDays}
-      onChange={(days) => setSelectedDays(days)}
-    />
-  );
-};
-
-_DisabledWeekDays.args = {
-  size: 'medium',
-  showWeekends: true,
-  disabledWeekDays: ['tue', 'thu'],
-};
-
-export const _SingleSelection = (args: WeekdayPickerProps) => {
-  const [selectedDay, setSelectedDay] = React.useState([]);
-
-  return (
-    <WeekdayPicker
-      {...args}
-      selectedWeekDays={selectedDay}
-      disableMultiSelect
-// @ts-ignore - TS2345 - Argument of type 'Weekday[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
-      onChange={(days) => setSelectedDay(days)}
-    />
-  );
-};
-
-_SingleSelection.args = {
-  size: 'medium',
-  showWeekends: true,
-};
-
-export const _WithHiddenDays = (args: WeekdayPickerProps) => (<WeekdayPicker {...args} />);
-
-_WithHiddenDays.args = {
-  size: 'medium',
-  showWeekends: true,
-  hiddenWeekDays: ['tue', 'thu'],
-};
-
-export const _WithWeekdayNames = (args: WeekdayPickerProps) => (<WeekdayPicker {...args} />);
-
-_WithWeekdayNames.args = {
-  size: 'medium',
-  customDayLabels: [
-    {key: 'sun', label: 'S', secondaryLabel: 'Sun'},
-    {key: 'mon', label: 'M', secondaryLabel: 'Mon'},
-    {key: 'tue', label: 'T', secondaryLabel: 'Tue'},
-    {key: 'wed', label: 'W', secondaryLabel: 'Wed'},
-    {key: 'thu', label: 'T', secondaryLabel: 'Thu'},
-    {key: 'fri', label: 'F', secondaryLabel: 'Fri'},
-    {key: 'sat', label: 'S', secondaryLabel: 'Sat'},
-  ],
-};