@antify/ui 1.0.0

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

@@ -0,0 +1,283 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.WithoutContent = exports.Summary = exports.Multiple = exports.Docs = void 0;
+var _AntTooltip = _interopRequireDefault(require("../AntTooltip.vue"));
+var _AntFormGroup = _interopRequireDefault(require("../forms/AntFormGroup.vue"));
+var _AntFormGroupLabel = _interopRequireDefault(require("../forms/AntFormGroupLabel.vue"));
+var _Position = require("../../enums/Position.enum");
+var _enums = require("../../enums");
+var _test = require("@storybook/test");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Tooltip",
+  component: _AntTooltip.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    position: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Position.Position)
+    },
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.InputState)
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntTooltip: _AntTooltip.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+			<div class="p-32 flex justify-center items-center">
+				<AntTooltip v-bind="args">
+					<template #content>Lorem ipsum dolor sit <br/>amet</template>
+					<template #default>
+						<div class="box">Hover me</div>
+					</template>
+				</AntTooltip>
+			</div>
+		`
+  }),
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = (0, _test.within)(canvasElement);
+    const target = canvas.getByText("Hover me");
+    function queryTooltip() {
+      return canvas.queryByText("Lorem ipsum dolor sit amet");
+    }
+    await step("Hover over the target and expect showing the tooltip", async () => {
+      await _test.userEvent.hover(target);
+      await (0, _test.waitFor)(() => (0, _test.expect)(queryTooltip()).toBeInTheDocument(), {
+        timeout: 600
+      });
+    });
+    await step("Leave hover state and expect not showing the tooltip anymore", async () => {
+      await _test.userEvent.unhover(target);
+      (0, _test.expect)(queryTooltip()).not.toBeInTheDocument();
+    });
+    await step("Hover over the target, wait until the tooltip is visible, click the target and expect not showing the tooltip", async () => {
+      await _test.userEvent.hover(target);
+      await (0, _test.waitFor)(() => (0, _test.expect)(queryTooltip()).toBeInTheDocument(), {
+        timeout: 600
+      });
+      await _test.userEvent.click(target);
+      (0, _test.expect)(queryTooltip()).not.toBeInTheDocument();
+    });
+    await step("Hover over the target, click it while delay and expect not showing the tooltip", async () => {
+      await _test.userEvent.hover(target);
+      await (0, _test.waitFor)(() => (0, _test.expect)(queryTooltip()).not.toBeInTheDocument(), {
+        timeout: 200
+      });
+      await _test.userEvent.click(target);
+      (0, _test.expect)(queryTooltip()).not.toBeInTheDocument();
+    });
+  },
+  args: {
+    delay: 600,
+    position: _Position.Position.top
+  }
+};
+const WithoutContent = exports.WithoutContent = {
+  render: args => ({
+    components: {
+      AntTooltip: _AntTooltip.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+			<div class="p-32 flex justify-center items-center">
+				<AntTooltip v-bind="args">
+					<div class="box">Hover me</div>
+
+					<template #content></template>
+				</AntTooltip>
+			</div>
+		`
+  }),
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = (0, _test.within)(canvasElement);
+    await step("Hover over the target and expect not showing the tooltip", async () => {
+      await _test.userEvent.hover(canvas.getByText("Hover me"));
+      await (0, _test.waitFor)(() => (0, _test.expect)(canvas.queryByText("Lorem ipsum dolor sit amet")).not.toBeInTheDocument());
+    });
+  },
+  args: {}
+};
+const Multiple = exports.Multiple = {
+  render: args => ({
+    components: {
+      AntTooltip: _AntTooltip.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <div class="p-12 flex flex-col justify-center items-center gap-1">
+        <div class="flex gap-1">
+          <div
+            v-for="row in 5"
+            class="flex flex-col gap-1"
+          >
+            <AntTooltip v-for="item of 5">
+              <div class="box">Hover me</div>
+
+              <template #content>Lorem</template>
+            </AntTooltip>
+          </div>
+        </div>
+      </div>
+		`
+  })
+};
+const Summary = exports.Summary = {
+  render: args => ({
+    components: {
+      AntTooltip: _AntTooltip.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default
+    },
+    setup() {
+      return {
+        args,
+        Position: _Position.Position,
+        InputState: _enums.InputState
+      };
+    },
+    template: `
+			<AntFormGroup>
+				<AntFormGroupLabel>Position</AntFormGroupLabel>
+				<AntFormGroup direction="row" class="gap-x-32 py-16 dashed">
+					<AntTooltip :position="Position.top">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.right">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.left">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+				</AntFormGroup>
+
+				<AntFormGroupLabel>Color type</AntFormGroupLabel>
+				<AntFormGroup direction="row" class="pb-16 dashed">
+					<AntTooltip :position="Position.bottom" :state="InputState.base">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom" :state="InputState.info">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom" :state="InputState.success">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom" :state="InputState.warning">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom" :state="InputState.danger">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+				</AntFormGroup>
+
+				<AntFormGroupLabel>Expanded</AntFormGroupLabel>
+				<AntFormGroup class="p-32 dashed gap-y-16">
+					<AntTooltip :position="Position.top" expanded>
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.right" expanded>
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom" expanded>
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.left" expanded>
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+				</AntFormGroup>
+			</AntFormGroup>
+		`
+  }),
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = (0, _test.within)(canvasElement);
+    await step("Hover over the targets and expect showing the tooltips", async () => {
+      const targets = canvas.getAllByText("Hover me");
+      await Promise.all(targets.map(async target => {
+        await _test.userEvent.hover(target);
+      }));
+      await (0, _test.waitFor)(() => (0, _test.expect)(canvas.queryAllByText("Lorem")).toHaveLength(targets.length));
+    });
+  }
+};

package/dist/components/__stories/AntTooltip.stories.mjs

@@ -0,0 +1,241 @@
+import AntTooltip from "../AntTooltip.vue";
+import AntFormGroup from "../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../forms/AntFormGroupLabel.vue";
+import { Position } from "../../enums/Position.enum.mjs";
+import { InputState } from "../../enums/index.mjs";
+import { expect, userEvent, waitFor, within } from "@storybook/test";
+const meta = {
+  title: "Components/Tooltip",
+  component: AntTooltip,
+  parameters: {
+    controls: { sort: "requiredFirst" }
+  },
+  argTypes: {
+    position: {
+      control: { type: "select" },
+      options: Object.values(Position)
+    },
+    state: {
+      control: { type: "select" },
+      options: Object.values(InputState)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntTooltip },
+    setup() {
+      return { args };
+    },
+    template: `
+			<div class="p-32 flex justify-center items-center">
+				<AntTooltip v-bind="args">
+					<template #content>Lorem ipsum dolor sit <br/>amet</template>
+					<template #default>
+						<div class="box">Hover me</div>
+					</template>
+				</AntTooltip>
+			</div>
+		`
+  }),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const target = canvas.getByText("Hover me");
+    function queryTooltip() {
+      return canvas.queryByText("Lorem ipsum dolor sit amet");
+    }
+    await step("Hover over the target and expect showing the tooltip", async () => {
+      await userEvent.hover(target);
+      await waitFor(() => expect(queryTooltip()).toBeInTheDocument(), { timeout: 600 });
+    });
+    await step("Leave hover state and expect not showing the tooltip anymore", async () => {
+      await userEvent.unhover(target);
+      expect(queryTooltip()).not.toBeInTheDocument();
+    });
+    await step("Hover over the target, wait until the tooltip is visible, click the target and expect not showing the tooltip", async () => {
+      await userEvent.hover(target);
+      await waitFor(() => expect(queryTooltip()).toBeInTheDocument(), { timeout: 600 });
+      await userEvent.click(target);
+      expect(queryTooltip()).not.toBeInTheDocument();
+    });
+    await step("Hover over the target, click it while delay and expect not showing the tooltip", async () => {
+      await userEvent.hover(target);
+      await waitFor(() => expect(queryTooltip()).not.toBeInTheDocument(), { timeout: 200 });
+      await userEvent.click(target);
+      expect(queryTooltip()).not.toBeInTheDocument();
+    });
+  },
+  args: {
+    delay: 600,
+    position: Position.top
+  }
+};
+export const WithoutContent = {
+  render: (args) => ({
+    components: { AntTooltip },
+    setup() {
+      return { args };
+    },
+    template: `
+			<div class="p-32 flex justify-center items-center">
+				<AntTooltip v-bind="args">
+					<div class="box">Hover me</div>
+
+					<template #content></template>
+				</AntTooltip>
+			</div>
+		`
+  }),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step("Hover over the target and expect not showing the tooltip", async () => {
+      await userEvent.hover(canvas.getByText("Hover me"));
+      await waitFor(() => expect(
+        canvas.queryByText(
+          "Lorem ipsum dolor sit amet"
+        )
+      ).not.toBeInTheDocument());
+    });
+  },
+  args: {}
+};
+export const Multiple = {
+  render: (args) => ({
+    components: { AntTooltip },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="p-12 flex flex-col justify-center items-center gap-1">
+        <div class="flex gap-1">
+          <div
+            v-for="row in 5"
+            class="flex flex-col gap-1"
+          >
+            <AntTooltip v-for="item of 5">
+              <div class="box">Hover me</div>
+
+              <template #content>Lorem</template>
+            </AntTooltip>
+          </div>
+        </div>
+      </div>
+		`
+  })
+};
+export const Summary = {
+  render: (args) => ({
+    components: {
+      AntTooltip,
+      AntFormGroup,
+      AntFormGroupLabel
+    },
+    setup() {
+      return { args, Position, InputState };
+    },
+    template: `
+			<AntFormGroup>
+				<AntFormGroupLabel>Position</AntFormGroupLabel>
+				<AntFormGroup direction="row" class="gap-x-32 py-16 dashed">
+					<AntTooltip :position="Position.top">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.right">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.left">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+				</AntFormGroup>
+
+				<AntFormGroupLabel>Color type</AntFormGroupLabel>
+				<AntFormGroup direction="row" class="pb-16 dashed">
+					<AntTooltip :position="Position.bottom" :state="InputState.base">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom" :state="InputState.info">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom" :state="InputState.success">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom" :state="InputState.warning">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom" :state="InputState.danger">
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+				</AntFormGroup>
+
+				<AntFormGroupLabel>Expanded</AntFormGroupLabel>
+				<AntFormGroup class="p-32 dashed gap-y-16">
+					<AntTooltip :position="Position.top" expanded>
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.right" expanded>
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.bottom" expanded>
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+
+					<AntTooltip :position="Position.left" expanded>
+						<div class="box">Hover me</div>
+
+						<template #content>Lorem</template>
+					</AntTooltip>
+				</AntFormGroup>
+			</AntFormGroup>
+		`
+  }),
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step("Hover over the targets and expect showing the tooltips", async () => {
+      const targets = canvas.getAllByText("Hover me");
+      await Promise.all(targets.map(async (target) => {
+        await userEvent.hover(target);
+      }));
+      await waitFor(() => expect(canvas.queryAllByText("Lorem")).toHaveLength(targets.length));
+    });
+  }
+};

