@seveelly/baseui 16.1.1

package/documentation-site/components/yard/config/datepicker.ts

@@ -0,0 +1,434 @@
+/*
+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 {
+  DatePicker,
+  ORIENTATION,
+  RANGED_CALENDAR_BEHAVIOR,
+} from "baseui/datepicker";
+import { SIZE } from "baseui/input";
+import { PropTypes } from "react-view";
+import type { TConfig } from "../types";
+import inputConfig from "./input";
+import menuConfig from "./menu";
+import popoverConfig from "./popover";
+import iconConfig from "./icon";
+import formControlConfig from "./form-control";
+import timepickerConfig from "./timepicker";
+import selectConfig from "./select";
+
+const DatepickerConfig: TConfig = {
+  componentName: "DatePicker",
+  imports: {
+    "baseui/datepicker": {
+      named: ["DatePicker"],
+    },
+  },
+  scope: { DatePicker, ORIENTATION, SIZE, RANGED_CALENDAR_BEHAVIOR },
+  theme: [
+    "calendarBackground",
+    "calendarForeground",
+    "calendarForegroundDisabled",
+    "calendarHeaderBackground",
+    "calendarHeaderForeground",
+    "calendarHeaderBackgroundActive",
+    "calendarHeaderForegroundDisabled",
+    "calendarDayBackgroundPseudoSelected",
+    "calendarDayForegroundPseudoSelected",
+    "calendarDayBackgroundPseudoSelectedHighlighted",
+    "calendarDayForegroundPseudoSelectedHighlighted",
+    "calendarDayBackgroundSelected",
+    "calendarDayForegroundSelected",
+    "calendarDayBackgroundSelectedHighlighted",
+    "calendarDayForegroundSelectedHighlighted",
+    ...inputConfig.theme,
+  ],
+  props: {
+    value: {
+      value: "[new Date()]",
+      type: PropTypes.Array,
+      description: "Currently selected date (Date object).",
+      stateful: true,
+    },
+    onChange: {
+      value: "({ date }) => setValue(Array.isArray(date) ? date : [date])",
+      type: PropTypes.Function,
+      description: "Event handler that is called when a new date is selected.",
+      propHook: {
+        // yikes, onChange can return Date, [Date] or [Date, Date] and we need to handle
+        // them all
+        what: `(Array.isArray(date) && (!date[0] || !date[1])) || !date ?
+          "[new Date()]"
+          :
+            Array.isArray(date) && date.length === 2 ?
+              "[new Date('" + date[0].toISOString() + "'), new Date('" + date[1].toISOString() + "')]"
+            : (Array.isArray(date) ? "[new Date('" + date[0].toISOString() + "')]" : "[new Date('" + date.toISOString() + "')]")`,
+        into: "value",
+      },
+    },
+    autoFocusCalendar: {
+      value: false,
+      type: PropTypes.Boolean,
+      description:
+        "Defines if the calendar is set to be focused on an initial render.",
+      hidden: true,
+    },
+    excludeDates: {
+      value: undefined,
+      type: PropTypes.Array,
+      description: "A list of dates to disable. Array<Date>",
+      hidden: true,
+    },
+    quickSelect: {
+      value: undefined,
+      type: PropTypes.Boolean,
+      description:
+        "Display select for quickly choosing date ranges. range must be true as well.",
+    },
+    formatString: {
+      value: undefined,
+      type: PropTypes.String,
+      description: "String format passed to date-fns.",
+      placeholder: "yyyy/MM/dd",
+      hidden: true,
+    },
+    mask: {
+      value: undefined,
+      type: PropTypes.String,
+      description:
+        "Mask used for the text input. Passed to react-input-mask. Disabled when formatString is provided and mask is undefined. Can also be disabled by applying `null`.",
+      placeholder: "9999/99/99",
+      hidden: true,
+    },
+    quickSelectOptions: {
+      value: undefined,
+      type: PropTypes.Array,
+      description:
+        "Array of custom options (Array<{ id: string; beginDate: Date; endDate?: Date }>) displayed in the quick select. Overrides default options if provided.",
+      hidden: true,
+    },
+    filterDate: {
+      value: undefined,
+      type: PropTypes.Function,
+      description:
+        "A filter function (Date => boolean) that is called to check the disabled state of a day. If false is returned the day is considered to be disabled.",
+      hidden: true,
+    },
+    dateLabel: {
+      value: undefined,
+      type: PropTypes.Function,
+      placeholder: "dateLabel={() => 'Aa'}",
+      description:
+        "A date label function (Date => Node) that is called with the current date to return a label to be used below the date. If a falsy response is returned, no label will be shown but the taller day will be rendered. ",
+      hidden: true,
+    },
+    startDateLabel: {
+      value: undefined,
+      type: PropTypes.String,
+      hidden: true,
+      placeholder: "Start Date",
+      description: "",
+    },
+    endDateLabel: {
+      value: undefined,
+      type: PropTypes.String,
+      placeholder: "End Date",
+      hidden: true,
+      description: "",
+    },
+    highlightDate: {
+      value: undefined,
+      type: PropTypes.Date,
+      description:
+        "Indicates a highlighted date on hover and keyboard navigation",
+      hidden: true,
+    },
+    includesDates: {
+      value: undefined,
+      type: PropTypes.Array,
+      description: "A list Array<Date> of selectable dates.",
+      hidden: true,
+    },
+    range: {
+      value: undefined,
+      type: PropTypes.Boolean,
+      description: "Defines if a range of dates can be selected.",
+    },
+    rangedCalendarBehavior: {
+      value: "RANGED_CALENDAR_BEHAVIOR.default",
+      defaultValue: "RANGED_CALENDAR_BEHAVIOR.default",
+      type: PropTypes.Enum,
+      options: RANGED_CALENDAR_BEHAVIOR,
+      enumName: "RANGED_CALENDAR_BEHAVIOR",
+      description:
+        "Determines whether startDate and endDate should be updated independently of eachother",
+      imports: {
+        "baseui/datepicker": {
+          named: ["RANGED_CALENDAR_BEHAVIOR"],
+        },
+      },
+      hidden: true,
+    },
+    separateRangeInputs: {
+      value: undefined,
+      type: PropTypes.Boolean,
+      description:
+        "Determines if startDate and endDate should be separated into two input fields. Ignored if `range` is not true.",
+      hidden: true,
+    },
+    clearable: {
+      value: undefined,
+      type: PropTypes.Boolean,
+      description:
+        "Makes the datepicker clearable via a visual icon in the Input component.",
+    },
+    positive: inputConfig.props.positive,
+    error: inputConfig.props.error,
+    size: inputConfig.props.size,
+    placeholder: {
+      value: undefined,
+      type: PropTypes.String,
+      description:
+        "Specifies a hint that describes the expected value of the date picker",
+      placeholder: "YYYY/MM/DD",
+      hidden: true,
+    },
+    locale: {
+      value: undefined,
+      type: PropTypes.Object,
+      description:
+        "A locale object. See date-fns for more details https://github.com/date-fns/date-fns/tree/master/src/locale.",
+      hidden: true,
+    },
+    maxDate: {
+      value: undefined,
+      type: PropTypes.Date,
+      description: "A max date that is selectable.",
+      placeholder: "2020-10-17T07:00:00.000Z",
+    },
+    minDate: {
+      value: undefined,
+      type: PropTypes.Date,
+      description: "A min date that is selectable.",
+      placeholder: "2018-10-17T07:00:00.000Z",
+    },
+    monthsShown: {
+      value: undefined,
+      type: PropTypes.Number,
+      description: "A number of months rendered in the calendar.",
+      hidden: true,
+    },
+    onDayClick: {
+      value: undefined,
+      type: PropTypes.Function,
+      placeholder: "({ date, event }) => {}",
+      description: `Day's click event handler.`,
+      hidden: true,
+    },
+    onDayMouseOver: {
+      value: undefined,
+      type: PropTypes.Function,
+      placeholder: "({ date, event }) => {}",
+      description: `Day's mouseover event handler.`,
+      hidden: true,
+    },
+    onDayMouseLeave: {
+      value: undefined,
+      type: PropTypes.Function,
+      placeholder: "({ date, event }) => {}",
+      description: `Day's mouseleave event handler.`,
+      hidden: true,
+    },
+    onMonthChange: {
+      value: undefined,
+      type: PropTypes.Function,
+      placeholder: "({ date }) => {}",
+      description:
+        "Event handler that is called when the current rendered month is changed.",
+      hidden: true,
+    },
+    onYearChange: {
+      value: undefined,
+      type: PropTypes.Function,
+      placeholder: "({ date }) => {}",
+      description: `Event handler that is called when the current rendered month's year is changed.`,
+      hidden: true,
+    },
+    onClose: {
+      value: undefined,
+      type: PropTypes.Function,
+      placeholder: "() => {}",
+      description: `Event handler that is called when the calendar is closed.`,
+      hidden: true,
+    },
+    onOpen: {
+      value: undefined,
+      type: PropTypes.Function,
+      placeholder: "() => {}",
+      description: `Event handler that is called when the calendar is opened.`,
+      hidden: true,
+    },
+    orientation: {
+      value: "ORIENTATION.vertical",
+      defaultValue: "ORIENTATION.vertical",
+      type: PropTypes.Enum,
+      options: ORIENTATION,
+      description:
+        "Sets the orientation of the calendar when multiple months are displayed",
+      imports: {
+        "baseui/datepicker": {
+          named: ["ORIENTATION"],
+        },
+      },
+      hidden: true,
+    },
+    mountNode: {
+      value: undefined,
+      type: PropTypes.Ref,
+      description: "Where to mount the datepicker.",
+      hidden: true,
+    },
+    peekNextMonth: {
+      value: undefined,
+      type: PropTypes.Boolean,
+      description:
+        "Defines if dates outside of the range of the current month are displayed.",
+      hidden: true,
+    },
+    fixedHeight: {
+      value: undefined,
+      type: PropTypes.Boolean,
+      description:
+        "Defines if 6 rows should always be displayed for all the months.",
+      hidden: true,
+    },
+    timeSelectStart: {
+      value: undefined,
+      type: PropTypes.Boolean,
+      description:
+        "Determines if TimePicker component will be enabled for start time",
+    },
+    timeSelectEnd: {
+      value: undefined,
+      type: PropTypes.Boolean,
+      description:
+        "Determines if TimePicker component will be enabled for end time",
+    },
+    disabled: inputConfig.props.disabled,
+    displayValueAtRangeIndex: {
+      value: 0,
+      type: PropTypes.Number,
+      description:
+        "Determines whether the datepicker displays the start date or end date of the selected date range. Must be 0 or 1.",
+      hidden: true,
+    },
+    trapTabbing: {
+      value: undefined,
+      type: PropTypes.Boolean,
+      description:
+        "Defines if tabbing inside the calendar is circled within it.",
+      hidden: true,
+    },
+    overrides: {
+      value: undefined,
+      type: PropTypes.Custom,
+      description: "Lets you customize all aspects of the component.",
+      custom: {
+        names: [
+          "Root",
+          "CalendarContainer",
+          "CalendarHeader",
+          "Day",
+          inputConfig,
+          "InputWrapper",
+          "Month",
+          "MonthContainer",
+          "MonthHeader",
+          "MonthYearSelectButton",
+          "MonthYearSelectIconContainer",
+          { ...popoverConfig, componentName: "MonthYearSelectPopover" },
+          { ...menuConfig, componentName: "MonthYearSelectStatefulMenu" },
+          "NextButton",
+          { ...iconConfig, componentName: "NextButtonIcon" },
+          { ...popoverConfig, componentName: "Popover" },
+          "PrevButton",
+          { ...iconConfig, componentName: "PrevButtonIcon" },
+          { ...selectConfig, componentName: "QuickSelect" },
+          "QuickSelectContainer",
+          { ...formControlConfig, componentName: "QuickSelectFormControl" },
+          { ...timepickerConfig, componentName: "TimeSelect" },
+          "TimeSelectContainer",
+          { ...formControlConfig, componentName: "TimeSelectFormControl" },
+          "Week",
+          "WeekdayHeader",
+        ],
+        sharedProps: {
+          $date: "value",
+          $disabled: {
+            type: PropTypes.Boolean,
+            description: "",
+          },
+          $endDate: {
+            type: PropTypes.Boolean,
+            description: "",
+          },
+          $endOfMonth: {
+            type: PropTypes.Boolean,
+            description: "",
+          },
+          $isHighlighted: {
+            type: PropTypes.Boolean,
+            description: "",
+          },
+          $isHovered: {
+            type: PropTypes.Boolean,
+            description: "",
+          },
+          $outsideMonth: {
+            type: PropTypes.Boolean,
+            description: "",
+          },
+          $peekNextMonth: "peekNextMonth",
+          $pseudoHighlighted: {
+            type: PropTypes.Boolean,
+            description: "",
+          },
+          $pseudoSelected: {
+            type: PropTypes.Boolean,
+            description: "",
+          },
+          $selected: {
+            type: PropTypes.Boolean,
+            description: "",
+          },
+          $startDate: {
+            type: PropTypes.Boolean,
+            description: "",
+          },
+          $startOfMonth: {
+            type: PropTypes.Boolean,
+            description: "",
+          },
+          $range: "range",
+          $hasRangeHighlighted: {
+            type: PropTypes.Boolean,
+            description: "",
+          },
+          $hasRangeOnRight: {
+            type: PropTypes.Boolean,
+            description: "",
+          },
+          $hasRangeSelected: {
+            type: PropTypes.Boolean,
+            description: "",
+          },
+        },
+      },
+    },
+  },
+};
+
+export default DatepickerConfig;

package/documentation-site/components/yard/config/dialog.ts

@@ -0,0 +1,141 @@
+/*
+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 { Dialog, SIZE, PLACEMENT } from "baseui/dialog";
+import { Button, KIND } from "baseui/button";
+import { PropTypes } from "react-view";
+import type { TConfig } from "../types";
+
+const DialogConfig: TConfig = {
+  componentName: "Dialog",
+  imports: {
+    "baseui/dialog": {
+      named: ["Dialog"],
+    },
+    "baseui/button": {
+      named: ["Button", "KIND"],
+    },
+  },
+  scope: {
+    Dialog,
+    SIZE,
+    PLACEMENT,
+    Button,
+    KIND,
+  },
+  theme: [],
+  props: {
+    isOpen: {
+      value: false,
+      type: PropTypes.Boolean,
+      description: "Toggles Dialog visibility.",
+      stateful: true,
+    },
+    artwork: {
+      value: undefined,
+      type: PropTypes.ReactNode,
+      description: "Optional leading icon or content.",
+    },
+    onDismiss: {
+      value: "() => setIsOpen(false);",
+      type: PropTypes.Function,
+      description: "A callback that controls dimissle of the dialog.",
+      propHook: {
+        what: "false",
+        into: "isOpen",
+      },
+    },
+    showDismissButton: {
+      value: true,
+      type: PropTypes.Boolean,
+      description:
+        "Determines whether the dismiss button is shown. Ignored if handleDismiss is null or undefined.",
+    },
+    heading: {
+      value: "Dialog Heading",
+      type: PropTypes.String,
+      description: "The value of the dialog heading.",
+    },
+    buttonDock: {
+      value: `{
+        primaryAction: <Button>Primary Action</Button>,
+        secondaryActions: [
+          <Button kind={KIND.secondary} key="first">
+            Secondary Action
+          </Button>,
+        ],
+      }`,
+      type: PropTypes.Object,
+      description: "Directly exposes the ButttonDock API",
+    },
+    hasOverlay: {
+      value: true,
+      type: PropTypes.Boolean,
+      description: "Determines whether Dialog is presented modally.",
+    },
+    numHeadingLines: {
+      value: 2,
+      defaultValue: 2,
+      type: PropTypes.Number,
+      description:
+        "The maximum number of lines the heading can wrap to before truncation.",
+    },
+    overrides: {
+      value: undefined,
+      type: PropTypes.Custom,
+      description: "Lets you customize all aspects of the component.",
+      custom: {
+        names: [
+          "Root",
+          "ScrollContainer",
+          "Heading",
+          "Body",
+          "ButtonDock",
+          "DismissButton",
+        ],
+        sharedProps: {},
+      },
+    },
+    placement: {
+      value: "PLACEMENT.center",
+      defaultValue: "PLACEMENT.center",
+      options: PLACEMENT,
+      enumName: "PLACEMENT",
+      type: PropTypes.Enum,
+      description: "The position of Dialog relative to the viewport",
+      imports: {
+        "baseui/dialog": {
+          named: ["PLACEMENT"],
+        },
+      },
+    },
+    size: {
+      value: "SIZE.xSmall",
+      defaultValue: "SIZE.xSmall",
+      options: SIZE,
+      enumName: "SIZE",
+      type: PropTypes.Enum,
+      description: "Determines the size of the open Dialog",
+      imports: {
+        "baseui/dialog": {
+          named: ["SIZE"],
+        },
+      },
+    },
+    children: {
+      value: `<p>
+      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
+      voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+      cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id
+      est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+    </p>`,
+      type: PropTypes.ReactNode,
+      description: "Content of the dialog.",
+    },
+  },
+};
+
+export default DialogConfig;

package/documentation-site/components/yard/config/divider.ts

@@ -0,0 +1,37 @@
+/*
+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 { StyledDivider, SIZE } from "baseui/divider";
+import { PropTypes } from "react-view";
+import type { TConfig } from "../types";
+
+const DividerConfig: TConfig = {
+  componentName: "StyledDivider",
+  imports: {
+    "baseui/divider": {
+      named: ["StyledDivider"],
+    },
+  },
+  scope: { StyledDivider, SIZE },
+  theme: [],
+  props: {
+    $size: {
+      value: "SIZE.section",
+      defaultValue: "SIZE.section",
+      options: SIZE,
+      type: PropTypes.Enum,
+      description: "Defines the height of the divider.",
+      imports: {
+        "baseui/divider": {
+          named: ["SIZE"],
+        },
+      },
+    },
+  },
+};
+
+export default DividerConfig;

package/documentation-site/components/yard/config/dnd-list.ts

@@ -0,0 +1,91 @@
+/*
+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 { List, arrayMove, arrayRemove } from "baseui/dnd-list";
+import { PropTypes } from "react-view";
+import type { TConfig } from "../types";
+
+const dndListConfig: TConfig = {
+  componentName: "List",
+  imports: {
+    "baseui/dnd-list": {
+      named: ["List", "arrayMove", "arrayRemove"],
+    },
+  },
+  scope: { List, arrayMove, arrayRemove },
+  theme: [],
+  props: {
+    items: {
+      value: `['Item 1', 'Item 2', 'Item 3']`,
+      type: PropTypes.Array,
+      description: "The total number of items to display.",
+      stateful: true,
+    },
+    removable: {
+      value: undefined,
+      type: PropTypes.Boolean,
+      description: "Indicates if items can be removed from the list.",
+    },
+    onChange: {
+      value: `({oldIndex, newIndex}) =>
+        setItems(newIndex === -1 ?
+          arrayRemove(items, oldIndex) :
+          arrayMove(items, oldIndex, newIndex))`,
+      placeholder: "({oldIdx, newIdx}) => {}",
+      type: PropTypes.Function,
+      description: "MovableLists onChange handler.",
+      propHook: {
+        what: "JSON.stringify(newIndex === -1 ? arrayRemove(items, oldIndex) : arrayMove(items, oldIndex, newIndex))",
+        into: "items",
+      },
+    },
+    removableByMove: {
+      value: undefined,
+      type: PropTypes.Boolean,
+      description:
+        "Indicates if items can be removed from the list by dnd outside of the list.",
+    },
+    overrides: {
+      value: undefined,
+      type: PropTypes.Custom,
+      description: "Lets you customize all aspects of the component.",
+      custom: {
+        names: ["Root", "List", "Item", "DragHandle", "CloseHandle", "Label"],
+        sharedProps: {
+          $isDragged: {
+            type: PropTypes.Boolean,
+            description: "Indicates if the item is being dragged.",
+          },
+          $isSelected: {
+            type: PropTypes.Boolean,
+            description: "Indicates if the item is selected.",
+          },
+          $isRemovable: {
+            type: PropTypes.Boolean,
+            description: "Indicates if the item can be removed from the list.",
+          },
+          $isRemovableByMove: {
+            type: PropTypes.Boolean,
+            description:
+              "Indicates if the item can be removed from the list by dnd outside of the list.",
+          },
+          $isOutOfBounds: {
+            type: PropTypes.Boolean,
+            description:
+              "Indicates if the item is being out of the list boundaries.",
+          },
+          $value: {
+            type: PropTypes.Array,
+            description: "The array of items passed into the list.",
+          },
+        },
+      },
+    },
+  },
+};
+
+export default dndListConfig;