Merge pull request #6 from wavetermdev/evan/dev

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,jsx,ts,tsx,json,yml,css,less}]
+charset = utf-8
+indent_style = tab
+indent_size = 4

.gitignore

@@ -20,3 +20,8 @@ bin/
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+
+*storybook.log
+
+test-results.xml

.prettierrc.json

@@ -1,4 +0,0 @@
-{
-    "tabWidth": 4,
-    "printWidth": 120
-}

.storybook/global.css

@@ -0,0 +1,17 @@
+body {
+	height: 100vh;
+	padding: 0;
+}
+
+#storybook-root {
+	height: 100%;
+}
+
+.grid-item {
+	background-color: aquamarine;
+	border: 1px black solid;
+
+	&.react-grid-placeholder {
+		background-color: orange;
+	}
+}

.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+	stories: ["../lib/**/*.mdx", "../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+	addons: [
+		"@storybook/addon-links",
+		"@storybook/addon-essentials",
+		"@chromatic-com/storybook",
+		"@storybook/addon-interactions",
+	],
+	framework: {
+		name: "@storybook/react-vite",
+		options: {},
+	},
+	docs: {
+		autodocs: "tag",
+	},
+	managerHead: (head) => `
+        ${head}
+        <meta name="robots" content="noindex" />
+        `,
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,27 @@
+// organize-imports-ignore
+import type { Preview } from "@storybook/react";
+import React from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
+import "./global.css";
+
+const preview: Preview = {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+	},
+	decorators: [
+		(Story) => (
+			<DndProvider backend={HTML5Backend}>
+				<Story />
+			</DndProvider>
+		),
+	],
+};
+
+export default preview;

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-    "recommendations": ["esbenp.prettier-vscode", "golang.go", "dbaeumer.vscode-eslint"]
+    "recommendations": ["esbenp.prettier-vscode", "golang.go", "dbaeumer.vscode-eslint", "vitest.explorer"]
 }

.vscode/settings.json

@@ -1,5 +1,10 @@
 {
     "editor.formatOnSave": true,
+	"editor.detectIndentation": false,
+	"editor.formatOnPaste": true,
+	"editor.tabSize": 4,
+	"editor.insertSpaces": false,
+	"prettier.useEditorConfig": true,
     "[javascript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
@@ -20,5 +25,8 @@
     },
     "[html]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[json]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
 }

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

eslint.config.js

@@ -0,0 +1,12 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import eslintConfigPrettier from 'eslint-config-prettier';
+
+export default
+	tseslint.config(
+		eslint.configs.recommended,
+		...tseslint.configs.recommended,
+		eslintConfigPrettier
+	);

package.json

@@ -10,13 +10,35 @@
 		"preview": "vite preview"
 	},
 	"devDependencies": {
+		"@chromatic-com/storybook": "^1.3.3",
+		"@eslint/js": "^9.2.0",
+		"@storybook/addon-essentials": "^8.0.10",
+		"@storybook/addon-interactions": "^8.0.10",
+		"@storybook/addon-links": "^8.0.10",
+		"@storybook/blocks": "^8.0.10",
+		"@storybook/react": "^8.0.10",
+		"@storybook/react-vite": "^8.0.10",
+		"@storybook/test": "^8.0.10",
+		"@types/node": "^20.12.12",
 		"@types/react": "^18.3.2",
 		"@types/uuid": "^9.0.8",
-    "@vitejs/plugin-react": "^4.2.1",
+		"@vitejs/plugin-react": "^4.3.0",
+		"@vitest/coverage-istanbul": "^1.6.0",
 		"@wailsio/runtime": "^3.0.0-alpha.24",
+		"eslint": "^9.2.0",
+		"eslint-config-prettier": "^9.1.0",
 		"less": "^4.2.0",
+		"prettier": "^3.2.5",
+		"prettier-plugin-jsdoc": "^1.3.0",
+		"prettier-plugin-organize-imports": "^3.2.4",
+		"storybook": "^8.0.10",
+		"ts-node": "^10.9.2",
+		"tslib": "^2.6.2",
+		"typescript": "^5.4.5",
+		"typescript-eslint": "^7.8.0",
 		"vite": "^5.0.0",
-    "vite-tsconfig-paths": "^4.3.2"
+		"vite-tsconfig-paths": "^4.3.2",
+		"vitest": "^1.6.0"
 	},
 	"dependencies": {
 		"@observablehq/plot": "^0.6.14",
@@ -34,5 +56,5 @@
 		"rxjs": "^7.8.1",
 		"uuid": "^9.0.1"
 	},
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+	"packageManager": "yarn@4.2.1"
 }

prettier.config.js

@@ -0,0 +1,12 @@
+/** @type {import("prettier").Config} */
+export default {
+	plugins: ["prettier-plugin-jsdoc", "prettier-plugin-organize-imports"],
+	printWidth: 120,
+	tabWidth: 4,
+	useTabs: true,
+	trailingComma: "es5",
+	jsdocVerticalAlignment: true,
+	jsdocSeparateReturnsFromParam: true,
+	jsdocSeparateTagGroups: true,
+	jsdocPreferCodeFences: true,
+};

vitest.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig, mergeConfig } from "vitest/config";
+import viteConfig from "./vite.config";
+
+export default mergeConfig(
+	viteConfig,
+	defineConfig({
+		test: {
+			reporters: ["verbose", "junit"],
+			outputFile: {
+				junit: "test-results.xml",
+			},
+			coverage: {
+				provider: "istanbul",
+				reporter: ["lcov"],
+				reportsDirectory: "./coverage",
+			},
+			typecheck: {
+				tsconfig: "tsconfig.json",
+			},
+		},
+	})
+);