@antify/ui 1.0.0

package/dist/components/AntTag.vue

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import {computed, onMounted} from 'vue';
+import {handleEnumValidation} from '../handler';
+import {faCircleXmark, type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {AntTagSize, TagState} from './__types/AntTag.types';
+import AntIcon from './AntIcon.vue';
+import {IconSize} from './__types/AntIcon.types';
+
+defineEmits(['close']);
+const props = withDefaults(defineProps<{
+  state?: TagState,
+  size?: AntTagSize;
+  iconLeft?: IconDefinition;
+  dismiss?: boolean
+}>(), {
+  size: AntTagSize.md,
+  state: TagState.base,
+  dismiss: false
+});
+
+const classes = computed(() => {
+  const variants: Record<TagState, string> = {
+    [TagState.danger]: 'bg-danger-500 text-danger-500-font',
+    [TagState.info]: 'bg-info-500 text-info-500-font',
+    [TagState.primary]: 'bg-primary-500 text-primary-500-font',
+    [TagState.secondary]: 'bg-secondary-500 text-secondary-500-font',
+    [TagState.base]: 'bg-neutral-300 text-neutral-300-font',
+    [TagState.success]: 'bg-success-500 text-success-500-font',
+    [TagState.warning]: 'bg-warning-500 text-warning-500-font',
+  };
+  return {
+    'rounded-md inline-flex items-center': true,
+    'px-1 py-0.5 text-xs gap-0.5': props.size === AntTagSize.xs3,
+    'px-1.5 py-1 text-xs gap-1': props.size === AntTagSize.xs2,
+    'px-2 py-1.5 text-xs gap-1.5': props.size === AntTagSize.xs,
+    'px-2 py-1.5 text-sm gap-1.5': props.size === AntTagSize.sm,
+    'px-2.5 py-2 text-sm gap-2': props.size === AntTagSize.md,
+    'px-3 py-2.5 text-sm gap-2.5': props.size === AntTagSize.lg,
+    [variants[props.state]]: true,
+  };
+});
+const getIconSize = computed(() => {
+  if (props.size === AntTagSize.xs || props.size === AntTagSize.xs2 || props.size === AntTagSize.xs3) {
+    return IconSize.xs;
+  } else {
+    return IconSize.sm;
+  }
+});
+const iconState = computed(() => {
+  switch (props.state) {
+    case TagState.info:
+      return 'text-info-500-font';
+    case TagState.success:
+      return 'text-success-500-font';
+    case TagState.warning:
+      return 'text-warning-500-font';
+    case TagState.danger:
+      return 'text-danger-500-font';
+    case TagState.primary:
+      return 'text-primary-500-font';
+    case TagState.secondary:
+      return 'text-secondary-500-font';
+    default:
+      return 'text-neutral-300-font';
+  }
+});
+const iconWrapperClass = computed(() => {
+  return {
+    'w-4 h-4': props.size === AntTagSize.xs2 || props.size === AntTagSize.xs,
+    'w-5 h-5': props.size === AntTagSize.sm || props.size === AntTagSize.md || props.size === AntTagSize.lg
+  };
+});
+
+onMounted(() => {
+  handleEnumValidation(props.size, AntTagSize, 'size');
+  handleEnumValidation(props.state, TagState, 'state');
+});
+</script>
+
+<template>
+  <span
+    :class="classes"
+    data-e2e="tag"
+  >
+    <span
+      v-if="iconLeft"
+      class="inline-flex items-center justify-center"
+      :class="iconWrapperClass"
+    >
+      <AntIcon
+        :icon="iconLeft"
+        :size="getIconSize"
+        :color="iconState"
+      >
+      </anticon>
+    </span>
+
+    <slot/>
+
+    <span
+      v-if="dismiss"
+      class="inline-flex items-center justify-center"
+      :class="iconWrapperClass"
+    >
+      <AntIcon
+        :icon="faCircleXmark"
+        :size="getIconSize"
+        :color="iconState"
+        class="cursor-pointer"
+        @click="() => $emit('close')"
+      />
+    </span>
+  </span>
+</template>

package/dist/components/AntToast.vue

@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import {computed, onMounted, useSlots} from 'vue';
+import {handleEnumValidation} from '../handler';
+import {
+  faCheckCircle,
+  faExclamationCircle,
+  faExclamationTriangle,
+  faInfoCircle,
+  faXmark
+} from '@fortawesome/free-solid-svg-icons';
+import AntIcon from './AntIcon.vue';
+import AntButton from './buttons/AntButton.vue';
+import {State, InputState, Size} from '../enums';
+import {IconSize} from './__types/AntIcon.types';
+
+const props = withDefaults(defineProps<{
+  title?: string,
+  state?: InputState,
+  showUndo?: boolean,
+  icon?: boolean
+}>(), {
+  state: InputState.base,
+  showUndo: false,
+  icon: true
+});
+
+const icons = {
+  [InputState.base]: faInfoCircle,
+  [InputState.info]: faInfoCircle,
+  [InputState.danger]: faExclamationCircle,
+  [InputState.warning]: faExclamationTriangle,
+  [InputState.success]: faCheckCircle,
+};
+
+const _icon = computed(() => icons[props.state]);
+const classes = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'bg-neutral-100 border-neutral-500 text-neutral-500',
+    [InputState.danger]: 'bg-danger-100 border-danger-500 text-danger-500',
+    [InputState.info]: 'bg-info-100 border-info-500 text-info-500',
+    [InputState.success]: 'bg-success-100 border-success-500 text-success-500',
+    [InputState.warning]: 'bg-warning-100 border-warning-500 text-warning-500',
+  };
+
+  return {
+    'inline-flex flex-col gap-2 rounded-md p-2 border transition-colors shadow-md': true,
+    [variants[props.state]]: true,
+  };
+});
+const hasDefaultSlot = computed(() => useSlots()['default'] || false);
+const iconColor = computed(() => {
+  const variants = {
+    [InputState.base]: 'text-neutral-100-font',
+    [InputState.danger]: 'text-danger-500',
+    [InputState.info]: 'text-info-500',
+    [InputState.success]: 'text-success-500',
+    [InputState.warning]: 'text-warning-500',
+  };
+
+  return variants[props.state];
+});
+
+onMounted(() => {
+  handleEnumValidation(props.state, InputState, 'state');
+});
+</script>
+
+<template>
+  <div
+    :class="classes"
+    data-e2e="toast"
+    :data-e2e-state="props.state"
+  >
+    <div class="inline-flex items-center justify-between w-content gap-2">
+      <div class="inline-flex items-center gap-2">
+        <AntIcon
+          v-if="icon"
+          :icon="_icon"
+          :color="iconColor"
+          :size="IconSize.sm"
+        />
+
+        <div
+          class="whitespace-pre text-sm"
+          :class="{'font-semibold': hasDefaultSlot}"
+        >
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </div>
+      </div>
+
+      <AntIcon
+        :icon="faXmark"
+        class="cursor-pointer"
+        :color="iconColor"
+        @click="() => $emit('close')"
+      />
+    </div>
+
+    <div v-if="hasDefaultSlot">
+      <slot/>
+    </div>
+
+    <div
+      v-if="showUndo"
+      class="flex justify-end"
+    >
+      <AntButton
+        :state="props.state as unknown as State"
+        :size="Size.md"
+        filled
+        @click="() => $emit('undo')"
+      >
+        undo
+      </AntButton>
+    </div>
+  </div>
+</template>

