├── .github └── ISSUE_TEMPLATE │ └── bug_report.md ├── .gitignore ├── .prettierrc ├── CODEOWNERS ├── CONTRIBUTING.md ├── LICENSE.txt ├── README.md ├── angular ├── storybook-v4 │ ├── .dsmrc │ ├── .editorconfig │ ├── .storybook │ │ ├── addons.js │ │ ├── config.js │ │ ├── tsconfig.json │ │ └── webpack.config.js │ ├── angular.json │ ├── browserslist │ ├── e2e │ │ ├── protractor.conf.js │ │ ├── src │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── app.component.html │ │ │ ├── app.component.scss │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── components │ │ │ │ ├── _variables.scss │ │ │ │ ├── button │ │ │ │ ├── button.component.html │ │ │ │ ├── button.component.scss │ │ │ │ ├── button.component.ts │ │ │ │ └── versionFile.json │ │ │ │ ├── icons │ │ │ │ ├── app-icon.component.ts │ │ │ │ ├── assets │ │ │ │ │ ├── check-circle.svg │ │ │ │ │ ├── chevron-right.svg │ │ │ │ │ ├── close-circle.svg │ │ │ │ │ ├── close.svg │ │ │ │ │ ├── flag.svg │ │ │ │ │ ├── info-circle.svg │ │ │ │ │ └── warn.svg │ │ │ │ └── index.js │ │ │ │ ├── nav │ │ │ │ ├── nav.component.html │ │ │ │ ├── nav.component.scss │ │ │ │ └── nav.component.ts │ │ │ │ └── toast │ │ │ │ ├── toast.component.html │ │ │ │ ├── toast.component.scss │ │ │ │ └── toast.component.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── stories │ │ │ ├── button.stories.ts │ │ │ ├── nav.stories.ts │ │ │ └── toast.stories.ts │ │ ├── styles.scss │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── storybook-v5 │ ├── .dsmrc │ ├── .editorconfig │ ├── .storybook │ │ ├── addons.js │ │ ├── config.js │ │ ├── presets.js │ │ ├── tsconfig.json │ │ └── webpack.config.js │ ├── angular.json │ ├── browserslist │ ├── e2e │ │ ├── protractor.conf.js │ │ ├── src │ │ │ ├── app.e2e-spec.ts │ │ │ └── app.po.ts │ │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src │ │ ├── app │ │ │ ├── app.component.html │ │ │ ├── app.component.scss │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ └── components │ │ │ │ ├── _variables.scss │ │ │ │ ├── button │ │ │ │ ├── button.component.html │ │ │ │ ├── button.component.scss │ │ │ │ ├── button.component.ts │ │ │ │ └── versionFile.json │ │ │ │ ├── icons │ │ │ │ ├── app-icon.component.ts │ │ │ │ ├── assets │ │ │ │ │ ├── check-circle.svg │ │ │ │ │ ├── chevron-right.svg │ │ │ │ │ ├── close-circle.svg │ │ │ │ │ ├── close.svg │ │ │ │ │ ├── flag.svg │ │ │ │ │ ├── info-circle.svg │ │ │ │ │ └── warn.svg │ │ │ │ └── index.js │ │ │ │ ├── nav │ │ │ │ ├── nav.component.html │ │ │ │ ├── nav.component.scss │ │ │ │ └── nav.component.ts │ │ │ │ └── toast │ │ │ │ ├── toast.component.html │ │ │ │ ├── toast.component.scss │ │ │ │ └── toast.component.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── stories │ │ │ ├── button.mdx │ │ │ ├── button.stories.ts │ │ │ ├── nav.stories.ts │ │ │ └── toast.stories.ts │ │ ├── styles.scss │ │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json └── storybook-v6 │ ├── .dsmrc │ ├── .editorconfig │ ├── .storybook │ ├── main.js │ ├── manager.js │ ├── preview.js │ └── tsconfig.json │ ├── angular.json │ ├── browserslist │ ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json │ ├── karma.conf.js │ ├── package.json │ ├── src │ ├── app │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── components │ │ │ ├── _variables.scss │ │ │ ├── button │ │ │ ├── button.component.html │ │ │ ├── button.component.scss │ │ │ ├── button.component.ts │ │ │ └── versionFile.json │ │ │ ├── icons │ │ │ ├── app-icon.component.ts │ │ │ ├── assets │ │ │ │ ├── check-circle.svg │ │ │ │ ├── chevron-right.svg │ │ │ │ ├── close-circle.svg │ │ │ │ ├── close.svg │ │ │ │ ├── flag.svg │ │ │ │ ├── info-circle.svg │ │ │ │ └── warn.svg │ │ │ └── index.js │ │ │ ├── nav │ │ │ ├── nav.component.html │ │ │ ├── nav.component.scss │ │ │ └── nav.component.ts │ │ │ └── toast │ │ │ ├── toast.component.html │ │ │ ├── toast.component.scss │ │ │ └── toast.component.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── stories │ │ ├── button.mdx │ │ ├── button.stories.ts │ │ ├── nav.stories.ts │ │ └── toast.stories.ts │ ├── styles.scss │ └── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.spec.json │ └── tslint.json ├── html ├── storybook-v4 │ ├── .dsmrc │ ├── .storybook │ │ ├── addons.js │ │ ├── config.js │ │ ├── preview-head.html │ │ └── webpack.config.js │ ├── package.json │ └── src │ │ ├── components │ │ ├── _variables.scss │ │ ├── button │ │ │ ├── _button.scss │ │ │ └── button.docs.json │ │ ├── native-button │ │ │ ├── native-button.js │ │ │ └── styles.js │ │ ├── nav │ │ │ ├── _nav.scss │ │ │ └── nav.docs.json │ │ ├── toast │ │ │ ├── _toast.scss │ │ │ └── toast.docs.json │ │ └── utils │ │ │ └── icons │ │ │ ├── check-circle.svg │ │ │ ├── chevron-right.svg │ │ │ ├── close-circle.svg │ │ │ ├── close.svg │ │ │ ├── flag.svg │ │ │ ├── index.js │ │ │ ├── info-circle.svg │ │ │ ├── toast-icons.js │ │ │ └── warn.svg │ │ └── stories │ │ ├── button.stories.js │ │ ├── native-button.stories.js │ │ ├── nav.stories.js │ │ └── toast.stories.js ├── storybook-v5 │ ├── .dsmrc │ ├── .storybook │ │ ├── addons.js │ │ ├── config.js │ │ ├── presets.js │ │ ├── preview-head.html │ │ └── webpack.config.js │ ├── package.json │ └── src │ │ ├── components │ │ ├── _variables.scss │ │ ├── button │ │ │ ├── _button.scss │ │ │ ├── button.docs.json │ │ │ └── button.mdx │ │ ├── native-button │ │ │ ├── native-button.js │ │ │ └── styles.js │ │ ├── nav │ │ │ ├── _nav.scss │ │ │ └── nav.docs.json │ │ ├── toast │ │ │ ├── _toast.scss │ │ │ └── toast.docs.json │ │ └── utils │ │ │ └── icons │ │ │ ├── check-circle.svg │ │ │ ├── chevron-right.svg │ │ │ ├── close-circle.svg │ │ │ ├── close.svg │ │ │ ├── flag.svg │ │ │ ├── index.js │ │ │ ├── info-circle.svg │ │ │ ├── toast-icons.js │ │ │ └── warn.svg │ │ └── stories │ │ ├── button.stories.js │ │ ├── native-button.stories.js │ │ ├── nav.stories.js │ │ └── toast.stories.js └── storybook-v6 │ ├── .dsmrc │ ├── .storybook │ ├── main.js │ ├── manager.js │ ├── preview-head.html │ └── preview.js │ ├── package.json │ └── src │ ├── components │ ├── _variables.scss │ ├── button │ │ ├── _button.scss │ │ ├── button.docs.json │ │ └── button.mdx │ ├── native-button │ │ ├── native-button.js │ │ └── styles.js │ ├── nav │ │ ├── _nav.scss │ │ └── nav.docs.json │ ├── toast │ │ ├── _toast.scss │ │ └── toast.docs.json │ └── utils │ │ └── icons │ │ ├── check-circle.svg │ │ ├── chevron-right.svg │ │ ├── close-circle.svg │ │ ├── close.svg │ │ ├── flag.svg │ │ ├── index.js │ │ ├── info-circle.svg │ │ ├── toast-icons.js │ │ └── warn.svg │ └── stories │ ├── button.stories.js │ ├── native-button.stories.js │ ├── nav.stories.js │ └── toast.stories.js ├── in-repo.yml ├── package.json ├── pull_request_template.md ├── react ├── .eslintrc ├── storybook-v4 │ ├── .dsmrc │ ├── .storybook │ │ ├── addons.js │ │ ├── config.js │ │ └── webpack.config.js │ ├── package.json │ └── src │ │ └── components │ │ ├── Button.jsx │ │ ├── Button.stories.js │ │ ├── Nav.jsx │ │ ├── Nav.stories.js │ │ ├── Toast.jsx │ │ ├── Toast.stories.js │ │ ├── _button.scss │ │ ├── _nav.scss │ │ ├── _toast.scss │ │ ├── _variables.scss │ │ ├── icons │ │ ├── check-circle.svg │ │ ├── chevron-right.svg │ │ ├── close-circle.svg │ │ ├── close.svg │ │ ├── flag.svg │ │ ├── index.js │ │ ├── info-circle.svg │ │ ├── toast-icons.js │ │ └── warn.svg │ │ └── versionFile.json ├── storybook-v5 │ ├── .dsmrc │ ├── .storybook │ │ ├── main.js │ │ ├── manager.js │ │ ├── preview.js │ │ └── webpack.config.js │ ├── package.json │ └── src │ │ └── components │ │ ├── Button.jsx │ │ ├── Button.mdx │ │ ├── Button.stories.js │ │ ├── Nav.jsx │ │ ├── Nav.stories.js │ │ ├── Toast.jsx │ │ ├── Toast.stories.js │ │ ├── _button.scss │ │ ├── _nav.scss │ │ ├── _toast.scss │ │ ├── _variables.scss │ │ ├── icons │ │ ├── check-circle.svg │ │ ├── chevron-right.svg │ │ ├── close-circle.svg │ │ ├── close.svg │ │ ├── flag.svg │ │ ├── index.js │ │ ├── info-circle.svg │ │ ├── toast-icons.js │ │ └── warn.svg │ │ └── versionFile.json └── storybook-v6 │ ├── .dsmrc │ ├── .storybook │ ├── main.js │ ├── manager.js │ └── preview.js │ ├── package.json │ └── src │ └── components │ ├── Button.jsx │ ├── Button.mdx │ ├── Button.stories.js │ ├── Nav.jsx │ ├── Nav.stories.js │ ├── Toast.jsx │ ├── Toast.stories.js │ ├── _button.scss │ ├── _nav.scss │ ├── _toast.scss │ ├── _variables.scss │ ├── icons │ ├── check-circle.svg │ ├── chevron-right.svg │ ├── close-circle.svg │ ├── close.svg │ ├── flag.svg │ ├── index.js │ ├── info-circle.svg │ ├── toast-icons.js │ └── warn.svg │ └── versionFile.json └── vue ├── .eslintrc ├── storybook-v4 ├── .dsmrc ├── .storybook │ ├── addons.js │ ├── config.js │ └── webpack.config.js ├── babel.config.js ├── package.json └── src │ └── components │ ├── MyButton.stories.js │ ├── MyButton.vue │ ├── MyNav.stories.js │ ├── MyNav.vue │ ├── Toast.stories.js │ ├── Toast.vue │ ├── _button.scss │ ├── _nav.scss │ ├── _toast.scss │ ├── _variables.scss │ ├── icons │ ├── check-circle.svg │ ├── chevron-right.svg │ ├── close-circle.svg │ ├── close.svg │ ├── flag.svg │ ├── index.js │ ├── info-circle.svg │ ├── toast-icons.js │ └── warn.svg │ └── versionFile.json ├── storybook-v5 ├── .dsmrc ├── .storybook │ ├── addons.js │ ├── config.js │ └── webpack.config.js ├── babel.config.js ├── package.json └── src │ └── components │ ├── MyButton.stories.js │ ├── MyButton.vue │ ├── MyNav.stories.js │ ├── MyNav.vue │ ├── Toast.stories.js │ ├── Toast.vue │ ├── _button.scss │ ├── _nav.scss │ ├── _toast.scss │ ├── _variables.scss │ ├── icons │ ├── check-circle.svg │ ├── chevron-right.svg │ ├── close-circle.svg │ ├── close.svg │ ├── flag.svg │ ├── index.js │ ├── info-circle.svg │ ├── toast-icons.js │ └── warn.svg │ └── versionFile.json └── storybook-v6 ├── .dsmrc ├── .storybook ├── main.js ├── manager.js └── preview.js ├── package.json └── src └── components ├── MyButton.stories.js ├── MyButton.vue ├── MyNav.stories.js ├── MyNav.vue ├── Toast.stories.js ├── Toast.vue ├── _button.scss ├── _nav.scss ├── _toast.scss ├── _variables.scss ├── icons ├── check-circle.svg ├── chevron-right.svg ├── close-circle.svg ├── close.svg ├── flag.svg ├── index.js ├── info-circle.svg ├── toast-icons.js └── warn.svg └── versionFile.json /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 130, 3 | "bracketSpacing": true, 4 | "tabWidth": 2, 5 | "useTabs": false, 6 | "semi": true, 7 | "singleQuote": true, 8 | "arrowParens": "always", 9 | "jsxBracketSameLine": false, 10 | "trailingComma": "none" 11 | } 12 | -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @InVisionApp/prototypes -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright 2019 InVisionApp, Inc. 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. -------------------------------------------------------------------------------- /angular/storybook-v4/.dsmrc: -------------------------------------------------------------------------------- 1 | { 2 | "authToken": "", 3 | "dsmHost": "projects.invisionapp.com", 4 | "organization": "", 5 | "outputDir": ".dsm", 6 | "storyPath": "src/stories/**/*.stories.ts" 7 | } 8 | -------------------------------------------------------------------------------- /angular/storybook-v4/.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 | -------------------------------------------------------------------------------- /angular/storybook-v4/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-knobs/register'; 2 | import '@storybook/addon-actions/register'; 3 | import '@storybook/addon-a11y/register'; 4 | import '@storybook/addon-backgrounds/register'; 5 | import { registerDsm } from '@invisionapp/dsm-storybook/register'; 6 | 7 | registerDsm(process.env.STORYBOOK_DSM); 8 | -------------------------------------------------------------------------------- /angular/storybook-v4/.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure, addDecorator } from '@storybook/angular'; 2 | import { checkA11y } from '@storybook/addon-a11y'; 3 | import { centered } from '@storybook/addon-centered/angular'; 4 | import { withBackgrounds } from '@storybook/addon-backgrounds'; 5 | import { initDsm } from '@invisionapp/dsm-storybook'; 6 | 7 | // automatically import all files ending in *.stories.ts 8 | const req = require.context('../src/stories', true, /\.stories\.ts$/); 9 | function loadStories() { 10 | req.keys().forEach((filename) => req(filename)); 11 | } 12 | 13 | /** 14 | * To override @invisionapp/dsm-storybook custom options\theme you can use Storybook options addon 15 | * -- this will override all of @invisionapp/dsm-storybook options\themes -- 16 | * link: https://github.com/storybooks/storybook/tree/release/4.x/addons/options 17 | * Example code below 18 | **/ 19 | // import { withOptions } from '@storybook/addon-options'; 20 | // import { themes } from '@storybook/components'; 21 | // 22 | // addDecorator(withOptions({ name: 'Custom Title!', theme: themes.dark })); 23 | 24 | addDecorator(withBackgrounds([{ name: 'DSM background', value: '#f8f8fa', default: true }, { name: 'dark', value: '#333' }])); 25 | addDecorator(checkA11y); 26 | addDecorator(centered); 27 | 28 | //Init Dsm 29 | initDsm({ 30 | addDecorator, 31 | callback: () => { 32 | configure(loadStories, module); 33 | } 34 | }); 35 | -------------------------------------------------------------------------------- /angular/storybook-v4/.storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.app.json", 3 | "compilerOptions": { 4 | "types": [ 5 | "node" 6 | ] 7 | }, 8 | "exclude": [ 9 | "../src/test.ts", 10 | "../src/**/*.spec.ts", 11 | "../projects/**/*.spec.ts" 12 | ], 13 | "include": [ 14 | "../src/**/*", 15 | "../projects/**/*" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /angular/storybook-v4/.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | module: { 3 | rules: [ 4 | { 5 | test: /\.svg$/, 6 | loader: 'svg-inline-loader', 7 | options: { 8 | removeTags: true, 9 | removingTags: ['title', 'desc'], 10 | removeSVGTagAttrs: false, 11 | removingTagAttrs: ['fill'] 12 | } 13 | } 14 | ] 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /angular/storybook-v4/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'. -------------------------------------------------------------------------------- /angular/storybook-v4/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | 'browserName': 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /angular/storybook-v4/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('Welcome to angular-sample-v4!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /angular/storybook-v4/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /angular/storybook-v4/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /angular/storybook-v4/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/angular-sample-v4'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

