import React from 'react' ; import { storiesOf } from '@storybook/react' ; import { Flex } from 'design' ; import { createMemoryHistory } from 'history' ; import { Router , Route } from 'react-router' ; import Console from './Console' ; import { colors } from './colors' ; import ConsoleContext from './consoleContext' ; import ConsoleContextProvider from './consoleContextProvider' ; storiesOf ( 'Teleport/Console' , module ) . add ( 'Console' , ( ) => { const ctx = new ConsoleContext ( ) ; return ( < TestLayout ctx = { ctx } > < Console /> < /TestLayout>); } ) ; export function TestLayout ( props ) { const [ context ] = React . useState ( ( ) : ConsoleContext => { return props . ctx || new ConsoleContext ( ) ; } ) ; const [ history ] = React . useState ( ( ) : any => { const history = props . history || createMemoryHistory ( { initialEntries : [ '/clusterX' ] , initialIndex : 0 , } ) ; return history ; } ) ; return ( < Router history = { history } > < Route path = "/:clusterId" > < ConsoleContextProvider value = { context } > < Flex m = { - 3 } style = { { position : 'absolute' } } width = "100%" height = "100%" bg = { colors . bgTerminal } > { props . children } < /Flex> < /ConsoleContextProvider> < /Route> < /Router>); } type PropType = { children : any ; ctx ? : ConsoleContext ; history ? : History ; } ;