Update nodejs dependencies

Signed-off-by: Roberto Raggi <[email protected]>

Author: robertoraggi

package-lock.json

@@ -1,4 +1,3 @@
-import { dirname, join } from "path";
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {

packages/cxx-storybook/.eslintrc.cjs

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 .sb-main-fullscreen #storybook-root {
   height: 100svh;

packages/cxx-storybook/.storybook/main.ts

@@ -0,0 +1,29 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+  }
+);

packages/cxx-storybook/.storybook/preview.css

@@ -4,50 +4,53 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint .",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "cxx-frontend": "^1.1.27",
+    "@chromatic-com/storybook": "latest",
     "@codemirror/commands": "latest",
     "@codemirror/lang-cpp": "latest",
     "@codemirror/lint": "latest",
     "@codemirror/state": "latest",
     "@codemirror/view": "latest",
+    "@eslint/js": "latest",
     "@storybook/addon-essentials": "latest",
     "@storybook/addon-interactions": "latest",
-    "@storybook/addon-links": "latest",
+    "@storybook/addon-onboarding": "latest",
     "@storybook/blocks": "latest",
-    "@storybook/react": "latest",
     "@storybook/react-vite": "latest",
+    "@storybook/react": "latest",
     "@storybook/test": "latest",
+    "@tailwindcss/vite": "latest",
     "@tanstack/react-query": "latest",
-    "@types/lodash": "latest",
-    "@types/react": "latest",
     "@types/react-dom": "latest",
     "@types/react-virtualized-auto-sizer": "latest",
     "@types/react-window": "latest",
-    "@typescript-eslint/eslint-plugin": "latest",
-    "@typescript-eslint/parser": "latest",
+    "@types/react": "latest",
     "@vitejs/plugin-react": "latest",
-    "autoprefixer": "^10.4.20",
+    "clsx": "latest",
     "codemirror": "latest",
-    "cxx-frontend": "^1.1.27",
-    "eslint": "latest",
     "eslint-plugin-react-hooks": "latest",
     "eslint-plugin-react-refresh": "latest",
     "eslint-plugin-storybook": "latest",
-    "lodash": "latest",
-    "postcss": "^8.5.1",
-    "prop-types": "latest",
-    "react": "latest",
+    "eslint": "latest",
+    "globals": "latest",
     "react-dom": "latest",
     "react-virtualized-auto-sizer": "latest",
     "react-window": "latest",
+    "react": "latest",
     "storybook": "latest",
     "tailwindcss": "latest",
+    "typescript-eslint": "latest",
     "typescript": "latest",
-    "vite": "latest",
-    "clsx": "latest"
+    "vite": "latest"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }

packages/cxx-storybook/eslint.config.js

@@ -20,7 +20,13 @@
 
 import { FixedSizeList } from "react-window";
 import { AST, ASTKind, ASTSlot, Parser, TokenKind } from "cxx-frontend";
-import { CSSProperties, useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  CSSProperties,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import AutoSizer from "react-virtualized-auto-sizer";
 import clsx from "clsx";
 
@@ -33,7 +39,7 @@ function hasAccessOp(node: any): node is AST & { getAccessOp(): TokenKind } {
 }
 
 function hasAccessSpecifier(
-  node: any,
+  node: any
 ): node is AST & { getAccessSpecifier(): TokenKind } {
   return (
     typeof node.getAccessSpecifier === "function" && node.getAccessSpecifier()
@@ -65,7 +71,11 @@ interface SyntaxTreeNode {
   slot?: ASTSlot;
 }
 
-export function SyntaxTree({ parser, cursorPosition, onNodeSelected }: SyntaxTreeProps) {
+export function SyntaxTree({
+  parser,
+  cursorPosition,
+  onNodeSelected,
+}: SyntaxTreeProps) {
   const listRef = useRef<FixedSizeList>(null);
   const [selectedNodeHandle, setSelectedNodeHandle] = useState(0);
   const [nodes, setNodes] = useState<SyntaxTreeNode[]>([]);
@@ -89,7 +99,7 @@ export function SyntaxTree({ parser, cursorPosition, onNodeSelected }: SyntaxTre
 
           ++count;
 
-          if ((count % 1000) === 0) {
+          if (count % 1000 === 0) {
             await new Promise((resolve) => setTimeout(resolve, 0));
           }
 
@@ -100,7 +110,8 @@ export function SyntaxTree({ parser, cursorPosition, onNodeSelected }: SyntaxTre
           if (hasLiteral(node)) extra += ` (${node.getLiteral()})`;
           if (hasOp(node)) extra += ` (${TokenKind[node.getOp()]})`;
           if (hasAccessOp(node)) extra += ` (${TokenKind[node.getAccessOp()]})`;
-          if (hasSpecifier(node)) extra += ` (${TokenKind[node.getSpecifier()]})`;
+          if (hasSpecifier(node))
+            extra += ` (${TokenKind[node.getSpecifier()]})`;
           if (hasAccessSpecifier(node))
             extra += ` (${TokenKind[node.getAccessSpecifier()]})`;
 
@@ -114,7 +125,7 @@ export function SyntaxTree({ parser, cursorPosition, onNodeSelected }: SyntaxTre
       }
 
       setNodes(nodes);
-    }
+    };
 
     update();
   }, [parser]);
@@ -129,7 +140,7 @@ export function SyntaxTree({ parser, cursorPosition, onNodeSelected }: SyntaxTre
       setSelectedNodeHandle(selectedNodeHandle);
 
       const index = nodes.findIndex(
-        (node) => node.handle === selectedNodeHandle,
+        (node) => node.handle === selectedNodeHandle
       );
 
       if (index != -1) {
@@ -145,8 +156,14 @@ export function SyntaxTree({ parser, cursorPosition, onNodeSelected }: SyntaxTre
 
     return (
       <div className="whitespace-pre" style={style}>
-        {indent}- <a
-          className={clsx("cursor-default p-0.5 font-[monospace] text-xs", { "bg-sky-500 text-white": isSelected })}>{description}</a>
+        {indent}-{" "}
+        <a
+          className={clsx("cursor-default p-0.5 font-[monospace] text-xs", {
+            "bg-sky-500 text-white": isSelected,
+          })}
+        >
+          {description}
+        </a>
       </div>
     );
   }

packages/cxx-storybook/package.json

@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
 });