[Checkbox-v2][Switch]Add new components

documentation-site/components/yard/config/checkbox-v2.ts

@@ -0,0 +1,167 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import pick from "just-pick";
+import { Checkbox, LABEL_PLACEMENT } from "baseui/checkbox-v2";
+import { PropTypes } from "react-view";
+import type { TConfig } from "../types";
+import { changeHandlers } from "./common/common";
+
+const CheckboxConfig: TConfig = {
+  componentName: "Checkbox",
+  imports: {
+    "baseui/checkbox-v2": {
+      named: ["Checkbox"],
+    },
+  },
+  scope: {
+    Checkbox,
+    LABEL_PLACEMENT,
+  },
+  theme: [
+    "contentStateDisabled",
+    "tagRedContentSecondary",
+    "borderSelected",
+    "contentTertiary",
+    "contentPrimary",
+    "hoverNegativeAlpha",
+    "hoverOverlayAlpha",
+    "pressedNegativeAlpha",
+    "pressedOverlayAlpha",
+    "contentInversePrimary",
+  ],
+  props: {
+    checked: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Renders component in checked state.",
+      stateful: true,
+    },
+    children: {
+      value: `Sign up for the newsletter`,
+      type: PropTypes.ReactNode,
+      description: `The React Nodes displayed next to the checkbox.`,
+    },
+    disabled: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Renders component in disabled state.",
+    },
+    onChange: {
+      value: "e => setChecked(e.target.checked)",
+      type: PropTypes.Function,
+      description: "Called when checkbox value is changed.",
+      propHook: {
+        what: "e.target.checked",
+        into: "checked",
+      },
+    },
+    error: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Renders component in error state.",
+    },
+    isIndeterminate: {
+      value: false,
+      type: PropTypes.Boolean,
+      description:
+        "Indicates indeterminate state for the checkbox. Checked property is ignored.",
+    },
+    labelPlacement: {
+      value: "LABEL_PLACEMENT.right",
+      options: LABEL_PLACEMENT,
+      type: PropTypes.Enum,
+      enumName: "LABEL_PLACEMENT",
+      description:
+        "Determines how to position the label relative to the checkbox.",
+      imports: {
+        "baseui/checkbox-v2": {
+          named: ["LABEL_PLACEMENT"],
+        },
+      },
+    },
+    required: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Renders component in required state.",
+      hidden: true,
+    },
+    inputRef: {
+      value: undefined,
+      type: PropTypes.Ref,
+      description: "A ref to access an input element.",
+      hidden: true,
+    },
+    autoFocus: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "If true the component will be focused on the first mount.",
+      hidden: true,
+    },
+    containsInteractiveElement: {
+      value: false,
+      type: PropTypes.Boolean,
+      description:
+        "Indicates the checkbox label contains an interactive element, and the default label behavior should be prevented for child elements.",
+      hidden: true,
+    },
+    name: {
+      value: undefined,
+      type: PropTypes.String,
+      description: "Name attribute.",
+      hidden: true,
+    },
+    title: {
+      value: undefined,
+      type: PropTypes.String,
+      description: "Title attribute.",
+      hidden: true,
+    },
+    "aria-label": {
+      value: undefined,
+      type: PropTypes.String,
+      description: "Aria-label attribute",
+      hidden: true,
+    },
+    ...pick(changeHandlers, [
+      "onBlur",
+      "onFocus",
+      "onMouseDown",
+      "onMouseEnter",
+      "onMouseLeave",
+    ]),
+    overrides: {
+      value: undefined,
+      type: PropTypes.Custom,
+      description: "Lets you customize all aspects of the component.",
+      custom: {
+        names: ["Root", "CheckmarkContainer", "Checkmark", "Label", "Input"],
+        sharedProps: {
+          $isFocused: {
+            type: PropTypes.Boolean,
+            description: "True when the component is focused.",
+          },
+          $isHovered: {
+            type: PropTypes.Boolean,
+            description: "True when the component is hovered.",
+          },
+          $isActive: {
+            type: PropTypes.Boolean,
+            description: "True when the component is active.",
+          },
+          $error: "error",
+          $checked: "checked",
+          $isIndeterminate: "isIndeterminate",
+          $required: "required",
+          $disabled: "disabled",
+          $labelPlacement: "labelPlacement",
+        },
+      },
+    },
+  },
+};
+
+export default CheckboxConfig;

documentation-site/components/yard/config/switch.ts

