@akinon/ui-tour 1.0.0

package/dist/cjs/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ITourProps } from './types';
+/**
+ * Tour component for Akinon UI.
+ *
+ * The Tour component provides a guided walkthrough for users, highlighting specific elements
+ * on the page with contextual information. It is ideal for onboarding experiences, showcasing
+ * new features, or providing step-by-step instructions.
+ *
+ * Features include customizable steps, placement options, and mask overlays to focus user
+ * attention. The component supports callbacks for step changes, closures, and completion,
+ * ensuring a seamless user experience and integration with application workflows.
+ *
+ * Built with flexibility and the Akinon design system in mind, the Tour component is suitable
+ * for various use cases across web applications.
+ */
+export declare const Tour: ({ ...props }: ITourProps) => React.JSX.Element;
+export type * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,IAAI,iBAAkB,UAAU,sBAE5C,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/cjs/index.js

@@ -0,0 +1,35 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tour = void 0;
+const antd_1 = require("antd");
+const react_1 = require("react");
+/**
+ * Tour component for Akinon UI.
+ *
+ * The Tour component provides a guided walkthrough for users, highlighting specific elements
+ * on the page with contextual information. It is ideal for onboarding experiences, showcasing
+ * new features, or providing step-by-step instructions.
+ *
+ * Features include customizable steps, placement options, and mask overlays to focus user
+ * attention. The component supports callbacks for step changes, closures, and completion,
+ * ensuring a seamless user experience and integration with application workflows.
+ *
+ * Built with flexibility and the Akinon design system in mind, the Tour component is suitable
+ * for various use cases across web applications.
+ */
+const Tour = (_a) => {
+    var props = __rest(_a, []);
+    return react_1.default.createElement(antd_1.Tour, Object.assign({}, props));
+};
+exports.Tour = Tour;

package/dist/cjs/types.d.ts

@@ -0,0 +1,186 @@
+import { ReactNode } from 'react';
+
+export type PlacementType =
+  | 'left'
+  | 'leftTop'
+  | 'leftBottom'
+  | 'right'
+  | 'rightTop'
+  | 'rightBottom'
+  | 'top'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottom'
+  | 'bottomLeft'
+  | 'bottomRight'
+  | 'center';
+
+/**
+ * Interface representing a step in a tour.
+ */
+export interface ITourStep {
+  /**
+   * The target element for the tour step. Can be an HTMLElement, a function returning an HTMLElement, null, or a function returning null.
+   */
+  target?: HTMLElement | (() => HTMLElement) | null | (() => null);
+
+  /**
+   * Whether to display an arrow pointing to the target element.
+   */
+  arrow?: boolean;
+
+  /**
+   * The custom close icon for the tour step.
+   */
+  closeIcon?: ReactNode;
+
+  /**
+   * The cover element for the tour step.
+   */
+  cover?: ReactNode;
+
+  /**
+   * The title of the tour step.
+   */
+  title: ReactNode;
+
+  /**
+   * The description of the tour step.
+   */
+  description?: ReactNode;
+
+  /**
+   * The placement of the tour step relative to the target element.
+   */
+  placement?: PlacementType;
+
+  /**
+   * Callback function to be called when the tour step is closed.
+   */
+  onClose?: () => void;
+
+  /**
+   * Whether to display a mask over the rest of the page.
+   */
+  mask?: boolean;
+
+  /**
+   * The total number of steps in the tour.
+   */
+  total?: number;
+
+  /**
+   * The current step number in the tour.
+   */
+  current?: number;
+}
+
+/**
+ * Interface representing the properties for the Tour component.
+ */
+export interface ITourProps {
+  /**
+   * An array of steps to be included in the tour.
+   */
+  steps?: ITourStep[];
+
+  /**
+   * Boolean indicating whether the tour is open.
+   */
+  open?: boolean;
+
+  /**
+   * The current step index.
+   */
+  current?: number;
+
+  /**
+   * Callback function triggered when the current step changes.
+   * @param current - The new current step index.
+   */
+  onChange?: (current: number) => void;
+
+  /**
+   * Callback function triggered when the tour is closed.
+   * @param current - The current step index at the time of closing.
+   */
+  onClose?: (current: number) => void;
+
+  /**
+   * Callback function triggered when the tour is finished.
+   */
+  onFinish?: () => void;
+
+  /**
+   * Custom close icon for the tour.
+   */
+  closeIcon?: ReactNode;
+
+  /**
+   * Boolean indicating whether the tour is closable.
+   */
+  closable?: boolean;
+
+  /**
+   * Boolean indicating whether a mask should be displayed.
+   */
+  mask?: boolean;
+
+  /**
+   * Boolean indicating whether an arrow should be displayed.
+   */
+  arrow?: boolean;
+
+  /**
+   * The placement of the tour steps.
+   */
+  placement?: PlacementType;
+
+  /**
+   * Function to render custom indicators.
+   * @param current - The current step index.
+   * @param total - The total number of steps.
+   * @returns A ReactNode representing the custom indicators.
+   */
+  indicatorsRender?: (current: number, total: number) => ReactNode;
+
+  /**
+   * The z-index of the tour component.
+   */
+  zIndex?: number;
+
+  /**
+   * Locale settings for the tour component.
+   */
+  locale?: ITourLocale;
+}
+
+/**
+ * Interface representing locale settings for the Tour component.
+ */
+export interface ITourLocale {
+  /**
+   * Text for the "next" button.
+   */
+  nextText?: string;
+
+  /**
+   * Text for the "previous" button.
+   */
+  prevText?: string;
+
+  /**
+   * Text for the "finish" button.
+   */
+  finishText?: string;
+
+  /**
+   * Text for the "skip" button.
+   */
+  skipText?: string;
+
+  /**
+   * Text for the "close" button.
+   */
+  closeText?: string;
+}