4 | Welcome to {{ title }}! 5 |

6 | Angular Logo 7 |
8 |

Here are some links to help you start:

9 | 20 | 21 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/InVisionApp/dsm-storybook-example-library/60d98f275f180d302a5af0ef2f4362da420c36b9/angular/storybook-v4/src/app/app.component.scss -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async(() => { 6 | TestBed.configureTestingModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | }).compileComponents(); 11 | })); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.debugElement.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'storybook-v5'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.debugElement.componentInstance; 22 | expect(app.title).toEqual('angular-sample-v4'); 23 | }); 24 | 25 | it('should render title in a h1 tag', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.debugElement.nativeElement; 29 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular-sample-v4!'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | title = 'angular-sample-v4'; 10 | } 11 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { HttpClientModule } from '@angular/common/http'; 4 | import { AngularSvgIconModule } from 'angular-svg-icon'; 5 | 6 | import { AppComponent } from './app.component'; 7 | import { NavComponent } from './components/nav/nav.component'; 8 | import { ToastComponent } from './components/toast/toast.component'; 9 | import { ButtonComponent } from './components/button/button.component'; 10 | import { AppIconComponent } from './components/icons/app-icon.component'; 11 | 12 | @NgModule({ 13 | declarations: [AppComponent, NavComponent, ToastComponent, ButtonComponent, AppIconComponent], 14 | imports: [BrowserModule, HttpClientModule, AngularSvgIconModule], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule {} 19 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/components/_variables.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto'); 2 | 3 | $font-family: 'Roboto', -apple-system, sans-serif; 4 | 5 | $color-primary: #5377a1; 6 | $color-primary-darker: #3d5878; 7 | $color-white: #ffffff; 8 | $color-disabled: rgba(128, 128, 128, 0.05); 9 | $color-gray: #9e9e9e; 10 | $color-gray-light: rgba(238, 238, 238, 0.9); 11 | $border-radius: 3px; 12 | 13 | $color-warning: #ffa561; 14 | $color-success: #48a651; 15 | $color-error: #f24f63; 16 | $color-info: #a2ceff; 17 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/components/button/button.component.html: -------------------------------------------------------------------------------- 1 |
2 | {{ text }} 3 |
4 |
5 | 6 |
7 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/components/button/versionFile.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.0" 3 | } 4 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/components/icons/app-icon.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | import { SvgIconRegistryService } from 'angular-svg-icon'; 3 | 4 | import icons from './index.js'; 5 | 6 | @Component({ 7 | selector: 'app-icons', 8 | template: '' 9 | }) 10 | export class AppIconComponent { 11 | constructor(private iconReg: SvgIconRegistryService) { 12 | Object.keys(icons).forEach((key) => this.iconReg.addSvg(key, icons[key])); 13 | } 14 | 15 | @Input() 16 | icon: string; 17 | } 18 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/components/icons/assets/chevron-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Chevron Right 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/components/icons/assets/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Close 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/components/icons/assets/flag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Flag 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/components/icons/index.js: -------------------------------------------------------------------------------- 1 | import flagIcon from './assets/flag.svg'; 2 | import warnIcon from './assets/warn.svg'; 3 | import checkmarkIcon from './assets/check-circle.svg'; 4 | import errorIcon from './assets/close-circle.svg'; 5 | import infoIcon from './assets/info-circle.svg'; 6 | import closeIcon from './assets/close.svg'; 7 | import chevronRightIcon from './assets/chevron-right.svg'; 8 | 9 | export default { flagIcon, warnIcon, checkmarkIcon, errorIcon, infoIcon, closeIcon, chevronRightIcon }; 10 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/components/nav/nav.component.html: -------------------------------------------------------------------------------- 1 |
    2 |
  • 3 |
    4 | {{tab.title}} 5 |
    6 |
    • 7 |
