Merge pull request #21 from kubit-ui/feature/improve-storybook-and-fix-bugs

Improve content of Storybook

Author: kubit-ui

.storybook/preview.tsx

@@ -45,7 +45,6 @@ const preview: Preview = {
     },
     options: {
       storySort: {
-        method: 'alphabetical',
         order: ['Getting Started', ['Introduction'], 'Components'],
       },
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -63,7 +63,7 @@
     "dist:esm": "tsc -p tsconfig-esm.json && tsc-alias -p tsconfig-esm.json",
     "dist:esm:watch": "tsc -p tsconfig-esm.json --watch & tsc-alias -p tsconfig-esm.json --watch",
     "dev:yalc:push": "nodemon --watch dist --exec 'find dist \\( -name '*.svg' -o  -name '*.ttf' -o  -name '*.otf' -o -name '*.eot' -o  -name '*.png' -o  -name '*.jpg' \\) -exec rm \"{}\" \\; && yarn postdist && yalc push'",
-    "build": "storybook build -o bundle --disable-telemetry",
+    "build": "storybook build -o bundle --disable-telemetry --debug",
     "storybook:axe": "yarn build && axe-storybook --build-dir bundle",
     "createAssetsFiles": "node ./scripts/createAssetsFiles.js",
     "prettier": "prettier 'src/**/*.ts' --write",
@@ -83,12 +83,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/core": "^7.24.9",
-    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-env": "^7.25.0",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.7.0",
+    "@eslint/js": "^9.8.0",
     "@storybook/addon-a11y": "^8.2.6",
     "@storybook/addon-controls": "^8.2.6",
     "@storybook/addon-coverage": "^1.0.4",
@@ -117,14 +117,14 @@
     "@vitejs/plugin-react": "^4.3.1",
     "babel-jest": "^29.7.0",
     "cpy-cli": "^5.0.0",
-    "eslint": "^9.7.0",
+    "eslint": "^9.8.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-n": "^17.9.0",
+    "eslint-plugin-n": "^17.10.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-promise": "^7.0.0",
@@ -153,7 +153,8 @@
     "typedoc": "^0.26.5",
     "typedoc-plugin-markdown": "^4.2.3",
     "typescript": "^5.5.4",
-    "vite": "^5.3.4",
+    "vercel": "^35.2.1",
+    "vite": "^5.3.5",
     "vite-tsconfig-paths": "^4.3.2",
     "yarn-deduplicate": "^6.0.2"
   },

src/assets/storybook/icons/replace.svg

@@ -7,6 +7,7 @@ import ICON_GHOST from './icons/icon_ghost.svg';
 import ICON_PLACEHOLDER from './icons/icon_placeholder.svg';
 import ICON_CLOSE from './icons/icon_x_close.svg';
 import ICON_PLAY_BUTTON from './icons/play_button.svg';
+import ICON_REPLACE from './icons/replace.svg';
 import ILLUSTRATION from './illustrations/illustration.svg';
 import IMAGE_1 from './images/image_1.png';
 import IMAGE_2 from './images/image_2.png';
@@ -24,6 +25,7 @@ export const ICONS = {
   ICON_CLOSE,
   ICON_PLAY_BUTTON,
   ICON_CHECKMARK_THICK,
+  ICON_REPLACE,
 };
 
 export const ILLUSTRATIONS = {

src/assets/storybook/images/image_1.png

@@ -8,7 +8,7 @@ import 'jest-styled-components';
 import { axe } from 'jest-axe';
 
 import { FooterPositionType } from '@/components/footer';
-import { Link } from '@/components/link';
+import { Link } from '@/components/link/link';
 import { TextComponentType } from '@/components/text';
 
 import { renderProvider } from '../../../tests/renderProvider/renderProvider.utility';

src/assets/storybook/images/image_2.png

@@ -2,7 +2,8 @@ import * as React from 'react';
 
 import { ButtonType } from '@/components/button';
 import { ElementOrIcon } from '@/components/elementOrIcon';
-import { Text, TextComponentType } from '@/components/text';
+import { Text } from '@/components/text/text';
+import { TextComponentType } from '@/components/text/types/component';
 import { useId } from '@/hooks';
 
 import {