Storybook reinstall

.eslintrc.cjs

@@ -1,14 +1,6 @@
 module.exports = {
   root: true,
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:storybook/recommended',
-    'plugin:jsx-a11y/recommended',
-    'plugin:prettier/recommended'
-  ],
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react-hooks/recommended', 'plugin:react/jsx-runtime', 'plugin:storybook/recommended', 'plugin:jsx-a11y/recommended', 'plugin:prettier/recommended', 'plugin:storybook/recommended'],
   plugins: ['react', 'react-hooks', 'react-refresh', 'storybook', 'import', 'jsx-a11y', 'prettier'],
   env: {
     node: true,

.gitignore

@@ -25,3 +25,5 @@ yarn-debug.log*
 yarn-error.log*
 coverage
 storybook-static
+
+*storybook.log

.storybook/main.ts

@@ -1,35 +1,23 @@
-import { mergeConfig } from 'vite';
-import svgr from 'vite-plugin-svgr';
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-  'stories': [
-    '../src/**/*.mdx',
-    '../src/**/*.story.@(js|jsx|mjs|ts|tsx)',
-    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'
-  ],
+  'stories': ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
   'addons': [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
-    "storybook-dark-mode",
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        configureJSX: true,
-        babelOptions: {},
-        sourceLoaderOptions: null,
-      }
-    },
+    'storybook-dark-mode',
   ],
+
   'framework': {
     'name': '@storybook/react-vite',
     'options': {},
   },
-  'core': {
-    disableTelemetry: true
-  },
+  docs: {},
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
 };
-
 export default config;

.storybook/preview.scss

@@ -58,7 +58,17 @@ body {
 }
 
 #storybook-docs {
-  .sbdocs {
+  .docs-story {
     background-color: var(--app-backgroung-color);
   }
+
+  .ui-docs-story {
+    &--dark {
+      @include colors-palette-dark-theme();
+    }
+
+    &--light {
+      @include colors-palette-light-theme();
+    }
+  }
 }

.storybook/preview.tsx

@@ -1,23 +1,18 @@
-import React, {PropsWithChildren} from 'react';
+import React from 'react';
 import type { Preview, StoryFn } from '@storybook/react';
 import Highcharts, { setOptions } from 'highcharts';
 import NoChartData from 'highcharts/modules/no-data-to-display';
 import Accessibility from 'highcharts/modules/accessibility';
-import { useDarkMode } from "storybook-dark-mode";
-import { themes } from "@storybook/theming";
-import cx from 'clsx';
 
-import { DocsContainer, DocsContainerProps } from "@storybook/addon-docs";
 import { ThemeProvider } from '../src/providers';
-import { StoryThemeWrapper } from './StoryThemeWrapper';
 import { defaultHighchartsTheme } from '../src/components/Charts';
+import { StoryThemeWrapper } from './StoryThemeWrapper';
 import './preview.scss';
 
 NoChartData(Highcharts);
 Accessibility(Highcharts);
 setOptions(defaultHighchartsTheme);
 
