@educarehq/solaris-ui 0.3.3 → 0.6.0

package/package.json

@@ -1,6 +1,23 @@
 {
   "name": "@educarehq/solaris-ui",
-  "version": "0.3.3",
+  "version": "0.6.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/educarehq/solaris-ui.git",
+    "directory": "packages/angular"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "fesm2022",
+    "types",
+    "styles",
+    "schematics",
+    "README.md",
+    "package.json"
+  ],
   "peerDependencies": {
     "@angular-devkit/schematics": "^21.0.0",
     "@angular/cdk": "^21.2.0",

package/schematics/collection.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "init": {
+      "description": "Sets up @educarehq/solaris-ui styles and providers in an Angular project",
+      "factory": "./init/index#init",
+      "schema": "./init/schema.json",
+      "hidden": true
+    },
+    "ng-add": {
+      "description": "Adds @educarehq/solaris-ui to an Angular project",
+      "factory": "./ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
+    }
+  }
+}

package/schematics/init/fonts.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildFontSizeComment = buildFontSizeComment;
+/**
+ * Solaris uses the browser default root font-size (100%, typically 16px).
+ * Overriding the root font-size breaks WCAG 1.4.4 Resize Text, so the
+ * `default` scale is the only supported strategy.
+ */
+function buildFontSizeComment(options) {
+    const scale = options.scale ?? 'default';
+    if (scale !== 'default') {
+        return `// WARNING: solaris.core() uses the browser default root font-size (100%).
+// Custom root font-size strategies are not supported (WCAG 1.4.4 Resize Text).
+// Requested scale "${scale}" was ignored; default scale applied.`;
+    }
+    return `// Uses browser default root font-size (100%). All Solaris tokens are
+// calculated at 1rem = 16px. Do NOT override the root font-size.`;
+}

package/schematics/init/index.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.init = init;
+const fonts_1 = require("./fonts");
+const messages_1 = require("./messages");
+const providers_1 = require("./providers");
+const styles_1 = require("./styles");
+const workspace_1 = require("./workspace");
+function styleOptions(options) {
+    return {
+        colorScheme: options.colorScheme,
+        density: options.density,
+        radius: options.radius,
+        motion: options.reducedMotion === 'reduce' ? 'reduce' : 'auto',
+    };
+}
+function providerOptions(options) {
+    return {
+        colorScheme: options.colorScheme,
+        density: options.density,
+        reducedMotion: options.reducedMotion,
+    };
+}
+function init(options) {
+    return (tree, context) => {
+        (0, messages_1.logInfo)(context, 'Setting up Solaris UI...');
+        const project = (0, workspace_1.getProject)(tree, options.project);
+        const projectRoot = project.root;
+        if (!options.skipStyles) {
+            // 1. Create editable src/styles/solaris.scss
+            const solarisStylePath = (0, styles_1.createSolarisStyleFile)(tree, projectRoot, styleOptions(options));
+            (0, messages_1.logChange)(context, `Created style setup file: ${solarisStylePath}`);
+            // 2. Import it from the global styles entry
+            const globalStylesPath = (0, styles_1.getGlobalStylesPath)(tree, projectRoot);
+            if (globalStylesPath) {
+                const changed = (0, styles_1.importSolarisStyleFromGlobal)(tree, globalStylesPath, solarisStylePath);
+                if (changed) {
+                    (0, messages_1.logChange)(context, `Imported Solaris styles from ${globalStylesPath}`);
+                }
+                else {
+                    (0, messages_1.logSkip)(context, `Solaris styles already imported in ${globalStylesPath}`);
+                }
+            }
+            else {
+                (0, messages_1.logInfo)(context, 'No global styles file found. Import solaris.scss from your global styles entry.');
+            }
+        }
+        else {
+            (0, messages_1.logSkip)(context, 'Skipping style setup (skipStyles).');
+        }
+        if (!options.skipProviders) {
+            // 3. Add provideSolaris(...) to the application config
+            const appConfigPath = (0, providers_1.getAppConfigPath)(tree, projectRoot);
+            if (appConfigPath) {
+                const changed = (0, providers_1.updateAppConfig)(tree, appConfigPath, providerOptions(options));
+                if (changed) {
+                    (0, messages_1.logChange)(context, `Added provideSolaris(...) to ${appConfigPath}`);
+                }
+                else {
+                    (0, messages_1.logSkip)(context, `provideSolaris already present in ${appConfigPath}`);
+                }
+            }
+            else {
+                (0, messages_1.logInfo)(context, 'No app.config.ts found. Add provideSolaris(...) to your application providers.');
+            }
+        }
+        else {
+            (0, messages_1.logSkip)(context, 'Skipping provider setup (skipProviders).');
+        }
+        if (!options.skipStyles) {
+            const comment = (0, fonts_1.buildFontSizeComment)({});
+            (0, messages_1.logInfo)(context, comment);
+        }
+        (0, messages_1.logSuccess)(context, 'Solaris UI setup complete.');
+        return tree;
+    };
+}

