@hyphen/hyphen-components 2.22.0 → 2.23.0

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './components/Button/Button';
 export * from './components/Card/Card';
 export * from './components/CheckboxInput/components/Checkbox';
 export * from './components/CheckboxInput/CheckboxInput';
+export * from './components/Collapsible/Collapsible';
 export * from './components/DateInput/DateInput';
 export * from './components/DatePicker/DatePicker';
 export * from './components/Details/Details';

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" | "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 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-down" | "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" | "dock-left" | "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" | "logout" | "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.22.0",
+  "version": "2.23.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -65,13 +65,13 @@
     "@chromatic-com/storybook": "^1.8.0",
     "@semantic-release/commit-analyzer": "^11.1.0",
     "@size-limit/preset-small-lib": "^11.1.4",
-    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-essentials": "^8.4.2",
     "@storybook/addon-interactions": "^8.3.5",
     "@storybook/addon-themes": "^8.2.9",
     "@storybook/blocks": "^8.2.9",
     "@storybook/manager-api": "^8.2.9",
     "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
+    "@storybook/react-vite": "^8.4.2",
     "@storybook/test": "^8.3.5",
     "@storybook/theming": "^8.2.9",
     "@testing-library/jest-dom": "^6.5.0",
@@ -79,6 +79,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@tsconfig/recommended": "^1.0.7",
     "@tsconfig/vite-react": "^3.0.2",
+    "@types/node": "^22.9.0",
     "@types/react": "^18.3.5",
     "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^18.3.0",
@@ -121,8 +122,9 @@
     "@rollup/rollup-linux-x64-gnu": "^4.21.2"
   },
   "dependencies": {
-    "@hyphen/hyphen-design-tokens": "^4.14.0",
+    "@hyphen/hyphen-design-tokens": "^4.17.0",
     "@popperjs/core": "^2.11.8",
+    "@radix-ui/react-collapsible": "^1.1.1",
     "@types/react-modal": "^3.16.3",
     "classnames": "^2.5.1",
     "date-fns": "^2.16.1",

package/src/components/Collapsible/Collapsible.mdx

@@ -0,0 +1,21 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { Collapsible, CollapsibleTrigger } from './Collapsible';
+import * as Stories from './Collapsible.stories';
+
+<Meta of={Stories} />
+
+# Collapsible
+
+Collapsible components are used to hide or show content based on user interaction. 
+
+This component is extended from [Radix](https://www.radix-ui.com/primitives/docs/components/collapsible).
+
+[API Reference](https://www.radix-ui.com/primitives/docs/components/collapsible#api-reference)
+
+<Canvas of={Stories.Uncontrolled} />
+
+## Controlled
+
+The `isOpen` prop can be used to control the state of the collapsible component.
+
+<Canvas of={Stories.Controlled} />

package/src/components/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from './Collapsible';
+import { Button } from '../Button/Button';
+import { Box } from '../Box/Box';
+import { userEvent, within, expect } from '@storybook/test';
+
+const meta: Meta<typeof Collapsible> = {
+  title: 'Components/Collapsible',
+  component: Collapsible,
+};
+
+export default meta;
+type Story = StoryObj<typeof Collapsible>;
+
+export const Uncontrolled = () => (
+  <Collapsible>
+    <CollapsibleTrigger asChild>
+      <Button variant="primary">Can I use this in my project?</Button>
+    </CollapsibleTrigger>
+    <CollapsibleContent>
+      Yes. Free to use for personal and commercial projects. No attribution
+      required.
+    </CollapsibleContent>
+  </Collapsible>
+);
+
+export function Controlled() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className="display-flex flex-direction-column g-sm w-9xl"
+    >
+      <Box
+        alignItems="center"
+        justifyContent="space-between"
+        padding="sm 0"
+        direction="row"
+      >
+        <h4 className="text-sm font-semibold">
+          @peduarte starred 3 repositories
+        </h4>
+        <CollapsibleTrigger asChild>
+          <Button
+            variant="tertiary"
+            iconPrefix={isOpen ? 'remove' : 'caret-up-down'}
+            size="sm"
+            aria-label="toggle"
+          />
+        </CollapsibleTrigger>
+      </Box>
+      <Box
+        fontFamily="monospace"
+        radius="sm"
+        padding="md"
+        fontSize="sm"
+        borderWidth="sm"
+        borderColor="default"
+      >
+        @radix-ui/primitives
+      </Box>
+      <CollapsibleContent className="display-flex flex-direction-column g-sm">
+        <Box
+          fontFamily="monospace"
+          radius="sm"
+          padding="md"
+          fontSize="sm"
+          borderWidth="sm"
+          borderColor="default"
+        >
+          @radix-ui/colors
+        </Box>
+        <Box
+          fontFamily="monospace"
+          radius="sm"
+          padding="md"
+          fontSize="sm"
+          borderWidth="sm"
+          borderColor="default"
+        >
+          @stitches/react
+        </Box>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+export const ClickOpenCollapsible: Story = {
+  play: async ({ canvasElement, mount }) => {
+    await mount(<Controlled />);
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByLabelText('toggle'));
+
+    await expect(canvas.getByText('@radix-ui/colors')).toBeInTheDocument();
+  },
+};

package/src/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/hooks/useIsMobile/useIsMobile.tsx

@@ -4,7 +4,7 @@ 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 {
+export function useIsMobile(): boolean {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
     undefined
   );

package/src/index.ts

@@ -5,6 +5,7 @@ export * from './components/Button/Button';
 export * from './components/Card/Card';
 export * from './components/CheckboxInput/components/Checkbox';
 export * from './components/CheckboxInput/CheckboxInput';
+export * from './components/Collapsible/Collapsible';
 export * from './components/DateInput/DateInput';
 export * from './components/DatePicker/DatePicker';
 export * from './components/Details/Details';