commit

list atom passing tests

test listActions

normalize useListActions

reuse listState

test useList

fix tests for List

document types for list actions

document list atom

document list actions

document useList

document list component

cleanup storybook

cleanup docs

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+storybook-static/

.eslintrc.cjs

@@ -0,0 +1,60 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: "module",
+  },
+  env: {
+    node: true,
+  },
+  plugins: ["@typescript-eslint", "prettier", "import"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+  ],
+  rules: {
+    "@typescript-eslint/no-explicit-any": "off",
+    "sort-imports": [
+      "error",
+      {
+        ignoreCase: false,
+        ignoreDeclarationSort: true, // don"t want to sort import lines, use eslint-plugin-import instead
+        ignoreMemberSort: false,
+        memberSyntaxSortOrder: ["none", "all", "multiple", "single"],
+        allowSeparatedGroups: true,
+      },
+    ],
+    "import/no-unresolved": "error",
+    // 'import/no-named-as-default-member': 'off',
+    "import/order": [
+      "error",
+      {
+        groups: [
+          "builtin",
+          "external",
+          "internal",
+          ["sibling", "parent"],
+          "index",
+          "unknown",
+        ],
+        "newlines-between": "always",
+        alphabetize: {
+          /* sort in ascending order. Options: ["ignore", "asc", "desc"] */
+          order: "asc",
+          /* ignore case. Options: [true, false] */
+          caseInsensitive: true,
+        },
+      },
+    ],
+  },
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project: "./tsconfig.json",
+      },
+    },
+  },
+};

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/workflows/docs.yml

@@ -0,0 +1,55 @@
+name: storybook-docs
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+jobs:
+  storybook:
+    name: 🎨 Storybook Build & Deploy to GH Pages
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/Iron
+
+      - name: Cache node_modules
+        id: cache-node-modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: install
+
+      - name: Build Package
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: build
+
+      - name: Build Storybook Docs
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: build:docs
+
+      - name: Upload Storybook
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: storybook-static
+
+      - name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@v2
+        with:
+          token: ${{ github.token }}

.github/workflows/release.yml

