digma-ai · kshmidt-digma · Mar 1, 2023 · Mar 1, 2023
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,3 @@
-dist/
+dist/
+!.storybook
+storybook-static/
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -10,7 +10,8 @@ module.exports = {
     "plugin:react-hooks/recommended",
     "plugin:react/jsx-runtime",
     "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking"
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:storybook/recommended"
     // "plugin:prettier/recommended"
   ],
   parser: "@typescript-eslint/parser",

diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 dist/
 node_modules/
+storybook-static/
 .DS_Store
 .eslintcache
diff --git a/.prettierignore b/.prettierignore
@@ -1,4 +1,5 @@
 dist/
+storybook-static/
 package.json
 package-lock.json
 tsconfig.json
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,33 @@
+import { ExtendedStorybookConfig } from "./types";
+
+const config: ExtendedStorybookConfig = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.tsx"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  framework: "@storybook/react",
+  core: {
+    disableTelemetry: true,
+    builder: "webpack5"
+  },
+  staticDirs: ["../public"],
+  typescript: {
+    check: true
+  },
+  babel: (options) => ({
+    ...options,
+    plugins: [
+      ...options.plugins,
+      [
+        "babel-plugin-styled-components",
+        {
+          fileName: false
+        }
+      ]
+    ]
+  })
+};
+
+export default config;
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -0,0 +1,9 @@
+<script>
+  window.environment;
+  window.theme;
+  window.mainFont;
+  window.codeFont;
+  window.recentActivityRefreshInterval;
+  window.recentActivityExpirationLimit;
+  window.recentActivityDocumentationURL;
+</script>
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,8 @@
+<style>
+  @font-face {
+    font-family: "JetBrains Mono";
+    src: url("/fonts/JetBrainsMono-Medium.ttf") format("truetype");
+    font-weight: 500;
+    font-style: normal;
+  }
+</style>
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -0,0 +1,35 @@
+/// <reference types="../src/globals" />
+
+import { StoryFn } from "@storybook/react";
+import React from "react";
+import {
+  cancelMessage,
+  initializeDigmaMessageListener,
+  sendMessage
+} from "../src/api";
+import { App } from "../src/components/App";
+import { dispatcher } from "../src/dispatcher";
+
+export const decorators = [
+  (Story: StoryFn): JSX.Element => {
+    initializeDigmaMessageListener(dispatcher);
+    window.sendMessageToDigma = sendMessage;
+    window.cancelMessageToDigma = cancelMessage;
+
+    return (
+      <App>
+        <Story />
+      </App>
+    );
+  }
+];
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  }
+};
diff --git a/.storybook/types.ts b/.storybook/types.ts
@@ -0,0 +1,9 @@
+import { StorybookConfig } from "@storybook/core-common";
+
+interface BabelConfig {
+  plugins: (string | [string, Record<string, unknown>])[];
+}
+
+export interface ExtendedStorybookConfig extends StorybookConfig {
+  babel: (options: BabelConfig) => BabelConfig;
+}
diff --git a/.stylelintrc b/.stylelintrc
@@ -4,7 +4,7 @@
   "rules": {
     "font-family-no-missing-generic-family-keyword": [
       true,
-      { "ignoreFontFamilies": ["Nunito"] }
+      { "ignoreFontFamilies": ["JetBrains Mono"] }
     ]
   }
 }
diff --git a/README.md b/README.md
@@ -11,20 +11,18 @@ npm ci
 Build package:
 
 ```shell
-npm run build
+npm run build:prod
 ```
 
 Build of the package will be in the `dist` directory
 
-## Development
-
-To start application in development mode (with webpack-dev-server):
+### Storybook
 
 ```shell
-npm run start
+npm run storybook
 ```
 
-Application will start on `http://localhost:3000`
+Storybook will start on `http://localhost:6006`
 
 ## License
 

diff --git a/assets/assets/index.ejs b/assets/assets/index.ejs
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <style>
+      @font-face {
+        font-family: "JetBrains Mono";
+        src: url("/fonts/JetBrainsMono-Medium.ttf") format("truetype");
+        font-weight: 500;
+        font-style: normal;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- Environment variables -->
+    <script>
+      window.environment;
+      window.theme;
+      window.mainFont;
+      window.codeFont;
+    </script>
+    <script src="/index.js"></script>
+  </body>
+</html>
diff --git a/assets/index.ejs b/assets/index.ejs
diff --git a/assets/recentActivity/index.ejs b/assets/recentActivity/index.ejs
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <style>
+      @font-face {
+        font-family: "JetBrains Mono";
+        src: url("/fonts/JetBrainsMono-Medium.ttf") format("truetype");
+        font-weight: 500;
+        font-style: normal;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- Environment variables -->
+    <script>
+      window.environment;
+      window.theme;
+      window.mainFont;
+      window.codeFont;
+      window.recentActivityRefreshInterval;
+      window.recentActivityExpirationLimit;
+      window.recentActivityDocumentationURL;
+    </script>
+    <script src="/index.js"></script>
+  </body>
+</html>