package/dist/esm/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ITourProps } from './types';
+/**
+ * Tour component for Akinon UI.
+ *
+ * The Tour component provides a guided walkthrough for users, highlighting specific elements
+ * on the page with contextual information. It is ideal for onboarding experiences, showcasing
+ * new features, or providing step-by-step instructions.
+ *
+ * Features include customizable steps, placement options, and mask overlays to focus user
+ * attention. The component supports callbacks for step changes, closures, and completion,
+ * ensuring a seamless user experience and integration with application workflows.
+ *
+ * Built with flexibility and the Akinon design system in mind, the Tour component is suitable
+ * for various use cases across web applications.
+ */
+export declare const Tour: ({ ...props }: ITourProps) => React.JSX.Element;
+export type * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,IAAI,iBAAkB,UAAU,sBAE5C,CAAC;AAEF,mBAAmB,SAAS,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Tour as AntTour } from 'antd';
+import React from 'react';
+/**
+ * Tour component for Akinon UI.
+ *
+ * The Tour component provides a guided walkthrough for users, highlighting specific elements
+ * on the page with contextual information. It is ideal for onboarding experiences, showcasing
+ * new features, or providing step-by-step instructions.
+ *
+ * Features include customizable steps, placement options, and mask overlays to focus user
+ * attention. The component supports callbacks for step changes, closures, and completion,
+ * ensuring a seamless user experience and integration with application workflows.
+ *
+ * Built with flexibility and the Akinon design system in mind, the Tour component is suitable
+ * for various use cases across web applications.
+ */
+export const Tour = (_a) => {
+    var props = __rest(_a, []);
+    return React.createElement(AntTour, Object.assign({}, props));
+};

package/dist/esm/types.d.ts

