ui-kit: support nextjs with vite

Signed-off-by: Viktor Login <[email protected]>

boundaries/platform/ui-kit/.storybook/main.ts

@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/react-vite'
+import type { StorybookConfig } from '@storybook/experimental-nextjs-vite'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -20,7 +20,7 @@ const config: StorybookConfig = {
   },
 
   framework: {
-    name: '@storybook/react-vite',
+    name: '@storybook/experimental-nextjs-vite',
     options: {}
   },
 

boundaries/platform/ui-kit/.storybook/preview.tsx

@@ -13,7 +13,7 @@ import { ThemeProvider as ThemeProviderNext } from 'next-themes'
 import { LocalizationProvider } from '@mui/x-date-pickers'
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 
-// import '../src/theme/styles.css'
+import '../src/theme/styles.css'
 import { theme } from '../src/theme/theme'
 
 const preview: Preview = {

boundaries/platform/ui-kit/package.json

@@ -51,6 +51,7 @@
     "@mui/material": "^6.1.9",
     "@mui/x-date-pickers": "8.0.0-alpha.2",
     "@storybook/builder-vite": "8.5.0-alpha.14",
+    "@storybook/experimental-nextjs-vite": "8.5.0-alpha.14",
     "@tailwindcss/postcss": "4.0.0-beta.4",
     "@tailwindcss/typography": "^0.5.15",
     "@types/react": "^18.3.12",

boundaries/platform/ui-kit/src/page/Sidebar/ActiveLink.tsx

@@ -1,5 +1,5 @@
 import Link, { LinkProps } from 'next/link'
-import { usePathname } from 'next/navigation'
+// import { usePathname } from 'next/navigation'
 // @ts-ignore
 import React, { useState, useEffect, ReactElement, Children } from 'react'
 
@@ -9,46 +9,46 @@ type ActiveLinkProps = LinkProps & {
 }
 
 function ActiveLink({ children, activeClassName, ...props }: ActiveLinkProps) {
-  const currentPath = usePathname()
-
-  const child = Children.only(children)
-  const childClassName = child.props.className || ''
-  const [className, setClassName] = useState(childClassName)
-
-  useEffect(() => {
-    // Dynamic route will be matched via props.as
-    // Static route will be matched via props.href
-    const linkPathname = new URL(
-      (props.as || props.href) as string,
-      location.href,
-    ).pathname
-
-    // Using URL().pathname to get rid of query and hash
-    const activePathname = new URL(currentPath, location.href).pathname
-
-    const newClassName =
-      linkPathname === activePathname
-        ? `${childClassName} ${activeClassName}`.trim()
-        : childClassName
-
-    if (newClassName !== className) {
-      setClassName(newClassName)
-    }
-  }, [
-    currentPath,
-    props.as,
-    props.href,
-    childClassName,
-    activeClassName,
-    setClassName,
-    className,
-  ])
+  // const currentPath = usePathname()
+
+  // const child = Children.only(children)
+  // const childClassName = child.props.className || ''
+  // const [className, setClassName] = useState(childClassName)
+
+  // useEffect(() => {
+  //   // Dynamic route will be matched via props.as
+  //   // Static route will be matched via props.href
+  //   const linkPathname = new URL(
+  //     (props.as || props.href) as string,
+  //     location.href,
+  //   ).pathname
+  //
+  //   // Using URL().pathname to get rid of query and hash
+  //   const activePathname = new URL(currentPath, location.href).pathname
+  //
+  //   const newClassName =
+  //     linkPathname === activePathname
+  //       ? `${childClassName} ${activeClassName}`.trim()
+  //       : childClassName
+  //
+  //   if (newClassName !== className) {
+  //     setClassName(newClassName)
+  //   }
+  // }, [
+  //   currentPath,
+  //   props.as,
+  //   props.href,
+  //   childClassName,
+  //   activeClassName,
+  //   setClassName,
+  //   className,
+  // ])
 
   return (
     <Link {...props}>
-      {React.cloneElement(child, {
-        className: className || null,
-      })}
+      {/*{React.cloneElement(child, {*/}
+      {/*  className: className || null,*/}
+      {/*})}*/}
     </Link>
   )
 }

boundaries/platform/ui-kit/src/theme/styles.css

@@ -1,26 +1 @@
-/**
- * This injects Tailwind's base styles and any base styles registered by
- * plugins.
- */
-@tailwind base;
-
-/**
- * This injects Tailwind's component classes and any component classes
- * registered by plugins.
- */
-@tailwind components;
-
-/**
- * This injects Tailwind's utility classes and any utility classes registered
- * by plugins.
- */
-@tailwind utilities;
-
-/**
- * Use this directive to control where Tailwind injects the hover, focus,
- * responsive, dark mode, and other variants of each class.
- *
- * If omitted, Tailwind will append these classes to the very end of
- * your stylesheet by default.
- */
-@tailwind variants;
+@import "tailwindcss";