@studiocms/ui 0.3.2 → 0.4.0

package/dist/utils/iconStrings.js

@@ -0,0 +1,13 @@
+const iconStrings = {
+  "check-circle": '<svg xmlns="http://www.w3.org/2000/svg" class="%class%" width="%width%" height="%height%" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>',
+  "exclamation-circle": '<svg xmlns="http://www.w3.org/2000/svg" class="%class%" width="%width%" height="%height%" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" /></svg>',
+  "information-circle": '<svg xmlns="http://www.w3.org/2000/svg" class="%class%" width="%width%" height="%height%" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" /></svg>',
+  "x-mark": '<svg xmlns="http://www.w3.org/2000/svg" class="%class%" width="%width%" height="%height%"  fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>',
+  "exclamation-triangle": '<svg xmlns="http://www.w3.org/2000/svg" class="%class%" width="%width%" height="%height%" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>'
+};
+function getIconString(icon, classes, width, height) {
+  return iconStrings[icon].replace("%class%", classes).replace("%width%", width.toString()).replace("%height%", height.toString());
+}
+export {
+  getIconString
+};

package/dist/utils/integration-utils.d.ts

@@ -0,0 +1,130 @@
+import type { HookParameters } from 'astro';
+import type { PluginOption } from 'vite';
+export type Hooks = Required<Astro.IntegrationHooks>;
+/**
+ * Allows resolving paths relatively to the integration folder easily. Call it like this:
+ *
+ * @param {string} _base - The location you want to create relative references from. `import.meta.url` is usually what you'll want.
+ *
+ * @see https://astro-integration-kit.netlify.app/core/create-resolver/
+ *
+ * @example
+ * ```ts
+ * const { resolve } = createResolver(import.meta.url);
+ * const pluginPath = resolve("./plugin.ts");
+ * ```
+ *
+ * This way, you do not have to add your plugin to your package.json `exports`.
+ */
+export declare const createResolver: (_base: string) => {
+    resolve: (...path: Array<string>) => string;
+};
+/**
+ * A utility to be used on an Astro hook.
+ *
+ * @see defineUtility
+ */
+export type HookUtility<THook extends keyof Hooks, TArgs extends Array<any>, TReturn> = (params: HookParameters<THook>, ...args: TArgs) => TReturn;
+/**
+ * Allows defining a type-safe function requiring all the params of a given hook.
+ * It uses currying to make TypeScript happy.
+ *
+ * @param {string} _hook
+ *
+ * @see https://astro-integration-kit.netlify.app/core/define-utility/
+ *
+ * @example
+ * ```ts
+ * const test = defineUtility("astro:config:setup")((params, foo: boolean) => {
+ *  return "bar";
+ * });
+ * ```
+ */
+export declare const defineUtility: <THook extends keyof Hooks>(_hook: THook) => <TArgs extends Array<any>, T>(fn: HookUtility<THook, TArgs, T>) => HookUtility<THook, TArgs, T>;
+/**
+ * Checks for the existence of a Vite plugin inside the Astro config.
+ *
+ * @param {import("astro").HookParameters<"astro:config:setup">} params
+ * @param {Params} options
+ * @param {string | import("vite").PluginOption} options.plugin
+ *
+ * @see https://astro-integration-kit.netlify.app/utilities/has-vite-plugin/
+ *
+ * @example
+ * ```ts
+ * hasVitePlugin(params, {
+ * 		plugin: "vite-plugin-my-integration",
+ * })
+ * ```
+ */
+export declare const hasVitePlugin: HookUtility<"astro:config:setup", [{
+    plugin: string | PluginOption;
+}], boolean>;
+/**
+ * Adds a [vite plugin](https://vitejs.dev/guide/using-plugins) to the
+ * Astro config.
+ *
+ * @param {import("astro").HookParameters<"astro:config:setup">} params
+ * @param {object} options
+ * @param {import("vite").PluginOption} options.plugin
+ * @param {boolean} [options.warnDuplicated=true]
+ *
+ * @see https://astro-integration-kit.netlify.app/utilities/add-vite-plugin/
+ *
+ * @example
+ * ```ts
+ * addVitePlugin(params, {
+ * 		plugin,
+ * 		warnDuplicated: true,
+ * })
+ * ```
+ */
+export declare const addVitePlugin: HookUtility<"astro:config:setup", [{
+    plugin: PluginOption;
+    warnDuplicated?: boolean;
+}], void>;
+type VirtualImport = {
+    id: string;
+    content: string;
+    context?: 'server' | 'client' | undefined;
+};
+type Imports = Record<string, string> | Array<VirtualImport>;
+/**
+ * Creates a Vite virtual module and updates the Astro config.
+ * Virtual imports are useful for passing things like config options, or data computed within the integration.
+ *
+ * @param {import("astro").HookParameters<"astro:config:setup">} params
+ * @param {object} options
+ * @param {string} options.name
+ * @param {Imports} options.imports
+ *
+ * @see https://astro-integration-kit.netlify.app/utilities/add-virtual-imports/
+ *
+ * @example
+ * ```ts
+ * // my-integration/index.ts
+ * import { addVirtualImports } from "astro-integration-kit";
+ *
+ * addVirtualImports(params, {
+ * 		name: 'my-integration',
+ * 		imports: {
+ * 			'virtual:my-integration/config': `export default ${ JSON.stringify({foo: "bar"}) }`,
+ * 		},
+ *	});
+ * ```
+ *
+ * This is then readable anywhere else in your integration:
+ *
+ * ```ts
+ * // myIntegration/src/component/layout.astro
+ * import config from "virtual:my-integration/config";
+ *
+ * console.log(config.foo) // "bar"
+ * ```
+ */
+export declare const addVirtualImports: HookUtility<"astro:config:setup", [{
+    name: string;
+    imports: Imports;
+    __enableCorePowerDoNotUseOrYouWillBeFired?: boolean;
+}], void>;
+export {};

