sveltekit-ui 1.0.0

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

@@ -0,0 +1,422 @@
+<script>
+  import Location from "$lib/Components/Location/index.svelte"
+  import { create_location_manager } from "$lib/Components/Location/index.svelte.js"
+  import { PUBLIC_APPLE_MAPKIT_JS_API_KEY } from "$env/static/public"
+
+  // let val = {
+  //   place_id: "I1B2A279E956AFF37",
+  //   muid: "1957420550111035191",
+  //   latitude: 39.9782211,
+  //   longitude: -83.0031064,
+  //   name: "The Lox",
+  //   formatted_address: "772 N High St, Unit 106, Columbus, OH 43215, United States",
+  //   country: "United States",
+  //   country_code: "US",
+  //   administrative_area: "Ohio",
+  //   administrative_area_code: "OH",
+  //   locality: "Columbus",
+  //   sub_locality: "Italian Village",
+  //   full_thoroughfare: "772 N High St",
+  // }
+
+  let reykjavik = {
+    muid: "8657441869121576464",
+    latitude: 64.1475973,
+    longitude: -21.9386179,
+    name: "Reykjavík, Greater Reykjavík",
+    formatted_address: "Reykjavík, Iceland",
+    country: "Iceland",
+    country_code: "IS",
+    administrative_area: "Greater Reykjavík",
+    locality: "Reykjavík",
+  }
+
+  let stockholm = {
+    place_id: "I89195AE7BB11F0FF",
+    muid: "9879027208936354047",
+    poi_category: "PublicTransport",
+    latitude: 59.3297578,
+    longitude: 18.0572531,
+    name: "Stockholm Centralstation",
+    formatted_address: "Stockholm, Sweden",
+    country: "Sweden",
+    country_code: "SE",
+    administrative_area: "Stockholm County",
+    locality: "Stockholm",
+  }
+
+  let copenhagen = {
+    muid: "14740132918557855751",
+    latitude: 55.662352,
+    longitude: 12.6159319,
+    name: "Copenhagen",
+    formatted_address: "Copenhagen, Denmark",
+    country: "Denmark",
+    country_code: "DK",
+    administrative_area: "Capital Region of Denmark",
+    locality: "København S",
+    sub_locality: "Copenhagen",
+  }
+
+  let kalix = {
+    place_id: "I936475A0BFE4700C",
+    muid: "10620743154521108492",
+    poi_category: "PublicTransport",
+    latitude: 65.8657638,
+    longitude: 23.1417032,
+    name: "Kalix, Norrbotten County",
+    formatted_address: "Kalix, Sweden",
+    country: "Sweden",
+    country_code: "SE",
+    administrative_area: "Norrbotten County",
+    administrative_area_code: "BD",
+    locality: "Kalix",
+  }
+
+  let narvik = {
+    place_id: "IEDE6C0844FB5BAEB",
+    muid: "17142600706137897707",
+    poi_category: "PublicTransport",
+    latitude: 68.4417435,
+    longitude: 17.4432089,
+    name: "Narvik, Nordland",
+    formatted_address: "Narvik, Norway",
+    country: "Norway",
+    country_code: "NO",
+    administrative_area: "Nordland",
+    administrative_area_code: "18",
+    locality: "Narvik",
+  }
+
+  let svolvr = {
+    place_id: "I4D8E4EAC97614F2D",
+    muid: "5588490690794442541",
+    poi_category: "PublicTransport",
+    latitude: 68.2340015,
+    longitude: 14.551482,
+    name: "Svolvær, Nordland",
+    formatted_address: "Svolvær, Norway",
+    country: "Norway",
+    country_code: "NO",
+    administrative_area: "Nordland",
+    administrative_area_code: "18",
+    locality: "Svolvær",
+  }
+
+  let kiruna = {
+    place_id: "I4DD53FDAD42236A1",
+    muid: "5608459120054253217",
+    poi_category: "PublicTransport",
+    latitude: 67.8685765,
+    longitude: 20.1987718,
+    name: "Kiruna, Norrbotten County",
+    formatted_address: "Kiruna, Sweden",
+    country: "Sweden",
+    country_code: "SE",
+    administrative_area: "Norrbotten County",
+    locality: "Kiruna",
+  }
+
+  let oulu = {
+    place_id: "IF835CAFD3609F7A4",
+    muid: "17885424684053952420",
+    poi_category: "PublicTransport",
+    latitude: 65.0102148,
+    longitude: 25.4828016,
+    name: "Oulu, North Ostrobothnia",
+    formatted_address: "Oulu, Finland",
+    country: "Finland",
+    country_code: "FI",
+    administrative_area: "North Ostrobothnia",
+    locality: "Oulu",
+  }
+
+  let rovaniemi = {
+    place_id: "I3290CEFE55435F49",
+    muid: "3643639690290224969",
+    poi_category: "PublicTransport",
+    latitude: 66.4980335,
+    longitude: 25.7026932,
+    name: "Rovaniemi, Lapland",
+    formatted_address: "Rovaniemi, Finland",
+    country: "Finland",
+    country_code: "FI",
+    administrative_area: "Lapland",
+    locality: "Rovaniemi",
+  }
+
+  let kirkenes = {
+    muid: "15537753109082693582",
+    latitude: 69.7258084,
+    longitude: 30.0526379,
+    name: "Kirkenes, Troms og Finnmark",
+    formatted_address: "Kirkenes, Sør-Varanger Municipality, Norway",
+    country: "Norway",
+    country_code: "NO",
+    administrative_area: "Troms og Finnmark",
+    locality: "Kirkenes",
+  }
+
+  let bergen = {
+    muid: "1888415693493108354",
+    latitude: 60.3931425,
+    longitude: 5.3213713,
+    name: "Bergen, Vestland",
+    formatted_address: "Bergen, Norway",
+    country: "Norway",
+    country_code: "NO",
+    administrative_area: "Vestland",
+    locality: "Bergen",
+  }
+
+  let oslo = {
+    muid: "18316975078019734711",
+    latitude: 59.9164997,
+    longitude: 10.7384202,
+    name: "Oslo, Oslo",
+    formatted_address: "Oslo, Norway",
+    country: "Norway",
+    country_code: "NO",
+    administrative_area: "Oslo",
+    locality: "Oslo",
+  }
+
+  let london = {
+    muid: "18366846785603624515",
+    latitude: 51.5033768,
+    longitude: -0.0795183,
+    name: "London, England",
+    formatted_address: "London, England",
+    country: "United Kingdom",
+    country_code: "GB",
+    administrative_area: "England",
+    locality: "London",
+  }
+
+  let val = [
+    reykjavik,
+    {
+      type: "route",
+      method: "path",
+      from: reykjavik,
+      to: stockholm,
+      line_width: 3,
+      stroke_color: "#0000ff",
+    },
+    stockholm,
+    {
+      type: "route",
+      from: stockholm,
+      to: copenhagen,
+      line_width: 3,
+      stroke_color: "#00ff00",
+    },
+    copenhagen,
+    {
+      type: "route",
+      method: "path",
+      from: copenhagen,
+      to: kalix,
+      line_width: 3,
+      stroke_color: "#ff00ff",
+    },
+    kalix,
+    {
+      type: "route",
+      from: kalix,
+      to: narvik,
+      line_width: 3,
+      stroke_color: "#ff9900",
+    },
+    narvik,
+    {
+      type: "route",
+      from: narvik,
+      to: svolvr,
+      line_width: 3,
+      stroke_color: "#0099ff",
+    },
+    svolvr,
+    {
+      type: "route",
+      from: svolvr,
+      to: kiruna,
+      line_width: 3,
+      stroke_color: "#9900ff",
+    },
+    kiruna,
+    {
+      type: "route",
+      from: kiruna,
+      to: oulu,
+      line_width: 3,
+      stroke_color: "#33cc33",
+    },
+    oulu,
+    {
+      type: "route",
+      from: oulu,
+      to: rovaniemi,
+      line_width: 3,
+      stroke_color: "#ffcc00",
+    },
+    rovaniemi,
+    {
+      type: "route",
+      from: rovaniemi,
+      to: kirkenes,
+      line_width: 3,
+      stroke_color: "#00cccc",
+    },
+    kirkenes,
+    {
+      type: "route",
+      method: "path",
+      from: kirkenes,
+      to: bergen,
+      line_width: 3,
+      stroke_color: "#cc0000",
+      way_points: [
+        { latitude: 71, longitude: 31 },
+        { latitude: 70, longitude: 15 },
+        { latitude: 62, longitude: 4 },
+      ],
+    },
+    bergen,
+    {
+      type: "route",
+      from: bergen,
+      to: oslo,
+      line_width: 3,
+      stroke_color: "#6600cc",
+    },
+    oslo,
+    {
+      type: "route",
+      method: "path",
+      from: oslo,
+      to: london,
+      line_width: 3,
+      stroke_color: "#ff6600",
+    },
+    london,
+  ]
+
+  let example_place_1 = {
+    place_id: "I1B2A279E956AFF37",
+    muid: "1957420550111035191",
+    latitude: 39.9782211,
+    longitude: -83.0031064,
+    name: "The Lox",
+    formatted_address: "772 N High St, Unit 106, Columbus, OH 43215, United States",
+    country: "United States",
+    country_code: "US",
+    administrative_area: "Ohio",
+    administrative_area_code: "OH",
+    locality: "Columbus",
+    sub_locality: "Italian Village",
+    full_thoroughfare: "772 N High St",
+  }
+
+  let example_place_2 = {
+    place_id: "IEBBEF9191CE7D937",
+    muid: "16987288730742544695",
+    poi_category: "Cafe",
+    latitude: 39.9590308,
+    longitude: -83.0002325,
+    name: "Parable",
+    formatted_address: "149 S High St, Columbus, OH  43215, United States",
+    country: "United States",
+    country_code: "US",
+    administrative_area: "Ohio",
+    administrative_area_code: "OH",
+    locality: "Columbus",
+    sub_locality: "Mile on High",
+    full_thoroughfare: "149 S High St",
+  }
+
+  let example_place_3 = {
+    place_id: "IFB0263A34D082441",
+    muid: "18087128606496531521",
+    poi_category: "FitnessCenter",
+    latitude: 39.9880045,
+    longitude: -83.032549,
+    name: "Rewild Yoga",
+    formatted_address: "995 W Fifth Ave, Columbus, OH  43212, United States",
+    country: "United States",
+    country_code: "US",
+    administrative_area: "Ohio",
+    administrative_area_code: "OH",
+    locality: "Columbus",
+    sub_locality: "Fifth by Northwest",
+    full_thoroughfare: "995 W Fifth Ave",
+  }
+
+  let example_place_4 = {
+    muid: "4817404184925376940",
+    latitude: 40.1575997,
+    longitude: -83.0764406,
+    name: "Powell, Ohio",
+    formatted_address: "Powell, OH, United States",
+    country: "United States",
+    country_code: "US",
+    administrative_area: "Ohio",
+    administrative_area_code: "OH",
+    locality: "Powell",
+  }
+
+  // let val = [
+  //   example_place_1,
+  //   example_place_2,
+  //   example_place_3,
+  //   example_place_4,
+  //   {
+  //     type: "route",
+  //     from: example_place_1,
+  //     to: example_place_2,
+  //     stroke_color: "#ff0000",
+  //     line_width: 3,
+  //   },
+  //   {
+  //     type: "route",
+  //     from: example_place_2,
+  //     to: example_place_3,
+  //     stroke_color: "#ffcc00",
+  //     line_width: 3,
+  //   },
+  //   {
+  //     type: "route",
+  //     from: example_place_3,
+  //     to: example_place_4,
+  //     line_width: 3,
+  //     way_points: [{ latitude: 40, longitude: -83.1 }],
+  //   },
+  // ]
+
+  let location_manager = $state(
+    create_location_manager({
+      val: val,
+      is_dark_color_scheme: true,
+      mapkit_js_token: PUBLIC_APPLE_MAPKIT_JS_API_KEY,
+    })
+  )
+
+  let val2 = example_place_1
+
+  let location_manager2 = $state(
+    create_location_manager({
+      val: val2,
+      is_dark_color_scheme: true,
+      is_popover: true,
+      mapkit_js_token: PUBLIC_APPLE_MAPKIT_JS_API_KEY,
+    })
+  )
+</script>
+
+<div>
+  <h4>Example</h4>
+  <Location manager={location_manager} />
+  <pre>{JSON.stringify(location_manager?.val, null, 2)}</pre>
+  <h4>Popover Example</h4>
+  <Location manager={location_manager2} />
+</div>

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

