v0.4.0

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["ui-playground", "docs"]
+  "ignore": ["docs", "build-scripts"]
 }

.changeset/large-bikes-behave.md

@@ -0,0 +1,9 @@
+---
+"@studiocms/ui": minor
+---
+
+Implement Build step and migrate all exported components into virtual modules
+
+Instead of `@studiocms/ui/components` use `studiocms:ui/components`
+
+For more information see https://ui.studiocms.dev

.changeset/slimy-ladybugs-join.md

@@ -0,0 +1,19 @@
+---
+"@studiocms/ui": minor
+---
+
+Add a few new components:
+
+- Accordion
+- Badge
+- Breadcrumbs
+- Group
+- Progress
+- Sidebar
+
+Add two new colors
+
+- `info` (Blue)
+- `monochrome` (Black/White)
+
+Add the ability to pass a CSS file for customization of all colors

.github/workflows/ci-pr-snapshot.yml

@@ -15,6 +15,9 @@ jobs:
 
       - name: Install Tools & Dependencies
         uses: withstudiocms/automations/.github/actions/install@main
+
+      - name: Build packages
+        run: pnpm ci:prepublish
 
       - name: Publish packages
         run: pnpm ci:snapshot

.github/workflows/ci-push-main.yml

@@ -53,6 +53,9 @@ jobs:
         - name: Install Tools & Dependencies
           uses: withstudiocms/automations/.github/actions/install@main
 
+        - name: Build packages
+          run: pnpm ci:prepublish
+
         - name: Create Release Pull Request or Publish to npm
           id: changesets
           uses: changesets/action@v1

.vscode/settings.json

@@ -8,21 +8,27 @@
   "editor.gotoLocation.multipleDefinitions": "goto",
   "cSpell.words": [
     "astrojs",
+    "checkmark",
     "createtoast",
     "dismissable",
     "Eleventy",
     "fira",
     "fontsource",
     "frontmatter",
+    "heroicons",
     "iconify",
     "louisescher",
     "Matthiesen",
     "onest",
     "pathe",
+    "polyline",
+    "searchselect",
     "socialproof",
     "studiocms",
+    "themetoggle",
     "Thum",
     "tsconfigs",
+    "vite",
     "withstudiocms"
   ]
 }

biome.json

@@ -33,7 +33,13 @@
     "rules": {
       "recommended": true,
       "suspicious": {
-        "noExplicitAny": "warn"
+        "noExplicitAny": "warn",
+        "noImplicitAnyLet": "info"
+      },
+      "style": {
+        "noNonNullAssertion": "off",
+        "noParameterAssign": "info",
+        "useSingleVarDeclarator": "info"
       }
     }
   },

build-scripts/cmd/build.js