package/dist/utils/integration-utils.js

@@ -0,0 +1,161 @@
+import { fileURLToPath } from "node:url";
+import { AstroError } from "astro/errors";
+import { dirname, resolve } from "pathe";
+const createResolver = (_base) => {
+  let base = _base;
+  if (base.startsWith("file://")) {
+    base = dirname(fileURLToPath(base));
+  }
+  return {
+    resolve: (...path) => resolve(base, ...path)
+  };
+};
+const defineUtility = (_hook) => (
+  /**
+   * The function itself
+   * @param {Function} fn;
+   */
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  (fn) => fn
+);
+function getPluginNames(plugins) {
+  const names = [];
+  if (plugins) {
+    for (const plugin of plugins) {
+      if (!plugin) continue;
+      if (Array.isArray(plugin)) {
+        names.push(...getPluginNames(plugin));
+        continue;
+      }
+      if (plugin instanceof Promise) {
+        continue;
+      }
+      names.push(plugin.name);
+    }
+  }
+  return names;
+}
+const hasVitePlugin = defineUtility("astro:config:setup")(
+  ({ config }, {
+    plugin
+  }) => {
+    if (!plugin || plugin instanceof Promise) return false;
+    const currentPlugins = new Set(getPluginNames(config?.vite?.plugins));
+    const plugins = /* @__PURE__ */ new Set();
+    if (typeof plugin === "string") {
+      plugins.add(plugin);
+    }
+    if (typeof plugin === "object") {
+      if (Array.isArray(plugin)) {
+        const names = new Set(
+          getPluginNames(plugin)
+        );
+        for (const name of names) plugins.add(name);
+      } else {
+        plugins.add(plugin.name);
+      }
+    }
+    return [...plugins].some((name) => currentPlugins.has(name));
+  }
+);
+const addVitePlugin = defineUtility("astro:config:setup")(
+  (params, {
+    plugin,
+    warnDuplicated = true
+  }) => {
+    const { updateConfig, logger } = params;
+    if (warnDuplicated && hasVitePlugin(params, { plugin })) {
+      logger.warn(
+        `The Vite plugin "${plugin.name}" is already present in your Vite configuration, this plugin may not behave correctly.`
+      );
+    }
+    updateConfig({
+      vite: {
+        plugins: [plugin]
+      }
+    });
+  }
+);
+const incrementPluginName = (name) => {
+  let count = 1;
+  return `${name.replace(/-(\d+)$/, (_, c) => {
+    count = Number.parseInt(c) + 1;
+    return "";
+  })}-${count}`;
+};
+const resolveVirtualModuleId = (id) => {
+  return `\0${id}`;
+};
+const createVirtualModule = (name, _imports, bypassCoreValidation) => {
+  const imports = Array.isArray(_imports) ? _imports : Object.entries(_imports).map(([id, content]) => ({
+    id,
+    content,
+    context: void 0
+  }));
+  const duplicatedImports = {};
+  for (const { id, context } of imports) {
+    duplicatedImports[id] ??= [];
+    duplicatedImports[id]?.push(...context === void 0 ? ["server", "client"] : [context]);
+  }
+  for (const [id, contexts] of Object.entries(duplicatedImports)) {
+    if (contexts.length !== [...new Set(contexts)].length) {
+      throw new AstroError(
+        `Virtual import with id "${id}" has been registered several times with conflicting contexts.`
+      );
+    }
+  }
+  const resolutionMap = Object.fromEntries(
+    imports.map(({ id }) => {
+      if (!bypassCoreValidation && id.startsWith("astro:")) {
+        throw new AstroError(
+          `Virtual import name prefix can't be "astro:" (for "${id}") because it's reserved for Astro core.`
+        );
+      }
+      return [resolveVirtualModuleId(id), id];
+    })
+  );
+  return {
+    name,
+    resolveId(id) {
+      if (imports.find((_import) => _import.id === id)) {
+        return resolveVirtualModuleId(id);
+      }
+      return;
+    },
+    load(id, options) {
+      const resolution = resolutionMap[id];
+      if (resolution) {
+        const context = options?.ssr ? "server" : "client";
+        const data = imports.find(
+          (_import) => _import.id === resolution && (_import.context === void 0 || _import.context === context)
+        );
+        if (data) {
+          return data.content;
+        }
+      }
+      return;
+    }
+  };
+};
+const addVirtualImports = defineUtility("astro:config:setup")(
+  (params, {
+    name,
+    imports,
+    __enableCorePowerDoNotUseOrYouWillBeFired = false
+  }) => {
+    let pluginName = `vite-plugin-${name}`;
+    while (hasVitePlugin(params, { plugin: pluginName }))
+      pluginName = incrementPluginName(pluginName);
+    addVitePlugin(params, {
+      warnDuplicated: false,
+      plugin: createVirtualModule(pluginName, imports, __enableCorePowerDoNotUseOrYouWillBeFired)
+    });
+  }
+);
+export {
+  addVirtualImports,
+  addVitePlugin,
+  createResolver,
+  defineUtility,
+  hasVitePlugin
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiocms/ui",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.",
   "repository": {
     "type": "git",
@@ -30,27 +30,43 @@
   },
   "sideEffects": false,
   "files": [
-    "src"
+    "dist",
+    "assets"
   ],
   "license": "MIT",
   "type": "module",
   "exports": {
-    ".": "./src/integration.ts",
-    "./components": "./src/components.ts",
-    "./layouts": "./src/layouts.ts",
-    "./css/*": "./src/css/*",
-    "./utils/*": "./src/utils/*",
-    "./types": "./src/types/index.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./toolbar": {
+      "types": "./dist/toolbar/index.d.ts",
+      "default": "./dist/toolbar/index.js"
+    },
+    "./components/*": "./dist/components/*",
+    "./css/*": "./dist/css/*",
+    "./utils/*": "./dist/utils/*",
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/types/index.js"
+    }
   },
   "dependencies": {
     "@iconify-json/heroicons": "^1.2.1",
     "@iconify/utils": "^2.1.33",
+    "astro-transition-event-polyfill": "^1.1.0",
     "pathe": "^1.1.2"
   },
   "peerDependencies": {
-    "astro": "^4.5 || ^5.0.0-beta.0"
+    "astro": "^4.5 || ^5.0.0-beta.0",
+    "vite": "^5.0.0 || ^6.0.0"
   },
   "devDependencies": {
     "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "build": "build-scripts build 'src/**/*.{ts,css}' --build-tsconfig",
+    "dev": "build-scripts dev 'src/**/*.{ts,css}' --build-tsconfig"
   }
 }

package/src/components/BaseHead.astro

@@ -1,22 +0,0 @@
----
-import { type HeadConfig, createHead, headDefaults } from '../utils/headers';
-
-export interface Props {
-	title: string;
-	description: string;
-	headers?: HeadConfig | undefined;
-	image?: string | undefined;
-}
-
-const { title, description, image, headers: userHeaders } = Astro.props;
-
-const canonicalURL = Astro.site ? new URL(Astro.url.pathname, Astro.site) : undefined;
-
-// This should probably be removed from the UI lib at some point
-const defaultHeaders = headDefaults(title, description, Astro, image, canonicalURL);
-
-const head = createHead(defaultHeaders, userHeaders || []);
----
-{head.map(({ tag: Tag, attrs, content }) => (
-  <Tag {...attrs} set:html={content} />
-))}