refactor: devEngines, ESLint, nvmrc and more

.gitignore

@@ -1,5 +1,4 @@
 node_modules
-.tsimp
 temp
 dist
 css

.ls-lint.yml

@@ -10,4 +10,3 @@ ignore:
   - '*/.git'
   - '*/node_modules'
   - '*/dist'
-  - '*/.tsimp'

.nvmrc

@@ -0,0 +1 @@
+24.14.0

.prettierrc.json

@@ -1,11 +1,21 @@
 {
   "arrowParens": "avoid",
   "bracketSpacing": true,
-  "bracketSameLine": false,
   "jsxSingleQuote": true,
+  "printWidth": 100,
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "all",
-  "printWidth": 100
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": [
+    "^node:",
+    "^react",
+    "<THIRD_PARTY_MODULES>",
+    "^#(.*)$",
+    "^[./]((?!.css$).)*$",
+    "\\.css$"
+  ],
+  "importOrderSeparation": false,
+  "importOrderSortSpecifiers": true
 }

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "js/ts.tsdk.path": "node_modules/typescript/lib",
+  "eslint.options": {
+    "flags": ["unstable_native_nodejs_ts_config"]
+  }
 }

README.md

@@ -139,13 +139,10 @@ Create sandbox entrypoint in your project, for example in `./src/sandbox.jsx`:
 
 ```jsx
 import { createRoot } from 'react-dom/client';
-
 // util for validate story-modules
 import { filterValidStories } from '@krutoo/showcase/runtime';
-
 // component for showing current story
 import { SandboxApp } from '@krutoo/showcase/runtime-sandbox';
-
 // "stories entrypoint" (trough alias provided by your bundler)
 import foundStories from '#found-stories';
 
@@ -165,16 +162,12 @@ Create showcase entrypoint in your project, for example in `./src/showcase.jsx`:
 
 ```jsx
 import { createRoot } from 'react-dom/client';
-
-// "stories entrypoint" (trough alias, more on that later)
-import foundStories from '#found-stories';
-
 // util for validate found stories
 import { filterValidStories } from '@krutoo/showcase/runtime';
-
 // standalone component for showing documentation with all stories
 import { ShowcaseApp } from '@krutoo/showcase/runtime-showcase';
-
+// "stories entrypoint" (trough alias, more on that later)
+import foundStories from '#found-stories';
 // showcase app styles bundle
 import '@krutoo/showcase/showcase.css';
 