package/schematics/init/messages.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logInfo = logInfo;
+exports.logChange = logChange;
+exports.logSuccess = logSuccess;
+exports.logSkip = logSkip;
+exports.logError = logError;
+function prefix(message, symbol) {
+    return `${symbol} ${message}`;
+}
+function logInfo(context, message) {
+    context.logger.info(prefix(message, 'ℹ'));
+}
+function logChange(context, message) {
+    context.logger.info(prefix(message, '✏️'));
+}
+function logSuccess(context, message) {
+    context.logger.info(prefix(message, '✅'));
+}
+function logSkip(context, message) {
+    context.logger.info(prefix(message, '⏭️'));
+}
+function logError(context, message) {
+    context.logger.error(prefix(message, '❌'));
+}

package/schematics/init/providers.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAppConfigPath = getAppConfigPath;
+exports.buildProviderConfig = buildProviderConfig;
+exports.addProvideSolarisImport = addProvideSolarisImport;
+exports.addProvideSolarisToProviders = addProvideSolarisToProviders;
+exports.updateAppConfig = updateAppConfig;
+const APP_CONFIG_CANDIDATES = ['src/app/app.config.ts', 'src/app.config.ts'];
+function getAppConfigPath(tree, projectRoot) {
+    for (const candidate of APP_CONFIG_CANDIDATES) {
+        const full = projectRoot ? `${projectRoot}/${candidate}` : candidate;
+        if (tree.exists(full)) {
+            return full;
+        }
+    }
+    return null;
+}
+function quote(value) {
+    return `'${value}'`;
+}
+function buildThemeEntry(options) {
+    const themeEntries = [];
+    if (options.colorScheme && options.colorScheme !== 'system') {
+        themeEntries.push(`colorScheme: ${quote(options.colorScheme)}`);
+    }
+    if (options.density && options.density !== 'comfortable') {
+        themeEntries.push(`density: ${quote(options.density)}`);
+    }
+    if (options.reducedMotion && options.reducedMotion !== 'auto') {
+        themeEntries.push(`reducedMotion: ${quote(options.reducedMotion)}`);
+    }
+    if (themeEntries.length === 0) {
+        return null;
+    }
+    const indented = themeEntries.map((e) => `      ${e}`).join(',\n');
+    return `    theme: {\n${indented},\n    }`;
+}
+function buildProviderConfig(options) {
+    const themeEntry = buildThemeEntry(options);
+    const topEntries = themeEntry ? [themeEntry] : [];
+    if (topEntries.length === 0) {
+        return 'provideSolaris(),';
+    }
+    const indented = topEntries.map((e) => `  ${e}`).join(',\n');
+    return `provideSolaris({\n${indented},\n  }),`;
+}
+function addProvideSolarisImport(content, importStatement) {
+    if (content.includes(importStatement)) {
+        return content;
+    }
+    const importRegex = /^import\s/gm;
+    const matches = [...content.matchAll(importRegex)];
+    if (matches.length === 0) {
+        return `${importStatement}\n\n${content}`;
+    }
+    const lastImport = matches[matches.length - 1];
+    const lastImportIndex = lastImport.index;
+    if (lastImportIndex === undefined) {
+        return `${importStatement}\n\n${content}`;
+    }
+    const importEnd = content.indexOf(';', lastImportIndex) + 1;
+    return `${content.slice(0, importEnd)}\n${importStatement}${content.slice(importEnd)}`;
+}
+function addProvideSolarisToProviders(content, providerEntry) {
+    if (/provideSolaris\s*\(/.test(content)) {
+        return content;
+    }
+    const providersMatch = content.match(/providers:\s*\[([\s\S]*?)\]/);
+    if (providersMatch) {
+        const providersContent = providersMatch[1];
+        const entry = providersContent.trim().length === 0
+            ? `\n    ${providerEntry}\n  `
+            : `${providersContent}\n    ${providerEntry}`;
+        return content.replace(providersMatch[0], `providers: [${entry}]`);
+    }
+    return content;
+}
+function updateAppConfig(tree, appConfigPath, options) {
+    const existingContent = tree.readText(appConfigPath);
+    if (/provideSolaris\s*\(/.test(existingContent)) {
+        return false;
+    }
+    const importStatement = `import { provideSolaris } from '@educarehq/solaris-ui';`;
+    const providerEntry = buildProviderConfig(options);
+    let updated = addProvideSolarisImport(existingContent, importStatement);
+    updated = addProvideSolarisToProviders(updated, providerEntry);
+    tree.overwrite(appConfigPath, updated);
+    return true;
+}

package/schematics/init/schema.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://educarehq.github.io/solaris-ui/schematics/init.schema.json",
+  "title": "Solaris UI init options",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add Solaris UI to",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "colorScheme": {
+      "type": "string",
+      "enum": ["light", "dark", "system"],
+      "default": "system",
+      "description": "Default color scheme",
+      "x-prompt": "Which color scheme should Solaris use by default?"
+    },
+    "density": {
+      "type": "string",
+      "enum": ["comfortable", "compact"],
+      "default": "comfortable",
+      "description": "Default density",
+      "x-prompt": "Which density should Solaris use by default?"
+    },
+    "radius": {
+      "type": "string",
+      "enum": ["none", "sm", "md", "lg", "xl", "full"],
+      "default": "md",
+      "description": "Default border radius",
+      "x-prompt": "Which border radius should Solaris use by default?"
+    },
+    "reducedMotion": {
+      "type": "string",
+      "enum": ["auto", "reduce", "no-preference"],
+      "default": "auto",
+      "description": "Reduced motion preference",
+      "x-prompt": "Which reduced-motion preference should Solaris use by default?"
+    },
+    "skipStyles": {
+      "type": "boolean",
+      "description": "Skip creating the solaris.scss style setup file",
+      "default": false
+    },
+    "skipProviders": {
+      "type": "boolean",
+      "description": "Skip adding provideSolaris to the application config",
+      "default": false
+    }
+  },
+  "required": []
+}

