From 793b8fe1177547d9858ccbbbc2a8331a94e2a6f0 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Mon, 22 Jan 2024 11:18:55 +0100
Subject: [PATCH 1/3] fix: improve light/dark theme

---
 .storybook/preview.ts    | 1 +
 .storybook/storybook.css | 9 +++++++++
 2 files changed, 10 insertions(+)
 create mode 100644 .storybook/storybook.css

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 20e4a7e..840fc87 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -2,6 +2,7 @@ import type { Preview, VueRenderer } from '@storybook/vue3'
 import { withThemeByClassName } from '@storybook/addon-themes'
 
 import '../src/main.css'
+import './storybook.css'
 
 const preview: Preview = {
   parameters: {
diff --git a/.storybook/storybook.css b/.storybook/storybook.css
new file mode 100644
index 0000000..e5a4660
--- /dev/null
+++ b/.storybook/storybook.css
@@ -0,0 +1,9 @@
+.sb-show-main.sb-main-padded {
+  /* remove default padding from component area */
+  padding: 0;
+}
+
+#storybook-root {
+  /* set background color according to theme */
+  @apply h-screen bg-gray-50 dark:bg-gray-900;
+}

From b688eed703a66c1ae08fbf2cddebb6441ddf6e22 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Mon, 22 Jan 2024 11:20:03 +0100
Subject: [PATCH 2/3] feat: add NeDropdown component

---
 src/components/NeDropdown.vue | 142 ++++++++++++++++++++++++++++++++++
 src/main.ts                   |   1 +
 stories/NeDropdown.stories.ts | 116 +++++++++++++++++++++++++++
 3 files changed, 259 insertions(+)
 create mode 100644 src/components/NeDropdown.vue
 create mode 100644 stories/NeDropdown.stories.ts

diff --git a/src/components/NeDropdown.vue b/src/components/NeDropdown.vue
new file mode 100644
index 0000000..bb52f03
--- /dev/null
+++ b/src/components/NeDropdown.vue
@@ -0,0 +1,142 @@
+<!--
+  Copyright (C) 2024 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
+import NeButton from './NeButton.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faEllipsisVertical as fasEllipsisVertical } from '@fortawesome/free-solid-svg-icons'
+import { ref, watch } from 'vue'
+
+export interface Props {
+  items: NeDropdownItem[]
+  alignToRight: boolean
+  openMenuAriaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: () => [],
+  alignToRight: false,
+  openMenuAriaLabel: 'Open menu'
+})
+
+export interface NeDropdownItem {
+  id: string
+  label?: string
+  icon?: string
+  iconStyle?: string
+  danger?: boolean
+  action?: () => void
+  disabled?: boolean
+}
+
+library.add(fasEllipsisVertical)
+
+function onItemClick(item: NeDropdownItem) {
+  if (!item.disabled && item.action) {
+    item.action()
+  }
+}
+
+function getMenuItemActiveClasses(item: NeDropdownItem) {
+  if (item.danger) {
+    return 'bg-rose-700 text-white dark:bg-rose-600 dark:text-white'
+  } else {
+    return 'bg-gray-100 dark:bg-gray-800'
+  }
+}
+
+const top = ref(0)
+const left = ref(0)
+const right = ref(0)
+const buttonRef = ref<InstanceType<typeof MenuButton> | null>(null)
+
+function calculatePosition() {
+  top.value = buttonRef.value?.$el.getBoundingClientRect().bottom + window.scrollY
+  left.value = buttonRef.value?.$el.getBoundingClientRect().left - window.scrollX
+  right.value =
+    document.documentElement.clientWidth -
+    buttonRef.value?.$el.getBoundingClientRect().right -
+    window.scrollX
+}
+
+watch(
+  () => props.alignToRight,
+  () => {
+    calculatePosition()
+  }
+)
+</script>
+
+<template>
+  <Menu as="div" class="relative inline-block text-left">
+    <MenuButton
+      ref="buttonRef"
+      class="flex items-center text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50"
+      @click="calculatePosition()"
+    >
+      <span class="sr-only">{{ openMenuAriaLabel }}</span>
+      <slot name="button">
+        <!-- default kebab button -->
+        <NeButton class="py-2" kind="tertiary">
+          <font-awesome-icon
+            :icon="['fas', 'ellipsis-vertical']"
+            aria-hidden="true"
+            class="h-5 w-5 shrink-0"
+          />
+        </NeButton>
+      </slot>
+    </MenuButton>
+    <Teleport to="body">
+      <transition
+        enter-active-class="transition ease-out duration-100"
+        enter-from-class="transform opacity-0 scale-95"
+        enter-to-class="transform opacity-100 scale-100"
+        leave-active-class="transition ease-in duration-75"
+        leave-from-class="transform opacity-100 scale-100"
+        leave-to-class="transform opacity-0 scale-95"
+      >
+        <MenuItems
+          :style="[
+            { top: top + 'px' },
+            alignToRight ? { right: right + 'px' } : { left: left + 'px' }
+          ]"
+          class="absolute z-50 mt-2.5 min-w-[10rem] rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none dark:bg-gray-950 dark:ring-gray-500/50"
+        >
+          <template v-for="item in items" :key="item.id">
+            <!-- divider -->
+            <hr
+              v-if="item.id.includes('divider')"
+              class="my-1 border-gray-200 dark:border-gray-700"
+            />
+            <!-- item -->
+            <MenuItem v-else v-slot="{ active }" :disabled="item.disabled">
+              <a
+                :class="[
+                  active ? getMenuItemActiveClasses(item) : '',
+                  'group flex items-center px-4 py-2 text-sm',
+                  item.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+                  item.danger
+                    ? 'text-rose-700 dark:text-rose-500'
+                    : 'text-gray-700 dark:text-gray-50'
+                ]"
+                @click="onItemClick(item)"
+              >
+                <font-awesome-icon
+                  v-if="item.icon"
+                  :icon="[item.iconStyle || 'fas', item.icon]"
+                  aria-hidden="true"
+                  class="mr-2 h-5 w-5 shrink-0"
+                />
+                {{ item.label }}
+              </a>
+            </MenuItem>
+          </template>
+        </MenuItems>
+      </transition>
+    </Teleport>
+  </Menu>
+</template>
diff --git a/src/main.ts b/src/main.ts
index 26e8225..d3abc38 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -22,6 +22,7 @@ export { default as NeTableBody } from '@/components/NeTableBody.vue'
 export { default as NeTableRow } from '@/components/NeTableRow.vue'
 export { default as NeTableCell } from '@/components/NeTableCell.vue'
 export { default as NeCombobox } from '@/components/NeCombobox.vue'
