@hyphen/hyphen-components 2.20.0 → 2.22.0

package/dist/lib/tokens.d.ts

@@ -1,5 +1,5 @@
 import { BorderRadiusSize, Breakpoint, BreakpointSizeWithBase } from '../types';
-export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "contact" | "copy-document" | "dashboard" | "database" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-env" | "logo-link" | "logo-toggle" | "mail" | "menu" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
+export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "contact" | "copy-document" | "dashboard" | "database" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-env" | "logo-link" | "logo-toggle" | "mail" | "menu" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
 export declare const BORDER_RADIUS_OPTIONS: BorderRadiusSize[];
 export declare const BORDER_SIZE_OPTIONS: ("0" | "sm" | "md" | "lg")[];
 export declare const BREAKPOINT_OPTIONS: BreakpointSizeWithBase[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "2.20.0",
+  "version": "2.22.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -121,7 +121,7 @@
     "@rollup/rollup-linux-x64-gnu": "^4.21.2"
   },
   "dependencies": {
-    "@hyphen/hyphen-design-tokens": "^4.13.0",
+    "@hyphen/hyphen-design-tokens": "^4.14.0",
     "@popperjs/core": "^2.11.8",
     "@types/react-modal": "^3.16.3",
     "classnames": "^2.5.1",

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useBreakpoint/useBreakpoint';
+export * from './useIsMobile/useIsMobile';
 export * from './useIsomorphicLayoutEffect/useIsomorphicLayouEffect';
 export * from './useOpenClose/useOpenClose';
 export * from './useTheme/useTheme';

package/src/hooks/useIsMobile/useIsMobile.mdx

@@ -0,0 +1,12 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import * as Stories from './useIsMobile.stories';
+
+<Meta of={Stories} />
+
+# useIsMobile
+
+The `useIsMobile` returns a boolean of whether `window.innerWidth` is greater than the minimum width of the `desktop` breakpoint.
+
+## Basic Usage
+
+<Canvas isExpanded of={Stories.BasicUsage} />

package/src/hooks/useIsMobile/useIsMobile.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { ResponsiveProvider } from '../../components/ResponsiveProvider/ResponsiveProvider';
+import { useIsMobile } from '../useIsMobile/useIsMobile';
+
+const meta: Meta<typeof useIsMobile> = {
+  title: 'Hooks/useIsMobile',
+};
+
+export default meta;
+
+export const BasicUsage = () =>
+  (() => {
+    const App = () => {
+      const isMobile = useIsMobile();
+      return (
+        <div>
+          <p>isMobile: {isMobile ? '✅ TRUE' : '❌ FALSE'}</p>
+        </div>
+      );
+    };
+    return (
+      <ResponsiveProvider>
+        <App />
+      </ResponsiveProvider>
+    );
+  })();

package/src/hooks/useIsMobile/useIsMobile.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useIsMobile } from './useIsMobile';
+import { BREAKPOINTS } from '../../lib/tokens';
+
+const UseIsMobileExample = () => {
+  const isMobile = useIsMobile();
+
+  return <div>{isMobile ? 'is mobile' : 'not mobile'}</div>;
+};
+
+describe('useIsMobile hook', () => {
+  beforeEach(() => {
+    // Mock window.matchMedia
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation((query) => ({
+        matches: query.includes('max-width'),
+        media: query,
+        onchange: null,
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      })),
+    });
+  });
+
+  test('renders with initial state', () => {
+    const { getByText } = render(<UseIsMobileExample />);
+    expect(getByText('not mobile')).toBeInTheDocument();
+  });
+
+  test('renders as mobile when window width is less than MOBILE_BREAKPOINT', () => {
+    const desktopBreakpoint = BREAKPOINTS.find((b) => b.name === 'desktop');
+    window.innerWidth =
+      (desktopBreakpoint ? desktopBreakpoint.minWidth : 992) - 1;
+    const { getByText } = render(<UseIsMobileExample />);
+    expect(getByText('is mobile')).toBeInTheDocument();
+  });
+
+  test('renders as not mobile when window width is greater than MOBILE_BREAKPOINT', () => {
+    const desktopBreakpoint = BREAKPOINTS.find((b) => b.name === 'desktop');
+    window.innerWidth = desktopBreakpoint ? desktopBreakpoint.minWidth : 992;
+    const { getByText } = render(<UseIsMobileExample />);
+    expect(getByText('not mobile')).toBeInTheDocument();
+  });
+});

package/src/hooks/useIsMobile/useIsMobile.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { BREAKPOINTS } from '../../lib/tokens';
+
+const desktopBreakpoint = BREAKPOINTS.find((b) => b.name === 'desktop');
+const MOBILE_BREAKPOINT = desktopBreakpoint ? desktopBreakpoint.minWidth : 0; // min width in pixels
+
+export function useIsMobile(): Boolean {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return !!isMobile;
+}