Merge pull request #228 from IBM/types

use svelte compiler to generate TypeScript definitions, documentation

src/Checkbox/Checkbox.Story.svelte

@@ -9,14 +9,14 @@
     indeterminate,
     disabled,
     hideLabel,
-    wrapperClassName
+    wrapperClassName,
   } = $$props;
   const checkboxProps = {
     labelText,
     indeterminate,
     disabled,
     hideLabel,
-    wrapperClassName
+    wrapperClassName,
   };
 
   let checked = true;

src/ComboBox/ComboBox.svelte

@@ -1,8 +1,4 @@
 <script>
-  /**
-   * @typedef {{ id: string; text: string; }} ComboBoxItem
-   */
-
   /**
    * Set the combobox items
    * @type {ComboBoxItem[]} [items=[]]
@@ -111,6 +107,10 @@
    */
   export let ref = null;
 
+  /**
+   * @typedef {{ id: string; text: string; }} ComboBoxItem
+   */
+
   import { createEventDispatcher, afterUpdate } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
   import {

src/CopyButton/CopyButton.Story.svelte

@@ -7,6 +7,6 @@
   on:click={() => {
     console.log('click');
   }}
-  on:animationend={e => {
+  on:animationend={(e) => {
     console.log('animation end', e.animationName);
   }} />

src/DataTable/DataTable.Story.svelte

@@ -18,7 +18,7 @@
       port: 3000,
       rule: "Round robin",
       attached_groups: "Kevins VM Groups",
-      status: "Disabled"
+      status: "Disabled",
     },
     {
       id: "b",
@@ -27,7 +27,7 @@
       port: 443,
       rule: "Round robin",
       attached_groups: "Maureens VM Groups",
-      status: "Starting"
+      status: "Starting",
     },
     {
       id: "c",
@@ -36,7 +36,7 @@
       port: 80,
       rule: "DNS delegation",
       attached_groups: "Andrews VM Groups",
-      status: "Active"
+      status: "Active",
     },
     {
       id: "d",
@@ -45,7 +45,7 @@
       port: 3000,
       rule: "Round robin",
       attached_groups: "Marcs VM Groups",
-      status: "Disabled"
+      status: "Disabled",
     },
     {
       id: "e",
@@ -54,7 +54,7 @@
       port: 443,
       rule: "Round robin",
       attached_groups: "Mels VM Groups",
-      status: "Starting"
+      status: "Starting",
     },
     {
       id: "f",
@@ -63,8 +63,8 @@
       port: 80,
       rule: "DNS delegation",
       attached_groups: "Ronjas VM Groups",
-      status: "Active"
-    }
+      status: "Active",
+    },
   ];
   const headers = [
     { key: "name", value: "Name" },
@@ -72,7 +72,7 @@
     { key: "port", value: "Port" },
     { key: "rule", value: "Rule" },
     { key: "attached_groups", value: "Attached Groups" },
-    { key: "status", value: "Status" }
+    { key: "status", value: "Status" },
   ];
   $: sortable = true;
 </script>

src/DatePicker/DatePickerInput.svelte

@@ -16,7 +16,17 @@
    * @type {string} [placeholder=""]
    */
   export let placeholder = "";
+
+  /**
+   * Specify the Regular Expression for the input value
+   * @type {string} [placeholder="\\d{1,2}\\/\\d{1,2}\\/\\d{4}"]
+   */
   export let pattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}";
+
+  /**
+   * Set to `true` to disable the input
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
 
   /**
@@ -30,7 +40,17 @@
    * @type {string} [id]
    */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Specify the label text
+   * @type {string} [labelText=""]
+   */
   export let labelText = "";
+
+  /**
+   * Set to `true` to visually hide the label text
+   * @type {boolean} [hideLabel=false]
+   */
   export let hideLabel = false;
 
   /**
@@ -45,6 +65,10 @@
    */
   export let invalidText = "";
 
