feat: add selector component (#59)

* feat: add selector component

* feat: improve selector + add flag-icon lib

* feat: improve selector + doc

* feat: add utility function to get language with country name

* feat: test page for language selectors

* chore: add Selector Story

* chore: clean test page

* fix: types

Author: JulienAuvo

infrastructure/eid-wallet/package.json

@@ -21,6 +21,7 @@
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-opener": "^2",
     "clsx": "^2.1.1",
+    "flag-icons": "^7.3.2",
     "tailwind-merge": "^3.0.2"
   },
   "devDependencies": {

infrastructure/eid-wallet/src/app.css

@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+@import 'flag-icons/css/flag-icons.min.css';
 @plugin "daisyui" {
   themes: false; /* Disable built-in themes */
   darktheme: 'light';

infrastructure/eid-wallet/src/lib/ui/Selector/Selector.stories.snippet.svelte

@@ -0,0 +1,13 @@
+<script context="module">
+  export { BasicContent, WithIconContent }
+</script>
+
+{#snippet BasicContent()}
+  Choice
+{/snippet}
+
+{#snippet WithIconContent()}
+  <div
+    class="rounded-full fi fis fi-gb scale-150 mr-12 outline-8 outline-gray-900"
+  ></div>
+{/snippet}

infrastructure/eid-wallet/src/lib/ui/Selector/Selector.stories.ts

@@ -0,0 +1,46 @@
+import Selector from './Selector.svelte'
+import {
+  BasicContent,
+  WithIconContent,
+} from './Selector.stories.snippet.svelte'
+import type { ComponentProps } from 'svelte'
+
+export default {
+  title: 'UI/Selector',
+  component: Selector,
+  tags: ['autodocs'],
+  render: (args: {
+    Component: Selector
+    props: ComponentProps<typeof Selector>
+  }) => ({
+    Component: Selector,
+    props: args,
+  }),
+}
+
+export const WithIcon = {
+  render: () => ({
+    Component: Selector,
+    props: {
+      id: 'option-1',
+      name: 'lang',
+      value: 'option-1',
+      selected: 'option-1',
+      icon: WithIconContent,
+      children: BasicContent,
+    },
+  }),
+}
+
+export const WithoutIcon = {
+  render: () => ({
+    Component: Selector,
+    props: {
+      id: 'option-1',
+      name: 'lang',
+      value: 'option-1',
+      selected: 'option-1',
+      children: BasicContent,
+    },
+  }),
+}

infrastructure/eid-wallet/src/lib/ui/Selector/Selector.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { cn } from '$lib/utils'
+  import { Tick01Icon } from '@hugeicons/core-free-icons'
+  import { HugeiconsIcon } from '@hugeicons/svelte'
+  import type { HTMLLabelAttributes } from 'svelte/elements'
+  import { fade } from 'svelte/transition'
+
+  interface ISelectorProps extends HTMLLabelAttributes {
+    id: string
+    name: string
+    value: string
+    icon?: (id: string) => any
+    selected?: string
+    children?: () => any
+  }
+
+  let {
+    id,
+    name,
+    value,
+    icon = undefined,
+    selected = $bindable(),
+    children = undefined,
+    ...restProps
+  }: ISelectorProps = $props()
+</script>
+
+<label
+  {...restProps}
+  for={id}
+  class={cn(
+    ['flex w-full justify-between items-center py-4', restProps.class].join(' ')
+  )}
+>
+  <div class="flex">
+    <div class="capitalize flex items-center">
+      <input
+        type="radio"
+        {id}
+        {name}
+        {value}
+        class="appearance-none"
+        bind:group={selected}
+      />
+      {#if icon}
+        <div>{@render icon(id)}</div>
+      {/if}
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  </div>
+  {#if selected === value}
+    <div in:fade={{ duration: 150, delay: 0 }} class="overflow-hidden">
+      <HugeiconsIcon
+        color="var(--color-white)"
+        icon={Tick01Icon}
+        className="bg-primary-900 rounded-full w-6 h-6"
+      />
+    </div>
+  {/if}
+</label>
+
+<!-- 
+  @component
+  export default Selector
+  @description
+  A radio button with an icon and a label
+  @props
+  - id: string
+  - name: string
+  - value: string
+  - icon: (id: string) => any
+  - selected: string
+  - children: () => any
+  @slots
+  - default: The label of the radio button
+  @example
+  ```svelte
+  <script lang="ts">
+    import Selector from '$lib/ui/Selector/Selector.svelte'
+    import { getLanguageWithCountry } from '$lib/utils/getLanguage'
+    import { writable } from 'svelte/store'
+  
+    const AVAILABLE_LANGUAGES = ['en-GB', 'es', 'de', 'fr', 'ru']
+  
+    const selectors = AVAILABLE_LANGUAGES.map((locale) => {
+      const { code, name } = getLanguageWithCountry(locale)
+  
+      return {
+        id: code,
+        value: name,
+        checked: locale === 'en-GB',
+      }
+    })
+  
+    let selected = writable(selectors[0].value)
+  </script>
+  
+  <h1 class="text-2xl font-bold">Select your language</h1>
+  
+  <fieldset class="mx-8 flex flex-col gap-4 mt-12">
+    {#each selectors as selector}
+      {@const { id, value, checked } = selector}
+  
+      <Selector {id} name="lang" {value} bind:selected={$selected}>
+        {#snippet icon(id: string)}
+          <div
+            class="rounded-full fi fis fi-{id} scale-150 mr-12 outline-8 outline-gray-900"
+          ></div>
+        {/snippet}
+        {value}
+      </Selector>
+    {/each}
+  </fieldset>
+  ```
+-->

infrastructure/eid-wallet/src/lib/utils/getLanguage.ts

@@ -0,0 +1,23 @@
+/**
+ * Get the language name with the country name in parentheses
+ * @param {string} locale - The locale code
+ * @returns {object} - The language code and name
+ *
+ * @example
+ * getLanguageWithCountry('en-GB') // { code: 'gb', name: 'English (United Kingdom)' }
+ * getLanguageWithCountry('es') // { code: 'es', name: 'Spanish' }
+ */
+export const getLanguageWithCountry = (locale: string) => {
+  const parts = locale.split('-')
+  const langCode = parts[0]
+  const countryCode = parts[1]?.toLowerCase() || ''
+
+  return {
+    code: countryCode || langCode,
+    name:
+      new Intl.DisplayNames(['en'], { type: 'language' }).of(langCode) +
+      (countryCode
+        ? ` (${new Intl.DisplayNames(['en'], { type: 'region' }).of(countryCode.toUpperCase())})`
+        : ''),
+  }
+}

infrastructure/eid-wallet/src/routes/+page.svelte

@@ -1,18 +1,14 @@
 <script lang="ts">
-
-    import { Drawer } from "$lib/ui";
-    let isPaneOpen = $state(false);
+  import { Drawer } from '$lib/ui'
+  let isPaneOpen = $state(false)
 </script>
 
-<button class="btn btn-soft" onclick={() => isPaneOpen = true}>Open</button>
-
-
-
+<button class="btn btn-soft" onclick={() => (isPaneOpen = true)}>Open</button>
 
 <Drawer bind:isPaneOpen isCancelRequired={true}>
-   <div class="bg-red-300">aslkfamfoasdiownednciaosndoasfnas </div>
-   <div>asfnladmfpamsfl asd</div>
-   <div>aslkfasf;,;</div>
-   <button class="btn btn-soft" >Open</button>
-   <button class="btn btn-soft">Open</button>
+  <div class="bg-red-300">aslkfamfoasdiownednciaosndoasfnas</div>
+  <div>asfnladmfpamsfl asd</div>
+  <div>aslkfasf;,;</div>
+  <button class="btn btn-soft">Open</button>
+  <button class="btn btn-soft">Open</button>
 </Drawer>