package/dist/components/AntToaster.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import {computed} from 'vue';
+import AntToast from './AntToast.vue';
+import {CornerPosition} from '../enums/Position.enum';
+import type {Toast} from "../components/__types";
+
+defineEmits(['close']);
+
+const props = withDefaults(defineProps<{
+  position?: CornerPosition;
+  toasts: Toast[];
+}>(), {
+  position: CornerPosition.bottomLeft
+});
+
+const classes = computed(() => ({
+  'left-0 top-0 items-start': props.position === CornerPosition.topLeft,
+  'right-0 top-0 items-end': props.position === CornerPosition.topRight,
+  'left-0 bottom-0 items-start': props.position === CornerPosition.bottomLeft,
+  'right-0 bottom-0 items-end': props.position === CornerPosition.bottomRight,
+}));
+</script>
+
+<template>
+  <div
+    class="absolute flex flex-col space-y-2.5 p-2.5"
+    :class="classes"
+    data-e2e="toaster"
+  >
+    <TransitionGroup name="list">
+      <AntToast
+        v-for="toast of toasts"
+        :key="`ant-toast-${toast.id}`"
+        :title="toast.title"
+        :state="toast.type"
+        :icon="toast.hasIcon"
+        @close="() => $emit('close', toast)"
+      >
+        <template
+          v-if="toast.content"
+          #default
+        >
+          {{ toast.content }}
+        </template>
+      </AntToast>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style>
+.list-move {
+  transition: all 0.5s ease;
+}
+
+.list-enter-active {
+  animation: fade-in .6s;
+}
+
+.list-leave-active {
+  animation: fade-in .4s reverse;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>

package/dist/components/AntTooltip.vue

@@ -0,0 +1,189 @@
+<script lang="ts" setup>
+import {computed, onMounted, ref, getCurrentInstance} from 'vue';
+import {handleEnumValidation} from '../handler';
+import {InputState, Position} from '../enums';
+import {classesToObjectSyntax} from '../utils';
+import {hasSlotContent} from '../utils';
+
+const props = withDefaults(defineProps<{
+  position?: Position
+  tooltipClasses?: string | Record<string, boolean>
+  state?: InputState
+  expanded?: boolean
+  delay?: number
+}>(), {
+  position: Position.left,
+  tooltipClasses: '',
+  state: InputState.base,
+  expanded: false,
+  delay: 800
+});
+const visible = ref(false);
+const _tooltipClasses = computed(() => ({
+  'absolute w-max inline-flex': true,
+  // Position
+  'bottom-full pb-3.5': props.position === Position.top,
+  'top-full pt-3.5': props.position === Position.bottom,
+  'right-full pr-3.5': props.position === Position.left,
+  'left-full pl-3.5': props.position === Position.right,
+  ...classesToObjectSyntax(props.tooltipClasses)
+}));
+const classes = computed(() => ({
+  'z-10 absolute flex': true,
+  'top-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.bottom,
+  'bottom-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.top,
+  'top-0 left-0 bottom-0 -ml-[2.2px] items-center': props.position === Position.right,
+  'top-0 right-0 bottom-0 -mr-[2.2px] items-center': props.position === Position.left,
+}));
+const itemContainerClasses = computed(() => ({
+  'relative flex items-center': true,
+  'justify-center': props.position === Position.bottom,
+  'justify-center rotate-180': props.position === Position.top,
+  'justify-center -rotate-90': props.position === Position.right,
+  'justify-center rotate-90': props.position === Position.left,
+}));
+const contentClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-for-white-bg-font bg-white border-neutral-300',
+    [InputState.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
+    [InputState.info]: 'text-info-500-font bg-info-500 border-info-500',
+    [InputState.success]: 'text-success-500-font bg-success-500 border-success-500',
+    [InputState.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
+  };
+
+  return {[variants[props.state]]: true};
+});
+const svgPathClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'fill-white stroke-white',
+    [InputState.danger]: 'fill-danger-500 stroke-danger-500',
+    [InputState.info]: 'fill-info-500 stroke-info-500',
+    [InputState.success]: 'fill-success-500 stroke-success-500',
+    [InputState.warning]: 'fill-warning-500 stroke-warning-500',
+  };
+
+  return {[variants[props.state]]: true};
+});
+const arrowSvgPathClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'stroke-neutral-300',
+    [InputState.danger]: 'stroke-danger-500',
+    [InputState.info]: 'stroke-info-500',
+    [InputState.success]: 'stroke-success-500',
+    [InputState.warning]: 'stroke-warning-500',
+  };
+
+  return {[variants[props.state]]: true};
+});
+const timeout = ref<number | undefined>();
+const clickLock = ref(false);
+const uuid = ref(getCurrentInstance()?.uid);
+
+onMounted(() => {
+  handleEnumValidation(props.position, Position, 'position');
+  handleEnumValidation(props.state, InputState, 'state');
+});
+
+function onMouseOver() {
+  if (visible.value || clickLock.value) {
+    return;
+  }
+
+  /**
+   * To prevent buggy behavior when hovering over multiple tooltips in quick succession,
+   * we clear the timeout before setting a new one.
+   */
+  clearTimeout(timeout.value);
+
+  timeout.value = setTimeout(() => visible.value = true, props.delay) as unknown as number;
+}
+
+function onMouseLeave() {
+  clearTimeout(timeout.value);
+
+  visible.value = false;
+  clickLock.value = false;
+}
+
+function onClick() {
+  clearTimeout(timeout.value);
+
+  visible.value = false;
+  clickLock.value = true;
+}
+</script>
+
+<template>
+  <div
+    :key="uuid"
+    class="relative justify-center items-center"
+    :class="{'flex w-full': props.expanded, 'inline-flex': !props.expanded}"
+    data-e2e="tooltip"
+    @mouseover="() => onMouseOver()"
+    @mouseleave="() => onMouseLeave()"
+  >
+    <div
+      class="w-full"
+      @click="() => onClick()"
+    >
+      <slot/>
+    </div>
+
+    <div
+      v-if="visible && hasSlotContent($slots.content)"
+      :class="_tooltipClasses"
+    >
+      <div
+        class="shadow-lg text-sm relative"
+      >
+        <div
+          :class="classes"
+        >
+          <div
+            :class="itemContainerClasses"
+          >
+            <svg
+              class="absolute mt-[.5px]"
+              width="30"
+              height="8"
+              viewBox="0 0 35 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M20.3284 1.82843L23.1569 4.65685C24.6571 6.15715 26.692 7 28.8137 7L6.18629 7C8.30802 7 10.3429 6.15715 11.8431 4.65686L14.6716 1.82843C16.2337 0.266331 18.7663 0.266328 20.3284 1.82843Z"
+                :class="svgPathClasses"
+              />
+
+              <path
+                d="M34.5 7L28.8137 7C26.692 7 24.6571 6.15715 23.1569 4.65685L20.3284 1.82843C18.7663 0.266328 16.2337 0.266331 14.6716 1.82843L11.8431 4.65686C10.3429 6.15715 8.30802 7 6.18629 7L0.5 7L34.5 7Z"
+                :class="svgPathClasses"
+              />
+            </svg>
+
+            <svg
+              class="absolute"
+              width="30"
+              height="8"
+              viewBox="0 0 35 8"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M34.5 7L28.8137 7C26.692 7 24.6571 6.15715 23.1569 4.65685L20.3284 1.82843C18.7663 0.266328 16.2337 0.266331 14.6716 1.82843L11.8431 4.65686C10.3429 6.15715 8.30802 7 6.18629 7L0.5 7"
+                :class="arrowSvgPathClasses"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div
+          class="p-2 rounded-md border"
+          :class="contentClasses"
+        >
+          <slot name="content"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/components/Main.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Main: () => {
+    template: string;
+};

