From c4b2ec83f245a140e18e19729e54d4725fcf5c4a Mon Sep 17 00:00:00 2001 From: Denis Yakshov Date: Mon, 6 Jul 2020 18:03:37 +0300 Subject: [PATCH] build: add support for styles override --- README.md | 12 ++++ package.json | 4 +- projects/elonkit/src/overrides.scss | 7 +++ .../button-story-basic.component.html | 1 + .../button-story-basic.component.ts | 9 +++ .../button-story-basic.module.ts | 12 ++++ .../__stories__/button-story-basic/index.ts | 2 + .../button/__stories__/button.stories.mdx | 25 ++++++++ .../elonkit/src/overrides/button/button.scss | 5 ++ .../form-field-story-basic.component.html | 13 +++++ .../form-field-story-basic.component.ts | 9 +++ .../form-field-story-basic.module.ts | 14 +++++ .../form-field-story-basic/index.ts | 2 + .../__stories__/form-field.stories.mdx | 25 ++++++++ .../src/overrides/form-field/form-field.scss | 9 +++ projects/elonkit/storybook/preview-theme.scss | 4 ++ projects/elonkit/storybook/preview.js | 11 +++- scss-bundle.config.overrides.json | 8 +++ ...nfig.json => scss-bundle.config.theme.json | 0 yarn.lock | 57 +++++++++++-------- 20 files changed, 201 insertions(+), 28 deletions(-) create mode 100644 projects/elonkit/src/overrides.scss create mode 100644 projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.html create mode 100644 projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.ts create mode 100644 projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.module.ts create mode 100644 projects/elonkit/src/overrides/button/__stories__/button-story-basic/index.ts create mode 100644 projects/elonkit/src/overrides/button/__stories__/button.stories.mdx create mode 100644 projects/elonkit/src/overrides/button/button.scss create mode 100644 projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.html create mode 100644 projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.ts create mode 100644 projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.module.ts create mode 100644 projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/index.ts create mode 100644 projects/elonkit/src/overrides/form-field/__stories__/form-field.stories.mdx create mode 100644 projects/elonkit/src/overrides/form-field/form-field.scss create mode 100644 scss-bundle.config.overrides.json rename scss-bundle.config.json => scss-bundle.config.theme.json (100%) diff --git a/README.md b/README.md index 2f0d1b91..322062bc 100644 --- a/README.md +++ b/README.md @@ -5,3 +5,15 @@ ```bash yarn add @elonsoft/elonkit angular2-text-mask text-mask-addons ``` + +```scss +@import '@elonsoft/elonkit/theme'; +@include elonkit-theme($theme); +``` + +### Override Angular Material styles + +```scss +@import '@elonsoft/elonkit/overrides'; +@include elonkit-overrides($theme); +``` diff --git a/package.json b/package.json index b95bdefc..f8cb11e8 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "elonsoft", "version": "0.0.1", "scripts": { - "build": "ng build --prod && scss-bundle && cp README.md dist/elonkit", + "build": "ng build --prod && scss-bundle --config scss-bundle.config.theme.json && scss-bundle --config scss-bundle.config.overrides.json && cp README.md dist/elonkit", "test": "ng test", "test:watch": "ng test --watch", "lint:tslint": "tslint -c tslint.json --project tsconfig.json 'projects/**/*.ts'", @@ -73,7 +73,7 @@ "react-is": "~16.13.1", "sass": "^1.26.8", "sass-loader": "^8.0.2", - "scss-bundle": "~3.0.2", + "scss-bundle": "~3.1.2", "stylelint": "~13.6.0", "stylelint-config-sass-guidelines": "~7.0.0", "stylelint-order": "~4.1.0", diff --git a/projects/elonkit/src/overrides.scss b/projects/elonkit/src/overrides.scss new file mode 100644 index 00000000..80ea8fdc --- /dev/null +++ b/projects/elonkit/src/overrides.scss @@ -0,0 +1,7 @@ +@import './overrides/button/button'; +@import './overrides/form-field/form-field'; + +@mixin elonkit-overrides($theme) { + @include es-button-overrides($theme); + @include es-form-field-overrides($theme); +} diff --git a/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.html b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.html new file mode 100644 index 00000000..e6cfbb60 --- /dev/null +++ b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.html @@ -0,0 +1 @@ + diff --git a/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.ts b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.ts new file mode 100644 index 00000000..df42bbd2 --- /dev/null +++ b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.component.ts @@ -0,0 +1,9 @@ +import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'es-button-story-basic', + templateUrl: './button-story-basic.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None +}) +export class ButtonStoryBasicComponent {} diff --git a/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.module.ts b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.module.ts new file mode 100644 index 00000000..bfe8d8e4 --- /dev/null +++ b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/button-story-basic.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; + +import { MatButtonModule } from '@angular/material/button'; + +import { ButtonStoryBasicComponent } from './button-story-basic.component'; + +@NgModule({ + declarations: [ButtonStoryBasicComponent], + imports: [MatButtonModule], + exports: [ButtonStoryBasicComponent] +}) +export class ButtonStoryBasicModule {} diff --git a/projects/elonkit/src/overrides/button/__stories__/button-story-basic/index.ts b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/index.ts new file mode 100644 index 00000000..41c9f5bf --- /dev/null +++ b/projects/elonkit/src/overrides/button/__stories__/button-story-basic/index.ts @@ -0,0 +1,2 @@ +export { ButtonStoryBasicComponent } from './button-story-basic.component'; +export { ButtonStoryBasicModule } from './button-story-basic.module'; diff --git a/projects/elonkit/src/overrides/button/__stories__/button.stories.mdx b/projects/elonkit/src/overrides/button/__stories__/button.stories.mdx new file mode 100644 index 00000000..c5d63b35 --- /dev/null +++ b/projects/elonkit/src/overrides/button/__stories__/button.stories.mdx @@ -0,0 +1,25 @@ +import { Meta, Story, Props } from '@storybook/addon-docs/blocks'; +import { Preview } from '~storybook/components'; + +import { withA11y } from '@storybook/addon-a11y'; +import { action } from '@storybook/addon-actions'; +import { withKnobs, boolean } from '@storybook/addon-knobs'; + +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { ButtonStoryBasicModule, ButtonStoryBasicComponent } from './button-story-basic'; + + + +# Button + + + + {{ + component: ButtonStoryBasicComponent, + moduleMetadata: { + imports: [BrowserAnimationsModule, ButtonStoryBasicModule] + } + }} + + diff --git a/projects/elonkit/src/overrides/button/button.scss b/projects/elonkit/src/overrides/button/button.scss new file mode 100644 index 00000000..fc2072f6 --- /dev/null +++ b/projects/elonkit/src/overrides/button/button.scss @@ -0,0 +1,5 @@ +@mixin es-button-overrides($theme) { + .mat-button-base { + text-transform: uppercase; + } +} diff --git a/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.html b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.html new file mode 100644 index 00000000..44c0285d --- /dev/null +++ b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.html @@ -0,0 +1,13 @@ +
+ + Input 1 + + This is hint 1 + + + + Input 2 + + This is hint 2 + +
diff --git a/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.ts b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.ts new file mode 100644 index 00000000..fb302125 --- /dev/null +++ b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.component.ts @@ -0,0 +1,9 @@ +import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'es-form-field-story-basic', + templateUrl: './form-field-story-basic.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None +}) +export class FormFieldStoryBasicComponent {} diff --git a/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.module.ts b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.module.ts new file mode 100644 index 00000000..9adef553 --- /dev/null +++ b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/form-field-story-basic.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; + +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; + +import { FormFieldStoryBasicComponent } from './form-field-story-basic.component'; + +@NgModule({ + declarations: [FormFieldStoryBasicComponent], + imports: [MatButtonModule, MatFormFieldModule, MatInputModule], + exports: [FormFieldStoryBasicComponent] +}) +export class FormFieldStoryBasicModule {} diff --git a/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/index.ts b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/index.ts new file mode 100644 index 00000000..1a76b215 --- /dev/null +++ b/projects/elonkit/src/overrides/form-field/__stories__/form-field-story-basic/index.ts @@ -0,0 +1,2 @@ +export { FormFieldStoryBasicComponent } from './form-field-story-basic.component'; +export { FormFieldStoryBasicModule } from './form-field-story-basic.module'; diff --git a/projects/elonkit/src/overrides/form-field/__stories__/form-field.stories.mdx b/projects/elonkit/src/overrides/form-field/__stories__/form-field.stories.mdx new file mode 100644 index 00000000..2e091e67 --- /dev/null +++ b/projects/elonkit/src/overrides/form-field/__stories__/form-field.stories.mdx @@ -0,0 +1,25 @@ +import { Meta, Story, Props } from '@storybook/addon-docs/blocks'; +import { Preview } from '~storybook/components'; + +import { withA11y } from '@storybook/addon-a11y'; +import { action } from '@storybook/addon-actions'; +import { withKnobs, boolean } from '@storybook/addon-knobs'; + +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { FormFieldStoryBasicModule, FormFieldStoryBasicComponent } from './form-field-story-basic'; + + + +# Form Field + + + + {{ + component: FormFieldStoryBasicComponent, + moduleMetadata: { + imports: [BrowserAnimationsModule, FormFieldStoryBasicModule] + } + }} + + diff --git a/projects/elonkit/src/overrides/form-field/form-field.scss b/projects/elonkit/src/overrides/form-field/form-field.scss new file mode 100644 index 00000000..5c3a2770 --- /dev/null +++ b/projects/elonkit/src/overrides/form-field/form-field.scss @@ -0,0 +1,9 @@ +@mixin es-form-field-overrides($theme) { + .mat-form-field-appearance-outline { + width: 100%; + + .mat-form-field-subscript-wrapper { + position: static; + } + } +} diff --git a/projects/elonkit/storybook/preview-theme.scss b/projects/elonkit/storybook/preview-theme.scss index 36e465bf..08c2f485 100644 --- a/projects/elonkit/storybook/preview-theme.scss +++ b/projects/elonkit/storybook/preview-theme.scss @@ -11,3 +11,7 @@ $theme: mat-light-theme($primary, $accent); // In production it's "@elonsoft/elonkit/theme" @import '../src/theme'; @include elonkit-theme($theme); + +// In production it's "@elonsoft/elonkit/overrides" +@import '../src/overrides'; +@include elonkit-overrides($theme); diff --git a/projects/elonkit/storybook/preview.js b/projects/elonkit/storybook/preview.js index f47f3be4..9854c417 100644 --- a/projects/elonkit/storybook/preview.js +++ b/projects/elonkit/storybook/preview.js @@ -9,6 +9,15 @@ import theme from './theme'; addParameters({ options: { - theme + theme, + storySort: (a, b) => { + if (a[1].kind.split('/')[0] !== b[1].kind.split('/')[0]) { + return a[1].kind.startsWith('UI') ? -1 : 1; + } + + return a[1].kind === b[1].kind + ? 0 + : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }); + } } }); diff --git a/scss-bundle.config.overrides.json b/scss-bundle.config.overrides.json new file mode 100644 index 00000000..a707fd48 --- /dev/null +++ b/scss-bundle.config.overrides.json @@ -0,0 +1,8 @@ +{ + "bundlerOptions": { + "entryFile": "./projects/elonkit/src/overrides.scss", + "rootDir": "./projects/src", + "outFile": "./dist/elonkit/overrides.scss", + "logLevel": "error" + } +} diff --git a/scss-bundle.config.json b/scss-bundle.config.theme.json similarity index 100% rename from scss-bundle.config.json rename to scss-bundle.config.theme.json diff --git a/yarn.lock b/yarn.lock index bf014fef..d5f32186 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3174,7 +3174,7 @@ resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7" integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g== -"@types/fs-extra@^8.0.0": +"@types/fs-extra@^8.0.1": version "8.1.1" resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-8.1.1.tgz#1e49f22d09aa46e19b51c0b013cb63d0d923a068" integrity sha512-TcUlBem321DFQzBNuz8p0CLLKp0VvF/XH9E4KHNmgwyp4E3AfgI5cjiIVZWlbfThBop2qxFIh4+LeY6hVWWZ2w== @@ -5482,7 +5482,7 @@ chokidar@^2.0.2, chokidar@^2.0.4, chokidar@^2.1.8: optionalDependencies: fsevents "^1.2.7" -chokidar@^3.0.2: +chokidar@^3.3.1: version "3.4.0" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.0.tgz#b30611423ce376357c765b9b8f904b9fba3c0be8" integrity sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ== @@ -5813,7 +5813,7 @@ commander@^2.11.0, commander@^2.12.1, commander@^2.20.0, commander@^2.9.0, comma resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== -commander@^3.0.0, commander@^3.0.2: +commander@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/commander/-/commander-3.0.2.tgz#6837c3fb677ad9933d1cfba42dd14d5117d6b39e" integrity sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow== @@ -11225,16 +11225,16 @@ loglevel-plugin-prefix@^0.8.4: resolved "https://registry.yarnpkg.com/loglevel-plugin-prefix/-/loglevel-plugin-prefix-0.8.4.tgz#2fe0e05f1a820317d98d8c123e634c1bd84ff644" integrity sha512-WpG9CcFAOjz/FtNht+QJeGpvVl/cdR6P0z6OcXSkr8wFJOsV2GRj2j10JLfjuA4aYkcKCNIEqRGCyTife9R8/g== -loglevel@^1.6.3, loglevel@^1.6.8: - version "1.6.8" - resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171" - integrity sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA== - loglevel@^1.6.4: version "1.6.7" resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.7.tgz#b3e034233188c68b889f5b862415306f565e2c56" integrity sha512-cY2eLFrQSAfVPhCgH1s7JI73tMbg9YC3v3+ZHVW67sBS7UxWzNEk/ZBbSfLykBWHp33dqqtOv82gjhKEi81T/A== +loglevel@^1.6.6, loglevel@^1.6.8: + version "1.6.8" + resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171" + integrity sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA== + longest-streak@^2.0.1: version "2.0.4" resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4" @@ -15247,13 +15247,6 @@ sass@1.26.3: dependencies: chokidar ">=2.0.0 <4.0.0" -sass@^1.22.9, sass@^1.26.8: - version "1.26.8" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.8.tgz#312652530721f9568d4c4000b0db07ec6eb23325" - integrity sha512-yvtzyrKLGiXQu7H12ekXqsfoGT/aTKeMDyVzCB675k1HYuaj0py63i8Uf4SI9CHXj6apDhpfwbUr3gGOjdpu2Q== - dependencies: - chokidar ">=2.0.0 <4.0.0" - sass@^1.23.0: version "1.25.0" resolved "https://registry.yarnpkg.com/sass/-/sass-1.25.0.tgz#f8bd7dfbb39d6b0305e27704a8ebe637820693f3" @@ -15261,6 +15254,20 @@ sass@^1.23.0: dependencies: chokidar ">=2.0.0 <4.0.0" +sass@^1.23.7: + version "1.26.9" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.9.tgz#73c10cbb88c12b22a9e0107725bfd62296f4978f" + integrity sha512-t8AkRVi+xvba4yZiLWkJdgJHBFCB3Dh4johniQkPy9ywkgFHNasXFEFP+RG/F6LhQ+aoE4aX+IorIWQjS0esVw== + dependencies: + chokidar ">=2.0.0 <4.0.0" + +sass@^1.26.8: + version "1.26.8" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.8.tgz#312652530721f9568d4c4000b0db07ec6eb23325" + integrity sha512-yvtzyrKLGiXQu7H12ekXqsfoGT/aTKeMDyVzCB675k1HYuaj0py63i8Uf4SI9CHXj6apDhpfwbUr3gGOjdpu2Q== + dependencies: + chokidar ">=2.0.0 <4.0.0" + sax@^1.2.4, sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" @@ -15327,28 +15334,28 @@ scope-analyzer@^2.0.1: estree-is-function "^1.0.0" get-assigned-identifiers "^1.1.0" -scss-bundle@~3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/scss-bundle/-/scss-bundle-3.0.2.tgz#c6fd4d8738a938584070210beb9bd5eb69d87bbb" - integrity sha512-6OUFD+bD1ko/nrcXEGQ58NY/pTAQyj3LBfUyCpDeplcs8m8U7CWAfSuK49BrV5PEUGRXEh3oiETxqeG1vJSvrA== +scss-bundle@~3.1.2: + version "3.1.2" + resolved "https://registry.yarnpkg.com/scss-bundle/-/scss-bundle-3.1.2.tgz#8919dd7603d01a84822e8aab5210e5b0b50c548b" + integrity sha512-lvxTwCKDLgzmRWhGwJ834ggtnEhs0G9FxSJRWte+NwlshVvBcQ/kOHHkpAGDpCxIMNGz/Utl0yd/MWyQAOBhqg== dependencies: "@types/archy" "^0.0.31" "@types/debug" "^4.1.5" - "@types/fs-extra" "^8.0.0" + "@types/fs-extra" "^8.0.1" "@types/glob" "^7.1.1" "@types/lodash.debounce" "^4.0.6" "@types/sass" "^1.16.0" archy "^1.0.0" - chalk "^2.4.2" - chokidar "^3.0.2" - commander "^3.0.0" + chalk "^3.0.0" + chokidar "^3.3.1" + commander "^4.0.1" fs-extra "^8.1.0" globs "^0.1.4" lodash.debounce "^4.0.8" - loglevel "^1.6.3" + loglevel "^1.6.6" loglevel-plugin-prefix "^0.8.4" pretty-bytes "^5.3.0" - sass "^1.22.9" + sass "^1.23.7" tslib "^1.10.0" select-hose@^2.0.0: