Migrate from CRA to Vite

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react-hooks/recommended"
+    ],
+    ignorePatterns: ["dist", ".eslintrc.cjs"],
+    parser: "@typescript-eslint/parser",
+    plugins: ["react-refresh"],
+    rules: {
+        "react-refresh/only-export-components": [
+            "warn",
+            { allowConstantExport: true }
+        ]
+    }
+}

.gitignore

@@ -1,35 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-
-# dist/components
-# dist/style.css
-*.tgz
-
-# dist/types/*
-# !dist/types/components
-
-dist/**/*.js
-dist/**/*.ts
-dist/**/*.css
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc

@@ -5,7 +5,6 @@
     "singleQuote": false,
     "trailingComma": "none",
     "bracketSpacing": true,
-    "jsxBracketSameLine": false,
-    "fluid": false,
-    "printWidth": 120
+    "bracketSameLine": false,
+    "fluid": false
 }

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+    "recommendations": ["esbenp.prettier-vscode"]
+}

README.md

@@ -1,78 +1,37 @@
-<p align="center">
-<img src="https://raw.githubusercontent.com/bruegmann/blue-react/master/public/blue-readme-cover.png" alt="React component library based on Bootstrap">
-</p>
+# React + TypeScript + Vite + Blue React
 
-# Blue React
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\
+Also [Blue React](https://bruegmann.github.io/blue-react) and Sass is already installed.
 
-[![npm version](https://img.shields.io/npm/v/blue-react)](https://www.npmjs.com/package/blue-react)
+Currently, two official plugins are available:
 
-[Checkout the docs](https://bruegmann.github.io/blue-react) to find out how to
-use Blue React.
+-   [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+-   [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-## Breaking changes between v9 and v10
+**Since this template was created, some of the dependencies might already have newer versions. When you created a new project, you should check them for updates or upgrades.**
 
-### Removed hash router from Layout
+## Expanding the ESLint configuration
 
-The new `Layout` no longer has a hash router. So there is no `pages` prop anymore. The router moved to its own component `HashRouter` for legacy reasons. But it's recommended to use other solutions like [React Router](https://reactrouter.com/) or [TanStack Router](https://tanstack.com/router/latest).
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
 
-### Move side content to `side` prop
+-   Configure the top-level `parserOptions` property like this:
 
-It should look like this:
-
-```tsx
-<Layout
-    side={
-        <SidebarMenu>
-            <MenuItem href="." label="Home" />
-        </SidebarMenu>
+```js
+export default {
+    // other rules...
+    parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: [
+            "./tsconfig.json",
+            "./tsconfig.node.json",
+            "./tsconfig.app.json"
+        ],
+        tsconfigRootDir: __dirname
     }
->
-    Your page content
-</Layout>
-```
-
-### Removed HTML elements for status
-
-If you use util functions for status like `showSuccess()` or `setAlertMessage()` you need to embed the `Status` React component like this:
-
-```tsx
-<Status
-    dangerIcon={<XCircleFill />}
-    infoIcon={<InfoCircleFill />}
-    successIcon={<CheckCircleFill />}
-    warningIcon={<ExclamationCircleFill />}
-/>
-```
-
-## Developing
-
-This project is built with [CRA](https://create-react-app.dev/). To start
-developing, just and install everything with `npm i` and run:
-
+}
 ```
-npm start
-```
-
-## Create a new release
-
-This is how to manually create a release:\
-By running
 
-```
-npm publish
-```
-
-the missing files in `./dist` will be created, the docs will be generated and
-the NPM package will be released.
-
-To publish changes on the documentary, run:
-
-```
-npm run deploy
-```
-
-To run both of them:
-
-```
-npm run release
-```
+-   Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+-   Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+-   Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

followUpDocs.js

@@ -1,24 +1,29 @@
 // Fügt Beispiel-Code der Doku hinzu
 
-const fs = require("fs")
-const path = require("path")
+import fs from "fs"
+import path from "path"
+import packageJson from "./package.json" with {type: "json"}
 
-const packageName = require("./package.json").name
 const docPath = "./src/docs/data/docs.json"
+import doc from "./src/docs/data/docs.json" with {type: "json"}
 
-const doc = require(docPath)
+const packageName = packageJson.name
 
 function prepareExampleCode(exampleCode) {
     /**
      * Transforms imports to package imports from "blue-react"
      * */
     exampleCode.replace('"../../../index.js"', `"${packageName}"`)
 
-    const matches = [...exampleCode.matchAll(/import (.*) from "..\/..\/(..\/)?components\/(.*)"/gm)]
+    const matches = [
+        ...exampleCode.matchAll(
+            /import (.*) from "..\/..\/(..\/)?components\/(.*)"/gm
+        )
+    ]
 
     let extraModules = []
 
-    let componentNames = matches.map((match, idx, array) => {
+    let componentNames = matches.map((match) => {
         if (match[1].includes(",")) {
             match[1]
                 .replace("{", "")
@@ -37,7 +42,9 @@ function prepareExampleCode(exampleCode) {
 
     componentNames = [...componentNames, ...extraModules]
 
-    const importCode = `import { ${componentNames.sort().join(", ")} } from "${packageName}"`
+    const importCode = `import { ${componentNames
+        .sort()
+        .join(", ")} } from "${packageName}"`
 
     matches.forEach((match) => {
         if (exampleCode.includes(importCode)) {