@@ -0,0 +1,174 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import pick from "just-pick";
+import { Switch, LABEL_PLACEMENT, SIZE } from "baseui/switch";
+import { PropTypes } from "react-view";
+import type { TConfig } from "../types";
+import { changeHandlers } from "./common/common";
+
+const SwitchConfig: TConfig = {
+  componentName: "Switch",
+  imports: {
+    "baseui/switch": {
+      named: ["Switch"],
+    },
+  },
+  scope: {
+    Switch,
+    LABEL_PLACEMENT,
+    SIZE,
+  },
+  theme: [
+    "contentStateDisabled",
+    "contentTertiary",
+    "contentPrimary",
+    "hoverOverlayAlpha",
+    "contentInversePrimary",
+    "hoverOverlayInverseAlpha",
+    "backgroundTertiary",
+    "backgroundStateDisabled",
+    "backgroundInversePrimary",
+    "borderStateDisabled",
+  ],
+  props: {
+    checked: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Renders component in checked state.",
+      stateful: true,
+    },
+    children: {
+      value: `Sign up for the newsletter`,
+      type: PropTypes.ReactNode,
+      description: `The React Nodes displayed next to the switch.`,
+    },
+    disabled: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Renders component in disabled state.",
+    },
+    onChange: {
+      value: "e => setChecked(e.target.checked)",
+      type: PropTypes.Function,
+      description: "Called when switch value is changed.",
+      propHook: {
+        what: "e.target.checked",
+        into: "checked",
+      },
+    },
+    showIcon: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Renders check icon when switch is enabled.",
+    },
+    labelPlacement: {
+      value: "LABEL_PLACEMENT.right",
+      options: LABEL_PLACEMENT,
+      type: PropTypes.Enum,
+      enumName: "LABEL_PLACEMENT",
+      description:
+        "Determines how to position the label relative to the switch.",
+      imports: {
+        "baseui/switch": {
+          named: ["LABEL_PLACEMENT"],
+        },
+      },
+    },
+    size: {
+      value: "SIZE.default",
+      options: SIZE,
+      type: PropTypes.Enum,
+      enumName: "SIZE",
+      description: "Determines the size of the switch(including the label).",
+      imports: {
+        "baseui/switch": {
+          named: ["SIZE"],
+        },
+      },
+    },
+    required: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Renders component in required state.",
+      hidden: true,
+    },
+    inputRef: {
+      value: undefined,
+      type: PropTypes.Ref,
+      description: "A ref to access an input element.",
+      hidden: true,
+    },
+    autoFocus: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "If true the component will be focused on the first mount.",
+      hidden: true,
+    },
+    containsInteractiveElement: {
+      value: false,
+      type: PropTypes.Boolean,
+      description:
+        "Indicates the switch label contains an interactive element, and the default label behavior should be prevented for child elements.",
+      hidden: true,
+    },
+    name: {
+      value: undefined,
+      type: PropTypes.String,
+      description: "Name attribute.",
+      hidden: true,
+    },
+    title: {
+      value: undefined,
+      type: PropTypes.String,
+      description: "Title attribute.",
+      hidden: true,
+    },
+    "aria-label": {
+      value: undefined,
+      type: PropTypes.String,
+      description: "Aria-label attribute",
+      hidden: true,
+    },
+    ...pick(changeHandlers, [
+      "onBlur",
+      "onFocus",
+      "onMouseDown",
+      "onMouseEnter",
+      "onMouseLeave",
+    ]),
+    overrides: {
+      value: undefined,
+      type: PropTypes.Custom,
+      description: "Lets you customize all aspects of the component.",
+      custom: {
+        names: ["Root", "Toggle", "ToggleTrack", "Label", "Input"],
+        sharedProps: {
+          $isFocused: {
+            type: PropTypes.Boolean,
+            description: "True when the component is focused.",
+          },
+          $isHovered: {
+            type: PropTypes.Boolean,
+            description: "True when the component is hovered.",
+          },
+          $isActive: {
+            type: PropTypes.Boolean,
+            description: "True when the component is active.",
+          },
+          $checked: "checked",
+          $required: "required",
+          $disabled: "disabled",
+          $labelPlacement: "labelPlacement",
+          $size: "size",
+          $showIcon: "showIcon",
+        },
+      },
+    },
+  },
+};
+
+export default SwitchConfig;

documentation-site/examples/checkbox-v2/alignment.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { Checkbox, LABEL_PLACEMENT } from "baseui/checkbox-v2";
+
+export default function Example() {
+  const [checkboxes, setCheckboxes] = React.useState([false, false]);
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "flex-start",
+        margin: "8px 0 8px 12px",
+      }}
+    >
+      <Checkbox
+        checked={checkboxes[0]}
+        onChange={(e) => {
+          const nextCheckboxes = [...checkboxes];
+          nextCheckboxes[0] = e.currentTarget.checked;
+          setCheckboxes(nextCheckboxes);
+        }}
+        labelPlacement={LABEL_PLACEMENT.left}
+      >
+        Label on the left
+      </Checkbox>
+      <Checkbox
+        checked={checkboxes[1]}
+        onChange={(e) => {
+          const nextCheckboxes = [...checkboxes];
+          nextCheckboxes[1] = e.currentTarget.checked;
+          setCheckboxes(nextCheckboxes);
+        }}
+        labelPlacement={LABEL_PLACEMENT.right}
+      >
+        Label on the right
+      </Checkbox>
+    </div>
+  );
+}

documentation-site/examples/checkbox-v2/basic-controlled.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Checkbox } from "baseui/checkbox-v2";
+
+export default function Example() {
+  const [checked, setChecked] = React.useState(true);
+  return (
+    <Checkbox checked={checked} onChange={() => setChecked(!checked)}>
+      click me
+    </Checkbox>
+  );
+}