sveltekit-ui 1.0.0

package/src/routes/[component]/Showcase/CronInput/index.svelte

@@ -0,0 +1,30 @@
+<script>
+  import CronInput from "$lib/Components/CronInput/index.svelte"
+  import { create_cron_input_manager } from "$lib/Components/CronInput/index.svelte.js"
+
+  let cron_manager = create_cron_input_manager({ val: "* */6 * * *" })
+  let cron_manager2 = create_cron_input_manager({ is_popover: false })
+</script>
+
+<div>
+  <div class="grid">
+    <div>
+      <h4>Example</h4>
+      <div>
+        <CronInput manager={cron_manager} />
+      </div>
+      <h4>Example No Modal</h4>
+      <div>
+        <CronInput manager={cron_manager2} />
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
+    margin: 0.5rem;
+  }
+</style>

package/src/routes/[component]/Showcase/DocsDefinition/index.svelte

@@ -0,0 +1,155 @@
+<script>
+  import Code from "$lib/Components/Code/index.svelte"
+  import { create_code_manager } from "$lib/Components/Code/index.svelte.js"
+  import { docs_definition_to_sample_code } from "$lib/client/docs/index.js"
+
+  let { definition } = $props()
+
+  let use_like_code_manager = $state(null)
+
+  $effect(() => {
+    use_like_code_manager = create_code_manager({
+      language: "svelte",
+      content: docs_definition_to_sample_code(definition),
+    })
+  })
+</script>
+
+{#key definition?.component_name}
+  <div style="margin-top: 1rem;">
+    <h3>Component Documentation</h3>
+    <p class="label">Component Name</p>
+    <p>{definition?.component_name}</p>
+    {#if !definition?.is_not_builder}
+      <p class="label">Builder Function Name</p>
+      <p>{definition?.builder_function_name}</p>
+    {/if}
+    <p class="label">Description</p>
+    <p>{definition?.description}</p>
+    <p class="label">Use like example</p>
+    <Code manager={use_like_code_manager} />
+    {#if definition?.is_not_builder}
+      <p class="label">Properties</p>
+      <div class="table_container">
+        <table style="margin: 0;">
+          <thead>
+            <tr>
+              <th>Property</th>
+              <th>Type</th>
+              <th>Default</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#if Object.keys(definition?.properties || {}).length > 0}
+              {#each Object.keys(definition?.properties || {}) as key (key)}
+                <tr>
+                  <td>{key}</td>
+                  <td>{definition?.properties?.[key]?.type}</td>
+                  <td><p style="max-width: 30rem;">{definition?.properties?.[key]?.default}</p></td>
+                  <td><p style="max-width: 30rem;">{definition?.properties?.[key]?.description}</p></td>
+                </tr>
+              {/each}
+            {:else}
+              <tr><td colspan="4">No properties found</td></tr>
+            {/if}
+          </tbody>
+        </table>
+      </div>
+    {:else}
+      <p class="label">Config</p>
+      <div class="table_container">
+        <table style="margin: 0;">
+          <thead>
+            <tr>
+              <th>Property</th>
+              <th>Type</th>
+              <th>Default</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#if Object.keys(definition?.config || {}).length > 0}
+              {#each Object.keys(definition?.config || {}) as key (key)}
+                <tr>
+                  <td>{key}</td>
+                  <td>{definition?.config?.[key]?.type}</td>
+                  <td><p style="max-width: 30rem;">{definition?.config?.[key]?.default}</p></td>
+                  <td><p style="max-width: 30rem;">{definition?.config?.[key]?.description}</p></td>
+                </tr>
+              {/each}
+            {:else}
+              <tr><td colspan="4">No config options found</td></tr>
+            {/if}
+          </tbody>
+        </table>
+      </div>
+      <p class="label">Methods</p>
+      <div class="table_container">
+        <table style="margin: 0;">
+          <thead>
+            <tr>
+              <th>Method</th>
+              <th>Description</th>
+              <th>Parameters</th>
+              <th>Returns</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#if Object.keys(definition?.methods || {}).length > 0}
+              {#each Object.keys(definition?.methods || {}) as key (key)}
+                <tr>
+                  <td>{key}</td>
+                  <td><p style="max-width: 30rem;">{definition?.methods?.[key]?.description}</p></td>
+                  <td>
+                    {#if Object.keys(definition?.methods?.[key]?.parameters || {}).length > 0}
+                      {#each Object.keys(definition?.methods?.[key]?.parameters || {}) as param (param)}
+                        <p>{param}: {definition?.methods?.[key]?.parameters?.[param]}</p>
+                      {/each}
+                    {:else}
+                      <p>No Params</p>
+                    {/if}
+                  </td>
+                  <td>{definition?.methods?.[key]?.returns}</td>
+                </tr>
+              {/each}
+            {:else}
+              <tr><td colspan="4">No methods found</td></tr>
+            {/if}
+          </tbody>
+        </table>
+      </div>
+      <p class="label">Returned Properties</p>
+      <div class="table_container">
+        <table style="margin: 0;">
+          <thead>
+            <tr>
+              <th>Property</th>
+              <th>Type</th>
+              <th>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#if Object.keys(definition?.returned_properties || {}).length > 0}
+              {#each Object.keys(definition?.returned_properties || {}) as key (key)}
+                <tr>
+                  <td>{key}</td>
+                  <td>{definition?.returned_properties?.[key]?.type}</td>
+                  <td><p style="max-width: 30rem;">{definition?.returned_properties?.[key]?.description}</p></td>
+                </tr>
+              {/each}
+            {:else}
+              <tr><td colspan="4">No return properties found</td></tr>
+            {/if}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  </div>
+{/key}
+
+<style>
+  .label {
+    margin-top: 1rem;
+  }
+</style>

package/src/routes/[component]/Showcase/Dropdown/index.svelte

@@ -0,0 +1,88 @@
+<script>
+  import Dropdown from "$lib/Components/Dropdown/index.svelte"
+  import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
+  // import DropdownConfigInput from "$lib/Components/Dropdown/ConfigInput/index.svelte"
+  // import { create_dropdown_config_manager } from "$lib/Components/Dropdown/ConfigInput/index.svelte.js"
+  import Button from "$lib/Components/Button/index.svelte"
+
+  const options = Array.from({ length: 5 }, (_, i) => ({
+    key: (i + 1).toString(),
+    name: `Option ${i + 1}`,
+  }))
+
+  const options_test = [
+    { key: "speaks_english", name: "Speeks English", emoji: "🇺🇸" },
+    { key: "speaks_spanish", name: "Speeks Spanish", emoji: "🇪🇸" },
+    { key: "speaks_french", name: "Speeks French", emoji: "🇫🇷" },
+    { key: "speaks_mandarin", name: "Speeks Mandarin", emoji: "🇨🇳" },
+    { key: "speaks_russian", name: "Speeks Russian", emoji: "🇷🇺" },
+    { key: "speaks_portuguese", name: "Speeks Portuguese", emoji: "🇵🇹" },
+    { key: "speaks_korean", name: "Speeks Korean", emoji: "🇰🇷" },
+    { key: "speaks_japanese", name: "Speeks Japanese", emoji: "🇯🇵" },
+    { key: "speaks_german", name: "Speeks German", emoji: "🇩🇪" },
+  ]
+
+  let dropdown_manager = create_dropdown_manager({
+    options: options_test,
+    is_button_compressed: true,
+    row_display_keys: ["emoji", "name"],
+    button_display_keys: ["emoji", "name"],
+    on_item_click: (input) => console.log("handle_item_click", input),
+  })
+
+  // let dropdown_config_manager = create_dropdown_config_manager({
+  //   on_finish: (input) => dropdown_manager.init(input),
+  // })
+
+  let dropdown_manager2 = create_dropdown_manager({
+    label: "passed in label",
+    options: options_test,
+    is_button_compressed: true,
+    row_display_keys: ["emoji", "name"],
+    button_display_keys: ["emoji", "name"],
+    is_multiselect: true,
+    is_set_null_button: true,
+    on_change: (input) => console.log("handle_item_click", input),
+  })
+
+  let dropdown_manager3 = create_dropdown_manager({
+    type: "horiz_selector",
+    options: options_test,
+    is_button_compressed: true,
+    row_display_keys: ["emoji", "name"],
+    button_display_keys: ["emoji", "name"],
+    is_multiselect: true,
+    is_set_null_button: true,
+    header: "Width",
+    header_icon: "opposing_arrows",
+    header_icon_deg: 90,
+    min_header_width: 9,
+    on_change: (input) => console.log("handle_item_click", input),
+  })
+</script>
+
+<div>
+  <div class="grid">
+    <div>
+      <h4>Example</h4>
+      <div style="display: flex;">
+        <Dropdown manager={dropdown_manager} />
+        <!-- <DropdownConfigInput manager={dropdown_config_manager} /> -->
+      </div>
+      <h4>Example is_multiselect</h4>
+      <Dropdown manager={dropdown_manager2} />
+      <pre>{JSON.stringify(dropdown_manager2?.val, null, 2)}</pre>
+      <h4>Example horiz_selector</h4>
+      <Dropdown manager={dropdown_manager3} />
+      <pre>{JSON.stringify(dropdown_manager3?.val, null, 2)}</pre>
+    </div>
+  </div>
+</div>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
+    margin: 0.5rem;
+  }
+</style>

package/src/routes/[component]/Showcase/FileInput/index.svelte

@@ -0,0 +1,40 @@
+<script>
+  import FileInput from "$lib/Components/FileInput/index.svelte"
+  import { create_file_input_manager } from "$lib/Components/FileInput/index.svelte.js"
+
+  let file_manager = create_file_input_manager({
+    is_multiselect: false,
+    height: "100%",
+    on_get_file: () => console.log("jdjdjd"),
+  })
+  let file_manager2 = create_file_input_manager({
+    accept: ["image/png", "image/jpeg"],
+    is_multiselect: false,
+  })
+  let file_manager3 = create_file_input_manager({
+    accept: ["image/png", "image/jpeg"],
+    is_multiselect: false,
+    is_drop_zone: false,
+  })
+</script>
+
+<div>
+  <div>
+    <h4>Example</h4>
+    <div style="height: 30rem; background-color: var(--shadow2-t); border-radius: 2rem; padding: .5rem;">
+      <FileInput manager={file_manager} />
+    </div>
+  </div>
+  <div>
+    <h4>Example 2</h4>
+    <div style="height: 30rem;">
+      <FileInput manager={file_manager2} />
+    </div>
+  </div>
+  <div>
+    <h4>Example 3</h4>
+    <div>
+      <FileInput manager={file_manager3} />
+    </div>
+  </div>
+</div>

package/src/routes/[component]/Showcase/FunctionInput/index.svelte

@@ -0,0 +1,77 @@
+<script>
+  import FunctionInput from "$lib/Components/FunctionInput/index.svelte"
+  import { create_function_manager } from "$lib/Components/FunctionInput/index.svelte.js"
+
+  let example_page_data = $state({
+    id: "bhlvgpkgkoarjzrmibtr",
+    account_id: "idredbvbbogpofinurea",
+    structure: {
+      type: "function_literal",
+      value: {
+        do: {
+          type: "stack_literal",
+          value: [
+            {
+              type: "define",
+              value: {
+                value: {
+                  type: "int_literal",
+                  value: 8,
+                },
+                identifier: {
+                  type: "identifier_literal",
+                  value: "test",
+                },
+              },
+            },
+            {
+              type: "if_then",
+              value: {
+                do: {
+                  type: "stack_literal",
+                  value: [
+                    {
+                      type: "set_defined",
+                      value: {
+                        value: null,
+                        defined_target: null,
+                      },
+                    },
+                  ],
+                },
+                condition: null,
+                is_do_collapsed: {
+                  type: "arrow_toggle_literal",
+                  value: null,
+                },
+              },
+            },
+          ],
+        },
+        parameters: {
+          type: "parameters_literal",
+          value: null,
+        },
+        is_do_collapsed: {
+          type: "arrow_toggle_literal",
+          value: false,
+        },
+      },
+    },
+    name: "test",
+    description: null,
+    db_epoch_updated: 1697586577,
+    db_epoch_created: 1697241860,
+  })
+
+  // let function_manager = create_function_manager({
+  //   name: example_page_data?.name,
+  //   description: example_page_data?.description,
+  //   structure: example_page_data?.structure,
+  // })
+</script>
+
+<div>
+  <p>Revisit in future</p>
+  <!-- <FunctionInput manager={function_manager} /> -->
+</div>

package/src/routes/[component]/Showcase/Icon/index.svelte

@@ -0,0 +1,120 @@
+<script>
+  import Icon from "$lib/Components/Icon/index.svelte"
+  import { create_icon_manager } from "$lib/Components/Icon/index.svelte.js"
+
+  let icons = [
+    "arrow",
+    "arrow_tailed",
+    "curved_arrow",
+    "calendar",
+    "chart",
+    "row_item",
+    "chart_group",
+    "check",
+    "copy",
+    "drag_grip",
+    "edit",
+    "link",
+    "link_internal",
+    "list",
+    "minus",
+    "plus",
+    "rotate",
+    "refresh",
+    "sort",
+    "table",
+    "trashcan",
+    "x",
+    "three_dots",
+    "clock",
+    "sun",
+    "moon",
+    "magnifying_glass",
+    "smile_face",
+    "nuetral_face",
+    "frown_face",
+    "pointer_hand",
+    "touch_circle",
+    "profile",
+    "share",
+    "invite",
+    "feedback",
+    "idea",
+    "ar_one_to_one",
+    "ar_four_to_three",
+    "ar_three_to_two",
+    "ar_sixteen_to_nine",
+    "resize",
+    "crop",
+    "folder",
+    "file",
+    "file_drop",
+    "linked",
+    "unlinked",
+    "sliders",
+    "brain",
+    "brush",
+    "redo_arrow",
+    "undo_arrow",
+    "opposing_arrows",
+    "warning",
+    "pinpoint",
+    "paperclip",
+    "reply",
+    "reply_all",
+    "forward",
+    "mail",
+    "mail_opened",
+    "mail_received",
+    "mail_sent",
+    "mail_sent_opened",
+  ]
+
+  let icons_prepped = $state(null)
+
+  function prep_icons() {
+    let icons_prepped_loc = []
+    if (Array.isArray(icons)) {
+      for (let icon of icons) {
+        let icon_prepped = create_icon_manager({
+          icon_id: icon,
+          sw: 40,
+        })
+        icons_prepped_loc.push(icon_prepped)
+      }
+    }
+    icons_prepped = icons_prepped_loc
+  }
+
+  prep_icons()
+</script>
+
+<div>
+  <div class="grid">
+    {#if Array.isArray(icons_prepped)}
+      {#each icons_prepped as icon_prepped}
+        <div class="box">
+          <Icon manager={icon_prepped} />
+          <p>{icon_prepped?.icon_id}</p>
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .grid {
+    width: 100%;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(5%, 8rem, 100%), 1fr));
+    margin: 0.5rem;
+  }
+  .box {
+    display: grid;
+    place-items: center;
+  }
+  .box p {
+    font-size: 1.2rem;
+  }
+</style>

package/src/routes/[component]/Showcase/IconInput/index.svelte

@@ -0,0 +1,15 @@
+<script>
+  import IconInput from "$lib/Components/IconInput/index.svelte"
+  import { create_icon_input_manager } from "$lib/Components/IconInput/index.svelte.js"
+  import Icon from "$lib/Components/Icon/index.svelte"
+
+  let icon_input_manager = create_icon_input_manager()
+  let icon_input_manager2 = create_icon_input_manager({ is_icon_only: true })
+</script>
+
+<div>
+  <h4>Example</h4>
+  <IconInput manager={icon_input_manager} />
+  <h4>Icon is_icon_only</h4>
+  <IconInput manager={icon_input_manager2} />
+</div>

package/src/routes/[component]/Showcase/Image/index.svelte

@@ -0,0 +1,119 @@
+<script>
+  import Image from "$lib/Components/Image/index.svelte"
+  import { create_image_manager } from "$lib/Components/Image/index.svelte.js"
+
+  let image_manager1 = create_image_manager({
+    src: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/godzilla-released.png",
+    src_quick: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/godzilla-released.webp",
+    alt: "Hello World",
+    image_width: 1344,
+    image_height: 896,
+    display_max_height: 800,
+    display_max_width: 400,
+    bg_img_blur: 20,
+    bg_img_opacity: 0.5,
+  })
+
+  let image_manager2 = create_image_manager({
+    src: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/moon.webp",
+    alt: "Hello World",
+    display_max_height: 80,
+    display_max_width: 250,
+    image_aspect_ratio: 1,
+    bg_img_blur: 10,
+  })
+
+  let image_manager3 = create_image_manager({
+    src: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/moon.webp",
+    alt: "Hello World",
+    display_max_height: 50,
+    // display_max_width: 250,
+    // image_aspect_ratio: 1,
+    bg_img_blur: 10,
+  })
+
+  let image_manager4 = create_image_manager({
+    src: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/bagel_test.png",
+    // display_max_height: 200,
+    // display_max_width: 200,
+    bg_img_blur: 20,
+    bg_img_opacity: 0.01,
+  })
+  let image_manager5 = create_image_manager({
+    // display_max_height: 200,
+    // display_max_width: 200,
+    bg_img_blur: 20,
+    bg_img_opacity: 0.01,
+  })
+
+  let image_manager6 = create_image_manager({
+    src: "https://www.contibase.com/api/v1/storage/almlditgeqkckokjniso",
+    src_quick: "https://www.contibase.com/api/v1/storage/dxaarfdhwqtmrxfrgfwu",
+    alt: "Hello World",
+    image_width: 512,
+    image_height: 512,
+    display_max_height: 800,
+    display_max_width: 400,
+    bg_img_blur: 20,
+    bg_img_opacity: 0.5,
+  })
+
+  let image_manager7 = create_image_manager({
+    src: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/skyscraper_test.webp",
+    src_quick: "https://firmcmccxfdethzdexal.supabase.co/storage/v1/object/public/site/test/skyscraper_test_quick.webp",
+    alt: "Hello World",
+    display_max_height: 800,
+    display_max_width: 400,
+    bg_img_blur: 20,
+    bg_img_opacity: 0.5,
+  })
+</script>
+
+<div>
+  <div class="grid">
+    <div>
+      <h4>Example</h4>
+      <Image manager={image_manager1} />
+    </div>
+    <div>
+      <h4>Example 2</h4>
+      <Image manager={image_manager2} />
+    </div>
+    <div>
+      <h4>Example 3</h4>
+      <Image manager={image_manager3} />
+    </div>
+    <div>
+      <h4>Example 4</h4>
+      <div style="max-width: 200px; border: 1px solid red;">
+        <Image manager={image_manager4} />
+      </div>
+    </div>
+    <div>
+      <h4>Example 5 no src</h4>
+      <div style="max-width: 200px; border: 1px solid red;">
+        <Image manager={image_manager5} />
+      </div>
+    </div>
+    <div>
+      <h4>Example 6</h4>
+      <div style="max-width: 200px;">
+        <Image manager={image_manager6} />
+      </div>
+    </div>
+    <div>
+      <h4>Example 7</h4>
+      <div style="max-width: 200px;">
+        <Image manager={image_manager7} />
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
+    margin: 0.5rem;
+  }
+</style>