feat: OHIF-v3 UI Component Library (#2653)

* wip on storybook as a replacement for using UI components in docusaurus, since it causes too many problems

* fix: storybook webpack config

* feat: add more stories

* feat: add more stories

* feat: add more stories

* feat: fix logo and babel runtime error

* feat: move to mdx docs for ui

* feat: enhanced mdx for header and styles

* feat: Add button usecases

* feat: Add buttonGroup docs

* feat: Add docs and use case to cine and contex menu

* feat: fix decorators

* feat: add header and dropdown docs

* feat: add Icon and input docs

* feat: add more docs

* feat: add more stories

* fix: feedback section

* feat: Add doc page

* feat: Add typography and color stories

* yarn lock

* add analytics to v3-ui

* new banner image

* new viewport component

* update review comments

platform/ui/.storybook/OHIFTheme.js

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'OHIF',
+  brandUrl: 'https://ohif.org',
+  brandImage: 'ohif-logo-light.svg',
+});

platform/ui/.storybook/custom.css

@@ -0,0 +1,3 @@
+#storybook-explorer-menu svg {
+  color: #5034ff;
+}

platform/ui/.storybook/main.js

@@ -0,0 +1,62 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['../src/**/*.stories.@(mdx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-google-analytics'],
+  core: {
+    builder: 'webpack5',
+  },
+  staticDirs: ['../static'],
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+    // config.module.rules[0].use[0].options.plugins[1] = [
+    //   '@babel/plugin-proposal-class-properties',
+    //   { loose: true },
+    // ];
+
+    // Make whatever fine-grained changes you need
+    config.module.rules.push({
+      test: /\.m?js/,
+      resolve: {
+        fullySpecified: false,
+      },
+    });
+
+    // Default rule for images /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
+    const fileLoaderRule = config.module.rules.find(
+      rule => rule.test && rule.test.test('.svg')
+    );
+    fileLoaderRule.exclude = /\.svg$/;
+
+    // console.log(JSON.stringify(config.module.rules, null, 2));
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        { loader: require.resolve('babel-loader') },
+        //        { loader: 'svg-inline-loader' },
+      ],
+    });
+
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        {
+          loader: 'postcss-loader',
+          options: {
+            // HERE: OPTIONS
+            postcssOptions: {
+              plugins: [require('tailwindcss'), require('autoprefixer')],
+            },
+          },
+        },
+      ],
+      include: path.resolve(__dirname, '../'),
+    });
+
+    // Return the altered config
+    return config;
+  },
+};

platform/ui/.storybook/manager-head.html

@@ -0,0 +1,28 @@
+<link
+  href="https://fonts.googleapis.com/css?family=Lato:100,300,400,500,700&display=swap"
+  rel="stylesheet"
+/>
+<title>OHIF UI Component</title>
+<style>
+  body {
+    font-family: 'Inter', sans-serif;
+    background: #f0f3ff !important;
+    font-size: 14px;
+  }
+
+  #storybook-explorer-menu svg {
+    color: #2b5282;
+  }
+</style>
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script
+  async
+  src="https://www.googletagmanager.com/gtag/js?id=G-3S63CTHNP6"
+></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-3S63CTHNP6');
+</script>

platform/ui/.storybook/manager.js

@@ -0,0 +1,17 @@
+// .storybook/manager.js
+
+import { addons } from '@storybook/addons';
+import ohifTheme from './OHIFTheme';
+import favicon from '/static/favicon.png';
+
+const link = document.createElement('link');
+link.setAttribute('rel', 'shortcut icon');
+link.setAttribute('href', favicon);
+document.head.appendChild(link);
+
+addons.setConfig({
+  theme: ohifTheme,
+});
+
+window.STORYBOOK_GA_ID = "G-3S63CTHNP6"
+window.STORYBOOK_REACT_GA_OPTIONS = {}

platform/ui/.storybook/preview.js

@@ -0,0 +1,84 @@
+import { parameters } from '@storybook/addon-docs/dist/esm/frameworks/react/config';
+import { addParameters } from '@storybook/react';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
+import {
+  Heading,
+  SectionName,
+  Footer,
+  AnchorListItem,
+  LinkComponent,
+} from '../src/storybook/components';
+
+import '../src/tailwind.css';
+import './custom.css';
+
+// https://github.com/mondaycom/monday-ui-react-core/tree/master/.storybook
+addParameters({
+  docs: {
+    ...parameters.docs,
+    inlineStories: true,
+    container: ({ children, context }) => (
+      <DocsContainer context={context}>{children}</DocsContainer>
+    ),
+    page: DocsPage,
+    components: {
+      Heading,
+      Footer,
+      h2: SectionName,
+      h3: ({ children }) => (
+        <h3 className="my-2 text-xl to-blue-900">{children}</h3>
+      ),
+      li: AnchorListItem,
+      a: LinkComponent,
+      p: ({ children }) => (
+        <p className="my-2 text-gray-800 font-inter">{children}</p>
+      ),
+      // todo: add pre and code
+    },
+  },
+  viewMode: 'docs',
+  previewTabs: {
+    'storybook/docs/panel': {
+      index: -1,
+    },
+    canvas: { title: 'Sandbox' },
+  },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  viewport: {
+    disable: true,
+  },
+  backgrounds: {
+    default: 'OHIF-v3',
+    values: [
+      {
+        name: 'White',
+        value: '#FFFFFF',
+      },
+      {
+        name: 'OHIF-v3',
+        value: '#090C29',
+      },
+      {
+        name: 'Light',
+        value: '#F8F8F8',
+      },
+      {
+        name: 'Dark',
+        value: '#333333',
+      },
+    ],
+  },
+  options: {
+    storySort: {
+      order: ['Welcome', 'Contribute', 'Foundations', 'Modals', '*'],
+    },
+  },
+});
+
+export const decorators = [];