@@ -0,0 +1,121 @@
+<script>
+  import Button from "$lib/Components/Button/index.svelte"
+  import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+  import LocationInput from "$lib/Components/LocationInput/index.svelte"
+  import { create_location_input_manager } from "$lib/Components/LocationInput/index.svelte.js"
+  import { PUBLIC_APPLE_MAPKIT_JS_API_KEY } from "$env/static/public"
+
+  let maps_token = $state(null)
+  let maps_token_expiration_epoch = $state(null)
+  async function get_token() {
+    // const response = await fetch(`/api/maps/token`, { method: "GET" })
+    // console.log("get_token_res", response)
+    // const res_body = await response.json()
+    // if (response.ok) {
+    //   maps_token = res_body?.token
+    //   const current_epoch_in_seconds = Math.floor(Date.now() / 1000)
+    //   maps_token_expiration_epoch = current_epoch_in_seconds + res_body?.expires_in_seconds - 60
+    // }
+    // return res_body?.token
+  }
+
+  async function suggest(input) {
+    // const current_epoch_in_seconds = Math.floor(Date.now() / 1000)
+    // if (maps_token_expiration_epoch < current_epoch_in_seconds) {
+    //   const token = await get_token()
+    // }
+    // const response = await fetch(`/api/maps/suggest`, {
+    //   method: "POST",
+    //   body: JSON.stringify({
+    //     token: maps_token,
+    //     search_val: input?.search_val,
+    //     // tbd_other_stuff: ,
+    //   }),
+    // })
+    // console.log("location_suggest_res", response)
+    // const res_body = await response.json()
+    // console.log("location_suggest_res_body", res_body)
+    // if (!response.ok) {
+    //   return {
+    //     is_success: false,
+    //     error_message: res_body?.message ?? JSON.stringify(res_body),
+    //   }
+    // }
+    // return {
+    //   is_success: true,
+    //   suggestions: res_body,
+    // }
+  }
+
+  async function search(input) {
+    // const current_epoch_in_seconds = Math.floor(Date.now() / 1000)
+    // if (maps_token_expiration_epoch < current_epoch_in_seconds) {
+    //   const token = await get_token()
+    // }
+    // const response = await fetch(`/api/maps/search`, {
+    //   method: "POST",
+    //   body: JSON.stringify({
+    //     token: maps_token,
+    //     search_val: input?.search_val,
+    //     // tbd_other_stuff: ,
+    //   }),
+    // })
+    // console.log("location_search_res", response)
+    // const res_body = await response.json()
+    // console.log("location_search_res_body", res_body)
+    // if (!response.ok) {
+    //   return {
+    //     is_success: false,
+    //     error_message: res_body?.message ?? JSON.stringify(res_body),
+    //   }
+    // }
+    // return {
+    //   is_success: true,
+    //   suggestions: res_body,
+    // }
+  }
+
+  // let location_input_manager = create_location_input_manager({
+  //   // mapkit_js_token: "",
+  //   suggest: suggest,
+  //   search: search,
+  //   retrieve: retrieve,
+  //   on_suggestion_clicked: () => console.log("on_suggestion_clicked"),
+  // })
+
+  let location_input_manager = $state(
+    create_location_input_manager({
+      val: {
+        place_id: "I1B2A279E956AFF37",
+        muid: "1957420550111035191",
+        latitude: 39.9782211,
+        longitude: -83.0031064,
+        name: "The Lox",
+        formatted_address: "772 N High St, Unit 106, Columbus, OH 43215, United States",
+        country: "United States",
+        country_code: "US",
+        administrative_area: "Ohio",
+        administrative_area_code: "OH",
+        locality: "Columbus",
+        sub_locality: "Italian Village",
+        full_thoroughfare: "772 N High St",
+      },
+      is_dark_color_scheme: true,
+      mapkit_js_token: PUBLIC_APPLE_MAPKIT_JS_API_KEY,
+    })
+  )
+
+  let toggle_button_manager = $state(
+    create_button_manager({
+      text: "toggle",
+      is_compressed: true,
+      popover_target: () => `popover_${location_input_manager?.popover_manager?.id}`,
+    })
+  )
+</script>
+
+<div>
+  <Button manager={toggle_button_manager} />
+  <LocationInput manager={location_input_manager} />
+  <pre>{JSON.stringify(location_input_manager?.val, null, 2)}</pre>
+</div>

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

