@hyphen/hyphen-components 7.3.1 → 7.3.3

package/src/components/Table/Table.stories.tsx

@@ -3,7 +3,12 @@ import React, { useEffect, useState } from 'react';
 import { Table } from './Table';
 import { Button } from '../Button/Button';
 import { Badge } from '../Badge/Badge';
-import type { Column as ColumnType } from '../../types';
+import type {
+  Column as ColumnType,
+  Cell,
+  Row,
+  EventWithColumnKey,
+} from '../../types';
 
 const meta: Meta<typeof Table> = {
   title: 'Components/Table',
@@ -12,6 +17,13 @@ const meta: Meta<typeof Table> = {
 
 export default meta;
 
+type SortDirection = 'ascending' | 'descending';
+type SortedColumn = {
+  dataKey?: string;
+  sortDirection?: SortDirection;
+};
+type SortableRow = Record<string, string | number>;
+
 export const Column = () =>
   (() => {
     const codePreviewStyle = {
@@ -94,7 +106,7 @@ export const Column = () =>
       {
         heading: 'Type',
         dataKey: 'type',
-        render: (cell: any) => <code style={codePreviewStyle}>{cell}</code>,
+        render: (cell: string) => <code style={codePreviewStyle}>{cell}</code>,
       },
       { heading: 'Description', dataKey: 'description' },
     ];
@@ -109,12 +121,15 @@ export const CommonExample = () =>
       {
         heading: 'Customer',
         dataKey: 'customerInfo',
-        render: (_cell: any, row: any) => (
-          <div>
-            <div>{row.name}</div>
-            <div className="font-color-base">{row.email}</div>
-          </div>
-        ),
+        render: (_cell?: Cell, row?: Row) => {
+          const customerRow = row as { name?: string; email?: string } | undefined;
+          return (
+            <div>
+              <div>{customerRow?.name}</div>
+              <div className="font-color-base">{customerRow?.email}</div>
+            </div>
+          );
+        },
       },
       { heading: 'Phone', dataKey: 'phone', width: 125 },
       { heading: 'Plan', dataKey: 'plan', width: 125 },
@@ -164,31 +179,37 @@ export const Loading = () =>
   })();
 
 export const Sortable = () => {
-  // @ts-ignore
-  const sortDescending = (arrOfObj, key) =>
+  const sortDescending = (arrOfObj: SortableRow[], key: string) =>
     [...arrOfObj].sort((a, b) => (b[key] > a[key] ? 1 : -1));
-  // @ts-ignore
-  const sortAscending = (arrOfObj, key) =>
+  const sortAscending = (arrOfObj: SortableRow[], key: string) =>
     [...arrOfObj].sort((a, b) => (a[key] > b[key] ? 1 : -1));
-  const getNewSortDirection = (event: any, currentSortedColumn: any) => {
+  const getNewSortDirection = (
+    sortedKey: string,
+    currentSortedColumn: SortedColumn
+  ) => {
     if (
-      event.sortedKey === currentSortedColumn.dataKey &&
+      sortedKey === currentSortedColumn.dataKey &&
       currentSortedColumn.sortDirection === 'ascending'
     )
       return 'descending';
     return 'ascending';
   };
-  const initialData = [
+  const initialData: SortableRow[] = [
     { id: 1, color: 'red', flavor: 'vanilla' },
     { id: 2, color: 'green', flavor: 'strawberry' },
     { id: 3, color: 'blue', flavor: 'chocolate' },
   ];
-  const [sortedColumn, setSortedColumn] = useState<any>({});
-  const [tableData, setTableData] = useState(initialData);
-  const handleSort = (event: any) => {
-    const newSortDirection = getNewSortDirection(event, sortedColumn);
+  const [sortedColumn, setSortedColumn] = useState<SortedColumn>({});
+  const [tableData, setTableData] = useState<SortableRow[]>(initialData);
+  const handleSort = (event: EventWithColumnKey) => {
+    const sortedKey =
+      typeof event.sortedKey === 'string' ? event.sortedKey : undefined;
+    if (!sortedKey) {
+      return;
+    }
+    const newSortDirection = getNewSortDirection(sortedKey, sortedColumn);
     setSortedColumn({
-      dataKey: event.sortedKey,
+      dataKey: sortedKey,
       sortDirection: newSortDirection,
     });
   };
@@ -218,38 +239,45 @@ export const Sortable = () => {
 };
 
 export const SortablewithDefaultSortedColumn = () => {
-  // @ts-ignore
-  const sortDescending = (arrOfObj, key) =>
+  const sortDescending = (arrOfObj: SortableRow[], key: string) =>
     [...arrOfObj].sort((a, b) => (b[key] > a[key] ? 1 : -1));
-  // @ts-ignore
-  const sortAscending = (arrOfObj, key) =>
+  const sortAscending = (arrOfObj: SortableRow[], key: string) =>
     [...arrOfObj].sort((a, b) => (a[key] > b[key] ? 1 : -1));
-  const getNewSortDirection = (event: any, currentSortedColumn: any) => {
+  const getNewSortDirection = (
+    sortedKey: string,
+    currentSortedColumn: SortedColumn
+  ) => {
     if (
-      event.sortedKey === currentSortedColumn.dataKey &&
+      sortedKey === currentSortedColumn.dataKey &&
       currentSortedColumn.sortDirection === 'ascending'
     )
       return 'descending';
     return 'ascending';
   };
-  const initialData = [
+  const initialData: SortableRow[] = [
     { id: 1, color: 'red', flavor: 'vanilla' },
     { id: 2, color: 'green', flavor: 'strawberry' },
     { id: 3, color: 'blue', flavor: 'chocolate' },
   ];
-  const [sortedColumn, setSortedColumn] = useState<any>({
+  const [sortedColumn, setSortedColumn] = useState<SortedColumn>({
     dataKey: 'color',
     sortDirection: 'descending',
   });
-  const [tableData, setTableData] = useState([
-    ...(sortedColumn.sortDirecton === 'ascending'
-      ? sortAscending(initialData, sortedColumn.dataKey)
-      : sortDescending(initialData, sortedColumn.dataKey)),
+  const initialSortKey = sortedColumn.dataKey ?? 'color';
+  const [tableData, setTableData] = useState<SortableRow[]>([
+    ...(sortedColumn.sortDirection === 'ascending'
+      ? sortAscending(initialData, initialSortKey)
+      : sortDescending(initialData, initialSortKey)),
   ]);
-  const handleSort = (event: any) => {
-    const newSortDirection = getNewSortDirection(event, sortedColumn);
+  const handleSort = (event: EventWithColumnKey) => {
+    const sortedKey =
+      typeof event.sortedKey === 'string' ? event.sortedKey : undefined;
+    if (!sortedKey) {
+      return;
+    }
+    const newSortDirection = getNewSortDirection(sortedKey, sortedColumn);
     setSortedColumn({
-      dataKey: event.sortedKey,
+      dataKey: sortedKey,
       sortDirection: newSortDirection,
     });
   };
@@ -279,31 +307,37 @@ export const SortablewithDefaultSortedColumn = () => {
 };
 
 export const SortableAndLoading = () => {
-  // @ts-ignore
-  const sortDescending = (arrOfObj, key) =>
+  const sortDescending = (arrOfObj: SortableRow[], key: string) =>
     [...arrOfObj].sort((a, b) => (b[key] > a[key] ? 1 : -1));
-  // @ts-ignore
-  const sortAscending = (arrOfObj, key) =>
+  const sortAscending = (arrOfObj: SortableRow[], key: string) =>
     [...arrOfObj].sort((a, b) => (a[key] > b[key] ? 1 : -1));
-  const getNewSortDirection = (event: any, currentSortedColumn: any) => {
+  const getNewSortDirection = (
+    sortedKey: string,
+    currentSortedColumn: SortedColumn
+  ) => {
     if (
-      event.sortedKey === currentSortedColumn.dataKey &&
+      sortedKey === currentSortedColumn.dataKey &&
       currentSortedColumn.sortDirection === 'ascending'
     )
       return 'descending';
     return 'ascending';
   };
-  const initialData = [
+  const initialData: SortableRow[] = [
     { id: 1, color: 'red', flavor: 'vanilla' },
     { id: 2, color: 'green', flavor: 'strawberry' },
     { id: 3, color: 'blue', flavor: 'chocolate' },
   ];
-  const [sortedColumn, setSortedColumn] = useState<any>({});
-  const [tableData, setTableData] = useState(initialData);
-  const handleSort = (event: any) => {
-    const newSortDirection = getNewSortDirection(event, sortedColumn);
+  const [sortedColumn, setSortedColumn] = useState<SortedColumn>({});
+  const [tableData, setTableData] = useState<SortableRow[]>(initialData);
+  const handleSort = (event: EventWithColumnKey) => {
+    const sortedKey =
+      typeof event.sortedKey === 'string' ? event.sortedKey : undefined;
+    if (!sortedKey) {
+      return;
+    }
+    const newSortDirection = getNewSortDirection(sortedKey, sortedColumn);
     setSortedColumn({
-      dataKey: event.sortedKey,
+      dataKey: sortedKey,
       sortDirection: newSortDirection,
     });
   };
@@ -652,13 +686,25 @@ export const TruncateOverflow = () =>
 
 export const CustomActions = () =>
   (() => {
-    const renderFlavor = (cell: any, row: any, index: number) => {
-      const rows = [{ href: cell.href, name: cell.name, id: row.id, index }];
+    const renderFlavor = (cell?: Cell, row?: Row, index?: number) => {
+      const flavorCell = cell as { href?: string; name?: string } | undefined;
+      const flavorRow = row as { id?: number } | undefined;
+      const rows = [
+        {
+          href: flavorCell?.href ?? '',
+          name: flavorCell?.name ?? '',
+          id: flavorRow?.id ?? 0,
+          index,
+        },
+      ];
       const columns = [
         {
           heading: 'Url',
           dataKey: 'href',
-          render: (cell: any) => <a href={cell}>{cell}</a>,
+          render: (cell?: Cell) => {
+            const href = typeof cell === 'string' ? cell : '';
+            return <a href={href}>{href}</a>;
+          },
         },
         { heading: 'Name', dataKey: 'name' },
         { heading: 'ID', dataKey: 'id' },
@@ -672,7 +718,6 @@ export const CustomActions = () =>
       {
         heading: 'Based on the cell/row',
         dataKey: 'flavor',
-        // @ts-ignore
         render: renderFlavor,
       },
       { heading: 'Any custom JSX', render: () => <Button>Do anything</Button> },
@@ -706,7 +751,12 @@ export const EmptyCellPlaceholder = () =>
       {
         heading: 'Price',
         dataKey: 'price',
-        render: (cell: any) => (cell ? `$${cell}` : null),
+        render: (cell?: Cell) => {
+          if (typeof cell === 'number' || typeof cell === 'string') {
+            return cell ? `$${cell}` : null;
+          }
+          return null;
+        },
         emptyCellPlaceholder: '$0.00',
       },
     ];

package/src/components/TextInput/TextInput.tsx

@@ -261,3 +261,5 @@ export const TextInput: ForwardRefExoticComponent<TextInputProps> = forwardRef<
     );
   }
 );
+
+TextInput.displayName = 'TextInput';

package/src/components/TextInputInset/TextInputInset.tsx

@@ -259,3 +259,5 @@ export const TextInputInset: ForwardRefExoticComponent<TextInputInsetProps> =
       );
     }
   );
+
+TextInputInset.displayName = 'TextInputInset';

package/src/components/TextareaInputInset/TextareaInputInset.tsx

@@ -211,3 +211,5 @@ export const TextareaInputInset: ForwardRefExoticComponent<TextareaInputInsetPro
       );
     }
   );
+
+TextareaInputInset.displayName = 'TextareaInputInset';

package/src/components/TimePickerNative/TimePickerNative.stories.tsx

@@ -21,7 +21,6 @@ export const Default = () => {
         id="defaultTimePickerNative"
         name="defaultTimePickerNative"
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          console.log(event.target.value);
           setValue(event.target.value);
         }}
         label="Pick a Time"

package/src/components/Toast/Toast.store.ts

@@ -90,7 +90,7 @@ const createReducer =
     handlers: THandlers
   ) =>
   (state: TState = initialState, action: TAction) => {
-    if (handlers.hasOwnProperty(action.type)) {
+    if (Object.prototype.hasOwnProperty.call(handlers, action.type)) {
       // eslint-disable-line
       return handlers[action.type](state, action);
     }

package/src/components/Toast/Toast.stories.tsx

@@ -4,6 +4,7 @@ import { ToastContainer, ToastPosition, toast } from './';
 import { Button } from '../Button/Button';
 import { Table } from '../Table/Table';
 import { Box } from '../Box/Box';
+import { Cell, Column as ColumnType } from 'src/types';
 
 const meta: Meta<typeof ToastContainer> = {
   title: 'Components/Toast',
@@ -84,12 +85,12 @@ export const Column = () =>
         description: 'Whether to render a compact toast (smaller padding)',
       },
     ];
-    const columnConfig = [
+    const columnConfig: ColumnType[] = [
       { heading: 'Name', dataKey: 'name' },
       {
         heading: 'Type',
         dataKey: 'type',
-        render: (cell: any) => <code style={codePreviewStyle}>{cell}</code>,
+        render: (cell?: Cell) => <code style={codePreviewStyle}>{cell}</code>,
       },
       { heading: 'Description', dataKey: 'description' },
     ];

package/src/components/Toast/Toast.test.tsx

@@ -258,10 +258,11 @@ describe('Toast', () => {
     test('Async Success', async () => {
       render(<ToastContainer />);
 
-      const myPromise = new Promise(async (resolve) => {
+      const myPromise = new Promise((resolve) => {
         // eslint-disable-line no-async-promise-executor
-        await wait(1000);
-        resolve('yay');
+        wait(1000).then(() => {
+          resolve('yay');
+        });
       });
 
       act(() => {
@@ -287,10 +288,11 @@ describe('Toast', () => {
     test('Async Error', async () => {
       render(<ToastContainer />);
 
-      const myPromise = new Promise(async (_resolve, reject) => {
+      const myPromise = new Promise((_resolve, reject) => {
         // eslint-disable-line no-async-promise-executor
-        await wait(1000);
-        reject('boo'); // eslint-disable-line prefer-promise-reject-errors
+        wait(1000).then(() => {
+          reject('boo'); // eslint-disable-line prefer-promise-reject-errors
+        });
       });
 
       act(() => {

package/src/components/Toggle/Toggle.tsx

@@ -30,4 +30,6 @@ const Toggle = forwardRef<
   </TogglePrimitive.Root>
 ));
 
+Toggle.displayName = 'Toggle';
+
 export { Toggle };

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -54,6 +54,8 @@ const ToggleGroup = forwardRef<
   )
 );
 
+ToggleGroup.displayName = 'ToggleGroup';
+
 type ToggleGroupItemProps = React.ComponentPropsWithoutRef<
   typeof ToggleGroupPrimitive.Item
 > & {

package/src/docs/Colors.mdx

@@ -31,19 +31,6 @@ import designTokens from '@hyphen/hyphen-design-tokens/build/json/variables.json
       return acc;
     }, {})}
   />
-  <ColorItem
-    title="color-base-primary"
-    subtitle="Primary"
-    colors={Object.keys(designTokens.color.base.primary).reduce(
-      (acc, item, i) => {
-        acc[item] = Object.keys(designTokens.color.base.primary).map(
-          (g) => designTokens.color.base.primary[g].value
-        )[i];
-        return acc;
-      },
-      {}
-    )}
-  />
   <ColorItem
     title="color-base-red"
     subtitle="Red"

package/src/lib/getColumnKeys.ts

@@ -5,7 +5,7 @@ import { Column } from '../types';
 export const getColumnKeys = (columns: Column[]): Key[] => {
   const INTERNAL_KEY_PREFIX = 'columnKeyPrefix';
   const columnKeys: React.Key[] = [];
-  const keys: Record<any, boolean> = {};
+  const keys: Record<string, boolean> = {};
 
   columns.forEach((column) => {
     const { key, dataKey } = column || {};
@@ -15,10 +15,10 @@ export const getColumnKeys = (columns: Column[]): Key[] => {
 
     let mergedKey = key || shapedDataKey || INTERNAL_KEY_PREFIX;
 
-    while (keys[mergedKey as any]) {
+    while (keys[String(mergedKey)]) {
       mergedKey = `${mergedKey}_next`;
     }
-    keys[mergedKey as any] = true;
+    keys[String(mergedKey)] = true;
 
     columnKeys.push(mergedKey);
   });

package/src/lib/mergeRefs.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export function mergeRefs<T = any>(
+export function mergeRefs<T = unknown>(
   refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null>
 ): React.RefCallback<T> {
   return (value) => {

package/src/lib/tokens.ts

@@ -93,7 +93,7 @@ export const BORDER_COLOR_OPTIONS = Object.keys(
 // export const BORDER_COLOR_VALUES = designTokens.color.border;
 
 export const FONT_SIZE_OPTIONS = Object.keys(
-  (designTokens.size as any)['font-size']
+  designTokens.size['font-size']
 ) as FontSize[];
 // export const FONT_SIZE_VALUES = Object.values(designTokens.size['font-size']);
 
@@ -103,7 +103,7 @@ export const FONT_FAMILY_OPTIONS = Object.keys(
 // export const FONT_FAMILY_VALUES = designTokens.assets['font-family'];
 
 export const FONT_WEIGHT_OPTIONS = Object.keys(
-  (designTokens.size as any)['font-weight']
+  designTokens.size['font-weight']
 ) as FontWeight[];
 // export const FONT_WEIGHT_VALUES = designTokens.size['font-weight'];
 
@@ -112,7 +112,7 @@ export const HEADING_SIZE_OPTIONS = Object.keys(
 ) as HeadingSize[];
 
 export const HEIGHT_OPTIONS = Object.keys(
-  (designTokens.size as any).dimension
+  designTokens.size.dimension
 ) as HeightSize[];
 // export const HEIGHT_VALUES = designTokens.size.dimension;
 
@@ -127,7 +127,7 @@ export const SPACING_OPTIONS = Object.keys(
 // export const SPACING_VALUES = designTokens.size.spacing;
 
 export const WIDTH_OPTIONS = Object.keys(
-  (designTokens.size as any).dimension
+  designTokens.size.dimension
 ) as WidthSize[];
 // export const WIDTH_VALUES = designTokens.size.dimension;
 

package/dist/components/Alert/Alert.constants.d.ts

@@ -1,8 +0,0 @@
-import { IconName } from '../../types';
-import { AlertVariant } from './Alert.types';
-export declare const ALERT_VARIANTS: AlertVariant[];
-export declare const ALERT_ICONS_MAP: {
-    [key in AlertVariant]: {
-        icon: IconName;
-    };
-};

package/dist/components/Alert/Alert.d.ts

@@ -1,42 +0,0 @@
-import React, { ReactNode, MouseEvent, KeyboardEvent } from 'react';
-import { AlertVariant } from './Alert.types';
-export interface AlertProps {
-    /**
-     * Custom class to apply to the alert.
-     */
-    className?: string;
-    /**
-     * Whether the alert as an icon that corresponds to its variant (Success, warning, etc.).
-     */
-    hasIcon?: boolean;
-    /**
-     * Renders a version of the alert with smaller padding.
-     */
-    isCompact?: boolean;
-    /**
-     * @deprecated Use children instead. The text message or ReactNode to be rendered in the alert.
-     */
-    message?: string | ReactNode;
-    /**
-     * Whether the alert can be closed by the user. If `true` it will render
-     * the 'close' icon on the right hand side of the alert.
-     */
-    onClose?: (event: MouseEvent<HTMLOrSVGElement> | KeyboardEvent<HTMLSpanElement>) => void;
-    /**
-     * A render function that returns JSX if preferred over a static ReactNode or string.
-     */
-    render?: () => ReactNode;
-    /**
-     * The title for the alert.
-     */
-    title?: string;
-    /**
-     * The type/color of the alert to show.
-     */
-    variant?: AlertVariant;
-    /**
-     * Additional props to be spread to rendered element
-     */
-    [x: string]: any;
-}
-export declare const Alert: React.NamedExoticComponent<AlertProps>;

package/dist/components/Alert/Alert.stories.d.ts

@@ -1,12 +0,0 @@
-import { Alert } from './Alert';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-declare const meta: Meta<typeof Alert>;
-export default meta;
-type Story = StoryObj<typeof Alert>;
-export declare const Overview: Story;
-export declare const Compact: Story;
-export declare const WithCustomContent: Story;
-export declare const Variants: Story;
-export declare const ClosableAlert: () => React.JSX.Element;
-export declare const Closable: Story;

package/dist/components/Alert/Alert.types.d.ts

@@ -1,7 +0,0 @@
-import { BackgroundColor, FontColor, IconName } from '../../types';
-export type AlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'default';
-export type AlertAttributes = {
-    icon: IconName;
-    color: FontColor;
-    background: BackgroundColor;
-};

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -1,3 +0,0 @@
-import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
-declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;
-export { AspectRatio };

package/dist/components/AspectRatio/AspectRatio.stories.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { Meta } from '@storybook/react-vite';
-import { AspectRatio } from './AspectRatio';
-declare const meta: Meta<typeof AspectRatio>;
-export default meta;
-export declare const Usage: () => React.JSX.Element;

package/dist/components/Badge/Badge.d.ts

@@ -1,24 +0,0 @@
-import React, { ReactNode } from 'react';
-import { FontSize, BaseSpacing, ResponsiveProp } from '../../types';
-import { BoxProps } from '../Box/Box';
-export type BadgeSize = 'sm' | 'md' | 'lg';
-export type BadgeVariant = 'light-grey' | 'dark-grey' | 'inverse' | 'green' | 'yellow' | 'blue' | 'red' | 'purple' | 'hyphen';
-export type BadgeSizeAttributes = {
-    fontSize: FontSize;
-    padding: BaseSpacing;
-};
-export interface BadgeProps extends BoxProps {
-    /**
-     * @deprecated Use children instead. The text message or ReactNode to be rendered in the badge.
-     */
-    message?: string | ReactNode;
-    /**
-     * The size of the button.
-     */
-    size?: BadgeSize | ResponsiveProp<BadgeSize>;
-    /**
-     * The type/color of the badge to show.
-     */
-    variant?: BadgeVariant;
-}
-export declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Badge/Badge.stories.d.ts

@@ -1,8 +0,0 @@
-import { Badge } from './Badge';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-declare const meta: Meta<typeof Badge>;
-export default meta;
-type Story = StoryObj<typeof Badge>;
-export declare const Overview: Story;
-export declare const Variants: Story;
-export declare const Sizes: Story;