feat: add lib functions (#23)

package.json

@@ -54,6 +54,8 @@
     "@fortawesome/vue-fontawesome": "^3.0.5",
     "@headlessui/vue": "^1.7.16",
     "@vueuse/core": "^10.7.0",
+    "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.0",
     "lodash-es": "^4.17.21",
     "uuid": "^9.0.1",
     "vue": "^3.3.4",

src/components/NeCheckbox.vue

@@ -8,11 +8,26 @@ import { computed } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
 
 const props = defineProps({
-  modelValue: Boolean,
-  id: String,
-  label: String,
-  disableSelectOnLabel: Boolean,
-  disabled: Boolean
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  id: {
+    type: String,
+    default: ''
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  disableSelectOnLabel: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -36,7 +51,7 @@ const model = computed({
         v-model="model"
         :aria-describedby="componentId + '-description'"
         :disabled="disabled"
-        class="h-5 w-5 rounded border-gray-300 text-primary-700 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 sm:h-4 sm:w-4 dark:border-gray-500 dark:text-primary-500 dark:focus:ring-primary-300 dark:focus:ring-offset-primary-950"
+        class="h-5 w-5 rounded border-gray-300 text-primary-700 focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:text-primary-500 dark:focus:ring-primary-300 dark:focus:ring-offset-primary-950 sm:h-4 sm:w-4"
         type="checkbox"
         v-bind="$attrs"
       />

src/components/NeRadioSelection.vue

@@ -23,15 +23,16 @@ type RadioOption = {
 
 const props = defineProps({
   modelValue: {
-    type: String
+    type: String,
+    default: ''
   },
   label: {
     required: true,
     type: String
   },
   description: {
-    required: false,
-    type: String
+    type: String,
+    default: ''
   },
   options: {
     required: true,
@@ -126,16 +127,16 @@ function focus() {
       <button
         v-for="option in options"
         :key="option.id"
+        ref="inputRef"
         type="button"
         :class="[
           `${cardClasses[cardSize]}`,
           value == option.id ? 'ring-2 ring-primary-700 dark:ring-primary-500' : ''
         ]"
         class="relative flex w-full items-center overflow-hidden rounded-md border text-gray-700 shadow-sm hover:bg-gray-200/70 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-offset-2 focus:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-500 dark:text-gray-50 dark:hover:bg-gray-600/30 dark:focus:ring-primary-500 dark:focus:ring-offset-primary-950"
         role="button"
-        @click="value = option.id"
         :disabled="option.disabled || disabled"
-        ref="inputRef"
+        @click="value = option.id"
       >
         <FontAwesomeIcon
           v-if="option.icon"
@@ -169,13 +170,13 @@ function focus() {
           <div v-for="option in options" :key="option.id" class="flex items-center">
             <input
               :id="option.id"
+              ref="inputRef"
               v-model="value"
               :checked="value == option.id"
               :value="option.id"
               class="peer border-gray-300 text-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-950 dark:text-primary-500 checked:dark:bg-primary-500 dark:focus:ring-primary-300 focus:dark:ring-primary-200 focus:dark:ring-offset-gray-900"
               type="radio"
               :disabled="option.disabled || disabled"
-              ref="inputRef"
             />
             <label
               :for="option.id"

src/components/NeSideDrawer.vue

@@ -49,7 +49,7 @@ function closeDrawer() {
           leave-to="translate-x-full"
         >
           <DialogPanel
-            class="3xl:w-[35rem] relative ml-16 flex w-[80vw] flex-1 overflow-y-auto bg-gray-50 text-gray-700 shadow-[0px_20px_40px_0_rgba(0,0,0,0.2)] sm:w-[25rem] lg:w-[30rem] dark:bg-gray-900 dark:text-gray-100 dark:shadow-[0px_20px_40px_0_rgba(0,0,0,0.6)]"
+            class="3xl:w-[35rem] relative ml-16 flex w-[80vw] flex-1 overflow-y-auto bg-gray-50 text-gray-700 shadow-[0px_20px_40px_0_rgba(0,0,0,0.2)] dark:bg-gray-900 dark:text-gray-100 dark:shadow-[0px_20px_40px_0_rgba(0,0,0,0.6)] sm:w-[25rem] lg:w-[30rem]"
           >
             <TransitionChild
               v-if="!title"

src/lib/storage.ts

@@ -0,0 +1,72 @@
+//  Copyright (C) 2024 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+/**
+ * Save a string or a JSON object to local storage
+ *
+ * @param name name of the entry
+ * @param value value of the entry
+ */
+export const saveToStorage = (name: string, value: any) => {
+  if (typeof value !== 'string') {
+    value = JSON.stringify(value)
+  }
+  localStorage.setItem(name, value)
+}
+
+/**
+ * Get a JSON object from local storage
+ *
+ * @param name name of the entry
+ * @returns a JSON object
+ */
+export const getJsonFromStorage = (name: string) => {
+  const item = localStorage.getItem(name)
+
+  if (item) {
+    return JSON.parse(item)
+  }
+}
+
+/**
+ * Get a string from local storage
+ *
+ * @param name name of the entry
+ * @returns the string value of the entry
+ */
+export const getStringFromStorage = (name: string) => {
+  return localStorage.getItem(name)
+}
+
+export const deleteFromStorage = (name: string) => {
+  localStorage.removeItem(name)
+}
+
+/**
+ * Save a user preference to local storage entry "preferences-<username>"
+ *
+ * @param preferenceName name of the preference
+ * @param preferenceValue string or JSON object
+ * @param currentUsername username currently logged in
+ */
+export const savePreference = (
+  preferenceName: string,
+  preferenceValue: any,
+  currentUsername: string
+) => {
+  const preferences = getJsonFromStorage(`preferences-${currentUsername}`) || {}
+  preferences[preferenceName] = preferenceValue
+  saveToStorage(`preferences-${currentUsername}`, preferences)
+}
+
+/**
+ * Get a user preference from the local storage entry "preferences-<username>"
+ *
+ * @param preferenceName name of the preference
+ * @param currentUsername username currently logged in
+ * @returns a string or a JSON object
+ */
+export const getPreference = (preferenceName: string, currentUsername: string) => {
+  const preferences = getJsonFromStorage(`preferences-${currentUsername}`) || {}
+  return preferences[preferenceName]
+}

src/main.ts

@@ -42,3 +42,18 @@ export {
   byteFormat1000,
   kbpsFormat
 } from '@/lib/utils'
+export {
+  formatDateLoc,
+  formatInTimeZoneLoc,
+  getDateFnsLocale,
+  formatDurationLoc,
+  humanDistanceToNowLoc
+} from '@/lib/dateTime'
+export {
+  saveToStorage,
+  getJsonFromStorage,
+  getStringFromStorage,
+  deleteFromStorage,
+  savePreference,
+  getPreference
+} from '@/lib/storage'

stories/NeProgressBar.stories.ts

@@ -75,7 +75,7 @@ export const WithLabelAndProgress: Story = {
   args: { progress: 75, label: 'Task progress', showProgress: true }
 }
 
-export const color: Story = {
+export const Color: Story = {
   render: (args) => ({
     components: { NeProgressBar },
     setup() {
@@ -86,7 +86,7 @@ export const color: Story = {
   args: { progress: 75, color: 'blue' }
 }
 
-export const customColor: Story = {
+export const CustomColor: Story = {
   render: (args) => ({
     components: { NeProgressBar },
     setup() {
@@ -97,7 +97,7 @@ export const customColor: Story = {
   args: { progress: 75, color: 'custom', customColorClasses: 'bg-fuchsia-600 dark:bg-fuchsia-500' }
 }
 
-export const indeterminate: Story = {
+export const Indeterminate: Story = {
   render: (args) => ({
     components: { NeProgressBar },
     setup() {

stories/NeSideDrawer.stories.ts

@@ -7,7 +7,7 @@ import { NeSideDrawer } from '../src/main'
 const meta = {
   title: 'Visual/NeSideDrawer',
   args: {
-    isShown: false,
+    isShown: true,
     title: 'Drawer title',
     closeAriaLabel: 'Close side drawer'
   }