@nexxtmove/ui 0.1.22 → 0.1.23

package/src/components/Button/Button.stories.ts

@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Button from './Button.vue'
+
+export default {
+  title: 'Components/Atoms/Button',
+  component: Button,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=167-357&t=CbHvOQfEMIr7M5mO-4',
+    },
+  },
+} satisfies Meta<typeof Button>
+
+type Story = StoryObj<typeof Button>
+
+export const Primary: Story = {
+  args: {
+    default: 'Button',
+    variant: 'primary',
+    iconRight: false,
+    disabled: false,
+    loading: false,
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    default: 'Secondary Button',
+  },
+}
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    default: 'Success Button',
+  },
+}
+
+export const Danger: Story = {
+  args: {
+    variant: 'danger',
+    default: 'Danger Button',
+  },
+}
+
+export const Link: Story = {
+  args: {
+    variant: 'link',
+    default: 'Link Button',
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    icon: 'star',
+    default: 'With Icon',
+  },
+}
+
+export const WithIconRight: Story = {
+  args: {
+    icon: 'arrow-right',
+    iconRight: true,
+    default: 'Next Step',
+  },
+}
+
+export const WithIconSecondary: Story = {
+  args: {
+    variant: 'secondary',
+    icon: 'download',
+    default: 'Download',
+  },
+}
+
+export const WithIconSuccess: Story = {
+  args: {
+    variant: 'success',
+    icon: 'check',
+    default: 'Success Button',
+  },
+}
+
+export const WithIconDanger: Story = {
+  args: {
+    variant: 'danger',
+    icon: 'trash',
+    default: 'Danger Button',
+  },
+}
+
+export const WithIconLink: Story = {
+  args: {
+    variant: 'link',
+    icon: 'download',
+    default: 'Download',
+  },
+}
+
+export const IconOnly: Story = {
+  args: {
+    icon: 'plus',
+  },
+}
+
+export const IconOnlySecondary: Story = {
+  args: {
+    variant: 'secondary',
+    icon: 'plus',
+  },
+}
+
+export const IconOnlySuccess: Story = {
+  args: {
+    variant: 'success',
+    icon: 'check',
+  },
+}
+
+export const IconOnlyDanger: Story = {
+  args: {
+    variant: 'danger',
+    icon: 'trash',
+  },
+}
+
+export const IconOnlyLink: Story = {
+  args: {
+    variant: 'link',
+    icon: 'plus',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    default: 'Disabled',
+    disabled: true,
+  },
+}
+
+export const DisabledSecondary: Story = {
+  args: {
+    variant: 'secondary',
+    default: 'Secondary Disabled',
+    disabled: true,
+  },
+}
+
+export const DisabledSuccess: Story = {
+  args: {
+    variant: 'success',
+    default: 'Success Disabled',
+    disabled: true,
+  },
+}
+
+export const DisabledDanger: Story = {
+  args: {
+    variant: 'danger',
+    default: 'Danger Disabled',
+    disabled: true,
+  },
+}
+
+export const DisabledLink: Story = {
+  args: {
+    variant: 'link',
+    default: 'Link Disabled',
+    disabled: true,
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    default: 'Loading',
+    loading: true,
+  },
+}
+
+export const LoadingSecondary: Story = {
+  args: {
+    variant: 'secondary',
+    default: 'Loading',
+    loading: true,
+  },
+}
+
+export const LoadingSuccess: Story = {
+  args: {
+    variant: 'success',
+    default: 'Loading',
+    loading: true,
+  },
+}
+
+export const LoadingDanger: Story = {
+  args: {
+    variant: 'danger',
+    default: 'Loading',
+    loading: true,
+  },
+}
+
+export const LoadingLink: Story = {
+  args: {
+    variant: 'link',
+    default: 'Link Button',
+    loading: true,
+  },
+}

package/src/components/Button/Button.test.ts

