documentation-site/components/yard/config/checkbox-v2.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, 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;