├── .nvmrc ├── setup-jest.ts ├── tokens ├── global │ ├── _tokens.scss │ ├── _utils.scss │ ├── _reset-hard.scss │ ├── _reset-soft.scss │ └── _reset.scss ├── main-hard.scss ├── main-soft.scss ├── fonts │ ├── montserrat-v14-latin-500.eot │ ├── montserrat-v14-latin-500.ttf │ ├── montserrat-v14-latin-500.woff │ ├── montserrat-v14-latin-600.eot │ ├── montserrat-v14-latin-600.ttf │ ├── montserrat-v14-latin-600.woff │ ├── montserrat-v14-latin-700.eot │ ├── montserrat-v14-latin-700.ttf │ ├── montserrat-v14-latin-700.woff │ ├── montserrat-v14-latin-500.woff2 │ ├── montserrat-v14-latin-600.woff2 │ ├── montserrat-v14-latin-700.woff2 │ ├── montserrat-v14-latin-regular.eot │ ├── montserrat-v14-latin-regular.ttf │ ├── montserrat-v14-latin-regular.woff │ ├── montserrat-v14-latin-regular.woff2 │ ├── montserrat-v14-latin-700.svg │ ├── montserrat-v14-latin-600.svg │ └── montserrat-v14-latin-500.svg ├── base │ ├── _shadows.scss │ ├── _font-size.scss │ ├── _colors.scss │ ├── _font-face.scss │ └── _typography.scss ├── CHANGELOG.md ├── README.md └── package.json ├── commitlint.config.js ├── .npmrc ├── src ├── favicon.ico ├── main.playground.ts ├── index.html └── polyfills.ts ├── .storybook ├── typings.d.ts ├── tsconfig.json ├── main.js └── preview.js ├── components └── button │ ├── src │ ├── index.ts │ └── lib │ │ ├── button.component.html │ │ ├── button.module.ts │ │ ├── button.component.sandbox.ts │ │ ├── button.component.spec.ts │ │ ├── button.component.ts │ │ ├── button.component.scss │ │ └── button.stories.ts │ ├── README.md │ ├── package.json │ └── CHANGELOG.md ├── .eslintignore ├── .prettierignore ├── .stylelintignore ├── angular-playground.json ├── .prettierrc.js ├── .stylelintrc ├── scripts ├── build.sh └── pre-publish.sh ├── .editorconfig ├── tsconfig.spec.json ├── tsconfig.app.json ├── tsconfig.lib.json ├── browserslist ├── .vscode ├── extensions.json └── settings.json ├── lerna.json ├── tsconfig.json ├── .gitignore ├── LICENSE ├── angular.json ├── README.md ├── stories └── 0-introduction.stories.mdx ├── csscomb.json ├── package.json └── .eslintrc /.nvmrc: -------------------------------------------------------------------------------- 1 | v10.20.1 2 | -------------------------------------------------------------------------------- /setup-jest.ts: -------------------------------------------------------------------------------- 1 | import 'jest-preset-angular'; 2 | -------------------------------------------------------------------------------- /tokens/global/_tokens.scss: -------------------------------------------------------------------------------- 1 | @import '../base/font-face'; 2 | @import '../base/shadows'; 3 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'] 3 | }; 4 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry = https://registry.npmjs.org/ 2 | # @thedesignsystem:registry=http://localhost:4873/ 3 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /.storybook/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.md' { 2 | const content: string; 3 | export default content; 4 | } 5 | -------------------------------------------------------------------------------- /components/button/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/button.component'; 2 | export * from './lib/button.module'; 3 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | dist/**/* 3 | 4 | **/dist 5 | **/node_modules 6 | 7 | coverage/**/* 8 | **/coverage 9 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | dist/**/* 3 | 4 | **/dist 5 | **/node_modules 6 | 7 | coverage/**/* 8 | **/coverage 9 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | dist/**/* 3 | 4 | **/dist 5 | **/node_modules 6 | 7 | coverage/**/* 8 | **/coverage 9 | -------------------------------------------------------------------------------- /angular-playground.json: -------------------------------------------------------------------------------- 1 | { 2 | "sourceRoots": ["./components"], 3 | "angularCli": { 4 | "appName": "playground" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /tokens/main-hard.scss: -------------------------------------------------------------------------------- 1 | @import './global/_reset'; 2 | @import './global/_tokens'; 3 | @import './global/_reset-hard'; 4 | @import './global/_utils'; 5 | -------------------------------------------------------------------------------- /tokens/main-soft.scss: -------------------------------------------------------------------------------- 1 | @import './global/_reset'; 2 | @import './global/_tokens'; 3 | @import './global/_reset-soft'; 4 | @import './global/_utils'; 5 | -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-500.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-500.eot -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-500.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-500.ttf -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-500.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-500.woff -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-600.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-600.eot -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-600.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-600.ttf -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-600.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-600.woff -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-700.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-700.eot -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-700.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-700.ttf -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-700.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-700.woff -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-500.woff2 -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-600.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-600.woff2 -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-700.woff2 -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-regular.eot -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-regular.ttf -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-regular.woff -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gstvribs/monorepo-angular-component-library/HEAD/tokens/fonts/montserrat-v14-latin-regular.woff2 -------------------------------------------------------------------------------- /tokens/base/_shadows.scss: -------------------------------------------------------------------------------- 1 | $shadows-level-1: 0 4px 8px rgba(#000, 0.16); 2 | $shadows-level-2: 0 8px 16px rgba(#000, 0.16); 3 | $shadows-level-3: 0 16px 32px rgba(#000, 0.16); 4 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | tabWidth: 2, 3 | useTabs: false, 4 | semi: true, 5 | trailingComma: 'all', 6 | singleQuote: true, 7 | endOfLine: 'auto', 8 | }; 9 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-recommended", "stylelint-config-prettier"], 3 | "plugins": ["stylelint-scss"], 4 | "rules": { 5 | "indentation": 2, 6 | "at-rule-no-unknown": null, 7 | "scss/at-rule-no-unknown": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /scripts/build.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | set -e # exit with nonzero exit code if anything fails 4 | 5 | rm -rf dist 6 | 7 | # Generate static storybook + compodoc 8 | mkdir dist 9 | npm run build:storybook 10 | npm run build:docs && mv documentation dist/ 11 | -------------------------------------------------------------------------------- /components/button/src/lib/button.component.html: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /components/button/src/lib/button.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { ButtonComponent } from './button.component'; 3 | 4 | @NgModule({ 5 | declarations: [ButtonComponent], 6 | imports: [], 7 | exports: [ButtonComponent], 8 | }) 9 | export class ButtonModule {} 10 | -------------------------------------------------------------------------------- /.storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.lib.json", 3 | "compilerOptions": { 4 | "types": ["node"] 5 | }, 6 | "exclude": ["../components/**/*.spec.ts", "../components/**/*.sandbox.ts"], 7 | "include": ["../components/**/*.stories.ts"], 8 | "files": ["./typings.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jest" 7 | ] 8 | }, 9 | "files": [ 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "components/**/*.spec.ts", 14 | "components/**/*.d.ts" 15 | ] 16 | } -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": ["projects/sandbox/src/main.ts", "src/polyfills.ts"], 8 | "include": ["projects/sandbox/src/**/*.ts"], 9 | "exclude": ["*test.ts", "projects/sandbox/src/**/*.spec.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /src/main.playground.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | import { PlaygroundModule } from 'angular-playground'; 3 | 4 | PlaygroundModule 5 | .configure({ 6 | selector: 'app-root', 7 | overlay: false, 8 | modules: [], 9 | }); 10 | 11 | platformBrowserDynamic().bootstrapModule(PlaygroundModule); 12 | -------------------------------------------------------------------------------- /components/button/README.md: -------------------------------------------------------------------------------- 1 | # Component: Button 2 | 3 | ## Usage 4 | 5 | Import module with: `import { ButtonModule, ButtonComponent } from '@thedesignsystem/button';` 6 | 7 | Find your main @NgModule in `app.module.ts` add the module imported in declarations array: `declarations: [ ButtonComponent ]` and the module imported in imports array: `imports: [ ButtonModule ]` 8 | -------------------------------------------------------------------------------- /tokens/global/_utils.scss: -------------------------------------------------------------------------------- 1 | %flex-center { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | } 6 | 7 | %flex-start { 8 | display: flex; 9 | align-items: flex-start; 10 | justify-content: flex-start; 11 | } 12 | 13 | %flex-start-center { 14 | display: flex; 15 | align-items: center; 16 | justify-content: flex-start; 17 | } 18 | -------------------------------------------------------------------------------- /components/button/src/lib/button.component.sandbox.ts: -------------------------------------------------------------------------------- 1 | import { sandboxOf } from 'angular-playground'; 2 | import { ButtonComponent } from './button.component'; 3 | 4 | export default sandboxOf(ButtonComponent).add('primary', { 5 | template: 6 | '', 7 | }); 8 | -------------------------------------------------------------------------------- /tokens/base/_font-size.scss: -------------------------------------------------------------------------------- 1 | $vw-viewport: 360; 2 | $vw-enable: true; 3 | 4 | @function font-size-mixin($font) { 5 | @if $vw-enable { 6 | $vw-context: $vw-viewport * 0.01 * 1px; 7 | @return $font / $vw-context * 1vw; 8 | } 9 | 10 | @return $font; 11 | } 12 | 13 | @mixin font-size($font) { 14 | font-size: $font; 15 | font-size: font-size-mixin($font); 16 | } 17 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Design System 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "files": [ 8 | "src/main.playground.ts", 9 | "src/polyfills.ts" 10 | ], 11 | "include": [ 12 | "**/*.sandbox.ts", 13 | "**/*.ts" 14 | ], 15 | "exclude": [ 16 | "**/*.spec.ts", 17 | "**/*.stories.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: [ 3 | '../components/**/*.stories.(ts|mdx)', 4 | '../stories/*.stories.(ts|mdx)', 5 | ], 6 | addons: [ 7 | '@storybook/addon-actions', 8 | '@storybook/addon-links', 9 | '@storybook/addon-docs', 10 | '@storybook/addon-notes', 11 | '@storybook/addon-knobs/register', 12 | '@storybook/addon-viewport/register', 13 | ], 14 | }; 15 | -------------------------------------------------------------------------------- /tokens/base/_colors.scss: -------------------------------------------------------------------------------- 1 | // Primary 2 | $color-brand-primary-1: #231123; 3 | $color-brand-primary-2: #82204a; 4 | $color-brand-primary-3: #558c8c; 5 | $color-brand-primary-4: #e8db7d; 6 | $color-brand-primary-5: #eff7ff; 7 | 8 | // Grey Scale 9 | $color-scale-base-0: #ffffff; 10 | $color-scale-base-15: #f0f1f6; 11 | $color-scale-base-30: #e4e5e9; 12 | $color-scale-base-50: #a7a8ac; 13 | $color-scale-base-75: #47484c; 14 | $color-scale-base-100: #000000; 15 | -------------------------------------------------------------------------------- /browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 3 | // List of extensions which should be recommended for users of this workspace. 4 | "recommendations": [ 5 | "johnpapa.angular2", 6 | "dbaeumer.vscode-eslint", 7 | "eamodio.gitlens", 8 | "stylelint.vscode-stylelint", 9 | "mrmlnc.vscode-csscomb", 10 | "maxvanderschee.web-accessibility", 11 | "editorconfig.editorconfig", 12 | "esbenp.prettier-vscode" 13 | ], 14 | "unwantedRecommendations": [] 15 | } 16 | -------------------------------------------------------------------------------- /components/button/src/lib/button.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { ButtonComponent } from './button.component'; 3 | 4 | describe('ButtonComponent', () => { 5 | beforeEach(async(() => { 6 | TestBed.configureTestingModule({ 7 | declarations: [ButtonComponent], 8 | }).compileComponents(); 9 | })); 10 | 11 | it('should create the button', () => { 12 | const fixture = TestBed.createComponent(ButtonComponent); 13 | expect(fixture.debugElement.componentInstance).toBeTruthy(); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /components/button/src/lib/button.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ui-button', 5 | templateUrl: './button.component.html', 6 | styleUrls: ['./button.component.scss'], 7 | }) 8 | export class ButtonComponent implements OnInit { 9 | @Input() text: string; 10 | @Input() ariaLabel: string; 11 | @Input() ariaPressed: boolean; 12 | @Input() type: 'primary' | 'secondary' | 'outline'; 13 | @Input() action: 'button' | 'submit' | 'reset'; 14 | @Input() onClick: () => void; 15 | 16 | ngOnInit(): void {} 17 | } 18 | -------------------------------------------------------------------------------- /scripts/pre-publish.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | set -e # exit with nonzero exit code if anything fails 4 | 5 | # Lists all modified projects and will be published 6 | npm run lerna:list:changed 7 | 8 | # Build all changed projects 9 | npm run lerna:build:changed 10 | 11 | # Run lint on all projects 12 | npm run lint:all 13 | 14 | # Run the test on all modified projects 15 | npm run lerna:test:ci:changed 16 | 17 | # Changing name and user to differentiate commit and tag from the pipeline 18 | git config user.name "design-system-bot" 19 | git config user.email "design-system@bot.com" 20 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": ["components/*", "tokens/"], 3 | "version": "independent", 4 | "npmClient": "npm", 5 | "command": { 6 | "version": { 7 | "changelogPreset": "conventional-changelog-angular", 8 | "conventionalCommits": true, 9 | "allowBranch": ["master", "release/*"] 10 | }, 11 | "publish": { 12 | "ignoreChanges": [ 13 | "ignored-file", 14 | "**/__fixtures__/**", 15 | "**/__tests__/**", 16 | "*.md", 17 | "*.stories.ts", 18 | "*.spec.ts", 19 | "*.sandbox.ts" 20 | ], 21 | "message": "chore(release): publish" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /tokens/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.1.1](https://github.com/gstvribs/monorepo-angular-component-library/compare/@thedesignsystem/tokens@0.1.0...@thedesignsystem/tokens@0.1.1) (2020-06-22) 7 | 8 | **Note:** Version bump only for package @thedesignsystem/tokens 9 | 10 | 11 | 12 | 13 | 14 | # 0.1.0 (2020-06-22) 15 | 16 | 17 | ### Features 18 | 19 | * **ds:** initial commit ([9f4f91e](https://github.com/gstvribs/monorepo-angular-component-library/commit/9f4f91e7ddd7c7e7722a580bf22083db798dfe5c)) 20 | -------------------------------------------------------------------------------- /tokens/global/_reset-hard.scss: -------------------------------------------------------------------------------- 1 | @import '../base/typography'; 2 | @import '../base/colors'; 3 | 4 | h1 { 5 | @extend %typography-h1; 6 | color: $color-scale-base-100; 7 | } 8 | 9 | h2 { 10 | @extend %typography-h2; 11 | color: $color-scale-base-100; 12 | } 13 | 14 | h3 { 15 | @extend %typography-h3; 16 | color: $color-scale-base-100; 17 | } 18 | 19 | h4 { 20 | @extend %typography-h4; 21 | color: $color-scale-base-100; 22 | } 23 | 24 | p { 25 | @extend %typography-subtitle-1; 26 | color: $color-scale-base-50; 27 | } 28 | 29 | p.small { 30 | @extend %typography-subtitle-2; 31 | color: $color-scale-base-50; 32 | } 33 | 34 | a { 35 | @extend %typography-link-1; 36 | color: $color-brand-primary-3; 37 | } 38 | -------------------------------------------------------------------------------- /tokens/README.md: -------------------------------------------------------------------------------- 1 | # Tokens 2 | 3 | This package provides .scss files providing: colors, typography, shadows, spacing and more 4 | 5 | ## Comments 6 | 7 | This package contains the files: `bundle-soft.scss` and `bundle-hard.scss`, those two options are similar, but the difference is: **hard** is the implementation that changes styles directly in HTML elements like: `

`, `

`, `

`, `

`, `

`, `

` and ``, consequently **soft** is the implementation that only provides classes with the prefix **.tokens-** 8 | 9 | ## Uso 10 | 11 | In `angular.json` at `styles` node add the global `scss` file. 12 | 13 | ```json 14 | "styles": [ 15 | "node_modules/@thedesignsystem/tokens/bundle/bundle-.scss" 16 | ] 17 | ``` 18 | -------------------------------------------------------------------------------- /components/button/src/lib/button.component.scss: -------------------------------------------------------------------------------- 1 | @import '../../../../tokens/base/colors'; 2 | 3 | .ui-button { 4 | font-family: 'Montserrat', sans-serif; 5 | width: 200px; 6 | border-radius: 20px; 7 | padding: 10px; 8 | font-size: 16px; 9 | font-weight: 600; 10 | 11 | &:hover { 12 | cursor: pointer; 13 | } 14 | 15 | &__primary { 16 | background-color: $color-brand-primary-1; 17 | color: $color-scale-base-0; 18 | } 19 | 20 | &__secondary { 21 | color: $color-brand-primary-1; 22 | background-color: $color-scale-base-0; 23 | } 24 | 25 | &__outline { 26 | color: $color-brand-primary-1; 27 | background-color: $color-scale-base-0; 28 | border: 2px solid $color-brand-primary-1; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "esModuleInterop": true, 7 | "sourceMap": true, 8 | "declaration": false, 9 | "downlevelIteration": true, 10 | "experimentalDecorators": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "importHelpers": true, 14 | "target": "es2015", 15 | "types": [ 16 | "jest" 17 | ], 18 | "typeRoots": [ 19 | "node_modules/@types" 20 | ], 21 | "lib": [ 22 | "es2018", 23 | "dom" 24 | ] 25 | }, 26 | "angularCompilerOptions": { 27 | "fullTemplateTypeCheck": true, 28 | "strictInjectionParameters": true 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /tokens/global/_reset-soft.scss: -------------------------------------------------------------------------------- 1 | @import '../base/typography'; 2 | @import '../base/colors'; 3 | 4 | .tokens-h1 { 5 | @extend %typography-h1; 6 | color: $color-scale-base-100; 7 | } 8 | 9 | .tokens-h2 { 10 | @extend %typography-h2; 11 | color: $color-scale-base-100; 12 | } 13 | 14 | .tokens-h3 { 15 | @extend %typography-h3; 16 | color: $color-scale-base-100; 17 | } 18 | 19 | .tokens-h4 { 20 | @extend %typography-h4; 21 | color: $color-scale-base-100; 22 | } 23 | 24 | .tokens-p { 25 | @extend %typography-subtitle-1; 26 | color: $color-scale-base-50; 27 | } 28 | 29 | .tokens-small { 30 | @extend %typography-subtitle-2; 31 | color: $color-scale-base-50; 32 | } 33 | 34 | .tokens-a { 35 | @extend %typography-link-1; 36 | color: $color-brand-primary-3; 37 | } 38 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # compiled output 2 | /dist 3 | **/dist 4 | /tmp 5 | /out-tsc 6 | /documentation 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | **/node_modules 13 | 14 | # profiling files 15 | chrome-profiler-events*.json 16 | speed-measure-plugin*.json 17 | 18 | # IDEs and editors 19 | /.idea 20 | .project 21 | .classpath 22 | .c9/ 23 | *.launch 24 | .settings/ 25 | *.sublime-workspace 26 | 27 | # IDE - VSCode 28 | .vscode/* 29 | !.vscode/settings.json 30 | !.vscode/tasks.json 31 | !.vscode/launch.json 32 | !.vscode/extensions.json 33 | .history/* 34 | 35 | # misc 36 | /.sass-cache 37 | /connect.lock 38 | /coverage 39 | **/coverage 40 | /libpeerconnection.log 41 | *.log 42 | testem.log 43 | documentation.json 44 | /typings 45 | 46 | # System Files 47 | .DS_Store 48 | Thumbs.db 49 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import { addDecorator, addParameters } from '@storybook/angular'; 2 | import { withKnobs } from '@storybook/addon-knobs'; 3 | import { setCompodocJson } from '@storybook/addon-docs/angular'; 4 | import docJson from '../documentation.json'; 5 | 6 | const newViewports = { 7 | mobile: { 8 | name: 'Mobile', 9 | styles: { 10 | width: '360px', 11 | height: '640px', 12 | }, 13 | }, 14 | web: { 15 | name: 'Web', 16 | styles: { 17 | width: '1920px', 18 | height: '820px', 19 | }, 20 | }, 21 | }; 22 | 23 | setCompodocJson(docJson); 24 | addDecorator(withKnobs); 25 | addParameters({ 26 | options: { 27 | showRoots: true, 28 | }, 29 | docs: { 30 | iframeHeight: 60, 31 | }, 32 | viewport: { 33 | viewports: newViewports, 34 | defaultViewport: 'mobile', 35 | }, 36 | }); 37 | -------------------------------------------------------------------------------- /components/button/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@thedesignsystem/button", 3 | "version": "0.2.0", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/gstvribs/monorepo-angular-component-library.git" 7 | }, 8 | "author": { 9 | "name": "Gustavo Ribeiro", 10 | "email": "gu_ribeiro@live.com", 11 | "url": "https://twitter.com/gstvribs" 12 | }, 13 | "license": "MIT", 14 | "scripts": { 15 | "clean": "rimraf dist/", 16 | "build": "ng-packagr -p package.json", 17 | "test": "ng test button --watch=true", 18 | "test:ci": "ng test button --watch=false" 19 | }, 20 | "peerDependencies": { 21 | "@angular/common": "^8.2.14", 22 | "@angular/core": "^8.2.14" 23 | }, 24 | "devDependencies": { 25 | "rimraf": "^3.0.2" 26 | }, 27 | "ngPackage": { 28 | "$schema": "./node_modules/ng-packagr/ng-package.schema.json", 29 | "lib": { 30 | "entryFile": "./src/index.ts" 31 | }, 32 | "dest": "dist/" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /tokens/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@thedesignsystem/tokens", 3 | "version": "0.1.1", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/gstvribs/monorepo-angular-component-library.git" 7 | }, 8 | "author": { 9 | "name": "Gustavo Ribeiro", 10 | "email": "gu_ribeiro@live.com", 11 | "url": "https://twitter.com/gstvribs" 12 | }, 13 | "license": "MIT", 14 | "scripts": { 15 | "prepublishOnly": "npm run clean && npm run build && npm run prepare:copy && npm run prepare:package", 16 | "prepare:copy": "cp package.json dist/ && cp README.md dist/ && cp -R fonts/ dist/fonts/", 17 | "prepare:package": "json -I -f dist/package.json -e this.scripts={};this.devDependencies={}", 18 | "clean": "rimraf dist/", 19 | "build": "npm run build:hard && npm run build:soft", 20 | "build:hard": "scss-bundle -e ./main-hard.scss -o ./dist/bundle/bundle-hard.scss", 21 | "build:soft": "scss-bundle -e ./main-soft.scss -o ./dist/bundle/bundle-soft.scss" 22 | }, 23 | "devDependencies": { 24 | "json": "^9.0.6", 25 | "rimraf": "^3.0.2", 26 | "scss-bundle": "^3.1.2" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Gustavo Ribeiro 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.tabSize": 2, 3 | "editor.formatOnPaste": true, 4 | "editor.formatOnSave": true, 5 | "files.eol": "\n", 6 | "files.insertFinalNewline": true, 7 | "files.trimTrailingWhitespace": true, 8 | "files.watcherExclude": { 9 | "**/dist/**": true 10 | }, 11 | "javascript.format.insertSpaceBeforeFunctionParenthesis": true, 12 | "javascript.preferences.quoteStyle": "single", 13 | "javascript.updateImportsOnFileMove.enabled": "always", 14 | "typescript.preferences.quoteStyle": "single", 15 | "css.validate": false, 16 | "scss.validate": false, 17 | "less.validate": false, 18 | "csscomb.formatOnSave": false, 19 | "csscomb.preset": "csscomb.json", 20 | "[typescript]": { 21 | "editor.defaultFormatter": "esbenp.prettier-vscode" 22 | }, 23 | "[scss]": { 24 | "editor.defaultFormatter": "esbenp.prettier-vscode" 25 | }, 26 | "[javascript]": { 27 | "editor.defaultFormatter": "esbenp.prettier-vscode" 28 | }, 29 | "[html]": { 30 | "editor.defaultFormatter": "esbenp.prettier-vscode" 31 | }, 32 | "[json]": { 33 | "editor.defaultFormatter": "esbenp.prettier-vscode" 34 | }, 35 | "prettier.configPath": ".prettierrc.js" 36 | } 37 | -------------------------------------------------------------------------------- /components/button/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | # [0.2.0](https://github.com/gstvribs/monorepo-angular-component-library/compare/@thedesignsystem/button@0.1.1...@thedesignsystem/button@0.2.0) (2020-07-02) 7 | 8 | 9 | ### Features 10 | 11 | * **button:** add new props ariaLabel and ariaPressed ([90bfd5e](https://github.com/gstvribs/monorepo-angular-component-library/commit/90bfd5e2e4c42b890ab04f4ef8a3687d926a663c)) 12 | 13 | 14 | 15 | 16 | 17 | 18 | ## [0.1.1](https://github.com/gstvribs/monorepo-angular-component-library/compare/@thedesignsystem/button@0.1.0...@thedesignsystem/button@0.1.1) (2020-06-23) 19 | 20 | 21 | ### Bug Fixes 22 | 23 | * **button:** adjusting radius of button ([1c2cf90](https://github.com/gstvribs/monorepo-angular-component-library/commit/1c2cf9007ca8ce714f2a9a621ab33c22c318ff0f)) 24 | 25 | 26 | 27 | 28 | 29 | # 0.1.0 (2020-06-22) 30 | 31 | 32 | ### Features 33 | 34 | * **ds:** initial commit ([9f4f91e](https://github.com/gstvribs/monorepo-angular-component-library/commit/9f4f91e7ddd7c7e7722a580bf22083db798dfe5c)) 35 | -------------------------------------------------------------------------------- /tokens/base/_font-face.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Montserrat'; 3 | font-style: normal; 4 | font-weight: 400; 5 | src: local('Montserrat Regular'), local('Montserrat-Regular'), 6 | url('../fonts/montserrat-v14-latin-regular.woff2') format('woff2'), 7 | url('../fonts/montserrat-v14-latin-regular.woff') format('woff'); 8 | } 9 | 10 | @font-face { 11 | font-family: 'Montserrat'; 12 | font-style: normal; 13 | font-weight: 500; 14 | src: local('Montserrat Medium'), local('Montserrat-Medium'), 15 | url('../fonts/montserrat-v14-latin-500.woff2') format('woff2'), 16 | url('../fonts/montserrat-v14-latin-500.woff') format('woff'); 17 | } 18 | 19 | @font-face { 20 | font-family: 'Montserrat'; 21 | font-style: normal; 22 | font-weight: 600; 23 | src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), 24 | url('../fonts/montserrat-v14-latin-600.woff2') format('woff2'), 25 | url('../fonts/montserrat-v14-latin-600.woff') format('woff'); 26 | } 27 | 28 | @font-face { 29 | font-family: 'Montserrat'; 30 | font-style: normal; 31 | font-weight: 700; 32 | src: local('Montserrat Bold'), local('Montserrat-Bold'), 33 | url('../fonts/montserrat-v14-latin-700.woff2') format('woff2'), 34 | url('../fonts/montserrat-v14-latin-700.woff') format('woff'); 35 | } 36 | -------------------------------------------------------------------------------- /tokens/global/_reset.scss: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | text-decoration: none; 5 | list-style: none; 6 | outline: none; 7 | box-sizing: border-box; 8 | 9 | -webkit-font-smoothing: antialiased; 10 | -webkit-tap-highlight-color: transparent; 11 | } 12 | 13 | ::before, 14 | ::after { 15 | box-sizing: inherit; 16 | text-decoration: inherit; 17 | vertical-align: inherit; 18 | } 19 | 20 | hr { 21 | overflow: visible; /* Show the overflow in Edge and IE */ 22 | } 23 | 24 | /* 25 | * Correct `block` display not defined for any HTML5 element in IE 8/9 26 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 27 | * and Firefox 28 | * Correct `block` display not defined for `main` in IE 11 29 | */ 30 | article, 31 | aside, 32 | details, 33 | figcaption, 34 | figure, 35 | footer, 36 | header, 37 | main, 38 | menu, 39 | nav, 40 | section, 41 | summary { 42 | display: block; 43 | } 44 | 45 | summary { 46 | display: list-item; /* Add the correct display in all browsers */ 47 | } 48 | 49 | button, 50 | input, 51 | select, 52 | textarea, 53 | fieldset { 54 | color: inherit; 55 | background-color: transparent; 56 | border-style: none; 57 | } 58 | 59 | progress { 60 | vertical-align: baseline; 61 | } 62 | 63 | audio, 64 | canvas, 65 | progress, 66 | video { 67 | display: inline-block; /* Internet Explorer 11+, Windows Phone 8.1+ */ 68 | } 69 | 70 | audio:not([controls]) { 71 | display: none; 72 | height: 0; 73 | } 74 | 75 | [hidden] { 76 | display: none !important; 77 | } 78 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "defaultProject": "playground", 6 | "projects": { 7 | "playground": { 8 | "root": "", 9 | "sourceRoot": "src", 10 | "projectType": "application", 11 | "architect": { 12 | "build": { 13 | "builder": "@angular-devkit/build-angular:browser", 14 | "options": { 15 | "outputPath": "dist/playground", 16 | "index": "src/index.html", 17 | "main": "src/main.playground.ts", 18 | "polyfills": "src/polyfills.ts", 19 | "tsConfig": "tsconfig.lib.json", 20 | "assets": ["src/favicon.ico"], 21 | "styles": [ 22 | "node_modules/@thedesignsystem/tokens/bundle/bundle-soft.scss" 23 | ], 24 | "scripts": [] 25 | } 26 | }, 27 | "serve": { 28 | "builder": "@angular-devkit/build-angular:dev-server", 29 | "options": { 30 | "browserTarget": "playground:build", 31 | "open": true, 32 | "port": 4201 33 | } 34 | } 35 | } 36 | }, 37 | "button": { 38 | "projectType": "library", 39 | "root": "components/button", 40 | "sourceRoot": "projects/button/src", 41 | "prefix": "ui", 42 | "architect": { 43 | "test": { 44 | "builder": "@angular-builders/jest:run", 45 | "options": { 46 | "no-cache": true, 47 | "coverage": true, 48 | "tsConfig": "../../tsconfig.spec.json" 49 | } 50 | } 51 | } 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /components/button/src/lib/button.stories.ts: -------------------------------------------------------------------------------- 1 | import { ButtonComponent } from './button.component'; 2 | import { action } from '@storybook/addon-actions'; 3 | import { text, select, boolean, withKnobs } from '@storybook/addon-knobs'; 4 | 5 | export default { 6 | title: 'Button', 7 | component: ButtonComponent, 8 | decorators: [withKnobs], 9 | }; 10 | 11 | const optionsAction = { 12 | Button: 'button', 13 | Submit: 'submit', 14 | Reset: 'reset', 15 | }; 16 | const defaultValueAction = 'button'; 17 | 18 | const optionsType = { 19 | Primario: 'primary', 20 | Segundario: 'secondary', 21 | Outline: 'outline', 22 | }; 23 | 24 | export const primario = () => ({ 25 | component: ButtonComponent, 26 | props: { 27 | action: select('action', optionsAction, defaultValueAction), 28 | type: select('type', optionsType, 'primary'), 29 | text: text('text', 'Click Here!'), 30 | ariaPressed: boolean('ariaPressed', false), 31 | ariaLabel: text('ariaLabel', ''), 32 | onClick: action('button-click'), 33 | }, 34 | }); 35 | 36 | export const segundario = () => ({ 37 | component: ButtonComponent, 38 | props: { 39 | action: select('action', optionsAction, defaultValueAction), 40 | type: select('type', optionsType, 'secondary'), 41 | text: text('text', 'Click Here!'), 42 | ariaPressed: boolean('ariaPressed', false), 43 | ariaLabel: text('ariaLabel', ''), 44 | onClick: action('button-click'), 45 | }, 46 | }); 47 | 48 | export const outline = () => ({ 49 | component: ButtonComponent, 50 | props: { 51 | action: select('action', optionsAction, defaultValueAction), 52 | type: select('type', optionsType, 'outline'), 53 | text: text('text', 'Click Here!'), 54 | ariaPressed: boolean('ariaPressed', false), 55 | ariaLabel: text('ariaLabel', ''), 56 | onClick: action('button-click'), 57 | }, 58 | }); 59 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags.ts'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

