init

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.ts

@@ -0,0 +1,105 @@
+import path, { dirname, join } from 'path';
+import remarkGfm from 'remark-gfm';
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(mdx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    // Other addons go here
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  core: {},
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {},
+  },
+  docs: {
+    autodocs: true, // see below for alternatives
+    defaultName: 'Docs', // set to change the name of generated docs entries
+  },
+  staticDirs: ['../static'],
+  webpackFinal: async (config: any, { 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 },
+    // ];
+
+    // config.module.rules[0].use[0].options.plugins[3] = [
+    //   '@babel/plugin-proposal-private-methods',
+    //   { loose: true },
+    // ];
+
+    // config.module.rules[0].use[0].options.plugins[4] = [
+    //   '@babel/plugin-proposal-private-property-in-object',
+    //   { 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$/;
+
+    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, '../'),
+    });
+
+    // ignore the file @icr/polyseg-wasm during the build as it is a wasm file and
+    // we don't need that for ui
+    config.module.rules.push({
+      test: /@icr\/polyseg-wasm/,
+      type: 'javascript/auto',
+      loader: 'file-loader',
+    });
+
+    // Return the altered config
+    return config;
+  },
+};
+
+export default config;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

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

@@ -0,0 +1,30 @@
+<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,15 @@
+// .storybook/manager.js
+
+import { addons } from '@storybook/addons';
+import ohifTheme from './OHIFTheme';
+
+const link = document.createElement('link');
+link.setAttribute('rel', 'shortcut icon');
+document.head.appendChild(link);
+
+addons.setConfig({
+  theme: ohifTheme,
+});
+
+window.STORYBOOK_GA_ID = 'G-3S63CTHNP6';
+window.STORYBOOK_REACT_GA_OPTIONS = {};

platform/ui/.storybook/preview.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs';
+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
+
+export const 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 to-blue-900 text-xl">{children}</h3>,
+      li: AnchorListItem,
+      a: LinkComponent,
+      p: ({ children }) => <p className="font-inter my-2 text-gray-800">{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 = [];