+export { default as NeDropdown } from '@/components/NeDropdown.vue'
 
 // types
 export type { NeComboboxOption } from '@/components/NeCombobox.vue'
diff --git a/stories/NeDropdown.stories.ts b/stories/NeDropdown.stories.ts
new file mode 100644
index 0000000..8518641
--- /dev/null
+++ b/stories/NeDropdown.stories.ts
@@ -0,0 +1,116 @@
+//  Copyright (C) 2024 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { NeDropdown, NeButton } from '../src/main'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faPenToSquare as fasPenToSquare } from '@fortawesome/free-solid-svg-icons'
+import { faFloppyDisk as fasFloppyDisk } from '@fortawesome/free-solid-svg-icons'
+import { faTrashCan as fasTrashCan } from '@fortawesome/free-solid-svg-icons'
+import { faCopy as fasCopy } from '@fortawesome/free-solid-svg-icons'
+import { faChevronDown as fasChevronDown } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+library.add(fasPenToSquare)
+library.add(fasFloppyDisk)
+library.add(fasTrashCan)
+library.add(fasCopy)
+library.add(fasChevronDown)
+
+const meta = {
+  title: 'Visual/NeDropdown',
+  component: NeDropdown,
+  tags: ['autodocs'],
+  args: {
+    items: [
+      {
+        id: 'edit',
+        label: 'Edit',
+        icon: 'pen-to-square',
+        iconStyle: 'fas',
+        action: () => {}
+      },
+      {
+        id: 'copy',
+        label: 'Copy',
+        icon: 'copy',
+        iconStyle: 'fas',
+        action: () => {}
+      },
+      {
+        id: 'save',
+        label: 'Save',
+        icon: 'floppy-disk',
+        iconStyle: 'fas',
+        action: () => {},
+        disabled: true
+      },
+      {
+        id: 'divider1'
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: 'trash-can',
+        iconStyle: 'fas',
+        danger: true,
+        action: () => {}
+      }
+    ],
+    alignToRight: false,
+    openMenuAriaLabel: 'Open menu'
+  }
+} satisfies Meta<typeof NeDropdown>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const template = '<NeDropdown v-bind="args" />'
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { NeDropdown },
+    setup() {
+      return { args }
+    },
+    template: template
+  }),
+  args: {}
+}
+
+const alignToRightTemplate = '<NeDropdown v-bind="args" class="ml-48" />'
+
+export const AlignToRight: Story = {
+  render: (args) => ({
+    components: { NeDropdown },
+    setup() {
+      return { args }
+    },
+    template: alignToRightTemplate
+  }),
+  args: { alignToRight: true }
+}
+
+const withSlotTemplate =
+  '<NeDropdown v-bind="args">\
+    <template #button>\
+      <NeButton>\
+        <template #suffix>\
+          <font-awesome-icon :icon="[\'fas\', \'chevron-down\']" class="h-4 w-4" aria-hidden="true" />\
+        </template>\
+        Menu\
+      </NeButton>\
+    </template>\
+  </NeDropdown>'
+
+export const WithSlot: Story = {
+  render: (args) => ({
+    components: { NeDropdown, NeButton, FontAwesomeIcon },
+    setup() {
+      return { args }
+    },
+    template: withSlotTemplate
+  }),
+  args: {}
+}

