Jul 25, 2020 · Jul 24, 2020 · Jul 24, 2020 · Jul 24, 2020 · Jul 24, 2020 · Jul 24, 2020
diff --git a/src/commands.ts b/src/commands.ts
  return {
    // initialize
    [COMMANDS.START]: async () => {
      console.log('start')
      if (webview && webview.state.loaded) {
        webview.createOrShow()
      } else {
diff --git a/web-app/.storybook/config.ts b/web-app/.storybook/config.ts
 import { configure } from '@storybook/react'
 import '../src/styles/index.css'
 import '../src/styles/reset.css'

 // setup acquireVsCodeApi mock
 // @ts-ignore
diff --git a/web-app/package.json b/web-app/package.json
  },
 "dependencies": {
 "@alifd/next":"^1.20.20",
 "@alifd/theme-4":"^0.3.1",
 "@emotion/babel-preset-css-prop":"^10.0.27",
 "@emotion/core":"^10.0.28",
 "babel-jest":"^26.1.0",
diff --git a/web-app/src/App.tsx b/web-app/src/App.tsx
 import enUS from '@alifd/next/lib/locale/en-us'
 import ErrorBoundary from './components/ErrorBoundary'
 import Workspace from './components/Workspace'
 import { ThemeProvider } from 'emotion-theming'
 import theme from './styles/theme'
 import Routes from './Routes'

 const App = () => (
  /* @ts-ignore invalid in enUS locale typings for @alifd/next@1.20.20 https://github.com/alibaba-fusion/next/commit/e3b934b */
  <ConfigProvider locale={enUS}>
    <ErrorBoundary>
      <Workspace>
        <Routes />
      </Workspace>
    </ErrorBoundary>
    <Workspace>
      <ErrorBoundary>
        <ThemeProvider theme={theme}>
          <Routes />
        </ThemeProvider>
      </ErrorBoundary>
    </Workspace>
  </ConfigProvider>
 )

diff --git a/web-app/src/components/BetaBadge/index.tsx b/web-app/src/components/BetaBadge/index.tsx
 import * as React from 'react'
 import { useTheme } from 'emotion-theming'
 import { Badge } from '@alifd/next'
 import { Theme } from '../../styles/theme'

 const styles = {
  betaBadge: {
    backgroundColor:'#6a67ce',
    color:'#FFFFFF',
  },
  betaBadge:(theme: Theme) => ({
    backgroundColor:theme['$color-brand1-9'],
    color:theme['$color-white'],
  }),
 }

 type Props = {
  children: React.ReactElement | string
 }

 const BetaBadge = ({ children }: Props) => {
  const theme: Theme = useTheme()
  return (
    <Badge content="beta" style={styles.betaBadge}>
    <Badge content="beta" style={styles.betaBadge(theme)}>
      {children}&nbsp;&nbsp;
    </Badge>
  )
diff --git a/web-app/src/components/Card/index.tsx b/web-app/src/components/Card/index.tsx
diff --git a/web-app/src/components/Divider.tsx b/web-app/src/components/Divider.tsx
diff --git a/web-app/src/components/Error/index.tsx b/web-app/src/components/Error/index.tsx
 import { css, jsx } from '@emotion/core'
 import Markdown from '../Markdown'
 import Button from '../../components/Button'
 import { Theme } from '../../styles/theme'

 const styles = {
  container: {
  container:(theme: Theme) => ({
    display: 'flex' as 'flex',
    flexDirection: 'column' as 'column',
    justifyContent: 'center' as 'center',
    alignItems: 'center' as 'center',
    border:'0.5rem solid#FFBABA',
    border:`0.5rem solid${theme['$color-error-2']}`,
    padding: '1rem',
    width: '100%',
    maxWidth: '100%',
    height: '100%',
  },
  content: {
  }),
  content:(theme: Theme) => ({
    textAlign: 'center' as 'center',
    color:'rgb(40, 40, 40);',
  },
    color:theme['$color-text1-3'],
  }),
  options: {
    display: 'flex' as 'flex',
    flexDirection: 'column' as 'column',
diff --git a/web-app/src/components/Markdown/index.tsx b/web-app/src/components/Markdown/index.tsx
 import MarkdownIt from 'markdown-it'
 import Prism from 'prismjs'
 import { css, jsx, InterpolationWithTheme } from '@emotion/core'
 // @ts-ignore no types for package
 import markdownEmoji from 'markdown-it-emoji'
 import * as React from 'react'
diff --git a/web-app/src/components/NewUserExperience/NuxTutorial.tsx b/web-app/src/components/NewUserExperience/NuxTutorial.tsx
diff --git a/web-app/src/components/NewUserExperience/transition.css b/web-app/src/components/NewUserExperience/transition.css
diff --git a/web-app/src/components/Tag/index.tsx b/web-app/src/components/Tag/index.tsx
diff --git a/web-app/src/components/TestMessage/index.tsx b/web-app/src/components/TestMessage/index.tsx
 import * as React from 'react'
 import Icon from '../Icon'
 import { css, jsx } from '@emotion/core'
 import { useTheme } from 'emotion-theming'
 import { Theme } from '../../styles/theme'

 const styles = {
  container: {
    backgroundColor:'#fff3e0',
  container:(theme: Theme) => ({
    backgroundColor:theme['$color-warning-1'],
    padding: '0.5rem',
    animationDuration: '0.3s',
    animationTimingFunction: 'ease-in-out',
    borderTopLeftRadius:'4px',
    borderTopRightRadius:'4px',
    color:'rgb(51, 51, 51)',
    fontSize:'0.8rem',
  },
  icon: {
    color:'#ff9300',
  },
    borderTopLeftRadius:theme['$corner-1'],
    borderTopRightRadius:theme['$corner-1'],
    color:theme['$color-text1-3'],
    fontSize:theme['$font-size-caption'],
  }),
  icon:(theme: Theme) => ({
    color:theme['$color-warning-3'],
  }),
  content: {
 marginLeft: '0.5rem',
 padding: '00.5rem',
  },
 }

    }
  }, [props.message])

  const theme: Theme = useTheme()
  return visible && props.message ? (
    <div css={styles.container}>
      <Icon type="warning" style={styles.icon} size="xs" />
      <Icon type="warning" style={styles.icon(theme)} size="xs" />
      <span css={styles.content}>{props.message}</span>
    </div>
  ) : null
Original file line number	Diff line number	Diff line change
Expand Up		@@ -28,7 +28,6 @@ export const createCommands = ({ extensionPath, workspaceState }: CreateCommandP
		return {
		// initialize
		[COMMANDS.START]: async () => {
		console.log('start')
		if (webview && webview.state.loaded) {
		webview.createOrShow()
		} else {
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		import { configure } from '@storybook/react'
		import '../src/styles/index.css'
		import '../src/styles/reset.css'

		// setup acquireVsCodeApi mock
		// @ts-ignore
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -26,7 +26,6 @@
		},
		"dependencies": {
		"@alifd/next":"^1.20.20",
		"@alifd/theme-4":"^0.3.1",
		"@emotion/babel-preset-css-prop":"^10.0.27",
		"@emotion/core":"^10.0.28",
		"babel-jest":"^26.1.0",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,16 +3,20 @@ import { ConfigProvider } from '@alifd/next'
		import enUS from '@alifd/next/lib/locale/en-us'
		import ErrorBoundary from './components/ErrorBoundary'
		import Workspace from './components/Workspace'
		import { ThemeProvider } from 'emotion-theming'
		import theme from './styles/theme'
		import Routes from './Routes'

		const App = () => (
		/* @ts-ignore invalid in enUS locale typings for @alifd/next@1.20.20 https://github.com/alibaba-fusion/next/commit/e3b934b */
		<ConfigProvider locale={enUS}>
		<ErrorBoundary>
		<Workspace>
		<Routes />
		</Workspace>
		</ErrorBoundary>
		<Workspace>
		<ErrorBoundary>
		<ThemeProvider theme={theme}>
		<Routes />
		</ThemeProvider>
		</ErrorBoundary>
		</Workspace>
		</ConfigProvider>
		)

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,20 +1,23 @@
		import * as React from 'react'
		import { useTheme } from 'emotion-theming'
		import { Badge } from '@alifd/next'
		import { Theme } from '../../styles/theme'

		const styles = {
		betaBadge: {
		backgroundColor:'#6a67ce',
		color:'#FFFFFF',
		},
		betaBadge:(theme: Theme) => ({
		backgroundColor:theme['$color-brand1-9'],
		color:theme['$color-white'],
		}),
		}

		type Props = {
		children: React.ReactElement \| string
		}

		const BetaBadge = ({ children }: Props) => {
		const theme: Theme = useTheme()
		return (
		<Badge content="beta" style={styles.betaBadge}>
		<Badge content="beta" style={styles.betaBadge(theme)}>
		{children}
		</Badge>
		)
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,22 +4,24 @@ import * as T from 'typings'
		import { css, jsx } from '@emotion/core'
		import Markdown from '../Markdown'
		import Button from '../../components/Button'
		import { Theme } from '../../styles/theme'

		const styles = {
		container: {
		container:(theme: Theme) => ({
		display: 'flex' as 'flex',
		flexDirection: 'column' as 'column',
		justifyContent: 'center' as 'center',
		alignItems: 'center' as 'center',
		border:'0.5rem solid#FFBABA',
		border:`0.5rem solid${theme['$color-error-2']}`,
		padding: '1rem',
		width: '100%',
		maxWidth: '100%',
		height: '100%',
		},
		content: {
		}),
		content:(theme: Theme) => ({
		textAlign: 'center' as 'center',
		color:'rgb(40, 40, 40);',
		},
		color:theme['$color-text1-3'],
		}),
		options: {
		display: 'flex' as 'flex',
		flexDirection: 'column' as 'column',
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,6 @@
		import MarkdownIt from 'markdown-it'
		import Prism from 'prismjs'
		import { css, jsx, InterpolationWithTheme } from '@emotion/core'
		// @ts-ignore no types for package
		import markdownEmoji from 'markdown-it-emoji'
		import * as React from 'react'
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,23 +1,25 @@
		import * as React from 'react'
		import Icon from '../Icon'
		import { css, jsx } from '@emotion/core'
		import { useTheme } from 'emotion-theming'
		import { Theme } from '../../styles/theme'

		const styles = {
		container: {
		backgroundColor:'#fff3e0',
		container:(theme: Theme) => ({
		backgroundColor:theme['$color-warning-1'],
		padding: '0.5rem',
		animationDuration: '0.3s',
		animationTimingFunction: 'ease-in-out',
		borderTopLeftRadius:'4px',
		borderTopRightRadius:'4px',
		color:'rgb(51, 51, 51)',
		fontSize:'0.8rem',
		},
		icon: {
		color:'#ff9300',
		},
		borderTopLeftRadius:theme['$corner-1'],
		borderTopRightRadius:theme['$corner-1'],
		color:theme['$color-text1-3'],
		fontSize:theme['$font-size-caption'],
		}),
		icon:(theme: Theme) => ({
		color:theme['$color-warning-3'],
		}),
		content: {
		marginLeft: '0.5rem',
		padding: '00.5rem',
		},
		}

Expand All		@@ -38,9 +40,10 @@ const TestMessage = (props: Props) => {
		}
		}, [props.message])

		const theme: Theme = useTheme()
		return visible && props.message ? (
		<div css={styles.container}>
		<Icon type="warning" style={styles.icon} size="xs" />
		<Icon type="warning" style={styles.icon(theme)} size="xs" />
		<span css={styles.content}>{props.message}</span>
		</div>
		) : null
Expand Down