package/schematics/init/styles.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SOLARIS_STYLE_PATH = void 0;
+exports.getGlobalStylesPath = getGlobalStylesPath;
+exports.getSolarisStyleContent = getSolarisStyleContent;
+exports.createSolarisStyleFile = createSolarisStyleFile;
+exports.importSolarisStyleFromGlobal = importSolarisStyleFromGlobal;
+exports.SOLARIS_STYLE_PATH = 'src/styles/solaris.scss';
+const STYLE_CANDIDATES = [
+    'src/styles.scss',
+    'src/styles.sass',
+    'src/styles.css',
+    'src/style.scss',
+    'src/style.sass',
+    'src/style.css',
+];
+function getGlobalStylesPath(tree, projectRoot) {
+    for (const candidate of STYLE_CANDIDATES) {
+        const full = candidate;
+        if (tree.exists(full)) {
+            return full;
+        }
+    }
+    for (const candidate of STYLE_CANDIDATES) {
+        const full = projectRoot ? `${projectRoot}/${candidate}` : candidate;
+        if (tree.exists(full)) {
+            return full;
+        }
+    }
+    return null;
+}
+function getSolarisStyleContent(options, usePath) {
+    const themeConfig = [
+        `  color-scheme: ${options.colorScheme ?? 'system'},`,
+        `  density: ${options.density ?? 'comfortable'},`,
+        `  radius: ${options.radius ?? 'md'},`,
+        `  motion: ${options.motion ?? 'auto'},`,
+    ].join('\n');
+    return `@use '${usePath}' as solaris;
+
+@include solaris.core();
+
+@include solaris.theme(
+  (
+${themeConfig}
+  )
+);
+`;
+}
+function createSolarisStyleFile(tree, projectRoot, options, usePath = '@educarehq/solaris-ui/styles') {
+    const fullPath = projectRoot
+        ? `${projectRoot}/${exports.SOLARIS_STYLE_PATH}`
+        : exports.SOLARIS_STYLE_PATH;
+    if (tree.exists(fullPath)) {
+        return fullPath;
+    }
+    tree.create(fullPath, getSolarisStyleContent(options, usePath));
+    return fullPath;
+}
+function importStatementFor(path) {
+    const relative = path
+        .replace(/^src\//, './')
+        .replace(/\.(scss|sass|css)$/, '');
+    return `@use '${relative}';`;
+}
+function importSolarisStyleFromGlobal(tree, globalStylesPath, solarisStylePath) {
+    const content = tree.readText(globalStylesPath);
+    const importStatement = importStatementFor(solarisStylePath);
+    if (content.includes(importStatement)) {
+        return false;
+    }
+    const updated = `${importStatement}\n\n${content}`;
+    tree.overwrite(globalStylesPath, updated);
+    return true;
+}

package/schematics/init/workspace.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWorkspace = getWorkspace;
+exports.getProject = getProject;
+exports.getProjectTargetPath = getProjectTargetPath;
+const schematics_1 = require("@angular-devkit/schematics");
+function stripJsonComments(content) {
+    return content
+        .replace(/\/\*[\s\S]*?\*\//g, '')
+        .replace(/(^|[^:])\/\/.*$/gm, '$1');
+}
+function getWorkspace(tree) {
+    for (const file of ['angular.json', 'workspace.json']) {
+        if (tree.exists(file)) {
+            try {
+                const parsed = JSON.parse(stripJsonComments(tree.readText(file)));
+                if (parsed?.projects) {
+                    return parsed;
+                }
+            }
+            catch {
+                throw new schematics_1.SchematicsException(`Failed to parse ${file}`);
+            }
+        }
+    }
+    return null;
+}
+function getProject(tree, projectName) {
+    const workspace = getWorkspace(tree);
+    if (!workspace) {
+        throw new schematics_1.SchematicsException('No angular.json or workspace.json found. Run this schematic inside an Angular workspace.');
+    }
+    const name = projectName ?? workspace.defaultProject;
+    if (!name) {
+        throw new schematics_1.SchematicsException('No project name provided and no default project found in the workspace.');
+    }
+    const project = workspace.projects[name];
+    if (!project) {
+        throw new schematics_1.SchematicsException(`Project "${name}" not found in the workspace.`);
+    }
+    return { name, root: project.root ?? '', projectType: project.projectType };
+}
+function getProjectTargetPath(tree, projectName) {
+    return getProject(tree, projectName).root;
+}

package/schematics/ng-add/index.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ngAdd = ngAdd;
+const index_1 = require("../init/index");
+const styles_1 = require("../init/styles");
+const workspace_1 = require("../init/workspace");
+const messages_1 = require("../init/messages");
+const COMPONENT_STYLES = [
+    'button',
+    'icon-button',
+    'input',
+    'textarea',
+    'popover',
+    'tooltip',
+    'toast',
+    'dropdown-menu',
+];
+function removeOldComponentImports(content) {
+    const lines = content.split('\n');
+    const kept = [];
+    for (const line of lines) {
+        const trimmed = line.trim();
+        // Remove @use of individual component stylesheets
+        const componentMatch = trimmed.match(/^@use\s+['"]@educarehq\/solaris-ui\/styles\/(\w+)['"]\s*;?\s*$/);
+        if (componentMatch && COMPONENT_STYLES.includes(componentMatch[1])) {
+            continue;
+        }
+        // Remove @use of the old _components shortcut
+        if (/^@use\s+['"]@educarehq\/solaris-ui\/styles\/components['"]\s*;?\s*$/.test(trimmed)) {
+            continue;
+        }
+        kept.push(line);
+    }
+    return kept.join('\n');
+}
+function cleanLegacyStyleImports(tree, context, projectRoot) {
+    const stylesPath = (0, styles_1.getGlobalStylesPath)(tree, projectRoot);
+    if (!stylesPath) {
+        return;
+    }
+    const content = tree.readText(stylesPath);
+    const cleaned = removeOldComponentImports(content);
+    if (cleaned !== content) {
+        tree.overwrite(stylesPath, cleaned);
+        (0, messages_1.logChange)(context, `Removed legacy Solaris style imports from ${stylesPath}`);
+    }
+    else {
+        (0, messages_1.logSkip)(context, `No legacy Solaris style imports in ${stylesPath}`);
+    }
+}
+function ngAdd(options) {
+    return (tree, context) => {
+        const project = (0, workspace_1.getProject)(tree, options.project);
+        // Clean up legacy individual component style imports before delegating.
+        cleanLegacyStyleImports(tree, context, project.root);
+        const initOptions = {
+            project: project.name,
+            colorScheme: options.colorScheme,
+            density: options.density,
+            radius: options.radius,
+            reducedMotion: options.reducedMotion,
+        };
+        const initRule = (0, index_1.init)(initOptions);
+        return initRule(tree, context);
+    };
+}

package/schematics/ng-add/schema.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://educarehq.github.io/solaris-ui/schematics/ng-add.schema.json",
+  "title": "Solaris UI ng-add options",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add Solaris UI to",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "colorScheme": {
+      "type": "string",
+      "enum": ["light", "dark", "system"],
+      "default": "system",
+      "description": "Default color scheme"
+    },
+    "density": {
+      "type": "string",
+      "enum": ["comfortable", "compact"],
+      "default": "comfortable",
+      "description": "Default density"
+    },
+    "radius": {
+      "type": "string",
+      "enum": ["none", "sm", "md", "lg", "xl", "full"],
+      "default": "md",
+      "description": "Default border radius"
+    },
+    "reducedMotion": {
+      "type": "string",
+      "enum": ["auto", "reduce", "no-preference"],
+      "default": "auto",
+      "description": "Reduced motion preference"
+    }
+  },
+  "required": []
+}

package/schematics/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@educarehq/solaris-ui/schematics",
+  "private": true,
+  "type": "commonjs"
+}