@appquality/unguess-design-system 3.1.115 → 4.0.0

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.115",
+  "version": "4.0.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build": "yarn run clean && rollup -c",
-    "clean": "rimraf build",
+    "build": "vite build",
+    "build:watch": "vite build --mode development --watch",
     "release": "npx auto shipit --base-branch=master",
-    "type:check": "tsc"
+    "type:check": "tsc",
+    "dev": "vite",
+    "start": "vite",
+    "lint": "eslint --ext .tsx,.ts .",
+    "analyze": "npx vite-bundle-visualizer"
   },
   "repository": {
     "type": "git",
@@ -26,15 +29,15 @@
   "homepage": "https://github.com/AppQuality/unguess-design-system#readme",
   "dependencies": {
     "@appquality/stream-player": "1.0.6",
-    "@nivo/bar": "^0.80.0",
-    "@nivo/bullet": "^0.80.0",
-    "@nivo/core": "^0.80.0",
-    "@nivo/line": "^0.80.0",
-    "@nivo/pie": "^0.80.0",
-    "@nivo/stream": "^0.80.0",
-    "@nivo/sunburst": "^0.80.0",
-    "@nivo/tooltip": "^0.80.0",
-    "@nivo/waffle": "^0.80.0",
+    "@nivo/bar": "^0.87.0",
+    "@nivo/bullet": "^0.87.0",
+    "@nivo/core": "^0.87.0",
+    "@nivo/line": "^0.87.0",
+    "@nivo/pie": "^0.87.0",
+    "@nivo/stream": "^0.87.0",
+    "@nivo/sunburst": "^0.87.0",
+    "@nivo/tooltip": "^0.87.0",
+    "@nivo/waffle": "^0.87.0",
     "@sereneinserenade/tiptap-search-and-replace": "^0.1.1",
     "@tiptap/extension-bubble-menu": "2.4.0",
     "@tiptap/extension-character-count": "2.2.4",
@@ -51,25 +54,29 @@
     "@tiptap/react": "2.2.4",
     "@tiptap/starter-kit": "2.2.4",
     "@tiptap/suggestion": "2.2.4",
-    "@types/react-slick": "^0.23.10",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "@zendeskgarden/css-bedrock": "^9.0.0",
-    "@zendeskgarden/react-accordions": "^8.49.0",
-    "@zendeskgarden/react-avatars": "^8.49.0",
-    "@zendeskgarden/react-breadcrumbs": "^8.49.0",
-    "@zendeskgarden/react-buttons": "^8.48.2",
-    "@zendeskgarden/react-chrome": "^8.49.0",
-    "@zendeskgarden/react-colorpickers": "^8.73.2",
-    "@zendeskgarden/react-grid": "^8.49.0",
-    "@zendeskgarden/react-loaders": "^8.49.0",
-    "@zendeskgarden/react-modals": "^8.49.0",
-    "@zendeskgarden/react-notifications": "^8.49.0",
-    "@zendeskgarden/react-pagination": "^8.49.0",
-    "@zendeskgarden/react-tables": "8.62.0",
-    "@zendeskgarden/react-tabs": "^8.49.0",
-    "@zendeskgarden/react-tags": "^8.49.0",
-    "@zendeskgarden/react-tooltips": "^8.49.0",
-    "@zendeskgarden/react-typography": "^8.49.0",
+    "@zendeskgarden/react-accordions": "8.76.8",
+    "@zendeskgarden/react-avatars": "8.76.8",
+    "@zendeskgarden/react-breadcrumbs": "8.76.8",
+    "@zendeskgarden/react-buttons": "8.76.8",
+    "@zendeskgarden/react-chrome": "8.76.8",
+    "@zendeskgarden/react-colorpickers": "8.76.8",
+    "@zendeskgarden/react-datepickers": "8.76.8",
+    "@zendeskgarden/react-dropdowns": "8.76.8",
+    "@zendeskgarden/react-dropdowns.next": "^8.76.8",
+    "@zendeskgarden/react-forms": "8.76.8",
+    "@zendeskgarden/react-grid": "8.76.8",
+    "@zendeskgarden/react-loaders": "8.76.8",
+    "@zendeskgarden/react-modals": "8.76.8",
+    "@zendeskgarden/react-notifications": "8.76.8",
+    "@zendeskgarden/react-pagination": "8.76.8",
+    "@zendeskgarden/react-tables": "8.76.8",
+    "@zendeskgarden/react-tabs": "8.76.8",
+    "@zendeskgarden/react-theming": "8.76.8",
+    "@zendeskgarden/react-tags": "8.76.8",
+    "@zendeskgarden/react-tooltips": "8.76.8",
+    "@zendeskgarden/react-typography": "8.76.8",
     "react-slick": "^0.29.0",
     "react-window": "^1.8.6",
     "tippy.js": "^6.3.7",
@@ -81,57 +88,70 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@rollup/plugin-image": "^3.0.2",
-    "@storybook/addon-a11y": "^7.6.10",
-    "@storybook/addon-essentials": "^7.0.9",
-    "@storybook/addon-interactions": "^7.0.9",
-    "@storybook/addon-links": "^7.0.9",
-    "@storybook/blocks": "^7.0.9",
-    "@storybook/preset-create-react-app": "^7.0.9",
-    "@storybook/react": "^7.0.9",
-    "@storybook/react-webpack5": "^7.0.9",
-    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/addon-a11y": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/builder-vite": "^8.3.5",
+    "@storybook/preset-create-react-app": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
+    "@storybook/react-webpack5": "^8.3.5",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/rollup": "^8.0.1",
     "@types/jest": "^27.4.1",
-    "@types/node": "^16.11.26",
+    "@types/node": "^20.14.2",
     "@types/react": "^17.0.0 || ^18.0.0",
     "@types/react-dom": "^17.0.0 || ^18.0.0",
+    "@types/react-slick": "^0.23.10",
     "@types/react-window": "^1.8.5",
     "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^9.0.8",
-    "@zendeskgarden/react-dropdowns": "^8.49.0",
-    "@zendeskgarden/react-forms": "8.49.0",
-    "@zendeskgarden/react-theming": "^8.48.2",
-    "@zendeskgarden/svg-icons": "^6.31.1",
+    "@typescript-eslint/parser": "^8.8.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@zendeskgarden/svg-icons": "7.3.0",
     "auto": "^11.1.1",
+    "eslint": "^7.32.0",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.12",
     "formik": "^2.2.9",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "^5.0.1",
     "rimraf": "3.0.2",
     "rollup": "~2.66",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.34.1",
-    "storybook": "^7.0.9",
+    "storybook": "^8.3.5",
     "styled-components": "6.1.1",
     "typescript": "^4.5.0",
+    "vite": "^5.2.13",
+    "vite-plugin-chunk-split": "^0.5.0",
+    "vite-plugin-dts": "^4.2.3",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-tsconfig-paths": "^4.3.2",
     "web-vitals": "^2.1.4"
   },
   "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
+    "plugins": [
+      "react",
+      "react-hooks",
+      "react-refresh"
     ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
+    "rules": {
+      "react-refresh/only-export-components": "warn"
+    },
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaFeatures": {
+        "jsx": true
+      },
+      "ecmaVersion": 12,
+      "sourceType": "module"
+    }
   },
   "browserslist": {
     "production": [
@@ -146,11 +166,6 @@
     ]
   },
   "peerDependencies": {
-    "@types/react": "^17.0.0 || ^18.0.0",
-    "@types/react-dom": "^17.0.0 || ^18.0.0",
-    "@zendeskgarden/react-dropdowns": "^8.49.0",
-    "@zendeskgarden/react-forms": "8.49.0",
-    "@zendeskgarden/react-theming": "^8.48.2",
     "formik": "^2.2.9",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",

package/vite.config.mts

@@ -0,0 +1,45 @@
+import react from "@vitejs/plugin-react";
+import { resolve } from "node:path";
+import { chunkSplitPlugin } from "vite-plugin-chunk-split";
+import dts from "vite-plugin-dts";
+import { libInjectCss } from "vite-plugin-lib-inject-css";
+import { setEnv } from "./.vite/commands/setEnv";
+import { svgrPlugin } from "./.vite/plugins/svgr";
+
+import pkg from "./package.json";
+
+import { defineConfig } from "vite";
+
+export default defineConfig(({ mode }) => {
+  setEnv(mode);
+  return {
+    build: {
+      sourcemap: "inline",
+      ...(mode === "development" ? { emptyOutDir: false } : {}),
+      outDir: "build",
+      lib: {
+        entry: resolve(__dirname, "src/index.tsx"),
+        formats: ["es"],
+      },
+      rollupOptions: {
+        external: [...Object.keys(pkg.peerDependencies)],
+        output: {
+          assetFileNames: "assets/[name][extname]",
+          entryFileNames: "[name].js",
+        },
+      },
+    },
+    plugins: [
+      react(),
+      svgrPlugin(),
+      libInjectCss(),
+      dts({
+        include: ["src"],
+        ...(mode === "development" ? {} : { rollupTypes: true }),
+      }),
+      chunkSplitPlugin({
+        strategy: "unbundle",
+      }),
+    ],
+  };
+});

package/vite.config.storybook.mts

@@ -0,0 +1,40 @@
+import react from "@vitejs/plugin-react";
+import { resolve } from "node:path";
+import dts from "vite-plugin-dts";
+import { libInjectCss } from "vite-plugin-lib-inject-css";
+import { setEnv } from "./.vite/commands/setEnv";
+import { svgrPlugin } from "./.vite/plugins/svgr";
+
+import pkg from "./package.json";
+
+import { defineConfig } from "vite";
+
+export default defineConfig(({ mode }) => {
+  setEnv(mode);
+  return {
+    build: {
+      ...(mode === "development" ? { emptyOutDir: false } : {}),
+      outDir: "build",
+      lib: {
+        entry: resolve(__dirname, "src/index.tsx"),
+        formats: ["es"],
+      },
+      rollupOptions: {
+        external: [...Object.keys(pkg.peerDependencies)],
+        output: {
+          assetFileNames: "assets/[name][extname]",
+          entryFileNames: "[name].js",
+        },
+      },
+    },
+    plugins: [
+      react(),
+      svgrPlugin(),
+      libInjectCss(),
+      dts({
+        include: ["src"],
+        ...(mode === "development" ? {} : { rollupTypes: true }),
+      }),
+    ],
+  };
+});

package/build/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const FEATURE_FLAG_EXPRESS = "exploratory-express";
-export declare const FEATURE_FLAG_SKY_JOTFORM = "sky-custom-jotform";
-export declare const FEATURE_FLAG_CATALOG = "catalog-pages";

package/build/hooks/useDebounce.d.ts

@@ -1,2 +0,0 @@
-declare function useDebounce<T>(value: T, delay?: number): T;
-export default useDebounce;

package/build/hooks/useWindowSize.d.ts

@@ -1,4 +0,0 @@
-export default function useWindowSize(): {
-    width: number;
-    height: number;
-};

package/build/stories/accordions/_types.d.ts

@@ -1,25 +0,0 @@
-import { IAccordionProps } from "@zendeskgarden/react-accordions";
-export interface AccordionArgs extends IAccordionProps {
-    /** Sets `aria-level` heading rank in the document structure */
-    level: number;
-    /** Sets the expanded sections in a controlled accordion */
-    expandedSections?: number[];
-    /** Sets the default expanded sections in an uncontrolled accordion */
-    defaultExpandedSections?: number[];
-    /** Hides section borders */
-    isBare?: boolean;
-    /** Allows uncontrolled accordion sections to collapse */
-    isCollapsible?: boolean;
-    /** Applies compact styling */
-    isCompact?: boolean;
-    /** Animates section expansion and collapse */
-    isAnimated?: boolean;
-    /** Enables simultaneous expansion of uncontrolled accordion sections */
-    isExpandable?: boolean;
-    /**
-     * Handles accordion expansion changes
-     *
-     * @param {number} index A section index
-     */
-    onChange?: (index: number) => void;
-}

package/build/stories/accordions/index.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { Accordion as ZendeskAccordion } from "@zendeskgarden/react-accordions";
-import { AccordionArgs } from "./_types";
-export declare const Accordion: import("react").ForwardRefExoticComponent<AccordionArgs & import("react").RefAttributes<HTMLDivElement>> & {
-    Section: typeof ZendeskAccordion.Section;
-    Header: typeof ZendeskAccordion.Header;
-    Label: typeof ZendeskAccordion.Label;
-    Panel: typeof ZendeskAccordion.Panel;
-};

package/build/stories/accordions/index.stories.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { AccordionArgs } from "./_types";
-interface AccordionStoryArg extends AccordionArgs {
-    items: Array<{
-        headerTitle: string;
-        content: string;
-    }>;
-}
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, AccordionStoryArg>;
-export declare const Bare: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, AccordionStoryArg>;
-export declare const Expandable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, AccordionStoryArg>;
-export declare const Compact: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, AccordionStoryArg>;
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, AccordionArgs & import("react").RefAttributes<HTMLDivElement>>;
-export default _default;

package/build/stories/alerts/_types.d.ts

@@ -1,5 +0,0 @@
-import { IAlertProps } from '@zendeskgarden/react-notifications';
-export interface AlertArgs extends IAlertProps {
-    /** Applies alert type styles */
-    type: 'success' | 'warning' | 'error' | 'info';
-}