+  /**
+   * Set a name for the input element
+   * @type {string} [name=""]
+   */
   export let name = undefined;
 
   /**

src/Dropdown/Dropdown.Story.svelte

@@ -9,7 +9,7 @@
     { id: "option-0", text: "Option 1" },
     { id: "option-1", text: "Option 2" },
     { id: "option-2", text: "Option 3" },
-    { id: "option-3", text: "Option 4" }
+    { id: "option-3", text: "Option 4" },
   ];
   $: selectedIndex = -1;
 </script>

src/Dropdown/Dropdown.svelte

@@ -1,10 +1,4 @@
 <script>
-  /**
-   * @typedef {string} DropdownItemId
-   * @typedef {string} DropdownItemText
-   * @typedef {{ id: DropdownItemId; text: DropdownItemText; }} DropdownItem
-   */
-
   /**
    * Set the dropdown items
    * @type {DropdownItem[]} [items=[]]
@@ -113,6 +107,12 @@
    */
   export let ref = null;
 
+  /**
+   * @typedef {string} DropdownItemId
+   * @typedef {string} DropdownItemText
+   * @typedef {{ id: DropdownItemId; text: DropdownItemText; }} DropdownItem
+   */
+
   import { setContext } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
   import {

src/FileUploader/FileUploaderDropContainer.svelte

@@ -1,8 +1,4 @@
 <script>
-  /**
-   * @typedef {string[]} Files
-   */
-
   /**
    * Specify the accepted file types
    * @type {string[]} [accept=[]]
@@ -64,6 +60,10 @@
    */
   export let ref = null;
 
+  /**
+   * @typedef {string[]} Files
+   */
+
   import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();

src/Form/Form.Story.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <Form
-  on:submit={event => {
+  on:submit={(event) => {
     console.log('on:submit', event);
   }}>
   <FormGroup {...$$props}>

src/FormGroup/FormGroup.svelte

@@ -3,10 +3,24 @@
    * Set to `true` to indicate an invalid state
    * @type {boolean} [invalid=false]
    */
-   export let invalid = false;
+  export let invalid = false;
 
+  /**
+   * Set to `true` to render a form requirement
+   * @type {boolean} [message=false]
+   */
   export let message = false;
+
+  /**
+   * Specify the message text
+   * @type {string} [messageText=""]
+   */
   export let messageText = "";
+
+  /**
+   * Specify the legend text
+   * @type {string} [legendText=""]
+   */
   export let legendText = "";
 </script>
 

src/Grid/Column.svelte

@@ -30,27 +30,42 @@
    */
   export let aspectRatio = undefined;
 
+  /**
+   * Set the small breakpoint
+   * @type {ColumnBreakpoint} [sm]
+   */
+  export let sm = undefined;
+
+  /**
+   * Set the medium breakpoint
+   * @type {ColumnBreakpoint} [md]
+   */
+  export let md = undefined;
+
+  /**
+   * Set the large breakpoint
+   * @type {ColumnBreakpoint} [lg]
+   */
+  export let lg = undefined;
+
+  /**
+   * Set the extra large breakpoint
+   * @type {ColumnBreakpoint} [xlg]
+   */
+  export let xlg = undefined;
+
+  /**
+   * Set the maximum breakpoint
+   * @type {ColumnBreakpoint} [max]
+   */
+  export let max = undefined;
+
   /**
    * @typedef {boolean | number} ColumnSize
    * @typedef {{span?: ColumnSize; offset: number;}} ColumnSizeDescriptor
    * @typedef {ColumnSize | ColumnSizeDescriptor} ColumnBreakpoint
    */
 
-  /** @type {ColumnBreakpoint} [sm] */
-  export let sm = undefined;
-
-  /** @type {ColumnBreakpoint} [md] */
-  export let md = undefined;
-
-  /** @type {ColumnBreakpoint} [lg] */
-  export let lg = undefined;
-
-  /** @type {ColumnBreakpoint} [xlg] */
-  export let xlg = undefined;
-
-  /** @type {ColumnBreakpoint} [max] */
-  export let max = undefined;
-
   /**
    * Column breakpoints
    * @constant

src/ListBox/ListBoxField.svelte

@@ -17,10 +17,6 @@
    */
   export let tabindex = "-1";
 
-  /**
-   * @typedef {"close" | "open"} ListBoxFieldTranslationId
-   */
-
   /**
    * Default translation ids
    * @constant
@@ -46,6 +42,10 @@
    */
   export let ref = null;
 
+  /**
+   * @typedef {"close" | "open"} ListBoxFieldTranslationId
+   */
+
   import { getContext } from "svelte";
 
   const defaultTranslations = {

src/ListBox/ListBoxMenuIcon.svelte

@@ -12,16 +12,16 @@
    */
   export const translationIds = { close: "close", open: "open" };
 
-  /**
-   * @typedef {"close" | "open"} ListBoxMenuIconTranslationId
-   */
-
   /**
    * Override the default translation ids
    * @type {(id: ListBoxMenuIconTranslationId) => string} [translateWithId = (id) => string]
    */
   export let translateWithId = (id) => defaultTranslations[id];
 
+  /**
+   * @typedef {"close" | "open"} ListBoxMenuIconTranslationId
+   */
+
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
 
   const defaultTranslations = {

src/ListBox/ListBoxSelection.svelte

@@ -11,10 +11,6 @@
    */
   export let disabled = false;
 
-  /**
-   * @typedef {"clearAll" | "clearSelection"} ListBoxSelectionTranslationId
-   */
-
   /**
    * Default translation ids
    * @constant
@@ -37,6 +33,10 @@
    */
   export let ref = null;
 
+  /**
+   * @typedef {"clearAll" | "clearSelection"} ListBoxSelectionTranslationId
+   */
+
   import { createEventDispatcher, getContext } from "svelte";
   import Close16 from "carbon-icons-svelte/lib/Close16";
 

src/MultiSelect/MultiSelect.Story.svelte

@@ -12,8 +12,8 @@
     {
       id: "option-4",
       text:
-        "An example option that is really long to show what should be done to handle long text"
-    }
+        "An example option that is really long to show what should be done to handle long text",
+    },
   ];
 </script>
 

src/MultiSelect/MultiSelect.svelte

@@ -1,10 +1,4 @@
 <script>
-  /**
-   * @typedef {string} MultiSelectItemId
-   * @typedef {string} MultiSelectItemText
-   * @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; }} MultiSelectItem
-   */
-
   /**
    * Set the multiselect items
    * @type {MultiSelectItem[]} [items=[]]
@@ -153,6 +147,12 @@
    */
   export let name = undefined;
 
+  /**
+   * @typedef {string} MultiSelectItemId
+   * @typedef {string} MultiSelectItemText
+   * @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; }} MultiSelectItem
+   */
+
   import { afterUpdate, setContext } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
   import { Checkbox } from "../Checkbox";

src/Notification/NotificationButton.svelte

@@ -13,6 +13,7 @@
 
   /**
    * Specify the title of the icon
+   * @type {string} [title]
    */
   export let title = undefined;
 

src/NumberInput/NumberInput.svelte

@@ -95,10 +95,6 @@
    */
   export let hideLabel = false;
 
-  /**
-   * @typedef {"increment" | "decrement"} NumberInputTranslationId
-   */
-
   /**
    * Override the default translation ids
    * @type {(id: NumberInputTranslationId) => string} [translateWithId = (id: NumberInputTranslationId) => string]
@@ -133,6 +129,10 @@
    */
   export let ref = null;
 
+  /**
+   * @typedef {"increment" | "decrement"} NumberInputTranslationId
+   */
+
   import { createEventDispatcher, afterUpdate } from "svelte";
   import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph";
   import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph";

src/ProgressIndicator/ProgressIndicator.Skeleton.svelte

@@ -1,6 +1,7 @@
 <script>
   /**
    * Set to `true` to use the vertical variant
+   * @type {boolean} [vertical=false]
    */
   export let vertical = false;
 </script>

src/ProgressIndicator/ProgressIndicator.svelte

@@ -7,6 +7,7 @@
 
   /**
    * Set to `true` to use the vertical variant
+   * @type {boolean} [vertical=false]
    */
   export let vertical = false;
 

src/Select/SelectItem.svelte

@@ -1,9 +1,28 @@
 <script>
-  export let disabled = false;
-  export let hidden = false;
-  export let text = "";
+  /**
+   * Specify the option value
+   * @type {string} [value=""]
+   */
   export let value = "";
 
+  /**
+   * Specify the option text
+   * @type {string} [text=""]
+   */
+  export let text = "";
+
+  /**
+   * Set to `true` to hide the option
+   * @type {boolean} [hidden=false]
+   */
+  export let hidden = false;
+
+  /**
+   * Set to `true` to disable the option
+   * @type {boolean} [disabled=false]
+   */
+  export let disabled = false;
+
   import { getContext, onDestroy } from "svelte";
 
   const ctx = getContext("Select") || getContext("TimePickerSelect");

src/Slider/Slider.svelte

@@ -1,5 +1,74 @@
 <script>
+  /**
+   * Specify the value of the slider
+   * @type {string} [value=""]
+   */
+  export let value = "";
+
+  /**
+   * Set the maximum slider value
+   * @type {number} [max=100]
+   */
+  export let max = 100;
+
+  /**
+   * Specify the label for the max value
+   * @type {string} [maxLabel=""]
+   */
+  export let maxLabel = "";
+
+  /**
+   * Set the minimum slider value
+   * @type {number} [min=100]
+   */
+  export let min = 0;
+
+  /**
+   * Specify the label for the min value
+   * @type {string} [minLabel=""]
+   */
+  export let minLabel = "";
+
+  /**
+   * Set the step value
+   * @type {number} [step=1]
+   */
+  export let step = 1;
+
+  /**
+   * Set the step multiplier value
+   * @type {number} [stepMultiplier=4]
+   */
+  export let stepMultiplier = 4;
+
+  /**
+   * Set to `true` to require a value
+   * @type {boolean} [required=false]
+   */
+  export let required = false;
+
+  /**
+   * Specify the input type
+   * @type {string} [inputType="number"]
+   */
+  export let inputType = "number";
+
+  /**
+   * Set to `true` to disable the slider
+   * @type {boolean} [disabled=false]
+   */
   export let disabled = false;
+
+  /**
+   * Set to `true` to enable the light variant
+   * @type {boolean} [light=false]
+   */
+  export let light = false;
+
+  /**
+   * Set to `true` to hide the text input
+   * @type {boolean} [hideTextInput=false]
+   */
   export let hideTextInput = false;
 
   /**
@@ -7,7 +76,6 @@
    * @type {string} [id]
    */
   export let id = "ccs-" + Math.random().toString(36);
-  export let inputType = "number";
 
   /**
    * Set to `true` to indicate an invalid state
@@ -21,26 +89,11 @@
    */
   export let labelText = "";
 
-  /**
-   * Set to `true` to enable the light variant
-   * @type {boolean} [light=false]
-   */
-  export let light = false;
-
-  export let max = 100;
-  export let maxLabel = "";
-  export let min = 0;
-  export let minLabel = "";
-
   /**
    * Set a name for the slider element
    * @type {string} [name=""]
    */
   export let name = "";
-  export let required = false;
-  export let step = 1;
-  export let stepMultiplier = 4;
-  export let value = "";
 
   /**
    * Obtain a reference to the HTML element

src/StructuredList/StructuredList.svelte

@@ -25,9 +25,9 @@
 
   setContext("StructuredListWrapper", {
     selectedValue,
-    update: value => {
+    update: (value) => {
       selectedValue.set(value);
-    }
+    },
   });
 
   $: selected = $selectedValue;

src/Tile/Tile.Story.svelte

@@ -11,7 +11,7 @@
   const radioTiles = [
     { value: "standard", id: "tile-1", labelText: "Selectable Tile" },
     { value: "default-selected", id: "tile-2", labelText: "Selectable Tile" },
-    { value: "selected", id: "tile-3", labelText: "Selectable Tile" }
+    { value: "selected", id: "tile-3", labelText: "Selectable Tile" },
   ];
 
   $: selected = radioTiles[1].value;

src/UIShell/SideNav/SideNavMenuItem.svelte

@@ -1,6 +1,20 @@
 <script>
+  /**
+   * Set to `true` to select the item
+   * @type {boolean} [isSelected]
+   */
   export let isSelected = undefined;
+
+  /**
+   * Specify the `href` attribute
+   * @type {string} [href]
+   */
   export let href = undefined;
+
+  /**
+   * Specify the item text
+   * @type {string} [text]
+   */
   export let text = undefined;
 </script>