@hyphen/hyphen-components 2.9.0

package/src/hooks/useBreakpoint/useBreakpoint.mdx

@@ -0,0 +1,26 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import * as Stories from './useBreakpoint.stories';
+
+<Meta of={Stories} />
+
+# useBreakpoint
+
+The `useBreakpoint` returns useful states based on the window innerWidth and hyphen-component [breakpoints]().
+
+The hook will return a `BreakpointState` object with the following shape:
+
+```
+{
+  isPhone: boolean,
+  isTablet: boolean,
+  isDesktop: boolean,
+  isHd: boolean,
+  activeBreakpoint: { name: BreakpointName, minWidth: number },
+}
+```
+
+**NOTE:** This hook relies on `ResponsiveContext`, so your app must be wrapped in the [`ResponsiveProvider`]() to provide window size context to all children components.
+
+## Basic Usage
+
+<Canvas isExpanded of={Stories.BasicUsage} />

package/src/hooks/useBreakpoint/useBreakpoint.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { ResponsiveProvider } from '../../components/ResponsiveProvider/ResponsiveProvider';
+import { useBreakpoint } from './useBreakpoint';
+
+const meta: Meta<typeof useBreakpoint> = {
+  title: 'Hooks/useBreakpoint',
+};
+
+export default meta;
+
+export const BasicUsage = () =>
+  (() => {
+    const App = () => {
+      const { isPhone, isTablet, isDesktop, isHd } = useBreakpoint();
+      return (
+        <div>
+          <p>phone: {isPhone ? '✅' : '❌'}</p>
+          <p>tablet: {isTablet ? '✅' : '❌'}</p>
+          <p>desktop: {isDesktop ? '✅' : '❌'}</p>
+          <p>hd: {isHd ? '✅' : '❌'}</p>
+        </div>
+      );
+    };
+    return (
+      <ResponsiveProvider>
+        <App />
+      </ResponsiveProvider>
+    );
+  })();

package/src/hooks/useBreakpoint/useBreakpoint.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useBreakpoint } from './useBreakpoint';
+
+const UseBreakpointExample = () => {
+  const { activeBreakpoint } = useBreakpoint();
+
+  return <button type="button">{activeBreakpoint.name}</button>;
+};
+
+describe('initial state', () => {
+  test('the component renders with the default breakpoint (jest jsdom)', () => {
+    const { getByRole } = render(<UseBreakpointExample />);
+
+    const myButton = getByRole('button');
+
+    expect(myButton).toHaveTextContent('base');
+  });
+});

package/src/hooks/useBreakpoint/useBreakpoint.ts

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { BREAKPOINTS } from '../../lib/tokens';
+import { Breakpoint } from '../../types';
+import { useWindowSize } from '../useWindowSize/useWindowSize';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayouEffect';
+
+const defaultBreakpoint: Breakpoint = { name: 'base', minWidth: 0 };
+
+export interface BreakpointState {
+  isPhone: boolean;
+  isTablet: boolean;
+  isDesktop: boolean;
+  isHd: boolean;
+  activeBreakpoint: Breakpoint;
+}
+
+export const useBreakpoint = (): BreakpointState => {
+  const windowSize = useWindowSize();
+
+  const [breakpoint, setBreakpoint] = useState<Breakpoint>({
+    ...defaultBreakpoint,
+  });
+
+  useIsomorphicLayoutEffect(() => {
+    const sortedBreakpoints = [...BREAKPOINTS].sort(
+      (a, b) => b.minWidth - a.minWidth
+    );
+    const activeBreakpoint =
+      windowSize &&
+      sortedBreakpoints.find(
+        (b) => b.minWidth <= (windowSize.innerWidth as number)
+      );
+
+    setBreakpoint(activeBreakpoint || { ...defaultBreakpoint });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    windowSize.innerWidth,
+    windowSize.innerHeight,
+    windowSize.outerWidth,
+    windowSize.outerHeight,
+  ]);
+
+  return {
+    isPhone: breakpoint.name === 'base',
+    isTablet: breakpoint.name === 'tablet',
+    isDesktop: breakpoint.name === 'desktop',
+    isHd: breakpoint.name === 'hd',
+    activeBreakpoint: breakpoint,
+  };
+};

package/src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayouEffect.ts

@@ -0,0 +1,5 @@
+import { useLayoutEffect, useEffect } from 'react';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/src/hooks/useOpenClose/useOpenClose.mdx