@@ -0,0 +1,318 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Button from './Button.vue'
+
+describe('Button', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.text()).toBe('Click me')
+  })
+
+  it('renders complex slot content', () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: '<span>Complex</span> <span>Text</span>',
+      },
+    })
+
+    expect(wrapper.html()).toContain('<span>Complex</span>')
+    expect(wrapper.html()).toContain('<span>Text</span>')
+  })
+
+  it('applies primary variant by default', () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('button-primary')
+  })
+
+  it('applies secondary variant when specified', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'secondary',
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('button-secondary')
+  })
+
+  it('applies success variant when specified', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'success',
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('button-success')
+  })
+
+  it('applies danger variant when specified', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'danger',
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('button-danger')
+  })
+
+  it('applies link variant when specified', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'link',
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('button-link')
+  })
+
+  it('applies link variant special classes', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'link',
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    const span = wrapper.find('span')
+    expect(span.classes()).toContain('body-link')
+    expect(span.classes()).toContain('underline-offset-1')
+    expect(span.classes()).toContain('hover:underline-offset-2')
+  })
+
+  it('does not apply hover underline offset when link is disabled', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'link',
+        disabled: true,
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    const span = wrapper.find('span')
+    expect(span.classes()).not.toContain('hover:underline-offset-2')
+  })
+
+  it('renders icon when icon prop is provided', () => {
+    const wrapper = mount(Button, {
+      props: {
+        icon: 'star',
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    const icon = wrapper.find('i')
+    expect(icon.exists()).toBe(true)
+    expect(icon.classes()).toContain('fa-light')
+    expect(icon.classes()).toContain('fa-star')
+  })
+
+  it('does not render icon when icon prop is not provided', () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    const icon = wrapper.find('i')
+    expect(icon.exists()).toBe(false)
+  })
+
+  it('positions icon on the right when iconRight is true', () => {
+    const wrapper = mount(Button, {
+      props: {
+        icon: 'arrow-right',
+        iconRight: true,
+      },
+      slots: {
+        default: 'Next',
+      },
+    })
+
+    const icon = wrapper.find('i')
+    expect(icon.classes()).toContain('order-last')
+  })
+
+  it('positions icon on the left by default', () => {
+    const wrapper = mount(Button, {
+      props: {
+        icon: 'arrow-right',
+      },
+      slots: {
+        default: 'Back',
+      },
+    })
+
+    const icon = wrapper.find('i')
+    expect(icon.classes()).not.toContain('order-last')
+  })
+
+  it('renders as button type="button"', () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.element.tagName).toBe('BUTTON')
+    expect(wrapper.attributes('type')).toBe('button')
+  })
+
+  it('disables button when disabled prop is true', () => {
+    const wrapper = mount(Button, {
+      props: {
+        disabled: true,
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.attributes('disabled')).toBeDefined()
+    expect(wrapper.classes()).toContain('disabled:cursor-not-allowed')
+  })
+
+  it('applies disabled styles for primary variant', () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'primary',
+        disabled: true,
+      },
+      slots: {
+        default: 'Click me',
+      },
+    })
+
+    expect(wrapper.attributes()).toHaveProperty('disabled')
+  })
+
+  it('hides icon and slot content when loading', () => {
+    const wrapper = mount(Button, {
+      props: {
+        loading: true,
+        icon: 'star',
+      },
+      slots: {
+        default: 'Submit',
+      },
+    })
+
+    const starIcon = wrapper.find('.fa-star')
+    expect(starIcon.classes()).toContain('opacity-0')
+
+    const label = wrapper.find('span')
+    expect(label.classes()).toContain('opacity-0')
+  })
+
+  it('removes hover effects when loading or disabled in link variant', async () => {
+    const wrapper = mount(Button, {
+      props: {
+        variant: 'link',
+        loading: true,
+      },
+      slots: {
+        default: 'Link',
+      },
+    })
+
+    expect(wrapper.find('span').classes()).not.toContain('hover:underline-offset-2')
+
+    await wrapper.setProps({ loading: false, disabled: true })
+    expect(wrapper.find('span').classes()).not.toContain('hover:underline-offset-2')
+
+    await wrapper.setProps({ disabled: false })
+    expect(wrapper.find('span').classes()).toContain('hover:underline-offset-2')
+  })
+
+  it('renders icon-only button without padding', () => {
+    const wrapper = mount(Button, {
+      props: {
+        icon: 'star',
+      },
+    })
+
+    expect(wrapper.classes()).toContain('w-10')
+    expect(wrapper.classes()).not.toContain('px-4')
+  })
+
+  it('displays spinner icon when loading is true', () => {
+    const wrapper = mount(Button, {
+      props: {
+        loading: true,
+      },
+    })
+
+    const icon = wrapper.find('i')
+    expect(icon.exists()).toBe(true)
+    expect(icon.classes()).toContain('fa-spinner-third')
+    expect(icon.classes()).toContain('fa-spin')
+  })
+
+  it('disables button when loading is true', () => {
+    const wrapper = mount(Button, {
+      props: {
+        loading: true,
+      },
+    })
+
+    expect(wrapper.classes()).toContain('pointer-events-none')
+  })
+
+  it('set the button type prop', async () => {
+    const wrapper = mount(Button)
+
+    expect(wrapper.attributes('type')).toBe('button')
+
+    await wrapper.setProps({ buttonType: 'submit' })
+    expect(wrapper.attributes('type')).toBe('submit')
+
+    await wrapper.setProps({ buttonType: 'reset' })
+    expect(wrapper.attributes('type')).toBe('reset')
+  })
+
+  it('no animated span whitout default slot', async () => {
+    const wrapper = mount(Button)
+
+    const slotSpanWrapper = wrapper.find('span')
+
+    expect(slotSpanWrapper.exists()).toBe(false)
+  })
+
+  it('has animated span with default slot', async () => {
+    const wrapper = mount(Button, {
+      slots: {
+        default: 'text',
+      },
+    })
+
+    const slotSpanWrapper = wrapper.find('span')
+
+    expect(slotSpanWrapper.exists()).toBe(true)
+  })
+})

