Add kubrick-dev package

.storybook/preview.scss

@@ -1,4 +1,4 @@
-@use "../packages/kubrick/scss/preview";
+@use "../packages/kubrick-dev/scss/preview.scss";
 
 /* stylelint-disable-next-line selector-class-pattern */
 .__wp-core-body__ {

package.json

@@ -43,7 +43,7 @@
     "typescript": "^5.3.3"
   },
   "scripts": {
-    "build": "npm run build -w @syntatis/kubrick",
+    "build": "npm run build -w @syntatis/kubrick -w @syntatis/kubrick-dev",
     "chromatic": "chromatic --build-script-name=storybook:build",
     "format": "npm run format:scripts && npm run format:styles",
     "format:scripts": "eslint . --fix",
@@ -54,9 +54,9 @@
     "lint:types": "tsc --noEmit",
     "storybook": "storybook dev -p 6007",
     "storybook:build": "storybook build",
-    "test": "npm run test -w @syntatis/kubrick",
-    "test:coverage": "npm run test:coverage -w @syntatis/kubrick",
-    "test:watch": "npm run test:watch -w @syntatis/kubrick",
+    "test": "npm run test --workspaces --if-present",
+    "test:coverage": "npm run test:coverage --workspaces --if-present",
+    "test:watch": "npm run test:watch ---workspaces --if-present",
     "website:build": "npm run build -w @syntatis/website",
     "website:dev": "npm run dev -w @syntatis/website",
     "website:preview": "npm run preview -w @syntatis/website"

packages/kubrick-dev/.eslintignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+temp
+tmp

packages/kubrick-dev/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+	"root": true,
+	"extends": [
+		"@syntatis/eslint-config"
+	]
+}

packages/kubrick-dev/.gitignore

@@ -0,0 +1,7 @@
+# build
+index.d.ts
+index.js
+style.css
+
+# tests
+coverage

packages/kubrick-dev/.npmignore

@@ -0,0 +1,24 @@
+# compiled
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.so
+*.zip
+*.tgz
+
+# tests
+*.test.ts
+*.test.tsx
+*.test.js
+*.test.jsx
+
+# configs
+*.config.*
+.editorconfig
+.eslint*
+tsconfig.*
+
+# misc
+src/

packages/kubrick-dev/.stylelintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

packages/kubrick-dev/.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+	"extends": "../../.stylelintrc.json"
+}

packages/kubrick-dev/README.md

@@ -0,0 +1,3 @@
+# kubrick-dev
+
+Kubrick UI development components and helpers. This package is intended for development purposes only.

packages/kubrick-dev/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@syntatis/kubrick-dev",
+  "description": "Classic WordPress Admin UI (Development)",
+  "version": "0.0.0",
+  "license": "GPL-2.0-or-later",
+  "type": "module",
+  "keywords": [
+    "admin-dashboard",
+    "css-modules",
+    "react",
+    "component-library",
+    "wordpress",
+		"development"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+		"clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@syntatis/eslint-config": "^0.2.5",
+    "@syntatis/stylelint-config": "^0.1.9",
+		"@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
+		"eslint": "^8.57.1",
+    "glob": "^11.0.0",
+    "prettier": "^3.2.4",
+    "react": "^18.0.0",
+    "sass-embedded": "^1.70.0",
+    "stylelint": "^16.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.1",
+    "vite-plugin-dts": "^4.0.0",
+    "vite-plugin-lib-inject-css": "^2.0.0",
+    "vite-tsconfig-paths": "^5.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "format": "npm run format:scripts && npm run format:styles",
+    "format:scripts": "eslint . --fix",
+    "format:styles": "stylelint '**/*.scss' --fix",
+    "lint:scripts": "eslint .",
+    "lint:styles": "stylelint '**/*.{css,scss,sass}'",
+    "lint:types": "tsc --noEmit"
+  }
+}

packages/kubrick/scss/preview.scss → packages/kubrick-dev/scss/preview.scss

@@ -5,7 +5,7 @@
 @use '../../../wordpress/wp-admin/css/common.css';
 @use '../../../wordpress/wp-admin/css/edit.css';
 @use "../../../wordpress/wp-admin/css/forms.css";
