chore: release v2.0.0-alpha.4

Author: programming-with-ia

package.json

@@ -7,9 +7,7 @@
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "check-types": "turbo run check-types",
-    "pkg-build": "turbo run build --filter=shadcn-theme-editor && tsx scripts/scaflo.ts",
-    "publish:pkg": "pnpm run package-build && pnpm publish --filter shadcn-theme-editor",
-    "publish:pkg:dry": "turbo run build --filter=shadcn-theme-editor && pnpm publish --filter shadcn-theme-editor --dry-run --no-git-checks"
+    "pkg-build": "turbo run build --filter=shadcn-theme-editor && tsx scripts/scaflo.ts"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",

pnpm-lock.yaml

@@ -2,6 +2,24 @@ import fs from "fs-extra";
 import path from "path";
 import { fileURLToPath } from "url";
 
+//* Scaflo types
+
+type FileWriteMethods = "a" | "w" | Record<string, string>; // Append, Write (default), or Replace key-value
+
+type FileType = {
+  name: string;
+  content: string;
+  method?: FileWriteMethods;
+};
+
+type JsonStructure = {
+  dependencies?: Array<string | Record<string, string>>;
+  files?: FileType[];
+  groups?: { base: string; files: FileType[] };
+
+  registryDependencies: string[]; //* modified (shadcn's components)
+};
+
 const currentFile = fileURLToPath(import.meta.url);
 const rootDir = path.resolve(path.dirname(currentFile), "..");
 
@@ -34,28 +52,36 @@ function getAllFileNames(dirPath: string): string[] {
   }
 }
 
