readmes

.changeset/silver-bugs-invite.md

@@ -1,5 +1,5 @@
 ---
-"@collapsed/web-component": patch
+"@collapsed/lit": patch
 ---
 
 New implementation of collapsed as a Lit web component.

CONTRIBUTING.md

@@ -2,16 +2,35 @@
 
 Thanks for wanting to make this component better!
 
-### Project setup
+Before proceeding with development, ensure you match one of the following criteria:
 
-1.  Fork and clone the repo
-2.  `yarn install` and `yarn dev` to install dependencies and spin up the demo site locally
-3.  Create a branch for your PR
+- Fixing a small bug
+- Fixing a larger issue that has been previously discussed and agreed-upon by maintainers
+- Adding a new feature that has been previously discussed and agreed-upon by maintainers
+
+## Development
+
+For [react-collapsed](/packages/react-collapsed):
+
+1.  Fork and clone the repo.
+1.  `pnpm install` to install dependencies.
+1.  `cd packages/react-collapsed` to get into the package directory.
+1.  `pnpm storybook` to spin up the storybook.
+1.  Implement your changes and tests.
+    a. Run tests with `pnpm test` and lints with `pnpm lint`
+    b. Add cypress tests with any behavior that's difficult to capture in JSDOM.
+1.  Commit your work and submit a pull request for review.
+
+It's also a good idea to test server-side rendering behavior with the [next-app](/packages/next-app).
+
+### Other packages
+
+The framework-agnostic core and its adapters have varying development environments. It's best to check the packages `package.json` to see if they have a storybook or application for development.
 
 **Tip:** Keep your main branch pointing at the original repository and make pull requests from branches on your fork. To do this, run:
 
 ```bash
-git remote add upstream https://github.com/roginfarrer/react-collapsed.git
+git remote add upstream https://github.com/roginfarrer/collapsed.git
 git fetch upstream
 git branch --set-upstream-to=upstream/main main
 ```
@@ -20,4 +39,4 @@ This will add the original repository as a "remote" called "upstream," Then fetc
 
 ### Committing and Pushing changes
 
-Please make sure to run the tests before you commit your changes. You can run `yarn test` to run them (or `yarn test:watch`). Make sure to add new tests for any new features or changes. All tests must pass for a pull request to be accepted.
+Please make sure to run the tests before you commit your changes. You can run `pnpm test` to run them. Make sure to add new tests for any new features or changes. All tests must pass for a pull request to be accepted.

README.md

