feat(angular-jss): theme options

rafalwolak · rafalwolak · commit f8c4e949504b · 2022-03-06T12:56:04.000+01:00
`createTheme` and `createPalette`
diff --git a/README.md b/README.md
@@ -15,7 +15,9 @@
 
 - [x] Component decorator `Styled`
 - [x] Theming with `Theme`
+- [ ] Theme switching (dark/light mode)
 - [x] Server Side Rendering with Angular Universal
+- [ ] Critical CSS
 
 ## Table of Contents
 
@@ -107,6 +109,45 @@ export class AppComponent {
 
 ## Config options
 
+```ts
+import { create, Jss } from 'jss';
+import extend from 'jss-plugin-extend';
+import propsSort from 'jss-plugin-props-sort';
+import { JssOptions } from '@design4pro/angular-jss';
+
+const jss: Jss = create({
+  // additional JSS plugins @see https://cssinjs.org/plugins?v=v10.9.0
+  plugins: [
+    extend(),
+    propsSort()
+  ],
+});
+
+const jssOptions: JssOptions = {
+  jss: jss,
+  normalize: false // disable normalizing (normalize.css)
+};
+
+const theme: Theme = {
+  palette: {
+    primary: {
+      main: '#00bcd4' // use in decorator `theme.palette?.primary?.main`
+    },
+    secondary: {
+      main: '#f50057'
+    }
+  }
+};
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, AngularJssModule.forRoot(jssOptions, theme)],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
 ## License
 
 [MIT](https://github.com/design4pro/angular-jss/blob/master/LICENSE.md) © DESIGN4 ᴾ ᴿ ᴼ
diff --git a/libs/angular-jss/README.md b/libs/angular-jss/README.md
@@ -13,6 +13,12 @@
 
 ## Features
 
+- [x] Component decorator `Styled`
+- [x] Theming with `Theme`
+- [ ] Theme switching (dark/light mode)
+- [x] Server Side Rendering with Angular Universal
+- [ ] Critical CSS
+
 ## Table of Contents
 
 - [Installation](#installation)
@@ -103,6 +109,45 @@ export class AppComponent {
 
 ## Config options
 
+```ts
+import { create, Jss } from 'jss';
+import extend from 'jss-plugin-extend';
+import propsSort from 'jss-plugin-props-sort';
+import { JssOptions } from '@design4pro/angular-jss';
+
+const jss: Jss = create({
+  // additional JSS plugins @see https://cssinjs.org/plugins?v=v10.9.0
+  plugins: [
+    extend(),
+    propsSort()
+  ],
+});
+
+const jssOptions: JssOptions = {
+  jss: jss,
+  normalize: false // disable normalizing (normalize.css)
+};
+
+const theme: Theme = {
+  palette: {
+    primary: {
+      main: '#00bcd4' // use in decorator `theme.palette?.primary?.main`
+    },
+    secondary: {
+      main: '#f50057'
+    }
+  }
+};
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, AngularJssModule.forRoot(jssOptions, theme)],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+
 ## License
 
 [MIT](https://github.com/design4pro/angular-jss/blob/master/LICENSE.md) © DESIGN4 ᴾ ᴿ ᴼ
diff --git a/libs/angular-jss/src/index.ts b/libs/angular-jss/src/index.ts
@@ -4,3 +4,4 @@ export * from './lib/angular-jss.service';
 export * from './lib/angular-jss.types';
 export * from './lib/ssr';
 export * from './lib/styled';
+export * from './lib/theme';
diff --git a/libs/angular-jss/src/lib/angular-jss.types.ts b/libs/angular-jss/src/lib/angular-jss.types.ts
@@ -1,4 +1,5 @@
 import { JssOptions } from './jss/types';
+import { ColorCommon } from './theme/colors/common';
 
 export interface Options extends JssOptions {
   normalize?: boolean;
@@ -7,8 +8,7 @@ export interface Options extends JssOptions {
 export interface Theme {
   breakpoints?: ThemeBreakpoints;
   direction?: string;
-  overrides?: object;
-  props?: object;
+  palette?: ThemePalette;
 }
 
 export interface ThemeBreakpoints {
@@ -24,3 +24,14 @@ export interface ThemeBreakpoints {
   unit?: string;
   step?: number;
 }
+
+export type ThemeType = string | 'auto' | 'light' | 'dark';
+
+export interface ThemePaletteCommonColor {
+  [key: string]: ColorCommon;
+}
+
+export interface ThemePalette {
+  mode: ThemeType;
+  common: typeof ColorCommon;
+}
diff --git a/libs/angular-jss/src/lib/jss/utils/sheets.ts b/libs/angular-jss/src/lib/jss/utils/sheets.ts
@@ -1,6 +1,6 @@
 import { getDynamicStyles, StyleSheet, StyleSheetFactoryOptions } from 'jss';
 import { Theme } from '../../angular-jss.types';
-import { StyledProps } from '../../styled/styled.interface';
+import { StyledProps } from '../../styled/styled.types';
 import { ThemeContext } from '../../theme/theme-context';
 import { JssContext } from '../context';
 import { getManager } from '../managers';
diff --git a/libs/angular-jss/src/lib/styled/create-use-styles.ts b/libs/angular-jss/src/lib/styled/create-use-styles.ts
@@ -15,7 +15,7 @@ import {
   updateDynamicRules,
 } from '../jss/utils/sheets';
 import { ThemeContext } from '../theme/theme-context';
-import { StyledProps } from './styled.interface';
+import { StyledProps } from './styled.types';
 
 const createUseStyles =
   (doCheck: BehaviorSubject<StyledProps>, onDestroy: Subject<void>) =>
diff --git a/libs/angular-jss/src/lib/styled/internals.ts b/libs/angular-jss/src/lib/styled/internals.ts
@@ -9,7 +9,7 @@ import {
   DirectiveDef,
   DirectiveType,
 } from './ivy';
-import { StyledProps } from './styled.interface';
+import { StyledProps } from './styled.types';
 
 /**
  * Applied to definitions and informs that class is decorated
diff --git a/libs/angular-jss/src/lib/styled/styled.decorator.ts b/libs/angular-jss/src/lib/styled/styled.decorator.ts
@@ -2,7 +2,7 @@ import 'reflect-metadata';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { generateStyles, markAsDecorated, STYLED_PROPS } from './internals';
 import { ComponentType, DirectiveType } from './ivy';
-import { StyledProps } from './styled.interface';
+import { StyledProps } from './styled.types';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function StyledProp<T>(): PropertyDecorator {
diff --git a/libs/angular-jss/src/lib/styled/styled.types.ts b/libs/angular-jss/src/lib/styled/styled.types.ts
@@ -1,5 +1,5 @@
-import { HookOptions, Styles } from '../jss/types';
 import { Theme } from '../angular-jss.types';
+import { HookOptions, Styles } from '../jss/types';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type StyledProps = (context: StyledContext) => any;
diff --git a/libs/angular-jss/src/lib/theme/colors/common.ts b/libs/angular-jss/src/lib/theme/colors/common.ts
@@ -0,0 +1,6 @@
+export enum ColorCommon {
+  black = '#000',
+  white = '#fff',
+};
+
+export default ColorCommon;
diff --git a/libs/angular-jss/src/lib/theme/colors/index.ts b/libs/angular-jss/src/lib/theme/colors/index.ts
@@ -0,0 +1 @@
+export * from './common';
diff --git a/libs/angular-jss/src/lib/theme/create-palette.ts b/libs/angular-jss/src/lib/theme/create-palette.ts
@@ -0,0 +1,21 @@
+import { ThemePalette } from '../angular-jss.types';
+import deepmerge from '../utils/deepmerge';
+import common from './colors/common';
+
+function createPalette(palette: ThemePalette): ThemePalette {
+  const { mode = 'light', ...other } = palette;
+
+  const paletteOutput = deepmerge<ThemePalette>(
+    {
+      // A collection of common colors.
+      common: common,
+      // The palette mode, can be light or dark.
+      mode,
+    },
+    other
+  );
+
+  return paletteOutput;
+}
+
+export default createPalette;
diff --git a/libs/angular-jss/src/lib/theme/create-theme.ts b/libs/angular-jss/src/lib/theme/create-theme.ts
@@ -1,26 +1,31 @@
-import { Theme, ThemeBreakpoints } from '../angular-jss.types';
+import { Theme, ThemeBreakpoints, ThemePalette } from '../angular-jss.types';
 import deepmerge from '../utils/deepmerge';
 import createBreakpoints from './create-breakpoints';
+import createPalette from './create-palette';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function createTheme(options: Theme = {}, ...args: any): Theme {
-  const { breakpoints: input = {}, ...other } = options;
+  const {
+    breakpoints: breakpointsInput = {},
+    palette: paletteInput = {},
+    ...other
+  } = options;
 
-  const _breakpoints = createBreakpoints(input as ThemeBreakpoints);
+  const breakpoints = createBreakpoints(breakpointsInput as ThemeBreakpoints);
+  const palette = createPalette(paletteInput as ThemePalette);
 
-  let theme = deepmerge(
+  let theme = deepmerge<Theme>(
     {
-      breakpoints: _breakpoints,
+      breakpoints: breakpoints,
       direction: 'ltr',
-      overrides: {}, // Inject custom styles
-      props: {}, // Provide default props
+      palette: palette,
     },
     other
   );
 
   theme = args.reduce(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (acc: Theme, argument: any) => deepmerge(acc, argument),
+    (acc: Theme, argument: any) => deepmerge<Theme>(acc, argument),
     theme
   );
 
diff --git a/libs/angular-jss/src/lib/theme/index.ts b/libs/angular-jss/src/lib/theme/index.ts
@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './create-breakpoints';
+export * from './create-theme';
diff --git a/libs/angular-jss/src/lib/theme/theme-context.ts b/libs/angular-jss/src/lib/theme/theme-context.ts
@@ -1,14 +1,11 @@
 import { Injectable } from '@angular/core';
-import { ThemeBreakpoints } from '../angular-jss.types';
+import { ThemeBreakpoints, ThemePalette } from '../angular-jss.types';
 import { Store } from '../utils/store';
 
-export type ThemeType = string | 'auto' | 'light' | 'dark';
-
 export class ThemeContext {
   breakpoints?: ThemeBreakpoints;
   direction?: string;
-  overrides?: object;
-  props?: object;
+  palette?: ThemePalette;
 }
 
 @Injectable()
diff --git a/libs/angular-jss/src/lib/utils/deepmerge.test.ts b/libs/angular-jss/src/lib/utils/deepmerge.test.ts
@@ -0,0 +1,51 @@
+import deepmerge from './deepmerge';
+
+describe('deepmerge', () => {
+  it('should not be subject to prototype pollution', () => {
+    deepmerge(
+      {},
+      JSON.parse('{ "myProperty": "a", "__proto__" : { "isAdmin" : true } }'),
+      {
+        clone: false,
+      }
+    );
+
+    expect({}).not.toHaveProperty('isAdmin');
+  });
+
+  it('should not merge HTML elements', () => {
+    const element = document.createElement('div');
+    const element2 = document.createElement('div');
+
+    const result = deepmerge({ element }, { element: element2 });
+
+    expect(result.element).toEqual(element2);
+  });
+
+  it('should reset source when target is undefined', () => {
+    const result = deepmerge(
+      {
+        '&.disabled': {
+          color: 'red',
+        },
+      },
+      {
+        '&.disabled': undefined,
+      }
+    );
+    expect(result).toEqual({
+      '&.disabled': undefined,
+    });
+  });
+
+  it('should merge keys that do not exist in source', () => {
+    const result = deepmerge(
+      { foo: { baz: 'test' } },
+      { foo: { bar: 'test' }, bar: 'test' }
+    );
+    expect(result).toEqual({
+      foo: { baz: 'test', bar: 'test' },
+      bar: 'test',
+    });
+  });
+});
diff --git a/libs/angular-jss/src/lib/utils/deepmerge.ts b/libs/angular-jss/src/lib/utils/deepmerge.ts
