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

/*
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, STYLE_TYPE, LABEL_PLACEMENT } from "baseui/checkbox";
import { PropTypes } from "react-view";
import type { TConfig } from "../types";
import { changeHandlers } from "./common/common";

const CheckboxConfig: TConfig = {
  componentName: "Checkbox",
  imports: {
    "baseui/checkbox": {
      named: ["Checkbox"],
    },
  },
  scope: {
    Checkbox,
    STYLE_TYPE,
    LABEL_PLACEMENT,
  },
  theme: [
    "tickFill",
    "tickFillHover",
    "tickFillActive",
    "tickFillSelected",
    "tickFillSelectedHover",
    "tickFillSelectedHoverActive",
    "tickFillError",
    "tickFillErrorHover",
    "tickFillErrorHoverActive",
    "tickFillErrorSelected",
    "tickFillErrorSelectedHover",
    "tickFillErrorSelectedHoverActive",
    "tickFillDisabled",
    "tickBorder",
    "tickBorderError",
    "tickMarkFill",
    "tickMarkFillError",
    "tickMarkFillDisabled",
  ],
  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.",
    },
    checkmarkType: {
      value: "STYLE_TYPE.default",
      defaultValue: "STYLE_TYPE.default",
      options: STYLE_TYPE,
      type: PropTypes.Enum,
      enumName: "STYLE_TYPE",
      description: "Renders component in a toggle state.",
      imports: {
        "baseui/checkbox": {
          named: ["STYLE_TYPE"],
        },
      },
    },
    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 checkmark. 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": {
          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",
          "Checkmark",
          "Label",
          "Toggle",
          "ToggleInner",
          "ToggleTrack",
        ],
        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",
          $checkmarkType: "checkmarkType",
          $labelPlacement: "labelPlacement",
        },
      },
    },
  },
};

export default CheckboxConfig;