diff --git a/package-lock.json b/package-lock.json index 7fa5001f..76a57ed0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -411,23 +411,6 @@ "integrity": "sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==", "dev": true }, - "@types/events": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz", - "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==", - "dev": true - }, - "@types/glob": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz", - "integrity": "sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==", - "dev": true, - "requires": { - "@types/events": "*", - "@types/minimatch": "*", - "@types/node": "*" - } - }, "@types/istanbul-lib-coverage": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz", @@ -488,12 +471,6 @@ "integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==", "dev": true }, - "@types/minimatch": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", - "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==", - "dev": true - }, "@types/node": { "version": "13.5.3", "resolved": "https://registry.npmjs.org/@types/node/-/node-13.5.3.tgz", diff --git a/package.json b/package.json index 624c281e..79a20b5f 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "build": "rm -rf build && npm run build:ext && npm run build:web", "build:ext": "tsc -p ./", "build:web": "cd web-app && npm run build", - "postbuild:web": "cp -R ./web-app/build/ ./build/", + "postbuild:web": "cp -R ./web-app/build/ ./build/ && node scripts/fixFontPaths.js", "postinstall": "node ./node_modules/vscode/bin/install", "lint": "eslint src/**/*ts", "machine": "node ./out/state/index.js", @@ -41,7 +41,6 @@ "@types/assert": "^1.4.5", "@types/chokidar": "^2.1.3", "@types/dotenv": "^8.2.0", - "@types/glob": "^7.1.1", "@types/jest": "^25.1.1", "@types/jsdom": "^12.2.4", "@types/node": "^13.5.3", diff --git a/resources/public/favicon.ico b/resources/public/favicon.ico deleted file mode 100644 index a11777cc..00000000 Binary files a/resources/public/favicon.ico and /dev/null differ diff --git a/resources/public/index.html b/resources/public/index.html deleted file mode 100644 index ed0ebafa..00000000 --- a/resources/public/index.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - - React App - - - -
- - - diff --git a/resources/public/manifest.json b/resources/public/manifest.json deleted file mode 100644 index ef19ec24..00000000 --- a/resources/public/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - } - ], - "start_url": "./index.html", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} diff --git a/scripts/fixFontPaths.js b/scripts/fixFontPaths.js new file mode 100644 index 00000000..e9a2e111 --- /dev/null +++ b/scripts/fixFontPaths.js @@ -0,0 +1,26 @@ +/* + * css url font paths do not match up from the web-app as it is moved inside of build + * in order to load fonts and icons, these paths must be reconciled. + */ +const fs = require('fs') // eslint-disable-line + +// find the generated main css file +const getMainCSSFile = () => { + const regex = /^main.[a-z0-9]+.chunk.css$/ + const mainCss = fs.readdirSync('build/static/css').filter(filename => filename.match(regex)) + if (!mainCss.length) { + throw new Error('No main.css file found in build/static/css') + } + return mainCss[0] +} + +// remap the font paths from the borken /fonts/ => ../../fonts/ +const remapFontPaths = () => { + const mainCSSFile = getMainCSSFile() + const file = fs.readFileSync(`build/static/css/${mainCSSFile}`, 'utf8') + const fontUrlRegex = /url\(\/fonts\//g + const remappedFile = file.replace(fontUrlRegex, 'url(../../fonts/') + fs.writeFileSync(`build/static/css/${mainCSSFile}`, remappedFile) +} + +remapFontPaths() diff --git a/src/editor/commands.ts b/src/editor/commands.ts index ecbf1153..ad1911e3 100644 --- a/src/editor/commands.ts +++ b/src/editor/commands.ts @@ -57,14 +57,11 @@ export const createCommands = ({ extensionPath, workspaceState, workspaceRoot }: testRunner = createTestRunner(config, { onSuccess: (payload: Payload) => { // send test pass message back to client - notify({ message: 'PASS' }) webview.send({ type: 'TEST_PASS', payload }) - // update local storage }, onFail: (payload: Payload, message: string) => { - // send test fail message back to client - notify({ message: `FAIL ${message}` }) - webview.send({ type: 'TEST_FAIL', payload }) + // send test fail message back to client with failure message + webview.send({ type: 'TEST_FAIL', payload: { ...payload, message } }) }, onError: (payload: Payload) => { // send test error message back to client diff --git a/tsconfig.json b/tsconfig.json index 07e13f13..598c0d55 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -25,5 +25,5 @@ "allowJs": true, "removeComments": true }, - "exclude": ["node_modules", ".vscode-test", "build", "resources", "web-app", "*.js", "*.test.ts"] + "exclude": ["node_modules", ".vscode-test", "build", "resources", "web-app", "*.js", "*.test.ts", "scripts"] } diff --git a/typings/index.d.ts b/typings/index.d.ts index 27e6d9c2..5fe546f8 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -42,6 +42,12 @@ export interface ErrorMessage { description?: string } +export interface TestStatus { + type: 'success' | 'warning' | 'error' | 'loading' + title: string + content?: string +} + export interface MachineContext { env: Environment error: ErrorMessage | null @@ -49,6 +55,7 @@ export interface MachineContext { position: Position progress: Progress processes: ProcessEvent[] + testStatus: TestStatus | null } export interface MachineEvent { @@ -83,7 +90,6 @@ export interface MachineStateSchema { TestRunning: {} TestPass: {} TestFail: {} - TestError: {} StepNext: {} LevelComplete: {} } diff --git a/web-app/config-overrides.js b/web-app/config-overrides.js index ef550e0d..a806937f 100644 --- a/web-app/config-overrides.js +++ b/web-app/config-overrides.js @@ -1,6 +1,5 @@ /* eslint-disable @typescript-eslint/no-var-requires */ -const path = require('path') -const { addBabelPreset, addBabelPlugin, addWebpackModuleRule } = require('customize-cra') +const { addBabelPreset, addWebpackModuleRule, addBabelPlugin } = require('customize-cra') module.exports = function override(config) { addWebpackModuleRule({ diff --git a/web-app/src/Routes.tsx b/web-app/src/Routes.tsx index 091c718d..352bfe91 100644 --- a/web-app/src/Routes.tsx +++ b/web-app/src/Routes.tsx @@ -23,7 +23,7 @@ const Routes = () => { - + @@ -32,11 +32,11 @@ const Routes = () => { - + {/* Tutorial */} - + diff --git a/web-app/src/components/Button/index.tsx b/web-app/src/components/Button/index.tsx index c9a87397..bb4aa7ae 100644 --- a/web-app/src/components/Button/index.tsx +++ b/web-app/src/components/Button/index.tsx @@ -7,10 +7,19 @@ interface Props { disabled?: boolean type?: 'primary' | 'secondary' | 'normal' onClick?: () => void + size?: 'small' | 'medium' | 'large' + iconSize?: 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' } const Button = (props: Props) => ( - + {props.children} ) diff --git a/web-app/src/components/Checkbox/index.tsx b/web-app/src/components/Checkbox/index.tsx index e8db70f1..6f3b583d 100644 --- a/web-app/src/components/Checkbox/index.tsx +++ b/web-app/src/components/Checkbox/index.tsx @@ -1,19 +1,5 @@ import * as React from 'react' -import { css, jsx } from '@emotion/core' - -const styles = { - box: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, - input: { - border: '1px solid black', - }, - loading: { - backgroundColor: 'red', - }, -} +import { Checkbox as AlifdCheckbox } from '@alifd/next' interface Props { status: 'COMPLETE' | 'INCOMPLETE' | 'ACTIVE' @@ -26,13 +12,7 @@ const Checkbox = (props: Props) => { const checked = props.status === 'COMPLETE' - return ( -
- -
- ) + return } export default Checkbox diff --git a/web-app/src/components/Message/index.tsx b/web-app/src/components/Message/index.tsx index 35a2caf8..c0f428d2 100644 --- a/web-app/src/components/Message/index.tsx +++ b/web-app/src/components/Message/index.tsx @@ -2,15 +2,35 @@ import { Message as AlifdMessage } from '@alifd/next' import * as React from 'react' interface Props { - type: 'error' + type?: 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading' + shape?: 'inline' | 'addon' | 'toast' + size?: 'medium' | 'large' title: string - description?: string + content?: string + closed?: boolean + closeable?: boolean + onClose?: () => void + handleClose?: () => void } const Message = (props: Props) => { + const [visible, setVisible] = React.useState(true) + function onClose() { + if (props.onClose) { + props.onClose() + } + setVisible(false) + } return ( - - {props.description} + + {props.content} ) } diff --git a/web-app/src/components/ProcessMessages/TestMessage.tsx b/web-app/src/components/ProcessMessages/TestMessage.tsx new file mode 100644 index 00000000..57b7eb2e --- /dev/null +++ b/web-app/src/components/ProcessMessages/TestMessage.tsx @@ -0,0 +1,43 @@ +import Message from '../Message' +import * as React from 'react' +import * as T from 'typings' +import { css, jsx } from '@emotion/core' + +const durations = { + success: 1000, + warning: 4500, + error: 4500, + loading: 300000, +} + +const useTimeout = ({ duration, key }: { duration: number; key: string }) => { + const [timeoutClose, setTimeoutClose] = React.useState(false) + React.useEffect(() => { + setTimeoutClose(false) + const timeout = setTimeout(() => { + setTimeoutClose(true) + }, duration) + return () => { + clearTimeout(timeout) + } + }, [key]) + return timeoutClose +} + +const TestMessage = (props: T.TestStatus) => { + const duration = durations[props.type] + const timeoutClose = useTimeout({ duration, key: props.title }) + return ( + + ) +} + +export default TestMessage diff --git a/web-app/src/components/ProcessEvents/index.tsx b/web-app/src/components/ProcessMessages/index.tsx similarity index 53% rename from web-app/src/components/ProcessEvents/index.tsx rename to web-app/src/components/ProcessMessages/index.tsx index 255fad96..42faf14e 100644 --- a/web-app/src/components/ProcessEvents/index.tsx +++ b/web-app/src/components/ProcessMessages/index.tsx @@ -1,9 +1,11 @@ -import { Message as AlifdMessage } from '@alifd/next' +import Message from '../Message' import * as React from 'react' import * as T from 'typings' import { css, jsx } from '@emotion/core' +import TestMessage from './TestMessage' interface Props { + testStatus: T.TestStatus | null processes: T.ProcessEvent[] } @@ -15,19 +17,20 @@ const styles = { } // display a list of active processes -const ProcessEvents = ({ processes }: Props) => { +const ProcessMessages = ({ processes, testStatus }: Props) => { + if (testStatus) { + return + } if (!processes.length) { return null } return (
{processes.map(process => ( - - {process.description} - + ))}
) } -export default ProcessEvents +export default ProcessMessages diff --git a/web-app/src/containers/LoadingPage.tsx b/web-app/src/containers/LoadingPage.tsx index 30c49fe3..f375034a 100644 --- a/web-app/src/containers/LoadingPage.tsx +++ b/web-app/src/containers/LoadingPage.tsx @@ -25,7 +25,7 @@ const LoadingPage = ({ text, context }: Props) => { if (error) { return (
- +
) } diff --git a/web-app/src/containers/Overview/OverviewPage.tsx b/web-app/src/containers/Overview/OverviewPage.tsx index 2bcaa8c4..51c3d65f 100644 --- a/web-app/src/containers/Overview/OverviewPage.tsx +++ b/web-app/src/containers/Overview/OverviewPage.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import * as G from 'typings/graphql' import Button from '../../components/Button' +import Icon from '../../components/Icon' import Markdown from '../../components/Markdown' const footerHeight = '3rem' @@ -23,11 +24,13 @@ const styles = { fontSize: '1rem', }, header: { + display: 'flex', height: '2rem', backgroundColor: '#EBEBEB', fontSize: '1rem', lineHeight: '1rem', padding: '10px 1rem', + alignItems: 'center', }, levelList: { padding: '0rem 1rem', @@ -61,7 +64,10 @@ const Summary = ({ title, description, levels, onNext, onBack }: Props) => (
- + +    CodeRoad
diff --git a/web-app/src/containers/Overview/index.tsx b/web-app/src/containers/Overview/index.tsx index 2e999a3c..e0fa6d19 100644 --- a/web-app/src/containers/Overview/index.tsx +++ b/web-app/src/containers/Overview/index.tsx @@ -5,6 +5,7 @@ import * as G from 'typings/graphql' import ErrorView from '../../components/Error' import queryTutorial from '../../services/apollo/queries/tutorial' import OverviewPage from './OverviewPage' +import LoadingPage from '../../containers/LoadingPage' interface PageProps { context: CR.MachineContext @@ -35,7 +36,7 @@ const Overview = (props: PageProps) => { }) if (loading) { - return
Loading Summary...
+ return } if (error) { diff --git a/web-app/src/containers/Tutorial/LevelPage/Level.tsx b/web-app/src/containers/Tutorial/LevelPage/Level.tsx index 4f745c44..f2a1a115 100644 --- a/web-app/src/containers/Tutorial/LevelPage/Level.tsx +++ b/web-app/src/containers/Tutorial/LevelPage/Level.tsx @@ -4,7 +4,7 @@ import * as G from 'typings/graphql' import { css, jsx } from '@emotion/core' import Button from '../../../components/Button' import Markdown from '../../../components/Markdown' -import ProcessEvents from '../../../components/ProcessEvents' +import ProcessMessages from '../../../components/ProcessMessages' import Step from './Step' const styles = { @@ -68,11 +68,12 @@ const styles = { interface Props { level: G.Level & { status: T.ProgressStatus; index: number; steps: Array } processes: T.ProcessEvent[] + testStatus: T.TestStatus | null onContinue(): void onLoadSolution(): void } -const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => { +const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Props) => { if (!level.steps) { throw new Error('No Stage steps found') } @@ -107,9 +108,9 @@ const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
- {processes.length > 0 && ( + {(testStatus || processes.length > 0) && (
- +
)} diff --git a/web-app/src/containers/Tutorial/LevelPage/index.tsx b/web-app/src/containers/Tutorial/LevelPage/index.tsx index 7e47bde0..4c74179f 100644 --- a/web-app/src/containers/Tutorial/LevelPage/index.tsx +++ b/web-app/src/containers/Tutorial/LevelPage/index.tsx @@ -10,7 +10,7 @@ interface PageProps { } const LevelSummaryPageContainer = (props: PageProps) => { - const { position, progress, processes, error } = props.context + const { position, progress, processes, testStatus, error } = props.context const version = selectors.currentVersion(props.context) const levelData: G.Level = selectors.currentLevel(props.context) @@ -48,7 +48,15 @@ const LevelSummaryPageContainer = (props: PageProps) => { }), } - return + return ( + + ) } export default LevelSummaryPageContainer diff --git a/web-app/src/resources/fonts/next-icon.svg b/web-app/src/resources/fonts/next-icon.svg new file mode 100644 index 00000000..cb348dc4 --- /dev/null +++ b/web-app/src/resources/fonts/next-icon.svg @@ -0,0 +1,182 @@ + + + + + +Created by iconfont + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web-app/src/resources/fonts/next-icon.woff2 b/web-app/src/resources/fonts/next-icon.woff2 new file mode 100644 index 00000000..0aa04583 Binary files /dev/null and b/web-app/src/resources/fonts/next-icon.woff2 differ diff --git a/web-app/src/resources/fonts/roboto-bold.woff2 b/web-app/src/resources/fonts/roboto-bold.woff2 new file mode 100644 index 00000000..9fd172f9 Binary files /dev/null and b/web-app/src/resources/fonts/roboto-bold.woff2 differ diff --git a/web-app/src/resources/fonts/roboto-light.woff2 b/web-app/src/resources/fonts/roboto-light.woff2 new file mode 100644 index 00000000..d6438298 Binary files /dev/null and b/web-app/src/resources/fonts/roboto-light.woff2 differ diff --git a/web-app/src/resources/fonts/roboto-medium.woff2 b/web-app/src/resources/fonts/roboto-medium.woff2 new file mode 100644 index 00000000..2f2c83bc Binary files /dev/null and b/web-app/src/resources/fonts/roboto-medium.woff2 differ diff --git a/web-app/src/resources/fonts/roboto-regular.woff2 b/web-app/src/resources/fonts/roboto-regular.woff2 new file mode 100644 index 00000000..74b5d0e8 Binary files /dev/null and b/web-app/src/resources/fonts/roboto-regular.woff2 differ diff --git a/web-app/src/resources/fonts/roboto-thin.woff2 b/web-app/src/resources/fonts/roboto-thin.woff2 new file mode 100644 index 00000000..6a53617d Binary files /dev/null and b/web-app/src/resources/fonts/roboto-thin.woff2 differ diff --git a/web-app/src/services/state/actions/index.ts b/web-app/src/services/state/actions/index.ts new file mode 100644 index 00000000..4671ae24 --- /dev/null +++ b/web-app/src/services/state/actions/index.ts @@ -0,0 +1,13 @@ +import editorActions from './editor' +import commandActions from './command' +import contextActions from './context' +import testActions from './test' + +const createActions = (editorSend: any) => ({ + ...editorActions(editorSend), + ...commandActions, + ...contextActions, + ...testActions, +}) + +export default createActions diff --git a/web-app/src/services/state/actions/test.ts b/web-app/src/services/state/actions/test.ts new file mode 100644 index 00000000..25af8402 --- /dev/null +++ b/web-app/src/services/state/actions/test.ts @@ -0,0 +1,29 @@ +import * as CR from 'typings' +import { assign, ActionFunctionMap } from 'xstate' + +const testActions: ActionFunctionMap = { + // @ts-ignore + testStart: assign({ + testStatus: () => ({ + type: 'loading', + title: 'Test running...', + }), + }), + // @ts-ignore + testPass: assign({ + testStatus: () => ({ + type: 'success', + title: 'Success!', + }), + }), + // @ts-ignore + testFail: assign({ + testStatus: (context, event) => ({ + type: 'warning', + title: 'Fail!', + content: event.payload.message, + }), + }), +} + +export default testActions diff --git a/web-app/src/services/state/machine.ts b/web-app/src/services/state/machine.ts index 44b92190..b10109b7 100644 --- a/web-app/src/services/state/machine.ts +++ b/web-app/src/services/state/machine.ts @@ -1,17 +1,11 @@ import * as CR from 'typings' import { assign, Machine, MachineOptions } from 'xstate' -import editorActions from './actions/editor' -import commandActions from './actions/command' -import contextActions from './actions/context' +import createActions from './actions' import * as services from './services' const createOptions = ({ editorSend }: any): MachineOptions => ({ activities: {}, - actions: { - ...editorActions(editorSend), - ...contextActions, - ...commandActions, - }, + actions: createActions(editorSend), guards: {}, services: {}, delays: {}, @@ -33,6 +27,7 @@ export const createMachine = (options: any) => { complete: false, }, processes: [], + testStatus: null, }, states: { Start: { @@ -130,7 +125,7 @@ export const createMachine = (options: any) => { ContinueTutorial: { on: { TUTORIAL_START: { - target: '#tutorial', + target: '#tutorial-level', actions: ['continueConfig'], }, TUTORIAL_SELECT: 'SelectTutorial', @@ -195,16 +190,16 @@ export const createMachine = (options: any) => { on: { TEST_PASS: { target: 'TestPass', - actions: ['updateStepProgress'], + actions: ['updateStepProgress', 'testPass'], + }, + TEST_FAIL: { + target: 'TestFail', + actions: ['testFail'], + }, + TEST_ERROR: { + target: 'TestFail', + actions: ['testFail'], }, - TEST_FAIL: 'TestFail', - TEST_ERROR: 'TestError', - }, - }, - TestError: { - onEntry: ['testFail'], - after: { - 0: 'Normal', }, }, TestPass: { @@ -214,7 +209,6 @@ export const createMachine = (options: any) => { }, }, TestFail: { - onEntry: ['testFail'], after: { 0: 'Normal', }, diff --git a/web-app/src/styles/font.css b/web-app/src/styles/font.css new file mode 100644 index 00000000..79c95e00 --- /dev/null +++ b/web-app/src/styles/font.css @@ -0,0 +1,36 @@ +@charset "UTF-8"; + +@font-face { + font-family: 'NextIcon'; + src: url('~resources/fonts/next-icon.woff2') format('woff2'), + url('~resources/fonts/next-icon.svg#NextIcon') format('svg'); +} +@font-face { + font-family: 'Roboto'; + src: url('~resources/fonts/roboto-thin.woff2') format('woff2'); + font-weight: 200; +} + +@font-face { + font-family: 'Roboto'; + src: url('~resources/fonts/roboto-light.woff2') format('woff2'); + font-weight: 300; +} + +@font-face { + font-family: 'Roboto'; + src: url('~resources/fonts/roboto-regular.woff2') format('woff2'); + font-weight: 400; +} + +@font-face { + font-family: 'Roboto'; + src: url('~resources/fonts/roboto-medium.woff2') format('woff2'); + font-weight: 500; +} + +@font-face { + font-family: 'Roboto'; + src: url('~resources/fonts/roboto-bold.woff2') format('woff2'); + font-weight: 700; +} diff --git a/web-app/src/styles/index.css b/web-app/src/styles/index.css index 93d2fe5f..de51430e 100644 --- a/web-app/src/styles/index.css +++ b/web-app/src/styles/index.css @@ -1,4 +1,6 @@ -@import '~@alifd/theme-4/dist/next.css'; +@import '~@alifd/next/dist/next.min.css'; +/* @import '~@alifd/theme-4/dist/next.css'; */ +@import './font.css'; html { height: 100%; diff --git a/web-app/stories/Commands.stories.tsx b/web-app/stories/Commands.stories.tsx index 87677d27..3481fbb5 100644 --- a/web-app/stories/Commands.stories.tsx +++ b/web-app/stories/Commands.stories.tsx @@ -1,6 +1,6 @@ import { storiesOf } from '@storybook/react' import React from 'react' -import ProcessEvents from '../src/components/ProcessEvents' +import ProcessMessages from '../src/components/ProcessMessages' import SideBarDecorator from './utils/SideBarDecorator' const styles = { @@ -13,7 +13,8 @@ const styles = { storiesOf('Components', module) .addDecorator(SideBarDecorator) .add('Processes', () => ( - )) + .add('Test Start', () => ( + + )) + .add('Test Pass', () => ( + + )) + .add('Test Fail', () => ( + + ))