Feat/submittable form controls

CODE_OF_CONDUCT.md

@@ -60,7 +60,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-hello@mimsh.in.
+`mostafa.sh.coderino@gmail.com`.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

CONTRIBUTING.md

@@ -54,16 +54,16 @@ git checkout next
 git pull upstream next
 ```
 
-4. Install the dependencies with yarn (npm isn't supported):
+4. Install the dependencies with `pnpm` (`npm` and `yarn` aren't supported):
 
 ```sh
-yarn install
+pnpm install
 ```
 
 5. Create a new topic branch:
 
 ```sh
-git checkout -b my-topic-branch
+git switch -c my-topic-branch
 ```
 
 6. Make changes, commit and push to your fork:
@@ -81,7 +81,7 @@ The core team is monitoring for Pull Requests. We will review your Pull Request
 Start developing server and watch for code changes:
 
 ```sh
-yarn dev
+pnpm dev
 ```
 
 The local dev server is a NextJS app.
@@ -92,27 +92,20 @@ You can import codes and make changes to `/pages/index.tsx` page.
 You can build the project, including all type definitions, with:
 
 ```sh
-yarn build
+pnpm build
 ```
 
 ### Testing
 
 To run all the tests, run:
 
 ```sh
-yarn test
-```
-
-To run a specific test, run:
-
-```sh
-# ie. yarn test Checkbox.test.tsx
-yarn test <filename>
+pnpm test
 ```
 
 ### Coding style
 
-Please follow the coding style of the project. StylelessUI uses prettier and eslint, so if possible, enable linting in your editor to get real-time feedback.
+Please follow the coding style of the project. StylelessUI uses `prettier` and `eslint`, so if possible, enable linting in your editor to get real-time feedback.
 
 ### Git Commit Messages
 
@@ -155,4 +148,4 @@ Please follow the coding style of the project. StylelessUI uses prettier and esl
 
 ## License
 
-By contributing your code to the styleless-ui/* GitHub repositories, you agree to license your contribution under the MIT license.
+By contributing your code to the `styleless-ui/*` GitHub repositories, you agree to license your contribution under the MIT license.

lib/CheckGroup/CheckGroup.test.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import classNames from "classnames";
+import type { FormEvent, FormEventHandler } from "react";
 import {
+  act,
   itShouldMount,
   itSupportsDataSetProps,
   itSupportsRef,
@@ -350,4 +352,119 @@ describe("CheckGroup", () => {
       expect(checkbox).toBeDisabled();
     });
   });
+
+  it("should be submitted with the form as part of a name/value pair", () => {
+    const handleSubmit = jest.fn<void, [FormEvent<HTMLFormElement>]>();
+
+    const submitHandler: FormEventHandler<HTMLFormElement> = event => {
+      event.preventDefault();
+      handleSubmit(event);
+    };
+
+    const getForm = () => screen.getByTestId<HTMLFormElement>("form");
+    const getFormData = () => new FormData(getForm());
+
+    const { rerender } = render(
+      <form
+        data-testid="form"
+        onSubmit={submitHandler}
+      >
+        <CheckGroup
+          {...mockRequiredProps}
+          value={[]}
+          name="n"
+        >
+          <Checkbox
+            label={{ screenReaderLabel: "Checkbox 0" }}
+            value="v0"
+            disabled
+          />
+          <Checkbox
+            label={{ screenReaderLabel: "Checkbox 1" }}
+            value="v1"
+          />
+          <Checkbox
+            label={{ screenReaderLabel: "Checkbox 2" }}
+            value="v2"
+          />
+        </CheckGroup>
+      </form>,
+    );
+
+    act(() => {
+      getForm().submit();
+    });
+
+    expect(handleSubmit.mock.calls.length).toBe(1);
+    expect(getFormData().getAll("n")).toEqual([]);
+
+    rerender(
+      <form
+        data-testid="form"
+        onSubmit={submitHandler}
+      >
+        <CheckGroup
+          {...mockRequiredProps}
+          value={["v0", "v1"]}
+          name="n"
+        >
+          <Checkbox
+            label={{ screenReaderLabel: "Checkbox 0" }}
+            value="v0"
+            disabled
+          />
+          <Checkbox
+            label={{ screenReaderLabel: "Checkbox 1" }}
+            value="v1"
+          />
+          <Checkbox
+            label={{ screenReaderLabel: "Checkbox 2" }}
+            value="v2"
+          />
+        </CheckGroup>
+      </form>,
+    );
+
+    act(() => {
+      getForm().submit();
+    });
+
+    expect(handleSubmit.mock.calls.length).toBe(2);
+    expect(getFormData().getAll("n")).toEqual(["v1"]);
+
+    rerender(
+      <form
+        data-testid="form"
+        onSubmit={submitHandler}
+      >
+        <CheckGroup
+          {...mockRequiredProps}
+          disabled
+          value={["v0", "v1", "v2"]}
+          name="n"
+        >
+          <Checkbox
+            label={{ screenReaderLabel: "Checkbox 0" }}
+            value="v0"
+            disabled
+          />
+          <Checkbox
+            label={{ screenReaderLabel: "Checkbox 1" }}
+            value="v1"
+          />
+          <Checkbox
+            label={{ screenReaderLabel: "Checkbox 2" }}
+            value="v2"
+          />
+        </CheckGroup>
+      </form>,
+    );
+
+    act(() => {
+      getForm().submit();
+    });
+
+    expect(handleSubmit.mock.calls.length).toBe(3);
+    expect(getFormData().getAll("n")).toEqual([]);
+  });
 });

lib/CheckGroup/CheckGroup.tsx

@@ -79,6 +79,11 @@ type OwnProps = {
    * @default false
    */
   readOnly?: boolean;