@@ -0,0 +1,35 @@
+# 🙈 Collapsed
+
+[![CI][ci-badge]][ci]
+![npm bundle size (version)][minzipped-badge]
+[![npm version][npm-badge]][npm-version]
+[![Netlify Status](https://api.netlify.com/api/v1/badges/5a5b0e80-d15e-4983-976d-37fe6bdada7a/deploy-status)](https://app.netlify.com/sites/react-collapsed/deploys)
+
+Headless UI for building flexible and accessible animating expand/collapse sections or disclosures. Animates the height of elements to `auto`.
+
+```bash
+npm install react-collapsed
+```
+
+[View installation and usage docs here!](/packages/react-collapsed)
+
+## Experimental Framework Adapters
+
+[react-collapsed][react-collapsed] is stable and ready to use. I've also been exploring a rewrite with a framework-agnostic core that's also available with a few different framework adapters (indicated with the `@collapsed/` namespace). Here's a breakdown to clarify what's available and their stability:
+
+| Package                            | Stable |
+| ---------------------------------- | ------ |
+| [react-collapsed][react-collapsed] | ✅     |
+| [@collapsed/core](packages/core)   | 🚧     |
+| [@collapsed/react](packages/react) | 🚧     |
+| [@collapsed/solid](packages/solid) | 🚧     |
+| [@collapsed/lit](packages/lit)     | 🚧     |
+
+[react-collapsed]: /packages/react-collapsed
+[minzipped-badge]: https://img.shields.io/bundlephobia/minzip/react-collapsed/latest
+[npm-badge]: http://img.shields.io/npm/v/react-collapsed.svg?style=flat
+[npm-version]: https://npmjs.org/package/react-collapsed "View this project on npm"
+[ci-badge]: https://github.com/roginfarrer/collapsed/workflows/CI/badge.svg
+[ci]: https://github.com/roginfarrer/collapsed/actions/workflows/main.yml?query=branch:main
+[netlify]: https://app.netlify.com/sites/react-collapsed/deploys
+[netlify-badge]: https://api.netlify.com/api/v1/badges/4d285ffc-aa4f-4d32-8549-eb58e00dd2d1/deploy-status

package.json

@@ -8,7 +8,6 @@
     "test": "turbo test",
     "lint": "turbo lint",
     "format": "prettier --write **/*.{js,ts,tsx,yml,md,md,json}",
-    "example": "pnpm --filter example run start",
     "version": "changeset version && pnpm install --lockfile-only",
     "release": "pnpm build && changeset publish"
   },

packages/core/README.md

@@ -1,16 +1,9 @@
-# NOTE
-
-You're probably looking for [react-collapsed](../react-collapsed). This package (alongside [@collapsed/react](../react)) is a WIP rewrite to create a Vanilla JS core.
+# @collapsed/core
 
 ---
 
 ## @collapsed/core
 
-[![CI][ci-badge]][ci]
-![npm bundle size (version)][minzipped-badge]
-[![npm version][npm-badge]][npm-version]
-[![Netlify Status](https://api.netlify.com/api/v1/badges/5a5b0e80-d15e-4983-976d-37fe6bdada7a/deploy-status)](https://app.netlify.com/sites/react-collapsed/deploys)
-
 A framework-agnostic utility for creating accessible expand/collapse components. Animates the height using CSS transitions from `0` to `auto`.
 
 > You might be looking for the [react hook](../react)
@@ -21,11 +14,3 @@ A framework-agnostic utility for creating accessible expand/collapse components.
 - Accessible out of the box - no need to worry if your collapse/expand component is accessible, since this takes care of it for you!
 - No animation framework required! Simply powered by CSS animations
 - Written in TypeScript
-
-[minzipped-badge]: https://img.shields.io/bundlephobia/minzip/@collapsed/react/latest
-[npm-badge]: http://img.shields.io/npm/v/@collapsed/react.svg?style=flat
-[npm-version]: https://npmjs.org/package/@collapsed/react 'View this project on npm'
-[ci-badge]: https://github.com/roginfarrer/collapsed/workflows/CI/badge.svg
-[ci]: https://github.com/roginfarrer/collapsed/actions?query=workflow%3ACI+branch%3Amain
-[netlify]: https://app.netlify.com/sites/react-collapsed/deploys
-[netlify-badge]: https://api.netlify.com/api/v1/badges/4d285ffc-aa4f-4d32-8549-eb58e00dd2d1/deploy-status

packages/lit/.eslintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

packages/lit/.eslintrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["../../internal/eslint-config-collapsed/index.cjs"],
+};

packages/lit/README.md

@@ -0,0 +1,44 @@
+# @collapsed/lit
+
+A Lit element for creating accessible expand/collapse elements. Animates the height using CSS transitions from `0` to `auto`.
+
+## Features
+
+- Handles the height of animations of your elements, `auto` included!
+- Minimally-styled to be functional--you control the styles.
+- No animation framework required! Simply powered by CSS animations.
+
+## Installation
+
+```bash
+npm install @collapsed/lit
+```
+
+## Usage
+
+```tsx
+import { CollapsedDisclosure } from "@collapsed/lit";
+import { html } from "lit";
+
+export function App() {
+  function handleClick(evt) {
+    const collapse = document.querySelector("#disclosure");
+    const btn = event.target;
+    collapse.toggleAttribute("open");
+    btn.setAttribute("aria-expanded", collapse.hasAttribute("open").toString());
+  }
+
+  return html`<div>
+    <button
+      aria-controls="disclosure"
+      aria-expanded="false"
+      @click="${handleClick}"
+    >
+      Toggle
+    </button>
+    <collapsed-disclosure id="disclosure">
+      <!-- Content goes here -->
+    </collapsed-disclosure>
+  </div>`;
+}
+```

packages/web-component/package.json → packages/lit/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@collapsed/web-component",
+  "name": "@collapsed/lit",
   "version": "0.0.0",
   "type": "module",
   "license": "MIT",
@@ -19,6 +19,7 @@
   ],
   "scripts": {
     "build": "tsup",
+    "lint": "eslint .",
     "typecheck": "tsc --project tsconfig.json --noEmit",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"

packages/web-component/src/collapsed-disclosure.ts → packages/lit/src/collapsed-disclosure.ts

@@ -20,19 +20,13 @@ const transitionStateChangeEvent = (
     composed: true,
   });
 
-export type TransitionStateChangeEvent = ReturnType<
-  typeof transitionStateChangeEvent
->;
-
 const openStateChange = (payload: boolean) =>
   new CustomEvent("openStateChange", {
     detail: payload,
     bubbles: true,
     composed: true,
   });
 
-export type OpenStateChangeEvent = ReturnType<typeof openStateChange>;
-
 @customElement("collapsed-disclosure")
 export class CollapsedDisclosure extends LitElement {
   static styles = css`
@@ -50,16 +44,15 @@ export class CollapsedDisclosure extends LitElement {
 
   private readonly attrId = ++id;
   private readonly componentId = `collapsed-disclosure-${this.attrId}`;
+  private passedFirstUpdate = false;
+  private collapse: Collapse;
 
   @query(":first-child")
   private collapseEl?: HTMLDivElement;
 
   @state()
   private isAnimating = false;
 
-  @state()
-  private passedFirstUpdate = false;
-
   @property({ type: Boolean, reflect: true })
   open: boolean = false;
 
@@ -72,8 +65,6 @@ export class CollapsedDisclosure extends LitElement {
   @property()
   easing: string = "cubic-bezier(0.4, 0, 0.2, 1)";
 
-  private collapse: Collapse;
-
   constructor() {
     super();
 
@@ -106,7 +97,7 @@ export class CollapsedDisclosure extends LitElement {
     });
   }
 
-  protected async updated(props: PropertyValueMap<typeof this>) {
+  protected updated(props: PropertyValueMap<typeof this>) {
     this.collapse.setOptions({
       easing: this.easing,
       collapsedHeight: this.collapsedHeight,
@@ -134,10 +125,6 @@ export class CollapsedDisclosure extends LitElement {
     this.passedFirstUpdate = true;
   }
 
-  public toggle = () => {
-    this.open = !this.open;
-  };
-
   render() {
     return html`<div
       part="root"
@@ -151,19 +138,3 @@ export class CollapsedDisclosure extends LitElement {
     </div>`;
   }
 }
-
-// type CustomListeners = <K extends keyof CollapsedDisclosureEventMap>
-// declare function custom = <K extends keyof CollapsedDisclosureEventMap | string>(type: K extends keyof CollapsedDisclosureEventMap ? K : )
-
-// export interface CollapsedDisclosureEventMap {
-//   'openStateChange': OpenStateChangeEvent;
-//   "transitionStateChange": TransitionStateChangeEvent;
-// }
-
-// declare function CollapsedDisclosure.addEventListener = <K extends keyof SelectElementEventMap>(type: K, listener: (this: SelectElement, ev: SelectElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "collapsed-disclosure": CollapsedDisclosure;
-  }
-}

packages/web-component/stories/basic.stories.tsx → packages/lit/stories/basic.stories.tsx

@@ -1,5 +1,5 @@
 import { html } from "lit";
-import "./components";
+import { SimpleDemo } from "./components";
 
 export const Basic = () => {
   return html`
@@ -9,6 +9,10 @@ export const Basic = () => {
   `;
 };
 
+export const SimpleComposition = () => {
+  return html`${SimpleDemo()}`;
+};
+
 export default {
   title: "Basic Usage",
 };

packages/web-component/stories/components.tsx → packages/lit/stories/components.tsx

@@ -2,6 +2,39 @@ import { LitElement, css, html } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 import { CollapsedDisclosure } from "../src/collapsed-disclosure.js";
 
+export function SimpleDemo() {
+  function handleClick(event: MouseEvent) {
+    const collapse = document.querySelector(
+      "#disclosure",
+    ) as CollapsedDisclosure;
+    const btn = event.target as HTMLButtonElement;
+    collapse.toggleAttribute("open");
+    btn.setAttribute("aria-expanded", collapse.hasAttribute("open").toString());
+  }
+
+  return html`<div>
+    <button
+      aria-controls="disclosure"
+      aria-expanded="false"
+      @click="${handleClick}"
+    >
+      Toggle
+    </button>
+    <collapsed-disclosure id="disclosure">
+      <p>Oh, hello</p>
+      <p>Oh, hello</p>
+      <p>Oh, hello</p>
+      <p>Oh, hello</p>
+      <p>Oh, hello</p>
+      <p>Oh, hello</p>
+      <p>Oh, hello</p>
+      <p>Oh, hello</p>
+      <p>Oh, hello</p>
+      <p>Oh, hello</p>
+    </collapsed-disclosure>
+  </div>`;
+}
+
 @customElement("styled-collapse")
 export class StyledCollapse extends LitElement {
   static styles = css`
@@ -72,7 +105,6 @@ export class StyledCollapse extends LitElement {
 
   firstUpdated() {
     customElements.whenDefined("collapsed-disclosure").then(() => {
-      // @ts-expect-error
       this.disclosure = this.renderRoot.querySelector("collapsed-disclosure")!;
       this.updateButton(this.disclosure.hasAttribute("open"));
     });

packages/web-component/tsconfig.json → packages/lit/tsconfig.json

@@ -6,7 +6,7 @@
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
     "inlineSources": true,
-    "baseUrl": ".",
+    "baseUrl": "../lit",
     "plugins": [
       {
         "name": "ts-lit-plugin",

packages/next-app/package.json

@@ -12,7 +12,8 @@
     "react": "^18",
     "react-dom": "^18",
     "next": "14.2.3",
-    "@collapsed/react": "workspace:*"
+    "@collapsed/react": "workspace:*",
+    "react-collapsed": "workspace:*"
   },
   "devDependencies": {
     "typescript": "^5",