The Design System

2 | 3 | > This is a proof of concept of a monorepo structure for serving angular components and design tokens 4 | 5 |

6 | 7 | Maintained with Lerna 8 | 9 | 10 | Commitzen friendly 11 | 12 | 13 | Conventional Commits 14 | 15 |

16 | 17 | ## Getting started 18 | 19 | This is a monorepo repository using [Lerna](https://lerna.js.org/), [Commitzen](http://commitizen.github.io/cz-cli/) and [Conventional Commits](https://conventionalcommits.org) to maintain and manage component versions and for documentation, we use [Storybook](https://storybook.js.org/) and [Compodoc](https://compodoc.app/), you can access by clicking [here](https://thedesignsystem.gustavoribeiro.dev/) 20 | 21 | List of packages containing in this repository: 22 | 23 | | Name of package | Description | 24 | | ---------------------------------------------- | ----------------------------------------------------------------------- | 25 | | [`@thedesignsystem/components`](./components/) | Angular components with each package.json file | 26 | | [`@thedesignsystem/tokens`](./tokens) | Design language elements like: colors, typography, iconography and more | 27 | 28 | ## Setup 29 | 30 | Local setup to run this project locally 31 | 32 | ### Tools: 33 | 34 | - Node [version 10.20.1](https://nodejs.org/download/release/v10.21.0/) 35 | - If you use [nvm](https://github.com/nvm-sh/nvm) just run the command `nvm use` in the root folder 36 | 37 | ### Configuration 38 | 39 | - Install all the dependencies: `npm i` 40 | - Build all the components: `npm run build` 41 | - You can see the components of this repo by running one of these two projects: 42 | - Angular Playground by running `npm run playground` 43 | - Storybook by running `npm run start:storybook` 44 | 45 | ## Configure this project and how to install them at your project 46 | 47 | First of all, your repository needs to be looking at the npm private repository, for that, create a `.npmrc` file at the root of your project and add the private repository: 48 | 49 | ``` 50 | registry = https://registry.npmjs.org/ 51 | @thedesignsystem:registry=http://localhost:4873/ 52 | ``` 53 | 54 | ### Installing components 55 | 56 | All components in this repository are installed separately, that is, each component has its own npm package, for example if you want to install the button component: 57 | 58 | `npm i @thedesignsystem/button` 59 | 60 | ### Installing tokens 61 | 62 | This repository has a monorepo that gives you all the tokens of Design System's design language, styles and elements such as: colors, typography, elevations, embroidery, etc. To install just install the package in your repository: 63 | 64 | `npm i @thedesignsystem/tokens` 65 | 66 | In `angular.json` at `styles` node add the global `scss` file. 67 | 68 | ```json 69 | "styles": [ 70 | "node_modules/@thedesignsystem/tokens/bundle/bundle-hard.scss" 71 | ] 72 | ``` 73 | -------------------------------------------------------------------------------- /stories/0-introduction.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs/blocks'; 2 | 3 | 4 | 5 |