@@ -0,0 +1,15 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import { useOpenClose } from './useOpenClose';
+import * as Stories from './useOpenClose.stories';
+
+<Meta of={Stories} />
+
+# useOpenClose
+
+The `useOpenClose` hook helps handle common open, close, or toggle scenarios. It can be used to control components such as `Modal`, `MediaModal`, `Drawer`, `Details` and even `Popover`.
+
+<Canvas withSource="open" of={Stories.BasicUsage} />
+
+## Parameters
+
+<ArgTypes of={Stories.BasicUsage} />

package/src/hooks/useOpenClose/useOpenClose.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { UseOpenCloseProps, useOpenClose } from './useOpenClose';
+import { Button } from '../../components/Button/Button';
+import { Box } from '../../components/Box/Box';
+import { Popover } from '../../components/Popover/Popover';
+
+const meta: Meta<typeof useOpenClose> = {
+  title: 'Hooks/useOpenClose',
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+export default meta;
+
+export const BasicUsage: React.FC<UseOpenCloseProps> = () => {
+  const { isOpen, handleOpen, handleClose } = useOpenClose();
+  const popoverContent = (
+    <>
+      <Box padding="lg" gap="md">
+        <Box as="p">Hello!</Box>
+      </Box>
+    </>
+  );
+  return (
+    <Popover
+      placement="right-end"
+      content={popoverContent}
+      isOpen={isOpen}
+      onClickOutside={handleClose}
+      contentContainerProps={{
+        padding: 'sm',
+      }}
+    >
+      <Button variant="primary" type="button" onClick={handleOpen}>
+        Open Popover
+      </Button>
+    </Popover>
+  );
+};

package/src/hooks/useOpenClose/useOpenClose.test.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { fireEvent, screen, render } from '@testing-library/react';
+import { useOpenClose, UseOpenCloseProps } from './useOpenClose';
+import { Details } from '../../components/Details/Details';
+
+const mockedOnOpen = jest.fn(() => null);
+const mockedOnClose = jest.fn(() => null);
+
+const UseOpenCloseExample = (props: UseOpenCloseProps) => {
+  const { isOpen, handleToggle } = useOpenClose({ ...props });
+
+  return (
+    <Details isOpen={isOpen}>
+      <Details.Summary
+        isDetailsOpen={isOpen}
+        onToggle={handleToggle}
+        display="inline"
+      >
+        Details Summary
+      </Details.Summary>
+      <div data-testid="details-content">
+        We are on a mission to stop climate change before we reach an
+        irreversible tipping point.
+      </div>
+    </Details>
+  );
+};
+
+describe('useOpenClose', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe('initial state', () => {
+    test('component does not render the disclosure by default', () => {
+      const { getByText, getByTestId } = render(<UseOpenCloseExample />);
+
+      const myButton = getByText('Details Summary');
+
+      expect(myButton).toBeInTheDocument();
+      expect(getByTestId('details-content')).not.toBeVisible();
+    });
+    test('component shows and hides the disclosure when toggle is pressed', () => {
+      render(<UseOpenCloseExample />);
+
+      fireEvent.click(screen.getByText('Details Summary'));
+      expect(screen.getByTestId('details-content')).toBeVisible();
+
+      fireEvent.click(screen.getByText('Details Summary'));
+      expect(screen.getByTestId('details-content')).not.toBeVisible();
+    });
+  });
+
+  describe('callbacks', () => {
+    test('onOpen callback is called when toggle is run', () => {
+      render(<UseOpenCloseExample onOpen={mockedOnOpen} />);
+
+      fireEvent.click(screen.getByText('Details Summary'));
+      expect(screen.getByTestId('details-content')).toBeVisible();
+
+      expect(mockedOnOpen).toHaveBeenCalledTimes(1);
+    });
+    test('onClose callback is called when toggle is run', () => {
+      render(<UseOpenCloseExample onClose={mockedOnClose} defaultIsOpen />);
+
+      expect(screen.getByTestId('details-content')).toBeVisible();
+      fireEvent.click(screen.getByText('Details Summary'));
+      expect(screen.getByTestId('details-content')).not.toBeVisible();
+      expect(mockedOnClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('controlled', () => {
+    test('does not close when toggle is called when isOpen', () => {
+      render(<UseOpenCloseExample isOpen />);
+
+      fireEvent.click(screen.getByText('Details Summary'));
+      expect(screen.getByTestId('details-content')).toBeVisible();
+    });
+    test('calls onClose, but does not call onOpen when isOpen', () => {
+      render(
+        <UseOpenCloseExample
+          isOpen
+          onOpen={mockedOnOpen}
+          onClose={mockedOnClose}
+        />
+      );
+
+      fireEvent.click(screen.getByText('Details Summary'));
+      expect(mockedOnClose).toHaveBeenCalledTimes(1);
+      expect(mockedOnOpen).toHaveBeenCalledTimes(0);
+      fireEvent.click(screen.getByText('Details Summary'));
+      expect(mockedOnClose).toHaveBeenCalledTimes(2);
+      expect(mockedOnOpen).toHaveBeenCalledTimes(0);
+    });
+    test('does not open when toggle is called and isOpen is false', () => {
+      render(<UseOpenCloseExample isOpen={false} />);
+
+      fireEvent.click(screen.getByText('Details Summary'));
+      expect(screen.getByTestId('details-content')).not.toBeVisible();
+    });
+    test('calls onOpen, but does not call onClose when isOpen is false', () => {
+      render(
+        <UseOpenCloseExample
+          isOpen={false}
+          onOpen={mockedOnOpen}
+          onClose={mockedOnClose}
+        />
+      );
+
+      fireEvent.click(screen.getByText('Details Summary'));
+      expect(mockedOnOpen).toHaveBeenCalledTimes(1);
+      expect(mockedOnClose).toHaveBeenCalledTimes(0);
+      fireEvent.click(screen.getByText('Details Summary'));
+      expect(mockedOnOpen).toHaveBeenCalledTimes(2);
+      expect(mockedOnClose).toHaveBeenCalledTimes(0);
+    });
+  });
+});

package/src/hooks/useOpenClose/useOpenClose.tsx

@@ -0,0 +1,95 @@
+import { useCallback, useState } from 'react';
+
+export interface UseOpenCloseProps {
+  /**
+   * Initial visibility of the component
+   */
+  defaultIsOpen?: boolean;
+  /**
+   * If defined, visibility of the component is assumed to be controlled
+   */
+  isOpen?: boolean;
+  /**
+   * Callback function when component is closed
+   * @returns void
+   */
+  onClose?: () => void;
+  /**
+   * Callback function when component is opened
+   * @returns void
+   */
+  onOpen?: () => void;
+}
+
+export interface UseOpenCloseState {
+  /**
+   * If true, sets the controlled component to its visible state
+   */
+  isOpen: boolean;
+  /**
+   * Callback function to set a falsy value for the `isOpen` parameter.
+   */
+  handleClose: () => void;
+  /**
+   * Callback function to set a truthy value for the `isOpen` parameter.
+   */
+  handleOpen: () => void;
+  /**
+   * Callback function to toggle the value of the `isOpen` parameter.
+   */
+  handleToggle: () => void;
+}
+
+export const useOpenClose = (
+  props: UseOpenCloseProps = {}
+): UseOpenCloseState => {
+  const {
+    defaultIsOpen,
+    isOpen: isOpenProp,
+    onClose: onCloseProp,
+    onOpen: onOpenProp,
+  } = props;
+
+  const openCallback = useCallback(() => {
+    onOpenProp?.();
+  }, [onOpenProp]);
+
+  const closeCallback = useCallback(() => {
+    onCloseProp?.();
+  }, [onCloseProp]);
+
+  const [isOpenState, setIsOpen] = useState(defaultIsOpen || false);
+
+  const isOpen = isOpenProp !== undefined ? isOpenProp : isOpenState;
+
+  const isControlled = isOpenProp !== undefined;
+
+  const handleClose = useCallback(() => {
+    if (!isControlled) {
+      setIsOpen(false);
+    }
+    closeCallback?.();
+  }, [isControlled, closeCallback]);
+
+  const handleOpen = useCallback(() => {
+    if (!isControlled) {
+      setIsOpen(true);
+    }
+    openCallback?.();
+  }, [isControlled, openCallback]);
+
+  const handleToggle = useCallback(() => {
+    if (isOpen) {
+      handleClose();
+    } else {
+      handleOpen();
+    }
+  }, [isOpen, handleOpen, handleClose]);
+
+  return {
+    isOpen,
+    handleClose,
+    handleOpen,
+    handleToggle,
+  };
+};

package/src/hooks/useWindowSize/useWindowSize.mdx

@@ -0,0 +1,25 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import * as Stories from './useWindowSize.stories';
+
+<Meta of={Stories} />
+
+# useWindowSize
+
+The `useWindowSize` returns useful states based on the window innerWidth and hyphen-component [breakpoints]().
+
+The hook will return a `BreakpointState` object with the following shape:
+
+```
+{
+  innerWidth: number,
+  innerHeight: number,
+  outerWidth: number,
+  outerHeight: number,
+}
+```
+
+**NOTE:** This hook relies on `ResponsiveContext`, so your app must be wrapped in the [`ResponsiveProvider`]() to provide window size context to all children components.
+
+## Basic Usage
+
+<Canvas isExpanded of={Stories.BasicUsage} />

package/src/hooks/useWindowSize/useWindowSize.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { useWindowSize } from './useWindowSize';
+import { Box } from '../../components/Box/Box';
+import { ResponsiveProvider } from '../../components/ResponsiveProvider/ResponsiveProvider';
+
+const meta: Meta<typeof useWindowSize> = {
+  title: 'Hooks/useWindowSize',
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+export default meta;
+
+export const BasicUsage = () =>
+  (() => {
+    const App = () => {
+      const { innerWidth, innerHeight, outerWidth, outerHeight } =
+        useWindowSize();
+      return (
+        <Box gap="md">
+          <p>Inner Width: {innerWidth}</p>
+          <p>Inner Height: {innerHeight}</p>
+          <p>Outer Width: {outerWidth}</p>
+          <p>Outer Height: {outerHeight}</p>
+        </Box>
+      );
+    };
+    return (
+      <ResponsiveProvider>
+        <App />
+      </ResponsiveProvider>
+    );
+  })();

package/src/hooks/useWindowSize/useWindowSize.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ResponsiveContext } from '../../components/ResponsiveProvider/ResponsiveProvider';
+
+export interface HookWindowSize {
+  innerWidth?: number;
+  innerHeight?: number;
+  outerWidth?: number;
+  outerHeight?: number;
+}
+export const useWindowSize = (): HookWindowSize => {
+  const { innerWidth, innerHeight, outerHeight, outerWidth, isCreated } =
+    React.useContext(ResponsiveContext);
+
+  if (isCreated) {
+    return {
+      innerHeight,
+      innerWidth,
+      outerHeight,
+      outerWidth,
+    };
+  }
+
+  return {};
+};

package/src/index.ts

@@ -0,0 +1,48 @@
+export * from './components/Alert/Alert';
+export * from './components/Badge/Badge';
+export * from './components/Box/Box';
+export * from './components/Button/Button';
+export * from './components/Card/Card';
+export * from './components/CheckboxInput/components/Checkbox';
+export * from './components/CheckboxInput/CheckboxInput';
+export * from './components/DateInput/DateInput';
+export * from './components/DatePicker/DatePicker';
+export * from './components/Details/Details';
+export * from './components/Details/DetailsSummary';
+export * from './components/Drawer/Drawer';
+export * from './components/FormControl/FormControl';
+export * from './components/Formik/FormikCheckboxInput/FormikCheckboxInput';
+export * from './components/Formik/FormikRadioGroup/FormikRadioGroup';
+export * from './components/Formik/FormikSelectInput/FormikSelectInput';
+export * from './components/Formik/FormikSelectInputInset/FormikSelectInputInset';
+export * from './components/Formik/FormikTextareaInputInset/FormikTextareaInputInset';
+export * from './components/Formik/FormikTextInputInset/FormikTextInputInset';
+export * from './components/Formik/FormikSelectInputNative/FormikSelectInputNative';
+export * from './components/Formik/FormikTextInput/FormikTextInput';
+export * from './components/Formik/FormikTextareaInput/FormikTextareaInput';
+export * from './components/Formik/FormikTimePicker/FormikTimePicker';
+export * from './components/Formik/FormikTimePickerNative/FormikTimePickerNative';
+export * from './components/Formik/FormikToggle/FormikToggle';
+export * from './components/FormLabel/FormLabel';
+export * from './components/Heading/Heading';
+export * from './components/Icon/Icon';
+export * from './components/Modal/Modal';
+export * from './components/Pagination/Pagination';
+export * from './components/Popover/Popover';
+export * from './components/RadioGroup/RadioGroup';
+export * from './components/ResponsiveProvider/ResponsiveProvider';
+export * from './components/SelectInput/SelectInput';
+export * from './components/SelectInputInset/SelectInputInset';
+export * from './components/SelectInputNative/SelectInputNative';
+export * from './components/Spinner/Spinner';
+export * from './components/Table/Table';
+export * from './components/TextareaInput/TextareaInput';
+export * from './components/TextareaInputInset/TextareaInputInset';
+export * from './components/TextInput/TextInput';
+export * from './components/TextInputInset/TextInputInset';
+export * from './components/ThemeProvider/ThemeProvider';
+export * from './components/TimePicker/TimePicker';
+export * from './components/TimePickerNative/TimePickerNative';
+export * from './components/Toast';
+export * from './components/Toggle/Toggle';
+export * from './hooks';