From 8731287bcae930e1d0a9e4f3991c4bc3a78bb708 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Mon, 22 Jan 2024 14:49:21 +0100
Subject: [PATCH 3/3] feat: add NeCard component

---
 src/components/NeCard.vue | 112 +++++++++++++++++++
 src/main.ts               |   1 +
 stories/NeCard.stories.ts | 222 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 335 insertions(+)
 create mode 100644 src/components/NeCard.vue
 create mode 100644 stories/NeCard.stories.ts

diff --git a/src/components/NeCard.vue b/src/components/NeCard.vue
new file mode 100644
index 0000000..2711e5c
--- /dev/null
+++ b/src/components/NeCard.vue
@@ -0,0 +1,112 @@
+<!--
+  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'
+import NeSkeleton from './NeSkeleton.vue'
+import NeInlineNotification from './NeInlineNotification.vue'
+import NeDropdown, { type NeDropdownItem } from './NeDropdown.vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: Array<string>,
+    default: () => []
+  },
+  loading: {
+    type: Boolean
+  },
+  skeletonLines: {
+    type: Number,
+    default: 4
+  },
+  errorTitle: {
+    type: String,
+    default: ''
+  },
+  errorDescription: {
+    type: String,
+    default: ''
+  },
+  menuItems: {
+    type: Array<NeDropdownItem>,
+    default: () => []
+  },
+  alternateBackground: {
+    type: Boolean
+  }
+})
+
+defineEmits(['titleClick'])
+</script>
+
+<template>
+  <div
+    :class="[
+      `overflow-hidden px-4 py-5 text-sm text-gray-700 dark:text-gray-200 sm:rounded-lg sm:px-6 sm:shadow`,
+      props.alternateBackground ? 'bg-gray-50 dark:bg-gray-900' : 'bg-white dark:bg-gray-950'
+    ]"
+  >
+    <!-- header -->
+    <div class="flex justify-between">
+      <!-- title -->
+      <h3
+        v-if="title || $slots.title"
+        class="mb-3 font-semibold leading-6 text-gray-900 dark:text-gray-50"
+      >
+        <span v-if="title">
+          {{ title }}
+        </span>
+        <slot v-if="$slots.title" name="title"></slot>
+        <span v-if="$slots.titleTooltip" class="ml-1">
+          <slot name="titleTooltip"></slot>
+        </span>
+      </h3>
+      <!-- top-right slot (e.g. for kebab menu) -->
+      <div
+        v-if="$slots.topRight || menuItems?.length"
+        class="relative -right-1.5 -top-1.5 flex items-center"
+      >
+        <div v-if="$slots.topRight">
+          <slot name="topRight"></slot>
+        </div>
+        <!-- top-right menu -->
+        <div v-if="menuItems?.length">
+          <NeDropdown :items="menuItems" :align-to-right="true" />
+        </div>
+      </div>
+    </div>
+    <!-- description and content -->
+    <div class="flex flex-row items-center justify-between">
+      <div class="grow">
+        <NeSkeleton v-if="loading" :lines="skeletonLines"></NeSkeleton>
+        <NeInlineNotification
+          v-else-if="errorTitle"
+          kind="error"
+          :title="errorTitle"
+          :description="errorDescription"
+        />
+        <template v-else>
+          <div v-if="description" class="mb-3 text-gray-500 dark:text-gray-400">
+            {{ description }}
+          </div>
+          <slot></slot>
+        </template>
+      </div>
+      <FontAwesomeIcon
+        v-if="icon?.length"
+        :icon="icon"
+        class="ml-4 h-6 w-6 shrink-0 text-gray-400 dark:text-gray-600"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/main.ts b/src/main.ts
index d3abc38..7bb2ff1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -23,6 +23,7 @@ export { default as NeTableRow } from '@/components/NeTableRow.vue'
 export { default as NeTableCell } from '@/components/NeTableCell.vue'
 export { default as NeCombobox } from '@/components/NeCombobox.vue'
 export { default as NeDropdown } from '@/components/NeDropdown.vue'
