feat: add pagination component

[riccardoperra]

closes #64

Still not finished but I think the most of work it has been done. Something can already be checked

• [X] Porting of useLocalizedStringFormatter in @solid-aria/i18n
• [X] Add createPagination + test
• [X] Add createPaginationState + test
• [X] Add pagination i18n strings
• [X] Documentation
• [X] Add example in dev folder

Some considerations:

• Maintaing the localized strings is painful, in my opinion that work should be automatized, fetching the content from the official repository https://github.com/adobe/react-spectrum/tree/26b95c60e84a36ae8366b91f451b1b11d4819c73/packages/%40react-aria/pagination/intl

Updates here: https://github.com/solidjs-community/solid-aria/pull/66#issuecomment-1229426275

We might use a script like this. It can definitely be improved 😄

import degit from "degit";
import { name } from "../package.json";
import { extname, join } from "path";
import { readdirSync, rmSync, cpSync, mkdirSync, writeFileSync } from "fs";

const intlSrc = `adobe/react-spectrum/packages/@react-aria/${name.split("/")[1]}/intl`;
const dist = join(process.cwd(), "intl");
const tmpDist = join(process.cwd(), "tmp");

async function main() {
  const reactAriaGit = degit(intlSrc, { cache: false, verbose: true, force: true, mode: "tar" });
  let isOk = false;
  try {
    await reactAriaGit.clone(tmpDist);
  } catch (e) {
    if (e.code === "Z_BUF_ERROR") {
      isOk = true;
    }
  }
  if (isOk) {
    await rmSync(dist, { force: true, recursive: true });
    await mkdirSync(dist);
    const files = readdirSync(tmpDist);
    const intlFiles = files.filter(el => el && extname(el) === ".json");

    for await (const file of intlFiles) {
      await cpSync(`${tmpDist}/${file}`, `${dist}/${file}`, {
        force: true,
        recursive: true
      });
    }

    const license =
      "/*\n" +
      " * Copyright 2022 Solid Aria Working Group.\n" +
      " * MIT License\n" +
      " *\n" +
      " * Portions of this file are based on code from react-spectrum.\n" +
      " * Copyright 2020 Adobe. All rights reserved.\n" +
      " *\n" +
      ' * This file is licensed to you under the Apache License, Version 2.0 (the "License");\n' +
      " * you may not use this file except in compliance with the License. You may obtain a copy\n" +
      " * of the License at http://www.apache.org/licenses/LICENSE-2.0\n" +
      " *\n" +
      " * Unless required by applicable law or agreed to in writing, software distributed under\n" +
      ' * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n' +
      " * OF ANY KIND, either express or implied. See the License for the specific language\n" +
      " * governing permissions and limitations under the License.\n" +
      " */";

    const content =
      license +
      "\n \n" +
      intlFiles.map(buildFileImport).join("\n") +
      "\n\n" +
      "export default {\n" +
      intlFiles.map(buildFileExport).join("\n") +
      "};";

    await writeFileSync(`${dist}/index.ts`, content);
  }

  await rmSync(tmpDist, { force: true, recursive: true });
}

function buildFileImport(fileName) {
  const name = fileName.replace("-", "").replace(".json", "");
  return `import ${name} from "./${fileName}";`;
}

function buildFileExport(fileName) {
  return `  "${fileName.replace(".json", "")}": ${fileName.replace("-", "").replace(".json", "")}`;
}

main();

• uncontrolled state might be broken with the current implementation You must define a defaultValue or state will never be updated

• There are some @ts-expect-error in createPagination.test.ts since the intersection of the JSX.DOMAttributes types break the function call signature 🤔

• Typescript types could be improved, it seems they support a string value (probably set by the text input?) and handles the "" string You are now able to pass string | number | undefined to onChange, but the new value will be skipped like react-aria/pagination does. All returned values from onNext, onPrevious, onChange, value are numbers. Default value when the new page is invalid or "" or undefined is 1

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 08fd3b1c18711475249dd1641b25a88072bcac6b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

| Name | Type | | ----------------------- | ----- | | @solid-aria/pagination | Minor | | @solid-aria/i18n | Minor | | @solid-aria/breadcrumbs | Patch | | @solid-aria/menu | Patch | | @solid-aria/overlays | Patch | | @solid-aria/primitives | Patch | | @solid-aria/progress | Patch | | @solid-aria/radio | Patch | | @solid-aria/select | Patch | | @solid-aria/selection | Patch | | @solid-aria/meter | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[riccardoperra]

Hey @fabien-ml, I think I've finished the porting

Unfortunately on react-aria website there is no documentation about the pagination component, but I tried to write one in the README. The example follows the react-spectrum Pagination component.

Also, how should I handle the solid-aria i18n version since it will change? Currently i'm linking to the workspace package https://github.com/solidjs-community/solid-aria/blob/114ac940e7760182e567ba9b7fd1c071c2dc9efd/packages/pagination/package.json#L52

I've also pushed the updated script I made to fetch the intl strings from react-aria repository. Tell me if that's okay. Here what it does:

• Create a tmp into scripts/folder and clone the react-aria repository there
• Read through the new syncIntl property of root package.json, which is basically an object of localPackageName-remotePackageName in order to know which packages should fetch the intl folder https://github.com/solidjs-community/solid-aria/blob/43207cfca1f31c67b03f61bd4e1a1e90cac44aad/package.json#L90-L92
• Copy all files from react-aria/packages/@react-aria/syncIntl.key/intl to ./packages/syncIntl.value/intl
• Creates an index.ts file which exports each .json file with the typescript compiler api
• Deletes the tmp folder

The script is runnable with pnpm sync:intl which basically does npx tsx scripts/syncIntl.cts

https://github.com/solidjs-community/solid-aria/blob/114ac940e7760182e567ba9b7fd1c071c2dc9efd/scripts/syncIntl.cts Here the output: https://github.com/solidjs-community/solid-aria/tree/114ac940e7760182e567ba9b7fd1c071c2dc9efd/packages/pagination/intl