@@ -0,0 +1,63 @@
+name: release
+
+on:
+  push:
+    branches:
+      - main
+      - next
+  pull_request:
+    branches:
+      - main
+      - next
+
+jobs:
+  release:
+    name: 🚀 Release
+    if: ${{!contains(github.event.head_commit.message, '[skip ci]') && !startsWith(github.event.head_commit.message, 'chore:') && !startsWith(github.event.head_commit.message, 'style:')  && !startsWith(github.event.head_commit.message, 'docs:') && !contains(github.event.pull_request.title, '[skip ci]') && !startsWith(github.event.pull_request.title, 'chore:') && !startsWith(github.event.pull_request.title, 'style:') && !startsWith(github.event.pull_request.title, 'docs:') && !startsWith(github.event.head_commit.message, 'chore(') && !startsWith(github.event.head_commit.message, 'style(') && !startsWith(github.event.head_commit.message, 'docs(') && !startsWith(github.event.pull_request.title, 'chore(') && !startsWith(github.event.pull_request.title, 'style(') && !startsWith(github.event.pull_request.title, 'docs(') }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - run: echo ${{ github.workspace }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/Iron
+
+      - name: Cache node_modules
+        id: cache-node-modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: 🏗️ Install
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: install
+
+      - name: ✅ Typecheck
+        run: yarn typecheck
+
+      - name: 🧪 Test
+        run: yarn test:cov
+
+      - name: 📊 Codecov
+        uses: codecov/codecov-action@v3
+        with:
+          directory: coverage
+          verbose: true
+
+      - name: 🔨 Build
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: build
+
+      - name: 🚢 Release
+        uses: borales/actions-yarn@v4
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        with:
+          cmd: semantic-release

.gitignore

@@ -0,0 +1,25 @@
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+node_modules/
+dist/
+tsconfig.build.tsbuildinfo
+
+*storybook.log
+storybook-static/
+# Swap the comments on the following lines if you don't wish to use zero-installs
+# Documentation here: https://yarnpkg.com/features/zero-installs
+#!.yarn/cache
+#.pnp.*
+
+tsconfig.vitest-temp.json
+
+tsconfig.tsbuildinfo
+
+coverage/
+
+public/pico.colors.min.css

.nvmrc

@@ -0,0 +1 @@
+lts/Iron

.storybook/components/button-copy-to-clipboard.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import Copy from "./icons/copy";
+import Check from "./icons/check";
+
+// Source https://github.com/picocss/picocss.com/blob/7fc423b65955df4a216247333839de34f2fe2b01/app/components/Code.jsx#L44
+export const ButtonCopyToClipboard = ({ text, ...props }: { text: string }) => {
+  const [copied, setCopied] = useState(false);
+  const onCopy = (event) => {
+    event.preventDefault();
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 1000);
+  };
+
+  return (
+    <CopyToClipboard text={text} {...props}>
+      <a
+        href="#"
+        className="copy-to-clipboard"
+        onClick={onCopy}
+        tabIndex={-1}
+        aria-label="Copy code"
+        data-tooltip={copied ? "Copied" : undefined}
+        data-placement="left"
+      >
+        {copied ? (
+          <Check className="check" isAnimated={true} strokeWidth={3} />
+        ) : (
+          <Copy className="clipboard" />
+        )}
+      </a>
+    </CopyToClipboard>
+  );
+};

.storybook/components/docs-container.tsx

@@ -0,0 +1,76 @@
+// TODO: remove after fix merged
+// https://github.com/storybookjs/storybook/pull/26168
+
+import type { FC, PropsWithChildren, ReactNode } from "react";
+import React, { useEffect } from "react";
+import { global } from "@storybook/global";
+import type { ThemeVars } from "@storybook/theming";
+import { ThemeProvider, ensure as ensureTheme } from "@storybook/theming";
+import type { Renderer } from "@storybook/types";
+import type { DocsContextProps } from "@storybook/blocks";
+import { DocsContext } from "@storybook/blocks";
+import { SourceContainer } from "@storybook/blocks";
+
+export function scrollToElement(element: any, block = "start") {
+  element.scrollIntoView({
+    behavior: "smooth",
+    block,
+    inline: "nearest",
+  });
+}
+
+const { document, window: globalWindow } = global;
+
+type DocsPage = (props: PropsWithChildren<{ toc: ReactNode }>) => ReactNode;
+
+export interface DocsContainerProps<TFramework extends Renderer = Renderer> {
+  context: DocsContextProps<TFramework>;
+  theme?: ThemeVars;
+  DocsPage: DocsPage;
+}
+
+export const DocsContainer: FC<PropsWithChildren<DocsContainerProps>> = ({
+  context,
+  theme,
+  DocsPage,
+  children,
+}) => {
+  let toc;
+
+  try {
+    const meta = context.resolveOf("meta", ["meta"]);
+    toc = meta.preparedMeta.parameters?.docs?.toc;
+  } catch (err) {
+    // No meta, falling back to project annotations
+    toc = context?.projectAnnotations?.parameters?.docs?.toc;
+  }
+
+  useEffect(() => {
+    let url;
+    try {
+      url = new URL(globalWindow.parent.location.toString());
+      if (url.hash) {
+        const element = document.getElementById(url.hash.substring(1));
+        if (element) {
+          // Introducing a delay to ensure scrolling works when it's a full refresh.
+          setTimeout(() => {
+            scrollToElement(element);
+          }, 200);
+        }
+      }
+    } catch (err) {
+      // pass
+    }
+  });
+
+  return (
+    <DocsContext.Provider value={context}>
+      <SourceContainer channel={context.channel}>
+        <ThemeProvider theme={ensureTheme(theme!)}>
+          {/** @ts-ignore */}
+          <DocsPage toc={null}>{children}</DocsPage>
+        </ThemeProvider>
+      </SourceContainer>
+    </DocsContext.Provider>
+  );
+};