File tokens

package.json

@@ -21,9 +21,9 @@
     "dependencies": {
         "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@ac51fcb",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f57e0157 ",
-        "@appwrite.io/pink-legacy": "^1.0.2",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@fbb0f02",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7",
+        "@appwrite.io/pink-legacy": "^1.0.1",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@284",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",

src/routes/(console)/project-[project]/overview/keys/expirationInput.svelte → src/lib/components/expirationInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Helper, InputDateTime, InputSelect } from '$lib/elements/forms';
+    import { InputDateTime, InputSelect } from '$lib/elements/forms';
     import { isSameDay, isValidDate, toLocaleDate } from '$lib/helpers/date';
 
     function incrementToday(value: number, type: 'day' | 'month' | 'year'): string {
@@ -47,6 +47,9 @@
     ];
 
     export let value: string | null = null;
+    export let dateSelectorLabel: string | undefined = undefined;
+    export let selectorLabel: string | undefined = 'Expiration Date';
+    export let resourceType: string | 'key' | 'token' | undefined = 'key';
 
     function initExpirationSelect() {
         if (value === null || !isValidDate(value)) return null;
@@ -65,6 +68,10 @@
     }
     let expirationSelect = initExpirationSelect();
     let expirationCustom: string | null = value ?? null;
+    $: helper =
+        expirationSelect !== 'custom' && expirationSelect !== null
+            ? `Your ${resourceType} will expire in ${toLocaleDate(value)}`
+            : null;
 
     $: {
         if (!isSameDay(new Date(expirationSelect), new Date(value))) {
@@ -73,13 +80,8 @@
     }
 </script>
 
-<InputSelect bind:value={expirationSelect} {options} id="preset" label="Expiration date">
-    <svelte:fragment slot="helper">
-        {#if expirationSelect !== 'custom' && expirationSelect !== null}
-            <Helper type="neutral">Your key will expire in {toLocaleDate(value)}</Helper>
-        {/if}
-    </svelte:fragment>
+<InputSelect bind:value={expirationSelect} {options} id="preset" label={selectorLabel} {helper}>
 </InputSelect>
 {#if expirationSelect === 'custom'}
-    <InputDateTime required id="expire" label="" bind:value={expirationCustom} showLabel={false} />
+    <InputDateTime required id="expire" label={dateSelectorLabel} bind:value={expirationCustom} />
 {/if}

src/lib/components/index.ts

@@ -82,3 +82,4 @@ export { default as Sidebar } from './sidebar.svelte';
 export { default as BottomSheet } from './bottom-sheet/index';
 export { default as Confirm } from './confirm.svelte';
 export { default as UsageCard } from './usageCard.svelte';
+export { default as ExpirationInput } from './expirationInput.svelte';

src/lib/elements/forms/inputDateTime.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { Input } from '@appwrite.io/pink-svelte';
+    import { Input, Layout, Selector } from '@appwrite.io/pink-svelte';
 
-    export let label: string = undefined;
     export let id: string;
-    export let name: string = id;
-    export let helper: string = undefined;
-    export let value = '';
-    export let placeholder = '';
+    export let label: string;
+    export let value: string;
     export let required = false;
     export let nullable = false;
     export let disabled = false;
@@ -17,41 +14,48 @@
     export let step: number | 'any' = 0.001;
 
     let error: string;
+    let element: HTMLInputElement;
 
-    function handleInvalid(event: Event) {
-        event.preventDefault();
-
-        if (event.currentTarget.validity.valueMissing) {
-            error = 'This field is required';
-            return;
+    onMount(() => {
+        if (element && autofocus) {
+            element.focus();
         }
+    });
 
-        error = event.currentTarget.validationMessage;
+    let prevValue = '';
+    function handleNullChange(e: CustomEvent<boolean>) {
+        const isNull = e.detail;
+        if (isNull) {
+            prevValue = value;
+            value = null;
+        } else {
+            value = prevValue;
+        }
     }
 
     $: if (value) {
         error = null;
     }
 </script>
 
-<Input.DateTime
-    {id}
-    {name}
-    {placeholder}
-    {disabled}
-    {required}
-    {label}
-    {step}
-    {nullable}
-    {readonly}
-    autofocus={autofocus || undefined}
-    autocomplete={autocomplete ? 'on' : 'off'}
-    helper={error || helper}
-    state={error ? 'error' : 'default'}
-    on:invalid={handleInvalid}
-    on:input
-    bind:value>
-    <slot name="start" slot="start" />
-    <slot name="info" slot="info" />
-    <slot name="end" slot="end" />
-</Input.DateTime>
+<Layout.Stack gap="s" direction="row">
+    <Input.DateTime
+        {id}
+        {label}
+        {disabled}
+        {readonly}
+        {required}
+        {value}
+        {step}
+        helper={error}
+        autocomplete={autocomplete ? 'on' : 'off'}>
+        {#if nullable}
+            <Selector.Checkbox
+                size="s"
+                slot="end"
+                label="NULL"
+                checked={value === null}
+                on:change={handleNullChange} />
+        {/if}
+    </Input.DateTime>
+</Layout.Stack>

src/lib/elements/forms/inputSelect.svelte

@@ -5,6 +5,7 @@
     export let id: string;
     export let label: string | undefined = undefined;
     export let value: string | number | boolean | null;
+    export let helper: string | undefined = undefined;
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
@@ -52,8 +53,8 @@
     {placeholder}
     {disabled}
     {isSearchable}
+    helper={error ?? helper}
     {required}
-    helper={error}
     state={error ? 'error' : 'default'}
     on:invalid={handleInvalid}
     on:input

src/lib/helpers/date.ts

@@ -31,7 +31,7 @@ export const toLocaleDate = (datetime: string) => {
     return date.toLocaleDateString('en', options);
 };
 
-export const toLocaleDateTime = (datetime: string | number) => {
+export const toLocaleDateTime = (datetime: string | number, is12HourFormat: boolean = false) => {
     const date = new Date(datetime);
 
     if (isNaN(date.getTime())) {
@@ -44,7 +44,8 @@ export const toLocaleDateTime = (datetime: string | number) => {
         day: 'numeric',
         hour: 'numeric',
         minute: 'numeric',
-        hourCycle: 'h23'
+        hourCycle: is12HourFormat ? 'h12' : 'h23',
+        ...(is12HourFormat && { hour12: true })
     };
 
     return date.toLocaleDateString('en', options);

src/routes/(console)/project-[project]/overview/keys/[key]/updateExpirationDate.svelte

@@ -8,7 +8,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../../store';
-    import ExpirationInput from '../expirationInput.svelte';
+    import { ExpirationInput } from '$lib/components';
     import { key } from './store';
 
     let expiration = $key.expire;