-type RegistryFile = {
-  path: string;
-  type: "registry:component";
-  content: string;
-};
+function readDeps() {
+  const pkg = fs.readJsonSync(path.join(editorPath, "package.json"));
 
-type RegistryJson = {
-  $schema: string;
-  name: string;
-  type: "registry:component";
-  title: string;
-  description: string;
-  files: RegistryFile[];
-  dependencies: string[];
-  registryDependencies: string[];
-};
+  return Object.entries(pkg.dependencies).map(
+    ([name, version]) => `${name}@${version}`,
+  );
+}
+
+// type RegistryFile = {
+//   path: string;
+//   type: "registry:component";
+//   content: string;
+// };
+
+// type RegistryJson = {
+//   $schema: string;
+//   name: string;
+//   type: "registry:component";
+//   title: string;
+//   description: string;
+//   files: RegistryFile[];
+//   dependencies: string[];
+//   registryDependencies: string[];
+// };
 
 function generateShadcnRegistry(
   rootDir: string,
   _modify?: (content: string, filePath: string) => string,
-): RegistryJson {
-  const files: RegistryFile[] = [];
+): JsonStructure {
+  const files: FileType[] = [];
   const modify: NonNullable<typeof _modify> = _modify ?? ((content) => content);
 
   function walk(dir: string) {
@@ -74,8 +100,7 @@ function generateShadcnRegistry(
         const modified = modify(original, fullPath);
 
         files.push({
-          path: `registry/magicui/${path.relative(rootDir, fullPath).replace(/\\/g, "/")}`,
-          type: "registry:component",
+          name: `/${path.relative(rootDir, fullPath).replace(/\\/g, "/")}`,
           content: modified,
         });
       }
@@ -84,23 +109,28 @@ function generateShadcnRegistry(
 
   walk(rootDir);
 
-  const registry: RegistryJson = {
-    $schema: "https://ui.shadcn.com/schema/registry-item.json",
-    name: "Shadcn Theme Editor",
-    type: "registry:component",
-    title: "Shadcn Theme Editor",
-    description:
-      "Shadcn Theme Editor is a user-friendly component designed to simplify the process of managing and customizing theme colors in Shadcn-based projects.",
+  const registry: JsonStructure = {
+    // $schema: "https://ui.shadcn.com/schema/registry-item.json",
+    // name: "Shadcn Theme Editor",
+    // type: "registry:component",
+    // title: "Shadcn Theme Editor",
+    // description:
+    //   "Shadcn Theme Editor is a user-friendly component designed to simplify the process of managing and customizing theme colors in Shadcn-based projects.",
     files,
     registryDependencies: getAllFileNames(
       path.join(editorPath, "/src/components/ui"),
     ),
-    dependencies: ["lucide-react"],
+    dependencies: ["lucide-react", ...readDeps()],
   };
 
   return registry;
 }
 
 console.log("⏳  Starting Shadcn registry generation…");
-fs.writeJSONSync(outputPath, generateShadcnRegistry(editorMainPath));
+fs.writeJSONSync(
+  outputPath,
+  generateShadcnRegistry(editorMainPath, (content) =>
+    content.replace("@/components/icons", "lucide-react"),
+  ),
+);
 console.log(`✅  Registry successfully generated at: ${outputPath}`);

scripts/scaflo.ts

@@ -1,6 +1,6 @@
 {
   "name": "shadcn-theme-editor",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.4",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",

shadcn-theme-editor/package.json

@@ -49,12 +49,17 @@ export default function Editor({
   triggerClassName,
   toCssString,
   getCopyValue,
+  title,
+  getContainer,
 }: {
   side?: Side;
   className?: string;
   triggerClassName?: string;
+  title?: string;
 } & Pick<React.ComponentProps<typeof Sidebar>, "customColors"> &
-  Partial<Pick<typeof sharedData, "toCssString" | "getCopyValue">>) {
+  Partial<
+    Pick<typeof sharedData, "toCssString" | "getCopyValue" | "getContainer">
+  >) {
   //*
 
   useEffect(() => {
@@ -149,6 +154,8 @@ export default function Editor({
     sharedData.toCssString = toCssString ?? sharedData.toCssString;
     sharedData.getCopyValue = getCopyValue ?? sharedData.getCopyValue;
 
+    sharedData.getContainer = getContainer ?? sharedData.getContainer;
+
     checkLocalStorageTheme();
   }, []);
 
@@ -165,15 +172,16 @@ export default function Editor({
         <PaletteIcon className="size-6" />
       </SheetTrigger>
       <SheetContent
+        data-shadcn-theme-editor
         side={side}
         className={cn(
-          "bg-background flex flex-col overflow-hidden py-4 sm:max-w-72",
+          "bg-background flex flex-col gap-0 overflow-hidden py-4 sm:max-w-72",
           className,
         )}
       >
         {sharedData.success ? (
           <>
-            <Header />
+            <Header title={title} />
             <Sidebar customColors={customColors} />
             <Footer />
             <SheetClose />
@@ -188,12 +196,10 @@ export default function Editor({
   );
 }
 
-function Header() {
+function Header({ title = "Shadcn Theme Editor" }: { title?: string }) {
   return (
     <div className="border-b px-2 shadow-md">
-      <span className="flex items-center px-2 py-1 font-semibold">
-        Shadcn Theme Editor
-      </span>
+      <span className="flex items-center px-2 py-1 font-semibold">{title}</span>
       <div className="mb-1 mt-2 flex items-center justify-between gap-2 py-1 pl-2 text-sm font-semibold">
         Theming
         <div className="flex pr-2">

shadcn-theme-editor/src/(main)/index.tsx

@@ -23,6 +23,9 @@ export const sharedData: {
 
   // all colors:
   allColors: CustomColors; //! currently no need to shared
+
+  // Returns the container element to which styles will be applied
+  getContainer: () => HTMLElement;
 } = {
   toCssString: undefined as never,
   getCopyValue: undefined as never,
@@ -32,4 +35,5 @@ export const sharedData: {
   success: true,
   defaultThemeEmittor: createEmittor({}),
   allColors: {},
+  getContainer: () => document.documentElement,
 };

shadcn-theme-editor/src/(main)/lib/shared.ts

@@ -5,7 +5,7 @@ export const copy2clipboard = (text: string) =>
 
 export function setProperity(proprity: string, value: string | null) {
   // document.querySelector(":root")?.style.setProperty(proprity, value);
-  document.documentElement?.style.setProperty(proprity, value);
+  sharedData.getContainer().style.setProperty(proprity, value);
 }
 
 export function memoize<Args extends unknown[], R>(
@@ -31,7 +31,7 @@ export function resetCurrentTheme(full = true) {
     Only perform a full theme reset if no saved theme was found.
     If a theme exists, keep some settings so the saved theme can override them later.
   */
-  const style = document.documentElement.style;
+  const style = sharedData.getContainer().style;
 
   Object.keys(sharedData.currentTheme).forEach((propertyName) =>
     style.removeProperty(propertyName),