package/dist/components/Main.stories.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Main = void 0;
+module.exports = {
+  title: "Main"
+};
+const Main = () => {
+  return {
+    template: "<div>main</div>"
+  };
+};
+exports.Main = Main;

package/dist/components/Main.stories.mjs

@@ -0,0 +1,8 @@
+export default {
+  title: "Main"
+};
+export const Main = () => {
+  return {
+    template: "<div>main</div>"
+  };
+};

package/dist/components/__stories/AntAccordion.stories.d.ts

@@ -0,0 +1,9 @@
+import AntAccordion from '../AntAccordion.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntAccordion>;
+export default meta;
+type Story = StoryObj<typeof AntAccordion>;
+export declare const Docs: Story;
+export declare const CustomContent: Story;
+export declare const MultipleCollapseStrategy: Story;
+export declare const htmlInContent: Story;

package/dist/components/__stories/AntAccordion.stories.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.htmlInContent = exports.default = exports.MultipleCollapseStrategy = exports.Docs = exports.CustomContent = void 0;
+var _AntAccordion = _interopRequireDefault(require("../AntAccordion.vue"));
+var _AntAccordionItem = _interopRequireDefault(require("../AntAccordionItem.vue"));
+var _AntAccordion2 = require("../__types/AntAccordion.types");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Accordion",
+  component: _AntAccordion.default,
+  subcomponents: {
+    AntAccordionItem: _AntAccordionItem.default
+  },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    collapseStrategy: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_AntAccordion2.CollapseStrategy)
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntAccordion: _AntAccordion.default,
+      AntAccordionItem: _AntAccordionItem.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <div class="p-4">
+        <AntAccordion v-bind="args"/>
+      </div>`
+  }),
+  args: {
+    items: [{
+      label: "First entry",
+      content: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+    }, {
+      label: "Second entry",
+      content: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
+      iconLeft: true
+    }, {
+      label: "Third entry",
+      content: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+    }, {
+      label: "Fourth entry",
+      content: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
+    }]
+  }
+};
+const CustomContent = exports.CustomContent = {
+  render: args => ({
+    components: {
+      AntAccordion: _AntAccordion.default,
+      AntAccordionItem: _AntAccordionItem.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <div class="p-4">
+        <AntAccordion v-bind="args">
+          <template #item-content="{item, index}">
+            <div class="text-danger-500">{{ item.content }}</div>
+          </template>
+        </AntAccordion>
+      </div>`
+  }),
+  args: {
+    ...Docs.args
+  }
+};
+const MultipleCollapseStrategy = exports.MultipleCollapseStrategy = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    collapseStrategy: _AntAccordion2.CollapseStrategy.multiple
+  }
+};
+const htmlInContent = exports.htmlInContent = {
+  render: Docs.render,
+  args: {
+    items: [{
+      label: "First entry",
+      content: `Lorem <strong>ipsum</strong> dolor sit amet, consetetur sadipscing elitr, <br/>
+                    sed diam nonumy eirmod tempor invidunt <br/>
+                    ut labore et dolore magna aliquyam erat, <br/>
+                    sed diam voluptua. At vero eos et accusam et <br/>
+                    justo duo dolores et ea rebum. Stet clita kasd`
+    }, {
+      label: "Second entry",
+      content: `Lorem <strong>ipsum</strong> dolor sit amet, consetetur sadipscing elitr, <br/>
+                    sed diam nonumy eirmod tempor invidunt <br/>
+                    ut labore et dolore magna aliquyam erat, <br/>
+                    sed diam voluptua. At vero eos et accusam et <br/>
+                    justo duo dolores et ea rebum. Stet clita kasd`
+    }]
+  }
+};