8 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/components/nav/nav.component.scss: -------------------------------------------------------------------------------- 1 | @import '../variables'; 2 | 3 | .c-nav { 4 | display: inline-flex; 5 | font-family: $font-family; 6 | font-size: 16px; 7 | font-weight: 100; 8 | padding: 0; 9 | margin: 0; 10 | } 11 | 12 | .tab { 13 | list-style-type: none; 14 | cursor: pointer; 15 | 16 | &:hover { 17 | font-weight: bold; 18 | } 19 | &:active { 20 | font-weight: bold; 21 | } 22 | } 23 | 24 | .tab:not(:last-child) { 25 | margin-right: 32px; 26 | } 27 | 28 | .tab-content { 29 | padding: 0 8px 12px; 30 | transition: all 0.2s cubic-bezier(0.2, 0.91, 0.85, 0.96); 31 | } 32 | 33 | .active { 34 | font-weight: bold; 35 | box-shadow: inset 0 -4px $color-primary; 36 | } 37 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/components/nav/nav.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * The Nav is used for site navigation. 5 | */ 6 | @Component({ 7 | selector: 'nav-component', 8 | templateUrl: './nav.component.html', 9 | styleUrls: ['./nav.component.scss'] 10 | }) 11 | export class NavComponent implements OnInit { 12 | activeTab; 13 | 14 | /** 15 | * An array of the items to be displayed in the Nav. 16 | */ 17 | @Input() 18 | tabs: Array; 19 | 20 | /** 21 | * The active tab Id to initialize the Nav component 22 | */ 23 | @Input() 24 | initialActiveTab: string; 25 | 26 | ngOnInit() { 27 | this.activeTab = this.initialActiveTab; 28 | } 29 | 30 | setActiveTab(tab) { 31 | this.activeTab = tab.id; 32 | } 33 | 34 | trackById(index, tab) { 35 | return tab.id; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/components/toast/toast.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | {{text}} 5 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/app/components/toast/toast.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | /** 4 | * Toasts provide dismissable feedback\information for the user. 5 | * */ 6 | @Component({ 7 | selector: 'toast-component', 8 | templateUrl: './toast.component.html', 9 | styleUrls: ['./toast.component.scss'] 10 | }) 11 | export class ToastComponent { 12 | icons = { 13 | default: 'flagIcon', 14 | warning: 'warnIcon', 15 | success: 'checkmarkIcon', 16 | error: 'errorIcon', 17 | info: 'infoIcon' 18 | }; 19 | 20 | /** 21 | * The content of the toast 22 | * */ 23 | @Input() 24 | text: string; 25 | 26 | /** 27 | * Changes the visual display of the toast 28 | * */ 29 | @Input() 30 | status: 'default' | 'warning' | 'error' | 'info' | 'success' = 'default'; 31 | } 32 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/InVisionApp/dsm-storybook-example-library/60d98f275f180d302a5af0ef2f4362da420c36b9/angular/storybook-v4/src/assets/.gitkeep -------------------------------------------------------------------------------- /angular/storybook-v4/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/InVisionApp/dsm-storybook-example-library/60d98f275f180d302a5af0ef2f4362da420c36b9/angular/storybook-v4/src/favicon.ico -------------------------------------------------------------------------------- /angular/storybook-v4/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TestV5 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/stories/nav.stories.ts: -------------------------------------------------------------------------------- 1 | import { storiesOf, moduleMetadata } from '@storybook/angular'; 2 | import { withKnobs, object } from '@storybook/addon-knobs'; 3 | import { NavComponent } from '../app/components/nav/nav.component'; 4 | 5 | const navWrapper = (templateFn) => (storyFn) => { 6 | const story = storyFn(); 7 | return { 8 | ...story, 9 | template: templateFn(story.template) 10 | }; 11 | }; 12 | 13 | storiesOf('Nav', module) 14 | .addDecorator(withKnobs) 15 | .addDecorator( 16 | moduleMetadata({ 17 | declarations: [NavComponent] 18 | }) 19 | ) 20 | .addDecorator( 21 | navWrapper((content) => `
${content}
`) 22 | ) 23 | .add( 24 | 'Nav Component', 25 | () => { 26 | const tabs = [{ id: '1', title: 'one' }, { id: '2', title: 'two' }, { id: '3', title: 'three' }]; 27 | 28 | return { 29 | template: '', 30 | props: { 31 | tabsKnob: object('tabs', tabs) 32 | } 33 | }; 34 | }, 35 | { 'in-dsm': { id: '5c862a4b73b2a500b5c66f9b', version: '1.0.0', componentPath: '../app/components/nav/nav.component' } } 36 | ); 37 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /angular/storybook-v4/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /angular/storybook-v4/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "include": [ 8 | "src/**/*.ts" 9 | ], 10 | "exclude": [ 11 | "src/test.ts", 12 | "src/**/*.spec.ts", 13 | "**/*.stories.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /angular/storybook-v4/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "esnext", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "typeRoots": ["node_modules/@types"], 15 | "lib": ["es2018", "dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /angular/storybook-v4/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /angular/storybook-v5/.dsmrc: -------------------------------------------------------------------------------- 1 | { 2 | "authToken": "", 3 | "dsmHost": "projects.invisionapp.com", 4 | "organization": "", 5 | "outputDir": ".dsm", 6 | "storyPath": "src/stories/**/*.stories.ts" 7 | } 8 | -------------------------------------------------------------------------------- /angular/storybook-v5/.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 | -------------------------------------------------------------------------------- /angular/storybook-v5/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-knobs/register'; 2 | import '@storybook/addon-actions/register'; 3 | import '@storybook/addon-a11y/register'; 4 | import '@storybook/addon-backgrounds/register'; 5 | import { registerDsm } from '@invisionapp/dsm-storybook/register'; 6 | 7 | registerDsm(process.env.STORYBOOK_DSM); 8 | -------------------------------------------------------------------------------- /angular/storybook-v5/.storybook/presets.js: -------------------------------------------------------------------------------- 1 | module.exports = ['@storybook/addon-docs/angular/preset']; 2 | -------------------------------------------------------------------------------- /angular/storybook-v5/.storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.app.json", 3 | "compilerOptions": { 4 | "types": [ 5 | "node" 6 | ] 7 | }, 8 | "exclude": [ 9 | "../src/test.ts", 10 | "../src/**/*.spec.ts", 11 | "../projects/**/*.spec.ts" 12 | ], 13 | "include": [ 14 | "../src/**/*", 15 | "../projects/**/*" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /angular/storybook-v5/.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | module: { 3 | rules: [ 4 | { 5 | test: /\.svg$/, 6 | loader: 'svg-inline-loader', 7 | options: { 8 | removeTags: true, 9 | removingTags: ['title', 'desc'], 10 | removeSVGTagAttrs: false, 11 | removingTagAttrs: ['fill'] 12 | } 13 | } 14 | ] 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /angular/storybook-v5/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'. -------------------------------------------------------------------------------- /angular/storybook-v5/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | 'browserName': 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /angular/storybook-v5/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('Welcome to angular-sample-v5!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /angular/storybook-v5/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /angular/storybook-v5/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /angular/storybook-v5/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/angular-sample-v5'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

4 | Welcome to {{ title }}! 5 |

6 | Angular Logo 7 |
8 |

Here are some links to help you start:

9 | 20 | 21 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/InVisionApp/dsm-storybook-example-library/60d98f275f180d302a5af0ef2f4362da420c36b9/angular/storybook-v5/src/app/app.component.scss -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async(() => { 6 | TestBed.configureTestingModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | }).compileComponents(); 11 | })); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.debugElement.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'storybook-v5'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.debugElement.componentInstance; 22 | expect(app.title).toEqual('angular-sample-v5'); 23 | }); 24 | 25 | it('should render title in a h1 tag', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.debugElement.nativeElement; 29 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular-sample-v5!'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | title = 'angular-sample-v5'; 10 | } 11 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { HttpClientModule } from '@angular/common/http'; 4 | import { AngularSvgIconModule } from 'angular-svg-icon'; 5 | 6 | import { AppComponent } from './app.component'; 7 | import { NavComponent } from './components/nav/nav.component'; 8 | import { ToastComponent } from './components/toast/toast.component'; 9 | import { ButtonComponent } from './components/button/button.component'; 10 | import { AppIconComponent } from './components/icons/app-icon.component'; 11 | 12 | @NgModule({ 13 | declarations: [AppComponent, NavComponent, ToastComponent, ButtonComponent, AppIconComponent], 14 | imports: [BrowserModule, HttpClientModule, AngularSvgIconModule], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule {} 19 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/components/_variables.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto'); 2 | 3 | $font-family: 'Roboto', -apple-system, sans-serif; 4 | 5 | $color-primary: #5377a1; 6 | $color-primary-darker: #3d5878; 7 | $color-white: #ffffff; 8 | $color-disabled: rgba(128, 128, 128, 0.05); 9 | $color-gray: #9e9e9e; 10 | $color-gray-light: rgba(238, 238, 238, 0.9); 11 | $border-radius: 3px; 12 | 13 | $color-warning: #ffa561; 14 | $color-success: #48a651; 15 | $color-error: #f24f63; 16 | $color-info: #a2ceff; 17 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/components/button/button.component.html: -------------------------------------------------------------------------------- 1 |
2 | {{ text }} 3 |
4 |
5 | 6 |
7 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/components/button/versionFile.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.0" 3 | } 4 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/components/icons/app-icon.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | import { SvgIconRegistryService } from 'angular-svg-icon'; 3 | 4 | import icons from './index.js'; 5 | 6 | @Component({ 7 | selector: 'app-icons', 8 | template: '' 9 | }) 10 | export class AppIconComponent { 11 | constructor(private iconReg: SvgIconRegistryService) { 12 | Object.keys(icons).forEach((key) => this.iconReg.addSvg(key, icons[key])); 13 | } 14 | 15 | @Input() 16 | icon: string; 17 | } 18 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/components/icons/assets/chevron-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Chevron Right 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/components/icons/assets/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Close 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/components/icons/assets/flag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Flag 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/components/icons/index.js: -------------------------------------------------------------------------------- 1 | import flagIcon from './assets/flag.svg'; 2 | import warnIcon from './assets/warn.svg'; 3 | import checkmarkIcon from './assets/check-circle.svg'; 4 | import errorIcon from './assets/close-circle.svg'; 5 | import infoIcon from './assets/info-circle.svg'; 6 | import closeIcon from './assets/close.svg'; 7 | import chevronRightIcon from './assets/chevron-right.svg'; 8 | 9 | export default { flagIcon, warnIcon, checkmarkIcon, errorIcon, infoIcon, closeIcon, chevronRightIcon }; 10 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/components/nav/nav.component.html: -------------------------------------------------------------------------------- 1 |
    2 |
  • 3 |
    4 | {{tab.title}} 5 |
    6 |
    • 7 |
