{language} keyboard
+Click in the field, then press keys on the on-screen keyboard.
+
+
+
+
+
+
+
+
+
+
+
+ On-screen keyboards for React
+`, copying the files of an existing language package. The package is named `@coldsofttech/saccade-` and starts at version `0.1.0`.
+2. Write the layouts in `src/index.js`. Export `layout` (the default) and `createLayout(arrangement, region)`, and list any font the script needs in `fonts`. `saccade-keyboards` is a peer dependency, imported from `@coldsofttech/saccade-keyboards/core`.
+3. Add `src/index.test.js`. It runs `validateLayout` on every arrangement and region, and checks the keys that are easy to get wrong.
+4. Add a `README.md` for the package: what it provides, its arrangements, regions and digits, and how to register it.
+5. Add the package to `.size-limit.json`, to the demo in `examples/demo/src/main.jsx` (its layout, regions and arrangements) and to `examples/demo/package.json`.
+6. Add it to the language table in the root `README.md`, to the bug report, feature request and layout fix forms in `.github/ISSUE_TEMPLATE`, and to the package list in [architecture](architecture.md).
+7. Add an `[Unreleased]` entry in `CHANGELOG.md`.
+8. Run `npm run build`, then `npm run check:packages`, then `npx vitest run packages/saccade-`.
+
+After the first release, register the package as a trusted publisher on npm (see [repository setup](repo-setup.md)).
+
+## A new arrangement or region
+
+1. Add it to the language's `createLayout`, reusing the shared helpers instead of repeating keys that do not change.
+2. Add the region or arrangement to the test, so it is checked by `validateLayout`.
+3. Add it to the demo, the language's README and the root README table.
+4. Add an `[Unreleased]` entry in `CHANGELOG.md`.
+
+## Checking your work
+
+- Open the demo (`npm run build`, then `npm run dev`) and press every key on every layer.
+- Look at the keyboard at 430 px and at 801 px or wider. At 800 px or less the Shift and AltGr characters are hidden until those keys are pressed.
+- Check with the number pad and the currency pad on, and in the dark theme.
+- Check a script that has signs sitting on a letter: they should show a dotted circle.
diff --git a/docs/architecture.md b/docs/architecture.md
index a1e0c53..24cd54e 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -1,6 +1,6 @@
# Architecture
-How the pieces of this template fit together. For day-to-day commands, see [development](development.md). For one-time repository settings, see [repository setup](repo-setup.md).
+How the pieces of Saccade Keyboards fit together. For day-to-day commands, see [development](development.md). For one-time repository settings, see [repository setup](repo-setup.md).
## Overview
@@ -30,7 +30,7 @@ flowchart LR
```text
packages// one publishable package: src/, tests next to source, own vite.config.js
-examples/demo/ small Vite app that consumes the packages
+examples/demo/ the demo app, which uses every package
scripts/ repository helper scripts (see scripts/README.md)
vitest.config.js runs every package as a Vitest project, sets coverage thresholds
eslint.config.js shared lint rules
@@ -49,13 +49,12 @@ Each package owns its version in its `package.json`, builds on its own with Vite
| `audit.yml` | Weekly, manual, and pull requests that change `package-lock.json` | Runs `npm audit` on production dependencies to catch newly published vulnerabilities. |
| `security.yml` | Pull request, push to `main`, weekly, manual | Runs Semgrep and uploads SARIF to the Security tab. Not part of the required `ci` check. |
| `release.yml` | GitHub release published | Checks the tag matches the package version, builds, then publishes that package to npm. |
-| `init.yml` | Manual | One-time placeholder replacement in a repo created from the template. Skipped in the template itself. |
CodeQL runs through GitHub's default setup rather than a workflow file.
## Branch governance
-The `main` ruleset in `.github/rulesets/main.json` is applied by `scripts/apply-repo-settings.js`. It requires:
+The `main` ruleset in `.github/rulesets/main.json` is applied by hand (see [repository setup](repo-setup.md)). It requires:
- a pull request with a code owner review and resolved conversations, squash merge only
- the `ci` and `dependency-review` checks, with the branch up to date
@@ -67,9 +66,35 @@ Repository admins can bypass through a pull request so a solo maintainer is not
## Release flow
1. Bump `version` in the package's `package.json` in a pull request.
-2. After merge, publish a GitHub release tagged `@`, for example `@scope/example-react-package@1.0.0`.
+2. After merge, publish a GitHub release tagged `@`, for example `@coldsofttech/saccade-keyboards@1.0.0`.
3. `release.yml` builds and packs that package in one job, then a second job in the `npm` environment publishes it using OpenID Connect. No token is stored, and only the publish job gets the `id-token` permission.
-## Template lifecycle
+## Packages
-GitHub copies files, not settings. A new repo therefore needs three steps: run **Init** to replace the template owner and name, rename the example package and set your npm scope, and run `npm run repo:settings` to apply protections and the ruleset.
+| Package | What it is |
+| --------------------------------- | --------------------------------------------------------------------------- |
+| `@coldsofttech/saccade-keyboards` | The `Keyboard` component, the registry and the layout helpers shared by all |
+| `@coldsofttech/saccade-en` | English: US, GB, AU, CA and IN, QWERTY or alphabetical |
+| `@coldsofttech/saccade-es` | Spanish: ES, MX, AR, CO, US and Latin America |
+| `@coldsofttech/saccade-fr` | French: FR, BE, CA and CH |
+| `@coldsofttech/saccade-hi` | Hindi: InScript or phonetic, with Latin or Devanagari digits |
+| `@coldsofttech/saccade-te` | Telugu: InScript or phonetic, with Latin or Telugu digits |
+| `@coldsofttech/saccade-ur` | Urdu: standard or phonetic, with Latin or Urdu digits |
+
+## Keyboard package
+
+`packages/saccade-keyboards` has two entry points:
+
+| Entry | What it is |
+| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `@coldsofttech/saccade-keyboards` | `Keyboard` picked by `language`, with a registry that loads each layout when first needed. |
+| `@coldsofttech/saccade-keyboards/core` | The engine: `Keyboard` for a layout object, `useKeyboard`, `applyKey`, `validateLayout` and the layout helpers. |
+| `@coldsofttech/saccade-keyboards/style.css` | The styles, imported once by the app. |
+
+Each language is its own package, `@coldsofttech/saccade-` (for example `saccade-en`), holding its layouts and depending on `saccade-keyboards/core` as a peer. The layout format is described in [layout format](layout-format.md), and the steps to add a language are in [adding a language](adding-a-language.md).
+
+### Sizing
+
+The keyboard fills the width of its parent and needs at least 430 px, or 600 px with the number pad. At 800 px or less, a CSS container query hides the second and third characters of a key (the Shift symbol and the AltGr corner) until Shift or AltGr is pressed, because the keys are too small to show them without overlapping.
+
+`Keyboard` never edits a field. It reports key presses through `onKey`, and the app applies them, with `applyKey` for a plain input or textarea. Keys sit left to right for every language, because they follow the physical keys, so the keyboard is always `dir="ltr"`.
diff --git a/docs/development.md b/docs/development.md
index 917442a..2d2974f 100644
--- a/docs/development.md
+++ b/docs/development.md
@@ -3,49 +3,53 @@
## Setup
- Node 22 or newer. `.nvmrc` pins 24, the version used for linting, building and releasing.
-- `npm ci` installs every workspace (`packages/*`, `examples/*`).
+- `npm ci` installs every workspace (`packages/*` and `examples/*`).
- `pip install pre-commit && pre-commit install --hook-type pre-commit --hook-type post-commit`.
## Scripts
All scripts run from the repository root.
-| Script | Purpose |
-| --------------------------------- | ---------------------------------------------------------------- |
-| `npm run dev` | Start the demo app (build packages first with `npm run build`) |
-| `npm run build` | Build every package (Vite library mode, then `.d.ts` from JSDoc) |
-| `npm run lint` | ESLint across the repository |
-| `npm run format` / `format:check` | Prettier write / check, including Markdown |
-| `npm test` / `test:coverage` | Vitest; coverage thresholds live in `vitest.config.js` |
-| `npm run check:packages` | `publint` and `@arethetypeswrong/cli` on each built package |
+| Script | Purpose |
+| --------------------------------- | ----------------------------------------------------------------------------------------- |
+| `npm run build` | Build every package (Vite library mode, then `.d.ts` from JSDoc); the engine builds first |
+| `npm run dev` | Start the demo in `examples/demo` (build packages first) |
+| `npm run lint` | ESLint across the repository |
+| `npm run format` / `format:check` | Prettier write / check, including Markdown |
+| `npm test` / `test:coverage` | Vitest; coverage thresholds live in `vitest.config.js` |
+| `npm run check:packages` | `publint` and `@arethetypeswrong/cli` on each built package |
## Conventions
- Plain JavaScript (`.jsx` for components) with ES modules. Types are written as JSDoc and checked through `jsconfig.json`.
- Each package declares `exports`, `types`, `files` and `sideEffects: false`, and builds and tests on its own. Its test environment is set in its `vite.config.js`.
- React and `react-dom` are `peerDependencies` (`^18 || ^19`), never bundled. `npm run check:packages` fails if a build contains React.
-- Components and hooks are named exports and document props with JSDoc typedefs. Styles are CSS modules, shipped as one `style.css` that consumers import (`@scope/pkg/style.css`).
+- Components and hooks are named exports and document props with JSDoc typedefs. Styles are CSS modules, shipped as one `style.css` that consumers import (`@coldsofttech/saccade-keyboards/style.css`).
- Packages are client-only unless stated otherwise. If an entry needs `"use client"`, make sure the build keeps the directive.
- Tests use Vitest, jsdom, Testing Library and `vitest-axe`; `vitest.setup.js` renders everything in StrictMode. Query by role and label.
- Packages never import from an application.
- Prettier owns formatting for all files. markdownlint is not used.
+## Adding a language
+
+See [adding-a-language.md](adding-a-language.md) for a new language, a new arrangement or a new region.
+
## Keeping up with the JS template
This repo is created from `js-SaccadeKeyboards` and receives no automatic updates. When a fix lands there:
1. Compare the changed files with this repo and apply the fix by hand.
-2. Re-check the files this template extends: `eslint.config.js`, `vitest.config.js`, `jsconfig.json`, `.github/workflows/ci.yml`, the example package and `examples/demo`.
+2. Re-check the files this template extends: `eslint.config.js`, `vitest.config.js`, `jsconfig.json`, and `.github/workflows/ci.yml`.
3. Note the change in `CHANGELOG.md`.
## CI
-`ci.yml` runs `lint`, `test` (Node 22, 24, 26 on Ubuntu; Node 24 on Windows and macOS, all with React 19; plus Node 24 with React 18) and `build`. `build` also builds the demo, checks tarball contents and reports gzipped bundle size against `.size-limit.json`. The final `ci` job is the single required check for the `main` ruleset. `audit.yml` runs `npm audit` weekly and when `package-lock.json` changes.
+`ci.yml` runs `lint`, `test` (Node 22, 24, 26 on Ubuntu; Node 24 on Windows and macOS, all with React 19; plus Node 24 with React 18) and `build`. `build` also checks tarball contents, builds the demo against the built packages and reports gzipped bundle size against `.size-limit.json`. A new language package needs an entry in `.size-limit.json`. The final `ci` job is the single required check for the `main` ruleset. `audit.yml` runs `npm audit` weekly and when `package-lock.json` changes.
## Release
1. Set the new `version` in the package's `package.json` and merge it.
-2. Publish a GitHub release tagged `@`, for example `@scope/example-react-package@1.0.0`.
+2. Publish a GitHub release tagged `@`, for example `@coldsofttech/saccade-keyboards@1.0.0`.
3. `release.yml` checks the tag against the package version, builds, and publishes to npm with provenance through the `npm` environment. See [repo-setup.md](repo-setup.md) for the one-time npm setup.
## Cleanup
diff --git a/docs/layout-format.md b/docs/layout-format.md
new file mode 100644
index 0000000..5be9b34
--- /dev/null
+++ b/docs/layout-format.md
@@ -0,0 +1,63 @@
+# Layout format
+
+A keyboard layout is plain data. The keyboard draws it and handles the key presses, so adding a language never needs a change to the engine. A layout has no rendering code.
+
+```js
+export const layout = {
+ id: 'hi',
+ name: 'Hindi',
+ dir: 'ltr',
+ fonts: ['Noto Sans Devanagari'],
+ layers: { letters: [/* rows */], symbols: [/* rows */] },
+ names: { '।': 'danda' },
+};
+```
+
+| Field | Required | Meaning |
+| --------- | -------- | ----------------------------------------------------------------------------------------------------------- |
+| `id` | Yes | Language code. It becomes the `lang` of the keyboard and the package name, `@coldsofttech/saccade-`. |
+| `name` | Yes | Name of the language, used for the default label "`` on-screen keyboard". |
+| `dir` | Yes | Reading direction, `ltr` or `rtl`. The keys themselves always sit left to right, like the physical keys. |
+| `fonts` | No | Font families the keys need. Fonts are never bundled; the app loads them and the layout package lists them. |
+| `layers` | Yes | Layer name to rows of keys. The first layer is shown first. |
+| `decimal` | No | The sign of the decimal key of the number pad (`.`). Spain, for one, uses `,`. |
+| `names` | No | What a screen reader says for a character, merged over the built-in punctuation names. |
+
+## Keys
+
+A row is a list of keys. `width` is the share of the row a key takes; 1 is an ordinary key. A row always fills the width of the keyboard. `rowSpan` makes a key taller: `{ type: 'enter', rowSpan: 2 }` at the end of a row also covers the row below, which then shares only the space that is left. Use it for a tall Enter at the start or the end of a row.
+
+| Key | What it does |
+| --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{ type: 'text', value, shift?, altgr?, capital? }` | Types `value`; `shift` while shift is on, or `altgr` after AltGr (capitalised with shift if it is a letter), or `capital` while caps lock is on (É on the é key of a French keyboard, which types 2 with shift). |
+| `{ type: 'shift' }` | Shift: capitals for the next key only. |
+| `{ type: 'caps' }` | Caps lock: capitals until it is pressed again. |
+| `{ type: 'numlock' }` | Num Lock of the number pad: its `numpad` keys are off while it is off. |
+| `{ type: 'altgr' }` | AltGr: the next key types its `altgr` character. |
+| `{ type: 'space' }` | Types a space. |
+| `{ type: 'backspace' }`, `{ type: 'enter' }` | Reported through `onKey` for the app to apply. |
+| `{ type: 'close' }` | Calls `onClose`. |
+| `{ type: 'layer', to, label, name? }` | Shows another layer and turns shift off. |
+
+The `currencypad` prop of `Keyboard` adds a currency key before every space key at render time, taking 1 unit of the space key's width, so layouts never include it. It shows or hides a row of currency signs above the keys.
+
+A sign that only sits on a letter, such as a vowel sign or a virama, is shown on a dotted circle automatically.
+
+## Helpers
+
+`@coldsofttech/saccade-keyboards/core` exports helpers to write layouts briefly: `keys`, `cased`, `physicalRows`, `numpadRows`, `bottomRow`, `symbolsLayer`, `shiftKey`, `capsKey`, `altGrKey`, `backspaceKey` and `PUNCTUATION_NAMES`.
+
+## Checking a layout
+
+`validateLayout(layout)` returns a list of problems, empty when the layout is valid. Every layout package should assert this in its tests. The `language` prop of the meta `Keyboard` runs it as well and shows the problems instead of a broken keyboard.
+
+## Adding a language
+
+1. Create a package `@coldsofttech/saccade-` that exports the layout as `layout` and depends on `@coldsofttech/saccade-keyboards` as a peer.
+2. Add a test that runs `validateLayout`.
+3. List its font (if any) in `fonts` and document how to load it.
+4. Apps register it with `registerLanguage('', () => import('@coldsofttech/saccade-'))` so `language=""` finds it, or pass the layout through the `layout` prop.
+
+`@coldsofttech/saccade-en` is the reference: it exports `layout` (QWERTY) and `createLayout(type, region)`.
+
+Composition rules (conjuncts, vowel signs joining a consonant) are not part of the format yet. A key types exactly its `value`.
diff --git a/docs/repo-setup.md b/docs/repo-setup.md
index 06bd633..41d214b 100644
--- a/docs/repo-setup.md
+++ b/docs/repo-setup.md
@@ -1,25 +1,16 @@
# Repository setup
-Template repositories copy files only, not settings. After creating a repo from this template, apply the settings below.
-
-## Automated
-
-```bash
-npm run repo:settings # current repo
-npm run repo:settings -- owner/repo # a specific repo
-```
-
-This configures squash-only merging, delete branch on merge, the `skip-changelog` label, secret scanning with push protection, Dependabot alerts and security updates, CodeQL default setup, and the `main` ruleset from `.github/rulesets/main.json`. Requires the `gh` CLI with admin rights.
+The repository settings below are applied by hand in the GitHub UI, or with the `gh` CLI. The `main` ruleset is stored in `.github/rulesets/main.json` and can be imported from Settings > Rules.
## Protections
| Setting | Value | How |
| ------------------------------- | ------------------------ | --------------------------------------------- |
| Dependency graph | On | Default for public repos |
-| Dependabot alerts | On | Script |
-| Dependabot security updates | On | Script |
-| Secret protection | On, with push protection | Script |
-| CodeQL | Default setup | Script |
+| Dependabot alerts | On | Settings > Advanced Security |
+| Dependabot security updates | On | Settings > Advanced Security |
+| Secret protection | On, with push protection | Settings > Advanced Security |
+| CodeQL | Default setup | Settings > Advanced Security |
| Malware alerts | On | Manual: Settings > Advanced Security |
| Copilot Autofix | Off | Manual: Settings > Advanced Security > CodeQL |
| Private vulnerability reporting | On | Manual: Settings > Advanced Security |
@@ -37,9 +28,9 @@ Repository admins can bypass the ruleset through a pull request. This lets a sol
## Manual steps
-- Tick **Template repository** on this repo (Settings > General).
-- Run the **Init** workflow (Actions tab) to replace the template owner and repository name, merge its pull request, then delete `.github/workflows/init.yml`. It requires "Allow GitHub Actions to create and approve pull requests", which the settings script turns on. If the owner is an organization, change `.github/CODEOWNERS` to a team.
-- Fill in the contact method in `CODE_OF_CONDUCT.md`.
+- Allow squash merging only and delete head branches after merge (Settings > General). Create the `skip-changelog` label used by `.github/release.yml`, and the `language`, `region` and `layout` labels used by the issue forms (a label that does not exist is not applied).
+- If the owner is an organization, change `.github/CODEOWNERS` to a team.
- Run `pre-commit install --hook-type pre-commit --hook-type post-commit` locally (the post-commit type is needed for Sweepito cleanup).
- Publish to npm with trusted publishing (no token): create a GitHub environment named `npm` (Settings > Environments), then on npmjs.com open each package's Settings > Trusted publisher and register this repository, the workflow `release.yml` and the `npm` environment. A package must exist on npm before it can be configured, so publish the first version manually with `npm publish --access public`, then register the trusted publisher.
-- CodeQL default setup only works once the repo contains a supported language, so run the script after adding code.
+- There are 7 packages to publish: `saccade-keyboards` and the languages `en`, `es`, `fr`, `hi`, `te` and `ur`. Each needs its own trusted publisher on npm. A new language package needs the same.
+- CodeQL default setup only works once the repo contains a supported language, so enable it after adding code.
diff --git a/docs/security.md b/docs/security.md
index 95ee210..dea4309 100644
--- a/docs/security.md
+++ b/docs/security.md
@@ -1,6 +1,16 @@
# Security
-How this template catches security problems, from the editor to a published package. To report a vulnerability, see [SECURITY.md](../SECURITY.md).
+How Saccade Keyboards stays safe next to text that people type, and how security problems are caught, from the editor to a published package. To report a vulnerability, see [SECURITY.md](../SECURITY.md).
+
+## Handling typed text
+
+The keyboard sits next to fields where people may type passwords or private messages, so it keeps to a few rules.
+
+- It reports a key press only through `onKey`. It stores nothing and sends nothing anywhere.
+- It never reads or changes the field. The host app applies the key, for example with `applyKey`.
+- It makes no network requests. A language is a package the app installs and loads, and a layout is plain data that `validateLayout` checks before it is used.
+- Layout text is rendered as text, never as HTML.
+- Styles are scoped CSS modules, so the keyboard cannot restyle the host page.
## Layers
diff --git a/docs/third-party-notices.md b/docs/third-party-notices.md
new file mode 100644
index 0000000..1b80e09
--- /dev/null
+++ b/docs/third-party-notices.md
@@ -0,0 +1,25 @@
+# Third-party notices
+
+Saccade Keyboards is released under the [MIT license](../LICENSE). This page lists what its packages depend on at runtime and the licenses they use. Development tools (test runners, linters, build tools) are not shipped and are not listed.
+
+None of the packages has a runtime dependency, so there are no third-party licenses to carry along with them.
+
+## Runtime dependencies
+
+| Package | License | Runtime dependencies |
+| --------------------------------- | ------- | -------------------------------- |
+| `@coldsofttech/saccade-keyboards` | MIT | None |
+| `@coldsofttech/saccade-en` | MIT | None (peer: `saccade-keyboards`) |
+| `@coldsofttech/saccade-es` | MIT | None (peer: `saccade-keyboards`) |
+| `@coldsofttech/saccade-fr` | MIT | None (peer: `saccade-keyboards`) |
+| `@coldsofttech/saccade-hi` | MIT | None (peer: `saccade-keyboards`) |
+| `@coldsofttech/saccade-te` | MIT | None (peer: `saccade-keyboards`) |
+| `@coldsofttech/saccade-ur` | MIT | None (peer: `saccade-keyboards`) |
+
+`react` and `react-dom` (18 or 19) are peer dependencies of `@coldsofttech/saccade-keyboards` that your app provides. They are never bundled, and they are released under the MIT license by their own authors.
+
+## Notes
+
+- **Fonts.** No font is bundled. The keys use the fonts of the device by default. If you load a font for a script, for example a Noto font, that font has its own license, which you accept when you add it to your app.
+- **Layouts.** The keyboard layouts are plain data written for this project. They describe common keyboards and published layouts such as QWERTY, AZERTY and InScript, and contain no code from other projects.
+- **Demo and tests.** The demo app and the tests use React, Vite and Vitest, which are development tools and are not part of any published package.
diff --git a/examples/demo/index.html b/examples/demo/index.html
index 5321f20..12fc63d 100644
--- a/examples/demo/index.html
+++ b/examples/demo/index.html
@@ -3,7 +3,7 @@
- Demo
+ Saccade Keyboards demo
diff --git a/examples/demo/package.json b/examples/demo/package.json
index 8b46076..5321af5 100644
--- a/examples/demo/package.json
+++ b/examples/demo/package.json
@@ -8,7 +8,13 @@
"build": "vite build"
},
"dependencies": {
- "@scope/example-react-package": "*",
+ "@coldsofttech/saccade-en": "*",
+ "@coldsofttech/saccade-es": "*",
+ "@coldsofttech/saccade-fr": "*",
+ "@coldsofttech/saccade-hi": "*",
+ "@coldsofttech/saccade-keyboards": "*",
+ "@coldsofttech/saccade-te": "*",
+ "@coldsofttech/saccade-ur": "*",
"react": "^19.1.0",
"react-dom": "^19.1.0"
},
diff --git a/examples/demo/src/main.jsx b/examples/demo/src/main.jsx
index 2eb0ba6..22ee40c 100644
--- a/examples/demo/src/main.jsx
+++ b/examples/demo/src/main.jsx
@@ -1,13 +1,151 @@
-import { StrictMode } from 'react';
+import { StrictMode, useRef, useState } from 'react';
import { createRoot } from 'react-dom/client';
-import { ExampleComponent } from '@scope/example-react-package';
-import '@scope/example-react-package/style.css';
-
-const root = document.getElementById('root');
-if (root) {
- createRoot(root).render(
-
- ,
+import { Keyboard } from '@coldsofttech/saccade-keyboards';
+import { applyKey } from '@coldsofttech/saccade-keyboards/core';
+import '@coldsofttech/saccade-keyboards/style.css';
+import { createLayout as createEnglish } from '@coldsofttech/saccade-en';
+import { createLayout as createSpanish } from '@coldsofttech/saccade-es';
+import { createLayout as createFrench } from '@coldsofttech/saccade-fr';
+import { createLayout as createHindi } from '@coldsofttech/saccade-hi';
+import { createLayout as createTelugu } from '@coldsofttech/saccade-te';
+import { createLayout as createUrdu } from '@coldsofttech/saccade-ur';
+
+const LAYOUTS = new Map([
+ ['English', createEnglish],
+ ['Spanish', createSpanish],
+ ['French', createFrench],
+ // Hindi has no regions: the keyboard is InScript or phonetic and the region picks the digits.
+ ['Hindi', createHindi],
+ ['Telugu', createTelugu],
+ ['Urdu', createUrdu],
+]);
+const LANGUAGES = [...LAYOUTS.keys()];
+const REGIONS = new Map([
+ ['English', ['US', 'GB', 'AU', 'CA', 'IN']],
+ ['Spanish', ['ES', 'MX', 'AR', 'CO', 'US', 'LATAM']],
+ ['French', ['FR', 'BE', 'CA', 'CH']],
+ ['Hindi', ['latin', 'devanagari']],
+ ['Telugu', ['latin', 'telugu']],
+ ['Urdu', ['latin', 'urdu']],
+]);
+// `native` is the order of the keyboard of the region: QWERTY, AZERTY and so on.
+const ARRANGEMENTS = ['native', 'alphabetical'];
+const HINDI_ARRANGEMENTS = ['inscript', 'phonetic'];
+const THEMES = ['light', 'dark'];
+const FONTS = ['native', 'sans', 'serif', 'mono'];
+// The keyboard fills the element it sits in, so the demo sets its width on a wrapper.
+const WIDTHS = ['full', '430 px', '600 px', '800 px', '1000 px'];
+
+function Select({ label, value, options, onChange }) {
+ return (
+
);
}
+
+function Demo() {
+ const field = useRef(null);
+ const [language, setLanguage] = useState('English');
+ const [chosenRegion, setRegion] = useState('US');
+ const [arrangement, setArrangement] = useState('native');
+ const [theme, setTheme] = useState('light');
+ const [font, setFont] = useState('native');
+ const [fontSize, setFontSize] = useState(20);
+ const [width, setWidth] = useState('full');
+ const [shown, setShown] = useState(true);
+ const [numpad, setNumpad] = useState(false);
+ const [currencypad, setCurrencypad] = useState(false);
+
+ // A region from the other language falls back to that language's first one.
+ const arrangements = ['Hindi', 'Telugu'].includes(language) ? HINDI_ARRANGEMENTS : ARRANGEMENTS;
+ const letters = arrangements.includes(arrangement) ? arrangement : arrangements[0];
+ const regions = REGIONS.get(language);
+ const region = regions.includes(chosenRegion) ? chosenRegion : regions[0];
+
+ const onKey = (key) => {
+ const { value, selectionStart, selectionEnd } = field.current;
+ const next = applyKey(value, { start: selectionStart, end: selectionEnd }, key);
+ field.current.value = next.text;
+ field.current.setSelectionRange(next.selection.start, next.selection.end);
+ };
+
+ return (
+
+ {language} keyboard
+ Click in the field, then press keys on the on-screen keyboard.
+
+
+
+
+
+
+
+
+
+
+
+