@@ -0,0 +1,186 @@
+import { ReactNode } from 'react';
+
+export type PlacementType =
+  | 'left'
+  | 'leftTop'
+  | 'leftBottom'
+  | 'right'
+  | 'rightTop'
+  | 'rightBottom'
+  | 'top'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottom'
+  | 'bottomLeft'
+  | 'bottomRight'
+  | 'center';
+
+/**
+ * Interface representing a step in a tour.
+ */
+export interface ITourStep {
+  /**
+   * The target element for the tour step. Can be an HTMLElement, a function returning an HTMLElement, null, or a function returning null.
+   */
+  target?: HTMLElement | (() => HTMLElement) | null | (() => null);
+
+  /**
+   * Whether to display an arrow pointing to the target element.
+   */
+  arrow?: boolean;
+
+  /**
+   * The custom close icon for the tour step.
+   */
+  closeIcon?: ReactNode;
+
+  /**
+   * The cover element for the tour step.
+   */
+  cover?: ReactNode;
+
+  /**
+   * The title of the tour step.
+   */
+  title: ReactNode;
+
+  /**
+   * The description of the tour step.
+   */
+  description?: ReactNode;
+
+  /**
+   * The placement of the tour step relative to the target element.
+   */
+  placement?: PlacementType;
+
+  /**
+   * Callback function to be called when the tour step is closed.
+   */
+  onClose?: () => void;
+
+  /**
+   * Whether to display a mask over the rest of the page.
+   */
+  mask?: boolean;
+
+  /**
+   * The total number of steps in the tour.
+   */
+  total?: number;
+
+  /**
+   * The current step number in the tour.
+   */
+  current?: number;
+}
+
+/**
+ * Interface representing the properties for the Tour component.
+ */
+export interface ITourProps {
+  /**
+   * An array of steps to be included in the tour.
+   */
+  steps?: ITourStep[];
+
+  /**
+   * Boolean indicating whether the tour is open.
+   */
+  open?: boolean;
+
+  /**
+   * The current step index.
+   */
+  current?: number;
+
+  /**
+   * Callback function triggered when the current step changes.
+   * @param current - The new current step index.
+   */
+  onChange?: (current: number) => void;
+
+  /**
+   * Callback function triggered when the tour is closed.
+   * @param current - The current step index at the time of closing.
+   */
+  onClose?: (current: number) => void;
+
+  /**
+   * Callback function triggered when the tour is finished.
+   */
+  onFinish?: () => void;
+
+  /**
+   * Custom close icon for the tour.
+   */
+  closeIcon?: ReactNode;
+
+  /**
+   * Boolean indicating whether the tour is closable.
+   */
+  closable?: boolean;
+
+  /**
+   * Boolean indicating whether a mask should be displayed.
+   */
+  mask?: boolean;
+
+  /**
+   * Boolean indicating whether an arrow should be displayed.
+   */
+  arrow?: boolean;
+
+  /**
+   * The placement of the tour steps.
+   */
+  placement?: PlacementType;
+
+  /**
+   * Function to render custom indicators.
+   * @param current - The current step index.
+   * @param total - The total number of steps.
+   * @returns A ReactNode representing the custom indicators.
+   */
+  indicatorsRender?: (current: number, total: number) => ReactNode;
+
+  /**
+   * The z-index of the tour component.
+   */
+  zIndex?: number;
+
+  /**
+   * Locale settings for the tour component.
+   */
+  locale?: ITourLocale;
+}
+
+/**
+ * Interface representing locale settings for the Tour component.
+ */
+export interface ITourLocale {
+  /**
+   * Text for the "next" button.
+   */
+  nextText?: string;
+
+  /**
+   * Text for the "previous" button.
+   */
+  prevText?: string;
+
+  /**
+   * Text for the "finish" button.
+   */
+  finishText?: string;
+
+  /**
+   * Text for the "skip" button.
+   */
+  skipText?: string;
+
+  /**
+   * Text for the "close" button.
+   */
+  closeText?: string;
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@akinon/ui-tour",
+  "version": "1.0.0",
+  "private": false,
+  "type": "module",
+  "main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "antd": "5.22.6"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0",
+    "copyfiles": "^2.4.1",
+    "rimraf": "^5.0.5",
+    "typescript": "*",
+    "@akinon/typescript-config": "1.0.0",
+    "@akinon/ui-theme": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
+    "build:esm": "tsc --outDir dist/esm",
+    "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
+    "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
+    "clean": "rimraf dist/",
+    "typecheck": "tsc --noEmit"
+  }
+}