Merge branch 'main' into alpha

apps/docs/components/collapsible/Collapsible.tsx

@@ -3,7 +3,7 @@
 import { CollapseIcon, Icon } from "@/components/icon";
 import clsx from "clsx";
 import type { ReactNode } from "react";
-import { Button, composeRenderProps, UNSTABLE_Disclosure as Disclosure, UNSTABLE_DisclosurePanel as DisclosurePanel, type DisclosureProps } from "react-aria-components";
+import { Button, composeRenderProps, Disclosure, DisclosurePanel, type DisclosureProps } from "react-aria-components";
 
 import "./collapsible.css";
 

apps/docs/components/tag/tag.css

@@ -1,3 +1,9 @@
+@property --font-size {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 1rem;
+}
+
 :root {
     --hd-tag-font-family: var(--hd-default-font-family);
     --hd-tag-font-size: 0.875rem;

apps/docs/content/components/navigation/Disclosure.mdx

@@ -0,0 +1,119 @@
+---
+title: Disclosure
+description: The disclosure component is used to put long sections of information under a block that users can expand or collapse.
+category: "navigation"
+links:
+    source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/Disclosure/src/Disclosure.tsx
+    aria: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+---
+
+<Example src="Disclosure/docs/preview" isOpen />
+
+<FeatureFlag flag="next">
+    ## Guidelines
+
+    TODO: If we have some guidelines about this component&apos;s usage
+
+    ### Accessibility ?
+
+    TODO: If we have some guidelines about this component and accessibility
+</FeatureFlag>
+
+## Anatomy
+
+<FeatureFlag flag="rc">
+    TODO: We have anatomy screenshots from the Figma, we could most likely use them here
+
+    ### Concepts
+
+    TODO: links to related concepts
+</FeatureFlag>
+
+### Composed Components
+
+A `Disclosure` uses the following components.
+
+<ComposedComponents components={["Text, Icon"]}/>
+
+## Usage
+
+### Disabled
+
+A disclosure can be disabled.
+
+<Example src="Disclosure/docs/disabled" />
+
+### Variants
+
+A disclosure has multiple variants.
+
+<Example src="Disclosure/docs/variants" />
+
+**Standalone** - Used when the disclosure is not inside a container.
+
+**Inline** - Used when placing a disclosure inside a container.
+
+### Icon
+
+A disclosure can contain an icon.
+
+<Example src="Disclosure/docs/icon" />
+
+### Description
+
+A disclosure can contain a description.
+
+<Example src="Disclosure/docs/description" />
+
+### Controlled
+
+A disclosure can handle its expanded state in controlled mode.
+
+<Example src="Disclosure/docs/controlled" />
+
+### Custom Header
+
+A disclosure can have a custom header. To accomplish this, do not use `DisclosureHeader` and use the [Button](./Button) component with `slot="trigger"` instead.
+Using React Aria's [Button](https://react-spectrum.adobe.com/react-aria/Button.html) component will also work.
+
+<Example src="Disclosure/docs/customHeader" />
+
+<FeatureFlag flag="next">
+    ## Advanced customization
+
+    ### Contexts
+    TODO: Example of context + content about the context
+
+    ### Custom Children
+
+    TODO: Example of passing custom children to the components to fake a slot
+
+    ### Custom Component
+
+    TODO: Example of creating a custom version of this component
+</FeatureFlag>
+
+## Props
+
+### Disclosure
+<PropTable component="Disclosure" />
+
+### Disclosure Header
+<PropTable component="DisclosureHeader" />
+
+### Disclosure Panel
+<PropTable component="DisclosurePanel" />
+
+## Progressive Enhancement
+
+Our Disclosure component uses experimental CSS features like:
+
+- **interpolate-size: allow-keywords**: Enables fluid transitions between dynamic sizes.
+
+- **transition-behavior: allow-discrete**: Allows transitions for properties like content-visibility.
+
+These features enhance animations where supported. In browsers without support, the component remains fully usable without animations, maintaining progressive enhancement.
+
+## Migration Notes
+
+<MigrateGuide src="Disclosure/docs/migration-notes" />

apps/docs/examples/Preview.ts

@@ -776,6 +776,27 @@ export const Previews: Record<string, Preview> = {
     "layout/docs/stack/alignY": {
         component: lazy(() => import("@/../../packages/components/src/layout/docs/stack/alignY.tsx"))
     },
+    "Disclosure/docs/preview": {
+        component: lazy(() => import("@/../../packages/components/src/Disclosure/docs/preview.tsx"))
+    },
+    "Disclosure/docs/disabled": {
+        component: lazy(() => import("@/../../packages/components/src/Disclosure/docs/disabled.tsx"))
+    },
+    "Disclosure/docs/variants": {
+        component: lazy(() => import("@/../../packages/components/src/Disclosure/docs/variants.tsx"))
+    },
+    "Disclosure/docs/icon": {
+        component: lazy(() => import("@/../../packages/components/src/Disclosure/docs/icon.tsx"))
+    },
+    "Disclosure/docs/description": {
+        component: lazy(() => import("@/../../packages/components/src/Disclosure/docs/description.tsx"))
+    },
+    "Disclosure/docs/controlled": {
+        component: lazy(() => import("@/../../packages/components/src/Disclosure/docs/controlled.tsx"))
+    },
+    "Disclosure/docs/customHeader": {
+        component: lazy(() => import("@/../../packages/components/src/Disclosure/docs/customHeader.tsx"))
+    },
     "Link/docs/preview": {
         component: lazy(() => import("@/../../packages/components/src/Link/docs/preview.tsx"))
     },

apps/docs/examples/overview/index.ts

@@ -9,6 +9,7 @@ import Checkbox from "./Checkbox.svg";
 import CheckboxGroup from "./CheckboxGroup.svg";
 import ComboBox from "./ComboBox.svg";
 import Content from "./Content.svg";
+import Disclosure from "./Disclosure.svg";
 import Divider from "./Divider.svg";
 import ErrorMessage from "./ErrorMessage.svg";
 import Flex from "./Flex.svg";
@@ -57,6 +58,7 @@ export const OverviewComponents: OverviewComponentsType = {
     CheckboxGroup,
     ComboBox,
     Content,
+    Disclosure,
     Divider,
     ErrorMessage,
     Flex,

apps/docs/package.json

@@ -22,8 +22,8 @@
         "copy:images": "tsx scripts/copyImages.ts"
     },
     "peerDependencies": {
-        "react-aria": "^3.35",
-        "react-aria-components": "^1.4"
+        "react-aria": "^3.36",
+        "react-aria-components": "^1.5"
     },
     "dependencies": {
         "@tanstack/react-table": "^8.20.5",
@@ -33,8 +33,8 @@
         "next-contentlayer": "0.3.4",
         "next-mdx-remote": "^5.0.0",
         "react": "18.3.1",
-        "react-aria": "3.35.1",
-        "react-aria-components": "1.4.1",
+        "react-aria": "3.36.0",
+        "react-aria-components": "1.5.0",
         "react-dom": "18.3.1",
         "react-toggle": "4.1.3",
         "rehype-parse": "^9.0.1",

apps/docs/scripts/generateComponentData.ts

@@ -16,7 +16,7 @@ interface Groups {
 }
 
 interface GroupsConfig {
-    [key: string]: string | string[];
+    [key: string]: (string | RegExp)[];
 }
 
 export interface ComponentDocWithGroups extends ComponentDoc {
@@ -102,10 +102,59 @@ function getFormattedData(data: ComponentDoc[]): ComponentDocWithGroups[] {
     // Define the groups and their corresponding terms
 
     const groupsConfig: GroupsConfig = {
-        events: ["Events", "DOMAttributes"],
-        accessibility: ["Aria", "Focusable"],
-        layout: "Slot"
-        // Add more groups here as needed
+        Events: [
+            /^on[A-Z]/
+        ],
+        Layout: [
+            "flex", "flexGrow", "flexShrink", "flexBasis", "alignSelf", "justifySelf", "order", "flexOrder",
+            "gridArea", "gridColumn", "gridRow", "gridColumnStart", "gridColumnEnd", "gridRowStart", "gridRowEnd", "slot",
+            "overflow"
+        ],
+        Spacing: [
+            "margin", "marginTop", "marginLeft", "marginRight", "marginBottom", "marginStart", "marginEnd", "marginX", "marginY",
+            "padding", "paddingTop", "paddingLeft", "paddingRight", "paddingBottom", "paddingStart", "paddingEnd", "paddingX", "paddingY"
+        ],
+        Sizing: [
+            "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "defaultWidth"
+        ],
+        Background: [
+            "background", "backgroundColor", "backgroundImage", "backgroundSize", "backgroundPosition", "backgroundRepeat",
+            "opacity"
+        ],
+        Borders: [
+            "border",
+            "borderX",
+            "borderY",
+            "borderStyle",
+            "borderTop",
+            "borderLeft",
+            "borderRight",
+            "borderTop",
+            "borderBottom",
+            "borderWidth", "borderStartWidth", "borderEndWidth", "borderLeftWidth", "borderRightWidth", "borderTopWidth", "borderBottomWidth", "borderXWidth", "borderYWidth",
+            "borderColor", "borderStartColor", "borderEndColor", "borderLeftColor", "borderRightColor", "borderTopColor", "borderBottomColor", "borderXColor", "borderYColor",
+            "borderRadius", "borderTopStartRadius", "borderTopEndRadius", "borderBottomStartRadius", "borderBottomEndRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"
+        ],
+        Shadows: [
+            "boxShadow",
+            "textShadow"
+        ],
+        Positioning: [
+            "position", "top", "bottom", "left", "right", "start", "end", "zIndex", "isHidden", "hidden", "display"
+        ],
+        Typography: [
+            "font",
+            "fontFamily",
+            "fontSize",
+            "fontStyle",
+            "textAlign",
+            "verticalAlign",
+            "lineHeight",
+            "letterSpacing"
+        ],
+        Accessibility: [
+            "role", "id", "tabIndex", "excludeFromTabOrder", "preventFocusOnPress", /^aria-/
+        ]
     };
 
     // Define the exceptions that should be added to a specific group
@@ -136,18 +185,32 @@ function getFormattedData(data: ComponentDoc[]): ComponentDocWithGroups[] {
         Object.entries(props).forEach(([key, prop]) => {
             let added = false;
 
+            // Special handling for the "id" prop
+            if (key === "id") {
+                if (prop.type?.name === "string") {
+                    groups.Accessibility[key] = prop;
+                    added = true;
+                } else {
+                    groups.default[key] = prop;
+                    added = true;
+                }
+                delete props[key];
+
+                return;
+            }
+
             // Check each group to see if the prop should be added to it
-            Object.entries(groupsConfig).forEach(([group, term]) => {
-                if (Array.isArray(term)) {
-                    term.forEach(t => {
-                        if (prop.parent?.name.includes(t)) {
+            Object.entries(groupsConfig).forEach(([group, terms]) => {
+                if (Array.isArray(terms)) {
+                    terms.forEach(term => {
+                        if (
+                            (typeof term === "string" && prop.name === term) ||
+                            (term instanceof RegExp && term.test(prop.name))
+                        ) {
                             groups[group][key] = prop;
                             added = true;
                         }
                     });
-                } else if (prop.parent?.name.includes(term)) {
-                    groups[group][key] = prop;
-                    added = true;
                 }
             });
 

package.json

@@ -46,23 +46,23 @@
     },
     "devDependencies": {
         "@changesets/cli": "2.27.9",
-        "@chromatic-com/storybook": "2.0.2",
+        "@chromatic-com/storybook": "^3.2.2",
         "@hopper-ui/tokens": "workspace:*",
         "@internationalized/string-compiler": "3.2.5",
         "@netlify/plugin-nextjs": "5.8.0",
         "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
-        "@storybook/addon-a11y": "^8.3.5",
-        "@storybook/addon-essentials": "^8.3.5",
-        "@storybook/addon-interactions": "^8.3.5",
-        "@storybook/addon-links": "^8.3.5",
-        "@storybook/addon-mdx-gfm": "^8.3.5",
+        "@storybook/addon-a11y": "^8.4.5",
+        "@storybook/addon-essentials": "^8.4.5",
+        "@storybook/addon-interactions": "^8.4.5",
+        "@storybook/addon-links": "^8.4.5",
+        "@storybook/addon-mdx-gfm": "^8.4.5",
         "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-        "@storybook/blocks": "^8.3.5",
-        "@storybook/react": "^8.3.5",
-        "@storybook/react-webpack5": "^8.3.5",
-        "@storybook/test": "^8.3.5",
+        "@storybook/blocks": "^8.4.5",
+        "@storybook/react": "^8.4.5",
+        "@storybook/react-webpack5": "^8.4.5",
+        "@storybook/test": "^8.4.5",
         "@storybook/test-runner": "0.19.1",
-        "@storybook/types": "^8.3.5",
+        "@storybook/types": "^8.4.5",
         "@types/eslint": "8.56.12",
         "@types/jest": "29.5.13",
         "@types/node": "22.7.5",
@@ -73,7 +73,7 @@
         "cross-env": "7.0.3",
         "eslint": "8.57.1",
         "eslint-plugin-hopper-monorepo": "workspace:*",
-        "eslint-plugin-storybook": "^0.9.0",
+        "eslint-plugin-storybook": "^0.11.1",
         "jest": "29.7.0",
         "plop": "4.0.1",
         "prettier": "3.3.3",
@@ -82,7 +82,7 @@
         "react-dom": "18.3.1",
         "react-refresh": "0.14.2",
         "react-router-dom": "6.27.0",
-        "storybook": "^8.3.5",
+        "storybook": "^8.4.5",
         "stylelint": "16.10.0",
         "stylelint-config-clean-order": "6.1.0",
         "stylelint-use-logical": "2.1.2",

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hopper-ui/components
 
+## 1.3.34
+
+### Patch Changes
+
+- 8abd4a4: Created the Disclosure component with its sub components: DisclosureHeader and DisclosurePanel.
+
 ## 1.3.33
 
 ### Patch Changes