@spark-ui/collapsible 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.1.0 (2024-06-07)
+
+### Bug Fixes
+
+- **collapsible:** code review updates, tests and types ([6c351bd](https://github.com/adevinta/spark/commit/6c351bd92a32968c62d77312dacc7bea29825f8e))
+
+### Features
+
+- **collapsible:** collapsible package, using zagjs ([b196c08](https://github.com/adevinta/spark/commit/b196c08ee81974d82838de7c12bf7db184a51eee))

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Adevinta ASA.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+# Collapsible
+> @spark-ui/collapsible
+
+[![storybook](https://img.shields.io/badge/storybook-black?logo=storybook)](https://sparkui.vercel.app/?path=/docs/components-collapsible--docs)
+[![documentation](https://img.shields.io/badge/documentation-black?logo=googledocs)](https://sparkui-adv.vercel.app/docs/components/collapsible)
+[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/adevinta/spark/issues/new?&projects=4&template=bug-report.yml&assignees=&labels=component,collapsible)
+[![npm](https://img.shields.io/npm/dt/%40spark-ui/collapsible?logo=npm&labelColor=black)](https://www.npmjs.com/package/@spark-ui/collapsible)
+
+
+This package is part of the [`@spark-ui`](https://github.com/adevinta/spark) react-js user interface component library project.
+
+[![Issues open](https://img.shields.io/github/issues-search/adevinta/spark?query=is%3Aopen%20label%3Acomponent%20label%3Acollapsible&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/adevinta/spark/issues?q=is%3Aopen+label%3Acomponent+label%3Acollapsible)
+[![NPM](https://img.shields.io/npm/l/%40spark-ui%2Fcollapsible)](https://github.com/adevinta/spark/blob/main/packages/components/collapsible/LICENSE.md)

package/dist/Collapsible.d.ts

@@ -0,0 +1,27 @@
+import * as collapsible from '@zag-js/collapsible';
+import { type PropTypes } from '@zag-js/react';
+import { type ComponentPropsWithoutRef } from 'react';
+export interface CollapsibleProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+    /**
+     * The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
+     */
+    defaultOpen?: boolean;
+    /**
+     * When `true`, prevents the user from interacting with the collapsible.
+     */
+    disabled?: boolean;
+    /**
+     * Event handler called when the open state of the collapsible changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The controlled open state of the collapsible. Must be used in conjunction with `onOpenChange`.
+     */
+    open?: boolean;
+}
+export declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const useCollapsibleContext: () => collapsible.Api<PropTypes>;

package/dist/CollapsibleContent.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export interface CollapsibleContentProps extends ComponentPropsWithoutRef<'div'> {
+    asChild?: boolean;
+}
+export declare const Content: import("react").ForwardRefExoticComponent<CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/CollapsibleTrigger.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export interface CollapsibleTriggerProps extends ComponentPropsWithoutRef<'button'> {
+    asChild?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+export declare const Trigger: import("react").ForwardRefExoticComponent<CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { type CollapsibleProps } from './Collapsible';
+import { Content } from './CollapsibleContent';
+import { Trigger } from './CollapsibleTrigger';
+export declare const Collapsible: FC<CollapsibleProps> & {
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+};
+export { type CollapsibleProps } from './Collapsible';
+export { type CollapsibleContentProps } from './CollapsibleContent';
+export { type CollapsibleTriggerProps } from './CollapsibleTrigger';

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),i=require("@spark-ui/slot"),S=require("@zag-js/collapsible"),s=require("@zag-js/react"),j=require("class-variance-authority");function w(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,l.get?l:{enumerable:!0,get:()=>e[o]})}}return r.default=e,Object.freeze(r)}const g=w(S),f=t.createContext(null),h=t.forwardRef(({asChild:e=!1,children:r,defaultOpen:o=!1,disabled:l=!1,onOpenChange:n,open:a,...P})=>{const p={"open.controlled":a!==void 0,open:o||a,disabled:l,id:t.useId(),onOpenChange(N){n?.(N.open)}},O={...p,open:a,disabled:l},[u,b]=s.useMachine(g.machine(p),{context:O}),m=t.useMemo(()=>g.connect(u,b,s.normalizeProps),[b,u]),v=e?i.Slot:"div";return t.createElement(f.Provider,{value:m},t.createElement(v,{"data-spark-component":"collapsible",...s.mergeProps(m.rootProps,P)},r))});h.displayName="Collapsible";const y=()=>{const e=t.useContext(f);if(!e)throw Error("useCollapsibleContext must be used within a Collapsible provider");return e},c=t.forwardRef(({asChild:e=!1,className:r,children:o,...l})=>{const{contentProps:n}=y(),a=e?i.Slot:"div";return t.createElement(a,{...s.mergeProps(n,{className:j.cx("data-[state=closed]:hidden",r),...l}),"data-spark-component":"collapsible-content"},o)});c.displayName="Collapsible.Content";const d=t.forwardRef(({asChild:e=!1,children:r,...o})=>{const{triggerProps:l}=y(),n=e?i.Slot:"button";return t.createElement(n,{"data-spark-component":"collapsible-trigger",...s.mergeProps(l,o)},r)});d.displayName="Collapsible.Trigger";const C=Object.assign(h,{Trigger:d,Content:c});C.displayName="Collapsible",d.displayName="Collapsible.Trigger",c.displayName="Collapsible.Content",exports.Collapsible=C;

package/dist/index.mjs

@@ -0,0 +1,32 @@
+import n, { createContext as E, forwardRef as r, useId as O, useMemo as k, useContext as w } from "react";
+import { Slot as i } from "@spark-ui/slot";
+import * as g from "@zag-js/collapsible";
+import { useMachine as T, normalizeProps as M, mergeProps as p } from "@zag-js/react";
+import { cx as j } from "class-variance-authority";
+const h = E(null), f = r(({ asChild: e = !1, children: a, defaultOpen: s = !1, disabled: o = !1, onOpenChange: t, open: l, ...v }) => {
+  const m = { "open.controlled": l !== void 0, open: s || l, disabled: o, id: O(), onOpenChange(P) {
+    t?.(P.open);
+  } }, y = { ...m, open: l, disabled: o }, [b, C] = T(g.machine(m), { context: y }), u = k(() => g.connect(b, C, M), [C, b]), x = e ? i : "div";
+  return n.createElement(h.Provider, { value: u }, n.createElement(x, { "data-spark-component": "collapsible", ...p(u.rootProps, v) }, a));
+});
+f.displayName = "Collapsible";
+const N = () => {
+  const e = w(h);
+  if (!e)
+    throw Error("useCollapsibleContext must be used within a Collapsible provider");
+  return e;
+}, c = r(({ asChild: e = !1, className: a, children: s, ...o }) => {
+  const { contentProps: t } = N(), l = e ? i : "div";
+  return n.createElement(l, { ...p(t, { className: j("data-[state=closed]:hidden", a), ...o }), "data-spark-component": "collapsible-content" }, s);
+});
+c.displayName = "Collapsible.Content";
+const d = r(({ asChild: e = !1, children: a, ...s }) => {
+  const { triggerProps: o } = N(), t = e ? i : "button";
+  return n.createElement(t, { "data-spark-component": "collapsible-trigger", ...p(o, s) }, a);
+});
+d.displayName = "Collapsible.Trigger";
+const z = Object.assign(f, { Trigger: d, Content: c });
+z.displayName = "Collapsible", d.displayName = "Collapsible.Trigger", c.displayName = "Collapsible.Content";
+export {
+  z as Collapsible
+};

package/dist/public/docgen.json

@@ -0,0 +1,182 @@
+{
+  "Collapsible": {
+    "tags": {},
+    "description": "",
+    "displayName": "Collapsible",
+    "methods": [],
+    "props": {
+      "asChild": {
+        "defaultValue": null,
+        "description": "Change the default rendered element for the one passed as a child, merging their props and behavior.",
+        "name": "asChild",
+        "parent": {
+          "fileName": "collapsible/src/Collapsible.tsx",
+          "name": "CollapsibleProps"
+        },
+        "declarations": [
+          {
+            "fileName": "collapsible/src/Collapsible.tsx",
+            "name": "CollapsibleProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "defaultOpen": {
+        "defaultValue": null,
+        "description": "The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.",
+        "name": "defaultOpen",
+        "parent": {
+          "fileName": "collapsible/src/Collapsible.tsx",
+          "name": "CollapsibleProps"
+        },
+        "declarations": [
+          {
+            "fileName": "collapsible/src/Collapsible.tsx",
+            "name": "CollapsibleProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "disabled": {
+        "defaultValue": null,
+        "description": "When `true`, prevents the user from interacting with the collapsible.",
+        "name": "disabled",
+        "parent": {
+          "fileName": "collapsible/src/Collapsible.tsx",
+          "name": "CollapsibleProps"
+        },
+        "declarations": [
+          {
+            "fileName": "collapsible/src/Collapsible.tsx",
+            "name": "CollapsibleProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "onOpenChange": {
+        "defaultValue": null,
+        "description": "Event handler called when the open state of the collapsible changes.",
+        "name": "onOpenChange",
+        "parent": {
+          "fileName": "collapsible/src/Collapsible.tsx",
+          "name": "CollapsibleProps"
+        },
+        "declarations": [
+          {
+            "fileName": "collapsible/src/Collapsible.tsx",
+            "name": "CollapsibleProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "(open: boolean) => void"
+        }
+      },
+      "open": {
+        "defaultValue": null,
+        "description": "The controlled open state of the collapsible. Must be used in conjunction with `onOpenChange`.",
+        "name": "open",
+        "parent": {
+          "fileName": "collapsible/src/Collapsible.tsx",
+          "name": "CollapsibleProps"
+        },
+        "declarations": [
+          {
+            "fileName": "collapsible/src/Collapsible.tsx",
+            "name": "CollapsibleProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      }
+    }
+  },
+  "Collapsible.Content": {
+    "tags": {},
+    "description": "",
+    "displayName": "Collapsible.Content",
+    "methods": [],
+    "props": {
+      "asChild": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "",
+        "name": "asChild",
+        "parent": {
+          "fileName": "collapsible/src/CollapsibleContent.tsx",
+          "name": "CollapsibleContentProps"
+        },
+        "declarations": [
+          {
+            "fileName": "collapsible/src/CollapsibleContent.tsx",
+            "name": "CollapsibleContentProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      }
+    }
+  },
+  "Collapsible.Trigger": {
+    "tags": {},
+    "description": "",
+    "displayName": "Collapsible.Trigger",
+    "methods": [],
+    "props": {
+      "asChild": {
+        "defaultValue": {
+          "value": false
+        },
+        "description": "",
+        "name": "asChild",
+        "parent": {
+          "fileName": "collapsible/src/CollapsibleTrigger.tsx",
+          "name": "CollapsibleTriggerProps"
+        },
+        "declarations": [
+          {
+            "fileName": "collapsible/src/CollapsibleTrigger.tsx",
+            "name": "CollapsibleTriggerProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "collapsible/src/CollapsibleTrigger.tsx",
+          "name": "CollapsibleTriggerProps"
+        },
+        "declarations": [
+          {
+            "fileName": "collapsible/src/CollapsibleTrigger.tsx",
+            "name": "CollapsibleTriggerProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@spark-ui/collapsible",
+  "version": "0.1.0",
+  "description": "An interactive component which expands/collapses a panel.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "@spark-ui",
+    "react",
+    "component",
+    "accessible",
+    "accessibility",
+    "wai-aria",
+    "aria",
+    "a11y",
+    "collapsible",
+    "disclosure"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "@spark-ui/theme-utils": "^4.0.0",
+    "react": "^18.0 || ^19.0",
+    "react-dom": "^18.0 || ^19.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adevinta/spark.git",
+    "directory": "packages/components/collapsible"
+  },
+  "config": {
+    "title": "collapsible",
+    "category": "components"
+  },
+  "bugs": {
+    "url": "https://github.com/adevinta/spark/issues?q=is%3Aopen+label%3Autility+label%3Acollapsible"
+  },
+  "homepage": "https://sparkui.vercel.app",
+  "license": "MIT",
+  "dependencies": {
+    "@spark-ui/slot": "^1.7.1",
+    "@zag-js/collapsible": "^0.53.0",
+    "@zag-js/react": "^0.53.0"
+  },
+  "gitHead": "5ab06446afc6e44e90583cff54175ab1fe01f6a0"
+}

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src/**/*", "../../../global.d.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,6 @@
+import path from 'path'
+import { getComponentConfiguration } from '../../../config/index'
+
+const { name } = require(path.resolve(__dirname, 'package.json'))
+
+export default getComponentConfiguration(process.cwd(), name)