@filip.mazev/blocks 1.0.2 → 1.0.3

package/README.md

@@ -1,3 +1,61 @@
-# Blocks Umbrella Package
+# @filip.mazev/blocks
 
 This package is used to provide the Angular Schematic for adding the blocks libraries.
+
+The **Blocks** umbrella package is the official entry point and Angular Schematic for the Blocks UI ecosystem. It provides a seamless, zero-config installation experience, allowing you to integrate our core tools, modals, and toast notifications into your Angular workspace with a single command.
+
+## Installation
+
+To install the complete Blocks ecosystem and automatically configure your workspace, run:
+
+```bash
+ng add @filip.mazev/blocks
+```
+
+## What does ng add do?
+
+When you run the command above, the Angular CLI will execute our custom schematic to handle the boilerplate for you:
+
+* Interactive Theme Selection: You will be prompted to choose your preferred global theme (Default or Orange Company).
+* Dependency Management: Automatically adds the latest versions of the Blocks ecosystem to your package.json and runs npm install.
+* SCSS Injection: Intelligently locates your project's global stylesheet (styles.scss or styles.sass) and injects the required @use statements, mixins, and both light/dark mode CSS variables based on your theme selection.
+
+## Included Packages
+
+Running the schematic will automatically install the following libraries:
+
+* @filip.mazev/blocks-core: The foundational package containing the styling engine, SCSS variables, scroll-lock services, and window dimension utilities.
+
+* @filip.mazev/modal: A highly customizable, service-driven modal system with swipe-to-close gestures, custom guards, and responsive layouts.
+
+* @filip.mazev/toastr: A component-driven toast notification system featuring smart queue management, auto-dismissal, and built-in status views.
+
+## Manual Setup (Without Angular CLI)
+
+If you prefer not to use `ng add` or are in an environment that doesn't support Angular Schematics, you can install the packages manually:
+
+```bash
+npm install @filip.mazev/blocks-core @filip.mazev/modal @filip.mazev/toastr
+```
+
+Then, manually configure your styles.scss:
+
+```scss
+@use '@filip.mazev/blocks-core/src/lib/styles/index' as *;
+@use '@filip.mazev/modal/lib/styles/index' as modal;
+@use '@filip.mazev/toastr/lib/styles/index' as toastr;
+
+@layer base {
+    :root {
+        @include core-theme($default-light-theme-config);
+        @include modal.modal-theme();
+        @include toastr.toastr-theme(());
+    }
+
+    [data-theme='dark'] {
+        @include core-theme($default-dark-theme-config);
+    }
+}
+```
+
+_For detailed usage instructions, API references, and component configurations, please refer to the READMEs of the individual packages._

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filip.mazev/blocks",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "schematics": "./schematics/collection.json",
   "peerDependencies": {
     "@angular/core": "^21.1.1",

package/schematics/collection.json

@@ -3,7 +3,8 @@
     "schematics": {
         "ng-add": {
             "description": "Installs blocks-core, modal, and toastr, and configures the SCSS theme.",
-            "factory": "./ng-add/index#ngAdd"
+            "factory": "./ng-add/index#ngAdd",
+            "schema": "./ng-add/schema.json"
         }
     }
 }

package/schematics/ng-add/index.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ngAdd = ngAdd;
 const tasks_1 = require("@angular-devkit/schematics/tasks");
-function ngAdd() {
+function ngAdd(options) {
     return (tree, context) => {
         addDependencies(tree, context);
-        injectStyles(tree, context);
+        injectStyles(tree, context, options);
         context.addTask(new tasks_1.NodePackageInstallTask());
         return tree;
     };
@@ -20,9 +20,8 @@ function addDependencies(tree, context) {
     if (!packageJsonBuffer)
         return;
     const packageJson = JSON.parse(packageJsonBuffer.toString('utf-8'));
-    if (!packageJson.dependencies) {
+    if (!packageJson.dependencies)
         packageJson.dependencies = {};
-    }
     const packages = [
         '@filip.mazev/blocks-core',
         '@filip.mazev/modal',
@@ -40,7 +39,7 @@ function addDependencies(tree, context) {
         tree.overwrite(packageJsonPath, JSON.stringify(packageJson, null, 2));
     }
 }
-function injectStyles(tree, context) {
+function injectStyles(tree, context, options) {
     const workspaceConfigPath = '/angular.json';
     if (!tree.exists(workspaceConfigPath)) {
         context.logger.warn('Could not find angular.json. Please configure the Blocks theme manually.');
@@ -78,6 +77,8 @@ function injectStyles(tree, context) {
         context.logger.info('Blocks SCSS configuration already exists. Skipping style injection.');
         return;
     }
+    const lightThemeVar = options.theme === 'orange-company' ? '$orange-company-light-theme-config' : '$default-light-theme-config';
+    const darkThemeVar = options.theme === 'orange-company' ? '$orange-company-dark-theme-config' : '$default-dark-theme-config';
     const blocksThemeSnippet = `
 @use '@filip.mazev/blocks-core/src/lib/styles/index' as *;
 @use '@filip.mazev/modal/lib/styles/index' as modal;
@@ -85,12 +86,16 @@ function injectStyles(tree, context) {
 
 @layer base {
     :root {
-        @include core-theme($default-light-theme-config);
+        @include core-theme(${lightThemeVar});
         @include modal.modal-theme();
         @include toastr.toastr-theme(());
     }
+
+    [data-theme='dark'] {
+        @include core-theme(${darkThemeVar});
+    }
 }
 `;
     tree.overwrite(targetStylePath, blocksThemeSnippet + '\n' + content);
-    context.logger.info(`Successfully injected Blocks theme configuration into ${targetStylePath}.`);
+    context.logger.info(`Successfully injected the ${options.theme} Blocks theme configuration into ${targetStylePath}.`);
 }

package/schematics/ng-add/schema.json

@@ -0,0 +1,34 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema",
+    "id": "BlocksNgAddSchema",
+    "title": "Blocks Initialization Options",
+    "type": "object",
+    "properties": {
+        "theme": {
+            "type": "string",
+            "description": "Select the default theme for your UI blocks.",
+            "enum": [
+                "default",
+                "orange-company"
+            ],
+            "x-prompt": {
+                "message": "Which theme would you like to use?",
+                "type": "list",
+                "items": [
+                    {
+                        "value": "default",
+                        "label": "Default Theme"
+                    },
+                    {
+                        "value": "orange-company",
+                        "label": "Orange Company Theme"
+                    }
+                ]
+            },
+            "default": "default"
+        }
+    },
+    "required": [
+        "theme"
+    ]
+}