docs: update types and storydocs

chakra-ui · May 12, 2023 · 9bbb142 · 9bbb142
1 parent 24629c7
commit 9bbb142
Show file tree

Hide file tree

Showing 22 changed files with 239 additions and 138 deletions.
diff --git a/packages/vue/src/accordion/docs/accordion.types.json b/packages/vue/src/accordion/docs/accordion.types.json
@@ -16,10 +16,15 @@
       "description": "Whether the accordion items are disabled"
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  root: string\n  item(value: string): string\n  content(value: string): string\n  trigger(value: string): string\n}>",
       "isRequired": false,

diff --git a/packages/vue/src/checkbox/docs/checkbox.types.json b/packages/vue/src/checkbox/docs/checkbox.types.json
@@ -33,10 +33,15 @@
       "description": "The associate form of the underlying checkbox."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{ root: string; input: string; control: string; label: string }>",
       "isRequired": false,

diff --git a/packages/vue/src/color-picker/docs/color-picker.types.json b/packages/vue/src/color-picker/docs/color-picker.types.json
@@ -11,7 +11,7 @@
       "description": "Whether the color picker is disabled"
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
@@ -48,79 +48,48 @@
     "yChannel": { "type": "ColorChannel", "isRequired": true }
   },
   "ColorPickerContext": {
-    "channels": {
-      "type": "[ColorChannel, ColorChannel, ColorChannel]",
+    "id": {
+      "type": "string",
       "isRequired": true,
-      "description": "The current color channels of the color"
-    },
-    "contentProps": { "type": "Attrs<HTMLAttributes>", "isRequired": true },
-    "eyeDropperTriggerProps": { "type": "ElementAttrs<ButtonHTMLAttributes>", "isRequired": true },
-    "getAreaGradientProps": {
-      "type": "(props: ColorAreaProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
-    },
-    "getAreaProps": {
-      "type": "(props: ColorAreaProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
-    },
-    "getAreaThumbProps": {
-      "type": "(props: ColorAreaProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
+      "description": "The unique identifier of the machine."
     },
-    "getChannelInputProps": {
-      "type": "(props: ColorChannelInputProps) => ElementAttrs<InputHTMLAttributes>",
-      "isRequired": true
+    "dir": {
+      "type": "'ltr' | 'rtl'",
+      "isRequired": false,
+      "description": "The direction of the color picker"
     },
-    "getChannelSliderBackgroundProps": {
-      "type": "(props: ColorChannelProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
+    "disabled": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "Whether the color picker is disabled"
     },
-    "getChannelSliderThumbProps": {
-      "type": "(props: ColorChannelProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
+    "getRootNode": {
+      "type": "() => ShadowRoot | Node | Document",
+      "isRequired": false,
+      "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
-    "getChannelSliderTrackProps": {
-      "type": "(props: ColorChannelProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
+    "ids": {
+      "type": "Partial<{\n  content: string\n  area: string\n  areaGradient: string\n  areaThumb: string\n  channelInput(id: string): string\n  channelSliderTrack(id: ColorChannel): string\n  channelSliderThumb(id: ColorChannel): string\n}>",
+      "isRequired": false,
+      "description": "The ids of the elements in the color picker. Useful for composition."
     },
-    "getSwatchBackgroundProps": {
-      "type": "(props: ColorSwatchProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
+    "modelValue": { "type": "string", "isRequired": false },
+    "onChange": {
+      "type": "(details: ChangeDetails) => void",
+      "isRequired": false,
+      "description": "Handler that is called when the value changes, as the user drags."
     },
-    "getSwatchProps": {
-      "type": "(props: ColorSwatchProps) => Attrs<HTMLAttributes>",
-      "isRequired": true
+    "onChangeEnd": {
+      "type": "(details: ChangeDetails) => void",
+      "isRequired": false,
+      "description": "Handler that is called when the user stops dragging."
     },
-    "isDragging": {
+    "readOnly": {
       "type": "boolean",
-      "isRequired": true,
-      "description": "Whether the color picker is being dragged"
-    },
-    "setChannelValue": {
-      "type": "(channel: ColorChannel, value: number) => void",
-      "isRequired": true,
-      "description": "Function to set the color value of a specific channel"
-    },
-    "setColor": {
-      "type": "(value: string | Color) => void",
-      "isRequired": true,
-      "description": "Function to set the color value"
-    },
-    "setFormat": {
-      "type": "(format: ColorFormat) => void",
-      "isRequired": true,
-      "description": "Function to set the color format"
-    },
-    "value": {
-      "type": "string",
-      "isRequired": true,
-      "description": "The current color value (as a string)"
+      "isRequired": false,
+      "description": "Whether the color picker is read-only"
     },
-    "valueAsColor": {
-      "type": "Color",
-      "isRequired": true,
-      "description": "The current color value (as a Color object)"
-    }
+    "value": { "type": "string", "isRequired": false, "description": "The current color value" }
   },
   "ColorPickerSwatchProps": {
     "value": { "type": "string | Color", "isRequired": true },

diff --git a/packages/vue/src/combobox/docs/combobox.types.json b/packages/vue/src/combobox/docs/combobox.types.json
@@ -41,17 +41,22 @@
       "description": "The associate form of the combobox."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  root: string\n  label: string\n  control: string\n  input: string\n  content: string\n  trigger: string\n  clearTrigger: string\n  option(id: string, index?: number | undefined): string\n  positioner: string\n}>",
       "isRequired": false,
       "description": "The ids of the elements in the combobox. Useful for composition."
     },
     "inputBehavior": {
-      "type": "'none' | 'autohighlight' | 'autocomplete'",
+      "type": "'autohighlight' | 'autocomplete' | 'none'",
       "isRequired": false,
       "description": "Defines the auto-completion behavior of the combobox.\n\n- `autohighlight`: The first focused option is highlighted as the user types\n- `autocomplete`: Navigating the listbox with the arrow keys selects the option and the input is updated"
     },

diff --git a/packages/vue/src/dialog/docs/dialog.types.json b/packages/vue/src/dialog/docs/dialog.types.json
@@ -26,10 +26,15 @@
       "description": "Element to receive focus when the dialog is closed"
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  trigger: string\n  container: string\n  backdrop: string\n  content: string\n  closeTrigger: string\n  title: string\n  description: string\n}>",
       "isRequired": false,

diff --git a/packages/vue/src/editable/docs/editable.types.json b/packages/vue/src/editable/docs/editable.types.json
@@ -31,7 +31,7 @@
       "description": "The associate form of the underlying input."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },

diff --git a/packages/vue/src/hover-card/docs/hover-card.types.json b/packages/vue/src/hover-card/docs/hover-card.types.json
@@ -11,10 +11,15 @@
       "description": "The document's text/writing direction."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  trigger: string\n  content: string\n  positioner: string\n  arrow: string\n}>",
       "isRequired": false,

diff --git a/packages/vue/src/menu/docs/menu.types.json b/packages/vue/src/menu/docs/menu.types.json
@@ -21,7 +21,7 @@
       "description": "The document's text/writing direction."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },

diff --git a/packages/vue/src/number-input/docs/number-input.types.json b/packages/vue/src/number-input/docs/number-input.types.json
@@ -41,10 +41,15 @@
       "description": "If using a custom display format, this converts the default format to the custom format."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  root: string\n  label: string\n  input: string\n  incrementTrigger: string\n  decrementTrigger: string\n  scrubber: string\n}>",
       "isRequired": false,

diff --git a/packages/vue/src/pagination/docs/pagination.types.json b/packages/vue/src/pagination/docs/pagination.types.json
@@ -7,7 +7,7 @@
       "description": "The document's text/writing direction."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },

diff --git a/packages/vue/src/pin-input/docs/pin-input.types.json b/packages/vue/src/pin-input/docs/pin-input.types.json
@@ -1,4 +1,112 @@
 {
+  "PinInputContext": {
+    "id": {
+      "type": "string",
+      "isRequired": true,
+      "description": "The unique identifier of the machine."
+    },
+    "autoFocus": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "Whether to auto-focus the first input."
+    },
+    "blurOnComplete": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "Whether to blur the input when the value is complete"
+    },
+    "dir": {
+      "type": "'ltr' | 'rtl'",
+      "isRequired": false,
+      "description": "The document's text/writing direction."
+    },
+    "disabled": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "Whether the inputs are disabled"
+    },
+    "form": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The associate form of the underlying input element."
+    },
+    "getRootNode": {
+      "type": "() => ShadowRoot | Node | Document",
+      "isRequired": false,
+      "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
+    },
+    "ids": {
+      "type": "Partial<{\n  root: string\n  hiddenInput: string\n  label: string\n  control: string\n  input(id: string): string\n}>",
+      "isRequired": false,
+      "description": "The ids of the elements in the pin input. Useful for composition."
+    },
+    "invalid": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "Whether the pin input is in the invalid state"
+    },
+    "mask": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "If `true`, the input's value will be masked just like `type=password`"
+    },
+    "modelValue": { "type": "string[]", "isRequired": false },
+    "name": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The name of the input element. Useful for form submission."
+    },
+    "onChange": {
+      "type": "(details: { value: string[] }) => void",
+      "isRequired": false,
+      "description": "Function called on input change"
+    },
+    "onComplete": {
+      "type": "(details: { value: string[]; valueAsString: string }) => void",
+      "isRequired": false,
+      "description": "Function called when all inputs have valid values"
+    },
+    "onInvalid": {
+      "type": "(details: { value: string; index: number }) => void",
+      "isRequired": false,
+      "description": "Function called when an invalid value is entered"
+    },
+    "otp": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "If `true`, the pin input component signals to its fields that they should\nuse `autocomplete=\"one-time-code\"`."
+    },
+    "pattern": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The regular expression that the user-entered input value is checked against."
+    },
+    "placeholder": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The placeholder text for the input"
+    },
+    "selectOnFocus": {
+      "type": "boolean",
+      "isRequired": false,
+      "description": "Whether to select input value when input is focused"
+    },
+    "translations": {
+      "type": "IntlTranslations",
+      "isRequired": false,
+      "description": "Specifies the localized strings that identifies the accessibility elements and their states"
+    },
+    "type": {
+      "type": "'numeric' | 'alphanumeric' | 'alphabetic'",
+      "isRequired": false,
+      "description": "The type of value the pin-input should allow"
+    },
+    "value": {
+      "type": "string[]",
+      "isRequired": false,
+      "description": "The value of the the pin input."
+    }
+  },
   "PinInputProps": {
     "autoFocus": {
       "type": "boolean",
@@ -26,10 +134,15 @@
       "description": "The associate form of the underlying input element."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },
+    "id": {
+      "type": "string",
+      "isRequired": false,
+      "description": "The unique identifier of the machine."
+    },
     "ids": {
       "type": "Partial<{\n  root: string\n  hiddenInput: string\n  label: string\n  control: string\n  input(id: string): string\n}>",
       "isRequired": false,

diff --git a/packages/vue/src/popover/docs/popover.types.json b/packages/vue/src/popover/docs/popover.types.json
@@ -16,7 +16,7 @@
       "description": "Whether to close the popover when the user clicks outside of the popover."
     },
     "getRootNode": {
-      "type": "() => Node | ShadowRoot | Document",
+      "type": "() => ShadowRoot | Node | Document",
       "isRequired": false,
       "description": "A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."
     },