Fix prettier and fix crash when using certain views as data sources

himanshudhami · May 4, 2021 · 1c3d477 · 1c3d477
1 parent 2a6bea6
commit 1c3d477
Show file tree

Hide file tree

Showing 229 changed files with 1,749 additions and 1,201 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -4,5 +4,5 @@
   "singleQuote": false,
   "trailingComma": "es5",
   "plugins": ["prettier-plugin-svelte"],
-  "svelteSortOrder" : "scripts-markup-styles"
+  "svelteSortOrder" : "options-scripts-markup-styles"
 }
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "prettier-plugin-svelte": "^2.2.0",
     "rimraf": "^3.0.2",
     "rollup-plugin-replace": "^2.2.0",
-    "svelte": "^3.30.0"
+    "svelte": "^3.37.0"
   },
   "scripts": {
     "bootstrap": "lerna link && lerna bootstrap",

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
@@ -42,12 +42,14 @@
   class="spectrum-ActionButton spectrum-ActionButton--size{size}"
   {disabled}
   on:longPress
-  on:click|preventDefault>
+  on:click|preventDefault
+>
   {#if longPressable}
     <svg
       class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
     </svg>
   {/if}
@@ -56,7 +58,8 @@
       class="spectrum-Icon spectrum-Icon--size{size}"
       focusable="false"
       aria-hidden="true"
-      aria-label={icon}>
+      aria-label={icon}
+    >
       <use xlink:href="#spectrum-icon-18-{icon}" />
     </svg>
   {/if}

diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte
@@ -23,13 +23,15 @@
   class:active
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
-  on:click|preventDefault>
+  on:click|preventDefault
+>
   {#if icon}
     <svg
       class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
       focusable="false"
       aria-hidden="true"
-      aria-label={icon}>
+      aria-label={icon}
+    >
       <use xlink:href="#spectrum-icon-18-{icon}" />
     </svg>
   {/if}

diff --git a/packages/bbui/src/ButtonGroup/ButtonGroup.svelte b/packages/bbui/src/ButtonGroup/ButtonGroup.svelte
@@ -1,15 +1,19 @@
 <script>
-    import "@spectrum-css/buttongroup/dist/index-vars.css"
-    export let vertical = false
+  import "@spectrum-css/buttongroup/dist/index-vars.css"
+  export let vertical = false
 
-    function group(element) {
-        const buttons = Array.from(element.getElementsByTagName('button'))
-        buttons.forEach(button => {
-            button.classList.add('spectrum-ButtonGroup-item')
-        })
-    }
+  function group(element) {
+    const buttons = Array.from(element.getElementsByTagName("button"))
+    buttons.forEach((button) => {
+      button.classList.add("spectrum-ButtonGroup-item")
+    })
+  }
 </script>
 
-<div use:group class="spectrum-ButtonGroup" class:spectrum-ButtonGroup--vertical={vertical}>
-    <slot />
-</div>
+<div
+  use:group
+  class="spectrum-ButtonGroup"
+  class:spectrum-ButtonGroup--vertical={vertical}
+>
+  <slot />
+</div>
diff --git a/packages/bbui/src/Form/Checkbox.svelte b/packages/bbui/src/Form/Checkbox.svelte
@@ -11,7 +11,7 @@
   export let error = null
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e) => {
     value = e.detail
     dispatch("change", e.detail)
   }

diff --git a/packages/bbui/src/Form/Combobox.svelte b/packages/bbui/src/Form/Combobox.svelte
@@ -10,11 +10,11 @@
   export let error = null
   export let placeholder = "Choose an option"
   export let options = []
-  export let getOptionLabel = option => extractProperty(option, "label")
-  export let getOptionValue = option => extractProperty(option, "value")
+  export let getOptionLabel = (option) => extractProperty(option, "label")
+  export let getOptionValue = (option) => extractProperty(option, "value")
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -35,5 +35,6 @@
     {placeholder}
     {getOptionLabel}
     {getOptionValue}
-    on:change={onChange} />
+    on:change={onChange}
+  />
 </Field>
diff --git a/packages/bbui/src/Form/Core/Checkbox.svelte b/packages/bbui/src/Form/Core/Checkbox.svelte
@@ -10,34 +10,38 @@
   export let disabled = false
 
   const dispatch = createEventDispatcher()
-  const onChange = event => {
+  const onChange = (event) => {
     dispatch("change", event.target.checked)
   }
 </script>
 
 <label
   class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized"
-  class:is-invalid={!!error}>
+  class:is-invalid={!!error}
+>
   <input
     checked={value}
     {disabled}
     on:change={onChange}
     type="checkbox"
     class="spectrum-Checkbox-input"
-    {id} />
+    {id}
+  />
   <span class="spectrum-Checkbox-box">
     <svg
       class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-css-icon-Checkmark100" />
     </svg>
     <svg
       class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-css-icon-Dash100" />
     </svg>
   </span>
-  <span class="spectrum-Checkbox-label">{text || ''}</span>
+  <span class="spectrum-Checkbox-label">{text || ""}</span>
 </label>
diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte
@@ -11,8 +11,8 @@
   export let disabled = false
   export let error = null
   export let options = []
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
+  export let getOptionLabel = (option) => option
+  export let getOptionValue = (option) => option
 
   const dispatch = createEventDispatcher()
   let open = false
@@ -31,16 +31,16 @@
     }
 
     // Render the label if the selected option is found, otherwise raw value
-    const selected = options.find(option => getOptionValue(option) === value)
+    const selected = options.find((option) => getOptionValue(option) === value)
     return selected ? getOptionLabel(selected) : value
   }
 
-  const selectOption = value => {
+  const selectOption = (value) => {
     dispatch("change", value)
     open = false
   }
 
-  const onChange = e => {
+  const onChange = (e) => {
     selectOption(e.target.value)
   }
 </script>
@@ -49,34 +49,39 @@
   <div
     class="spectrum-Textfield spectrum-InputGroup-textfield"
     class:is-disabled={!!error}
-    class:is-focused={open || focus}>
+    class:is-focused={open || focus}
+  >
     <input
       type="text"
       on:focus={() => (focus = true)}
       on:blur={() => (focus = false)}
       on:change={onChange}
       {value}
       {placeholder}
-      class="spectrum-Textfield-input spectrum-InputGroup-input" />
+      class="spectrum-Textfield-input spectrum-InputGroup-input"
+    />
   </div>
   <button
     class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
     tabindex="-1"
     aria-haspopup="true"
     disabled={!!error}
-    on:click={() => (open = true)}>
+    on:click={() => (open = true)}
+  >
     <svg
       class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon"
       focusable="false"
-      aria-hidden="true">
+      aria-hidden="true"
+    >
       <use xlink:href="#spectrum-css-icon-Chevron100" />
     </svg>
   </button>
   {#if open}
     <div class="overlay" on:mousedown|self={() => (open = false)} />
     <div
       transition:fly={{ y: -20, duration: 200 }}
-      class="spectrum-Popover spectrum-Popover--bottom is-open">
+      class="spectrum-Popover spectrum-Popover--bottom is-open"
+    >
       <ul class="spectrum-Menu" role="listbox">
         {#if options && Array.isArray(options)}
           {#each options as option}
@@ -86,13 +91,16 @@
               role="option"
               aria-selected="true"
               tabindex="0"
-              on:click={() => selectOption(getOptionValue(option))}>
-              <span
-                class="spectrum-Menu-itemLabel">{getOptionLabel(option)}</span>
+              on:click={() => selectOption(getOptionValue(option))}
+            >
+              <span class="spectrum-Menu-itemLabel"
+                >{getOptionLabel(option)}</span
+              >
               <svg
                 class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
                 focusable="false"
-                aria-hidden="true">
+                aria-hidden="true"
+              >
                 <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
             </li>

diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte
@@ -27,12 +27,12 @@
     wrap: true,
   }
 
-  const handleChange = event => {
+  const handleChange = (event) => {
     const [dates] = event.detail
     dispatch("change", dates[0])
   }
 
-  const clearDateOnBackspace = event => {
+  const clearDateOnBackspace = (event) => {
     if (["Backspace", "Clear", "Delete"].includes(event.key)) {
       dispatch("change", null)
       flatpickr.close()
@@ -53,7 +53,7 @@
     // We need to blur both because the focus styling does not get properly
     // applied.
     const els = document.querySelectorAll(`#${flatpickrId} input`)
-    els.forEach(el => el.blur())
+    els.forEach((el) => el.blur())
   }
 </script>
 
@@ -64,7 +64,8 @@
   on:close={onClose}
   options={flatpickrOptions}
   on:change={handleChange}
-  element={`#${flatpickrId}`}>
+  element={`#${flatpickrId}`}
+>
   <div
     id={flatpickrId}
     class:is-disabled={disabled}
@@ -73,17 +74,20 @@
     class:is-focused={open}
     aria-readonly="false"
     aria-required="false"
-    aria-haspopup="true">
+    aria-haspopup="true"
+  >
     <div
       on:click={flatpickr?.open}
       class="spectrum-Textfield spectrum-InputGroup-textfield"
       class:is-disabled={disabled}
-      class:is-invalid={!!error}>
+      class:is-invalid={!!error}
+    >
       {#if !!error}
         <svg
           class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
           focusable="false"
-          aria-hidden="true">
+          aria-hidden="true"
+        >
           <use xlink:href="#spectrum-icon-18-Alert" />
         </svg>
       {/if}
@@ -94,20 +98,23 @@
         class="spectrum-Textfield-input spectrum-InputGroup-input"
         {placeholder}
         {id}
-        {value} />
+        {value}
+      />
     </div>
     <button
       type="button"
       class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
       tabindex="-1"
       {disabled}
       class:is-invalid={!!error}
-      on:click={flatpickr?.open}>
+      on:click={flatpickr?.open}
+    >
       <svg
         class="spectrum-Icon spectrum-Icon--sizeM"
         focusable="false"
         aria-hidden="true"
-        aria-label="Calendar">
+        aria-label="Calendar"
+      >
         <use xlink:href="#spectrum-icon-18-Calendar" />
       </svg>
     </button>