chore: lift components folder

src/DataTableSkeleton/DataTable.stories.js

@@ -0,0 +1,17 @@
+import { withKnobs, array, boolean } from "@storybook/addon-knobs";
+import Component from "./DataTableSkeleton.Story.svelte";
+
+export default { title: "DataTableSkeleton", decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    headers: array(
+      "Optional table headers (headers)",
+      ["Name", "Protocol", "Port", "Rule", "Attached Groups"],
+      ","
+    ),
+    zebra: boolean("Use zebra stripe (zebra)", false),
+    compact: boolean("Compact variant (compact)", false),
+  },
+});

src/DataTableSkeleton/DataTableSkeleton.Story.svelte

@@ -0,0 +1,7 @@
+<script>
+  import DataTableSkeleton from "./DataTableSkeleton.svelte";
+</script>
+
+<div style="width: 800px">
+  <DataTableSkeleton {...$$props} />
+</div>

src/DataTableSkeleton/DataTableSkeleton.svelte

@@ -0,0 +1,47 @@
+<script>
+  export let columns = 5;
+  export let rows = 5;
+  export let compact = false;
+  export let zebra = false;
+  export let headers = [];
+
+  $: cols = Array.from(
+    { length: headers.length > 0 ? headers.length : columns },
+    (_, i) => i
+  );
+</script>
+
+<table
+  class:bx--skeleton={true}
+  class:bx--data-table={true}
+  class:bx--data-table--zebra={zebra}
+  class:bx--data-table--compact={compact}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <thead>
+    <tr>
+      {#each cols as col, i (col)}
+        <th>{headers[col] || ''}</th>
+      {/each}
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      {#each cols as col, i (col)}
+        <td>
+          <span />
+        </td>
+      {/each}
+    </tr>
+    {#each Array.from({ length: rows - 1 }, (_, i) => i) as row, i (row)}
+      <tr>
+        {#each cols as col, j (col)}
+          <td />
+        {/each}
+      </tr>
+    {/each}
+  </tbody>
+</table>

src/DataTableSkeleton/index.js

@@ -0,0 +1 @@
+export { default as DataTableSkeleton } from "./DataTableSkeleton.svelte";