Core collapse rewrite (#175)

.changeset/silver-bugs-foo.md

@@ -0,0 +1,5 @@
+---
+"@collapsed/solid": patch
+---
+
+New implementation of collapsed as a Solid component.

.changeset/silver-bugs-invite.md

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

.changeset/silver-bugs-react.md

@@ -0,0 +1,7 @@
+---
+"@collapsed/react": major
+---
+
+NOTE: See `packages/react-collapsed` for stable API.
+
+Complete rewrite using rewritten `@collapsed/core`. API remains the same.

.changeset/slimy-numbers-fry.md

@@ -0,0 +1,5 @@
+---
+"@collapsed/core": major
+---
+
+Full rewrite to narrow API to collapse animation and remove internal state. Inteded for use with framework wrappers.

.github/workflows/main.yml

@@ -14,18 +14,27 @@ jobs:
     env:
       CI: true
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+      TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+      TURBO_REMOTE_ONLY: true
 
     steps:
       - name: Checkout
         uses: actions/checkout@v4
         with:
           fetch-depth: 2
 
-      - uses: pnpm/action-setup@v2
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
+      - uses: pnpm/action-setup@v4
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
           cache: "pnpm"
@@ -43,12 +52,4 @@ jobs:
         run: pnpm test
 
       - name: Cypress
-        run: cd packages/react && npx cypress install && npx cypress run --component && cd -
-
-      # - name: Cypress run
-      #   uses: cypress-io/github-action@v5
-      #   with:
-      #     command-prefix: npx
-      #     install: false
-      #     component: true
-      #     working-directory: ./packages/react
+        run: pnpx cypress install && pnpm cypress:run

.github/workflows/release.yml

@@ -17,10 +17,10 @@ jobs:
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@main
+        uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
           cache: "pnpm"

.gitignore

@@ -1,3 +1,5 @@
+.output
+.vinxi
 *.log
 .DS_Store
 node_modules
@@ -6,3 +8,7 @@ dist
 storybook-static
 .turbo
 .parcel-cache
+.solid
+.next
+
+*storybook.log

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,33 @@
+# 🙈 Collapsed
+
+![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/roginfarrer/collapsed/main.yml)
+![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"
+[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

apps/next-app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

apps/next-app/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/next-app/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/next-app/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

apps/next-app/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "next-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@collapsed/react": "workspace:*",
+    "next": "14.2.3",
+    "react": "^18",
+    "react-collapsed": "workspace:*",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint-config-next": "14.2.4",
+    "typescript": "^5"
+  }
+}

apps/next-app/src/app/Collapse.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useCollapse as useCollapsedReact } from "@collapsed/react";
+import { useCollapse as useReactCollapsed } from "react-collapsed";
+
+export function CollapsedReact() {
+  const { getCollapseProps, getToggleProps, isExpanded } = useCollapsedReact();
+
+  return (
+    <div>
+      <button {...getToggleProps()}>{isExpanded ? "Hide" : "Show"}</button>
+      <div {...getCollapseProps()}>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+      </div>
+    </div>
+  );
+}
+
+export function ReactCollapsed() {
+  const { getCollapseProps, getToggleProps, isExpanded } = useReactCollapsed();
+
+  return (
+    <div>
+      <button {...getToggleProps()}>{isExpanded ? "Hide" : "Show"}</button>
+      <div {...getCollapseProps()}>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+        <p>Hey there</p>
+      </div>
+    </div>
+  );
+}