package/src/components/Button/Button.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import Icon from '../Icon/Icon.vue'
+
+interface NexxtButtonProps {
+  variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'link'
+  icon?: InstanceType<typeof Icon>['name']
+  iconRight?: boolean
+  disabled?: boolean
+  loading?: boolean
+  buttonType?: 'button' | 'submit' | 'reset'
+}
+
+defineOptions({
+  name: 'NexxtButton',
+})
+
+const {
+  variant = 'primary',
+  buttonType = 'button',
+  loading = false,
+} = defineProps<NexxtButtonProps>()
+</script>
+
+<template>
+  <button
+    :type="buttonType"
+    :disabled="disabled"
+    :class="[
+      'button relative flex h-10 cursor-pointer items-center justify-center overflow-hidden rounded-lg transition-colors duration-200 focus-visible:outline-3 disabled:cursor-not-allowed',
+      `button-${variant}`,
+      $slots.default ?? 'w-10',
+      !$slots.default && icon ? 'aspect-square px-0' : '',
+      loading ? 'pointer-events-none' : '',
+    ]"
+    :data-variant="variant"
+  >
+    <Icon
+      v-if="icon"
+      :name="icon"
+      class="transition-all duration-200"
+      :class="{ 'order-last': iconRight, 'opacity-0': loading }"
+    />
+    <span
+      v-if="$slots.default"
+      :class="[
+        'inline-block transition-all duration-200',
+        { 'opacity-0': loading },
+        variant === 'link' ? 'body-link underline-offset-1' : 'body-normal',
+        variant === 'link' && !loading && !disabled ? 'hover:underline-offset-2' : '',
+      ]"
+    >
+      <slot />
+    </span>
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-200"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div v-if="loading" :class="['absolute inset-0 flex items-center justify-center rounded-lg']">
+        <Icon name="spinner-third" type="light" class="fa-spin absolute text-sm" />
+      </div>
+    </Transition>
+  </button>
+</template>

package/src/components/Calendar/Calendar.stories.ts

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import { enUS } from 'date-fns/locale'
+import Calendar from './Calendar.vue'
+export default {
+  title: 'Components/Atoms/Calendar',
+  component: Calendar,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=713-720&t=CbHvOQfEMIr7M5mO-4',
+    },
+  },
+} satisfies Meta<typeof Calendar>
+
+type Story = StoryObj<typeof Calendar>
+
+export const Default: Story = {
+  args: {},
+}
+
+export const WithSelectedDate: Story = {
+  args: {
+    modelValue: new Date(),
+  },
+}
+
+export const WithMarkedDates: Story = {
+  args: {
+    markedDates: [
+      new Date(new Date().getFullYear(), new Date().getMonth(), 5),
+      new Date(new Date().getFullYear(), new Date().getMonth(), 12),
+      new Date(new Date().getFullYear(), new Date().getMonth(), 20),
+    ],
+  },
+}
+
+export const WithDisabledDates: Story = {
+  args: {
+    disabledDates: [
+      new Date(new Date().getFullYear(), new Date().getMonth(), 10),
+      new Date(new Date().getFullYear(), new Date().getMonth(), 11),
+      new Date(new Date().getFullYear(), new Date().getMonth(), 12),
+    ],
+  },
+}
+
+export const WithDateRange: Story = {
+  args: {
+    minDate: new Date(new Date().getFullYear(), new Date().getMonth(), 5),
+    maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 20),
+  },
+}
+
+export const WithMonthYearPicker: Story = {
+  args: {
+    monthYearPicker: true,
+  },
+}
+
+export const EnglishLocale: Story = {
+  args: {
+    locale: enUS,
+  },
+}
+
+export const Playground: Story = {
+  render: (args) => ({
+    components: { Calendar },
+    setup() {
+      const selected = ref<Date | null>(null)
+      return { args, selected }
+    },
+    template: `
+      <Calendar
+        v-bind="args"
+        v-model="selected"
+      />
+      <p v-if="selected" style="margin-top: 12px; font-size: 13px; color: #555; display: block;">
+        Geselecteerd: {{ selected.toLocaleDateString('nl-NL') }}
+      </p>
+    `,
+  }),
+  args: {
+    monthYearPicker: true,
+    markedDates: [
+      new Date(new Date().getFullYear(), new Date().getMonth(), 8),
+      new Date(new Date().getFullYear(), new Date().getMonth(), 15),
+    ],
+  },
+}