@@ -255,10 +248,10 @@ export default {
 With Vite you need to configure it like this:
 
 ```js
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
 import path from 'node:path';
 import { emitStoriesEntrypoint } from '@krutoo/showcase/build';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 
 const storiesConfig = {
   filename: './.generated/entries.js',

docs/docs/build/vite.story.mdx

@@ -11,9 +11,9 @@ For Rspack you can see working example: [Vite example on GitHub](https://github.
 With Vite you need to configure it for example like this:
 
 ```js
-import { defineConfig } from 'vite';
 import path from 'node:path';
 import { emitStoriesEntrypoint } from '@krutoo/showcase/build';
+import { defineConfig } from 'vite';
 
 const storiesConfig = {
   filename: './.generated/entries.js',

docs/docs/build/webpack-rspack.story.mdx

@@ -10,8 +10,8 @@ For Rspack you can see working example: [Rspack example on GitHub](https://githu
 Here is commented example configuration for Webpack/Rspack:
 
 ```js
-import { emitStoriesEntrypoint } from '@krutoo/showcase/build';
 import path from 'node:path';
+import { emitStoriesEntrypoint } from '@krutoo/showcase/build';
 
 // before bundling we need to emit stories entrypoint
 await emitStoriesEntrypoint({

docs/docs/runtime/entrypoints.story.mdx

@@ -17,13 +17,10 @@ Create sandbox entrypoint in your project, for example in `./src/sandbox.jsx`:
 
 ```jsx
 import { createRoot } from 'react-dom/client';
-
 // util for validate story-modules
 import { filterValidStories } from '@krutoo/showcase/runtime';
-
 // component for showing current story
 import { SandboxApp } from '@krutoo/showcase/runtime-sandbox';
-
 // "stories entrypoint" (trough alias provided by your bundler)
 import foundStories from '#found-stories';
 
@@ -43,16 +40,12 @@ Create showcase entrypoint in your project, for example in `./src/showcase.jsx`:
 
 ```jsx
 import { createRoot } from 'react-dom/client';
-
-// "stories entrypoint" (trough alias, more on that later)
-import foundStories from '#found-stories';
-
 // util for validate found stories
 import { filterValidStories } from '@krutoo/showcase/runtime';
-
 // standalone component for showing documentation with all stories
 import { ShowcaseApp } from '@krutoo/showcase/runtime-showcase';
-
+// "stories entrypoint" (trough alias, more on that later)
+import foundStories from '#found-stories';
 // showcase app styles bundle
 import '@krutoo/showcase/showcase.css';
 

docs/rspack.config.ts

@@ -1,14 +1,14 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import type { Configuration } from '@rspack/core';
-import * as utils from '@krutoo/utils/rspack';
 import {
+  type EmitStoriesEntrypointConfig,
   defineStories,
   emitStoriesEntrypoint,
-  type EmitStoriesEntrypointConfig,
 } from '@krutoo/showcase/build';
-import packageJson from './package.json' with { type: 'json' };
+import * as utils from '@krutoo/utils/rspack';
+import type { Configuration } from '@rspack/core';
 import dotenv from 'dotenv';
+import packageJson from './package.json' with { type: 'json' };
 
 if (process.env.NODE_ENV) {
   dotenv.config({ path: `./.env.${process.env.NODE_ENV}` });

docs/src/components/app/app.tsx

@@ -1,9 +1,9 @@
-import { CodeBlock } from '#components/code-block/code-block';
 import { filterValidStories } from '@krutoo/showcase/runtime';
 import { PathnameRouting, type Router, ShowcaseApp } from '@krutoo/showcase/runtime-showcase';
 import { MDXProvider } from '@mdx-js/react';
-import { withPublicPath } from '../../utils';
+import { CodeBlock } from '#components/code-block/code-block';
 import foundStories from '#found-stories';
+import { withPublicPath } from '../../utils';
 import '@krutoo/showcase/showcase.css';
 
 const components = {

docs/src/components/code-block/code-block.tsx

@@ -1,7 +1,7 @@
-import { isValidElement, type ReactNode, useContext, useMemo, useRef, useState } from 'react';
+import { type ReactNode, isValidElement, useContext, useMemo, useRef, useState } from 'react';
+import { ColorSchemesContext } from '@krutoo/showcase/runtime-showcase';
 import { useIsomorphicLayoutEffect } from '@krutoo/utils/react';
 import { codeToHtml } from 'shiki';
-import { ColorSchemesContext } from '@krutoo/showcase/runtime-showcase';
 import styles from './code-block.m.css';
 
 export interface CodeBlockProps {
@@ -67,8 +67,9 @@ export function CodeBlock({ children }: CodeBlockProps) {
       theme: colorScheme === 'dark' ? 'one-dark-pro' : 'one-light',
     })
       .then(setContent)
+      // eslint-disable-next-line no-console
       .catch(console.error);
-  }, [sourceCode]);
+  }, [sourceCode, colorScheme]);
 
   return (
     <div className={styles.root} style={{ background }}>

docs/src/components/hero/hero.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
-import { RoutingContext, ColorSchemesContext, Link } from '@krutoo/showcase/runtime-showcase';
-import { withPublicPath } from '../../utils';
+import { ColorSchemesContext, Link, RoutingContext } from '@krutoo/showcase/runtime-showcase';
 import classNames from 'classnames';
+import { withPublicPath } from '../../utils';
 import styles from './hero.m.css';
 
 export function Hero() {

docs/src/server.tsx

@@ -1,6 +1,6 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import { renderToString, renderToStaticMarkup } from 'react-dom/server';
+import { renderToStaticMarkup, renderToString } from 'react-dom/server';
 import { filterValidStories } from '@krutoo/showcase/runtime';
 import { BrowserRouter } from '@krutoo/showcase/runtime-showcase';
 import { App } from '#components/app/app';

eslint.config.ts

@@ -0,0 +1,126 @@
+import { fileURLToPath } from 'node:url';
+import { includeIgnoreFile } from '@eslint/compat';
+import pluginJs from '@eslint/js';
+import pluginJSDoc from 'eslint-plugin-jsdoc';
+import pluginReact from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+import { type Config, defineConfig } from 'eslint/config';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+const gitignorePath = fileURLToPath(new URL('.gitignore', import.meta.url));
+
+const config: Config[] = defineConfig([
+  // Global ignores
+  includeIgnoreFile(gitignorePath, 'Imported .gitignore patterns'),
+
+  // Basics
+  {
+    files: ['**/*.{js,mjs,cjs,jsx,ts,mts,cts,tsx}'],
+  },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+  pluginJs.configs.recommended,
+  tseslint.configs.recommended,
+  {
+    rules: {
+      'object-shorthand': 'error',
+      'no-console': 'error',
+      eqeqeq: 'error',
+      'no-param-reassign': 'error',
+      '@typescript-eslint/no-explicit-any': 'off',
+      'no-shadow': 'off',
+      '@typescript-eslint/no-shadow': 'error',
+      '@typescript-eslint/no-empty-object-type': [
+        'error',
+        {
+          allowInterfaces: 'always',
+        },
+      ],
+    },
+  },
+
+  // React
+  pluginReact.configs.flat.recommended!,
+  pluginReact.configs.flat['jsx-runtime']!,
+  {
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      'react/prop-types': 'off',
+      'react/jsx-curly-brace-presence': 'error',
+    },
+  },
+
+  // React hooks
+  pluginReactHooks.configs.flat.recommended,
+  {
+    rules: {
+      'react-hooks/refs': 'off',
+      'react-hooks/static-components': 'off',
+      'react-hooks/set-state-in-effect': 'off',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': [
+        'warn',
+        {
+          additionalHooks: '(useIsomorphicLayoutEffect)',
+        },
+      ],
+    },
+  },
+
+  // JSDoc
+  pluginJSDoc.configs['flat/recommended'],
+  {
+    rules: {
+      'jsdoc/require-description-complete-sentence': 'warn',
+      'jsdoc/require-param': [
+        'warn',
+        {
+          checkDestructured: false,
+        },
+      ],
+      'jsdoc/check-param-names': [
+        'warn',
+        {
+          checkDestructured: false,
+        },
+      ],
+      'jsdoc/require-param-type': 'off',
+      'jsdoc/require-property-type': 'off',
+      'jsdoc/require-returns-type': 'off',
+      'jsdoc/require-yields-type': 'off',
+      'jsdoc/tag-lines': 'off',
+      'jsdoc/require-jsdoc': 'off',
+    },
+  },
+  {
+    files: ['scripts/**/*.{js,mjs,cjs,ts,jsx,tsx}'],
+    rules: {
+      'jsdoc/require-jsdoc': 'off',
+    },
+  },
+  {
+    files: ['docs/**/*.{js,mjs,cjs,ts,jsx,tsx}'],
+    rules: {
+      'jsdoc/require-jsdoc': 'off',
+    },
+  },
+  {
+    files: ['tests-e2e/**/*.{js,mjs,cjs,ts,jsx,tsx}'],
+    rules: {
+      'jsdoc/require-jsdoc': 'off',
+    },
+  },
+]);
+
+export default config;

examples/rspack/rspack.config.js

@@ -1,6 +1,6 @@
 import path from 'node:path';
-import rspack from '@rspack/core';
 import { emitStoriesEntrypoint } from '@krutoo/showcase/build';
+import rspack from '@rspack/core';
 
 const storiesEntrypoint = './.generated/found-stories.js';
 

examples/rspack/stories/button/primary.story.tsx

@@ -5,7 +5,7 @@ export const meta = {
   category: 'Components/Button',
 };
 
-export default function () {
+export default function Story() {
   const handleClick = () => {
     alert('Button clicked!');
   };

examples/rspack/stories/input/primary.story.tsx

@@ -5,6 +5,6 @@ export const meta = {
   category: 'Components/Input',
 };
 
-export default function () {
+export default function Story() {
   return <input className={styles.input} placeholder='Type something' />;
 }

examples/vite/src/showcase.tsx

@@ -5,9 +5,7 @@ import foundStories from '#found-stories';
 import './reset.css';
 import '@krutoo/showcase/showcase.css';
 
-const { validStories, invalidStories } = filterValidStories(foundStories);
-
-console.log(invalidStories);
+const { validStories } = filterValidStories(foundStories);
 
 createRoot(document.querySelector('#root')!).render(
   <ShowcaseApp

examples/vite/stories/button/primary.story.tsx

@@ -5,7 +5,7 @@ export const meta = {
   category: 'Components/Button',
 };
 
-export default function () {
+export default function Story() {
   const handleClick = () => {
     alert('Button clicked!');
   };

examples/vite/stories/input/primary.story.tsx

@@ -5,6 +5,6 @@ export const meta = {
   category: 'Components/Input',
 };
 
-export default function () {
+export default function Story() {
   return <input className={styles.input} placeholder='Type something' />;
 }