-
 const preview: Preview = {
   parameters: {
     controls: {
@@ -28,24 +23,7 @@ const preview: Preview = {
     },
     darkMode: {
       stylePreview: true,
-      classTarget: 'html',
-    },
-    viewMode: "docs",
-    docs: {
-      components: ({children, ...props}: PropsWithChildren<DocsContainerProps>) => {
-        const dark = useDarkMode();
-
-        return (
-          <DocsContainer
-            {...props}
-            theme={dark ? themes.dark : themes.light}
-          >
-            <div className={cx({ 'ui-docs-story--dark': dark, 'ui-docs-story--light': !dark })}>
-              {children}
-            </div>
-          </DocsContainer>
-        )
-      }
+      classTarget: 'html'
     },
   },
   decorators: [
@@ -56,9 +34,7 @@ const preview: Preview = {
         </StoryThemeWrapper>
       </ThemeProvider>
     ),
-
   ],
 };
 
 export default preview;
-

package.json

@@ -34,7 +34,8 @@
     "release": "yarn ci && yarn build && npm publish",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
-    "storybook:deploy": "yarn storybook:build && touch ./storybook-static/.nojekyll && gh-pages -d ./storybook-static -t true"
+    "storybook:deploy": "yarn storybook:build && touch ./storybook-static/.nojekyll && gh-pages -d ./storybook-static -t true",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.x",
@@ -59,31 +60,29 @@
     "react-select": "^5.8.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.5.0",
+    "@chromatic-com/storybook": "^1.6.0",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-docs": "^8.1.10",
-    "@storybook/addon-essentials": "^8.1.10",
-    "@storybook/addon-interactions": "^8.1.10",
-    "@storybook/addon-links": "^8.1.10",
-    "@storybook/addon-mdx-gfm": "^8.1.10",
-    "@storybook/addon-onboarding": "^8.1.10",
-    "@storybook/blocks": "^8.1.10",
-    "@storybook/react": "^8.1.10",
-    "@storybook/react-vite": "^8.1.10",
-    "@storybook/test": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/preview-api": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-vite": "^8.1.11",
+    "@storybook/test": "^8.1.11",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20.14.6",
-    "@types/react": "^18.2.66",
+    "@types/node": "^20.14.9",
+    "@types/react": "^18.3.3",
     "@types/react-color": "^3.0.12",
     "@types/react-datepicker": "^6.2.0",
-    "@types/react-dom": "^18.2.22",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "@vitejs/plugin-react": "^4.3.1",
@@ -106,11 +105,11 @@
     "jsdom": "^24.1.0",
     "lodash": "^4.17.21",
     "node-sass": "^9.0.0",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.39",
     "postcss-scss": "^4.0.9",
     "prettier": "3.3.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.0",
     "react-icons": "5.2.1",
     "react-popper": "^2.3.0",
@@ -122,14 +121,14 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.77.6",
-    "storybook": "^8.1.10",
+    "storybook": "^8.1.11",
     "storybook-dark-mode": "^4.0.2",
-    "stylelint": "^15.11.0",
-    "stylelint-prettier": "^4.0.2",
-    "stylelint-scss": "^5.3.1",
+    "stylelint": "^16.6.1",
+    "stylelint-prettier": "^5.0.0",
+    "stylelint-scss": "^6.3.2",
     "tslib": "^2.6.3",
     "typescript": "5.5.2",
-    "vite": "^5.3.1",
+    "vite": "^5.3.2",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^1.6.0",
     "yup": "^1.4.0"

src/components/Backdrop/Backdrop.scss

@@ -10,7 +10,7 @@
   align-items: center;
   justify-content: center;
   z-index: 1;
-  background-color: color-mix(in srgb, var(--emphasis-primary) 70%, transparent);
+  background-color: color-mix(in srgb, var(--emphasis-primary) 10%, transparent);
 
   &--frosted {
     backdrop-filter: blur(5px);

src/components/Button/Button.scss

@@ -31,8 +31,8 @@
       background-color: var(--orange-3);
     }
     &:active {
-      background-color: var(--red-orange-3);
-      border-color: var(--red-orange-3);
+      background-color: var(--bad);
+      border-color: var(--bad);
     }
   }
 
@@ -75,13 +75,16 @@
   }
 
   &--danger {
-    color: var(--red-orange-3);
+    color: var(--bad);
     background-color: transparent;
+    border-color: var(--bad);
     &:hover {
-      background-color: transparent;
+      background-color: var(--bad);
+      color: var(--white);
     }
     &:active {
-      border-color: var(--red-orange-3);
+      border-color: var(--bad);
+      color: var(--emphasis-tertiary);
     }
     &.ui-btn--disabled {
       background-color: transparent;

src/components/ContextMenu/ContextMenu.scss

@@ -0,0 +1,58 @@
+@import '../../styles/mixins/index.scss';
+
+.ui-context-menu {
+  min-width: 200px;
+  width: 100%;
+  background-color: var(--app-backgroung-color);
+  border-radius: 16px;
+  box-shadow: var(--box-shadow);
+
+  &__item {
+    color: currentColor;
+    width: 100%;
+    position: relative;
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    align-items: center;
+    box-sizing: border-box;
+    overflow: hidden;
+    border: none;
+    outline: 0;
+    background: inherit;
+    cursor: pointer;
+    padding: 16px;
+    color: var(--negative);
+
+    &--disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    &--active {
+      color: var(--orange-3);
+    }
+
+    &:hover {
+      background-color: var(--negative);
+      color: var(--positive);
+      border-radius: 16px;
+    }
+  }
+  &__item-label {
+    color: var(--sky1);
+    user-select: none;
+    @include body4;
+  }
+
+  &__item-end-adornment {
+    height: 12px;
+    text-align: right;
+    display: inline-block;
+    margin-left: auto;
+    font-size: 14px;
+    color: currentColor;
+  }
+}

src/components/ContextMenu/ContextMenu.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { FaArrowDown, FaArrowUp } from 'react-icons/fa6';
+
+import { ContextMenu } from './ContextMenu';
+import { MenuItemProps } from './ContextMenuItem';
+
+const meta: Meta<typeof ContextMenu> = {
+  title: 'components/ContextMenu',
+  component: ContextMenu,
+};
+
+const menuItems: MenuItemProps[] = [
+  {
+    label: 'First Item',
+    icon: <FaArrowDown />,
+    onSelect() {},
+  },
+  {
+    label: 'Second Item',
+    disabled: true,
+    icon: <FaArrowUp />,
+    onSelect() {},
+  },
+  {
+    label: 'Third Item',
+    onSelect() {},
+  },
+];
+
+export const Default = {
+  args: {
+    menuItems,
+  },
+};
+
+export default meta;