+export { default as NeCard } from '@/components/NeCard.vue'
 
 // types
 export type { NeComboboxOption } from '@/components/NeCombobox.vue'
diff --git a/stories/NeCard.stories.ts b/stories/NeCard.stories.ts
new file mode 100644
index 0000000..6356b06
--- /dev/null
+++ b/stories/NeCard.stories.ts
@@ -0,0 +1,222 @@
+//  Copyright (C) 2024 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { NeCard, NeTooltip, NeButton } from '../src/main'
+import { faHeart } from '@fortawesome/free-solid-svg-icons'
+import { library } from '@fortawesome/fontawesome-svg-core'
+
+library.add(faHeart)
+
+const meta = {
+  title: 'Visual/NeCard',
+  component: NeCard,
+  tags: ['autodocs'],
+  args: {
+    title: 'Card title',
+    description: '',
+    icon: [],
+    loading: false,
+    skeletonLines: 4,
+    errorTitle: '',
+    errorDescription: '',
+    menuItems: [],
+    alternateBackground: false
+  }
+} satisfies Meta<typeof NeCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultTemplate =
+  '<NeCard v-bind="args">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</NeCard>'
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: {}
+}
+
+const titleSlotTemplate = `<NeCard v-bind="args">
+  <template #title>
+    <span>Card title</span>
+    <span class='ml-1 text-gray-500 dark:text-gray-400'>
+      (with slot)
+    </span>
+  </template>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+</NeCard>`
+
+export const TitleSlot: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: titleSlotTemplate
+  }),
+  args: { title: '' }
+}
+
+export const WithDescription: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: { description: 'Card description' }
+}
+
+export const WithIcon: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: { icon: ['fas', 'heart'] }
+}
+
+export const Loading: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: { loading: true }
+}
+
+export const Error: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: {
+    errorTitle: 'Cannot retrieve data',
+    errorDescription: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+  }
+}
+
+const templateWithTooltip =
+  '<NeCard v-bind="args">\
+      <template #titleTooltip>\
+        <NeTooltip>\
+          <template #content>Tooltip</template>\
+        </NeTooltip>\
+      </template>\
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\
+    </NeCard>'
+
+export const WithTooltip: Story = {
+  render: (args) => ({
+    components: { NeCard, NeTooltip },
+    setup() {
+      return { args }
+    },
+    template: templateWithTooltip
+  }),
+  args: {}
+}
+
+export const WithMenu: Story = {
+  render: (args) => ({
+    components: { NeCard },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: {
+    menuItems: [
+      {
+        id: 'edit',
+        label: 'Edit'
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        danger: true
+      }
+    ]
+  }
+}
+
+const templateWithTopRightSlot = `<NeCard v-bind="args">
+  <template #topRight>
+    <NeButton kind='tertiary'>Button</NeButton>
+  </template>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</NeCard>`
+
+export const WithTopRightSlot: Story = {
+  render: (args) => ({
+    components: { NeCard, NeButton },
+    setup() {
+      return { args }
+    },
+    template: templateWithTopRightSlot
+  }),
+  args: {}
+}
+
+export const WithMenuAndTopRightSlot: Story = {
+  render: (args) => ({
+    components: { NeCard, NeButton },
+    setup() {
+      return { args }
+    },
+    template: templateWithTopRightSlot
+  }),
+  args: {
+    menuItems: [
+      {
+        id: 'edit',
+        label: 'Edit'
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        danger: true
+      }
+    ]
+  }
+}
+
+const alternateBackgroundTemplate = `
+  <div class="bg-white dark:bg-gray-950 p-12 flex flex-col text-sm gap-6">
+    <div class="text-gray-700 dark:text-gray-200">
+      Alternate background is useful to get contrast when the card is placed in a container with the same background as the default card background
+    </div>
+    <NeCard v-bind="args" :alternateBackground="false">
+      Card with default background
+    </NeCard>
+    <NeCard v-bind="args">
+      Card with alternate background
+    </NeCard>
+  </div>`
+
+export const AlternateBackground: Story = {
+  render: (args) => ({
+    components: { NeCard, NeButton },
+    setup() {
+      return { args }
+    },
+    template: alternateBackgroundTemplate
+  }),
+  args: {
+    alternateBackground: true
+  }
+}