Merge pull request #1964 from Teradata/feat/add-components-libs

feat: move components lib into this repo

.github/workflows/chromatic.yml

@@ -0,0 +1,35 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on:
+  pull_request:
+    branches: [main]
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      # 👇 Version 2 of the action
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # 👈 Required to retrieve git history
+      - name: Use Node.js 16
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          cache: npm
+      - run: npm ci --legacy-peer-deps
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/deploy-ghpages.yml

@@ -22,7 +22,9 @@ jobs:
           cache: npm
       - name: Install dependencies
         run: npx ci
-      - name: Deploy docs to GitHub pages
+      - name: Build story book artifacts
+        run: npm run storybook:build
+      - name: Deploy docs and storybook to GitHub pages
         env:
           GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GH }}
         run: npm run ghpages:deploy

.gitignore

@@ -39,3 +39,5 @@ testem.log
 Thumbs.db
 
 .angular
+storybook-static/
+build-storybook.log

.storybook/main.js

@@ -0,0 +1,32 @@
+const covalentWebpack = require('../libs/components/webpack.config.js');
+
+module.exports = {
+  stories: ['../**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-a11y',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+        outline: false,
+      },
+    },
+    '@storybook/addon-interactions',
+    'storybook-dark-mode',
+    'storybook-addon-designs',
+  ],
+  framework: '@storybook/html',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+  webpackFinal: (config) => {
+    return Object.assign({}, config, {
+      entry: [...config.entry, ...Object.values(covalentWebpack.entry)],
+      module: {
+        rules: [...config.module.rules, ...covalentWebpack.module.rules],
+      },
+      plugins: [...config.plugins, ...covalentWebpack.plugins],
+    });
+  },
+};

.storybook/manager-head.html

@@ -0,0 +1,95 @@
+<link rel="shortcut icon" href="icons/favicon.ico" />
+<script>
+  (function (h, o, u, n, d) {
+    h = h[d] = h[d] || {
+      q: [],
+      onReady: function (c) {
+        h.q.push(c);
+      },
+    };
+    d = o.createElement(u);
+    d.async = 1;
+    d.src = n;
+    n = o.getElementsByTagName(u)[0];
+    n.parentNode.insertBefore(d, n);
+  })(
+    window,
+    document,
+    'script',
+    'https://www.datadoghq-browser-agent.com/datadog-rum-v4.js',
+    'DD_RUM'
+  );
+  DD_RUM.onReady(function () {
+    DD_RUM.init({
+      clientToken: 'pubb030211c68c6a17d6a435a675bba6234',
+      applicationId: 'dd76caa7-7be6-473c-baae-db3fc4f0169f',
+      site: 'datadoghq.com',
+      service: 'covalent-storybook',
+      // Specify a version number to identify the deployed version of your application in Datadog
+      // version: '1.0.0',
+      sampleRate: 100,
+      trackInteractions: true,
+      defaultPrivacyLevel: 'mask-user-input',
+    });
+    DD_RUM.startSessionReplayRecording();
+  });
+</script>
+<style>
+  .sidebar-header {
+    max-width: 213px;
+  }
+  #root > div > div[role='main'] > div {
+    box-shadow: none;
+  }
+
+  .light #root > div > div[role='main'] > div {
+    border: 1px solid rgba(0, 0, 0, 0.12);
+  }
+  .dark #root > div > div[role='main'] > div {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+  }
+
+  .light #storybook-explorer-tree a.sidebar-item[data-selected='true'] {
+    background-color: rgba(133, 221, 220, 0.1);
+    color: #007373;
+  }
+  .light #storybook-explorer-tree a.sidebar-item[data-selected='true'] svg {
+    color: #007373;
+  }
+  .light #storybook-explorer-tree a.sidebar-item svg {
+    color: rgba(0, 0, 0, 0.54);
+  }
+  .light #storybook-explorer-tree a.sidebar-item[data-selected='true']:hover {
+    background-color: rgba(133, 221, 220, 0.2);
+  }
+  .light #storybook-explorer-tree a.sidebar-item:hover,
+  .light a.sidebar-item:focus {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+
+  #storybook-explorer-tree a.sidebar-item[data-selected='true'] {
+    background-color: rgba(4, 92, 92, 0.4);
+    color: #59cecd;
+  }
+  #storybook-explorer-tree a.sidebar-item[data-selected='true'] svg {
+    color: #59cecd;
+  }
+  #storybook-explorer-tree a.sidebar-item svg {
+    color: #ffffff;
+  }
+  #storybook-explorer-tree a.sidebar-item[data-selected='true']:hover {
+    background-color: rgba(4, 92, 92, 0.6);
+  }
+  #storybook-explorer-tree a.sidebar-item:hover,
+  .light a.sidebar-item:focus {
+    background-color: hsla(0, 0%, 100%, 0.04);
+  }
+  .sidebar-item#components-dialog--anatomy,
+  .sidebar-item#components-dialog--logout,
+  .sidebar-item#components-dialog--udf {
+    display: none;
+  }
+  .sidebar-item + a {
+    display: none;
+  }
+</style>