8 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/components/nav/nav.component.scss: -------------------------------------------------------------------------------- 1 | @import '../variables'; 2 | 3 | .c-nav { 4 | display: inline-flex; 5 | font-family: $font-family; 6 | font-size: 16px; 7 | font-weight: 100; 8 | padding: 0; 9 | margin: 0; 10 | } 11 | 12 | .tab { 13 | list-style-type: none; 14 | cursor: pointer; 15 | 16 | &:hover { 17 | font-weight: bold; 18 | } 19 | &:active { 20 | font-weight: bold; 21 | } 22 | } 23 | 24 | .tab:not(:last-child) { 25 | margin-right: 32px; 26 | } 27 | 28 | .tab-content { 29 | padding: 0 8px 12px; 30 | transition: all 0.2s cubic-bezier(0.2, 0.91, 0.85, 0.96); 31 | } 32 | 33 | .active { 34 | font-weight: bold; 35 | box-shadow: inset 0 -4px $color-primary; 36 | } 37 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/components/nav/nav.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * The Nav is used for site navigation. 5 | */ 6 | @Component({ 7 | selector: 'nav-component', 8 | templateUrl: './nav.component.html', 9 | styleUrls: ['./nav.component.scss'] 10 | }) 11 | export class NavComponent implements OnInit { 12 | activeTab; 13 | 14 | /** 15 | * An array of the items to be displayed in the Nav. 16 | */ 17 | @Input() 18 | tabs: Array; 19 | 20 | /** 21 | * The active tab Id to initialize the Nav component 22 | */ 23 | @Input() 24 | initialActiveTab: string; 25 | 26 | ngOnInit() { 27 | this.activeTab = this.initialActiveTab; 28 | } 29 | 30 | setActiveTab(tab) { 31 | this.activeTab = tab.id; 32 | } 33 | 34 | trackById(index, tab) { 35 | return tab.id; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/components/toast/toast.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | {{text}} 5 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/app/components/toast/toast.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | /** 4 | * Toasts provide dismissable feedback\information for the user. 5 | * */ 6 | @Component({ 7 | selector: 'toast-component', 8 | templateUrl: './toast.component.html', 9 | styleUrls: ['./toast.component.scss'] 10 | }) 11 | export class ToastComponent { 12 | icons = { 13 | default: 'flagIcon', 14 | warning: 'warnIcon', 15 | success: 'checkmarkIcon', 16 | error: 'errorIcon', 17 | info: 'infoIcon' 18 | }; 19 | 20 | /** 21 | * The content of the toast 22 | * */ 23 | @Input() 24 | text: string; 25 | 26 | /** 27 | * Changes the visual display of the toast 28 | * */ 29 | @Input() 30 | status: 'default' | 'warning' | 'error' | 'info' | 'success' = 'default'; 31 | } 32 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/InVisionApp/dsm-storybook-example-library/60d98f275f180d302a5af0ef2f4362da420c36b9/angular/storybook-v5/src/assets/.gitkeep -------------------------------------------------------------------------------- /angular/storybook-v5/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/InVisionApp/dsm-storybook-example-library/60d98f275f180d302a5af0ef2f4362da420c36b9/angular/storybook-v5/src/favicon.ico -------------------------------------------------------------------------------- /angular/storybook-v5/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TestV5 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/stories/button.mdx: -------------------------------------------------------------------------------- 1 | # Example usage of addon-docs 2 | 3 | Using `addon-docs` you can write anything you want with `markdown` support. 4 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/stories/nav.stories.ts: -------------------------------------------------------------------------------- 1 | import { storiesOf, moduleMetadata } from '@storybook/angular'; 2 | import { withKnobs, object } from '@storybook/addon-knobs'; 3 | import { NavComponent } from '../app/components/nav/nav.component'; 4 | 5 | const navWrapper = (templateFn) => (storyFn) => { 6 | const story = storyFn(); 7 | return { 8 | ...story, 9 | template: templateFn(story.template) 10 | }; 11 | }; 12 | 13 | storiesOf('Nav', module) 14 | .addDecorator(withKnobs) 15 | .addDecorator( 16 | moduleMetadata({ 17 | declarations: [NavComponent] 18 | }) 19 | ) 20 | .addDecorator( 21 | navWrapper((content) => `
${content}
`) 22 | ) 23 | .add( 24 | 'Nav Component', 25 | () => { 26 | const tabs = [{ id: '1', title: 'one' }, { id: '2', title: 'two' }, { id: '3', title: 'three' }]; 27 | 28 | return { 29 | template: '', 30 | props: { 31 | tabsKnob: object('tabs', tabs) 32 | } 33 | }; 34 | }, 35 | { 'in-dsm': { id: '5c862a4b73b2a500b5c66f9b', version: '1.0.0', componentPath: '../app/components/nav/nav.component' } } 36 | ); 37 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /angular/storybook-v5/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /angular/storybook-v5/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "include": [ 8 | "src/**/*.ts" 9 | ], 10 | "exclude": [ 11 | "src/test.ts", 12 | "src/**/*.spec.ts", 13 | "**/*.stories.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /angular/storybook-v5/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "esnext", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "typeRoots": ["node_modules/@types"], 15 | "lib": ["es2018", "dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /angular/storybook-v5/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /angular/storybook-v6/.dsmrc: -------------------------------------------------------------------------------- 1 | { 2 | "authToken": "", 3 | "dsmHost": "projects.invisionapp.com", 4 | "organization": "", 5 | "outputDir": ".dsm", 6 | "storyPath": "src/stories/**/*.stories.ts" 7 | } 8 | -------------------------------------------------------------------------------- /angular/storybook-v6/.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 | -------------------------------------------------------------------------------- /angular/storybook-v6/.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], 3 | addons: [ 4 | '@storybook/addon-knobs', 5 | '@storybook/addon-actions', 6 | '@storybook/addon-a11y', 7 | '@storybook/addon-essentials', 8 | '@invisionapp/dsm-storybook' 9 | ], 10 | webpackFinal: async (config, { configType }) => { 11 | config.module.rules.push({ 12 | test: /\.svg$/, 13 | loader: 'svg-inline-loader', 14 | options: { 15 | removeTags: true, 16 | removingTags: ['title', 'desc'], 17 | removeSVGTagAttrs: false, 18 | removingTagAttrs: ['fill'] 19 | } 20 | }); 21 | 22 | // Return the altered config 23 | return config; 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /angular/storybook-v6/.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from '@storybook/addons'; 2 | import { getDsmOptions, getDsmTheme } from '@invisionapp/dsm-storybook'; 3 | 4 | /** 5 | * To override @invisionapp/dsm-storybook custom options/theme you can use Storybook options parameter and theming 6 | * -- this will only override the specific parameters you change -- 7 | * options: https://storybook.js.org/docs/react/configure/features-and-behavior 8 | * theming: https://storybook.js.org/docs/react/configure/theming 9 | * Example code below 10 | **/ 11 | // addons.setConfig({ 12 | // ...getDsmOptions(process.env.STORYBOOK_DSM), 13 | // showNav: true, 14 | // theme: { 15 | // ...getDsmTheme(process.env.STORYBOOK_DSM), 16 | // colorPrimary: '#123456' 17 | // } 18 | // }); 19 | 20 | addons.setConfig({ 21 | ...getDsmOptions(process.env.STORYBOOK_DSM) 22 | // Using the DSM theme is optional 23 | // theme: { 24 | // ...getDsmTheme(process.env.STORYBOOK_DSM) 25 | // } 26 | }); 27 | -------------------------------------------------------------------------------- /angular/storybook-v6/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import { withDsm } from '@invisionapp/dsm-storybook'; 2 | 3 | export const parameters = { 4 | actions: { argTypesRegex: '^on[A-Z].*' } 5 | }; 6 | 7 | export const decorators = [withDsm]; 8 | -------------------------------------------------------------------------------- /angular/storybook-v6/.storybook/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.app.json", 3 | "compilerOptions": { 4 | "types": ["node"] 5 | }, 6 | "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../projects/**/*.spec.ts"], 7 | "include": ["../src/**/*", "../projects/**/*"] 8 | } 9 | -------------------------------------------------------------------------------- /angular/storybook-v6/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'. -------------------------------------------------------------------------------- /angular/storybook-v6/e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | 'browserName': 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /angular/storybook-v6/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('Welcome to angular-sample-v5!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /angular/storybook-v6/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /angular/storybook-v6/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /angular/storybook-v6/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/angular-sample-v5'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

4 | Welcome to {{ title }}! 5 |

6 | Angular Logo 7 |
8 |

Here are some links to help you start:

9 | 20 | 21 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/InVisionApp/dsm-storybook-example-library/60d98f275f180d302a5af0ef2f4362da420c36b9/angular/storybook-v6/src/app/app.component.scss -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | 4 | describe('AppComponent', () => { 5 | beforeEach(async(() => { 6 | TestBed.configureTestingModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | }).compileComponents(); 11 | })); 12 | 13 | it('should create the app', () => { 14 | const fixture = TestBed.createComponent(AppComponent); 15 | const app = fixture.debugElement.componentInstance; 16 | expect(app).toBeTruthy(); 17 | }); 18 | 19 | it(`should have as title 'storybook-v5'`, () => { 20 | const fixture = TestBed.createComponent(AppComponent); 21 | const app = fixture.debugElement.componentInstance; 22 | expect(app.title).toEqual('angular-sample-v5'); 23 | }); 24 | 25 | it('should render title in a h1 tag', () => { 26 | const fixture = TestBed.createComponent(AppComponent); 27 | fixture.detectChanges(); 28 | const compiled = fixture.debugElement.nativeElement; 29 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular-sample-v5!'); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | title = 'angular-sample-v5'; 10 | } 11 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { HttpClientModule } from '@angular/common/http'; 4 | import { AngularSvgIconModule } from 'angular-svg-icon'; 5 | 6 | import { AppComponent } from './app.component'; 7 | import { NavComponent } from './components/nav/nav.component'; 8 | import { ToastComponent } from './components/toast/toast.component'; 9 | import { ButtonComponent } from './components/button/button.component'; 10 | import { AppIconComponent } from './components/icons/app-icon.component'; 11 | 12 | @NgModule({ 13 | declarations: [AppComponent, NavComponent, ToastComponent, ButtonComponent, AppIconComponent], 14 | imports: [BrowserModule, HttpClientModule, AngularSvgIconModule], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule {} 19 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/components/_variables.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto'); 2 | 3 | $font-family: 'Roboto', -apple-system, sans-serif; 4 | 5 | $color-primary: #5377a1; 6 | $color-primary-darker: #3d5878; 7 | $color-white: #ffffff; 8 | $color-disabled: rgba(128, 128, 128, 0.05); 9 | $color-gray: #9e9e9e; 10 | $color-gray-light: rgba(238, 238, 238, 0.9); 11 | $border-radius: 3px; 12 | 13 | $color-warning: #ffa561; 14 | $color-success: #48a651; 15 | $color-error: #f24f63; 16 | $color-info: #a2ceff; 17 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/components/button/button.component.html: -------------------------------------------------------------------------------- 1 |
2 | {{ text }} 3 |
4 |
5 | 6 |
7 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/components/button/versionFile.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.0" 3 | } 4 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/components/icons/app-icon.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | import { SvgIconRegistryService } from 'angular-svg-icon'; 3 | 4 | import icons from './index.js'; 5 | 6 | @Component({ 7 | selector: 'app-icons', 8 | template: '' 9 | }) 10 | export class AppIconComponent { 11 | constructor(private iconReg: SvgIconRegistryService) { 12 | Object.keys(icons).forEach((key) => this.iconReg.addSvg(key, icons[key])); 13 | } 14 | 15 | @Input() 16 | icon: string; 17 | } 18 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/components/icons/assets/chevron-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Chevron Right 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/components/icons/assets/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Close 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/components/icons/assets/flag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Flag 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/components/icons/index.js: -------------------------------------------------------------------------------- 1 | import flagIcon from './assets/flag.svg'; 2 | import warnIcon from './assets/warn.svg'; 3 | import checkmarkIcon from './assets/check-circle.svg'; 4 | import errorIcon from './assets/close-circle.svg'; 5 | import infoIcon from './assets/info-circle.svg'; 6 | import closeIcon from './assets/close.svg'; 7 | import chevronRightIcon from './assets/chevron-right.svg'; 8 | 9 | export default { flagIcon, warnIcon, checkmarkIcon, errorIcon, infoIcon, closeIcon, chevronRightIcon }; 10 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/components/nav/nav.component.html: -------------------------------------------------------------------------------- 1 |
    2 |
  • 3 |
    4 | {{tab.title}} 5 |
    6 |
    • 7 |
8 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/components/nav/nav.component.scss: -------------------------------------------------------------------------------- 1 | @import '../variables'; 2 | 3 | .c-nav { 4 | display: inline-flex; 5 | font-family: $font-family; 6 | font-size: 16px; 7 | font-weight: 100; 8 | padding: 0; 9 | margin: 0; 10 | } 11 | 12 | .tab { 13 | list-style-type: none; 14 | cursor: pointer; 15 | 16 | &:hover { 17 | font-weight: bold; 18 | } 19 | &:active { 20 | font-weight: bold; 21 | } 22 | } 23 | 24 | .tab:not(:last-child) { 25 | margin-right: 32px; 26 | } 27 | 28 | .tab-content { 29 | padding: 0 8px 12px; 30 | transition: all 0.2s cubic-bezier(0.2, 0.91, 0.85, 0.96); 31 | } 32 | 33 | .active { 34 | font-weight: bold; 35 | box-shadow: inset 0 -4px $color-primary; 36 | } 37 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/components/nav/nav.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | 3 | /** 4 | * The Nav is used for site navigation. 5 | */ 6 | @Component({ 7 | selector: 'nav-component', 8 | templateUrl: './nav.component.html', 9 | styleUrls: ['./nav.component.scss'] 10 | }) 11 | export class NavComponent implements OnInit { 12 | activeTab; 13 | 14 | /** 15 | * An array of the items to be displayed in the Nav. 16 | */ 17 | @Input() 18 | tabs: Array; 19 | 20 | /** 21 | * The active tab Id to initialize the Nav component 22 | */ 23 | @Input() 24 | initialActiveTab: string; 25 | 26 | ngOnInit() { 27 | this.activeTab = this.initialActiveTab; 28 | } 29 | 30 | setActiveTab(tab) { 31 | this.activeTab = tab.id; 32 | } 33 | 34 | trackById(index, tab) { 35 | return tab.id; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/components/toast/toast.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | {{text}} 5 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/app/components/toast/toast.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | /** 4 | * Toasts provide dismissable feedback\information for the user. 5 | * */ 6 | @Component({ 7 | selector: 'toast-component', 8 | templateUrl: './toast.component.html', 9 | styleUrls: ['./toast.component.scss'] 10 | }) 11 | export class ToastComponent { 12 | icons = { 13 | default: 'flagIcon', 14 | warning: 'warnIcon', 15 | success: 'checkmarkIcon', 16 | error: 'errorIcon', 17 | info: 'infoIcon' 18 | }; 19 | 20 | /** 21 | * The content of the toast 22 | * */ 23 | @Input() 24 | text: string; 25 | 26 | /** 27 | * Changes the visual display of the toast 28 | * */ 29 | @Input() 30 | status: 'default' | 'warning' | 'error' | 'info' | 'success' = 'default'; 31 | } 32 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/InVisionApp/dsm-storybook-example-library/60d98f275f180d302a5af0ef2f4362da420c36b9/angular/storybook-v6/src/assets/.gitkeep -------------------------------------------------------------------------------- /angular/storybook-v6/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/InVisionApp/dsm-storybook-example-library/60d98f275f180d302a5af0ef2f4362da420c36b9/angular/storybook-v6/src/favicon.ico -------------------------------------------------------------------------------- /angular/storybook-v6/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TestV5 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/stories/button.mdx: -------------------------------------------------------------------------------- 1 | # Example usage of addon-docs 2 | 3 | Using `addon-docs` you can write anything you want with `markdown` support. 4 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/stories/nav.stories.ts: -------------------------------------------------------------------------------- 1 | import { storiesOf, moduleMetadata } from '@storybook/angular'; 2 | import { withKnobs, object } from '@storybook/addon-knobs'; 3 | import { NavComponent } from '../app/components/nav/nav.component'; 4 | 5 | const navWrapper = (templateFn) => (storyFn) => { 6 | const story = storyFn(); 7 | return { 8 | ...story, 9 | template: templateFn(story.template) 10 | }; 11 | }; 12 | 13 | storiesOf('Nav', module) 14 | .addDecorator(withKnobs) 15 | .addDecorator( 16 | moduleMetadata({ 17 | declarations: [NavComponent] 18 | }) 19 | ) 20 | .addDecorator( 21 | navWrapper((content) => `
${content}
`) 22 | ) 23 | .add( 24 | 'Nav Component', 25 | () => { 26 | const tabs = [{ id: '1', title: 'one' }, { id: '2', title: 'two' }, { id: '3', title: 'three' }]; 27 | 28 | return { 29 | template: '', 30 | props: { 31 | tabsKnob: object('tabs', tabs) 32 | } 33 | }; 34 | }, 35 | { 'in-dsm': { id: '5c862a4b73b2a500b5c66f9b', version: '1.0.0', componentPath: '../app/components/nav/nav.component' } } 36 | ); 37 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /angular/storybook-v6/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /angular/storybook-v6/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "include": [ 8 | "src/**/*.ts" 9 | ], 10 | "exclude": [ 11 | "src/test.ts", 12 | "src/**/*.spec.ts", 13 | "**/*.stories.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /angular/storybook-v6/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "esnext", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "typeRoots": ["node_modules/@types"], 15 | "lib": ["es2018", "dom"] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /angular/storybook-v6/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /html/storybook-v4/.dsmrc: -------------------------------------------------------------------------------- 1 | { 2 | "authToken": "", 3 | "dsmHost": "projects.invisionapp.com", 4 | "organization": "", 5 | "outputDir": ".dsm", 6 | "storyPath": "src/stories/**/*.js" 7 | } -------------------------------------------------------------------------------- /html/storybook-v4/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-knobs/register'; 2 | import '@storybook/addon-actions/register'; 3 | import '@storybook/addon-a11y/register'; 4 | import '@storybook/addon-backgrounds/register'; 5 | import { registerDsm } from '@invisionapp/dsm-storybook/register'; 6 | 7 | registerDsm(process.env.STORYBOOK_DSM); 8 | -------------------------------------------------------------------------------- /html/storybook-v4/.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure, addDecorator } from '@storybook/html'; 2 | import { checkA11y } from '@storybook/addon-a11y'; 3 | import centered from '@storybook/addon-centered/html'; 4 | import { withBackgrounds } from '@storybook/addon-backgrounds'; 5 | import { initDsm } from '@invisionapp/dsm-storybook'; 6 | 7 | const req = require.context('../src/stories', true, /\.stories\.js$/); 8 | function loadStories() { 9 | req.keys().forEach((filename) => req(filename)); 10 | } 11 | 12 | /** 13 | * To override @invisionapp/dsm-storybook options\theme you can use Storybook options addon 14 | * -- this will override all of @invisionapp/dsm-storybook options\themes -- 15 | * link: https://github.com/storybooks/storybook/tree/release/4.x/addons/options 16 | * Example code below 17 | **/ 18 | // import { withOptions } from '@storybook/addon-options'; 19 | // import { themes } from '@storybook/components'; 20 | // 21 | // addDecorator(withOptions({ name: 'Custom Title!', theme: themes.dark })); 22 | 23 | addDecorator(withBackgrounds([{ name: 'DSM background', value: '#f8f8fa', default: true }, { name: 'dark', value: '#333' }])); 24 | addDecorator(checkA11y); 25 | addDecorator(centered); 26 | 27 | //Init Dsm 28 | initDsm({ 29 | addDecorator, 30 | callback: () => configure(loadStories, module) 31 | }); 32 | -------------------------------------------------------------------------------- /html/storybook-v4/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /html/storybook-v4/.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | module: { 3 | rules: [ 4 | { 5 | test: /\.svg$/, 6 | loader: 'svg-inline-loader', 7 | options: { 8 | removeTags: true, 9 | removingTags: ['title', 'desc'], 10 | removeSVGTagAttrs: false, 11 | removingTagAttrs: ['fill'] 12 | } 13 | }, 14 | { 15 | test: /\.scss$/, 16 | use: ['style-loader', 'css-loader', 'sass-loader'] 17 | } 18 | ] 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /html/storybook-v4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "storybook-v4", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "storybook": "start-storybook -p 6006", 7 | "build-storybook": "build-storybook", 8 | "dsm-storybook:publish": "dsm-storybook publish", 9 | "dsm-storybook:preview": "dsm-storybook preview" 10 | }, 11 | "dependencies": { 12 | "@invisionapp/dsm-storybook": "latest" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "^7.5.5", 16 | "@storybook/addon-a11y": "4.2.0-alpha.11", 17 | "@storybook/addon-actions": "4.1.18", 18 | "@storybook/addon-backgrounds": "4.1.18", 19 | "@storybook/addon-centered": "4.1.18", 20 | "@storybook/addon-knobs": "4.1.18", 21 | "@storybook/addon-options": "4.1.18", 22 | "@storybook/addons": "4.1.18", 23 | "@storybook/html": "4.1.18", 24 | "babel-loader": "^8.0.6", 25 | "css-loader": "^3.0.0", 26 | "node-sass": "^4.12.0", 27 | "sass-loader": "^7.1.0", 28 | "style-loader": "^0.23.1", 29 | "svg-inline-loader": "^0.8.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /html/storybook-v4/src/components/_variables.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto'); 2 | 3 | $font-family: 'Roboto', -apple-system, sans-serif; 4 | 5 | $color-primary: #5377a1; 6 | $color-primary-darker: #3d5878; 7 | $color-white: #ffffff; 8 | $color-disabled: rgba(128, 128, 128, 0.05); 9 | $color-gray: #9e9e9e; 10 | $color-gray-light: rgba(238, 238, 238, 0.9); 11 | $border-radius: 3px; 12 | -------------------------------------------------------------------------------- /html/storybook-v4/src/components/button/button.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "\nButtons indicate actions on the page that will occur when a user touches them. This button is responsive to screen sizes.\nWe support a very minimal level of variation for the primary button. Custom styling or class names should not be applied to the primary button.\nIt requires text in all cases, but allows for icons as an optional addition.\nThe primary button can also exist as an element within larger molecules and organisms.", 3 | "displayName": "Button", 4 | "props": [ 5 | { 6 | "value": "dsm-btn", 7 | "description": "Base class to define a button", 8 | "required": true 9 | }, 10 | { 11 | "value": "dsm-btn--with-icon", 12 | "description": "Required when the button is with an icon" 13 | }, 14 | { 15 | "value": "dsm-btn__content", 16 | "description": "The content of the button" 17 | }, 18 | { 19 | "value": "disabled", 20 | "description": "Disabled attribute to disable the button", 21 | "required": false 22 | } 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /html/storybook-v4/src/components/native-button/native-button.js: -------------------------------------------------------------------------------- 1 | import { chevronRightIcon } from '../utils/icons'; 2 | import { styles } from './styles'; 3 | 4 | export class NativeButton extends HTMLElement { 5 | constructor() { 6 | super(); 7 | 8 | const buttonIcons = { 9 | 'chevron-right': chevronRightIcon 10 | }; 11 | 12 | const icon = this.getAttribute('icon'); 13 | icon !== '' ? (this.icon = buttonIcons[icon]) : (this.icon = ''); 14 | 15 | this.contents = 16 | styles + 17 | ``; 21 | 22 | this.attachShadow({ mode: 'open' }).innerHTML = this.contents; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /html/storybook-v4/src/components/nav/_nav.scss: -------------------------------------------------------------------------------- 1 | @import '../variables'; 2 | 3 | .dsm-nav { 4 | display: inline-flex; 5 | font-family: $font-family; 6 | font-size: 16px; 7 | font-weight: 100; 8 | padding: 0; 9 | margin: 0; 10 | 11 | .dsm-nav__tab { 12 | list-style-type: none; 13 | cursor: pointer; 14 | 15 | &:hover { 16 | font-weight: bold; 17 | } 18 | &:active { 19 | font-weight: bold; 20 | } 21 | 22 | &:not(:last-child) { 23 | margin-right: 32px; 24 | } 25 | 26 | .dsm-nav__tab-content { 27 | padding: 0 8px 12px; 28 | transition: all 0.2s cubic-bezier(0.2, 0.91, 0.85, 0.96); 29 | } 30 | 31 | .dsm-nav__tab--active { 32 | font-weight: bold; 33 | box-shadow: inset 0 -4px $color-primary; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /html/storybook-v4/src/components/nav/nav.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "The Nav is used for site navigation.", 3 | "displayName": "Nav", 4 | "props": [ 5 | { 6 | "value": "dsm-nav", 7 | "description": "Base class to define a navigation bar", 8 | "required": true 9 | }, 10 | { 11 | "value": "dsm-nav__tab", 12 | "description": "The tab container", 13 | "required": true 14 | }, 15 | { 16 | "value": "dsm-nav__tab-content", 17 | "description": "The tab content container", 18 | "required": true 19 | }, 20 | { 21 | "value": "dsm-nav__tab--active", 22 | "description": "Indicates the current active tab" 23 | } 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /html/storybook-v4/src/components/toast/toast.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Toasts provide dismissable feedback\\information for the user.", 3 | "displayName": "Toast", 4 | "props": [ 5 | { 6 | "value": "dsm-toast", 7 | "description": "Base class to define a toast (default Toast)", 8 | "required": true 9 | }, 10 | { 11 | "value": "dsm-toast--success", 12 | "description": "Changes the visual display of the toast to success" 13 | }, 14 | { 15 | "value": "dsm-toast--warning", 16 | "description": "Changes the visual display of the toast to warning" 17 | }, 18 | { 19 | "value": "dsm-toast--error", 20 | "description": "Changes the visual display of the toast to error" 21 | }, 22 | { 23 | "value": "dsm-toast--info", 24 | "description": "Changes the visual display of the toast to info" 25 | }, 26 | { 27 | "value": "dsm-toast__content", 28 | "description": "The toast content container", 29 | "required": true 30 | }, 31 | { 32 | "value": "dsm-toast__close-icon", 33 | "description": "The toast close icon container", 34 | "required": true 35 | } 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /html/storybook-v4/src/components/utils/icons/check-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Check Circle 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /html/storybook-v4/src/components/utils/icons/chevron-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Chevron Right 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /html/storybook-v4/src/components/utils/icons/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Close 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /html/storybook-v4/src/components/utils/icons/flag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Flag 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /html/storybook-v4/src/components/utils/icons/index.js: -------------------------------------------------------------------------------- 1 | import flagIcon from './flag.svg'; 2 | import warnIcon from './warn.svg'; 3 | import checkmarkIcon from './check-circle.svg'; 4 | import errorIcon from './close-circle.svg'; 5 | import infoIcon from './info-circle.svg'; 6 | import closeIcon from './close.svg'; 7 | import chevronRightIcon from './chevron-right.svg'; 8 | 9 | export { flagIcon, warnIcon, checkmarkIcon, errorIcon, infoIcon, closeIcon, chevronRightIcon }; 10 | -------------------------------------------------------------------------------- /html/storybook-v4/src/components/utils/icons/toast-icons.js: -------------------------------------------------------------------------------- 1 | import { flagIcon, warnIcon, checkmarkIcon, errorIcon, infoIcon } from './index'; 2 | 3 | const toastIcons = { 4 | default: flagIcon, 5 | warning: warnIcon, 6 | success: checkmarkIcon, 7 | error: errorIcon, 8 | info: infoIcon 9 | }; 10 | 11 | export { toastIcons }; 12 | -------------------------------------------------------------------------------- /html/storybook-v4/src/components/utils/icons/warn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Warning 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /html/storybook-v4/src/stories/native-button.stories.js: -------------------------------------------------------------------------------- 1 | import { storiesOf } from '@storybook/html'; 2 | import { decorate } from '@storybook/addon-actions'; 3 | import { withKnobs, select, text, boolean } from '@storybook/addon-knobs'; 4 | import { NativeButton } from '../components/native-button/native-button'; 5 | 6 | customElements.define('dsm-button', NativeButton); 7 | const decoratedAction = decorate([() => ['Click']]); 8 | 9 | storiesOf('Native Component Button', module) 10 | .addDecorator(withKnobs) 11 | .add( 12 | 'Simple Button', 13 | () => { 14 | const availableIcons = { 15 | none: '', 16 | 'chevron-right': 'chevron-right' 17 | }; 18 | 19 | const icon = select('icon', availableIcons, availableIcons.none); 20 | const disabled = boolean('disabled', false); 21 | const children = text('text', 'TEXT'); 22 | return decoratedAction.withActions({ 'click dsm-button': 'Native button clicked!' })( 23 | () => 24 | `
25 | ${children} 26 |
27 | ` 28 | ); 29 | }, 30 | { 31 | 'in-dsm': { 32 | id: '5ce17ca24d0426001d9d3599', 33 | docFilePath: '../components/button/button.docs.json', 34 | containerClass: 'dsm-container' 35 | } 36 | } 37 | ); 38 | -------------------------------------------------------------------------------- /html/storybook-v5/.dsmrc: -------------------------------------------------------------------------------- 1 | { 2 | "authToken": "", 3 | "dsmHost": "projects.invisionapp.com", 4 | "organization": "", 5 | "outputDir": ".dsm", 6 | "storyPath": "src/**/*.stories.js" 7 | } -------------------------------------------------------------------------------- /html/storybook-v5/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-knobs/register'; 2 | import '@storybook/addon-actions/register'; 3 | import '@storybook/addon-a11y/register'; 4 | import '@storybook/addon-backgrounds/register'; 5 | import { registerDsm } from '@invisionapp/dsm-storybook/register'; 6 | 7 | registerDsm(process.env.STORYBOOK_DSM); 8 | -------------------------------------------------------------------------------- /html/storybook-v5/.storybook/presets.js: -------------------------------------------------------------------------------- 1 | module.exports = ['@storybook/addon-docs/html/preset']; 2 | -------------------------------------------------------------------------------- /html/storybook-v5/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /html/storybook-v5/.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | module: { 3 | rules: [ 4 | { 5 | test: /\.svg$/, 6 | loader: 'svg-inline-loader', 7 | options: { 8 | removeTags: true, 9 | removingTags: ['title', 'desc'], 10 | removeSVGTagAttrs: false, 11 | removingTagAttrs: ['fill'] 12 | } 13 | }, 14 | { 15 | test: /\.scss$/, 16 | use: ['style-loader', 'css-loader', 'sass-loader'] 17 | } 18 | ] 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /html/storybook-v5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "storybook-v5", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "storybook": "start-storybook -p 6006", 7 | "build-storybook": "build-storybook", 8 | "dsm-storybook:publish": "dsm-storybook publish", 9 | "dsm-storybook:preview": "dsm-storybook preview" 10 | }, 11 | "dependencies": { 12 | "@invisionapp/dsm-storybook": "latest" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "^7.5.4", 16 | "@storybook/addon-a11y": "5.2.1", 17 | "@storybook/addon-actions": "5.2.1", 18 | "@storybook/addon-backgrounds": "5.2.1", 19 | "@storybook/addon-centered": "5.2.1", 20 | "@storybook/addon-knobs": "5.2.1", 21 | "@storybook/addon-options": "5.2.1", 22 | "@storybook/addon-docs": "5.2.1", 23 | "@storybook/addons": "5.2.1", 24 | "@storybook/html": "5.2.1", 25 | "babel-loader": "^8.0.6", 26 | "css-loader": "^3.0.0", 27 | "node-sass": "^4.12.0", 28 | "sass-loader": "^7.1.0", 29 | "style-loader": "^0.23.1", 30 | "svg-inline-loader": "^0.8.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /html/storybook-v5/src/components/_variables.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto'); 2 | 3 | $font-family: 'Roboto', -apple-system, sans-serif; 4 | 5 | $color-primary: #5377a1; 6 | $color-primary-darker: #3d5878; 7 | $color-white: #ffffff; 8 | $color-disabled: rgba(128, 128, 128, 0.05); 9 | $color-gray: #9e9e9e; 10 | $color-gray-light: rgba(238, 238, 238, 0.9); 11 | $border-radius: 3px; 12 | -------------------------------------------------------------------------------- /html/storybook-v5/src/components/button/button.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "\nButtons indicate actions on the page that will occur when a user touches them. This button is responsive to screen sizes.\nWe support a very minimal level of variation for the primary button. Custom styling or class names should not be applied to the primary button.\nIt requires text in all cases, but allows for icons as an optional addition.\nThe primary button can also exist as an element within larger molecules and organisms.", 3 | "displayName": "Button", 4 | "props": [ 5 | { 6 | "value": "dsm-btn", 7 | "description": "Base class to define a button", 8 | "required": true 9 | }, 10 | { 11 | "value": "dsm-btn--with-icon", 12 | "description": "Required when the button is with an icon" 13 | }, 14 | { 15 | "value": "dsm-btn__content", 16 | "description": "The content of the button" 17 | }, 18 | { 19 | "value": "disabled", 20 | "description": "Disabled attribute to disable the button", 21 | "required": false 22 | } 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /html/storybook-v5/src/components/button/button.mdx: -------------------------------------------------------------------------------- 1 | # Example usage of addon-docs 2 | 3 | Using `addon-docs` you can write anything you want with `markdown` support. -------------------------------------------------------------------------------- /html/storybook-v5/src/components/native-button/native-button.js: -------------------------------------------------------------------------------- 1 | import { chevronRightIcon } from '../utils/icons'; 2 | import { styles } from './styles'; 3 | 4 | export class NativeButton extends HTMLElement { 5 | constructor() { 6 | super(); 7 | 8 | const buttonIcons = { 9 | 'chevron-right': chevronRightIcon 10 | }; 11 | 12 | const icon = this.getAttribute('icon'); 13 | icon !== '' ? (this.icon = buttonIcons[icon]) : (this.icon = ''); 14 | 15 | this.contents = 16 | styles + 17 | ``; 21 | 22 | this.attachShadow({ mode: 'open' }).innerHTML = this.contents; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /html/storybook-v5/src/components/nav/_nav.scss: -------------------------------------------------------------------------------- 1 | @import '../variables'; 2 | 3 | .dsm-nav { 4 | display: inline-flex; 5 | font-family: $font-family; 6 | font-size: 16px; 7 | font-weight: 100; 8 | padding: 0; 9 | margin: 0; 10 | 11 | .dsm-nav__tab { 12 | list-style-type: none; 13 | cursor: pointer; 14 | 15 | &:hover { 16 | font-weight: bold; 17 | } 18 | &:active { 19 | font-weight: bold; 20 | } 21 | 22 | &:not(:last-child) { 23 | margin-right: 32px; 24 | } 25 | 26 | .dsm-nav__tab-content { 27 | padding: 0 8px 12px; 28 | transition: all 0.2s cubic-bezier(0.2, 0.91, 0.85, 0.96); 29 | } 30 | 31 | .dsm-nav__tab--active { 32 | font-weight: bold; 33 | box-shadow: inset 0 -4px $color-primary; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /html/storybook-v5/src/components/nav/nav.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "The Nav is used for site navigation.", 3 | "displayName": "Nav", 4 | "props": [ 5 | { 6 | "value": "dsm-nav", 7 | "description": "Base class to define a navigation bar", 8 | "required": true 9 | }, 10 | { 11 | "value": "dsm-nav__tab", 12 | "description": "The tab container", 13 | "required": true 14 | }, 15 | { 16 | "value": "dsm-nav__tab-content", 17 | "description": "The tab content container", 18 | "required": true 19 | }, 20 | { 21 | "value": "dsm-nav__tab--active", 22 | "description": "Indicates the current active tab" 23 | } 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /html/storybook-v5/src/components/toast/toast.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Toasts provide dismissable feedback\\information for the user.", 3 | "displayName": "Toast", 4 | "props": [ 5 | { 6 | "value": "dsm-toast", 7 | "description": "Base class to define a toast (default Toast)", 8 | "required": true 9 | }, 10 | { 11 | "value": "dsm-toast--success", 12 | "description": "Changes the visual display of the toast to success" 13 | }, 14 | { 15 | "value": "dsm-toast--warning", 16 | "description": "Changes the visual display of the toast to warning" 17 | }, 18 | { 19 | "value": "dsm-toast--error", 20 | "description": "Changes the visual display of the toast to error" 21 | }, 22 | { 23 | "value": "dsm-toast--info", 24 | "description": "Changes the visual display of the toast to info" 25 | }, 26 | { 27 | "value": "dsm-toast__content", 28 | "description": "The toast content container", 29 | "required": true 30 | }, 31 | { 32 | "value": "dsm-toast__close-icon", 33 | "description": "The toast close icon container", 34 | "required": true 35 | } 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /html/storybook-v5/src/components/utils/icons/check-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Check Circle 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /html/storybook-v5/src/components/utils/icons/chevron-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Chevron Right 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /html/storybook-v5/src/components/utils/icons/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Close 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /html/storybook-v5/src/components/utils/icons/flag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Flag 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /html/storybook-v5/src/components/utils/icons/index.js: -------------------------------------------------------------------------------- 1 | import flagIcon from './flag.svg'; 2 | import warnIcon from './warn.svg'; 3 | import checkmarkIcon from './check-circle.svg'; 4 | import errorIcon from './close-circle.svg'; 5 | import infoIcon from './info-circle.svg'; 6 | import closeIcon from './close.svg'; 7 | import chevronRightIcon from './chevron-right.svg'; 8 | 9 | export { flagIcon, warnIcon, checkmarkIcon, errorIcon, infoIcon, closeIcon, chevronRightIcon }; 10 | -------------------------------------------------------------------------------- /html/storybook-v5/src/components/utils/icons/toast-icons.js: -------------------------------------------------------------------------------- 1 | import { flagIcon, warnIcon, checkmarkIcon, errorIcon, infoIcon } from './index'; 2 | 3 | const toastIcons = { 4 | default: flagIcon, 5 | warning: warnIcon, 6 | success: checkmarkIcon, 7 | error: errorIcon, 8 | info: infoIcon 9 | }; 10 | 11 | export { toastIcons }; 12 | -------------------------------------------------------------------------------- /html/storybook-v6/.dsmrc: -------------------------------------------------------------------------------- 1 | { 2 | "authToken": "", 3 | "dsmHost": "projects.invisionapp.com", 4 | "organization": "", 5 | "outputDir": ".dsm", 6 | "storyPath": "src/**/*.stories.js" 7 | } -------------------------------------------------------------------------------- /html/storybook-v6/.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], 3 | addons: [ 4 | '@storybook/addon-knobs', 5 | '@storybook/addon-actions', 6 | '@storybook/addon-a11y', 7 | '@storybook/addon-essentials', 8 | '@invisionapp/dsm-storybook' 9 | ], 10 | webpackFinal: async (config, { configType }) => { 11 | config.module.rules.push({ 12 | test: /\.svg$/, 13 | loader: 'svg-inline-loader', 14 | options: { 15 | removeTags: true, 16 | removingTags: ['title', 'desc'], 17 | removeSVGTagAttrs: false, 18 | removingTagAttrs: ['fill'] 19 | } 20 | }); 21 | 22 | config.module.rules.push({ 23 | test: /\.scss$/, 24 | use: ['style-loader', 'css-loader', 'sass-loader'] 25 | }); 26 | 27 | // Return the altered config 28 | return config; 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /html/storybook-v6/.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from '@storybook/addons'; 2 | import { getDsmOptions, getDsmTheme } from '@invisionapp/dsm-storybook'; 3 | 4 | /** 5 | * To override @invisionapp/dsm-storybook custom options/theme you can use Storybook options parameter and theming 6 | * -- this will only override the specific parameters you change -- 7 | * options: https://storybook.js.org/docs/react/configure/features-and-behavior 8 | * theming: https://storybook.js.org/docs/react/configure/theming 9 | * Example code below 10 | **/ 11 | // addons.setConfig({ 12 | // ...getDsmOptions(process.env.STORYBOOK_DSM), 13 | // showNav: true, 14 | // theme: { 15 | // ...getDsmTheme(process.env.STORYBOOK_DSM), 16 | // colorPrimary: '#123456' 17 | // } 18 | // }); 19 | 20 | addons.setConfig({ 21 | ...getDsmOptions(process.env.STORYBOOK_DSM) 22 | // Using the DSM theme is optional 23 | // theme: { 24 | // ...getDsmTheme(process.env.STORYBOOK_DSM) 25 | // } 26 | }); 27 | -------------------------------------------------------------------------------- /html/storybook-v6/.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /html/storybook-v6/.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import { withDsm } from '@invisionapp/dsm-storybook'; 2 | 3 | export const parameters = { 4 | actions: { argTypesRegex: '^on[A-Z].*' } 5 | }; 6 | 7 | export const decorators = [withDsm]; 8 | -------------------------------------------------------------------------------- /html/storybook-v6/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "storybook-v5", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "storybook": "start-storybook -p 6006", 7 | "build-storybook": "build-storybook", 8 | "dsm-storybook:publish": "dsm-storybook publish", 9 | "dsm-storybook:preview": "dsm-storybook preview" 10 | }, 11 | "dependencies": { 12 | "@invisionapp/dsm-storybook": "latest" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "^7.5.4", 16 | "@storybook/addon-a11y": "^6.0.0", 17 | "@storybook/addon-actions": "^6.0.0", 18 | "@storybook/addon-docs": "^6.0.0", 19 | "@storybook/addon-essentials": "^6.0.0", 20 | "@storybook/addon-knobs": "^6.0.0", 21 | "@storybook/addon-options": "^5.3.21", 22 | "@storybook/addons": "^6.0.0", 23 | "@storybook/html": "^6.0.0", 24 | "babel-loader": "^8.0.6", 25 | "css-loader": "^3.0.0", 26 | "node-sass": "^4.12.0", 27 | "sass-loader": "^7.1.0", 28 | "style-loader": "^0.23.1", 29 | "svg-inline-loader": "^0.8.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /html/storybook-v6/src/components/_variables.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto'); 2 | 3 | $font-family: 'Roboto', -apple-system, sans-serif; 4 | 5 | $color-primary: #5377a1; 6 | $color-primary-darker: #3d5878; 7 | $color-white: #ffffff; 8 | $color-disabled: rgba(128, 128, 128, 0.05); 9 | $color-gray: #9e9e9e; 10 | $color-gray-light: rgba(238, 238, 238, 0.9); 11 | $border-radius: 3px; 12 | -------------------------------------------------------------------------------- /html/storybook-v6/src/components/button/button.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "\nButtons indicate actions on the page that will occur when a user touches them. This button is responsive to screen sizes.\nWe support a very minimal level of variation for the primary button. Custom styling or class names should not be applied to the primary button.\nIt requires text in all cases, but allows for icons as an optional addition.\nThe primary button can also exist as an element within larger molecules and organisms.", 3 | "displayName": "Button", 4 | "props": [ 5 | { 6 | "value": "dsm-btn", 7 | "description": "Base class to define a button", 8 | "required": true 9 | }, 10 | { 11 | "value": "dsm-btn--with-icon", 12 | "description": "Required when the button is with an icon" 13 | }, 14 | { 15 | "value": "dsm-btn__content", 16 | "description": "The content of the button" 17 | }, 18 | { 19 | "value": "disabled", 20 | "description": "Disabled attribute to disable the button", 21 | "required": false 22 | } 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /html/storybook-v6/src/components/button/button.mdx: -------------------------------------------------------------------------------- 1 | # Example usage of addon-docs 2 | 3 | Using `addon-docs` you can write anything you want with `markdown` support. -------------------------------------------------------------------------------- /html/storybook-v6/src/components/native-button/native-button.js: -------------------------------------------------------------------------------- 1 | import { chevronRightIcon } from '../utils/icons'; 2 | import { styles } from './styles'; 3 | 4 | export class NativeButton extends HTMLElement { 5 | constructor() { 6 | super(); 7 | 8 | const buttonIcons = { 9 | 'chevron-right': chevronRightIcon 10 | }; 11 | 12 | const icon = this.getAttribute('icon'); 13 | icon !== '' ? (this.icon = buttonIcons[icon]) : (this.icon = ''); 14 | 15 | this.contents = 16 | styles + 17 | ``; 21 | 22 | this.attachShadow({ mode: 'open' }).innerHTML = this.contents; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /html/storybook-v6/src/components/nav/_nav.scss: -------------------------------------------------------------------------------- 1 | @import '../variables'; 2 | 3 | .dsm-nav { 4 | display: inline-flex; 5 | font-family: $font-family; 6 | font-size: 16px; 7 | font-weight: 100; 8 | padding: 0; 9 | margin: 0; 10 | 11 | .dsm-nav__tab { 12 | list-style-type: none; 13 | cursor: pointer; 14 | 15 | &:hover { 16 | font-weight: bold; 17 | } 18 | &:active { 19 | font-weight: bold; 20 | } 21 | 22 | &:not(:last-child) { 23 | margin-right: 32px; 24 | } 25 | 26 | .dsm-nav__tab-content { 27 | padding: 0 8px 12px; 28 | transition: all 0.2s cubic-bezier(0.2, 0.91, 0.85, 0.96); 29 | } 30 | 31 | .dsm-nav__tab--active { 32 | font-weight: bold; 33 | box-shadow: inset 0 -4px $color-primary; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /html/storybook-v6/src/components/nav/nav.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "The Nav is used for site navigation.", 3 | "displayName": "Nav", 4 | "props": [ 5 | { 6 | "value": "dsm-nav", 7 | "description": "Base class to define a navigation bar", 8 | "required": true 9 | }, 10 | { 11 | "value": "dsm-nav__tab", 12 | "description": "The tab container", 13 | "required": true 14 | }, 15 | { 16 | "value": "dsm-nav__tab-content", 17 | "description": "The tab content container", 18 | "required": true 19 | }, 20 | { 21 | "value": "dsm-nav__tab--active", 22 | "description": "Indicates the current active tab" 23 | } 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /html/storybook-v6/src/components/toast/toast.docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Toasts provide dismissable feedback\\information for the user.", 3 | "displayName": "Toast", 4 | "props": [ 5 | { 6 | "value": "dsm-toast", 7 | "description": "Base class to define a toast (default Toast)", 8 | "required": true 9 | }, 10 | { 11 | "value": "dsm-toast--success", 12 | "description": "Changes the visual display of the toast to success" 13 | }, 14 | { 15 | "value": "dsm-toast--warning", 16 | "description": "Changes the visual display of the toast to warning" 17 | }, 18 | { 19 | "value": "dsm-toast--error", 20 | "description": "Changes the visual display of the toast to error" 21 | }, 22 | { 23 | "value": "dsm-toast--info", 24 | "description": "Changes the visual display of the toast to info" 25 | }, 26 | { 27 | "value": "dsm-toast__content", 28 | "description": "The toast content container", 29 | "required": true 30 | }, 31 | { 32 | "value": "dsm-toast__close-icon", 33 | "description": "The toast close icon container", 34 | "required": true 35 | } 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /html/storybook-v6/src/components/utils/icons/check-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Check Circle 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /html/storybook-v6/src/components/utils/icons/chevron-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Chevron Right 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /html/storybook-v6/src/components/utils/icons/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Close 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /html/storybook-v6/src/components/utils/icons/flag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Icon/Flag 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /html/storybook-v6/src/components/utils/icons/index.js: -------------------------------------------------------------------------------- 1 | import flagIcon from './flag.svg'; 2 | import warnIcon from './warn.svg'; 3 | import checkmarkIcon from './check-circle.svg'; 4 | import errorIcon from './close-circle.svg'; 5 | import infoIcon from './info-circle.svg'; 6 | import closeIcon from './close.svg'; 7 | import chevronRightIcon from './chevron-right.svg'; 8 | 9 | export { flagIcon, warnIcon, checkmarkIcon, errorIcon, infoIcon, closeIcon, chevronRightIcon }; 10 | -------------------------------------------------------------------------------- /html/storybook-v6/src/components/utils/icons/toast-icons.js: -------------------------------------------------------------------------------- 1 | import { flagIcon, warnIcon, checkmarkIcon, errorIcon, infoIcon } from './index'; 2 | 3 | const toastIcons = { 4 | default: flagIcon, 5 | warning: warnIcon, 6 | success: checkmarkIcon, 7 | error: errorIcon, 8 | info: infoIcon 9 | }; 10 | 11 | export { toastIcons }; 12 | -------------------------------------------------------------------------------- /in-repo.yml: -------------------------------------------------------------------------------- 1 | visibility: public 2 | owner: 3 | active: 4 | team: desops-dsm-eng 5 | since: 2019-05-15 6 | description: "InVision DSM Storybook integration" 7 | type: reference implementation -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dsm-storybook-example-library", 3 | "private": true, 4 | "version": "1.0.0", 5 | "devDependencies": { 6 | "@babel/core": "^7.4.5", 7 | "babel-loader": "^8.0.6" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | ## Referenced issues 4 | -------------------------------------------------------------------------------- /react/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "parserOptions": { 4 | "ecmaVersion": 9, 5 | "ecmaFeatures": { 6 | "jsx": true 7 | }, 8 | "sourceType": "module" 9 | }, 10 | "env": { 11 | "es6": true, 12 | "node": true 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /react/storybook-v4/.dsmrc: -------------------------------------------------------------------------------- 1 | { 2 | "authToken": "", 3 | "dsmHost": "projects.invisionapp.com", 4 | "organization": "", 5 | "outputDir": ".dsm", 6 | "storyPath": "src/**/*.stories.js" 7 | } -------------------------------------------------------------------------------- /react/storybook-v4/.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-knobs/register'; 2 | import '@storybook/addon-actions/register'; 3 | import '@storybook/addon-a11y/register'; 4 | import '@storybook/addon-backgrounds/register'; 5 | import { registerDsm } from '@invisionapp/dsm-storybook/register'; 6 | 7 | registerDsm(process.env.STORYBOOK_DSM); 8 | -------------------------------------------------------------------------------- /react/storybook-v4/.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure, addDecorator } from '@storybook/react'; 2 | import { checkA11y } from '@storybook/addon-a11y'; 3 | import centered from '@storybook/addon-centered'; 4 | import { withBackgrounds } from '@storybook/addon-backgrounds'; 5 | import { initDsm } from '@invisionapp/dsm-storybook'; 6 | 7 | // automatically import all files ending in *.stories.js 8 | const req = require.context('../src', true, /\.stories\.js$/); 9 | function loadStories() { 10 | req.keys().forEach((filename) => req(filename)); 11 | } 12 | 13 | /** 14 | * To override @invisionapp/dsm-storybook options\theme you can use Storybook options addon 15 | * -- this will override all of @invisionapp/dsm-storybook options\themes -- 16 | * link: https://github.com/storybooks/storybook/tree/release/4.x/addons/options 17 | * Example code below 18 | **/ 19 | // import { withOptions } from '@storybook/addon-options'; 20 | // import { themes } from '@storybook/components'; 21 | // 22 | // addDecorator(withOptions({ name: 'Custom Title!', theme: themes.dark })); 23 | 24 | addDecorator(withBackgrounds([{ name: 'DSM background', value: '#f8f8fa', default: true }, { name: 'dark', value: '#333' }])); 25 | addDecorator(checkA11y); 26 | addDecorator(centered); 27 | 28 | //Init Dsm 29 | initDsm({ 30 | addDecorator, 31 | callback: () => configure(loadStories, module) 32 | }); 33 | -------------------------------------------------------------------------------- /react/storybook-v4/.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | module: { 3 | rules: [ 4 | { 5 | test: /\.(svg)$/, 6 | use: [{ loader: 'raw-loader' }] 7 | } 8 | ] 9 | } 10 | }; 11 | -------------------------------------------------------------------------------- /react/storybook-v4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-sample-v4", 3 | "version": "0.0.1", 4 | "private": true, 5 | "dependencies": { 6 | "@invisionapp/dsm-storybook": "latest", 7 | "@storybook/addon-a11y": "4.2.0-alpha.11", 8 | "@storybook/addon-actions": "4.1.18", 9 | "@storybook/addon-backgrounds": "4.1.18", 10 | "@storybook/addon-centered": "4.1.18", 11 | "@storybook/addon-knobs": "4.1.18", 12 | "@storybook/addon-options": "4.1.18", 13 | "@storybook/addons": "4.1.18", 14 | "@storybook/react": "4.1.18", 15 | "acorn": "^6.1.1", 16 | "core-js": "^2.6.5", 17 | "prop-types": "15.6.2", 18 | "react": "^16.8.6", 19 | "react-dom": "^16.8.6", 20 | "react-scripts": "3.0.0", 21 | "react-svg-inline": "2.1.1" 22 | }, 23 | "scripts": { 24 | "storybook": "start-storybook -p 9009 -s public", 25 | "build-storybook": "build-storybook -s public", 26 | "dsm-storybook:publish": "dsm-storybook publish", 27 | "dsm-storybook:preview": "dsm-storybook preview" 28 | }, 29 | "browserslist": [ 30 | ">0.2%", 31 | "not dead", 32 | "not ie <= 11", 33 | "not op_mini all" 34 | ], 35 | "devDependencies": { 36 | "@babel/core": "^7.2.0", 37 | "babel-loader": "^8.0.4", 38 | "css-loader": "^2.1.1", 39 | "node-sass": "^4.12.0", 40 | "precss": "^4.0.0", 41 | "raw-loader": "1.0.0", 42 | "sass-loader": "^7.1.0", 43 | "style-loader": "^0.23.1" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /react/storybook-v4/src/components/Button.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { boolean, select, text, withKnobs } from '@storybook/addon-knobs'; 4 | import { action } from '@storybook/addon-actions'; 5 | 6 | import Button from './Button'; 7 | 8 | storiesOf('Button', module) 9 | .addDecorator(withKnobs) 10 | .add( 11 | 'Button', 12 | () => { 13 | const iconOptions = { none: null, 'chevron-right': 'chevron-right' }; 14 | 15 | return ( 16 | 23 | ); 24 | }, 25 | { 26 | 'in-dsm': { id: '5cf5371e4ffc3ff59fd5ee1a', versionFilePath: '../components/versionFile.json' } 27 | } 28 | ); 29 | -------------------------------------------------------------------------------- /react/storybook-v4/src/components/Nav.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import { object, withKnobs } from '@storybook/addon-knobs'; 4 | 5 | import Nav from './Nav'; 6 | 7 | const navWrapper = (storyFn) =>
{storyFn()}
; 8 | 9 | storiesOf('Nav', module) 10 | .addDecorator(withKnobs) 11 | .addDecorator(navWrapper) 12 | .add( 13 | 'Nav', 14 | () => { 15 | const tabs = [{ id: '1', title: 'one' }, { id: '2', title: 'two' }, { id: '3', title: 'three' }]; 16 | 17 | return