package/dist/components/__types/AntAccordion.types.d.ts

@@ -0,0 +1,4 @@
+export declare enum CollapseStrategy {
+    single = "single",
+    multiple = "multiple"
+}

package/dist/components/__types/AntAccordion.types.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CollapseStrategy = void 0;
+var CollapseStrategy = exports.CollapseStrategy = /* @__PURE__ */(CollapseStrategy2 => {
+  CollapseStrategy2["single"] = "single";
+  CollapseStrategy2["multiple"] = "multiple";
+  return CollapseStrategy2;
+})(CollapseStrategy || {});

package/dist/components/__types/AntAccordion.types.mjs

@@ -0,0 +1,5 @@
+export var CollapseStrategy = /* @__PURE__ */ ((CollapseStrategy2) => {
+  CollapseStrategy2["single"] = "single";
+  CollapseStrategy2["multiple"] = "multiple";
+  return CollapseStrategy2;
+})(CollapseStrategy || {});

package/dist/components/__types/AntIcon.types.d.ts

@@ -0,0 +1,8 @@
+export declare enum IconSize {
+    xl3 = "3xl",
+    lg = "lg",
+    md = "md",
+    sm = "sm",
+    xs = "xs",
+    xs2 = "2xs"
+}

package/dist/components/__types/AntIcon.types.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconSize = void 0;
+var IconSize = exports.IconSize = /* @__PURE__ */(IconSize2 => {
+  IconSize2["xl3"] = "3xl";
+  IconSize2["lg"] = "lg";
+  IconSize2["md"] = "md";
+  IconSize2["sm"] = "sm";
+  IconSize2["xs"] = "xs";
+  IconSize2["xs2"] = "2xs";
+  return IconSize2;
+})(IconSize || {});