-@use './base';
+@use '../../kubrick/scss/base';
 
 .__wp-core-body__ {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

packages/kubrick/src/AdminPreviewProvider.tsx → packages/kubrick-dev/src/AdminPreviewProvider.tsx

@@ -1,5 +1,6 @@
+// eslint-disable-next-line import/no-named-as-default
+import clsx from 'clsx';
 import '../scss/preview.scss';
-import { useClasses } from './useClasses';
 
 interface AdminPreviewProviderProps {
 	children: React.ReactNode;
@@ -10,10 +11,8 @@ export const AdminPreviewProvider = ({
 	children,
 	className,
 }: AdminPreviewProviderProps) => {
-	const { clsx } = useClasses('AdminPreviewProvider');
-
 	return (
-		<div className={clsx({ classNames: ['__wp-core-body__', className] })}>
+		<div className={clsx(['__wp-core-body__', className])}>
 			<div className="wp-core-ui">{children}</div>
 		</div>
 	);

packages/kubrick-dev/src/index.ts

@@ -0,0 +1 @@
+export * from './AdminPreviewProvider';

packages/kubrick-dev/tsconfig.json

@@ -0,0 +1,3 @@
+{
+	"extends": "../../tsconfig.json"
+}

packages/kubrick-dev/vite.config.ts

@@ -0,0 +1,68 @@
+import react from '@vitejs/plugin-react';
+import { glob } from 'glob';
+import { fileURLToPath } from 'node:url';
+import { extname, relative, resolve } from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import vitePluginExternal from 'vite-plugin-external';
+import { libInjectCss } from 'vite-plugin-lib-inject-css';
+import tsConfigPaths from 'vite-tsconfig-paths';
+import pkg from './package.json';
+
+export default defineConfig({
+	build: {
+		lib: {
+			entry: resolve(__dirname, 'src/index.ts'),
+			formats: ['es'],
+		},
+		outDir: resolve(__dirname, './dist'),
+		rollupOptions: {
+			input: Object.fromEntries(
+				glob
+					.sync('src/**/*.{ts,tsx}', {
+						ignore: [
+							'src/**/*.spec.{ts,tsx}',
+							'src/**/*.stories.{ts,tsx}',
+							'src/**/*.test.{ts,tsx}',
+							'src/**/*.d.{ts,tsx}',
+						],
+					})
+					.map((file) => {
+						return [
+							relative(
+								'src',
+								file.slice(0, file.length - extname(file).length)
+							),
+							fileURLToPath(new URL(file, import.meta.url)),
+						];
+					})
+			),
+			output: {
+				assetFileNames: '[name].[ext]',
+				entryFileNames: '[name].js',
+			},
+		},
+	},
+	esbuild: {
+		jsxDev: false,
+	},
+	plugins: [
+		libInjectCss(),
+		tsConfigPaths(),
+		vitePluginExternal({
+			externalizeDeps: [
+				...Object.keys({
+					...pkg.dependencies,
+					...pkg.devDependencies,
+					...pkg.peerDependencies,
+				}),
+				'react-dom',
+				'react/jsx-dev-runtime',
+				'react/jsx-runtime',
+			],
+			nodeBuiltins: true,
+		}),
+		react(),
+		dts({ include: ['src/**/!(*.spec|*.stories|*.test|*.d).{ts,tsx}'] }),
+	],
+});

packages/kubrick/package.json

@@ -27,11 +27,9 @@
     "@react-aria/utils": "^3.23.0",
     "@react-stately/checkbox": "^3.6.1",
     "@react-stately/collections": "^3.10.4",
+		"clsx": "^2.1.1",
     "react-aria": "^3.31.1",
-    "react-stately": "^3.29.1",
-    "vite-plugin-external": "^4.3.1",
-    "vite-plugin-lib-inject-css": "^2.0.1",
-    "vite-tsconfig-paths": "^4.0.0"
+    "react-stately": "^3.29.1"
   },
   "devDependencies": {
     "@storybook/react": "^8.0.0",
@@ -42,19 +40,22 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jsdom": "^21.1.7",
+		"@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-istanbul": "^2.0.5",
+		"eslint": "^8.57.1",
     "glob": "^11.0.0",
     "jsdom": "^25.0.0",
     "prettier": "^3.2.4",
     "react": "^18.0.0",
-    "sass": "^1.70.0",
+		"sass-embedded": "^1.70.0",
     "stylelint": "^16.2.0",
     "typescript": "^5.3.3",
     "vite": "^5.1.1",
-    "vite-plugin-dts": "^4.0.0",
-    "vite-plugin-lib-inject-css": "^2.0.0",
-    "vite-tsconfig-paths": "^5.0.1",
+    "vite-plugin-external": "^4.3.1",
+    "vite-plugin-lib-inject-css": "^2.0.1",
+    "vite-tsconfig-paths": "^4.0.0",
     "vitest": "^2.1.1"
   },
   "peerDependencies": {

packages/kubrick/src/index.ts

@@ -1,6 +1,5 @@
 import '../scss/base.scss';
 
-export * from './AdminPreviewProvider';
 export * from './Box';
 export * from './Button';
 export * from './Checkbox';
@@ -20,3 +19,4 @@ export * from './Tabs';
 export * from './Tabs/Tab';
 export * from './TextArea';
 export * from './TextField';
+export * from './useClasses';

website/package.json

@@ -23,7 +23,8 @@
     "@astrojs/starlight-tailwind": "^2.0.3",
     "@astrojs/tailwind": "^5.1.0",
     "@expressive-code/plugin-collapsible-sections": "^0.36.1",
-    "@syntatis/kubrick": "^0.1.0-alpha.6",
+    "@syntatis/kubrick": "^0.1.0-beta.2",
+    "@syntatis/kubrick-dev": "^0.0.0",
     "@wordpress/icons": "^10.5.0",
     "astro": "^4.10.2",
     "modern-normalize": "^3.0.1",

website/src/layouts/WordPress.astro

@@ -17,7 +17,7 @@ import Footer from "./templates/Footer.astro";
 
 // Styles.
 import "modern-normalize/modern-normalize.css";
-import "@syntatis/kubrick/scss/preview.scss";
+import "@syntatis/kubrick-dev/scss/preview.scss";
 import "@syntatis/kubrick/scss/base.scss";
 import "../styles/variables.scss";
 ---