@@ -0,0 +1,55 @@
+<script>
+  // import NumberConfigInput from "$lib/Components/Number/ConfigInput/index.svelte"
+  // import { create_number_config_manager } from "$lib/Components/Number/ConfigInput/index.svelte.js"
+  // import Number from "$lib/Components/Number/ConfigInput/index.svelte"
+  import { create_number_manager } from "$lib/Components/Number/index.svelte.js"
+
+  // let number_config_input_manager = create_number_config_manager({
+  //   on_finish: (input) => number_manager.init(input),
+  // })
+  // let number_manager = create_number_manager({
+  //   val: 501398.43,
+  //   round: "nearest",
+  //   round_by: 1,
+  //   shorthand: "thousands",
+  //   is_percentage: false,
+  //   is_dynamic_color: false,
+  //   is_progress_bar: false,
+  //   is_hide_number: false,
+  //   base_color: {
+  //     l: 13,
+  //     c: 19,
+  //     h: 19,
+  //     o: 24,
+  //     is_dark_theme_invert: true,
+  //   },
+  //   start_color: null,
+  //   end_color: null,
+  //   start_value: null,
+  //   end_value: null,
+  //   separators: "thousands_commas_period",
+  //   is_tooltip: false,
+  //   overrides: [],
+  // })
+</script>
+
+<div>
+  revisit perhaps after conditions/function part
+  <div class="grid">
+    <div>
+      <!-- <h4>Example NumberConfigInput</h4> -->
+      <!-- <NumberConfigInput manager={number_config_input_manager} /> -->
+      <!-- <pre>{JSON.stringify(number_config_input_manager?.val, null, 2)}</pre> -->
+      <!-- <h4>Example Number</h4> -->
+      <!-- <Number manager={number_manager} /> -->
+    </div>
+  </div>
+</div>
+
+<style>
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 20rem, 100%), 1fr));
+    margin: 0.5rem;
+  }
+</style>