package/dist/components/__types/AntIcon.types.mjs

@@ -0,0 +1,9 @@
+export var IconSize = /* @__PURE__ */ ((IconSize2) => {
+  IconSize2["xl3"] = "3xl";
+  IconSize2["lg"] = "lg";
+  IconSize2["md"] = "md";
+  IconSize2["sm"] = "sm";
+  IconSize2["xs"] = "xs";
+  IconSize2["xs2"] = "2xs";
+  return IconSize2;
+})(IconSize || {});

package/dist/components/__types/AntKeycap.types.d.ts

@@ -0,0 +1,4 @@
+export declare enum AntKeycapSize {
+    sm = "sm",
+    xs = "xs"
+}

package/dist/components/__types/AntKeycap.types.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AntKeycapSize = void 0;
+var AntKeycapSize = exports.AntKeycapSize = /* @__PURE__ */(AntKeycapSize2 => {
+  AntKeycapSize2["sm"] = "sm";
+  AntKeycapSize2["xs"] = "xs";
+  return AntKeycapSize2;
+})(AntKeycapSize || {});

package/dist/components/__types/AntKeycap.types.mjs

@@ -0,0 +1,5 @@
+export var AntKeycapSize = /* @__PURE__ */ ((AntKeycapSize2) => {
+  AntKeycapSize2["sm"] = "sm";
+  AntKeycapSize2["xs"] = "xs";
+  return AntKeycapSize2;
+})(AntKeycapSize || {});

