fix: lint errors

tbergman · Oct 14, 2021 · 1ca579e · 1ca579e
1 parent 008589c
commit 1ca579e
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 67 deletions.
diff --git a/examples/next-ts/pages/accordion.tsx b/examples/next-ts/pages/accordion.tsx
@@ -38,13 +38,13 @@ export default function Page() {
       <controls.ui />
       <div ref={ref} {...rootProps} style={{ maxWidth: "40ch" }}>
         {data.map((item) => (
-          <div key={item.id} {...getItemProps({ id: item.id })}>
+          <div key={item.id} {...getItemProps({ value: item.id })}>
             <h3>
-              <button data-testid={`${item.id}:trigger`} {...getTriggerProps({ id: item.id })}>
+              <button data-testid={`${item.id}:trigger`} {...getTriggerProps({ value: item.id })}>
                 {item.label}
               </button>
             </h3>
-            <div data-testid={`${item.id}:content`} {...getContentProps({ id: item.id })}>
+            <div data-testid={`${item.id}:content`} {...getContentProps({ value: item.id })}>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
               dolore magna aliqua.
             </div>

diff --git a/examples/solid-ts/src/pages/accordion.tsx b/examples/solid-ts/src/pages/accordion.tsx
@@ -1,8 +1,6 @@
 import { accordion } from "@ui-machines/web"
 import { normalizeProps, useMachine, useSetup } from "@ui-machines/solid"
-
 import { createMemo } from "solid-js"
-
 import { StateVisualizer } from "../components/state-visualizer"
 
 export default function Page() {
@@ -13,31 +11,31 @@ export default function Page() {
   return (
     <div style={{ width: "100%" }}>
       <div ref={ref} {...connect().rootProps} style={{ maxWidth: "40ch" }}>
-        <div {...connect().getItemProps({ id: "home" })}>
+        <div {...connect().getItemProps({ value: "home" })}>
           <h3>
-            <button {...connect().getTriggerProps({ id: "home" })}>Home</button>
+            <button {...connect().getTriggerProps({ value: "home" })}>Home</button>
           </h3>
-          <div {...connect().getContentProps({ id: "home" })}>
+          <div {...connect().getContentProps({ value: "home" })}>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
           </div>
         </div>
 
-        <div {...connect().getItemProps({ id: "about" })}>
+        <div {...connect().getItemProps({ value: "about" })}>
           <h3>
-            <button {...connect().getTriggerProps({ id: "about" })}>About</button>
+            <button {...connect().getTriggerProps({ value: "about" })}>About</button>
           </h3>
-          <div {...connect().getContentProps({ id: "about" })}>
+          <div {...connect().getContentProps({ value: "about" })}>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
           </div>
         </div>
 
-        <div {...connect().getItemProps({ id: "contact" })}>
+        <div {...connect().getItemProps({ value: "contact" })}>
           <h3>
-            <button {...connect().getTriggerProps({ id: "contact" })}>Contact</button>
+            <button {...connect().getTriggerProps({ value: "contact" })}>Contact</button>
           </h3>
-          <div {...connect().getContentProps({ id: "contact" })}>
+          <div {...connect().getContentProps({ value: "contact" })}>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
           </div>

diff --git a/examples/vue-ts/src/pages/accordion.tsx b/examples/vue-ts/src/pages/accordion.tsx
@@ -16,31 +16,31 @@ export default defineComponent({
       return (
         <div style={{ width: "100%" }}>
           <div ref={ref} {...rootProps} style={{ maxWidth: "40ch" }}>
-            <div {...getItemProps({ id: "home" })}>
+            <div {...getItemProps({ value: "home" })}>
               <h3>
-                <button {...getTriggerProps({ id: "home" })}>Home</button>
+                <button {...getTriggerProps({ value: "home" })}>Home</button>
               </h3>
-              <div {...getContentProps({ id: "home" })}>
+              <div {...getContentProps({ value: "home" })}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                 dolore magna aliqua.
               </div>
             </div>
 
-            <div {...getItemProps({ id: "about" })}>
+            <div {...getItemProps({ value: "about" })}>
               <h3>
-                <button {...getTriggerProps({ id: "about" })}>About</button>
+                <button {...getTriggerProps({ value: "about" })}>About</button>
               </h3>
-              <div {...getContentProps({ id: "about" })}>
+              <div {...getContentProps({ value: "about" })}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                 dolore magna aliqua.
               </div>
             </div>
 
-            <div {...getItemProps({ id: "contact" })}>
+            <div {...getItemProps({ value: "contact" })}>
               <h3>
-                <button {...getTriggerProps({ id: "contact" })}>Contact</button>
+                <button {...getTriggerProps({ value: "contact" })}>Contact</button>
               </h3>
-              <div {...getContentProps({ id: "contact" })}>
+              <div {...getContentProps({ value: "contact" })}>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                 dolore magna aliqua.
               </div>

diff --git a/packages/machines/src/accordion/accordion.connect.ts b/packages/machines/src/accordion/accordion.connect.ts
@@ -8,10 +8,10 @@ export function accordionConnect(state: AccordionState, send: AccordionSend, nor
   const { context: ctx } = state
 
   function getItemState(props: AccordionItemProps) {
-    const { id, disabled } = props
+    const { value, disabled } = props
     return {
-      isOpen: isArray(ctx.activeId) ? ctx.activeId.includes(id) : id === ctx.activeId,
-      isFocused: ctx.focusedId === id,
+      isOpen: isArray(ctx.value) ? ctx.value.includes(value) : value === ctx.value,
+      isFocused: ctx.focusedValue === value,
       isDisabled: disabled ?? ctx.disabled,
     }
   }
@@ -26,7 +26,7 @@ export function accordionConnect(state: AccordionState, send: AccordionSend, nor
     getItemProps(props: AccordionItemProps) {
       const { isOpen } = getItemState(props)
       return normalize<Props.Element>({
-        id: dom.getGroupId(ctx, props.id),
+        id: dom.getGroupId(ctx, props.value),
         "data-expanded": dataAttr(isOpen),
       })
     },
@@ -35,8 +35,8 @@ export function accordionConnect(state: AccordionState, send: AccordionSend, nor
       const { isOpen, isFocused, isDisabled } = getItemState(props)
       return normalize<Props.Element>({
         role: "region",
-        id: dom.getPanelId(ctx, props.id),
-        "aria-labelledby": dom.getTriggerId(ctx, props.id),
+        id: dom.getPanelId(ctx, props.value),
+        "aria-labelledby": dom.getTriggerId(ctx, props.value),
         hidden: !isOpen,
         "data-disabled": dataAttr(isDisabled),
         "data-focus": dataAttr(isFocused),
@@ -45,46 +45,46 @@ export function accordionConnect(state: AccordionState, send: AccordionSend, nor
     },
 
     getTriggerProps(props: AccordionItemProps) {
-      const { id } = props
+      const { value } = props
       const { isDisabled, isOpen } = getItemState(props)
       return normalize<Props.Button>({
         type: "button",
-        id: dom.getTriggerId(ctx, id),
-        "aria-controls": dom.getPanelId(ctx, id),
+        id: dom.getTriggerId(ctx, value),
+        "aria-controls": dom.getPanelId(ctx, value),
         "aria-expanded": isOpen,
         disabled: isDisabled,
         "aria-disabled": isDisabled,
         "data-ownedby": dom.getRootId(ctx),
         onFocus() {
           if (isDisabled) return
-          send({ type: "FOCUS", id })
+          send({ type: "FOCUS", value })
         },
         onBlur() {
           if (isDisabled) return
           send("BLUR")
         },
         onClick() {
           if (isDisabled) return
-          send({ type: "CLICK", id })
+          send({ type: "CLICK", value })
         },
         onKeyDown(event) {
           if (isDisabled) return
 
           const keyMap: DOM.EventKeyMap = {
             ArrowDown() {
-              send({ type: "ARROW_DOWN", id })
+              send({ type: "ARROW_DOWN", value })
             },
             ArrowUp() {
-              send({ type: "ARROW_UP", id })
+              send({ type: "ARROW_UP", value })
             },
             Enter() {
-              send({ type: "CLICK", id })
+              send({ type: "CLICK", value })
             },
             Home() {
-              send({ type: "HOME", id })
+              send({ type: "HOME", value })
             },
             End() {
-              send({ type: "END", id })
+              send({ type: "END", value })
             },
           }
 

diff --git a/packages/machines/src/accordion/accordion.machine.ts b/packages/machines/src/accordion/accordion.machine.ts
@@ -12,15 +12,14 @@ export const accordionMachine = createMachine<AccordionMachineContext, Accordion
     id: "accordion-machine",
     initial: "unknown",
     context: {
-      focusedId: null,
-      activeId: null,
+      focusedValue: null,
+      value: null,
       uid: uuid(),
       collapsible: false,
       multiple: false,
     },
     watch: {
-      // when the `activeId` changes, we need to call the `onChange` callback
-      activeId: "invokeOnChange",
+      value: "invokeOnChange",
     },
     states: {
       unknown: {
@@ -35,7 +34,7 @@ export const accordionMachine = createMachine<AccordionMachineContext, Accordion
         on: {
           FOCUS: {
             target: "focused",
-            actions: "setFocusedId",
+            actions: "setFocusedValue",
           },
         },
       },
@@ -65,7 +64,7 @@ export const accordionMachine = createMachine<AccordionMachineContext, Accordion
           },
           BLUR: {
             target: "idle",
-            actions: "clearFocusedId",
+            actions: "clearFocusedValue",
           },
         },
       },
@@ -74,17 +73,17 @@ export const accordionMachine = createMachine<AccordionMachineContext, Accordion
   {
     guards: {
       canToggle: (ctx) => !!ctx.collapsible || !!ctx.multiple,
-      isExpanded: (ctx, evt) => (isArray(ctx.activeId) ? ctx.activeId.includes(evt.id) : ctx.activeId === evt.id),
+      isExpanded: (ctx, evt) => (isArray(ctx.value) ? ctx.value.includes(evt.id) : ctx.value === evt.id),
     },
     actions: {
       invokeOnChange(ctx) {
-        ctx.onChange?.(ctx.activeId)
+        ctx.onChange?.(ctx.value)
       },
       collapse(ctx, evt) {
-        ctx.activeId = ctx.multiple ? remove(toArray(ctx.activeId), evt.id) : null
+        ctx.value = ctx.multiple ? remove(toArray(ctx.value), evt.value) : null
       },
       expand(ctx, evt) {
-        ctx.activeId = ctx.multiple ? add(toArray(ctx.activeId), evt.id) : evt.id
+        ctx.value = ctx.multiple ? add(toArray(ctx.value), evt.value) : evt.value
       },
       focusFirst(ctx) {
         dom.getFirstTriggerEl(ctx)?.focus()
@@ -93,20 +92,20 @@ export const accordionMachine = createMachine<AccordionMachineContext, Accordion
         dom.getLastTriggerEl(ctx)?.focus()
       },
       focusNext(ctx) {
-        if (!ctx.focusedId) return
-        const el = dom.getNextTriggerEl(ctx, ctx.focusedId)
+        if (!ctx.focusedValue) return
+        const el = dom.getNextTriggerEl(ctx, ctx.focusedValue)
         el?.focus()
       },
       focusPrev(ctx) {
-        if (!ctx.focusedId) return
-        const el = dom.getPrevTriggerEl(ctx, ctx.focusedId)
+        if (!ctx.focusedValue) return
+        const el = dom.getPrevTriggerEl(ctx, ctx.focusedValue)
         el?.focus()
       },
-      setFocusedId(ctx, evt) {
-        ctx.focusedId = evt.id
+      setFocusedValue(ctx, evt) {
+        ctx.focusedValue = evt.value
       },
-      clearFocusedId(ctx) {
-        ctx.focusedId = null
+      clearFocusedValue(ctx) {
+        ctx.focusedValue = null
       },
       setId(ctx, evt) {
         ctx.uid = evt.id

diff --git a/packages/machines/src/accordion/accordion.types.ts b/packages/machines/src/accordion/accordion.types.ts
@@ -15,15 +15,15 @@ export type AccordionMachineContext = Context<{
   /**
    * @internal - The `id` of the focused accordion item.
    */
-  focusedId: string | null
+  focusedValue: string | null
   /**
-   * Whether the accordion items are disabled
+   * The `id` of the accordion item that is currently being opened.
    */
-  disabled?: boolean
+  value: string | string[] | null
   /**
-   * The `id` of the accordion item that is currently being opened.
+   * Whether the accordion items are disabled
    */
-  activeId: string | string[] | null
+  disabled?: boolean
   /**
    * The callback fired when the state of opened/closed accordion items changes.
    */
@@ -46,6 +46,6 @@ export type AccordionState = S.State<AccordionMachineContext, AccordionMachineSt
 export type AccordionSend = S.Send<S.AnyEventObject>
 
 export type AccordionItemProps = {
-  id: string
+  value: string
   disabled?: boolean
 }
diff --git a/packages/machines/src/menu/index.ts b/packages/machines/src/menu/index.ts
@@ -6,4 +6,4 @@ export const menu = {
   connect: menuConnect,
 }
 
-export type { MenuMachineContext, MenuMachineState } from "./menu.machine"
+export type { MenuMachineContext, MenuMachineState } from "./menu.types"
diff --git a/packages/machines/src/menu/menu.connect.ts b/packages/machines/src/menu/menu.connect.ts
@@ -5,8 +5,7 @@ import { fromPointerEvent } from "tiny-point/dom"
 import type { DOM, Props } from "../utils"
 import { dataAttr, defaultPropNormalizer, getEventKey, validateBlur } from "../utils"
 import { dom } from "./menu.dom"
-import { MenuMachine } from "./menu.machine"
-import { MenuItemProps, MenuOptionItemProps, MenuSend, MenuState } from "./menu.types"
+import { MenuItemProps, MenuOptionItemProps, MenuSend, MenuState, MenuMachine } from "./menu.types"
 
 export function menuConnect(state: MenuState, send: MenuSend, normalize = defaultPropNormalizer) {
   const { context: ctx } = state

diff --git a/packages/machines/src/menu/menu.dom.ts b/packages/machines/src/menu/menu.dom.ts
@@ -1,7 +1,7 @@
 import { first, last } from "tiny-array"
 import { isElement } from "tiny-guard"
 import { findByText, nextById, prevById, queryElements } from "tiny-nodelist"
-import { MenuMachineContext as Ctx } from "./menu.machine"
+import { MenuMachineContext as Ctx } from "./menu.types"
 
 type HTMLEl = HTMLElement | null