feat: first useful story

Signed-off-by: Shubham Shah <shubhamshahrising@gmail.com>

Author: SavvyShah

package.json

@@ -41,7 +41,8 @@
     "git-url-parse": "11.6.0",
     "node-fetch": "2.6.7",
     "semver": "7.3.5",
-    "vscode-extension-telemetry": "0.1.7"
+    "vscode-extension-telemetry": "0.1.7",
+    "moment": "^2.20.1"
   },
   "devDependencies": {
     "@types/assert": "^1.5.6",
@@ -68,7 +69,8 @@
     "ts-jest": "27.0.7",
     "typescript": "4.4.4",
     "vscode": "^1.1.37",
-    "vscode-test": "^1.6.1"
+    "vscode-test": "^1.6.1",
+    "moment": ""
   },
   "engines": {
     "vscode": "^1.39.2"

web-app/.storybook/main.ts

@@ -1,18 +1,10 @@
 // import '../src/styles/reset.css'
 
-// setup acquireVsCodeApi mock
-// @ts-ignore
-global.acquireVsCodeApi = () => ({
-  postMessage(event) {
-    console.log('ERROR: VSCode did not load properly in CodeRoad extension', event)
-  },
-})
-
 module.exports = {
   core: {
     builder: 'webpack5',
   },
-  stories: ['../stories/Temp.stories.tsx'],
+  stories: ['../stories/Temp.stories.tsx', '../stories/Error.stories.tsx'],
   addons: ['@storybook/addon-actions', '@storybook/addon-knobs', '@storybook/addon-links'],
   babel: async (options) => ({
     ...options,

web-app/.storybook/preview.ts

@@ -0,0 +1,7 @@
+// setup acquireVsCodeApi mock
+// @ts-ignore
+global.acquireVsCodeApi = () => ({
+  postMessage(event) {
+    console.log('ERROR: VSCode did not load properly in CodeRoad extension', event)
+  },
+})

web-app/stories/Error.stories.tsx

@@ -1,20 +1,27 @@
 import * as E from '../../typings/error'
-import { action } from '@storybook/addon-actions'
-import { storiesOf } from '@storybook/react'
 import React from 'react'
 import ErrorView from '../src/components/Error'
-import SideBarDecorator from './utils/SideBarDecorator'
 
-storiesOf('Error', module)
-  .addDecorator(SideBarDecorator)
-  .add('Error', () => {
-    const error: E.ErrorMessage = {
-      type: 'UnknownError',
-      message: '### Message summary\n\nSome message about what went wrong under here',
-      actions: [
-        { label: 'First', transition: 'FIRST' },
-        { label: 'Second', transition: 'SECOND' },
-      ],
-    }
-    return <ErrorView error={error} send={action('send')} />
-  })
+const Error = ({ send }) => {
+  const error: E.ErrorMessage = {
+    type: 'UnknownError',
+    message: '### Message summary\n\nSome message about what went wrong under here',
+    actions: [
+      { label: 'First', transition: 'FIRST' },
+      { label: 'Second', transition: 'SECOND' },
+    ],
+  }
+  return <ErrorView error={error} send={send} />
+}
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Error',
+  component: ErrorView,
+  argTypes: { send: { action: 'send' } },
+}
+
+export const Primary = () => <Error />

yarn.lock

@@ -3765,6 +3765,11 @@ mocha@^5.2.0:
     mkdirp "0.5.1"
     supports-color "5.4.0"
 
+moment@^2.20.1:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"