package/dist/components/__types/AntListGroupItem.types.d.ts

@@ -0,0 +1,9 @@
+export declare enum ListGroupItemState {
+    base = "base",
+    primary = "primary",
+    secondary = "secondary",
+    info = "info",
+    success = "success",
+    warning = "warning",
+    danger = "danger"
+}

package/dist/components/__types/AntListGroupItem.types.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListGroupItemState = void 0;
+var ListGroupItemState = exports.ListGroupItemState = /* @__PURE__ */(ListGroupItemState2 => {
+  ListGroupItemState2["base"] = "base";
+  ListGroupItemState2["primary"] = "primary";
+  ListGroupItemState2["secondary"] = "secondary";
+  ListGroupItemState2["info"] = "info";
+  ListGroupItemState2["success"] = "success";
+  ListGroupItemState2["warning"] = "warning";
+  ListGroupItemState2["danger"] = "danger";
+  return ListGroupItemState2;
+})(ListGroupItemState || {});

package/dist/components/__types/AntListGroupItem.types.mjs

@@ -0,0 +1,10 @@
+export var ListGroupItemState = /* @__PURE__ */ ((ListGroupItemState2) => {
+  ListGroupItemState2["base"] = "base";
+  ListGroupItemState2["primary"] = "primary";
+  ListGroupItemState2["secondary"] = "secondary";
+  ListGroupItemState2["info"] = "info";
+  ListGroupItemState2["success"] = "success";
+  ListGroupItemState2["warning"] = "warning";
+  ListGroupItemState2["danger"] = "danger";
+  return ListGroupItemState2;
+})(ListGroupItemState || {});

package/dist/components/__types/AntSpinner.types.d.ts

@@ -0,0 +1,10 @@
+export declare enum AntSpinnerSize {
+    xl4 = "4xl",
+    xl3 = "3xl",
+    xl2 = "2xl",
+    lg = "lg",
+    md = "md",
+    sm = "sm",
+    xs = "xs",
+    xs2 = "2xs"
+}

package/dist/components/__types/AntSpinner.types.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AntSpinnerSize = void 0;
+var AntSpinnerSize = exports.AntSpinnerSize = /* @__PURE__ */(AntSpinnerSize2 => {
+  AntSpinnerSize2["xl4"] = "4xl";
+  AntSpinnerSize2["xl3"] = "3xl";
+  AntSpinnerSize2["xl2"] = "2xl";
+  AntSpinnerSize2["lg"] = "lg";
+  AntSpinnerSize2["md"] = "md";
+  AntSpinnerSize2["sm"] = "sm";
+  AntSpinnerSize2["xs"] = "xs";
+  AntSpinnerSize2["xs2"] = "2xs";
+  return AntSpinnerSize2;
+})(AntSpinnerSize || {});