The Design System

6 | 7 | > This is a proof of concept of a monorepo structure for serving angular components and design tokens 8 | 9 |

10 | 11 | Maintained with Lerna 15 | 16 | 17 | Commitzen friendly 21 | 22 | 23 | Conventional Commits 27 | 28 |

29 | 30 | ## Getting started 31 | 32 | This is a monorepo repository using [Lerna](https://lerna.js.org/), [Commitzen](http://commitizen.github.io/cz-cli/) and [Conventional Commits](https://conventionalcommits.org) to maintain and manage component versions and for documentation, we use [Storybook](https://storybook.js.org/) and [Compodoc](https://compodoc.app/), you can access by clicking [here](https://thedesignsystem.gustavoribeiro.dev/) 33 | 34 | List of packages containing in this repository: 35 | 36 | | Name of package | Description | 37 | | ---------------------------------------------- | ----------------------------------------------------------------------- | 38 | | [`@thedesignsystem/components`](./components/) | Angular components with each package.json file | 39 | | [`@thedesignsystem/tokens`](./tokens) | Design language elements like: colors, typography, iconography and more | 40 | 41 | ## Setup 42 | 43 | Local setup to run this project locally 44 | 45 | ### Tools: 46 | 47 | - Node [version 10.20.1](https://nodejs.org/download/release/v10.21.0/) 48 | - If you use [nvm](https://github.com/nvm-sh/nvm) just run the command `nvm use` in the root folder 49 | 50 | ### Configuration 51 | 52 | - Install all the dependencies: `npm i` 53 | - Build all the components: `npm run build` 54 | - You can see the components of this repo by running one of these two projects: 55 | - Angular Playground by running `npm run playground` 56 | - Storybook by running `npm run start:storybook` 57 | 58 | ## Configure this project and how to install them at your project 59 | 60 | First of all, your repository needs to be looking at the npm private repository, for that, create a `.npmrc` file at the root of your project and add the private repository: 61 | 62 | ``` 63 | registry = https://registry.npmjs.org/ 64 | @thedesignsystem:registry=http://localhost:4873/ 65 | ``` 66 | 67 | ### Installing components 68 | 69 | All components in this repository are installed separately, that is, each component has its own npm package, for example if you want to install the button component: 70 | 71 | `npm i @thedesignsystem/button` 72 | 73 | ### Installing tokens 74 | 75 | This repository has a monorepo that gives you all the tokens of Design System's design language, styles and elements such as: colors, typography, elevations, embroidery, etc. To install just install the package in your repository: 76 | 77 | `npm i @thedesignsystem/tokens` 78 | 79 | In `angular.json` at `styles` node add the global `scss` file. 80 | 81 | ```json 82 | "styles": [ 83 | "node_modules/@thedesignsystem/tokens/bundle/bundle-hard.scss" 84 | ] 85 | ``` 86 | -------------------------------------------------------------------------------- /tokens/base/_typography.scss: -------------------------------------------------------------------------------- 1 | @import './font-size'; 2 | 3 | $font-typography-font-family: Montserrat; 4 | $font-typography-h-1-font-weight: 700; 5 | $font-typography-h-1-font-size: 22px; 6 | $font-typography-h-1-letter-spacing: 0; 7 | $font-typography-h-1-line-height: 32px; 8 | $font-typography-h-2-font-weight: 600; 9 | $font-typography-h-2-font-size: 20px; 10 | $font-typography-h-2-letter-spacing: 0; 11 | $font-typography-h-2-line-height: 24px; 12 | $font-typography-h-3-font-weight: 600; 13 | $font-typography-h-3-font-size: 16px; 14 | $font-typography-h-3-letter-spacing: 0; 15 | $font-typography-h-3-line-height: 24px; 16 | $font-typography-h-4-font-weight: 600; 17 | $font-typography-h-4-font-size: 14px; 18 | $font-typography-h-4-letter-spacing: 0; 19 | $font-typography-h-4-line-height: 24px; 20 | $font-typography-acao-1-font-weight: 700; 21 | $font-typography-acao-1-font-size: 12px; 22 | $font-typography-acao-1-letter-spacing: 0; 23 | $font-typography-acao-1-line-height: 24px; 24 | $font-typography-paragraph-1-font-weight: 500; 25 | $font-typography-paragraph-1-font-size: 16px; 26 | $font-typography-paragraph-1-letter-spacing: 0; 27 | $font-typography-paragraph-1-line-height: 24px; 28 | $font-typography-paragraph-2-font-weight: 500; 29 | $font-typography-paragraph-2-font-size: 14px; 30 | $font-typography-paragraph-2-letter-spacing: 0; 31 | $font-typography-paragraph-2-line-height: 24px; 32 | $font-typography-subtitle-1-font-weight: 500; 33 | $font-typography-subtitle-1-font-size: 12px; 34 | $font-typography-subtitle-1-letter-spacing: 0; 35 | $font-typography-subtitle-1-line-height: 16px; 36 | $font-typography-subtitle-2-font-weight: 600; 37 | $font-typography-subtitle-2-font-size: 12px; 38 | $font-typography-subtitle-2-letter-spacing: 0; 39 | $font-typography-subtitle-2-line-height: 16px; 40 | $font-typography-category-1-font-weight: 600; 41 | $font-typography-category-1-font-size: 12px; 42 | $font-typography-category-1-letter-spacing: 0; 43 | $font-typography-category-1-line-height: 16px; 44 | $font-typography-list-1-font-weight: 500; 45 | $font-typography-list-1-font-size: 16px; 46 | $font-typography-list-1-letter-spacing: 0; 47 | $font-typography-list-1-line-height: 24px; 48 | $font-typography-list-2-font-weight: 600; 49 | $font-typography-list-2-font-size: 16px; 50 | $font-typography-list-2-letter-spacing: 0; 51 | $font-typography-list-2-line-height: 24px; 52 | $font-typography-list-3-font-weight: 500; 53 | $font-typography-list-3-font-size: 14px; 54 | $font-typography-list-3-letter-spacing: 0; 55 | $font-typography-list-3-line-height: 24px; 56 | $font-typography-list-4-font-weight: 600; 57 | $font-typography-list-4-font-size: 14px; 58 | $font-typography-list-4-letter-spacing: 0; 59 | $font-typography-list-4-line-height: 24px; 60 | $font-typography-link-1-font-weight: 600; 61 | $font-typography-link-1-font-size: 14px; 62 | $font-typography-link-1-letter-spacing: 0; 63 | $font-typography-link-1-line-height: 24px; 64 | 65 | %typography-h1 { 66 | font-family: $font-typography-font-family; 67 | font-weight: $font-typography-h-1-font-weight; 68 | @include font-size($font-typography-h-1-font-size); 69 | } 70 | 71 | %typography-h2 { 72 | font-family: $font-typography-font-family; 73 | font-weight: $font-typography-h-2-font-weight; 74 | @include font-size($font-typography-h-2-font-size); 75 | } 76 | 77 | %typography-h3 { 78 | font-family: $font-typography-font-family; 79 | font-weight: $font-typography-h-3-font-weight; 80 | @include font-size($font-typography-h-3-font-size); 81 | } 82 | 83 | %typography-h4 { 84 | font-family: $font-typography-font-family; 85 | font-weight: $font-typography-h-4-font-weight; 86 | @include font-size($font-typography-h-4-font-size); 87 | } 88 | 89 | %typography-paragraph-1 { 90 | font-family: $font-typography-font-family; 91 | font-weight: $font-typography-paragraph-1-font-weight; 92 | @include font-size($font-typography-paragraph-1-font-size); 93 | } 94 | 95 | %typography-paragraph-2 { 96 | font-family: $font-typography-font-family; 97 | font-weight: $font-typography-paragraph-2-font-weight; 98 | @include font-size($font-typography-paragraph-2-font-size); 99 | } 100 | 101 | %typography-subtitle-1 { 102 | font-family: $font-typography-font-family; 103 | font-weight: $font-typography-subtitle-1-font-weight; 104 | @include font-size($font-typography-subtitle-1-font-size); 105 | } 106 | 107 | %typography-subtitle-2 { 108 | font-family: $font-typography-font-family; 109 | font-weight: $font-typography-subtitle-2-font-weight; 110 | @include font-size($font-typography-subtitle-2-font-size); 111 | } 112 | 113 | %typography-link-1 { 114 | font-family: $font-typography-font-family; 115 | font-weight: $font-typography-link-1-font-weight; 116 | @include font-size($font-typography-link-1-font-size); 117 | } 118 | -------------------------------------------------------------------------------- /csscomb.json: -------------------------------------------------------------------------------- 1 | { 2 | "exclude": [".git/**", "node_modules/**", "bower_components/**"], 3 | "always-semicolon": true, 4 | "block-indent": " ", 5 | "color-case": "upper", 6 | "color-shorthand": false, 7 | "element-case": "lower", 8 | "eof-newline": true, 9 | "leading-zero": true, 10 | "quotes": "double", 11 | "sort-order-fallback": "abc", 12 | "space-before-colon": "", 13 | "space-after-colon": " ", 14 | "space-before-combinator": " ", 15 | "space-after-combinator": " ", 16 | "space-between-declarations": "\n", 17 | "space-before-opening-brace": " ", 18 | "space-after-opening-brace": "\n", 19 | "space-after-selector-delimiter": " ", 20 | "space-before-selector-delimiter": "", 21 | "space-before-closing-brace": "\n", 22 | "strip-spaces": true, 23 | "tab-size": true, 24 | "vendor-prefix-align": true, 25 | "sort-order": [ 26 | ["$import", "$variable", "$extend", "$include"], 27 | [ 28 | "position", 29 | "top", 30 | "right", 31 | "bottom", 32 | "left", 33 | "z-index", 34 | "display", 35 | "float", 36 | "width", 37 | "height", 38 | "max-width", 39 | "max-height", 40 | "min-width", 41 | "min-height", 42 | "padding", 43 | "padding-top", 44 | "padding-right", 45 | "padding-bottom", 46 | "padding-left", 47 | "margin", 48 | "margin-top", 49 | "margin-right", 50 | "margin-bottom", 51 | "margin-left", 52 | "margin-collapse", 53 | "margin-top-collapse", 54 | "margin-right-collapse", 55 | "margin-bottom-collapse", 56 | "margin-left-collapse", 57 | "overflow", 58 | "overflow-x", 59 | "overflow-y", 60 | "clip", 61 | "clear", 62 | "font", 63 | "font-family", 64 | "font-size", 65 | "font-smoothing", 66 | "osx-font-smoothing", 67 | "font-style", 68 | "font-weight", 69 | "hyphens", 70 | "src", 71 | "line-height", 72 | "letter-spacing", 73 | "word-spacing", 74 | "color", 75 | "text-align", 76 | "text-decoration", 77 | "text-indent", 78 | "text-overflow", 79 | "text-rendering", 80 | "text-size-adjust", 81 | "text-shadow", 82 | "text-transform", 83 | "word-break", 84 | "word-wrap", 85 | "white-space", 86 | "vertical-align", 87 | "list-style", 88 | "list-style-type", 89 | "list-style-position", 90 | "list-style-image", 91 | "pointer-events", 92 | "cursor", 93 | "background", 94 | "background-attachment", 95 | "background-color", 96 | "background-image", 97 | "background-position", 98 | "background-repeat", 99 | "background-size", 100 | "border", 101 | "border-collapse", 102 | "border-top", 103 | "border-right", 104 | "border-bottom", 105 | "border-left", 106 | "border-color", 107 | "border-image", 108 | "border-top-color", 109 | "border-right-color", 110 | "border-bottom-color", 111 | "border-left-color", 112 | "border-spacing", 113 | "border-style", 114 | "border-top-style", 115 | "border-right-style", 116 | "border-bottom-style", 117 | "border-left-style", 118 | "border-width", 119 | "border-top-width", 120 | "border-right-width", 121 | "border-bottom-width", 122 | "border-left-width", 123 | "border-radius", 124 | "border-top-right-radius", 125 | "border-bottom-right-radius", 126 | "border-bottom-left-radius", 127 | "border-top-left-radius", 128 | "border-radius-topright", 129 | "border-radius-bottomright", 130 | "border-radius-bottomleft", 131 | "border-radius-topleft", 132 | "content", 133 | "quotes", 134 | "outline", 135 | "outline-offset", 136 | "opacity", 137 | "filter", 138 | "visibility", 139 | "size", 140 | "zoom", 141 | "transform", 142 | "box-align", 143 | "box-flex", 144 | "box-orient", 145 | "box-pack", 146 | "box-shadow", 147 | "box-sizing", 148 | "table-layout", 149 | "animation", 150 | "animation-delay", 151 | "animation-duration", 152 | "animation-iteration-count", 153 | "animation-name", 154 | "animation-play-state", 155 | "animation-timing-function", 156 | "animation-fill-mode", 157 | "transition", 158 | "transition-delay", 159 | "transition-duration", 160 | "transition-property", 161 | "transition-timing-function", 162 | "background-clip", 163 | "backface-visibility", 164 | "resize", 165 | "appearance", 166 | "user-select", 167 | "interpolation-mode", 168 | "direction", 169 | "marks", 170 | "page", 171 | "set-link-source", 172 | "unicode-bidi", 173 | "speak" 174 | ], 175 | ["$include breakpoint"] 176 | ] 177 | } 178 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@thedesignsystem/app", 3 | "version": "0.0.0", 4 | "private": true, 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/gstvribs/monorepo-angular-component-library.git" 8 | }, 9 | "author": { 10 | "name": "Gustavo Ribeiro", 11 | "email": "gu_ribeiro@live.com", 12 | "url": "https://twitter.com/gstvribs" 13 | }, 14 | "scripts": { 15 | "commit": "git-cz", 16 | "chromatic": "npx chromatic --project-token gq18tpvbbj8", 17 | "build": "npm run lerna:build", 18 | "build:static": "bash scripts/build.sh", 19 | "test": "npm run lerna:test:ci:changed", 20 | "lint": "npm run lint:ts && npm run lint:scss", 21 | "format": "prettier --write components/**/*.{js,ts,scss,json}", 22 | "publish:prepare": "bash scripts/pre-publish.sh", 23 | "publish:local": "npm run publish:prepare && lerna publish --contents dist --registry=http://localhost:4873", 24 | "package:dump": "npm run lerna:build && lerna publish from-package --contents dist --registry=http://localhost:4873", 25 | "lint:ts": "eslint -c .eslintrc ./components/ --quiet --ext .ts", 26 | "lint:ts:fix": "eslint -c .eslintrc ./components/ --quiet --ext .ts --fix", 27 | "lint:scss": "stylelint **/*.scss --config .stylelintrc --syntax scss", 28 | "lint:scss:fix": "stylelint **/*.scss --config .stylelintrc --syntax scss --fix", 29 | "registry:local": "verdaccio", 30 | "registry:auth": "npm config set registry http://localhost:4873/ && npm adduser --registry http://localhost:4873/ && npm run npm:reset", 31 | "registry:reset": "npm config set registry https://registry.npmjs.org/", 32 | "registry:dump": "npm run lerna:build && lerna publish from-package --contents dist --registry=http://localhost:4873", 33 | "start:playground": "angular-playground", 34 | "start:storybook": "npm run json:docs && start-storybook -p 4203", 35 | "build:storybook": "npm run json:docs && build-storybook -c .storybook -s .storybook/public -o dist/", 36 | "start:docs": "compodoc -p tsconfig.json -s -w", 37 | "build:docs": "compodoc -p tsconfig.json", 38 | "json:docs": "compodoc -p tsconfig.json -e json -d .", 39 | "lerna:list": "lerna ls", 40 | "lerna:list:changed": "lerna list --since", 41 | "lerna:build": "lerna run build", 42 | "lerna:build:changed": "lerna run build --since", 43 | "lerna:test:ci": "lerna run test:ci", 44 | "lerna:test:ci:changed": "lerna run test:ci --since", 45 | "lerna:clean": "npm run lerna:clean:artifacts && npm run lerna:clean:packages && npm run lerna:clean:root", 46 | "lerna:clean:artifacts": "lerna run clean --parallel", 47 | "lerna:clean:packages": "lerna clean --yes", 48 | "lerna:clean:root": "rimraf node_modules && rimraf dist", 49 | "postinstall": "lerna bootstrap --hoist" 50 | }, 51 | "config": { 52 | "commitizen": { 53 | "path": "./node_modules/cz-conventional-changelog" 54 | } 55 | }, 56 | "husky": { 57 | "hooks": { 58 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS", 59 | "pre-commit": "npm run build && npm run lint && npm run test" 60 | } 61 | }, 62 | "jest": { 63 | "preset": "jest-preset-angular", 64 | "roots": [ 65 | "/src" 66 | ], 67 | "modulePaths": [ 68 | "/dist" 69 | ], 70 | "testMatch": [ 71 | "/src/**/*.spec.ts" 72 | ], 73 | "coveragePathIgnorePatterns": [ 74 | "/node_modules/*", 75 | "/**/node_modules/*" 76 | ], 77 | "modulePathIgnorePatterns": [ 78 | "/node_modules/*", 79 | "/**/node_modules/*" 80 | ], 81 | "setupFilesAfterEnv": [ 82 | "/../../setup-jest.ts" 83 | ] 84 | }, 85 | "dependencies": { 86 | "@angular/common": "^8.2.14", 87 | "@angular/compiler": "^8.2.14", 88 | "@angular/core": "^8.2.14", 89 | "@angular/forms": "^8.2.14", 90 | "@angular/platform-browser": "^8.2.14", 91 | "@angular/platform-browser-dynamic": "^8.2.14", 92 | "@thedesignsystem/tokens": "^0.1.1", 93 | "tslib": "^1.10.0", 94 | "zone.js": "^0.9.1" 95 | }, 96 | "devDependencies": { 97 | "@angular-builders/jest": "^9.0.1", 98 | "@angular-devkit/build-angular": "^0.803.25", 99 | "@angular-devkit/build-ng-packagr": "^0.803.27", 100 | "@angular-eslint/eslint-plugin": "0.0.1-alpha.32", 101 | "@angular-eslint/eslint-plugin-template": "0.0.1-alpha.32", 102 | "@angular-eslint/template-parser": "0.0.1-alpha.32", 103 | "@angular/cli": "^8.3.28", 104 | "@angular/compiler-cli": "^8.2.14", 105 | "@angular/language-service": "^8.2.14", 106 | "@babel/core": "^7.10.2", 107 | "@commitlint/cli": "^8.3.5", 108 | "@commitlint/config-conventional": "^8.3.4", 109 | "@compodoc/compodoc": "^1.1.11", 110 | "@lerna/filter-options": "^3.20.0", 111 | "@storybook/addon-actions": "^6.0.18", 112 | "@storybook/addon-docs": "^6.0.18", 113 | "@storybook/addon-knobs": "^6.0.18", 114 | "@storybook/addon-links": "^6.0.18", 115 | "@storybook/addon-notes": "^5.3.19", 116 | "@storybook/addon-viewport": "^6.0.18", 117 | "@storybook/addons": "^6.0.18", 118 | "@storybook/angular": "^6.0.18", 119 | "@types/jest": "^25.2.1", 120 | "@types/node": "^8.9.4", 121 | "@typescript-eslint/eslint-plugin": "^3.3.0", 122 | "@typescript-eslint/parser": "^3.3.0", 123 | "angular-playground": "^6.2.0", 124 | "autoprefixer": "^8.6.5", 125 | "babel-loader": "^8.1.0", 126 | "chromatic": "^5.1.0", 127 | "cz-conventional-changelog": "^3.2.0", 128 | "eslint": "^7.2.0", 129 | "eslint-config-prettier": "^6.11.0", 130 | "eslint-plugin-import": "^2.21.2", 131 | "eslint-plugin-jsdoc": "^27.1.2", 132 | "eslint-plugin-prefer-arrow": "^1.2.1", 133 | "eslint-plugin-prettier": "^3.1.4", 134 | "git-cz": "^4.6.2", 135 | "husky": "^4.2.5", 136 | "jest": "^25.2.7", 137 | "lerna": "^3.22.0", 138 | "ng-packagr": "^9.1.5", 139 | "prettier": "^2.0.5", 140 | "rimraf": "^3.0.2", 141 | "stylelint": "^13.6.0", 142 | "stylelint-config-prettier": "^8.0.1", 143 | "stylelint-config-recommended": "^3.0.0", 144 | "stylelint-scss": "^3.17.2", 145 | "ts-node": "^7.0.0", 146 | "typescript": "~3.5.3", 147 | "verdaccio": "^4.6.2" 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "plugins": ["@typescript-eslint", "@angular-eslint", "prefer-arrow", "jsdoc"], 4 | "env": { 5 | "browser": true, 6 | "commonjs": true, 7 | "es6": true, 8 | "jest": true 9 | }, 10 | "extends": [ 11 | "plugin:@typescript-eslint/recommended", 12 | "plugin:@typescript-eslint/recommended-requiring-type-checking", 13 | "plugin:@angular-eslint/recommended", 14 | "plugin:prettier/recommended", 15 | "plugin:import/errors", 16 | "plugin:import/warnings", 17 | "prettier", 18 | "prettier/@typescript-eslint" 19 | ], 20 | "parserOptions": { 21 | "project": "tsconfig.json", 22 | "sourceType": "module", 23 | "ecmaVersion": 2018 24 | }, 25 | "settings": { 26 | "import/parsers": { 27 | "@typescript-eslint/parser": [".ts"] 28 | }, 29 | "import/resolver": { 30 | "node": { 31 | "extensions": [".js", ".ts"] 32 | } 33 | } 34 | }, 35 | "rules": { 36 | "@angular-eslint/component-selector": [ 37 | "error", 38 | { 39 | "type": "element", 40 | "prefix": "ui", 41 | "style": "kebab-case" 42 | } 43 | ], 44 | "@angular-eslint/directive-selector": [ 45 | "error", 46 | { 47 | "type": "attribute", 48 | "prefix": "ui", 49 | "style": "camelCase" 50 | } 51 | ], 52 | "@angular-eslint/component-class-suffix": "error", 53 | "@angular-eslint/contextual-lifecycle": "error", 54 | "@angular-eslint/directive-class-suffix": "error", 55 | "@angular-eslint/no-conflicting-lifecycle": "error", 56 | "@angular-eslint/no-host-metadata-property": "error", 57 | "@angular-eslint/no-input-rename": "error", 58 | "@angular-eslint/no-inputs-metadata-property": "error", 59 | "@angular-eslint/no-output-native": "error", 60 | "@angular-eslint/no-output-on-prefix": "error", 61 | "@angular-eslint/no-output-rename": "error", 62 | "@angular-eslint/no-outputs-metadata-property": "error", 63 | "@angular-eslint/use-lifecycle-interface": "error", 64 | "@angular-eslint/use-pipe-transform-interface": "error", 65 | "@typescript-eslint/adjacent-overload-signatures": "error", 66 | "@typescript-eslint/array-type": "off", 67 | "@typescript-eslint/no-floating-promises": [ 68 | "warn", 69 | { 70 | "ignoreIIFE": true 71 | } 72 | ], 73 | "@typescript-eslint/ban-types": [ 74 | "error", 75 | { 76 | "types": { 77 | "Object": { 78 | "message": "Avoid using the `Object` type. Did you mean `object`?" 79 | }, 80 | "Function": { 81 | "message": "Avoid using the `Function` type. Prefer a specific function type, like `() => void`." 82 | }, 83 | "Boolean": { 84 | "message": "Avoid using the `Boolean` type. Did you mean `boolean`?" 85 | }, 86 | "Number": { 87 | "message": "Avoid using the `Number` type. Did you mean `number`?" 88 | }, 89 | "String": { 90 | "message": "Avoid using the `String` type. Did you mean `string`?" 91 | }, 92 | "Symbol": { 93 | "message": "Avoid using the `Symbol` type. Did you mean `symbol`?" 94 | } 95 | } 96 | } 97 | ], 98 | "@typescript-eslint/consistent-type-assertions": "error", 99 | "@typescript-eslint/dot-notation": "error", 100 | "@typescript-eslint/explicit-member-accessibility": [ 101 | "off", 102 | { 103 | "accessibility": "explicit" 104 | } 105 | ], 106 | "@typescript-eslint/interface-name-prefix": "off", 107 | "@typescript-eslint/member-ordering": "error", 108 | "@typescript-eslint/no-empty-function": "off", 109 | "@typescript-eslint/no-empty-interface": "error", 110 | "@typescript-eslint/no-explicit-any": "off", 111 | "@typescript-eslint/no-inferrable-types": "error", 112 | "@typescript-eslint/no-misused-new": "error", 113 | "@typescript-eslint/no-namespace": "error", 114 | "@typescript-eslint/no-non-null-assertion": "error", 115 | "@typescript-eslint/no-parameter-properties": "off", 116 | "@typescript-eslint/no-unused-expressions": "error", 117 | "@typescript-eslint/no-use-before-define": "off", 118 | "@typescript-eslint/no-var-requires": "off", 119 | "@typescript-eslint/prefer-for-of": "error", 120 | "@typescript-eslint/prefer-function-type": "error", 121 | "@typescript-eslint/prefer-namespace-keyword": "error", 122 | "@typescript-eslint/quotes": ["error", "single"], 123 | "@typescript-eslint/triple-slash-reference": [ 124 | "error", 125 | { 126 | "path": "always", 127 | "types": "prefer-import", 128 | "lib": "always" 129 | } 130 | ], 131 | "@typescript-eslint/unified-signatures": "error", 132 | "prettier/prettier": "error", 133 | "jsdoc/check-alignment": "error", 134 | "jsdoc/check-indentation": "error", 135 | "jsdoc/newline-after-description": "error", 136 | "jsdoc/no-types": "error", 137 | "prefer-arrow/prefer-arrow-functions": "error", 138 | "import/no-deprecated": "warn", 139 | "import/order": "off", 140 | "arrow-parens": ["off", "always"], 141 | "camelcase": "error", 142 | "comma-dangle": "off", 143 | "complexity": "off", 144 | "constructor-super": "error", 145 | "eqeqeq": ["error", "smart"], 146 | "guard-for-in": "error", 147 | "id-match": "error", 148 | "max-classes-per-file": "off", 149 | "new-parens": "error", 150 | "no-bitwise": "error", 151 | "no-caller": "error", 152 | "no-cond-assign": "error", 153 | "no-debugger": "error", 154 | "no-empty": "off", 155 | "no-eval": "error", 156 | "no-fallthrough": "error", 157 | "no-invalid-this": "off", 158 | "no-multiple-empty-lines": "off", 159 | "no-new-wrappers": "error", 160 | "no-restricted-imports": ["error", "rxjs/Rx"], 161 | "no-throw-literal": "error", 162 | "no-trailing-spaces": "error", 163 | "no-undef-init": "error", 164 | "no-underscore-dangle": "error", 165 | "no-unsafe-finally": "error", 166 | "no-unused-labels": "error", 167 | "no-var": "error", 168 | "object-shorthand": "error", 169 | "one-var": ["error", "never"], 170 | "prefer-const": "error", 171 | "quote-props": ["error", "as-needed"], 172 | "radix": "error", 173 | "use-isnan": "error", 174 | "valid-typeof": "off", 175 | "no-shadow": [ 176 | "error", 177 | { 178 | "hoist": "all" 179 | } 180 | ], 181 | "max-len": [ 182 | "error", 183 | { 184 | "code": 140 185 | } 186 | ], 187 | "spaced-comment": [ 188 | "error", 189 | "always", 190 | { 191 | "markers": ["/"] 192 | } 193 | ], 194 | "id-blacklist": [ 195 | "error", 196 | "any", 197 | "Number", 198 | "number", 199 | "String", 200 | "string", 201 | "Boolean", 202 | "Undefined", 203 | "undefined" 204 | ], 205 | "no-console": [ 206 | "error", 207 | { 208 | "allow": [ 209 | "log", 210 | "warn", 211 | "dir", 212 | "timeLog", 213 | "assert", 214 | "clear", 215 | "count", 216 | "countReset", 217 | "group", 218 | "groupEnd", 219 | "table", 220 | "dirxml", 221 | "error", 222 | "groupCollapsed", 223 | "Console", 224 | "profile", 225 | "profileEnd", 226 | "timeStamp", 227 | "context" 228 | ] 229 | } 230 | ] 231 | } 232 | } 233 | -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-700.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 13 | 14 | 15 | 17 | 19 | 22 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 36 | 37 | 39 | 41 | 42 | 44 | 46 | 47 | 50 | 52 | 54 | 56 | 57 | 58 | 59 | 61 | 64 | 65 | 67 | 69 | 70 | 71 | 72 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 83 | 84 | 86 | 87 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 104 | 106 | 108 | 110 | 112 | 113 | 115 | 116 | 117 | 119 | 120 | 121 | 123 | 124 | 126 | 128 | 130 | 131 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 142 | 143 | 145 | 147 | 148 | 149 | 151 | 152 | 154 | 155 | 156 | 159 | 161 | 164 | 166 | 167 | 168 | 169 | 172 | 173 | 175 | 176 | 178 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 188 | 189 | 190 | 192 | 194 | 196 | 197 | 198 | 199 | 201 | 203 | 205 | 206 | 208 | 209 | 210 | 211 | 213 | 214 | 215 | 216 | 218 | 219 | 221 | 223 | 225 | 227 | 230 | 233 | 234 | 236 | 237 | 238 | 239 | 241 | 242 | 243 | 245 | 247 | 249 | 251 | 254 | 257 | 260 | 263 | 265 | 267 | 269 | 271 | 274 | 275 | 276 | 277 | 279 | 281 | 283 | 285 | 287 | 289 | 292 | 295 | 297 | 299 | 300 | 301 | 302 | 304 | 306 | 308 | 310 | 311 | 312 | 313 | 314 | 315 | 317 | 319 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-600.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 13 | 14 | 15 | 17 | 19 | 22 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 36 | 37 | 38 | 40 | 41 | 43 | 45 | 46 | 49 | 51 | 53 | 55 | 56 | 57 | 58 | 60 | 63 | 64 | 66 | 68 | 69 | 70 | 71 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 82 | 83 | 85 | 86 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 103 | 105 | 107 | 109 | 111 | 112 | 114 | 115 | 116 | 118 | 119 | 120 | 122 | 123 | 125 | 127 | 129 | 130 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 141 | 142 | 144 | 146 | 147 | 148 | 150 | 151 | 153 | 154 | 155 | 158 | 160 | 163 | 165 | 166 | 167 | 168 | 171 | 172 | 174 | 175 | 177 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 187 | 188 | 189 | 191 | 193 | 195 | 196 | 197 | 198 | 200 | 202 | 204 | 205 | 208 | 209 | 210 | 211 | 213 | 214 | 215 | 216 | 218 | 219 | 221 | 223 | 225 | 227 | 230 | 233 | 234 | 236 | 237 | 238 | 239 | 241 | 242 | 243 | 245 | 247 | 249 | 251 | 254 | 257 | 260 | 263 | 265 | 267 | 269 | 271 | 274 | 275 | 276 | 277 | 279 | 281 | 283 | 285 | 287 | 289 | 292 | 295 | 297 | 299 | 300 | 301 | 302 | 304 | 306 | 308 | 310 | 311 | 312 | 313 | 314 | 315 | 317 | 319 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | -------------------------------------------------------------------------------- /tokens/fonts/montserrat-v14-latin-500.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 13 | 14 | 15 | 17 | 19 | 22 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 36 | 37 | 38 | 40 | 41 | 43 | 45 | 46 | 49 | 51 | 53 | 55 | 56 | 57 | 58 | 60 | 63 | 64 | 66 | 68 | 69 | 70 | 71 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 82 | 83 | 85 | 86 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 103 | 105 | 107 | 109 | 111 | 112 | 114 | 115 | 116 | 118 | 119 | 120 | 122 | 123 | 125 | 127 | 129 | 130 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 141 | 142 | 144 | 146 | 147 | 148 | 150 | 151 | 153 | 154 | 155 | 158 | 160 | 163 | 165 | 166 | 167 | 168 | 171 | 172 | 174 | 175 | 176 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 186 | 187 | 188 | 190 | 192 | 194 | 195 | 196 | 197 | 199 | 201 | 203 | 204 | 206 | 207 | 208 | 209 | 211 | 212 | 213 | 214 | 216 | 217 | 219 | 221 | 223 | 225 | 228 | 231 | 232 | 234 | 235 | 236 | 237 | 239 | 240 | 241 | 243 | 245 | 247 | 249 | 252 | 255 | 258 | 261 | 264 | 266 | 268 | 270 | 273 | 274 | 275 | 276 | 278 | 281 | 283 | 285 | 287 | 289 | 292 | 295 | 297 | 299 | 300 | 301 | 302 | 304 | 306 | 308 | 310 | 311 | 312 | 313 | 314 | 315 | 317 | 319 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | --------------------------------------------------------------------------------