.storybook/manager.js

@@ -0,0 +1,8 @@
+// .storybook/manager.js
+
+import { addons } from '@storybook/addons';
+import theme from './theme/covalent.dark.theme';
+
+addons.setConfig({
+  theme,
+});

.storybook/preview-head.html

@@ -0,0 +1,21 @@
+<!-- Poppins Font Typography --->
+<!-- Material Icons Font --->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css?family=Material+Icons|Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
+  rel="stylesheet"
+/>
+
+<!-- Required styles for Covalent icons -->
+<link href="icons/covalent-icons.css" rel="stylesheet" />
+
+<!-- Required styles for Material Web -->
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/material-components-web@13.0.0/dist/material-components-web.min.css"
+/>
+<!-- Required styles for Covalent Themes -->
+<link href="styles.css" rel="stylesheet" />
+<!-- Required styles for Covalent Themes -->
+<link href="theme.css" rel="stylesheet" />

.storybook/preview.js

@@ -0,0 +1,58 @@
+import darkTheme from './theme/covalent.dark.theme';
+import lightTheme from './theme/covalent.light.theme';
+
+import '!style-loader!css-loader!sass-loader!./theme/markdown-elements.scss';
+
+import anysort from 'anysort';
+
+export const parameters = {
+  options: {
+    storySort: (previous, next) => {
+      const [previousStory, previousMeta] = previous;
+      const [nextStory, nextMeta] = next;
+
+      return anysort(previousMeta.kind, nextMeta.kind, [
+        'Introduction',
+        'Guides/**',
+        'Patterns/**',
+        'Basics/**',
+        'Components/**/Overview',
+      ]);
+    },
+  },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  backgrounds: {
+    default: 'twitter',
+    values: [
+      {
+        name: 'twitter',
+        value: '#00aced',
+      },
+      {
+        name: 'facebook',
+        value: '#3b5998',
+      },
+    ],
+    grid: {
+      disable: true,
+    },
+  },
+  darkMode: {
+    // Override the default dark theme
+    dark: {
+      ...darkTheme,
+    },
+    // Override the default light theme
+    light: lightTheme,
+
+    // Add dark and light class to preview
+    stylePreview: true,
+  },
+  layout: 'centered',
+};

.storybook/theme/covalent.dark.theme.js

@@ -0,0 +1,37 @@
+import { create } from '@storybook/theming';
+import brandImage from './teradata.svg';
+
+export default create({
+  base: 'dark',
+
+  colorPrimary: '#afb6b9',
+  colorSecondary: '#59cecd',
+
+  // UI
+  appBg: '#000',
+  appContentBg: '#161c1f',
+  appBorderRadius: '8px',
+
+  // Text colors
+  textColor: 'rgba(255,255,255,0.87)',
+  textInverseColor: 'rgba(0,0,0,0.87)',
+
+  // Toolbar default and active colors
+  barSelectedColor: '#59cecd',
+  barBg: '#161c1f',
+
+  // Form colors
+  inputBg: 'transparent',
+
+  // Branding
+  brandTitle: 'Teradata Design System',
+  //brandUrl: 'https://teradata.lol',
+  brandImage,
+
+  // Addon themes
+  addonActionsTheme: {
+    // ...chromeLight,
+    // BASE_FONT_FAMILY: typography.fonts.mono,
+    BASE_BACKGROUND_COLOR: '#161c1f',
+  },
+});

.storybook/theme/covalent.light.theme.js

@@ -0,0 +1,39 @@
+import { create } from '@storybook/theming';
+import brandImage from './teradata-dark.svg';
+
+export default create({
+  base: 'light',
+
+  colorPrimary: '#43515a',
+  colorSecondary: '#007373',
+
+  // UI
+  appBg: '#ffffff',
+  appContentBg: '#f5f5f5',
+  appBorderRadius: '8px',
+
+  // Text colors
+  textColor: 'rgba(0,0,0,0.87)',
+  textInverseColor: 'rgba(255,255,255,0.87)',
+
+  // Toolbar default and active colors
+  barSelectedColor: '#007373',
+  barBg: '#f5f5f5',
+
+  // Form colors
+  inputBg: 'transparent',
+
+  // Branding
+  brandTitle: 'Teradata Design System',
+  // brandUrl: 'https://teradata.lol',
+  brandImage,
+
+  layoutMargin: '48px',
+
+  // Addon themes
+  addonActionsTheme: {
+    // ...chromeLight,
+    // BASE_FONT_FAMILY: typography.fonts.mono,
+    BASE_BACKGROUND_COLOR: '#f5f5f5',
+  },
+});