@@ -0,0 +1,187 @@
+import { execSync } from 'node:child_process';
+import fs from 'node:fs/promises';
+import esbuild from 'esbuild';
+import { copy } from 'esbuild-plugin-copy';
+import glob from 'fast-glob';
+import { dim, gray, green, red, yellow } from 'kleur/colors';
+
+/** @type {import('esbuild').BuildOptions} */
+const defaultConfig = {
+	minify: false,
+	format: 'esm',
+	platform: 'node',
+	target: 'node18',
+	sourcemap: false,
+	sourcesContent: false,
+};
+
+const dt = new Intl.DateTimeFormat('en-us', {
+	hour: '2-digit',
+	minute: '2-digit',
+});
+
+const dtsGen = (buildTsConfig) => ({
+	name: 'TypeScriptDeclarationsPlugin',
+	setup(build) {
+		build.onEnd((result) => {
+			if (result.errors.length > 0) return;
+			const date = dt.format(new Date());
+			console.log(`${dim(`[${date}]`)} Generating TypeScript declarations...`);
+			try {
+				const res = execSync(
+					`tsc --emitDeclarationOnly ${buildTsConfig ? '-p tsconfig.build.json' : ''} --outDir ./dist`
+				);
+				console.log(res.toString());
+				console.log(dim(`[${date}] `) + green('√ Generated TypeScript declarations'));
+			} catch (error) {
+				console.error(dim(`[${date}] `) + red(`${error}\n\n${error.stdout.toString()}`));
+			}
+		});
+	},
+});
+
+const CopyConfig = {
+	assets: [
+		{
+			from: ['./src/**/*.!(ts|js|css)'],
+			to: '.',
+		},
+	],
+};
+
+export default async function build(...args) {
+	const config = Object.assign({}, defaultConfig);
+	const isDev = args.slice(-1)[0] === 'IS_DEV';
+	const patterns = args
+		.filter((f) => !!f) // remove empty args
+		.map((f) => f.replace(/^'/, '').replace(/'$/, '')); // Needed for Windows: glob strings contain surrounding string chars??? remove these
+	const entryPoints = [].concat(
+		...(await Promise.all(
+			patterns.map((pattern) => glob(pattern, { filesOnly: true, absolute: true }))
+		))
+	);
+	const date = dt.format(new Date());
+
+	const noClean = args.includes('--no-clean-dist');
+	const bundle = args.includes('--bundle');
+	const forceCJS = args.includes('--force-cjs');
+	const buildTsConfig = args.includes('--build-tsconfig');
+
+	const { type = 'module', dependencies = {} } = await readPackageJSON('./package.json');
+
+	config.define = {};
+	for (const [key, value] of await getDefinedEntries()) {
+		config.define[`process.env.${key}`] = JSON.stringify(value);
+	}
+	const format = type === 'module' && !forceCJS ? 'esm' : 'cjs';
+
+	const outdir = 'dist';
+
+	if (!noClean) {
+		console.log(
+			`${dim(`[${date}]`)} Cleaning dist directory... ${dim(`(${entryPoints.length} files found)`)}`
+		);
+		await clean(outdir);
+	}
+
+	if (!isDev) {
+		console.log(
+			`${dim(`[${date}]`)} Building...${bundle ? '(Bundling)' : ''} ${dim(`(${entryPoints.length} files found)`)}`
+		);
+		await esbuild.build({
+			...config,
+			bundle,
+			external: bundle ? Object.keys(dependencies) : undefined,
+			entryPoints,
+			outdir,
+			outExtension: forceCJS ? { '.js': '.cjs' } : {},
+			format,
+			plugins: [copy(CopyConfig), dtsGen(buildTsConfig)],
+		});
+		console.log(dim(`[${date}] `) + green('√ Build Complete'));
+		return;
+	}
+
+	const rebuildPlugin = {
+		name: 'dev:rebuild',
+		setup(build) {
+			build.onEnd(async (result) => {
+				const date = dt.format(new Date());
+				if (result?.errors.length) {
+					console.error(dim(`[${date}] `) + red(error || result.errors.join('\n')));
+				} else {
+					if (result.warnings.length) {
+						console.info(
+							dim(`[${date}] `) + yellow(`! updated with warnings:\n${result.warnings.join('\n')}`)
+						);
+					}
+					console.info(dim(`[${date}] `) + green('√ updated'));
+				}
+			});
+		},
+	};
+
+	const builder = await esbuild.context({
+		...config,
+		entryPoints,
+		outdir,
+		format,
+		sourcemap: 'linked',
+		plugins: [copy(CopyConfig), rebuildPlugin, dtsGen(buildTsConfig)],
+	});
+
+	console.log(
+		`${dim(`[${date}] `) + gray('Watching for changes...')} ${dim(`(${entryPoints.length} files found)`)}`
+	);
+	await builder.watch();
+
+	process.on('beforeExit', () => {
+		builder.stop?.();
+	});
+}
+
+async function clean(outdir) {
+	const files = await glob([`${outdir}/**`], { filesOnly: true });
+	await Promise.all(files.map((file) => fs.rm(file, { force: true })));
+}
+
+/**
+ * Contextual `define` values to statically replace in the built JS output.
+ * Available to all packages, but mostly useful for CLIs like `create-astro`.
+ */
+async function getDefinedEntries() {
+	const define = {
+		/** The current version (at the time of building) for the current package, such as `astro` or `@astrojs/sitemap` */
+		PACKAGE_VERSION: await getInternalPackageVersion('./package.json'),
+		/** The current version (at the time of building) for `typescript` */
+		TYPESCRIPT_VERSION: await getWorkspacePackageVersion('typescript'),
+	};
+	for (const [key, value] of Object.entries(define)) {
+		if (value === undefined) {
+			delete define[key];
+		}
+	}
+	return Object.entries(define);
+}
+
+async function readPackageJSON(path) {
+	return await fs.readFile(path, { encoding: 'utf8' }).then((res) => JSON.parse(res));
+}
+
+async function getInternalPackageVersion(path) {
+	return readPackageJSON(path).then((res) => res.version);
+}
+
+async function getWorkspacePackageVersion(packageName) {
+	const { dependencies, devDependencies } = await readPackageJSON(
+		new URL('../../package.json', import.meta.url)
+	);
+	const deps = { ...dependencies, ...devDependencies };
+	const version = deps[packageName];
+	if (!version) {
+		throw new Error(
+			`Unable to resolve "${packageName}". Is it a dependency of the workspace root?`
+		);
+	}
+	return version.replace(/^\D+/, '');
+}

