From 110d69fa7711ce5f64264221395a527fc8774ca2 Mon Sep 17 00:00:00 2001 From: Segun Adebayo Date: Thu, 18 Nov 2021 23:16:58 +0400 Subject: [PATCH 01/23] chore: restructure packages --- .eslintrc | 1 + .prettierrc | 11 ++ package.json | 17 +- packages/core/package.json | 3 - packages/core/src/index.ts | 2 +- packages/frameworks/react/package.json | 3 - packages/frameworks/solid/package.json | 5 +- .../frameworks/solid/src/normalize-props.ts | 2 +- packages/frameworks/svelte/package.json | 3 - packages/frameworks/vue/package.json | 5 +- .../frameworks/vue/src/normalize-props.ts | 2 +- packages/machines/accordion/README.md | 19 +++ packages/machines/accordion/package.json | 37 +++++ .../src}/accordion.connect.ts | 11 +- .../src}/accordion.dom.ts | 4 +- .../src}/accordion.machine.ts | 10 +- .../src}/accordion.types.ts | 2 +- .../{src/accordion => accordion/src}/index.ts | 0 packages/machines/combobox/README.md | 19 +++ packages/machines/combobox/package.json | 38 +++++ .../src}/combobox.connect.ts | 12 +- .../combobox => combobox/src}/combobox.dom.ts | 7 +- .../src}/combobox.machine.ts | 13 +- .../src}/combobox.types.ts | 5 +- .../{src/combobox => combobox/src}/index.ts | 0 packages/machines/dialog/README.md | 19 +++ packages/machines/dialog/package.json | 40 +++++ .../dialog => dialog/src}/dialog.connect.ts | 4 +- .../{src/dialog => dialog/src}/dialog.dom.ts | 0 .../dialog => dialog/src}/dialog.machine.ts | 21 +-- .../dialog => dialog/src}/dialog.store.ts | 6 +- .../{src/dialog => dialog/src}/index.ts | 0 packages/machines/editable/README.md | 19 +++ packages/machines/editable/package.json | 36 ++++ .../src}/editable.connect.ts | 12 +- .../editable => editable/src}/editable.dom.ts | 0 .../src}/editable.machine.ts | 6 +- .../src}/editable.types.ts | 2 +- .../{src/editable => editable/src}/index.ts | 0 packages/machines/menu/README.md | 19 +++ packages/machines/menu/package.json | 36 ++++ .../machines/{src/menu => menu/src}/index.ts | 0 .../{src/menu => menu/src}/menu.connect.ts | 25 ++- .../{src/menu => menu/src}/menu.dom.ts | 5 +- .../{src/menu => menu/src}/menu.machine.ts | 0 .../{src/menu => menu/src}/menu.types.ts | 0 packages/machines/number-input/README.md | 19 +++ packages/machines/number-input/package.json | 38 +++++ .../src}/index.ts | 0 .../src}/number-input.connect.ts | 26 ++- .../src}/number-input.dom.ts | 12 +- .../src}/number-input.machine.ts | 38 +++-- .../src}/number-input.types.ts | 2 +- .../src}/number-input.utils.ts | 8 +- packages/machines/package.json | 5 +- packages/machines/pin-input/README.md | 19 +++ packages/machines/pin-input/package.json | 31 ++++ .../{src/pin-input => pin-input/src}/index.ts | 0 .../src}/pin-input.connect.ts | 2 +- .../src}/pin-input.dom.ts | 3 +- .../src}/pin-input.machine.ts | 5 +- .../src}/pin-input.types.ts | 0 packages/machines/popover/README.md | 19 +++ packages/machines/popover/package.json | 31 ++++ .../{src/popover => popover/src}/index.ts | 0 .../src}/popover.connect.ts | 2 +- .../popover => popover/src}/popover.dom.ts | 0 .../src}/popover.machine.ts | 8 +- packages/machines/pressable/README.md | 19 +++ packages/machines/pressable/package.json | 36 ++++ .../{src/pressable => pressable/src}/index.ts | 0 .../src}/pressable.machine.ts | 0 packages/machines/range-slider/README.md | 19 +++ packages/machines/range-slider/package.json | 36 ++++ .../src}/index.ts | 0 .../src}/range-slider.connect.ts | 8 +- .../src}/range-slider.dom.ts | 6 +- .../src}/range-slider.machine.ts | 2 +- .../src}/range-slider.types.ts | 0 packages/machines/rating/README.md | 19 +++ packages/machines/rating/package.json | 36 ++++ .../{src/rating => rating/src}/index.ts | 0 .../rating => rating/src}/rating.connect.ts | 2 +- .../{src/rating => rating/src}/rating.dom.ts | 5 +- .../rating => rating/src}/rating.machine.ts | 2 +- packages/machines/slider/README.md | 19 +++ packages/machines/slider/package.json | 36 ++++ .../{src/slider => slider/src}/index.ts | 0 .../slider => slider/src}/slider.connect.ts | 2 +- .../{src/slider => slider/src}/slider.dom.ts | 0 .../slider => slider/src}/slider.machine.ts | 2 +- .../slider => slider/src}/slider.types.ts | 0 packages/machines/split-view/README.md | 19 +++ packages/machines/split-view/package.json | 36 ++++ .../split-view => split-view/src}/index.ts | 0 .../src}/split-view.connect.ts | 2 +- .../src}/split-view.dom.ts | 0 .../src}/split-view.machine.ts | 0 packages/machines/src/index.ts | 18 -- packages/machines/src/utils/array.ts | 115 ------------- packages/machines/src/utils/contains.ts | 8 - packages/machines/src/utils/dom-attr.ts | 9 - packages/machines/src/utils/dom-env.ts | 13 -- packages/machines/src/utils/fn.ts | 57 ------- packages/machines/src/utils/focusable.ts | 52 ------ packages/machines/src/utils/index.ts | 9 - packages/machines/src/utils/number.ts | 154 ------------------ packages/machines/src/utils/uuid.ts | 7 - packages/machines/tabs/README.md | 19 +++ packages/machines/tabs/package.json | 36 ++++ .../machines/{src/tabs => tabs/src}/index.ts | 0 .../{src/tabs => tabs/src}/tabs.connect.ts | 2 +- .../{src/tabs => tabs/src}/tabs.dom.ts | 3 +- .../{src/tabs => tabs/src}/tabs.machine.ts | 2 +- packages/machines/tags-input/README.md | 19 +++ packages/machines/tags-input/package.json | 36 ++++ .../tags-input => tags-input/src}/index.ts | 0 .../src}/tags-input.connect.ts | 10 +- .../src}/tags-input.dom.ts | 0 .../src}/tags-input.machine.ts | 0 packages/machines/toast/README.md | 19 +++ packages/machines/toast/package.json | 36 ++++ .../{src/toast => toast/src}/index.ts | 9 +- .../src}/toast-group.connect.ts | 11 +- .../src}/toast-group.machine.ts | 2 +- .../{src/toast => toast/src}/toast.connect.ts | 2 +- .../{src/toast => toast/src}/toast.dom.ts | 0 .../{src/toast => toast/src}/toast.machine.ts | 4 +- .../{src/toast => toast/src}/toast.types.ts | 0 .../{src/toast => toast/src}/toast.utils.ts | 2 +- packages/machines/tooltip/README.md | 19 +++ packages/machines/tooltip/package.json | 36 ++++ .../{src/tooltip => tooltip/src}/index.ts | 0 .../src}/tooltip.connect.ts | 4 +- .../tooltip => tooltip/src}/tooltip.dom.ts | 0 .../src}/tooltip.machine.ts | 2 +- .../tooltip => tooltip/src}/tooltip.store.ts | 0 .../tooltip => tooltip/src}/tooltip.types.ts | 0 packages/utilities/array/chunk/package.json | 4 + packages/utilities/array/package.json | 34 ++++ packages/utilities/array/src/chunk.ts | 10 ++ packages/utilities/array/src/index.ts | 28 ++++ .../utilities/dom/add-listener/package.json | 4 + .../dom/body-pointer-event/package.json | 4 + .../dom/body-scroll-lock/package.json | 4 + .../utilities/dom/computed-style/package.json | 4 + .../utilities/dom/dispatch-event/package.json | 4 + .../utilities/dom/focus-event/package.json | 4 + .../utilities/dom/live-region/package.json | 4 + .../utilities/dom/merge-props/package.json | 4 + .../dom/mutation-observer/package.json | 4 + packages/utilities/dom/nodelist/package.json | 4 + packages/utilities/dom/package.json | 63 +++++++ .../utilities/dom/pointer-event/package.json | 4 + .../utilities/dom/pointerlock/package.json | 4 + .../utilities/dom/scrollable/package.json | 4 + .../dom/src/add-listener.ts} | 23 +-- .../dom/src}/body-pointer-event.ts | 19 ++- .../dom/src}/body-scroll-lock.ts | 19 +-- .../dom/src}/computed-style.ts | 4 +- .../dom/src/dispatch-event.ts} | 0 .../dom/src/focus-event.ts} | 7 +- packages/utilities/dom/src/index.ts | 27 +++ .../dom/src}/keyboard-event.ts | 0 .../dom/src}/live-region.ts | 21 +-- .../dom/src}/merge-props.ts | 0 .../dom/src}/mutation-observer.ts | 9 +- .../utils => utilities/dom/src}/nodelist.ts | 0 .../dom/src}/pointer-event.ts | 12 +- .../dom/src}/pointerlock.ts | 0 packages/utilities/dom/src/query.ts | 28 ++++ packages/utilities/dom/src/scrollable.ts | 36 ++++ packages/utilities/dom/src/sr-only.ts | 11 ++ .../dom/src}/text-selection.ts | 16 +- .../utilities/dom/text-selection/package.json | 4 + packages/utilities/helpers/guard/package.json | 4 + packages/utilities/helpers/package.json | 36 ++++ .../utils => utilities/helpers/src}/guard.ts | 2 - packages/utilities/helpers/src/index.ts | 26 +++ packages/utilities/helpers/src/warning.ts | 19 +++ .../utilities/helpers/warning/package.json | 4 + packages/utilities/number/package.json | 38 +++++ packages/utilities/number/rangy/package.json | 4 + packages/utilities/number/scale/package.json | 4 + packages/utilities/number/src/index.ts | 1 + .../utilities/number/src/number-format.ts | 5 + packages/utilities/number/src/number.ts | 73 +++++++++ packages/utilities/number/src/rangy.ts | 42 +++++ .../number/src/scale.ts} | 0 packages/utilities/number/src/transform.ts | 32 ++++ .../utilities/number/transform/package.json | 4 + packages/utilities/types/README.md | 19 +++ .../types}/package.json | 20 +-- .../types.ts => utilities/types/src/index.ts} | 17 +- .../types/src/prop-types.ts} | 4 +- .../machine-template/package.json.hbs | 3 - .../src/{{machine}}.connect.ts.hbs | 2 +- plop-templates/util-template/README.md.hbs | 6 +- plop-templates/util-template/package.json.hbs | 18 +- scripts/generate-util.ts | 7 +- yarn.lock | 42 ----- 201 files changed, 1792 insertions(+), 837 deletions(-) create mode 100644 .prettierrc create mode 100644 packages/machines/accordion/README.md create mode 100644 packages/machines/accordion/package.json rename packages/machines/{src/accordion => accordion/src}/accordion.connect.ts (91%) rename packages/machines/{src/accordion => accordion/src}/accordion.dom.ts (88%) rename packages/machines/{src/accordion => accordion/src}/accordion.machine.ts (91%) rename packages/machines/{src/accordion => accordion/src}/accordion.types.ts (96%) rename packages/machines/{src/accordion => accordion/src}/index.ts (100%) create mode 100644 packages/machines/combobox/README.md create mode 100644 packages/machines/combobox/package.json rename packages/machines/{src/combobox => combobox/src}/combobox.connect.ts (94%) rename packages/machines/{src/combobox => combobox/src}/combobox.dom.ts (86%) rename packages/machines/{src/combobox => combobox/src}/combobox.machine.ts (94%) rename packages/machines/{src/combobox => combobox/src}/combobox.types.ts (87%) rename packages/machines/{src/combobox => combobox/src}/index.ts (100%) create mode 100644 packages/machines/dialog/README.md create mode 100644 packages/machines/dialog/package.json rename packages/machines/{src/dialog => dialog/src}/dialog.connect.ts (96%) rename packages/machines/{src/dialog => dialog/src}/dialog.dom.ts (100%) rename packages/machines/{src/dialog => dialog/src}/dialog.machine.ts (88%) rename packages/machines/{src/dialog => dialog/src}/dialog.store.ts (82%) rename packages/machines/{src/dialog => dialog/src}/index.ts (100%) create mode 100644 packages/machines/editable/README.md create mode 100644 packages/machines/editable/package.json rename packages/machines/{src/editable => editable/src}/editable.connect.ts (88%) rename packages/machines/{src/editable => editable/src}/editable.dom.ts (100%) rename packages/machines/{src/editable => editable/src}/editable.machine.ts (96%) rename packages/machines/{src/editable => editable/src}/editable.types.ts (98%) rename packages/machines/{src/editable => editable/src}/index.ts (100%) create mode 100644 packages/machines/menu/README.md create mode 100644 packages/machines/menu/package.json rename packages/machines/{src/menu => menu/src}/index.ts (100%) rename packages/machines/{src/menu => menu/src}/menu.connect.ts (91%) rename packages/machines/{src/menu => menu/src}/menu.dom.ts (90%) rename packages/machines/{src/menu => menu/src}/menu.machine.ts (100%) rename packages/machines/{src/menu => menu/src}/menu.types.ts (100%) create mode 100644 packages/machines/number-input/README.md create mode 100644 packages/machines/number-input/package.json rename packages/machines/{src/number-input => number-input/src}/index.ts (100%) rename packages/machines/{src/number-input => number-input/src}/number-input.connect.ts (85%) rename packages/machines/{src/number-input => number-input/src}/number-input.dom.ts (88%) rename packages/machines/{src/number-input => number-input/src}/number-input.machine.ts (93%) rename packages/machines/{src/number-input => number-input/src}/number-input.types.ts (98%) rename packages/machines/{src/number-input => number-input/src}/number-input.utils.ts (84%) create mode 100644 packages/machines/pin-input/README.md create mode 100644 packages/machines/pin-input/package.json rename packages/machines/{src/pin-input => pin-input/src}/index.ts (100%) rename packages/machines/{src/pin-input => pin-input/src}/pin-input.connect.ts (99%) rename packages/machines/{src/pin-input => pin-input/src}/pin-input.dom.ts (74%) rename packages/machines/{src/pin-input => pin-input/src}/pin-input.machine.ts (97%) rename packages/machines/{src/pin-input => pin-input/src}/pin-input.types.ts (100%) create mode 100644 packages/machines/popover/README.md create mode 100644 packages/machines/popover/package.json rename packages/machines/{src/popover => popover/src}/index.ts (100%) rename packages/machines/{src/popover => popover/src}/popover.connect.ts (99%) rename packages/machines/{src/popover => popover/src}/popover.dom.ts (100%) rename packages/machines/{src/popover => popover/src}/popover.machine.ts (95%) create mode 100644 packages/machines/pressable/README.md create mode 100644 packages/machines/pressable/package.json rename packages/machines/{src/pressable => pressable/src}/index.ts (100%) rename packages/machines/{src/pressable => pressable/src}/pressable.machine.ts (100%) create mode 100644 packages/machines/range-slider/README.md create mode 100644 packages/machines/range-slider/package.json rename packages/machines/{src/range-slider => range-slider/src}/index.ts (100%) rename packages/machines/{src/range-slider => range-slider/src}/range-slider.connect.ts (97%) rename packages/machines/{src/range-slider => range-slider/src}/range-slider.dom.ts (96%) rename packages/machines/{src/range-slider => range-slider/src}/range-slider.machine.ts (98%) rename packages/machines/{src/range-slider => range-slider/src}/range-slider.types.ts (100%) create mode 100644 packages/machines/rating/README.md create mode 100644 packages/machines/rating/package.json rename packages/machines/{src/rating => rating/src}/index.ts (100%) rename packages/machines/{src/rating => rating/src}/rating.connect.ts (99%) rename packages/machines/{src/rating => rating/src}/rating.dom.ts (77%) rename packages/machines/{src/rating => rating/src}/rating.machine.ts (98%) create mode 100644 packages/machines/slider/README.md create mode 100644 packages/machines/slider/package.json rename packages/machines/{src/slider => slider/src}/index.ts (100%) rename packages/machines/{src/slider => slider/src}/slider.connect.ts (99%) rename packages/machines/{src/slider => slider/src}/slider.dom.ts (100%) rename packages/machines/{src/slider => slider/src}/slider.machine.ts (97%) rename packages/machines/{src/slider => slider/src}/slider.types.ts (100%) create mode 100644 packages/machines/split-view/README.md create mode 100644 packages/machines/split-view/package.json rename packages/machines/{src/split-view => split-view/src}/index.ts (100%) rename packages/machines/{src/split-view => split-view/src}/split-view.connect.ts (99%) rename packages/machines/{src/split-view => split-view/src}/split-view.dom.ts (100%) rename packages/machines/{src/split-view => split-view/src}/split-view.machine.ts (100%) delete mode 100644 packages/machines/src/index.ts delete mode 100644 packages/machines/src/utils/array.ts delete mode 100644 packages/machines/src/utils/contains.ts delete mode 100644 packages/machines/src/utils/dom-attr.ts delete mode 100644 packages/machines/src/utils/dom-env.ts delete mode 100644 packages/machines/src/utils/fn.ts delete mode 100644 packages/machines/src/utils/focusable.ts delete mode 100644 packages/machines/src/utils/index.ts delete mode 100644 packages/machines/src/utils/number.ts delete mode 100644 packages/machines/src/utils/uuid.ts create mode 100644 packages/machines/tabs/README.md create mode 100644 packages/machines/tabs/package.json rename packages/machines/{src/tabs => tabs/src}/index.ts (100%) rename packages/machines/{src/tabs => tabs/src}/tabs.connect.ts (99%) rename packages/machines/{src/tabs => tabs/src}/tabs.dom.ts (90%) rename packages/machines/{src/tabs => tabs/src}/tabs.machine.ts (98%) create mode 100644 packages/machines/tags-input/README.md create mode 100644 packages/machines/tags-input/package.json rename packages/machines/{src/tags-input => tags-input/src}/index.ts (100%) rename packages/machines/{src/tags-input => tags-input/src}/tags-input.connect.ts (94%) rename packages/machines/{src/tags-input => tags-input/src}/tags-input.dom.ts (100%) rename packages/machines/{src/tags-input => tags-input/src}/tags-input.machine.ts (100%) create mode 100644 packages/machines/toast/README.md create mode 100644 packages/machines/toast/package.json rename packages/machines/{src/toast => toast/src}/index.ts (71%) rename packages/machines/{src/toast => toast/src}/toast-group.connect.ts (95%) rename packages/machines/{src/toast => toast/src}/toast-group.machine.ts (97%) rename packages/machines/{src/toast => toast/src}/toast.connect.ts (98%) rename packages/machines/{src/toast => toast/src}/toast.dom.ts (100%) rename packages/machines/{src/toast => toast/src}/toast.machine.ts (97%) rename packages/machines/{src/toast => toast/src}/toast.types.ts (100%) rename packages/machines/{src/toast => toast/src}/toast.utils.ts (97%) create mode 100644 packages/machines/tooltip/README.md create mode 100644 packages/machines/tooltip/package.json rename packages/machines/{src/tooltip => tooltip/src}/index.ts (100%) rename packages/machines/{src/tooltip => tooltip/src}/tooltip.connect.ts (96%) rename packages/machines/{src/tooltip => tooltip/src}/tooltip.dom.ts (100%) rename packages/machines/{src/tooltip => tooltip/src}/tooltip.machine.ts (98%) rename packages/machines/{src/tooltip => tooltip/src}/tooltip.store.ts (100%) rename packages/machines/{src/tooltip => tooltip/src}/tooltip.types.ts (100%) create mode 100644 packages/utilities/array/chunk/package.json create mode 100644 packages/utilities/array/package.json create mode 100644 packages/utilities/array/src/chunk.ts create mode 100644 packages/utilities/array/src/index.ts create mode 100644 packages/utilities/dom/add-listener/package.json create mode 100644 packages/utilities/dom/body-pointer-event/package.json create mode 100644 packages/utilities/dom/body-scroll-lock/package.json create mode 100644 packages/utilities/dom/computed-style/package.json create mode 100644 packages/utilities/dom/dispatch-event/package.json create mode 100644 packages/utilities/dom/focus-event/package.json create mode 100644 packages/utilities/dom/live-region/package.json create mode 100644 packages/utilities/dom/merge-props/package.json create mode 100644 packages/utilities/dom/mutation-observer/package.json create mode 100644 packages/utilities/dom/nodelist/package.json create mode 100644 packages/utilities/dom/package.json create mode 100644 packages/utilities/dom/pointer-event/package.json create mode 100644 packages/utilities/dom/pointerlock/package.json create mode 100644 packages/utilities/dom/scrollable/package.json rename packages/{machines/src/utils/dom-event.ts => utilities/dom/src/add-listener.ts} (86%) rename packages/{machines/src/utils => utilities/dom/src}/body-pointer-event.ts (78%) rename packages/{machines/src/utils => utilities/dom/src}/body-scroll-lock.ts (88%) rename packages/{machines/src/utils => utilities/dom/src}/computed-style.ts (90%) rename packages/{machines/src/utils/dispatch-input.ts => utilities/dom/src/dispatch-event.ts} (100%) rename packages/{machines/src/utils/validate-blur.ts => utilities/dom/src/focus-event.ts} (65%) create mode 100644 packages/utilities/dom/src/index.ts rename packages/{machines/src/utils => utilities/dom/src}/keyboard-event.ts (100%) rename packages/{machines/src/utils => utilities/dom/src}/live-region.ts (70%) rename packages/{machines/src/utils => utilities/dom/src}/merge-props.ts (100%) rename packages/{machines/src/utils => utilities/dom/src}/mutation-observer.ts (63%) rename packages/{machines/src/utils => utilities/dom/src}/nodelist.ts (100%) rename packages/{machines/src/utils => utilities/dom/src}/pointer-event.ts (86%) rename packages/{machines/src/utils => utilities/dom/src}/pointerlock.ts (100%) create mode 100644 packages/utilities/dom/src/query.ts create mode 100644 packages/utilities/dom/src/scrollable.ts create mode 100644 packages/utilities/dom/src/sr-only.ts rename packages/{machines/src/utils => utilities/dom/src}/text-selection.ts (56%) create mode 100644 packages/utilities/dom/text-selection/package.json create mode 100644 packages/utilities/helpers/guard/package.json create mode 100644 packages/utilities/helpers/package.json rename packages/{machines/src/utils => utilities/helpers/src}/guard.ts (93%) create mode 100644 packages/utilities/helpers/src/index.ts create mode 100644 packages/utilities/helpers/src/warning.ts create mode 100644 packages/utilities/helpers/warning/package.json create mode 100644 packages/utilities/number/package.json create mode 100644 packages/utilities/number/rangy/package.json create mode 100644 packages/utilities/number/scale/package.json create mode 100644 packages/utilities/number/src/index.ts create mode 100644 packages/utilities/number/src/number-format.ts create mode 100644 packages/utilities/number/src/number.ts create mode 100644 packages/utilities/number/src/rangy.ts rename packages/{machines/src/utils/number-scale.ts => utilities/number/src/scale.ts} (100%) create mode 100644 packages/utilities/number/src/transform.ts create mode 100644 packages/utilities/number/transform/package.json create mode 100644 packages/utilities/types/README.md rename packages/{prop-types => utilities/types}/package.json (53%) rename packages/{machines/src/utils/types.ts => utilities/types/src/index.ts} (66%) rename packages/{prop-types/src/index.ts => utilities/types/src/prop-types.ts} (98%) diff --git a/.eslintrc b/.eslintrc index 6b70425072..e23755388f 100644 --- a/.eslintrc +++ b/.eslintrc @@ -45,6 +45,7 @@ "import/no-named-as-default": "off", "prefer-object-spread": "off", "arrow-body-style": "off", + "import/namespace": "off", "@typescript-eslint/no-unused-vars": [ "error", { diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..03b2e3ad66 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,11 @@ +{ + "bracketSpacing": true, + "jsxBracketSameLine": false, + "jsxSingleQuote": false, + "printWidth": 180, + "proseWrap": "always", + "semi": false, + "singleQuote": false, + "tabWidth": 2, + "trailingComma": "all" +} diff --git a/package.json b/package.json index 4a317f4b96..f287f80025 100644 --- a/package.json +++ b/package.json @@ -97,7 +97,8 @@ "packages": [ "packages/prop-types", "packages/core", - "packages/machines", + "packages/machines/*", + "packages/utilities/*", "packages/frameworks/*" ] }, @@ -105,8 +106,9 @@ "packages": [ "packages/prop-types", "packages/core", - "packages/machines", + "packages/machines/*", "packages/frameworks/*", + "packages/utilities/*", "examples/*" ] }, @@ -118,17 +120,6 @@ "prettier --write" ] }, - "prettier": { - "bracketSpacing": true, - "jsxBracketSameLine": false, - "jsxSingleQuote": false, - "printWidth": 120, - "proseWrap": "always", - "semi": false, - "singleQuote": false, - "tabWidth": 2, - "trailingComma": "all" - }, "commitlint": { "extends": [ "@commitlint/config-conventional" diff --git a/packages/core/package.json b/packages/core/package.json index 21ac3002c2..50cade4ecd 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -24,9 +24,6 @@ "bugs": { "url": "https://github.com/chakra-ui/core/issues" }, - "scripts": { - "clean": "rimraf dist" - }, "dependencies": { "klona": "^2.0.4", "tiny-fn": "^0.0.2", diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 96d2d2543b..9991354278 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,4 +1,4 @@ -export { ref, subscribe, snapshot } from "valtio/vanilla" +export { ref, subscribe, snapshot, proxy } from "valtio/vanilla" export { guards } from "./guard-utils" export { choose } from "./action-utils" export * from "./machine" diff --git a/packages/frameworks/react/package.json b/packages/frameworks/react/package.json index 2bde66365b..141c6e6040 100644 --- a/packages/frameworks/react/package.json +++ b/packages/frameworks/react/package.json @@ -24,9 +24,6 @@ "bugs": { "url": "https://github.com/chakra-ui/ui-machines/issues" }, - "scripts": { - "clean": "rimraf dist" - }, "dependencies": { "@ui-machines/core": "0.0.0", "tiny-guard": "^0.0.3", diff --git a/packages/frameworks/solid/package.json b/packages/frameworks/solid/package.json index 4762f82b07..afc7de539b 100644 --- a/packages/frameworks/solid/package.json +++ b/packages/frameworks/solid/package.json @@ -24,12 +24,9 @@ "bugs": { "url": "https://github.com/chakra-ui/ui-machines/issues" }, - "scripts": { - "clean": "rimraf dist" - }, "dependencies": { "@ui-machines/core": "0.0.0", - "@ui-machines/prop-types": "0.0.0", + "@ui-machines/types": "0.0.0", "hyphenate-style-name": "^1.0.4", "tiny-guard": "^0.0.3", "valtio": "^1.2.5" diff --git a/packages/frameworks/solid/src/normalize-props.ts b/packages/frameworks/solid/src/normalize-props.ts index d5bb8abfa1..a2472acaa6 100644 --- a/packages/frameworks/solid/src/normalize-props.ts +++ b/packages/frameworks/solid/src/normalize-props.ts @@ -1,4 +1,4 @@ -import { createNormalizer } from "@ui-machines/prop-types" +import { createNormalizer } from "@ui-machines/types" import { isObject, isString } from "tiny-guard" import { cssify } from "./cssify" diff --git a/packages/frameworks/svelte/package.json b/packages/frameworks/svelte/package.json index 8ba375d1f8..375b52c23c 100644 --- a/packages/frameworks/svelte/package.json +++ b/packages/frameworks/svelte/package.json @@ -24,9 +24,6 @@ "bugs": { "url": "https://github.com/chakra-ui/ui-machines/issues" }, - "scripts": { - "clean": "rimraf dist" - }, "dependencies": { "@ui-machines/core": "0.0.0" }, diff --git a/packages/frameworks/vue/package.json b/packages/frameworks/vue/package.json index 5490fe171b..93008f13f5 100644 --- a/packages/frameworks/vue/package.json +++ b/packages/frameworks/vue/package.json @@ -24,12 +24,9 @@ "bugs": { "url": "https://github.com/chakra-ui/ui-machines/issues" }, - "scripts": { - "clean": "rimraf dist" - }, "dependencies": { "@ui-machines/core": "0.0.0", - "@ui-machines/prop-types": "0.0.0", + "@ui-machines/types": "0.0.0", "valtio": "^1.2.5" }, "devDependencies": { diff --git a/packages/frameworks/vue/src/normalize-props.ts b/packages/frameworks/vue/src/normalize-props.ts index ad1d02ae24..5736c8cf53 100644 --- a/packages/frameworks/vue/src/normalize-props.ts +++ b/packages/frameworks/vue/src/normalize-props.ts @@ -1,4 +1,4 @@ -import { createNormalizer } from "@ui-machines/prop-types" +import { createNormalizer } from "@ui-machines/types" type Dict = Record diff --git a/packages/machines/accordion/README.md b/packages/machines/accordion/README.md new file mode 100644 index 0000000000..8d20d47293 --- /dev/null +++ b/packages/machines/accordion/README.md @@ -0,0 +1,19 @@ +# @ui-machines/accordion + +Core logic for the accordion widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/accordion +# or +npm i @ui-machines/accordion +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/accordion/package.json b/packages/machines/accordion/package.json new file mode 100644 index 0000000000..e4dbcc6a0f --- /dev/null +++ b/packages/machines/accordion/package.json @@ -0,0 +1,37 @@ +{ + "name": "@ui-machines/accordion", + "version": "0.0.0", + "description": "Core logic for the accordion widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "accordion" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-accordion.cjs.js", + "types": "dist/ui-machines-accordion.cjs.d.ts", + "module": "dist/ui-machines-accordion.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/accordion", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "dependencies": { + "@ui-machines/array-utils": "^0.0.0", + "@ui-machines/core": "^0.0.0", + "@ui-machines/dom-utils": "^0.0.0", + "@ui-machines/types": "^0.0.0" + } +} diff --git a/packages/machines/src/accordion/accordion.connect.ts b/packages/machines/accordion/src/accordion.connect.ts similarity index 91% rename from packages/machines/src/accordion/accordion.connect.ts rename to packages/machines/accordion/src/accordion.connect.ts index ccafb164b8..485a8c1803 100644 --- a/packages/machines/src/accordion/accordion.connect.ts +++ b/packages/machines/accordion/src/accordion.connect.ts @@ -1,14 +1,9 @@ -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" -import type { EventKeyMap } from "../utils" -import { dataAttr, getEventKey } from "../utils" +import { dataAttr, getEventKey } from "@ui-machines/dom-utils" +import { EventKeyMap, normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { dom } from "./accordion.dom" import type { AccordionItemProps, AccordionSend, AccordionState } from "./accordion.types" -export function accordionConnect( - state: AccordionState, - send: AccordionSend, - normalize = normalizeProp, -) { +export function accordionConnect(state: AccordionState, send: AccordionSend, normalize = normalizeProp) { const { context: ctx } = state function getItemState(props: AccordionItemProps) { diff --git a/packages/machines/src/accordion/accordion.dom.ts b/packages/machines/accordion/src/accordion.dom.ts similarity index 88% rename from packages/machines/src/accordion/accordion.dom.ts rename to packages/machines/accordion/src/accordion.dom.ts index bdd7c5effe..b23a3aa8d4 100644 --- a/packages/machines/src/accordion/accordion.dom.ts +++ b/packages/machines/accordion/src/accordion.dom.ts @@ -1,5 +1,5 @@ -import { queryElements, nextById, prevById } from "../utils/nodelist" -import { first, last } from "../utils/array" +import { queryElements, nextById, prevById } from "@ui-machines/dom-utils/nodelist" +import { first, last } from "@ui-machines/array-utils" import type { AccordionMachineContext as Ctx } from "./accordion.types" export const dom = { diff --git a/packages/machines/src/accordion/accordion.machine.ts b/packages/machines/accordion/src/accordion.machine.ts similarity index 91% rename from packages/machines/src/accordion/accordion.machine.ts rename to packages/machines/accordion/src/accordion.machine.ts index d1ab43db87..261dcc9458 100644 --- a/packages/machines/src/accordion/accordion.machine.ts +++ b/packages/machines/accordion/src/accordion.machine.ts @@ -1,7 +1,5 @@ +import { add, remove, toArray } from "@ui-machines/array-utils" import { createMachine, guards, ref } from "@ui-machines/core" -import { uuid } from "../utils" -import { add, remove, toArray } from "../utils/array" -import { isArray } from "../utils/guard" import { dom } from "./accordion.dom" import { AccordionMachineContext, AccordionMachineState } from "./accordion.types" @@ -14,7 +12,7 @@ export const accordionMachine = createMachine !!ctx.collapsible || !!ctx.multiple, - isExpanded: (ctx, evt) => (isArray(ctx.value) ? ctx.value.includes(evt.value) : ctx.value === evt.value), + isExpanded: (ctx, evt) => { + return Array.isArray(ctx.value) ? ctx.value.includes(evt.value) : ctx.value === evt.value + }, }, actions: { invokeOnChange(ctx) { diff --git a/packages/machines/src/accordion/accordion.types.ts b/packages/machines/accordion/src/accordion.types.ts similarity index 96% rename from packages/machines/src/accordion/accordion.types.ts rename to packages/machines/accordion/src/accordion.types.ts index 3693f25ab0..8d9651267a 100644 --- a/packages/machines/src/accordion/accordion.types.ts +++ b/packages/machines/accordion/src/accordion.types.ts @@ -1,5 +1,5 @@ import type { StateMachine as S } from "@ui-machines/core" -import type { Context } from "../utils" +import type { Context } from "@ui-machines/types" export type AccordionMachineContext = Context<{ /** diff --git a/packages/machines/src/accordion/index.ts b/packages/machines/accordion/src/index.ts similarity index 100% rename from packages/machines/src/accordion/index.ts rename to packages/machines/accordion/src/index.ts diff --git a/packages/machines/combobox/README.md b/packages/machines/combobox/README.md new file mode 100644 index 0000000000..9179433610 --- /dev/null +++ b/packages/machines/combobox/README.md @@ -0,0 +1,19 @@ +# @ui-machines/combobox + +Core logic for the combobox widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/combobox +# or +npm i @ui-machines/combobox +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/combobox/package.json b/packages/machines/combobox/package.json new file mode 100644 index 0000000000..50c4eab380 --- /dev/null +++ b/packages/machines/combobox/package.json @@ -0,0 +1,38 @@ +{ + "name": "@ui-machines/combobox", + "version": "0.0.0", + "description": "Core logic for the combobox widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "combobox" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-combobox.cjs.js", + "types": "dist/ui-machines-combobox.cjs.d.ts", + "module": "dist/ui-machines-combobox.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/combobox", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "dependencies": { + "@ui-machines/array-utils": "^0.0.0", + "@ui-machines/core": "^0.0.0", + "@ui-machines/dom-utils": "^0.0.0", + "@ui-machines/types": "^0.0.0", + "scroll-into-view-if-needed": "^2.2.28" + } +} diff --git a/packages/machines/src/combobox/combobox.connect.ts b/packages/machines/combobox/src/combobox.connect.ts similarity index 94% rename from packages/machines/src/combobox/combobox.connect.ts rename to packages/machines/combobox/src/combobox.connect.ts index d94b13f314..9e28c5eeef 100644 --- a/packages/machines/src/combobox/combobox.connect.ts +++ b/packages/machines/combobox/src/combobox.connect.ts @@ -1,14 +1,10 @@ -import type { EventKeyMap } from "../utils" -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" -import { dataAttr, getEventKey, srOnlyStyle, validateBlur } from "../utils" +import { dataAttr, getEventKey, srOnlyStyle } from "@ui-machines/dom-utils" +import { validateBlur } from "@ui-machines/dom-utils/focus-event" +import { EventKeyMap, normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { dom } from "./combobox.dom" import { ComboboxOptionProps, ComboboxSend, ComboboxState } from "./combobox.types" -export function comboboxConnect( - state: ComboboxState, - send: ComboboxSend, - normalize = normalizeProp, -) { +export function comboboxConnect(state: ComboboxState, send: ComboboxSend, normalize = normalizeProp) { const { context: ctx } = state const expanded = state.matches("interacting", "navigating", "suggesting") diff --git a/packages/machines/src/combobox/combobox.dom.ts b/packages/machines/combobox/src/combobox.dom.ts similarity index 86% rename from packages/machines/src/combobox/combobox.dom.ts rename to packages/machines/combobox/src/combobox.dom.ts index 367408ae53..ba6760d766 100644 --- a/packages/machines/src/combobox/combobox.dom.ts +++ b/packages/machines/combobox/src/combobox.dom.ts @@ -1,5 +1,5 @@ -import { first, last } from "../utils/array" -import { nextById, prevById, queryElements } from "../utils/nodelist" +import { first, last } from "@ui-machines/array-utils" +import { nextById, prevById, queryElements } from "@ui-machines/dom-utils/nodelist" import type { ComboboxMachineContext as Ctx } from "./combobox.types" export const dom = { @@ -21,8 +21,7 @@ export const dom = { getClearBtnEl: (ctx: Ctx) => dom.getDoc(ctx).getElementById(dom.getClearBtnId(ctx)), getElements: (ctx: Ctx) => queryElements(dom.getListboxEl(ctx), "[role=option]:not([disabled])"), - getFocusedOptionEl: (ctx: Ctx) => - dom.getListboxEl(ctx)?.querySelector(`[role=option][id=${ctx.activeId}]`), + getFocusedOptionEl: (ctx: Ctx) => dom.getListboxEl(ctx)?.querySelector(`[role=option][id=${ctx.activeId}]`), getFirstEl: (ctx: Ctx) => first(dom.getElements(ctx)), getLastEl: (ctx: Ctx) => last(dom.getElements(ctx)), diff --git a/packages/machines/src/combobox/combobox.machine.ts b/packages/machines/combobox/src/combobox.machine.ts similarity index 94% rename from packages/machines/src/combobox/combobox.machine.ts rename to packages/machines/combobox/src/combobox.machine.ts index 6ff9dd3220..07f9abe8b0 100644 --- a/packages/machines/src/combobox/combobox.machine.ts +++ b/packages/machines/combobox/src/combobox.machine.ts @@ -1,8 +1,10 @@ import { createMachine, guards, ref } from "@ui-machines/core" +import { nextTick } from "@ui-machines/dom-utils" +import { LiveRegion } from "@ui-machines/dom-utils/live-region" +import { observeAttributes } from "@ui-machines/dom-utils/mutation-observer" +import { trackPointerDown } from "@ui-machines/dom-utils/pointer-event" +import { isApple, isFunction } from "@ui-machines/utils/guard" import scrollIntoView from "scroll-into-view-if-needed" -import { nextTick } from "tiny-fn" -import { LiveRegion, observeAttributes, trackPointerDown, uuid } from "../utils" -import { isApple, isFunction } from "../utils/guard" import { dom } from "./combobox.dom" import { ComboboxMachineContext, ComboboxMachineState } from "./combobox.types" @@ -13,7 +15,7 @@ export const comboboxMachine = createMachine ctx.inputValue.trim(), isInputValueEmpty: (ctx) => ctx.inputValue.trim().length === 0, - hintValue: (ctx) => - ctx.navigationValue ? ctx.inputValue + ctx.navigationValue.substr(ctx.inputValue.length) : "", + hintValue: (ctx) => (ctx.navigationValue ? ctx.inputValue + ctx.navigationValue.substr(ctx.inputValue.length) : ""), isInteractive: (ctx) => !(ctx.readonly || ctx.disabled), }, on: { diff --git a/packages/machines/src/combobox/combobox.types.ts b/packages/machines/combobox/src/combobox.types.ts similarity index 87% rename from packages/machines/src/combobox/combobox.types.ts rename to packages/machines/combobox/src/combobox.types.ts index 9567ba4a2a..fc232c23bb 100644 --- a/packages/machines/src/combobox/combobox.types.ts +++ b/packages/machines/combobox/src/combobox.types.ts @@ -1,5 +1,6 @@ -import { StateMachine as S } from "@ui-machines/core" -import { Context, LiveRegion } from "../utils" +import type { StateMachine as S } from "@ui-machines/core" +import type { LiveRegion } from "@ui-machines/dom-utils/live-region" +import type { Context } from "@ui-machines/types" export type ComboboxMachineState = { value: "unknown" | "idle" | "focused" | "suggesting" | "navigating" | "interacting" diff --git a/packages/machines/src/combobox/index.ts b/packages/machines/combobox/src/index.ts similarity index 100% rename from packages/machines/src/combobox/index.ts rename to packages/machines/combobox/src/index.ts diff --git a/packages/machines/dialog/README.md b/packages/machines/dialog/README.md new file mode 100644 index 0000000000..0377aaf0f4 --- /dev/null +++ b/packages/machines/dialog/README.md @@ -0,0 +1,19 @@ +# @ui-machines/dialog + +Core logic for the dialog widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/dialog +# or +npm i @ui-machines/dialog +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/dialog/package.json b/packages/machines/dialog/package.json new file mode 100644 index 0000000000..a8991b49e8 --- /dev/null +++ b/packages/machines/dialog/package.json @@ -0,0 +1,40 @@ +{ + "name": "@ui-machines/dialog", + "version": "0.0.0", + "description": "Core logic for the dialog widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "dialog" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-dialog.cjs.js", + "types": "dist/ui-machines-dialog.cjs.d.ts", + "module": "dist/ui-machines-dialog.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/dialog", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "dependencies": { + "@ui-machines/array-utils": "^0.0.0", + "@ui-machines/core": "^0.0.0", + "@ui-machines/dom-utils": "^0.0.0", + "@ui-machines/types": "^0.0.0", + "scroll-into-view-if-needed": "^2.2.28", + "aria-hidden": "^1.1.3", + "focus-trap": "^6.7.1" + } +} diff --git a/packages/machines/src/dialog/dialog.connect.ts b/packages/machines/dialog/src/dialog.connect.ts similarity index 96% rename from packages/machines/src/dialog/dialog.connect.ts rename to packages/machines/dialog/src/dialog.connect.ts index d32d0b48a2..ce7972098a 100644 --- a/packages/machines/src/dialog/dialog.connect.ts +++ b/packages/machines/dialog/src/dialog.connect.ts @@ -1,6 +1,6 @@ import { StateMachine as S } from "@ui-machines/core" -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" -import { ariaAttr } from "../utils" +import { ariaAttr } from "@ui-machines/dom-utils" +import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { dom } from "./dialog.dom" import { DialogMachineContext, DialogMachineState } from "./dialog.machine" diff --git a/packages/machines/src/dialog/dialog.dom.ts b/packages/machines/dialog/src/dialog.dom.ts similarity index 100% rename from packages/machines/src/dialog/dialog.dom.ts rename to packages/machines/dialog/src/dialog.dom.ts diff --git a/packages/machines/src/dialog/dialog.machine.ts b/packages/machines/dialog/src/dialog.machine.ts similarity index 88% rename from packages/machines/src/dialog/dialog.machine.ts rename to packages/machines/dialog/src/dialog.machine.ts index af455d2384..23181153b6 100644 --- a/packages/machines/src/dialog/dialog.machine.ts +++ b/packages/machines/dialog/src/dialog.machine.ts @@ -1,11 +1,10 @@ -import { createMachine, ref } from "@ui-machines/core" +import { createMachine, ref, subscribe } from "@ui-machines/core" +import { nextTick } from "@ui-machines/dom-utils" +import { addDomEvent } from "@ui-machines/dom-utils/add-listener" +import { preventBodyScroll } from "@ui-machines/dom-utils/body-scroll-lock" +import { Context } from "@ui-machines/types" import { hideOthers } from "aria-hidden" import { createFocusTrap, FocusTrap } from "focus-trap" -import { addDomEvent } from "tiny-dom-event" -import { nextTick, noop } from "tiny-fn" -import { subscribe } from "valtio" -import { Context } from "../utils" -import { preventBodyScroll } from "../utils/body-scroll-lock" import { dom } from "./dialog.dom" import { dialogStore } from "./dialog.store" @@ -56,14 +55,10 @@ export const dialogMachine = createMachine { - if (!ctx.isTopMostDialog || !ctx.trapFocus) return noop + if (!ctx.isTopMostDialog || !ctx.trapFocus) return const el = dom.getContentEl(ctx) trap = createFocusTrap(el, { document: dom.getDoc(ctx), @@ -140,7 +135,7 @@ export const dialogMachine = createMachine { ctx.hasTitle = !!dom.getTitleEl(ctx) ctx.hasDescription = !!dom.getDescriptionEl(ctx) diff --git a/packages/machines/src/dialog/dialog.store.ts b/packages/machines/dialog/src/dialog.store.ts similarity index 82% rename from packages/machines/src/dialog/dialog.store.ts rename to packages/machines/dialog/src/dialog.store.ts index 73fc7474f8..2847e7b596 100644 --- a/packages/machines/src/dialog/dialog.store.ts +++ b/packages/machines/dialog/src/dialog.store.ts @@ -1,5 +1,4 @@ -import { last } from "tiny-array" -import { proxy } from "valtio" +import { proxy } from "@ui-machines/core" type StoreItem = { id: string; close: VoidFunction } @@ -13,7 +12,8 @@ type Store = { export const dialogStore = proxy({ value: [], isTopMost(id) { - return last(this.value)?.id === id + const lastModal = this.value[this.value.length - 1] + return lastModal?.id === id }, add(item: StoreItem) { this.value.push(item) diff --git a/packages/machines/src/dialog/index.ts b/packages/machines/dialog/src/index.ts similarity index 100% rename from packages/machines/src/dialog/index.ts rename to packages/machines/dialog/src/index.ts diff --git a/packages/machines/editable/README.md b/packages/machines/editable/README.md new file mode 100644 index 0000000000..30840b4284 --- /dev/null +++ b/packages/machines/editable/README.md @@ -0,0 +1,19 @@ +# @ui-machines/editable + +Core logic for the editable widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/editable +# or +npm i @ui-machines/editable +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/editable/package.json b/packages/machines/editable/package.json new file mode 100644 index 0000000000..ddcb06c6e3 --- /dev/null +++ b/packages/machines/editable/package.json @@ -0,0 +1,36 @@ +{ + "name": "@ui-machines/editable", + "version": "0.0.0", + "description": "Core logic for the editable widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "editable" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-editable.cjs.js", + "types": "dist/ui-machines-editable.cjs.d.ts", + "module": "dist/ui-machines-editable.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/editable", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "dependencies": { + "@ui-machines/core": "^0.0.0", + "@ui-machines/dom-utils": "^0.0.0", + "@ui-machines/types": "^0.0.0" + } +} diff --git a/packages/machines/src/editable/editable.connect.ts b/packages/machines/editable/src/editable.connect.ts similarity index 88% rename from packages/machines/src/editable/editable.connect.ts rename to packages/machines/editable/src/editable.connect.ts index 2bba3f4b0c..36d4a8b274 100644 --- a/packages/machines/src/editable/editable.connect.ts +++ b/packages/machines/editable/src/editable.connect.ts @@ -1,14 +1,10 @@ -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" -import { ariaAttr, validateBlur } from "../utils" -import type { EventKeyMap } from "../utils/types" +import { ariaAttr } from "@ui-machines/dom-utils" +import { validateBlur } from "@ui-machines/dom-utils/focus-event" +import { EventKeyMap, normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { dom } from "./editable.dom" import { EditableSend, EditableState } from "./editable.types" -export function editableConnect( - state: EditableState, - send: EditableSend, - normalize = normalizeProp, -) { +export function editableConnect(state: EditableState, send: EditableSend, normalize = normalizeProp) { const { context: ctx } = state const isEditing = state.matches("edit") diff --git a/packages/machines/src/editable/editable.dom.ts b/packages/machines/editable/src/editable.dom.ts similarity index 100% rename from packages/machines/src/editable/editable.dom.ts rename to packages/machines/editable/src/editable.dom.ts diff --git a/packages/machines/src/editable/editable.machine.ts b/packages/machines/editable/src/editable.machine.ts similarity index 96% rename from packages/machines/src/editable/editable.machine.ts rename to packages/machines/editable/src/editable.machine.ts index dfecefb8ee..0da798b406 100644 --- a/packages/machines/src/editable/editable.machine.ts +++ b/packages/machines/editable/src/editable.machine.ts @@ -1,6 +1,6 @@ import { choose, createMachine, guards, ref } from "@ui-machines/core" -import { nextTick } from "tiny-fn" -import { trackPointerDown, uuid } from "../utils" +import { nextTick } from "@ui-machines/dom-utils" +import { trackPointerDown } from "@ui-machines/dom-utils/pointer-event" import { dom } from "./editable.dom" import { EditableMachineContext, EditableMachineState } from "./editable.types" @@ -13,7 +13,7 @@ export const editableMachine = createMachine", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-menu.cjs.js", + "types": "dist/ui-machines-menu.cjs.d.ts", + "module": "dist/ui-machines-menu.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/menu", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "dependencies": { + "@ui-machines/core": "^0.0.0", + "@ui-machines/dom-utils": "^0.0.0", + "@ui-machines/types": "^0.0.0" + } +} diff --git a/packages/machines/src/menu/index.ts b/packages/machines/menu/src/index.ts similarity index 100% rename from packages/machines/src/menu/index.ts rename to packages/machines/menu/src/index.ts diff --git a/packages/machines/src/menu/menu.connect.ts b/packages/machines/menu/src/menu.connect.ts similarity index 91% rename from packages/machines/src/menu/menu.connect.ts rename to packages/machines/menu/src/menu.connect.ts index 46b775e979..2a142ff380 100644 --- a/packages/machines/src/menu/menu.connect.ts +++ b/packages/machines/menu/src/menu.connect.ts @@ -1,18 +1,12 @@ -import { contains } from "tiny-dom-query" -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" -import { cast } from "tiny-fn" -import { isLeftClick } from "tiny-guard" +import { contains, dataAttr, getEventKey } from "@ui-machines/dom-utils" +import { validateBlur } from "@ui-machines/dom-utils/focus-event" +import { isLeftClick } from "@ui-machines/utils/guard" +import { EventKeyMap, getNativeEvent, normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { fromPointerEvent } from "tiny-point/dom" -import type { EventKeyMap } from "../utils" -import { dataAttr, getEventKey, validateBlur } from "../utils" import { dom } from "./menu.dom" import { MenuItemProps, MenuMachine, MenuOptionItemProps, MenuSend, MenuState } from "./menu.types" -export function menuConnect( - state: MenuState, - send: MenuSend, - normalize = normalizeProp, -) { +export function menuConnect(state: MenuState, send: MenuSend, normalize = normalizeProp) { const { context: ctx } = state const isOpen = state.matches("open", "closing") const isSubmenu = ctx.parent != null @@ -33,7 +27,8 @@ export function menuConnect( send({ type: "ITEM_CLICK", target: event.currentTarget }) }, onPointerUp(event) { - if (!isLeftClick(cast(event)) || disabled) return + const evt = (event.nativeEvent ?? event) as PointerEvent + if (!isLeftClick(evt) || disabled) return event.currentTarget.click() }, onPointerLeave(event) { @@ -86,17 +81,19 @@ export function menuConnect( }) }, onPointerLeave(event) { + const evt = getNativeEvent(event) const disabled = dom.isTargetDisabled(event.currentTarget) if (disabled || !isSubmenu) return send({ type: "TRIGGER_POINTERLEAVE", target: event.currentTarget, - point: fromPointerEvent(cast(event)), + point: fromPointerEvent(evt), }) }, onPointerDown(event) { + const evt = getNativeEvent(event) const disabled = dom.isTargetDisabled(event.currentTarget) - if (!isLeftClick(cast(event)) || disabled) return + if (!isLeftClick(evt) || disabled) return send({ type: "TRIGGER_CLICK", target: event.currentTarget }) }, onBlur() { diff --git a/packages/machines/src/menu/menu.dom.ts b/packages/machines/menu/src/menu.dom.ts similarity index 90% rename from packages/machines/src/menu/menu.dom.ts rename to packages/machines/menu/src/menu.dom.ts index 721e95192f..5b1c6f47b6 100644 --- a/packages/machines/src/menu/menu.dom.ts +++ b/packages/machines/menu/src/menu.dom.ts @@ -1,6 +1,6 @@ import { first, last } from "tiny-array" import { isElement } from "tiny-guard" -import { findByText, nextById, prevById, queryElements } from "../utils/nodelist" +import { findByText, nextById, prevById, queryElements } from "../../../utilities/dom/src/nodelist" import { MenuMachineContext as Ctx } from "./menu.types" type HTMLEl = HTMLElement | null @@ -16,8 +16,7 @@ export const dom = { getActiveItemEl: (ctx: Ctx) => (ctx.activeId ? dom.getDoc(ctx).getElementById(ctx.activeId) : null), getActiveElement: (ctx: Ctx) => dom.getDoc(ctx).activeElement as HTMLEl, - getElements: (ctx: Ctx) => - queryElements(dom.getMenuEl(ctx), `[role=menuitem][data-ownedby=${dom.getMenuId(ctx)}]:not([data-disabled])`), + getElements: (ctx: Ctx) => queryElements(dom.getMenuEl(ctx), `[role=menuitem][data-ownedby=${dom.getMenuId(ctx)}]:not([data-disabled])`), getFirstEl: (ctx: Ctx) => first(dom.getElements(ctx)), getLastEl: (ctx: Ctx) => last(dom.getElements(ctx)), diff --git a/packages/machines/src/menu/menu.machine.ts b/packages/machines/menu/src/menu.machine.ts similarity index 100% rename from packages/machines/src/menu/menu.machine.ts rename to packages/machines/menu/src/menu.machine.ts diff --git a/packages/machines/src/menu/menu.types.ts b/packages/machines/menu/src/menu.types.ts similarity index 100% rename from packages/machines/src/menu/menu.types.ts rename to packages/machines/menu/src/menu.types.ts diff --git a/packages/machines/number-input/README.md b/packages/machines/number-input/README.md new file mode 100644 index 0000000000..4236519383 --- /dev/null +++ b/packages/machines/number-input/README.md @@ -0,0 +1,19 @@ +# @ui-machines/number-input + +Core logic for the number-input widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/number-input +# or +npm i @ui-machines/number-input +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/number-input/package.json b/packages/machines/number-input/package.json new file mode 100644 index 0000000000..4aba8d00b2 --- /dev/null +++ b/packages/machines/number-input/package.json @@ -0,0 +1,38 @@ +{ + "name": "@ui-machines/number-input", + "version": "0.0.0", + "description": "Core logic for the number-input widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "number-input" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-number-input.cjs.js", + "types": "dist/ui-machines-number-input.cjs.d.ts", + "module": "dist/ui-machines-number-input.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/number-input", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "dependencies": { + "@ui-machines/core": "^0.0.0", + "@ui-machines/dom-utils": "^0.0.0", + "@ui-machines/utils": "^0.0.0", + "@ui-machines/number-utils": "^0.0.0", + "@ui-machines/types": "^0.0.0" + } +} diff --git a/packages/machines/src/number-input/index.ts b/packages/machines/number-input/src/index.ts similarity index 100% rename from packages/machines/src/number-input/index.ts rename to packages/machines/number-input/src/index.ts diff --git a/packages/machines/src/number-input/number-input.connect.ts b/packages/machines/number-input/src/number-input.connect.ts similarity index 85% rename from packages/machines/src/number-input/number-input.connect.ts rename to packages/machines/number-input/src/number-input.connect.ts index 257131bbe4..c5abfad1b8 100644 --- a/packages/machines/src/number-input/number-input.connect.ts +++ b/packages/machines/number-input/src/number-input.connect.ts @@ -1,17 +1,13 @@ -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" +import { dataAttr, getEventStep } from "@ui-machines/dom-utils" +import { roundToPx } from "@ui-machines/number-utils" +import { EventKeyMap, getNativeEvent, normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { fromPointerEvent } from "tiny-point/dom" -import { dataAttr, EventKeyMap, getEventStep } from "../utils" -import { cast } from "../utils/fn" -import { roundPx } from "../utils/number" + import { dom } from "./number-input.dom" import { NumberInputSend, NumberInputState } from "./number-input.types" import { utils } from "./number-input.utils" -export function numberInputConnect( - state: NumberInputState, - send: NumberInputSend, - normalize = normalizeProp, -) { +export function numberInputConnect(state: NumberInputState, send: NumberInputSend, normalize = normalizeProp) { const { context: ctx } = state const isScrubbing = state.matches("scrubbing") @@ -61,14 +57,13 @@ export function numberInputConnect( send("BLUR") }, onChange(event) { - const evt = (event.nativeEvent ?? event) as InputEvent + const evt = getNativeEvent(event) as InputEvent if (evt.isComposing) return send({ type: "CHANGE", target: event.currentTarget, hint: "set" }) }, onKeyDown(event) { - const evt = (event.nativeEvent ?? event) as KeyboardEvent + const evt = getNativeEvent(event) if (evt.isComposing) return - if (!utils.isValidNumericEvent(ctx, event)) { event.preventDefault() } @@ -142,13 +137,12 @@ export function numberInputConnect( id: dom.getScrubberId(ctx), role: "presentation", onMouseDown(event) { + const evt = getNativeEvent(event) event.preventDefault() - const pt = fromPointerEvent(cast(event)) - const win = cast(event.view ?? window) - const dp = win.devicePixelRatio + const pt = fromPointerEvent(evt) send({ type: "PRESS_DOWN_SCRUBBER", - point: { x: pt.x - roundPx(7.5, dp), y: pt.y - roundPx(7.5, dp) }, + point: { x: pt.x - roundToPx(7.5), y: pt.y - roundToPx(7.5) }, }) }, style: { diff --git a/packages/machines/src/number-input/number-input.dom.ts b/packages/machines/number-input/src/number-input.dom.ts similarity index 88% rename from packages/machines/src/number-input/number-input.dom.ts rename to packages/machines/number-input/src/number-input.dom.ts index 753404510b..adab18e2b0 100644 --- a/packages/machines/src/number-input/number-input.dom.ts +++ b/packages/machines/number-input/src/number-input.dom.ts @@ -1,4 +1,4 @@ -import { roundPx, wrap } from "../utils/number" +import { roundToPx, wrap } from "@ui-machines/number-utils" import { NumberInputMachineContext as Ctx } from "./number-input.types" type InputEl = HTMLInputElement | null @@ -22,11 +22,8 @@ export const dom = { getCursorEl: (ctx: Ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)), getMousementValue(ctx: Ctx, event: MouseEvent) { - const win = dom.getWin(ctx) - const dp = win.devicePixelRatio - - const x = roundPx(event.movementX, dp) - const y = roundPx(event.movementY, dp) + const x = roundToPx(event.movementX) + const y = roundToPx(event.movementY) let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null @@ -38,8 +35,9 @@ export const dom = { y: ctx.cursorPoint!.y + y, } + const win = dom.getWin(ctx) const width = win.innerWidth - const half = roundPx(7.5) + const half = roundToPx(7.5) point.x = wrap(point.x + half, width) - half return { hint, point } diff --git a/packages/machines/src/number-input/number-input.machine.ts b/packages/machines/number-input/src/number-input.machine.ts similarity index 93% rename from packages/machines/src/number-input/number-input.machine.ts rename to packages/machines/number-input/src/number-input.machine.ts index a3a007cb11..c32a8c61fc 100644 --- a/packages/machines/src/number-input/number-input.machine.ts +++ b/packages/machines/number-input/src/number-input.machine.ts @@ -1,12 +1,14 @@ import { choose, createMachine, guards, ref } from "@ui-machines/core" -import { addDomEvent } from "tiny-dom-event" -import { nextTick, noop } from "tiny-fn" -import { supportsPointerEvent } from "tiny-guard" -import { observeAttributes, uuid } from "../utils" -import { pipe } from "../utils/fn" -import { isSafari } from "../utils/guard" -import { rangy } from "../utils/number" -import { requestPointerLock } from "../utils/pointerlock" + +import { nextTick } from "@ui-machines/dom-utils" +import { addDomEvent } from "@ui-machines/dom-utils/add-listener" +import { observeAttributes } from "@ui-machines/dom-utils/mutation-observer" +import { requestPointerLock } from "@ui-machines/dom-utils/pointerlock" + +import { pipe } from "@ui-machines/utils" +import { isSafari, supportsPointerEvent } from "@ui-machines/utils/guard" +import { rangy } from "@ui-machines/number-utils/rangy" + import { dom } from "./number-input.dom" import { NumberInputMachineContext, NumberInputMachineState } from "./number-input.types" import { utils } from "./number-input.utils" @@ -18,7 +20,7 @@ export const numberInputMachine = createMachine ctx.dir === "rtl", - valueAsNumber: (ctx) => rangy(ctx).getValueAsNumber(), - isAtMin: (ctx) => rangy(ctx).isAtMin(), - isAtMax: (ctx) => rangy(ctx).isAtMax(), - isOutOfRange: (ctx) => !rangy(ctx).isInRange(), - canIncrement: (ctx) => !ctx.keepWithinRange || (!ctx.disabled && !rangy(ctx).isAtMax()), - canDecrement: (ctx) => !ctx.keepWithinRange || (!ctx.disabled && !rangy(ctx).isAtMin()), + valueAsNumber: (ctx) => rangy(ctx).valueAsNumber, + isAtMin: (ctx) => rangy(ctx).isAtMin, + isAtMax: (ctx) => rangy(ctx).isAtMax, + isOutOfRange: (ctx) => !rangy(ctx).isInRange, + canIncrement: (ctx) => !ctx.keepWithinRange || (!ctx.disabled && !rangy(ctx).isAtMax), + canDecrement: (ctx) => !ctx.keepWithinRange || (!ctx.disabled && !rangy(ctx).isAtMin), ariaValueText: (ctx) => ctx.getAriaValueText?.(ctx.value) ?? ctx.value, formattedValue: (ctx) => ctx.format?.(ctx.value).toString() ?? ctx.value, }, @@ -218,11 +220,11 @@ export const numberInputMachine = createMachine { const input = dom.getInputEl(ctx) - if (!input) return noop + if (!input) return function onWheel(event: WheelEvent) { const isInputFocused = dom.getDoc(ctx).activeElement === input - if (!ctx.allowMouseWheel || !isInputFocused) return noop + if (!ctx.allowMouseWheel || !isInputFocused) return event.preventDefault() const dir = Math.sign(event.deltaY) * -1 @@ -239,7 +241,7 @@ export const numberInputMachine = createMachine cleanups.forEach((c) => c()) }, activatePointerLock(ctx) { - if (isSafari() || !supportsPointerEvent()) return noop + if (isSafari() || !supportsPointerEvent()) return return requestPointerLock(dom.getDoc(ctx)) }, trackMousemove(ctx, _evt, { send }) { diff --git a/packages/machines/src/number-input/number-input.types.ts b/packages/machines/number-input/src/number-input.types.ts similarity index 98% rename from packages/machines/src/number-input/number-input.types.ts rename to packages/machines/number-input/src/number-input.types.ts index a9642f35c8..97414f90f2 100644 --- a/packages/machines/src/number-input/number-input.types.ts +++ b/packages/machines/number-input/src/number-input.types.ts @@ -1,6 +1,6 @@ import { StateMachine as S } from "@ui-machines/core" +import { Context } from "@ui-machines/types" import { PointValue } from "tiny-point" -import { Context } from "../utils" type ValidityState = "rangeUnderflow" | "rangeOverflow" diff --git a/packages/machines/src/number-input/number-input.utils.ts b/packages/machines/number-input/src/number-input.utils.ts similarity index 84% rename from packages/machines/src/number-input/number-input.utils.ts rename to packages/machines/number-input/src/number-input.utils.ts index 16d2274c5e..90d479a2ab 100644 --- a/packages/machines/src/number-input/number-input.utils.ts +++ b/packages/machines/number-input/src/number-input.utils.ts @@ -1,5 +1,5 @@ import type { KeyboardEvent } from "react" -import { rangy } from "../utils/number" +import { rangy } from "@ui-machines/number-utils/rangy" import { NumberInputMachineContext as Ctx } from "./number-input.types" export const utils = { @@ -18,13 +18,13 @@ export const utils = { .join("") }, increment: (ctx: Ctx, step?: number) => { - return rangy(ctx).increment(step).clamp().getValue() + return rangy(ctx).increment(step).clamp().value }, decrement: (ctx: Ctx, step?: number) => { - return rangy(ctx).decrement(step).clamp().getValue() + return rangy(ctx).decrement(step).clamp().value }, clamp: (ctx: Ctx) => { - return rangy(ctx).clamp().getValue() + return rangy(ctx).clamp().value }, parse: (ctx: Ctx, value: string) => { return ctx.parse?.(value) ?? value diff --git a/packages/machines/package.json b/packages/machines/package.json index b7d484bea0..1ac1da93cd 100644 --- a/packages/machines/package.json +++ b/packages/machines/package.json @@ -22,13 +22,10 @@ "bugs": { "url": "https://github.com/chakra-ui/core/issues" }, - "scripts": { - "clean": "rimraf dist" - }, "dependencies": { "@types/react": "^17.0.20", "@ui-machines/core": "0.0.0", - "@ui-machines/prop-types": "0.0.0", + "@ui-machines/types": "0.0.0", "aria-hidden": "^1.1.3", "focus-trap": "^6.7.1", "merge-anything": "^4.0.1", diff --git a/packages/machines/pin-input/README.md b/packages/machines/pin-input/README.md new file mode 100644 index 0000000000..d82665936a --- /dev/null +++ b/packages/machines/pin-input/README.md @@ -0,0 +1,19 @@ +# @ui-machines/pin-input + +Core logic for the pin-input widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/pin-input +# or +npm i @ui-machines/pin-input +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/pin-input/package.json b/packages/machines/pin-input/package.json new file mode 100644 index 0000000000..8d4a474289 --- /dev/null +++ b/packages/machines/pin-input/package.json @@ -0,0 +1,31 @@ +{ + "name": "@ui-machines/pin-input", + "version": "0.0.0", + "description": "Core logic for the pin-input widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "pin-input" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-pin-input.cjs.js", + "types": "dist/ui-machines-pin-input.cjs.d.ts", + "module": "dist/ui-machines-pin-input.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/pin-input", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + } +} diff --git a/packages/machines/src/pin-input/index.ts b/packages/machines/pin-input/src/index.ts similarity index 100% rename from packages/machines/src/pin-input/index.ts rename to packages/machines/pin-input/src/index.ts diff --git a/packages/machines/src/pin-input/pin-input.connect.ts b/packages/machines/pin-input/src/pin-input.connect.ts similarity index 99% rename from packages/machines/src/pin-input/pin-input.connect.ts rename to packages/machines/pin-input/src/pin-input.connect.ts index f94ab82294..d4f0e2dd0d 100644 --- a/packages/machines/src/pin-input/pin-input.connect.ts +++ b/packages/machines/pin-input/src/pin-input.connect.ts @@ -1,5 +1,5 @@ import { StateMachine as S } from "@ui-machines/core" -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" +import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { ariaAttr, EventKeyMap, getEventKey } from "../utils" import { dom } from "./pin-input.dom" import { PinInputMachineContext, PinInputMachineState } from "./pin-input.types" diff --git a/packages/machines/src/pin-input/pin-input.dom.ts b/packages/machines/pin-input/src/pin-input.dom.ts similarity index 74% rename from packages/machines/src/pin-input/pin-input.dom.ts rename to packages/machines/pin-input/src/pin-input.dom.ts index 8548e8e2de..6706434a4e 100644 --- a/packages/machines/src/pin-input/pin-input.dom.ts +++ b/packages/machines/pin-input/src/pin-input.dom.ts @@ -5,7 +5,6 @@ export const dom = { getRootId: (ctx: Ctx) => `pin-input-${ctx.uid}`, getInputId: (ctx: Ctx, id: string | number) => `pin-input-${ctx.uid}-${id}`, getDoc: (ctx: Ctx) => ctx.doc ?? document, - getElements: (ctx: Ctx) => - queryElements(dom.getDoc(ctx), `input[data-ownedby=${dom.getRootId(ctx)}]`), + getElements: (ctx: Ctx) => queryElements(dom.getDoc(ctx), `input[data-ownedby=${dom.getRootId(ctx)}]`), getFocusedEl: (ctx: Ctx) => dom.getElements(ctx)[ctx.focusedIndex], } diff --git a/packages/machines/src/pin-input/pin-input.machine.ts b/packages/machines/pin-input/src/pin-input.machine.ts similarity index 97% rename from packages/machines/src/pin-input/pin-input.machine.ts rename to packages/machines/pin-input/src/pin-input.machine.ts index f3f424b51b..50270a2a38 100644 --- a/packages/machines/src/pin-input/pin-input.machine.ts +++ b/packages/machines/pin-input/src/pin-input.machine.ts @@ -124,10 +124,7 @@ export const pinInputMachine = createMachine ctx.isValueComplete, isValidValue: (ctx, evt) => isValidType(evt.value, ctx.type), isFinalValue: (ctx) => { - return ( - ctx.filledValueLength + 1 === ctx.valueLength && - ctx.value.findIndex((v) => v.trim() === "") === ctx.focusedIndex - ) + return ctx.filledValueLength + 1 === ctx.valueLength && ctx.value.findIndex((v) => v.trim() === "") === ctx.focusedIndex }, isLastInputFocused: (ctx) => ctx.focusedIndex === ctx.valueLength - 1, hasIndex: (_ctx, evt) => evt.index !== undefined, diff --git a/packages/machines/src/pin-input/pin-input.types.ts b/packages/machines/pin-input/src/pin-input.types.ts similarity index 100% rename from packages/machines/src/pin-input/pin-input.types.ts rename to packages/machines/pin-input/src/pin-input.types.ts diff --git a/packages/machines/popover/README.md b/packages/machines/popover/README.md new file mode 100644 index 0000000000..a76f02ecaf --- /dev/null +++ b/packages/machines/popover/README.md @@ -0,0 +1,19 @@ +# @ui-machines/popover + +Core logic for the popover widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/popover +# or +npm i @ui-machines/popover +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/popover/package.json b/packages/machines/popover/package.json new file mode 100644 index 0000000000..3cca4be410 --- /dev/null +++ b/packages/machines/popover/package.json @@ -0,0 +1,31 @@ +{ + "name": "@ui-machines/popover", + "version": "0.0.0", + "description": "Core logic for the popover widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "popover" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-popover.cjs.js", + "types": "dist/ui-machines-popover.cjs.d.ts", + "module": "dist/ui-machines-popover.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/popover", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + } +} diff --git a/packages/machines/src/popover/index.ts b/packages/machines/popover/src/index.ts similarity index 100% rename from packages/machines/src/popover/index.ts rename to packages/machines/popover/src/index.ts diff --git a/packages/machines/src/popover/popover.connect.ts b/packages/machines/popover/src/popover.connect.ts similarity index 99% rename from packages/machines/src/popover/popover.connect.ts rename to packages/machines/popover/src/popover.connect.ts index 61cb1e2080..4db8ec612a 100644 --- a/packages/machines/src/popover/popover.connect.ts +++ b/packages/machines/popover/src/popover.connect.ts @@ -1,5 +1,5 @@ import { StateMachine as S } from "@ui-machines/core" -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" +import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { validateBlur } from "../utils" import { dom } from "./popover.dom" import { PopoverMachineContext, PopoverMachineState } from "./popover.machine" diff --git a/packages/machines/src/popover/popover.dom.ts b/packages/machines/popover/src/popover.dom.ts similarity index 100% rename from packages/machines/src/popover/popover.dom.ts rename to packages/machines/popover/src/popover.dom.ts diff --git a/packages/machines/src/popover/popover.machine.ts b/packages/machines/popover/src/popover.machine.ts similarity index 95% rename from packages/machines/src/popover/popover.machine.ts rename to packages/machines/popover/src/popover.machine.ts index 26bdb7d3a3..80deaa565c 100644 --- a/packages/machines/src/popover/popover.machine.ts +++ b/packages/machines/popover/src/popover.machine.ts @@ -3,10 +3,10 @@ import { createFocusTrap, FocusTrap } from "focus-trap" import { contains } from "tiny-dom-query" import { isTabbable } from "tiny-dom-query/tabbable" import { nextTick, noop } from "tiny-fn" -import { next } from "../utils/array" -import { preventBodyScroll } from "../utils/body-scroll-lock" -import { trackPointerDown } from "../utils/pointer-event" -import { Context } from "../utils/types" +import { next } from "../../../utilities/helpers/src/array" +import { preventBodyScroll } from "../../../utilities/dom/src/body-scroll-lock" +import { trackPointerDown } from "../../../utilities/dom/src/pointer-event" +import { Context } from "../../../utilities/types/src/types" import { dom } from "./popover.dom" const { and, or, not } = guards diff --git a/packages/machines/pressable/README.md b/packages/machines/pressable/README.md new file mode 100644 index 0000000000..e985149122 --- /dev/null +++ b/packages/machines/pressable/README.md @@ -0,0 +1,19 @@ +# @ui-machines/pressable + +Core logic for the pressable widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/pressable +# or +npm i @ui-machines/pressable +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/pressable/package.json b/packages/machines/pressable/package.json new file mode 100644 index 0000000000..f2597eb09b --- /dev/null +++ b/packages/machines/pressable/package.json @@ -0,0 +1,36 @@ +{ + "name": "@ui-machines/pressable", + "version": "0.0.0", + "description": "Core logic for the pressable widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "pressable" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-pressable.cjs.js", + "types": "dist/ui-machines-pressable.cjs.d.ts", + "module": "dist/ui-machines-pressable.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/pressable", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "dependencies": { + "@ui-machines/core": "^0.0.0", + "@ui-machines/dom-utils": "^0.0.0", + "@ui-machines/types": "^0.0.0" + } +} diff --git a/packages/machines/src/pressable/index.ts b/packages/machines/pressable/src/index.ts similarity index 100% rename from packages/machines/src/pressable/index.ts rename to packages/machines/pressable/src/index.ts diff --git a/packages/machines/src/pressable/pressable.machine.ts b/packages/machines/pressable/src/pressable.machine.ts similarity index 100% rename from packages/machines/src/pressable/pressable.machine.ts rename to packages/machines/pressable/src/pressable.machine.ts diff --git a/packages/machines/range-slider/README.md b/packages/machines/range-slider/README.md new file mode 100644 index 0000000000..e30c43f2d4 --- /dev/null +++ b/packages/machines/range-slider/README.md @@ -0,0 +1,19 @@ +# @ui-machines/range-slider + +Core logic for the range-slider widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/range-slider +# or +npm i @ui-machines/range-slider +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/range-slider/package.json b/packages/machines/range-slider/package.json new file mode 100644 index 0000000000..45ebdff03f --- /dev/null +++ b/packages/machines/range-slider/package.json @@ -0,0 +1,36 @@ +{ + "name": "@ui-machines/range-slider", + "version": "0.0.0", + "description": "Core logic for the range-slider widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "range-slider" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-range-slider.cjs.js", + "types": "dist/ui-machines-range-slider.cjs.d.ts", + "module": "dist/ui-machines-range-slider.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/range-slider", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "dependencies": { + "@ui-machines/core": "^0.0.0", + "@ui-machines/dom-utils": "^0.0.0", + "@ui-machines/types": "^0.0.0" + } +} diff --git a/packages/machines/src/range-slider/index.ts b/packages/machines/range-slider/src/index.ts similarity index 100% rename from packages/machines/src/range-slider/index.ts rename to packages/machines/range-slider/src/index.ts diff --git a/packages/machines/src/range-slider/range-slider.connect.ts b/packages/machines/range-slider/src/range-slider.connect.ts similarity index 97% rename from packages/machines/src/range-slider/range-slider.connect.ts rename to packages/machines/range-slider/src/range-slider.connect.ts index a2a1f1a09c..d6b8dad2da 100644 --- a/packages/machines/src/range-slider/range-slider.connect.ts +++ b/packages/machines/range-slider/src/range-slider.connect.ts @@ -1,4 +1,4 @@ -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" +import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { isLeftClick, isModifiedEvent } from "tiny-guard" import { toRanges } from "tiny-num" import { fromPointerEvent } from "tiny-point/dom" @@ -7,11 +7,7 @@ import { dataAttr, getEventKey, getEventStep } from "../utils" import { dom } from "./range-slider.dom" import { RangeSliderSend, RangeSliderState } from "./range-slider.types" -export function rangeSliderConnect( - state: RangeSliderState, - send: RangeSliderSend, - normalize = normalizeProp, -) { +export function rangeSliderConnect(state: RangeSliderState, send: RangeSliderSend, normalize = normalizeProp) { const { context: ctx } = state const { value: values, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = ctx diff --git a/packages/machines/src/range-slider/range-slider.dom.ts b/packages/machines/range-slider/src/range-slider.dom.ts similarity index 96% rename from packages/machines/src/range-slider/range-slider.dom.ts rename to packages/machines/range-slider/src/range-slider.dom.ts index 362fc1ae12..92ebfc7c85 100644 --- a/packages/machines/src/range-slider/range-slider.dom.ts +++ b/packages/machines/range-slider/src/range-slider.dom.ts @@ -6,9 +6,9 @@ import { relativeToNode } from "tiny-point/dom" import { center } from "tiny-rect" import { fromElement } from "tiny-rect/from-element" import { dom as sliderDom } from "../../src/slider/slider.dom" -import { dispatchInputEvent } from "../utils/dispatch-input" -import { clamp, multiply, percentToValue, snapToStep, toRanges } from "../utils/number" -import type { Style } from "../utils/types" +import { dispatchInputEvent } from "../../../utilities/dom/src/dispatch-event" +import { clamp, multiply, percentToValue, snapToStep, toRanges } from "../../../utilities/helpers/src/number" +import type { Style } from "../../../utilities/types/src/types" import type { RangeSliderMachineContext as Ctx } from "./range-slider.types" export function getRangeAtIndex(ctx: Ctx, index = ctx.activeIndex) { diff --git a/packages/machines/src/range-slider/range-slider.machine.ts b/packages/machines/range-slider/src/range-slider.machine.ts similarity index 98% rename from packages/machines/src/range-slider/range-slider.machine.ts rename to packages/machines/range-slider/src/range-slider.machine.ts index e191d6e1c9..32fa373536 100644 --- a/packages/machines/src/range-slider/range-slider.machine.ts +++ b/packages/machines/range-slider/src/range-slider.machine.ts @@ -2,7 +2,7 @@ import { createMachine, ref } from "@ui-machines/core" import { nextTick } from "tiny-fn" import { fromElement } from "tiny-rect/from-element" import { trackPointerMove } from "../utils" -import { decrement, increment, snapToStep } from "../utils/number" +import { decrement, increment, snapToStep } from "../../../utilities/helpers/src/number" import { dom, getClosestIndex, getRangeAtIndex } from "./range-slider.dom" import { RangeSliderMachineContext, RangeSliderMachineState } from "./range-slider.types" diff --git a/packages/machines/src/range-slider/range-slider.types.ts b/packages/machines/range-slider/src/range-slider.types.ts similarity index 100% rename from packages/machines/src/range-slider/range-slider.types.ts rename to packages/machines/range-slider/src/range-slider.types.ts diff --git a/packages/machines/rating/README.md b/packages/machines/rating/README.md new file mode 100644 index 0000000000..a3f746f4f1 --- /dev/null +++ b/packages/machines/rating/README.md @@ -0,0 +1,19 @@ +# @ui-machines/rating + +Core logic for the rating widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/rating +# or +npm i @ui-machines/rating +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/rating/package.json b/packages/machines/rating/package.json new file mode 100644 index 0000000000..1bf68d1035 --- /dev/null +++ b/packages/machines/rating/package.json @@ -0,0 +1,36 @@ +{ + "name": "@ui-machines/rating", + "version": "0.0.0", + "description": "Core logic for the rating widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "rating" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-rating.cjs.js", + "types": "dist/ui-machines-rating.cjs.d.ts", + "module": "dist/ui-machines-rating.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/rating", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "dependencies": { + "@ui-machines/core": "^0.0.0", + "@ui-machines/dom-utils": "^0.0.0", + "@ui-machines/types": "^0.0.0" + } +} diff --git a/packages/machines/src/rating/index.ts b/packages/machines/rating/src/index.ts similarity index 100% rename from packages/machines/src/rating/index.ts rename to packages/machines/rating/src/index.ts diff --git a/packages/machines/src/rating/rating.connect.ts b/packages/machines/rating/src/rating.connect.ts similarity index 99% rename from packages/machines/src/rating/rating.connect.ts rename to packages/machines/rating/src/rating.connect.ts index db32312ce2..0adfe353ce 100644 --- a/packages/machines/src/rating/rating.connect.ts +++ b/packages/machines/rating/src/rating.connect.ts @@ -1,5 +1,5 @@ import { StateMachine as S } from "@ui-machines/core" -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" +import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { cast } from "tiny-fn" import { isLeftClick } from "tiny-guard" import { fromPointerEvent, relativeToNode } from "tiny-point/dom" diff --git a/packages/machines/src/rating/rating.dom.ts b/packages/machines/rating/src/rating.dom.ts similarity index 77% rename from packages/machines/src/rating/rating.dom.ts rename to packages/machines/rating/src/rating.dom.ts index 01c1544d6e..370a81995a 100644 --- a/packages/machines/src/rating/rating.dom.ts +++ b/packages/machines/rating/src/rating.dom.ts @@ -1,4 +1,4 @@ -import { dispatchInputEvent } from "../utils/dispatch-input" +import { dispatchInputEvent } from "../../../utilities/dom/src/dispatch-event" import { RatingMachineContext as Ctx } from "./rating.machine" export const dom = { @@ -8,8 +8,7 @@ export const dom = { getRatingId: (ctx: Ctx, id: string | number) => `rating-star-${ctx.uid}-${id}`, getRootId: (ctx: Ctx) => `rating-${ctx.uid}`, getRootEl: (ctx: Ctx) => dom.getDoc(ctx).getElementById(dom.getRootId(ctx)), - getRadioEl: (ctx: Ctx) => - dom.getRootEl(ctx)?.querySelector(`[role=radio][aria-posinset='${Math.ceil(ctx.value)}']`), + getRadioEl: (ctx: Ctx) => dom.getRootEl(ctx)?.querySelector(`[role=radio][aria-posinset='${Math.ceil(ctx.value)}']`), getActiveEl: (ctx: Ctx) => dom.getDoc(ctx).activeElement, getInputEl: (ctx: Ctx) => dom.getDoc(ctx).getElementById(dom.getInputId(ctx)), dispatchChangeEvent: (ctx: Ctx) => { diff --git a/packages/machines/src/rating/rating.machine.ts b/packages/machines/rating/src/rating.machine.ts similarity index 98% rename from packages/machines/src/rating/rating.machine.ts rename to packages/machines/rating/src/rating.machine.ts index bc3d489bdd..69a9378806 100644 --- a/packages/machines/src/rating/rating.machine.ts +++ b/packages/machines/rating/src/rating.machine.ts @@ -1,6 +1,6 @@ import { createMachine, ref } from "@ui-machines/core" import { nextTick } from "tiny-fn" -import { Context } from "../utils/types" +import { Context } from "../../../utilities/types/src/types" import { dom } from "./rating.dom" export type RatingMachineContext = Context<{ diff --git a/packages/machines/slider/README.md b/packages/machines/slider/README.md new file mode 100644 index 0000000000..0d04c06efd --- /dev/null +++ b/packages/machines/slider/README.md @@ -0,0 +1,19 @@ +# @ui-machines/slider + +Core logic for the slider widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/slider +# or +npm i @ui-machines/slider +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/slider/package.json b/packages/machines/slider/package.json new file mode 100644 index 0000000000..cf29f00dcf --- /dev/null +++ b/packages/machines/slider/package.json @@ -0,0 +1,36 @@ +{ + "name": "@ui-machines/slider", + "version": "0.0.0", + "description": "Core logic for the slider widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "slider" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-slider.cjs.js", + "types": "dist/ui-machines-slider.cjs.d.ts", + "module": "dist/ui-machines-slider.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/slider", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "dependencies": { + "@ui-machines/core": "^0.0.0", + "@ui-machines/dom-utils": "^0.0.0", + "@ui-machines/types": "^0.0.0" + } +} diff --git a/packages/machines/src/slider/index.ts b/packages/machines/slider/src/index.ts similarity index 100% rename from packages/machines/src/slider/index.ts rename to packages/machines/slider/src/index.ts diff --git a/packages/machines/src/slider/slider.connect.ts b/packages/machines/slider/src/slider.connect.ts similarity index 99% rename from packages/machines/src/slider/slider.connect.ts rename to packages/machines/slider/src/slider.connect.ts index fba8a05057..8f8036644a 100644 --- a/packages/machines/src/slider/slider.connect.ts +++ b/packages/machines/slider/src/slider.connect.ts @@ -1,5 +1,5 @@ import type { StateMachine as S } from "@ui-machines/core" -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" +import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { isLeftClick, isModifiedEvent } from "tiny-guard" import { valueToPercent } from "tiny-num" import { fromPointerEvent } from "tiny-point/dom" diff --git a/packages/machines/src/slider/slider.dom.ts b/packages/machines/slider/src/slider.dom.ts similarity index 100% rename from packages/machines/src/slider/slider.dom.ts rename to packages/machines/slider/src/slider.dom.ts diff --git a/packages/machines/src/slider/slider.machine.ts b/packages/machines/slider/src/slider.machine.ts similarity index 97% rename from packages/machines/src/slider/slider.machine.ts rename to packages/machines/slider/src/slider.machine.ts index af8c550d0e..0b90911657 100644 --- a/packages/machines/src/slider/slider.machine.ts +++ b/packages/machines/slider/src/slider.machine.ts @@ -2,7 +2,7 @@ import { createMachine, ref } from "@ui-machines/core" import { nextTick } from "tiny-fn" import { fromElement } from "tiny-rect/from-element" import { trackPointerMove } from "../utils" -import { clamp, decrement, increment, snapToStep } from "../utils/number" +import { clamp, decrement, increment, snapToStep } from "../../../utilities/helpers/src/number" import { dom } from "./slider.dom" import { SliderMachineContext, SliderMachineState } from "./slider.types" diff --git a/packages/machines/src/slider/slider.types.ts b/packages/machines/slider/src/slider.types.ts similarity index 100% rename from packages/machines/src/slider/slider.types.ts rename to packages/machines/slider/src/slider.types.ts diff --git a/packages/machines/split-view/README.md b/packages/machines/split-view/README.md new file mode 100644 index 0000000000..a6c2683408 --- /dev/null +++ b/packages/machines/split-view/README.md @@ -0,0 +1,19 @@ +# @ui-machines/split-view + +Core logic for the split-view widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/split-view +# or +npm i @ui-machines/split-view +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/split-view/package.json b/packages/machines/split-view/package.json new file mode 100644 index 0000000000..db69abbc20 --- /dev/null +++ b/packages/machines/split-view/package.json @@ -0,0 +1,36 @@ +{ + "name": "@ui-machines/split-view", + "version": "0.0.0", + "description": "Core logic for the split-view widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "split-view" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-split-view.cjs.js", + "types": "dist/ui-machines-split-view.cjs.d.ts", + "module": "dist/ui-machines-split-view.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/split-view", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "dependencies": { + "@ui-machines/core": "^0.0.0", + "@ui-machines/dom-utils": "^0.0.0", + "@ui-machines/types": "^0.0.0" + } +} diff --git a/packages/machines/src/split-view/index.ts b/packages/machines/split-view/src/index.ts similarity index 100% rename from packages/machines/src/split-view/index.ts rename to packages/machines/split-view/src/index.ts diff --git a/packages/machines/src/split-view/split-view.connect.ts b/packages/machines/split-view/src/split-view.connect.ts similarity index 99% rename from packages/machines/src/split-view/split-view.connect.ts rename to packages/machines/split-view/src/split-view.connect.ts index a92fff6463..3197f73a8d 100644 --- a/packages/machines/src/split-view/split-view.connect.ts +++ b/packages/machines/split-view/src/split-view.connect.ts @@ -1,5 +1,5 @@ import { StateMachine as S } from "@ui-machines/core" -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" +import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { dataAttr, EventKeyMap, getEventKey, getEventStep } from "../utils" import { dom } from "./split-view.dom" import { SplitViewMachineContext, SplitViewMachineState } from "./split-view.machine" diff --git a/packages/machines/src/split-view/split-view.dom.ts b/packages/machines/split-view/src/split-view.dom.ts similarity index 100% rename from packages/machines/src/split-view/split-view.dom.ts rename to packages/machines/split-view/src/split-view.dom.ts diff --git a/packages/machines/src/split-view/split-view.machine.ts b/packages/machines/split-view/src/split-view.machine.ts similarity index 100% rename from packages/machines/src/split-view/split-view.machine.ts rename to packages/machines/split-view/src/split-view.machine.ts diff --git a/packages/machines/src/index.ts b/packages/machines/src/index.ts deleted file mode 100644 index 9654319612..0000000000 --- a/packages/machines/src/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* PLOP_INJECT_EXPORT */ -export * from "./accordion" -export * from "./combobox" -export * from "./dialog" -export * from "./editable" -export * from "./menu" -export * from "./number-input" -export * from "./pin-input" -export * from "./popover" -export * from "./range-slider" -export * from "./rating" -export * from "./slider" -export * from "./split-view" -export * from "./tabs" -export * from "./tags-input" -export * from "./toast" -export * from "./tooltip" -export { mergeProps } from "./utils/merge-props" diff --git a/packages/machines/src/utils/array.ts b/packages/machines/src/utils/array.ts deleted file mode 100644 index 4557397406..0000000000 --- a/packages/machines/src/utils/array.ts +++ /dev/null @@ -1,115 +0,0 @@ -export function toArray(v: T | T[] | undefined | null): T[] { - if (!v) return [] - return Array.isArray(v) ? v : [v] -} - -export const fromLength = (length: number) => Array.from(Array(length).keys()) - -export const first = (v: T[]): T | undefined => v[0] -export const last = (v: T[]): T | undefined => v[v.length - 1] - -export const isEmpty = (v: T[]): boolean => v.length === 0 -export const has = (v: T[], t: any): boolean => v.indexOf(t) !== -1 - -export const chunk = (v: T[], size: number): T[][] => { - const res: T[][] = [] - return v.reduce((rows, value, index) => { - if (index % size === 0) rows.push([value]) - else last(rows)?.push(value) - return rows - }, res) -} - -export const add = (v: T[], ...items: T[]): T[] => v.concat(items) -export const addAt = (v: T[], idx: number, ...items: T[]): T[] => { - v.splice(idx, 0, ...items) - return v -} - -export const removeAt = (v: T[], i: number): T[] => { - if (i > -1) v.splice(i, 1) - return v -} - -export const remove = (v: T[], item: T): T[] => removeAt(v, v.indexOf(item)) -export const each = (v: T[], fn: (value: T, index: number, arr: T[]) => K): void => { - const len = v.length - for (let i = 0; i < len; i++) fn(v[i], i, v) -} - -export const find = (v: T[], fn: (value: T, key: number, arr: T[]) => boolean): T | undefined => { - const len = v.length - for (let i = 0; i < len; i++) if (fn(v[i], i, v)) return v[i] -} - -export function filter(v: T[], fn: (value: T, key: number, arr: T[]) => boolean): T[] { - const arr: T[] = [] - each(v, (...a) => fn(...a) && arr.push(a[0])) - return arr -} - -export function clear(v: T[]): T[] { - while (v.length > 0) v.pop() - return v -} - -export function replace(v: T[], idx: number, ...items: T[]): T[] { - if (idx > -1) v.splice(idx, 1, ...items) - return v -} - -export function move(v: T[], from: number, to: number): T[] { - const len = v.length - from = from < 0 ? len + from : from - to = to < 0 ? len + to : to - if (from >= 0 && from < len) { - const x = v.splice(from, 1) - v.splice(to, 0, x[0]) - } - return v -} - -export type IndexOptions = { - step?: number - loop?: boolean -} - -export function nextIndex(v: T[], idx: number, opts: IndexOptions = {}): number { - const { step = 1, loop = true } = opts - const next = idx + step - const len = v.length - const last = len - 1 - if (idx === -1) return step > 0 ? 0 : last - if (next < 0) return loop ? last : 0 - if (next >= len) return loop ? 0 : idx > len ? len : idx - return next -} - -export function next(v: T[], idx: number, opts: IndexOptions = {}): T | undefined { - return v[nextIndex(v, idx, opts)] -} - -export function prevIndex(v: T[], idx: number, opts: IndexOptions = {}): number { - const { step = 1, loop = true } = opts - return nextIndex(v, idx, { step: -step, loop }) -} - -export function prev(v: T[], index: number, opts: IndexOptions = {}): T | undefined { - return v[prevIndex(v, index, opts)] -} - -export type SearchOptions = { - toString: (item: T) => string - current: T | undefined -} - -export function search(v: T[], query: string | null | undefined, opts: SearchOptions): T | undefined { - const { toString, current } = opts - if (query == null) return current - const match = (item: T) => toString(item).toLowerCase().startsWith(query.toLowerCase()) - const filtered = filter(v, match) - if (!current) return first(filtered) - if (isEmpty(filtered)) return current - if (filtered.length === 1) return first(filtered) - return next(filtered, filtered.indexOf(current)) -} diff --git a/packages/machines/src/utils/contains.ts b/packages/machines/src/utils/contains.ts deleted file mode 100644 index eb82710616..0000000000 --- a/packages/machines/src/utils/contains.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { isElement } from "./guard" - -type Node = HTMLElement | EventTarget | null - -export const contains = (parent: Node | undefined, child: Node) => { - if (!parent) return false - return parent === child || (isElement(parent) && isElement(child) && parent.contains(child)) -} diff --git a/packages/machines/src/utils/dom-attr.ts b/packages/machines/src/utils/dom-attr.ts deleted file mode 100644 index 79cfeaee4e..0000000000 --- a/packages/machines/src/utils/dom-attr.ts +++ /dev/null @@ -1,9 +0,0 @@ -type Booleanish = boolean | "true" | "false" - -export const dataAttr = (guard: boolean | undefined) => { - return (guard ? "" : undefined) as Booleanish -} - -export const ariaAttr = (guard: boolean | undefined) => { - return guard ? true : undefined -} diff --git a/packages/machines/src/utils/dom-env.ts b/packages/machines/src/utils/dom-env.ts deleted file mode 100644 index 1b5c9b30e8..0000000000 --- a/packages/machines/src/utils/dom-env.ts +++ /dev/null @@ -1,13 +0,0 @@ -export function getOwner(el: HTMLElement) { - return { - doc: el?.ownerDocument ?? document, - win: el?.ownerDocument.defaultView ?? window, - root: el?.getRootNode(), - } -} - -export function getParent(el: HTMLElement): HTMLElement { - const { doc } = getOwner(el) - if (el.localName === "html") return el - return el.assignedSlot || el.parentElement || doc.documentElement -} diff --git a/packages/machines/src/utils/fn.ts b/packages/machines/src/utils/fn.ts deleted file mode 100644 index 994775f02b..0000000000 --- a/packages/machines/src/utils/fn.ts +++ /dev/null @@ -1,57 +0,0 @@ -export const runIfFn = ( - v: T, - ...a: T extends (...a: any[]) => void ? Parameters : never -): T extends (...a: any[]) => void ? ReturnType : T => { - return typeof v === "function" ? v(...a) : v -} - -export const noop = () => {} - -export const pipe = - (...fns: Array<(a: T) => T>) => - (v: T) => - fns.reduce((a, b) => b(a), v) - -export const cast = (v: unknown) => v as T - -export const nextTick = (fn: VoidFunction) => { - const set = new Set() - function raf(fn: VoidFunction) { - const id = requestAnimationFrame(fn) - set.add(() => cancelAnimationFrame(id)) - } - raf(() => raf(fn)) - return function cleanup() { - set.forEach(function (fn) { - fn() - }) - } -} - -export const callAll = - void>(...fns: (T | undefined)[]) => - (...a: Parameters) => { - fns.forEach(function (fn) { - fn?.(...a) - }) - } - -export function warn(m: string): void -export function warn(c: boolean, m: string): void -export function warn(...a: any[]): void { - const m = a.length === 1 ? a[0] : a[1] - const c = a.length === 2 ? a[0] : true - if (c && process.env.NODE_ENV !== "production") { - console.warn(m) - } -} - -export function invariant(m: string): void -export function invariant(c: boolean, m: string): void -export function invariant(...a: any[]): void { - const m = a.length === 1 ? a[0] : a[1] - const c = a.length === 2 ? a[0] : true - if (c && process.env.NODE_ENV !== "production") { - throw new Error(m) - } -} diff --git a/packages/machines/src/utils/focusable.ts b/packages/machines/src/utils/focusable.ts deleted file mode 100644 index 4b1c8c882d..0000000000 --- a/packages/machines/src/utils/focusable.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { checkElementStyle } from "./computed-style" -import { isElement } from "./guard" - -export function isHidden(el: HTMLElement | null, until?: HTMLElement) { - if (!el || checkElementStyle(el, "visibility", "hidden")) return true - while (el) { - if (until != null && el === until) return false - if (checkElementStyle(el, "display", "none")) return true - el = el.parentElement - } - return false -} - -export const isDisabled = (el: HTMLElement | null): boolean => { - return el?.getAttribute("disabled") != null || !!el?.getAttribute("aria-disabled") === true -} - -/** - * Returns the focusable elements within the element - */ -export const getFocusables = (el: HTMLElement | null, includeContainer = false) => { - if (!el) return [] - let els = Array.from(el.querySelectorAll(focusableSelector)) - if (includeContainer) els.unshift(el) - return els.filter((el) => isFocusable(el) && !isHidden(el)) -} - -/** - * Whether this element is focusable - */ -export const isFocusable = (el: HTMLElement | null) => { - if (!isElement(el) || isHidden(el) || isDisabled(el)) return false - return el?.matches(focusableSelector) -} - -export const focusableSelector = [ - "input:not([disabled]):not([type=hidden])", - "select:not([disabled])", - "textarea:not([disabled])", - "button:not([disabled])", - "embed", - "iframe", - "object", - "a[href]", - "area[href]", - "[tabindex]", - "audio[controls]", - "video[controls]", - "*[tabindex]:not([aria-disabled])", - "[contenteditable]:not([contenteditable=false])", - "details > summary:first-of-type", -].join(",") diff --git a/packages/machines/src/utils/index.ts b/packages/machines/src/utils/index.ts deleted file mode 100644 index 13392f7f9f..0000000000 --- a/packages/machines/src/utils/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export * from "./dispatch-input" -export * from "./dom-attr" -export * from "./keyboard-event" -export * from "./live-region" -export * from "./mutation-observer" -export * from "./pointer-event" -export * from "./validate-blur" -export * from "./uuid" -export * from "./types" diff --git a/packages/machines/src/utils/number.ts b/packages/machines/src/utils/number.ts deleted file mode 100644 index 5052681da1..0000000000 --- a/packages/machines/src/utils/number.ts +++ /dev/null @@ -1,154 +0,0 @@ -type Num = Record - -export function wrap(num: number, max: number) { - return ((num % max) + max) % max -} - -export function roundPx(num: number, dp?: number) { - if (dp != null) { - const dp = window.devicePixelRatio - return Math.floor(num * dp + 0.5) / dp - } - return Math.round(num) -} - -const decimalFormat = new Intl.NumberFormat("en-US", { style: "decimal" }) - -function formatter(n: number) { - return parseFloat(decimalFormat.format(n)) -} - -export function countDecimals(v: number | undefined) { - return decimalFormat.formatToParts(v).find((p) => p.type === "fraction")?.value.length ?? 0 -} - -export const valueToPercent = (v: number, r: Num<"step" | "min" | "max">) => ((v - r.min) * 100) / (r.max - r.min) - -export const percentToValue = (v: number, r: Num<"min" | "max">) => r.min + (r.max - r.min) * v - -export const transform = (a: [number, number], b: [number, number]) => { - const i = { min: a[0], max: a[1] } - const o = { min: b[0], max: b[1] } - return (v: number) => { - if (i.min === i.max || o.min === o.max) return o.min - const ratio = (o.max - o.min) / (i.max - i.min) - return o.min + ratio * (v - i.min) - } -} - -export const clamp = (v: number, o: Num<"min" | "max">) => Math.min(Math.max(v, o.min), o.max) -export const increment = (v: number, s: number) => formatter(v + s) -export const decrement = (v: number, s: number) => formatter(v - s) -export const multiply = (v: number, s: number) => formatter(v * s) - -export function round(v: number, t?: number) { - const p = 10 ** (t ?? 10) - v = Math.round(v * p) / p - return t ? v.toFixed(t) : v.toString() -} - -export function snapToStep(value: number, step: number) { - const p = countDecimals(step) - const v = Math.round(value / step) * step - return round(v, p) -} - -export function toRanges(o: Num<"min" | "max"> & { value: number[]; spacing: number }) { - const spacing = o.spacing ?? 0 - return o.value.map((v, i) => { - const min = i === 0 ? o.min : o.value[i - 1] + spacing - const max = i === o.value.length - 1 ? o.max : o.value[i + 1] - spacing - return { min, max, value: v } - }) -} - -export function valueOf(v: string | number) { - const num = parseFloat(v.toString().replace(/[^\w.-]+/g, "")) - return !isNaN(num) ? num : 0 -} - -export function getMaxPrecision(o: { value: string | number; precision?: number; step: number }) { - const stepPrecision = countDecimals(o.step) - const val = valueOf(o.value) - const valuePrecision = isNaN(val) ? stepPrecision : Math.max(countDecimals(val), stepPrecision) - return Math.max(valuePrecision, o.precision ?? 0) -} - -export const isAtMax = (v: number, o: Num<"max">) => v >= o.max -export const isAtMin = (v: number, o: Num<"min">) => v <= o.min -export const isWithinRange = (v: number, o: Num<"min" | "max">) => v >= o.min && v <= o.max - -export function toRangeArray(o: Num<"min" | "max" | "step">): number[] { - let i = o.min - const range: number[] = [] - while (i <= o.max) { - range.push(i) - i = increment(i, o.step) - } - return range -} - -export type RangeOptions = Num<"min" | "max"> & { - step: number - precision?: number - value: T -} - -export function rangy(options: RangeOptions) { - const { min, max, step, precision, value } = options - - const utils = { - isInRange() { - return isWithinRange(utils.getValueAsNumber(), { min, max }) - }, - isAtMax() { - return isAtMax(utils.getValueAsNumber(), { max }) - }, - isAtMin() { - return isAtMin(utils.getValueAsNumber(), { min }) - }, - snapToStep() { - const value = snapToStep(utils.getValueAsNumber(), step) - return rangy({ ...options, value }) - }, - increment(stepOverride?: number) { - const value = increment(utils.getValueAsNumber(), stepOverride ?? step) - return rangy({ ...options, value }) - }, - decrement(stepOverride?: number) { - const value = decrement(utils.getValueAsNumber(), stepOverride ?? step) - return rangy({ ...options, value }) - }, - toPrecision() { - return rangy({ ...options, value: utils.getValue() }) - }, - toMax() { - return rangy({ ...options, value: max }) - }, - toMin() { - return rangy({ ...options, value: min }) - }, - fromPercent(percent: number) { - const value = percentToValue(percent, { min, max }) - return rangy({ ...options, value }) - }, - clamp() { - const value = clamp(utils.getValueAsNumber(), { min, max }) - return rangy({ ...options, value }) - }, - getPercent() { - return valueToPercent(utils.getValueAsNumber(), { min, max, step }) - }, - getValueAsNumber() { - return valueOf(value) - }, - getValue() { - return round(utils.getValueAsNumber(), utils.getPrecision()) - }, - getPrecision() { - return getMaxPrecision({ value, precision, step }) - }, - } - - return utils -} diff --git a/packages/machines/src/utils/uuid.ts b/packages/machines/src/utils/uuid.ts deleted file mode 100644 index 0fd8a87eda..0000000000 --- a/packages/machines/src/utils/uuid.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const uuid = (() => { - let id = 0 - return () => { - id++ - return id.toString(36) - } -})() diff --git a/packages/machines/tabs/README.md b/packages/machines/tabs/README.md new file mode 100644 index 0000000000..4910b76d1d --- /dev/null +++ b/packages/machines/tabs/README.md @@ -0,0 +1,19 @@ +# @ui-machines/tabs + +Core logic for the tabs widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/tabs +# or +npm i @ui-machines/tabs +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/tabs/package.json b/packages/machines/tabs/package.json new file mode 100644 index 0000000000..328a8f1273 --- /dev/null +++ b/packages/machines/tabs/package.json @@ -0,0 +1,36 @@ +{ + "name": "@ui-machines/tabs", + "version": "0.0.0", + "description": "Core logic for the tabs widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "tabs" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-tabs.cjs.js", + "types": "dist/ui-machines-tabs.cjs.d.ts", + "module": "dist/ui-machines-tabs.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/tabs", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "dependencies": { + "@ui-machines/core": "^0.0.0", + "@ui-machines/dom-utils": "^0.0.0", + "@ui-machines/types": "^0.0.0" + } +} diff --git a/packages/machines/src/tabs/index.ts b/packages/machines/tabs/src/index.ts similarity index 100% rename from packages/machines/src/tabs/index.ts rename to packages/machines/tabs/src/index.ts diff --git a/packages/machines/src/tabs/tabs.connect.ts b/packages/machines/tabs/src/tabs.connect.ts similarity index 99% rename from packages/machines/src/tabs/tabs.connect.ts rename to packages/machines/tabs/src/tabs.connect.ts index cf4c3cc791..393482608f 100644 --- a/packages/machines/src/tabs/tabs.connect.ts +++ b/packages/machines/tabs/src/tabs.connect.ts @@ -1,5 +1,5 @@ import { StateMachine as S } from "@ui-machines/core" -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" +import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { cast } from "tiny-fn" import { isSafari } from "tiny-guard" import type { EventKeyMap } from "../utils" diff --git a/packages/machines/src/tabs/tabs.dom.ts b/packages/machines/tabs/src/tabs.dom.ts similarity index 90% rename from packages/machines/src/tabs/tabs.dom.ts rename to packages/machines/tabs/src/tabs.dom.ts index eb356b82dd..1a1c13b760 100644 --- a/packages/machines/src/tabs/tabs.dom.ts +++ b/packages/machines/tabs/src/tabs.dom.ts @@ -11,8 +11,7 @@ export const dom = { getTablistEl: (ctx: Ctx) => dom.getDoc(ctx).getElementById(dom.getTablistId(ctx)), getPanelEl: (ctx: Ctx, id: string) => dom.getDoc(ctx).getElementById(dom.getPanelId(ctx, id)), getTabEl: (ctx: Ctx, id: string) => dom.getDoc(ctx).getElementById(dom.getTabId(ctx, id)), - getElements: (ctx: Ctx) => - queryElements(dom.getTablistEl(ctx), `[role=tab][data-ownedby='${dom.getTablistId(ctx)}']`), + getElements: (ctx: Ctx) => queryElements(dom.getTablistEl(ctx), `[role=tab][data-ownedby='${dom.getTablistId(ctx)}']`), getFirstEl: (ctx: Ctx) => first(dom.getElements(ctx)), getLastEl: (ctx: Ctx) => last(dom.getElements(ctx)), diff --git a/packages/machines/src/tabs/tabs.machine.ts b/packages/machines/tabs/src/tabs.machine.ts similarity index 98% rename from packages/machines/src/tabs/tabs.machine.ts rename to packages/machines/tabs/src/tabs.machine.ts index 2c9669b864..e3ff4054bb 100644 --- a/packages/machines/src/tabs/tabs.machine.ts +++ b/packages/machines/tabs/src/tabs.machine.ts @@ -1,6 +1,6 @@ import { createMachine, guards, ref } from "@ui-machines/core" import { nextTick } from "tiny-fn" -import { Context } from "../utils/types" +import { Context } from "../../../utilities/types/src/types" import { dom } from "./tabs.dom" const { not } = guards diff --git a/packages/machines/tags-input/README.md b/packages/machines/tags-input/README.md new file mode 100644 index 0000000000..aea9c0164d --- /dev/null +++ b/packages/machines/tags-input/README.md @@ -0,0 +1,19 @@ +# @ui-machines/tags-input + +Core logic for the tags-input widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/tags-input +# or +npm i @ui-machines/tags-input +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/tags-input/package.json b/packages/machines/tags-input/package.json new file mode 100644 index 0000000000..01d9524cd7 --- /dev/null +++ b/packages/machines/tags-input/package.json @@ -0,0 +1,36 @@ +{ + "name": "@ui-machines/tags-input", + "version": "0.0.0", + "description": "Core logic for the tags-input widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "tags-input" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-tags-input.cjs.js", + "types": "dist/ui-machines-tags-input.cjs.d.ts", + "module": "dist/ui-machines-tags-input.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/tags-input", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "dependencies": { + "@ui-machines/core": "^0.0.0", + "@ui-machines/dom-utils": "^0.0.0", + "@ui-machines/types": "^0.0.0" + } +} diff --git a/packages/machines/src/tags-input/index.ts b/packages/machines/tags-input/src/index.ts similarity index 100% rename from packages/machines/src/tags-input/index.ts rename to packages/machines/tags-input/src/index.ts diff --git a/packages/machines/src/tags-input/tags-input.connect.ts b/packages/machines/tags-input/src/tags-input.connect.ts similarity index 94% rename from packages/machines/src/tags-input/tags-input.connect.ts rename to packages/machines/tags-input/src/tags-input.connect.ts index 664439049c..3ab55ed5ae 100644 --- a/packages/machines/src/tags-input/tags-input.connect.ts +++ b/packages/machines/tags-input/src/tags-input.connect.ts @@ -1,9 +1,9 @@ import { StateMachine as S } from "@ui-machines/core" -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" -import { dataAttr } from "../utils/dom-attr" -import { getEventKey } from "../utils/keyboard-event" -import { EventKeyMap } from "../utils/types" -import { validateBlur } from "../utils/validate-blur" +import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" +import { dataAttr } from "../../../utilities/dom/src/attributes" +import { getEventKey } from "../../../utilities/dom/src/keyboard-event" +import { EventKeyMap } from "../../../utilities/types/src/types" +import { validateBlur } from "../../../utilities/dom/src/focus-event" import { dom } from "./tags-input.dom" import { TagsInputMachineContext, TagsInputMachineState } from "./tags-input.machine" diff --git a/packages/machines/src/tags-input/tags-input.dom.ts b/packages/machines/tags-input/src/tags-input.dom.ts similarity index 100% rename from packages/machines/src/tags-input/tags-input.dom.ts rename to packages/machines/tags-input/src/tags-input.dom.ts diff --git a/packages/machines/src/tags-input/tags-input.machine.ts b/packages/machines/tags-input/src/tags-input.machine.ts similarity index 100% rename from packages/machines/src/tags-input/tags-input.machine.ts rename to packages/machines/tags-input/src/tags-input.machine.ts diff --git a/packages/machines/toast/README.md b/packages/machines/toast/README.md new file mode 100644 index 0000000000..f412e59139 --- /dev/null +++ b/packages/machines/toast/README.md @@ -0,0 +1,19 @@ +# @ui-machines/toast + +Core logic for the toast widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/toast +# or +npm i @ui-machines/toast +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/toast/package.json b/packages/machines/toast/package.json new file mode 100644 index 0000000000..03a1b01847 --- /dev/null +++ b/packages/machines/toast/package.json @@ -0,0 +1,36 @@ +{ + "name": "@ui-machines/toast", + "version": "0.0.0", + "description": "Core logic for the toast widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "toast" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-toast.cjs.js", + "types": "dist/ui-machines-toast.cjs.d.ts", + "module": "dist/ui-machines-toast.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/toast", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "dependencies": { + "@ui-machines/core": "^0.0.0", + "@ui-machines/dom-utils": "^0.0.0", + "@ui-machines/types": "^0.0.0" + } +} diff --git a/packages/machines/src/toast/index.ts b/packages/machines/toast/src/index.ts similarity index 71% rename from packages/machines/src/toast/index.ts rename to packages/machines/toast/src/index.ts index 0513951635..82544f1ca0 100644 --- a/packages/machines/src/toast/index.ts +++ b/packages/machines/toast/src/index.ts @@ -12,11 +12,4 @@ export const toast = { createMachine: createToastMachine, } -export type { - ToastGroupMachineContext, - ToastMachine, - ToastMachineContext, - ToastMachineState, - ToastPlacement, - ToastType, -} from "./toast.types" +export type { ToastGroupMachineContext, ToastMachine, ToastMachineContext, ToastMachineState, ToastPlacement, ToastType } from "./toast.types" diff --git a/packages/machines/src/toast/toast-group.connect.ts b/packages/machines/toast/src/toast-group.connect.ts similarity index 95% rename from packages/machines/src/toast/toast-group.connect.ts rename to packages/machines/toast/src/toast-group.connect.ts index c619c36a51..131c78a100 100644 --- a/packages/machines/src/toast/toast-group.connect.ts +++ b/packages/machines/toast/src/toast-group.connect.ts @@ -1,15 +1,8 @@ import { StateMachine as S } from "@ui-machines/core" -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" +import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { runIfFn } from "tiny-fn" import { dom } from "./toast.dom" -import { - ToastGroupContainerProps, - ToastGroupMachineContext, - ToastOptions, - ToastPlacement, - ToastPromiseMessages, - ToastPromiseOptions, -} from "./toast.types" +import { ToastGroupContainerProps, ToastGroupMachineContext, ToastOptions, ToastPlacement, ToastPromiseMessages, ToastPromiseOptions } from "./toast.types" import { getGroupPlacementStyle, getToastsByPlacement } from "./toast.utils" export function toastGroupConnect( diff --git a/packages/machines/src/toast/toast-group.machine.ts b/packages/machines/toast/src/toast-group.machine.ts similarity index 97% rename from packages/machines/src/toast/toast-group.machine.ts rename to packages/machines/toast/src/toast-group.machine.ts index c48caa875e..0f0ce5bd4f 100644 --- a/packages/machines/src/toast/toast-group.machine.ts +++ b/packages/machines/toast/src/toast-group.machine.ts @@ -1,5 +1,5 @@ import { createMachine, ref } from "@ui-machines/core" -import { isNumber } from "../utils/guard" +import { isNumber } from "../../../utilities/guard/src/guard" import { createToastMachine } from "./toast.machine" import { ToastGroupMachineContext } from "./toast.types" diff --git a/packages/machines/src/toast/toast.connect.ts b/packages/machines/toast/src/toast.connect.ts similarity index 98% rename from packages/machines/src/toast/toast.connect.ts rename to packages/machines/toast/src/toast.connect.ts index 60c56ee314..9e6dd3faaf 100644 --- a/packages/machines/src/toast/toast.connect.ts +++ b/packages/machines/toast/src/toast.connect.ts @@ -1,5 +1,5 @@ import { StateMachine as S } from "@ui-machines/core" -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" +import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { dataAttr } from "../utils" import { dom } from "./toast.dom" import { ToastMachineContext, ToastMachineState } from "./toast.types" diff --git a/packages/machines/src/toast/toast.dom.ts b/packages/machines/toast/src/toast.dom.ts similarity index 100% rename from packages/machines/src/toast/toast.dom.ts rename to packages/machines/toast/src/toast.dom.ts diff --git a/packages/machines/src/toast/toast.machine.ts b/packages/machines/toast/src/toast.machine.ts similarity index 97% rename from packages/machines/src/toast/toast.machine.ts rename to packages/machines/toast/src/toast.machine.ts index bc0777ba67..eabe85c9de 100644 --- a/packages/machines/src/toast/toast.machine.ts +++ b/packages/machines/toast/src/toast.machine.ts @@ -1,6 +1,6 @@ import { createMachine, guards } from "@ui-machines/core" -import { addDomEvent } from "../utils/dom-event" -import { noop } from "../utils/fn" +import { addDomEvent } from "../../../utilities/dom/src/add-listener" +import { noop } from "../../../utilities/helpers/src/fn" import { dom } from "./toast.dom" import { ToastMachineContext, ToastMachineState, ToastOptions } from "./toast.types" import { getToastDuration } from "./toast.utils" diff --git a/packages/machines/src/toast/toast.types.ts b/packages/machines/toast/src/toast.types.ts similarity index 100% rename from packages/machines/src/toast/toast.types.ts rename to packages/machines/toast/src/toast.types.ts diff --git a/packages/machines/src/toast/toast.utils.ts b/packages/machines/toast/src/toast.utils.ts similarity index 97% rename from packages/machines/src/toast/toast.utils.ts rename to packages/machines/toast/src/toast.utils.ts index 259ee7ee27..7cfc5fe07f 100644 --- a/packages/machines/src/toast/toast.utils.ts +++ b/packages/machines/toast/src/toast.utils.ts @@ -1,5 +1,5 @@ import { ToastGroupMachineContext } from "." -import { Style } from "../utils/types" +import { Style } from "../../../utilities/types/src/types" import { ToastMachine, ToastMachineContext, ToastPlacement, ToastType } from "./toast.types" export function getToastsByPlacement(toasts: ToastMachine[]) { diff --git a/packages/machines/tooltip/README.md b/packages/machines/tooltip/README.md new file mode 100644 index 0000000000..aded6e93d3 --- /dev/null +++ b/packages/machines/tooltip/README.md @@ -0,0 +1,19 @@ +# @ui-machines/tooltip + +Core logic for the tooltip widget implemented as a state machine + +## Installation + +```sh +yarn add @ui-machines/tooltip +# or +npm i @ui-machines/tooltip +``` + +## Contribution + +Yes please! See the [contributing guidelines](https://github.com/chakra-ui/ui-machines/blob/main/CONTRIBUTING.md) for details. + +## Licence + +This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ui-machines/blob/main/LICENSE). diff --git a/packages/machines/tooltip/package.json b/packages/machines/tooltip/package.json new file mode 100644 index 0000000000..78ce9bf71b --- /dev/null +++ b/packages/machines/tooltip/package.json @@ -0,0 +1,36 @@ +{ + "name": "@ui-machines/tooltip", + "version": "0.0.0", + "description": "Core logic for the tooltip widget implemented as a state machine", + "keywords": [ + "js", + "machine", + "xstate", + "statechart", + "component", + "chakra-ui", + "tooltip" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-tooltip.cjs.js", + "types": "dist/ui-machines-tooltip.cjs.d.ts", + "module": "dist/ui-machines-tooltip.esm.js", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/tooltip", + "sideEffects": false, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "dependencies": { + "@ui-machines/core": "^0.0.0", + "@ui-machines/dom-utils": "^0.0.0", + "@ui-machines/types": "^0.0.0" + } +} diff --git a/packages/machines/src/tooltip/index.ts b/packages/machines/tooltip/src/index.ts similarity index 100% rename from packages/machines/src/tooltip/index.ts rename to packages/machines/tooltip/src/index.ts diff --git a/packages/machines/src/tooltip/tooltip.connect.ts b/packages/machines/tooltip/src/tooltip.connect.ts similarity index 96% rename from packages/machines/src/tooltip/tooltip.connect.ts rename to packages/machines/tooltip/src/tooltip.connect.ts index 15bada3a6c..3602d4c5f9 100644 --- a/packages/machines/src/tooltip/tooltip.connect.ts +++ b/packages/machines/tooltip/src/tooltip.connect.ts @@ -1,7 +1,7 @@ import { StateMachine as S } from "@ui-machines/core" -import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/prop-types" +import { normalizeProp, PropTypes, ReactPropTypes } from "@ui-machines/types" import { dataAttr, getEventKey } from "../utils" -import type { EventKeyMap } from "../utils/types" +import type { EventKeyMap } from "../../../utilities/types/src/types" import { dom } from "./tooltip.dom" import { tooltipStore } from "./tooltip.store" import { TooltipMachineContext, TooltipMachineState } from "./tooltip.types" diff --git a/packages/machines/src/tooltip/tooltip.dom.ts b/packages/machines/tooltip/src/tooltip.dom.ts similarity index 100% rename from packages/machines/src/tooltip/tooltip.dom.ts rename to packages/machines/tooltip/src/tooltip.dom.ts diff --git a/packages/machines/src/tooltip/tooltip.machine.ts b/packages/machines/tooltip/src/tooltip.machine.ts similarity index 98% rename from packages/machines/src/tooltip/tooltip.machine.ts rename to packages/machines/tooltip/src/tooltip.machine.ts index 3a76d8e973..965a5c81d8 100644 --- a/packages/machines/src/tooltip/tooltip.machine.ts +++ b/packages/machines/tooltip/src/tooltip.machine.ts @@ -4,7 +4,7 @@ import { noop } from "tiny-fn" import { isElement, isSafari } from "tiny-guard" import { subscribe } from "valtio" import { uuid } from "../utils" -import { addPointerlockChangeListener } from "../utils/pointerlock" +import { addPointerlockChangeListener } from "../../../utilities/dom/src/pointerlock" import { dom } from "./tooltip.dom" import { tooltipStore } from "./tooltip.store" import { TooltipMachineContext, TooltipMachineState } from "./tooltip.types" diff --git a/packages/machines/src/tooltip/tooltip.store.ts b/packages/machines/tooltip/src/tooltip.store.ts similarity index 100% rename from packages/machines/src/tooltip/tooltip.store.ts rename to packages/machines/tooltip/src/tooltip.store.ts diff --git a/packages/machines/src/tooltip/tooltip.types.ts b/packages/machines/tooltip/src/tooltip.types.ts similarity index 100% rename from packages/machines/src/tooltip/tooltip.types.ts rename to packages/machines/tooltip/src/tooltip.types.ts diff --git a/packages/utilities/array/chunk/package.json b/packages/utilities/array/chunk/package.json new file mode 100644 index 0000000000..a9cc3f6afb --- /dev/null +++ b/packages/utilities/array/chunk/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/ui-machines-array-utils-chunk.cjs.js", + "module": "dist/ui-machines-array-utils-chunk.esm.js" +} diff --git a/packages/utilities/array/package.json b/packages/utilities/array/package.json new file mode 100644 index 0000000000..f5e9be805f --- /dev/null +++ b/packages/utilities/array/package.json @@ -0,0 +1,34 @@ +{ + "name": "@ui-machines/array-utils", + "version": "0.0.0", + "description": "", + "keywords": [ + "js", + "utils", + "array" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-array-utils.cjs.js", + "module": "dist/ui-machines-array-utils.esm.js", + "types": "dist/ui-machines-array-utils.cjs.d.ts", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/utilities/array-utils", + "sideEffects": false, + "files": [ + "dist", + "chunk" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "preconstruct": { + "entrypoints": [ + "index.ts", + "chunk.ts" + ] + } +} diff --git a/packages/utilities/array/src/chunk.ts b/packages/utilities/array/src/chunk.ts new file mode 100644 index 0000000000..61668edb3b --- /dev/null +++ b/packages/utilities/array/src/chunk.ts @@ -0,0 +1,10 @@ +import { last } from "./index" + +export const chunk = (v: T[], size: number): T[][] => { + const res: T[][] = [] + return v.reduce((rows, value, index) => { + if (index % size === 0) rows.push([value]) + else last(rows)?.push(value) + return rows + }, res) +} diff --git a/packages/utilities/array/src/index.ts b/packages/utilities/array/src/index.ts new file mode 100644 index 0000000000..f1189afb2e --- /dev/null +++ b/packages/utilities/array/src/index.ts @@ -0,0 +1,28 @@ +export function toArray(v: T | T[] | undefined | null): T[] { + if (!v) return [] + return Array.isArray(v) ? v : [v] +} + +export const fromLength = (length: number) => Array.from(Array(length).keys()) + +export const first = (v: T[]): T | undefined => v[0] + +export const last = (v: T[]): T | undefined => v[v.length - 1] + +export const isEmpty = (v: T[]): boolean => v.length === 0 + +export const has = (v: T[], t: any): boolean => v.indexOf(t) !== -1 + +export const add = (v: T[], ...items: T[]): T[] => v.concat(items) + +export const remove = (v: T[], item: T): T[] => removeAt(v, v.indexOf(item)) + +export const removeAt = (v: T[], i: number): T[] => { + if (i > -1) v.splice(i, 1) + return v +} + +export function clear(v: T[]): T[] { + while (v.length > 0) v.pop() + return v +} diff --git a/packages/utilities/dom/add-listener/package.json b/packages/utilities/dom/add-listener/package.json new file mode 100644 index 0000000000..6e5910bc23 --- /dev/null +++ b/packages/utilities/dom/add-listener/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/ui-machines-dom-utils-add-listener.cjs.js", + "module": "dist/ui-machines-dom-utils-add-listener.esm.js" +} diff --git a/packages/utilities/dom/body-pointer-event/package.json b/packages/utilities/dom/body-pointer-event/package.json new file mode 100644 index 0000000000..9dcfd72a82 --- /dev/null +++ b/packages/utilities/dom/body-pointer-event/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/ui-machines-dom-utils-body-pointer-event.cjs.js", + "module": "dist/ui-machines-dom-utils-body-pointer-event.esm.js" +} diff --git a/packages/utilities/dom/body-scroll-lock/package.json b/packages/utilities/dom/body-scroll-lock/package.json new file mode 100644 index 0000000000..353db9d1c4 --- /dev/null +++ b/packages/utilities/dom/body-scroll-lock/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/ui-machines-dom-utils-body-scroll-lock.cjs.js", + "module": "dist/ui-machines-dom-utils-body-scroll-lock.esm.js" +} diff --git a/packages/utilities/dom/computed-style/package.json b/packages/utilities/dom/computed-style/package.json new file mode 100644 index 0000000000..e209949fc2 --- /dev/null +++ b/packages/utilities/dom/computed-style/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/ui-machines-dom-utils-computed-style.cjs.js", + "module": "dist/ui-machines-dom-utils-computed-style.esm.js" +} diff --git a/packages/utilities/dom/dispatch-event/package.json b/packages/utilities/dom/dispatch-event/package.json new file mode 100644 index 0000000000..3b129a31bc --- /dev/null +++ b/packages/utilities/dom/dispatch-event/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/ui-machines-dom-utils-dispatch-event.cjs.js", + "module": "dist/ui-machines-dom-utils-dispatch-event.esm.js" +} diff --git a/packages/utilities/dom/focus-event/package.json b/packages/utilities/dom/focus-event/package.json new file mode 100644 index 0000000000..0017c45fdf --- /dev/null +++ b/packages/utilities/dom/focus-event/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/ui-machines-dom-utils-focus-event.cjs.js", + "module": "dist/ui-machines-dom-utils-focus-event.esm.js" +} diff --git a/packages/utilities/dom/live-region/package.json b/packages/utilities/dom/live-region/package.json new file mode 100644 index 0000000000..840dcb418c --- /dev/null +++ b/packages/utilities/dom/live-region/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/ui-machines-dom-utils-live-region.cjs.js", + "module": "dist/ui-machines-dom-utils-live-region.esm.js" +} diff --git a/packages/utilities/dom/merge-props/package.json b/packages/utilities/dom/merge-props/package.json new file mode 100644 index 0000000000..2a5f285956 --- /dev/null +++ b/packages/utilities/dom/merge-props/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/ui-machines-dom-utils-merge-props.cjs.js", + "module": "dist/ui-machines-dom-utils-merge-props.esm.js" +} diff --git a/packages/utilities/dom/mutation-observer/package.json b/packages/utilities/dom/mutation-observer/package.json new file mode 100644 index 0000000000..b1ce30708b --- /dev/null +++ b/packages/utilities/dom/mutation-observer/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/ui-machines-dom-utils-mutation-observer.cjs.js", + "module": "dist/ui-machines-dom-utils-mutation-observer.esm.js" +} diff --git a/packages/utilities/dom/nodelist/package.json b/packages/utilities/dom/nodelist/package.json new file mode 100644 index 0000000000..e50b1b206b --- /dev/null +++ b/packages/utilities/dom/nodelist/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/ui-machines-dom-utils-nodelist.cjs.js", + "module": "dist/ui-machines-dom-utils-nodelist.esm.js" +} diff --git a/packages/utilities/dom/package.json b/packages/utilities/dom/package.json new file mode 100644 index 0000000000..dd5e69b27a --- /dev/null +++ b/packages/utilities/dom/package.json @@ -0,0 +1,63 @@ +{ + "name": "@ui-machines/dom-utils", + "version": "0.0.0", + "description": "JavaScript DOM utilities for the machines", + "keywords": [ + "js", + "utils", + "dom" + ], + "author": "Segun Adebayo ", + "homepage": "https://github.com/chakra-ui/ui-machines#readme", + "license": "MIT", + "main": "dist/ui-machines-dom-utils.cjs.js", + "module": "dist/ui-machines-dom-utils.esm.js", + "types": "dist/ui-machines-dom-utils.cjs.d.ts", + "repository": "https://github.com/chakra-ui/ui-machines/tree/main/packages/utilities/dom-utils", + "sideEffects": false, + "files": [ + "dist", + "body-pointer-event", + "body-scroll-lock", + "computed-style", + "dispatch-event", + "add-listener", + "live-region", + "merge-props", + "mutation-observer", + "nodelist", + "pointer-event", + "pointerlock", + "text-selection", + "scrollable", + "focus-event" + ], + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/chakra-ui/ui-machines/issues" + }, + "preconstruct": { + "entrypoints": [ + "body-pointer-event.ts", + "body-scroll-lock.ts", + "computed-style.ts", + "dispatch-event.ts", + "add-listener.ts", + "index.ts", + "live-region.ts", + "merge-props.ts", + "mutation-observer.ts", + "nodelist.ts", + "pointer-event.ts", + "pointerlock.ts", + "scrollable.ts", + "text-selection.ts", + "focus-event.ts" + ] + }, + "dependencies": { + "scroll-into-view-if-needed": "^2.2.28" + } +} diff --git a/packages/utilities/dom/pointer-event/package.json b/packages/utilities/dom/pointer-event/package.json new file mode 100644 index 0000000000..7dd1fe6fc3 --- /dev/null +++ b/packages/utilities/dom/pointer-event/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/ui-machines-dom-utils-pointer-event.cjs.js", + "module": "dist/ui-machines-dom-utils-pointer-event.esm.js" +} diff --git a/packages/utilities/dom/pointerlock/package.json b/packages/utilities/dom/pointerlock/package.json new file mode 100644 index 0000000000..ebca880ed7 --- /dev/null +++ b/packages/utilities/dom/pointerlock/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/ui-machines-dom-utils-pointerlock.cjs.js", + "module": "dist/ui-machines-dom-utils-pointerlock.esm.js" +} diff --git a/packages/utilities/dom/scrollable/package.json b/packages/utilities/dom/scrollable/package.json new file mode 100644 index 0000000000..fa040b37ac --- /dev/null +++ b/packages/utilities/dom/scrollable/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/ui-machines-dom-utils-scrollable.cjs.js", + "module": "dist/ui-machines-dom-utils-scrollable.esm.js" +} diff --git a/packages/machines/src/utils/dom-event.ts b/packages/utilities/dom/src/add-listener.ts similarity index 86% rename from packages/machines/src/utils/dom-event.ts rename to packages/utilities/dom/src/add-listener.ts index 849af16564..56ebe46af2 100644 --- a/packages/machines/src/utils/dom-event.ts +++ b/packages/utilities/dom/src/add-listener.ts @@ -1,5 +1,3 @@ -import { cast } from "./fn" - export const t = (v: any) => Object.prototype.toString.call(v).slice(8, -1) export const isRef = (v: any): v is RefTarget => { @@ -26,15 +24,10 @@ export function extractInfo(event: } } -export function addDomEvent( - target: DOMEventTarget, - event: K, - listener: (event: EventMap[K]) => void, - options?: boolean | AddEventListenerOptions, -) { +export function addDomEvent(target: DOMEventTarget, event: K, listener: (event: EventMap[K]) => void, options?: boolean | AddEventListenerOptions) { const node = isRef(target) ? target.current : runIfFn(target) - node?.addEventListener(event, cast(listener), options) - return () => node?.removeEventListener(event, cast(listener), options) + node?.addEventListener(event, listener as any, options) + return () => node?.removeEventListener(event, listener as any, options) } export function addPointerEvent( @@ -46,10 +39,7 @@ export function addPointerEvent( return addDomEvent(target, getEventName(event), wrapHandler(listener, event === "pointerdown"), options) } -function wrapHandler( - fn: (event: E, info: PointerEventInfo) => void, - filter = false, -) { +function wrapHandler(fn: (event: E, info: PointerEventInfo) => void, filter = false) { const listener: EventListener = (event: any) => { fn(event, extractInfo(event)) } @@ -92,10 +82,7 @@ export type EventListenerOptions = boolean | AddEventListenerOptions export interface PointerEventInfo { point: { x: number; y: number } } -export type EventListenerWithPointInfo = ( - event: T, - info: PointerEventInfo, -) => void +export type EventListenerWithPointInfo = (event: T, info: PointerEventInfo) => void interface PointerNameMap { pointerdown: string diff --git a/packages/machines/src/utils/body-pointer-event.ts b/packages/utilities/dom/src/body-pointer-event.ts similarity index 78% rename from packages/machines/src/utils/body-pointer-event.ts rename to packages/utilities/dom/src/body-pointer-event.ts index 51c3d3d59b..9c040726be 100644 --- a/packages/machines/src/utils/body-pointer-event.ts +++ b/packages/utilities/dom/src/body-pointer-event.ts @@ -1,4 +1,5 @@ import { isLeftClick } from "tiny-guard" +import { nextTick } from "@ui-machines/utils" let changeCount = 0 let originalBodyPointerEvents: string @@ -36,7 +37,7 @@ export function preventBodyPointerEvents(opts: Partial = {} } } - function flush() { + function reset() { changeCount-- if (changeCount === 0) { doc.body.style.pointerEvents = originalBodyPointerEvents @@ -55,14 +56,22 @@ export function preventBodyPointerEvents(opts: Partial = {} return function () { if (isTouchOrPenPressed) { - doc.addEventListener("click", flush, { once: true }) + doc.addEventListener("click", reset, { once: true }) } else if (isLeftClickPressed) { - doc.addEventListener("pointerup", flush, { once: true }) + doc.addEventListener("pointerup", reset, { once: true }) } else { - flush() + reset() } } } - return { apply, listen } + const cleanups: Array = [] + cleanups.push(apply()) + nextTick(() => { + cleanups.push(listen()) + }) + + return function () { + cleanups.forEach((cleanup) => cleanup?.()) + } } diff --git a/packages/machines/src/utils/body-scroll-lock.ts b/packages/utilities/dom/src/body-scroll-lock.ts similarity index 88% rename from packages/machines/src/utils/body-scroll-lock.ts rename to packages/utilities/dom/src/body-scroll-lock.ts index b6326dc196..11163ca8fb 100644 --- a/packages/machines/src/utils/body-scroll-lock.ts +++ b/packages/utilities/dom/src/body-scroll-lock.ts @@ -1,8 +1,8 @@ import scrollIntoView from "scroll-into-view-if-needed" -import { addDomEvent } from "../utils/dom-event" -import { getScrollParent } from "tiny-dom-query/scrollable" -import { cast, noop, pipe } from "tiny-fn" +import { noop, pipe } from "tiny-fn" import { isDom, isIos } from "tiny-guard" +import { addDomEvent } from "./add-listener" +import { getScrollParent } from "./scrollable" interface PreventScrollOptions { disabled?: boolean @@ -16,17 +16,14 @@ const nonTextInputTypes = new Set(["checkbox", "radio", "range", "color", "file" export function preventBodyScroll(opts?: PreventScrollOptions) { const { document: docProp, disabled = false, allowPinchZoom } = opts ?? {} - const doc = cast(docProp ?? document) - const win = cast(doc?.defaultView ?? window) + const doc = docProp ?? document + const win = doc?.defaultView ?? window const viewport = isDom() ? win.visualViewport : null const docEl = doc.documentElement function preventScrollStandard() { - const fn = pipe( - setStyle(docEl, "paddingRight", `${win.innerWidth - docEl.clientWidth}px`), - setStyle(docEl, "overflow", "hidden"), - ) + const fn = pipe(setStyle(docEl, "paddingRight", `${win.innerWidth - docEl.clientWidth}px`), setStyle(docEl, "overflow", "hidden")) return () => fn?.() } @@ -103,8 +100,8 @@ export function preventBodyScroll(opts?: PreventScrollOptions) { win.scrollTo(0, 0) } - let scrollX = win.pageXOffset - let scrollY = win.pageYOffset + let scrollX = win.scrollX + let scrollY = win.scrollY let restoreStyles = pipe( setStyle(docEl, "paddingRight", `${win.innerWidth - docEl.clientWidth}px`), setStyle(docEl, "overflow", "hidden"), diff --git a/packages/machines/src/utils/computed-style.ts b/packages/utilities/dom/src/computed-style.ts similarity index 90% rename from packages/machines/src/utils/computed-style.ts rename to packages/utilities/dom/src/computed-style.ts index 818e29acea..5fc1f3b64d 100644 --- a/packages/machines/src/utils/computed-style.ts +++ b/packages/utilities/dom/src/computed-style.ts @@ -4,7 +4,7 @@ type El = HTMLElement | null | undefined const styleCache: WeakMap = new WeakMap() -export function getElementStyle(el: El): Styles { +export function getComputedStyle(el: El): Styles { if (!el) return {} as Styles let style: Styles | undefined = styleCache.get(el) if (!style) { @@ -22,7 +22,7 @@ export function setElementStyle(el: El, styles: Styles) { export function checkElementStyle(el: El, k: Key, v: string | string[]) { if (!el) return false - const style = getElementStyle(el) + const style = getComputedStyle(el) const val = Array.isArray(v) ? v : [v] const vv = style?.getPropertyValue(k) return vv !== null ? val.includes(vv) : false diff --git a/packages/machines/src/utils/dispatch-input.ts b/packages/utilities/dom/src/dispatch-event.ts similarity index 100% rename from packages/machines/src/utils/dispatch-input.ts rename to packages/utilities/dom/src/dispatch-event.ts diff --git a/packages/machines/src/utils/validate-blur.ts b/packages/utilities/dom/src/focus-event.ts similarity index 65% rename from packages/machines/src/utils/validate-blur.ts rename to packages/utilities/dom/src/focus-event.ts index b145b3828e..2d303e2fe2 100644 --- a/packages/machines/src/utils/validate-blur.ts +++ b/packages/utilities/dom/src/focus-event.ts @@ -1,12 +1,9 @@ -import { toArray } from "tiny-array" -import { cast } from "tiny-fn" - /** * Determine if the blur event within an element is valid */ export function validateBlur(event: Event, opts: Options) { - const exclude = toArray(opts.exclude) - const relatedTarget = cast(event.relatedTarget ?? opts.fallback) + const exclude = Array.isArray(opts.exclude) ? opts.exclude : [opts.exclude] + const relatedTarget = (event.relatedTarget ?? opts.fallback) as HTMLElement return exclude.every((el) => !el?.contains(relatedTarget)) } diff --git a/packages/utilities/dom/src/index.ts b/packages/utilities/dom/src/index.ts new file mode 100644 index 0000000000..ce46a33281 --- /dev/null +++ b/packages/utilities/dom/src/index.ts @@ -0,0 +1,27 @@ +type Booleanish = boolean | "true" | "false" + +export const dataAttr = (guard: boolean | undefined) => { + return (guard ? "" : undefined) as Booleanish +} + +export const ariaAttr = (guard: boolean | undefined) => { + return guard ? true : undefined +} + +export const nextTick = (fn: VoidFunction) => { + const set = new Set() + function raf(fn: VoidFunction) { + const id = globalThis.requestAnimationFrame(fn) + set.add(() => globalThis.cancelAnimationFrame(id)) + } + raf(() => raf(fn)) + return function cleanup() { + set.forEach(function (fn) { + fn() + }) + } +} + +export * from "./keyboard-event" +export * from "./query" +export * from "./sr-only" diff --git a/packages/machines/src/utils/keyboard-event.ts b/packages/utilities/dom/src/keyboard-event.ts similarity index 100% rename from packages/machines/src/utils/keyboard-event.ts rename to packages/utilities/dom/src/keyboard-event.ts diff --git a/packages/machines/src/utils/live-region.ts b/packages/utilities/dom/src/live-region.ts similarity index 70% rename from packages/machines/src/utils/live-region.ts rename to packages/utilities/dom/src/live-region.ts index f8454da3e9..6ac55e9648 100644 --- a/packages/machines/src/utils/live-region.ts +++ b/packages/utilities/dom/src/live-region.ts @@ -1,9 +1,4 @@ -import { isDom } from "tiny-guard" -import { Style } from "./types" - -/* ----------------------------------------------------------------------------- - * Live Region for screen reader technology - * -----------------------------------------------------------------------------*/ +import { srOnlyStyle } from "./sr-only" type LiveRegionOptions = { ariaLive: "polite" | "assertive" @@ -13,25 +8,13 @@ type LiveRegionOptions = { doc?: Document } -export const srOnlyStyle: Style = { - border: "0", - clip: "rect(0 0 0 0)", - height: "1px", - margin: "-1px", - overflow: "hidden", - padding: "0", - position: "absolute", - width: "1px", - whiteSpace: "nowrap", -} - export class LiveRegion { region: HTMLElement | null = null doc: Document | null constructor(opts: Partial = {}) { const { ariaLive = "polite", role = "log", ariaRelevant = "additions", doc: _doc } = opts - this.doc = _doc ?? isDom() ? document : null + this.doc = _doc || document const exists = this.doc?.getElementById("__machine-region") if (!this.doc || exists) return diff --git a/packages/machines/src/utils/merge-props.ts b/packages/utilities/dom/src/merge-props.ts similarity index 100% rename from packages/machines/src/utils/merge-props.ts rename to packages/utilities/dom/src/merge-props.ts diff --git a/packages/machines/src/utils/mutation-observer.ts b/packages/utilities/dom/src/mutation-observer.ts similarity index 63% rename from packages/machines/src/utils/mutation-observer.ts rename to packages/utilities/dom/src/mutation-observer.ts index ab62f56d6a..7f4cb37f59 100644 --- a/packages/machines/src/utils/mutation-observer.ts +++ b/packages/utilities/dom/src/mutation-observer.ts @@ -1,13 +1,10 @@ import { noop } from "tiny-fn" -export function observeAttributes( - node: HTMLElement | null, - attributes: string | string[], - fn: (v: MutationRecord) => void, -) { +export function observeAttributes(node: HTMLElement | null, attributes: string | string[], fn: (v: MutationRecord) => void) { if (!node) return noop const attrs = Array.isArray(attributes) ? attributes : [attributes] - const obs = new MutationObserver((changes) => { + const win = node.ownerDocument.defaultView || window + const obs = new win.MutationObserver((changes) => { for (const change of changes) { if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) { fn(change) diff --git a/packages/machines/src/utils/nodelist.ts b/packages/utilities/dom/src/nodelist.ts similarity index 100% rename from packages/machines/src/utils/nodelist.ts rename to packages/utilities/dom/src/nodelist.ts diff --git a/packages/machines/src/utils/pointer-event.ts b/packages/utilities/dom/src/pointer-event.ts similarity index 86% rename from packages/machines/src/utils/pointer-event.ts rename to packages/utilities/dom/src/pointer-event.ts index 7b4cd5e13e..4103911663 100644 --- a/packages/machines/src/utils/pointer-event.ts +++ b/packages/utilities/dom/src/pointer-event.ts @@ -1,13 +1,7 @@ import { pipe } from "tiny-fn" import { isLeftClick, isMouseEvent } from "tiny-guard" -import { distance } from "tiny-point/distance" import { ref } from "valtio" -import { - addPointerEvent, - AnyPointerEvent, - EventListenerWithPointInfo as Listener, - PointerEventInfo, -} from "../utils/dom-event" +import { addPointerEvent, AnyPointerEvent, EventListenerWithPointInfo as Listener, PointerEventInfo } from "./add-listener" type TrackPointerDownOptions = { doc?: Document @@ -39,7 +33,9 @@ export function trackPointerMove(opts: TrackPointerMoveOptions) { const { doc = document, threshold = 5 } = ctx const handlePointerMove: Listener = (event, info) => { - if (distance(info.point) < threshold) return + const { point: p } = info + const distance = Math.sqrt(p.x ** 2 + p.y ** 2) + if (distance < threshold) return // Because Safari doesn't trigger mouseup events when it's above a `