chore: wip

chakra-ui · Oct 11, 2023 · d1737b9 · d1737b9
1 parent 2cc6911
commit d1737b9
Show file tree

Hide file tree

Showing 33 changed files with 1,074 additions and 529 deletions.
diff --git a/.xstate/color-picker.js b/.xstate/color-picker.js
@@ -11,60 +11,91 @@ const {
 } = actions;
 const fetchMachine = createMachine({
   id: "color-picker",
-  initial: "idle",
-  context: {},
+  initial: ctx.inline ? "open" : "idle",
+  context: {
+    "shouldRestoreFocus": false,
+    "shouldRestoreFocus": false
+  },
+  activities: ["trackFormControl"],
   on: {
     "VALUE.SET": {
       actions: ["setValue"]
+    },
+    "CHANNEL_INPUT.FOCUS": [{
+      cond: stateIn("idle"),
+      target: "focused",
+      actions: ["setActiveChannel"]
+    }, {
+      actions: ["setActiveChannel"]
+    }],
+    "CHANNEL_INPUT.BLUR": [{
+      cond: stateIn("focused"),
+      target: "idle",
+      actions: ["setChannelColorFromInput"]
+    }, {
+      actions: ["setChannelColorFromInput"]
+    }],
+    "CHANNEL_INPUT.CHANGE": {
+      actions: ["setChannelColorFromInput"]
     }
   },
-  activities: ["trackFormControl"],
   on: {
     UPDATE_CONTEXT: {
       actions: "updateContext"
     }
   },
   states: {
     idle: {
+      tags: ["closed"],
       on: {
+        OPEN: {
+          target: "open",
+          actions: ["setInitialFocus", "invokeOnOpen"]
+        },
+        "TRIGGER.CLICK": {
+          target: "open",
+          actions: ["setInitialFocus", "invokeOnOpen"]
+        }
+      }
+    },
+    focused: {
+      tags: ["closed", "focused"],
+      on: {
+        OPEN: {
+          target: "open",
+          actions: ["setInitialFocus", "invokeOnOpen"]
+        },
+        "TRIGGER.CLICK": {
+          target: "open",
+          actions: ["setInitialFocus", "invokeOnOpen"]
+        }
+      }
+    },
+    open: {
+      tags: ["open"],
+      activities: ["trackPositioning", "trackDismissableElement"],
+      on: {
+        "TRIGGER.CLICK": {
+          target: "idle",
+          actions: ["invokeOnClose"]
+        },
         "EYEDROPPER.CLICK": {
           actions: ["openEyeDropper"]
         },
         "AREA.POINTER_DOWN": {
-          target: "dragging",
+          target: "open:dragging",
           actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
         },
         "AREA.FOCUS": {
-          target: "focused",
           actions: ["setActiveChannel"]
         },
         "CHANNEL_SLIDER.POINTER_DOWN": {
-          target: "dragging",
+          target: "open:dragging",
           actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
         },
         "CHANNEL_SLIDER.FOCUS": {
-          target: "focused",
-          actions: ["setActiveChannel"]
-        },
-        "CHANNEL_INPUT.FOCUS": {
-          target: "focused",
           actions: ["setActiveChannel"]
         },
-        "CHANNEL_INPUT.CHANGE": {
-          actions: ["setChannelColorFromInput"]
-        }
-      }
-    },
-    focused: {
-      on: {
-        "AREA.POINTER_DOWN": {
-          target: "dragging",
-          actions: ["setActiveChannel", "setAreaColorFromPoint", "focusAreaThumb"]
-        },
-        "CHANNEL_SLIDER.POINTER_DOWN": {
-          target: "dragging",
-          actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
-        },
         "AREA.ARROW_LEFT": {
           actions: ["decrementXChannel"]
         },
@@ -107,37 +138,50 @@ const fetchMachine = createMachine({
         "CHANNEL_SLIDER.END": {
           actions: ["setChannelToMax"]
         },
-        "CHANNEL_INPUT.FOCUS": {
-          actions: ["setActiveChannel"]
-        },
-        "CHANNEL_INPUT.CHANGE": {
-          actions: ["setChannelColorFromInput"]
-        },
-        "CHANNEL_SLIDER.BLUR": {
-          target: "idle"
-        },
-        "AREA.BLUR": {
-          target: "idle"
+        INTERACT_OUTSIDE: [{
+          cond: "shouldRestoreFocus",
+          target: "focused",
+          actions: ["setReturnFocus", "invokeOnClose"]
+        }, {
+          target: "idle",
+          actions: ["invokeOnClose"]
+        }],
+        CLOSE: {
+          target: "idle",
+          actions: ["invokeOnClose"]
         }
       }
     },
-    dragging: {
+    "open:dragging": {
+      tags: ["open"],
       exit: ["clearActiveChannel"],
-      activities: ["trackPointerMove", "disableTextSelection"],
+      activities: ["trackPointerMove", "disableTextSelection", "trackPositioning", "trackDismissableElement"],
       on: {
         "AREA.POINTER_MOVE": {
-          actions: ["setAreaColorFromPoint"]
+          actions: ["setAreaColorFromPoint", "focusAreaThumb"]
         },
         "AREA.POINTER_UP": {
-          target: "focused",
+          target: "open",
           actions: ["invokeOnChangeEnd"]
         },
         "CHANNEL_SLIDER.POINTER_MOVE": {
-          actions: ["setChannelColorFromPoint"]
+          actions: ["setChannelColorFromPoint", "focusChannelThumb"]
         },
         "CHANNEL_SLIDER.POINTER_UP": {
-          target: "focused",
+          target: "open",
           actions: ["invokeOnChangeEnd"]
+        },
+        INTERACT_OUTSIDE: [{
+          cond: "shouldRestoreFocus",
+          target: "focused",
+          actions: ["setReturnFocus", "invokeOnClose"]
+        }, {
+          target: "idle",
+          actions: ["invokeOnClose"]
+        }],
+        CLOSE: {
+          target: "idle",
+          actions: ["invokeOnClose"]
         }
       }
     }
@@ -150,5 +194,7 @@ const fetchMachine = createMachine({
       };
     })
   },
-  guards: {}
+  guards: {
+    "shouldRestoreFocus": ctx => ctx["shouldRestoreFocus"]
+  }
 });
diff --git a/e2e/color-picker.e2e.ts b/e2e/color-picker.e2e.ts
@@ -1,11 +1,11 @@
 import { expect, test } from "@playwright/test"
 import { a11y, testid } from "./__utils"
 
-const readOnlySwatch = testid("readonly-swatch")
-const clickableSwatch1 = testid("clickable-swatch-1")
-const clickableSwatch2 = testid("clickable-swatch-2")
-const value = testid("value")
-const channelInputHex = "[data-part=channel-input][data-channel=hex]"
+// const readOnlySwatch = testid("readonly-swatch")
+// const clickableSwatch1 = testid("clickable-swatch-1")
+// const clickableSwatch2 = testid("clickable-swatch-2")
+// const value = testid("value")
+// const channelInputHex = "[data-part=channel-input][data-channel=hex]"
 
 test.describe("color-picker", () => {
   test.beforeEach(async ({ page }) => {
@@ -16,21 +16,21 @@ test.describe("color-picker", () => {
     await a11y(page, ".color-picker")
   })
 
-  test("[swatch] should change the value if is not readonly", async ({ page }) => {
-    await page.click(readOnlySwatch)
-    await expect(page.locator(value)).toContainText("hsl(0, 100%, 50%)")
-    await page.click(clickableSwatch1)
-    await expect(page.locator(value)).toContainText("hsla(0, 85.43%, 70.39%, 1)")
-    await page.click(clickableSwatch2)
-    await expect(page.locator(value)).toContainText("hsla(215.62, 13.22%, 47.45%, 1)")
-  })
+  test("click on trigger should open picker", async ({ page }) => {})
 
-  test("[swatch / channel input hex] should change the hex channel input if is not readonly", async ({ page }) => {
-    await page.click(readOnlySwatch)
-    await expect(page.locator(channelInputHex)).toHaveValue("#FF0000")
-    await page.click(clickableSwatch1)
-    await expect(page.locator(channelInputHex)).toHaveValue("#F47373")
-    await page.click(clickableSwatch2)
-    await expect(page.locator(channelInputHex)).toHaveValue("#697689")
-  })
+  test("[form] should reset value to inital on reset", async ({ page }) => {})
+
+  test("[form] should save to form data on submit", async ({ page }) => {})
+
+  test("should submit on pressing enter", async ({ page }) => {})
+
+  test("[swatch] should set value on click swatch", async ({ page }) => {})
+
+  test("[channel input] should set value from hex channel", async ({ page }) => {})
+
+  test("should not reset hue after saturation is changed", async ({ page }) => {})
+
+  test("should change hue when clicking the hue bar", async () => {})
+
+  test("should change alpha when clicking the alpha bar", async () => {})
 })