@udixio/theme 1.0.0-beta.6 → 1.0.0-beta.8

package/src/config/config.module.ts

@@ -0,0 +1,7 @@
+import { asClass } from 'awilix';
+import { Module } from '../app.container';
+import { ConfigService } from './config.service';
+
+export const ConfigModule: Module = {
+  configService: asClass(ConfigService).singleton(),
+};

package/src/config/config.service.ts

@@ -0,0 +1,68 @@
+import { ConfigInterface } from './config.interface';
+
+import { resolve } from 'path';
+import { defaultColors } from '../color';
+import { VariantModel } from '../theme';
+import { AppService } from '../app.service';
+
+export function defineConfig(configObject: ConfigInterface): ConfigInterface {
+  if (!configObject || typeof configObject !== 'object') {
+    throw new Error('The configuration is missing or not an object');
+  }
+  if (!('sourceColor' in configObject)) {
+    throw new Error('Invalid configuration');
+  }
+  return configObject as ConfigInterface;
+}
+
+export class ConfigService {
+  configPath = './theme.config.ts';
+
+  private appService: AppService;
+
+  constructor({ appService }: { appService: AppService }) {
+    this.appService = appService;
+  }
+
+  public async loadConfig(): Promise<void> {
+    const { themeService, colorService, pluginService } = this.appService;
+    const {
+      sourceColor,
+      contrastLevel = 0,
+      isDark = false,
+      variant = VariantModel.tonalSpot,
+      palettes,
+      colors,
+      useDefaultColors = true,
+      plugins,
+    } = await this.getConfig();
+    themeService.create({
+      contrastLevel: contrastLevel,
+      isDark: isDark,
+      sourceColorHex: sourceColor,
+      variant: variant,
+    });
+    if (palettes) {
+      Object.entries(palettes).forEach(([key, value]) =>
+        themeService.addCustomPalette(key, value)
+      );
+    }
+    if (useDefaultColors) {
+      colorService.addColors(defaultColors);
+    }
+    if (colors) {
+      colorService.addColors(colors);
+    }
+    if (plugins) {
+      plugins.forEach((plugin) => pluginService.addPlugin(plugin));
+      pluginService.loadPlugins(this.appService);
+    }
+  }
+
+  private async getConfig(): Promise<ConfigInterface> {
+    const path = resolve(this.configPath);
+    const configImport = await import(path);
+    const config: unknown = configImport.default;
+    return config as ConfigInterface;
+  }
+}

package/src/config/index.ts

@@ -0,0 +1,2 @@
+export * from './config.interface';
+export * from './config.service';

package/src/index.ts

@@ -1,6 +1,9 @@
+export { default as AppContainer } from './app.container';
 export * from './app.container';
+export * from './app.module';
 export * from './app.service';
 export * from './color';
+export * from './config';
 export * from './main';
 export * from './material-color-utilities';
 export * from './theme';

package/src/main.ts

@@ -1,6 +1,14 @@
 import AppContainer from './app.container';
 import { AppService } from './app.service';
+import { ConfigService } from './config';
 