+  /**
+   * The name of the form control when submitted.
+   * Submitted with the form as part of a name/value pair.
+   */
+  name?: string;
   /**
    * The Callback is fired when the state changes.
    */
@@ -100,6 +105,7 @@ const CheckGroupBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
     id: idProp,
     disabled,
     readOnly,
+    name,
     onValueChange,
     orientation = "vertical",
     ...otherProps
@@ -154,14 +160,15 @@ const CheckGroupBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
       id={id}
       ref={ref}
       className={className}
-      data-slot={Slots.Root}
       aria-orientation={orientation}
       aria-label={labelInfo.srOnlyLabel}
       aria-labelledby={labelInfo.labelledBy}
       aria-disabled={disabled}
+      data-slot={Slots.Root}
+      data-name={name}
     >
       <CheckGroupContext.Provider
-        value={{ value, readOnly, disabled, onChange: handleValueChange }}
+        value={{ value, name, readOnly, disabled, onChange: handleValueChange }}
       >
         {children}
       </CheckGroupContext.Provider>

lib/CheckGroup/context.ts

@@ -3,7 +3,7 @@ import type { PickAsMandatory } from "../types";
 import { type Props } from "./CheckGroup";
 
 type ContextValue = PickAsMandatory<Props, "value"> &
-  Pick<Props, "readOnly" | "disabled"> & {
+  Pick<Props, "readOnly" | "disabled" | "name"> & {
     onChange: (newCheckedState: boolean, inputValue: string) => void;
   };
 

lib/Checkbox/Checkbox.test.tsx

@@ -1,5 +1,7 @@
 import classNames from "classnames";
+import type { FormEvent, FormEventHandler } from "react";
 import {
+  act,
   itShouldMount,
   itSupportsDataSetProps,
   itSupportsFocusEvents,
@@ -278,4 +280,80 @@ describe("Checkbox", () => {
 
     expect(handleCheckedChange.mock.calls.length).toBe(0);
   });
+
+  it("should be submitted with the form as part of a name/value pair", () => {
+    const handleSubmit = jest.fn<void, [FormEvent<HTMLFormElement>]>();
+
+    const submitHandler: FormEventHandler<HTMLFormElement> = event => {
+      event.preventDefault();
+      handleSubmit(event);
+    };
+
+    const getForm = () => screen.getByTestId<HTMLFormElement>("form");
+    const getFormData = () => new FormData(getForm());
+
+    const { rerender } = render(
+      <form
+        data-testid="form"
+        onSubmit={submitHandler}
+      >
+        <Checkbox
+          {...mockRequiredProps}
+          checked={false}
+          name="n"
+          value="v0"
+        />
+      </form>,
+    );
+
+    act(() => {
+      getForm().submit();
+    });
+
+    expect(handleSubmit.mock.calls.length).toBe(1);
+    expect(getFormData().get("n")).toBe(null);
+
+    rerender(
+      <form
+        data-testid="form"
+        onSubmit={submitHandler}
+      >
+        <Checkbox
+          {...mockRequiredProps}
+          checked={true}
+          name="n"
+          value="v0"
+        />
+      </form>,
+    );
+
+    act(() => {
+      getForm().submit();
+    });
+
+    expect(handleSubmit.mock.calls.length).toBe(2);
+    expect(getFormData().get("n")).toBe("v0");
+
+    rerender(
+      <form
+        data-testid="form"
+        onSubmit={submitHandler}
+      >
+        <Checkbox
+          {...mockRequiredProps}
+          disabled
+          checked={true}
+          name="n"
+          value="v0"
+        />
+      </form>,
+    );
+
+    act(() => {
+      getForm().submit();
+    });
+
+    expect(handleSubmit.mock.calls.length).toBe(3);
+    expect(getFormData().get("n")).toBe(null);
+  });
 });