build-scripts/index.js

@@ -0,0 +1,14 @@
+#!/usr/bin/env node
+export default async function run() {
+	const [cmd, ...args] = process.argv.slice(2);
+	switch (cmd) {
+		case 'dev':
+		case 'build': {
+			const { default: build } = await import('./cmd/build.js');
+			await build(...args, cmd === 'dev' ? 'IS_DEV' : undefined);
+			break;
+		}
+	}
+}
+
+run();

build-scripts/jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "strict": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "target": "esnext"
+  }
+}

build-scripts/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "build-scripts",
+  "version": "0.0.14",
+  "private": true,
+  "type": "module",
+  "main": "./index.js",
+  "bin": {
+    "build-scripts": "./index.js"
+  },
+  "dependencies": {
+    "esbuild": "^0.24.2",
+    "esbuild-plugin-copy": "^2.1.1",
+    "fast-glob": "^3.3.2",
+    "kleur": "^4.1.5",
+    "p-limit": "^6.1.0",
+    "tinyexec": "^0.3.1",
+    "tsconfck": "^3.1.4"
+  }
+}

docs/astro.config.mts

@@ -1,5 +1,6 @@
 import starlight from '@astrojs/starlight';
 import onestWoff2 from '@fontsource-variable/onest/files/onest-latin-wght-normal.woff2?url';
+import ui from '@studiocms/ui';
 import { defineConfig, envField } from 'astro/config';
 import rehypePluginKit from './src/plugins/rehypePluginKit';
 
@@ -90,14 +91,14 @@ export default defineConfig({
 					tag: 'meta',
 					attrs: {
 						property: 'og:image',
-						content: `${site}og.png?v=2`,
+						content: `${site}og.png`,
 					},
 				},
 				{
 					tag: 'meta',
 					attrs: {
 						property: 'twitter:image',
-						content: `${site}og.png?v=2`,
+						content: `${site}og.png`,
 					},
 				},
 				{
@@ -158,10 +159,6 @@ export default defineConfig({
 						{
 							label: 'Installation',
 							link: 'docs/',
-							badge: {
-								text: 'Updated!',
-								variant: 'success',
-							},
 						},
 						{
 							label: 'Release Notes',
@@ -174,7 +171,14 @@ export default defineConfig({
 					],
 				},
 				{
-					label: 'Upgrade Guides',
+					label: 'Guides',
+					autogenerate: {
+						directory: 'docs/guides',
+						collapsed: true,
+					},
+				},
+				{
+					label: 'Upgrading StudioCMS',
 					autogenerate: {
 						directory: 'docs/upgrade-guides',
 						collapsed: true,
@@ -196,5 +200,6 @@ export default defineConfig({
 				},
 			],
 		}),
+		ui()
 	],
 });