feat(Design): Create design system

.gitignore

@@ -24,7 +24,8 @@ hsqldb
 hsqldb_test
 .classpath
 tokens/
+*storybook.log
 scripts/awscliv2.zip
 scripts/aws/install
 scripts/aws/README.md
-scripts/aws/THIRD_PARTY_LICENSES
+scripts/aws/THIRD_PARTY_LICENSES

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/angular';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  staticDirs: ['../src/stories/assets'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@chromatic-com/storybook',
+    '@storybook/addon-a11y',
+    '@storybook/addon-docs'
+  ],
+  framework: {
+    name: '@storybook/angular',
+    options: {}
+  }
+};
+export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from 'storybook/manager-api';
+import wiseTheme from './wiseTheme';
+
+addons.setConfig({
+  theme: wiseTheme
+});

.storybook/preview-head.html

@@ -0,0 +1,9 @@
+<link rel="icon" type="image/x-icon" href="assets/favicon/favicon.ico" />
+<link
+  href="https://fonts.googleapis.com/css?family=Raleway:400,500,700|Roboto:400,500,700&display=swap"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap"
+  rel="stylesheet"
+/>

.storybook/preview.ts

@@ -0,0 +1,38 @@
+import { moduleMetadata, type Preview } from '@storybook/angular';
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import docJson from '../documentation.json';
+import { MAT_TABS_CONFIG } from '@angular/material/tabs';
+
+setCompodocJson(docJson);
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    },
+    options: {
+      storySort: {
+        method: 'alphabetical',
+        order: ['Design Tokens', 'Components']
+      }
+    }
+  },
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: MAT_TABS_CONFIG,
+          useValue: {
+            animationDuration: '400ms',
+            stretchTabs: false
+          }
+        }
+      ]
+    })
+  ]
+};
+
+export default preview;

.storybook/tsconfig.doc.json

@@ -0,0 +1,10 @@
+// This tsconfig is used by Compodoc to generate the documentation for the project.
+// If Compodoc is not used, this file can be deleted.
+{
+  "extends": "./tsconfig.json",
+  // Exclude all files that are not needed for documentation generation.
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../src/**/*.stories.ts"],
+  // Please make sure to include all files from which Compodoc should generate documentation.
+  "include": ["../src/**/*"],
+  "files": ["./typings.d.ts"]
+}

.storybook/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../src/tsconfig.app.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "emitDecoratorMetadata": true,
+    "moduleResolution": "bundler",
+    "module": "preserve",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
+  "include": ["../src/**/*.stories.*", "./*.ts"],
+  "files": ["./typings.d.ts", "../src/polyfills.ts"]
+}

.storybook/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}

.storybook/wiseTheme.ts

@@ -0,0 +1,10 @@
+import { create } from 'storybook/theming';
+
+export default create({
+  base: 'dark',
+  fontBase: '"Roboto", sans-serif',
+  brandTitle: 'WISE',
+  brandUrl: 'https://wise.berkeley.edu',
+  // brandImage: 'https://storybook.js.org/images/placeholders/350x150.png',
+  brandTarget: '_self'
+});

angular.json

@@ -214,6 +214,39 @@
               "**/node_modules/**"
             ]
           }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "tsConfig": ".storybook/tsconfig.json",
+            "configDir": ".storybook",
+            "browserTarget": "wise:build",
+            "compodoc": true,
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "."
+            ],
+            "port": 6006,
+            "styles": [ "src/style/styles.scss", "src/stories/docs.scss" ]
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "tsConfig": ".storybook/tsconfig.json",
+            "configDir": ".storybook",
+            "browserTarget": "wise:build",
+            "compodoc": true,
+            "compodocArgs": [
+              "-e",
+              "json",
+              "-d",
+              "."
+            ],
+            "outputDir": "dist/storybook/wise"
+          }
         }
       },
       "i18n": {
@@ -289,4 +322,4 @@
   "cli": {
     "analytics": false
   }
-}
+}