feat: add NeEmptyState

src/components/NeEmptyState.vue

@@ -0,0 +1,42 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: Object,
+    default: undefined
+  }
+})
+</script>
+
+<template>
+  <div class="bg-gray-100 px-6 py-7 text-sm dark:bg-gray-800 sm:rounded-md sm:px-8">
+    <div class="flex flex-col items-center">
+      <FontAwesomeIcon
+        v-if="icon"
+        :icon="icon"
+        class="mb-5 h-14 w-14 text-gray-400 dark:text-gray-500"
+      />
+      <div v-if="title" class="text-base font-medium text-gray-700 dark:text-gray-200">
+        {{ title }}
+      </div>
+      <div v-if="description" class="mt-1 text-gray-600 dark:text-gray-400">{{ description }}</div>
+      <div v-if="$slots.default" class="mt-5">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

src/main.ts

@@ -28,6 +28,7 @@ export { default as NeLink } from '@/components/NeLink.vue'
 export { default as NeFormItemLabel } from '@/components/NeFormItemLabel.vue'
 export { default as NeRadioSelection } from '@/components/NeRadioSelection.vue'
 export { default as NePaginator } from '@/components/NePaginator.vue'
+export { default as NeEmptyState } from '@/components/NeEmptyState.vue'
 
 // types export
 export type { NeComboboxOption } from '@/components/NeCombobox.vue'

stories/NeEmptyState.stories.ts

@@ -0,0 +1,74 @@
+//  Copyright (C) 2024 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { NeEmptyState } from '../src/main'
+import { NeButton } from '../src/main'
+import { faUsers } from '@fortawesome/free-solid-svg-icons'
+import { library } from '@fortawesome/fontawesome-svg-core'
+
+library.add(faUsers)
+
+const meta = {
+  title: 'Visual/NeEmptyState',
+  component: NeEmptyState,
+  argTypes: {},
+  args: {
+    title: 'No user',
+    description: 'There is no user configured on the system',
+    icon: undefined
+  } // default values
+} satisfies Meta<typeof NeEmptyState>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const template = '<NeEmptyState v-bind="args" />'
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { NeEmptyState },
+    setup() {
+      return { args }
+    },
+    template: template
+  }),
+  args: {}
+}
+
+export const WithIcon: Story = {
+  render: (args) => ({
+    components: { NeEmptyState },
+    setup() {
+      return { args }
+    },
+    template: template
+  }),
+  args: { icon: faUsers }
+}
+
+const templateWithSlot = `<NeEmptyState v-bind="args">
+                            <NeButton kind="primary">Create user</NeButton>
+                          </NeEmptyState>`
+
+export const WithSlot: Story = {
+  render: (args) => ({
+    components: { NeEmptyState, NeButton },
+    setup() {
+      return { args }
+    },
+    template: templateWithSlot
+  }),
+  args: {}
+}
+
+export const WithSlotAndIcon: Story = {
+  render: (args) => ({
+    components: { NeEmptyState, NeButton },
+    setup() {
+      return { args }
+    },
+    template: templateWithSlot
+  }),
+  args: { icon: faUsers }
+}