-export function main(): AppService {
+export function bootstrap(): AppService {
+  return AppContainer.resolve<AppService>('appService');
+}
+
+export async function bootstrapFromConfig(path?: string): Promise<AppService> {
+  const configService = AppContainer.resolve<ConfigService>('configService');
+  if (path) configService.configPath = path;
+  await configService.loadConfig();
   return AppContainer.resolve<AppService>('appService');
 }

package/src/plugin/plugin.abstract.ts

@@ -0,0 +1,7 @@
+import { AppService } from '../app.service';
+
+export abstract class PluginAbstract {
+  static dependencies: (new () => PluginAbstract)[];
+
+  protected constructor(protected appService: AppService) {}
+}

package/src/plugin/plugin.module.ts

@@ -0,0 +1,7 @@
+import { asClass } from 'awilix';
+import { Module } from '../app.container';
+import { PluginService } from './plugin.service';
+
+export const PluginModule: Module = {
+  pluginService: asClass(PluginService).singleton(),
+};

package/src/plugin/plugin.service.ts

@@ -0,0 +1,26 @@
+import { PluginAbstract } from './plugin.abstract';
+import { AppService } from '../app.service';
+
+export class PluginService {
+  private pluginInstances = new Map<string, PluginAbstract>();
+  private pluginConstructors = new Map<
+    string,
+    new (appService: AppService) => PluginAbstract
+  >();
+
+  public addPlugin(plugin: new (appService: AppService) => PluginAbstract) {
+    this.pluginConstructors.set(plugin.name, plugin);
+  }
+
+  public loadPlugins(appService: AppService) {
+    this.pluginConstructors.forEach((plugin) => {
+      this.pluginInstances.set(plugin.name, new plugin(appService));
+    });
+  }
+
+  public getPlugin<T extends PluginAbstract>(
+    plugin: new (appService: AppService) => T
+  ): T | undefined {
+    return this.pluginInstances.get(plugin.name) as T;
+  }
+}

package/src/theme/entities/variant.entity.ts

@@ -33,6 +33,7 @@ export const getRotatedHue = (
 
 export class VariantEntity {
   constructor(
-    public palettes: Record<string, (sourceColorHct: Hct) => TonalPalette> = {}
+    public palettes: Record<string, (sourceColorHct: Hct) => TonalPalette> = {},
+    public customPalettes?: (colorHct: Hct) => TonalPalette
   ) {}
 }

package/src/theme/models/variant.model.ts

@@ -21,6 +21,8 @@ export class VariantModel {
       neutralVariant: (sourceColorHct) =>
         TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8.0),
     },
+    customPalettes: (colorHct) =>
+      TonalPalette.fromHueAndChroma(colorHct.hue, 16),
   };
   static vibrant: VariantEntity = {
     palettes: {
@@ -41,6 +43,11 @@ export class VariantModel {
       neutralVariant: (sourceColorHct) =>
         TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8.0),
     },
+    customPalettes: (colorHct) =>
+      TonalPalette.fromHueAndChroma(
+        getRotatedHue(colorHct, this.hues, this.secondaryRotations),
+        24.0
+      ),
   };
 
   private static readonly hues = [

package/src/theme/services/scheme.service.ts

@@ -4,14 +4,19 @@ import {
   Hct,
   TonalPalette,
 } from '@material/material-color-utilities';
-import mergeDeep from 'merge-deep';
 
 export type SchemeServiceOptions = Omit<
   SchemeOptions,
   'palettes' | 'sourceColorArgb'
 > & {
-  sourceColorHex: string;
-  palettes: Record<string, (sourceColorHct: Hct) => TonalPalette>;
+  sourcesColorHex: Record<string, string> & { primary?: string };
+  palettes: Record<
+    string,
+    {
+      sourceColorkey?: string;
+      tonalPalette: (sourceColorHct: Hct) => TonalPalette;
+    }
+  >;
 };
 
 export class SchemeService {
@@ -19,19 +24,44 @@ export class SchemeService {
   private options?: SchemeServiceOptions;
 
   createOrUpdate(options: Partial<SchemeServiceOptions>) {
-    this.options = mergeDeep(options, this.options);
+    this.options = {
+      ...this.options,
+      ...options,
+      sourcesColorHex: {
+        ...this.options?.sourcesColorHex,
+        ...options.sourcesColorHex,
+      },
+      palettes: {
+        ...this.options?.palettes,
+        ...options.palettes,
+      },
+    } as SchemeServiceOptions;
     const palettes = new Map<string, TonalPalette>();
 
-    const sourceColorArgb = argbFromHex(this.options.sourceColorHex);
+    if (!this.options.sourcesColorHex.primary) {
+      throw new Error('Primary source color is not set');
+    }
+
+    const sourceColorArgb = argbFromHex(this.options.sourcesColorHex.primary);
     const sourceColorHct: Hct = Hct.fromInt(sourceColorArgb);
 
     if (!this.options.palettes) {
       return;
     }
-    for (const [key, paletteFunction] of Object.entries(
-      this.options.palettes
-    )) {
-      const palette: TonalPalette = paletteFunction(sourceColorHct);
+    for (const [
+      key,
+      { sourceColorkey, tonalPalette: paletteFunction },
+    ] of Object.entries(this.options.palettes)) {
+      let palette: TonalPalette;
+      if (!sourceColorkey) {
+        palette = paletteFunction(sourceColorHct);
+      } else {
+        const sourceColorArgb = argbFromHex(
+          this.options.sourcesColorHex[sourceColorkey]
+        );
+        const sourceColorHct: Hct = Hct.fromInt(sourceColorArgb);
+        palette = paletteFunction(sourceColorHct);
+      }
       palettes.set(key, palette);
     }
     this.schemeEntity = new SchemeEntity({

package/src/theme/services/theme.service.ts

@@ -3,7 +3,10 @@ import { SchemeService, SchemeServiceOptions } from './scheme.service';
 import { VariantService } from './variant.service';
 import { VariantEntity } from '../entities/variant.entity';
 
-type ThemeOptions = Omit<SchemeServiceOptions, 'palettes'>;
+type ThemeOptions = Omit<
+  SchemeServiceOptions,
+  'palettes' | 'sourcesColorHex'
+> & { sourceColorHex: string };
 
 const colorPaletteKeyColor = DynamicColor.fromPalette({
   name: 'primary_palette_key_color',
@@ -47,16 +50,23 @@ export class ThemeService {
   //   return this.theme();
   // }
 
-  create(options: ThemeOptions) {
-    this.schemeService.createOrUpdate(options);
+  create(options: ThemeOptions & { variant: VariantEntity }) {
+    this.schemeService.createOrUpdate({
+      ...options,
+      sourcesColorHex: { primary: options.sourceColorHex },
+    });
+    this.variantService.set(options.variant);
   }
 
-  addVariant(variant: VariantEntity) {
-    this.variantService.set(variant);
+  update(options: Partial<ThemeOptions> & { variant?: VariantEntity }) {
+    const themeOptions: Partial<SchemeServiceOptions> = { ...options };
+    if (options.sourceColorHex)
+      themeOptions.sourcesColorHex = { primary: options.sourceColorHex };
+    this.schemeService.createOrUpdate(themeOptions);
+    if (options.variant) this.variantService.set(options.variant);
   }
-
-  update(options: Partial<ThemeOptions>) {
-    this.schemeService.createOrUpdate(options);
+  addCustomPalette(key: string, colorHex: string) {
+    this.variantService.addCustomPalette(key, colorHex);
   }
   // theme(): SchemeService {
   //   return new SchemeService(this.themeOptions, this.colorService)

package/src/theme/services/variant.service.ts

@@ -1,18 +1,52 @@
 import { SchemeService } from './scheme.service';
 import { VariantEntity } from '../entities/variant.entity';
-import { TonalPalette } from '@material/material-color-utilities';
+import { Hct, TonalPalette } from '@material/material-color-utilities';
 
 export class VariantService {
+  public customPalettes: Record<string, string> = {};
+  private variantEntity?: VariantEntity;
+
   private readonly schemeService: SchemeService;
   constructor({ schemeService }: { schemeService: SchemeService }) {
     this.schemeService = schemeService;
   }
 
+  addCustomPalette(key: string, colorHex: string) {
+    this.customPalettes[key] = colorHex;
+    this.update();
+  }
+
   set(variantEntity: VariantEntity) {
+    this.variantEntity = variantEntity;
     if (!variantEntity.palettes.error) {
       variantEntity.palettes.error = () =>
         TonalPalette.fromHueAndChroma(25.0, 84.0);
     }
-    this.schemeService.createOrUpdate(variantEntity);
+    this.update();
+  }
+  private update() {
+    if (!this.variantEntity) return;
+    const palettes: Record<
+      string,
+      {
+        sourceColorkey?: string;
+        tonalPalette: (sourceColorHct: Hct) => TonalPalette;
+      }
+    > = {};
+    Object.keys(this.variantEntity.palettes).forEach((key) => {
+      palettes[key] = { tonalPalette: this.variantEntity!.palettes[key] };
+    });
+    if (this.variantEntity.customPalettes) {
+      Object.keys(this.customPalettes).forEach((key) => {
+        palettes[key] = {
+          sourceColorkey: key,
+          tonalPalette: this.variantEntity!.customPalettes!,
+        };
+      });
+    }
+    this.schemeService.createOrUpdate({
+      sourcesColorHex: this.customPalettes,
+      palettes: palettes,
+    });
   }
 }

package/dist/color/color-manager.service.d.ts

@@ -1,17 +0,0 @@
-import { DynamicColor } from '../material-color-utilities/dynamic_color';
-import { SchemeEntity } from '../theme/entities/scheme.entity';
-import { ColorEntity, ColorOptions } from './entities/color.entity';
-import { SchemeService } from '../theme/services/scheme.service';
-export declare const highestSurface: (s: SchemeEntity, colorManagerService: ColorManagerService) => DynamicColor;
-export declare class ColorManagerService {
-    private colorMap;
-    private readonly schemeService;
-    constructor({ schemeService }: {
-        schemeService: SchemeService;
-    });
-    createOrUpdate(key: string, args: Partial<ColorOptions>): ColorEntity;
-    remove(key: string): boolean;
-    get(key: string): ColorEntity;
-    getAll(): ReadonlyMap<string, ColorEntity>;
-    addFromPalette(key: string): void;
-}

package/dist/color/color.service.d.ts

@@ -1,16 +0,0 @@
-import { ColorManagerService } from './color-manager.service';
-import { ColorInterface } from './color.interface';
-import { ColorEntity, ColorOptions } from './entities/color.entity';
-export declare class ColorService implements ColorInterface {
-    private readonly colorManagerService;
-    constructor({ colorManagerService, }: {
-        colorManagerService: ColorManagerService;
-    });
-    getAllColors(): ReadonlyMap<string, ColorEntity>;
-    addBaseColors(): void;
-    addColor(key: string, color: ColorOptions): ColorEntity;
-    addColors(colors: Record<string, ColorOptions>): ColorEntity[];
-    getColor(key: string): ColorEntity;
-    removeColor(key: string): boolean;
-    updateColor(key: string, newColor: Partial<ColorOptions>): ColorEntity;
-}