mirror of
https://github.com/BoostIO/BoostNote-App.git
synced 2024-10-03 23:57:47 +03:00
Initiate BoostNote storybook (#702)
* Configure babelrc for storybook * Introduce a storybook * Refactor theme * Create utils/theme * Create Button storybook * Apply prettier
This commit is contained in:
parent
7de296888f
commit
089ce87f11
11
.babelrc
11
.babelrc
@ -1,8 +1,15 @@
|
||||
{
|
||||
"presets": [
|
||||
["@babel/preset-env", { "targets": "last 2 Chrome versions" }],
|
||||
[
|
||||
"@babel/preset-env",
|
||||
{ "targets": "last 2 Chrome versions", "loose": true }
|
||||
],
|
||||
"@babel/preset-typescript",
|
||||
"@babel/preset-react"
|
||||
],
|
||||
"plugins": ["@babel/plugin-proposal-class-properties"]
|
||||
"plugins": [
|
||||
["@babel/plugin-proposal-class-properties", { "loose": true }],
|
||||
["@babel/plugin-proposal-private-methods", { "loose": true }],
|
||||
["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
|
||||
]
|
||||
}
|
||||
|
4
.storybook/main.js
Normal file
4
.storybook/main.js
Normal file
@ -0,0 +1,4 @@
|
||||
module.exports = {
|
||||
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
|
||||
}
|
3
.storybook/preview.js
Normal file
3
.storybook/preview.js
Normal file
@ -0,0 +1,3 @@
|
||||
export const parameters = {
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
}
|
10042
package-lock.json
generated
10042
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
11
package.json
11
package.json
@ -29,7 +29,9 @@
|
||||
"test": "jest -c jest.json",
|
||||
"test:watch": "jest -c jest.json --watch",
|
||||
"tsc": "tsc --watch --noEmit",
|
||||
"ico": "png2icons static/logo.png static/icon -allwe"
|
||||
"ico": "png2icons static/logo.png static/icon -allwe",
|
||||
"storybook": "start-storybook -p 6006",
|
||||
"build-storybook": "build-storybook"
|
||||
},
|
||||
"keywords": [
|
||||
"markdown",
|
||||
@ -42,9 +44,15 @@
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.6.0",
|
||||
"@babel/plugin-proposal-class-properties": "^7.5.5",
|
||||
"@babel/plugin-proposal-private-methods": "^7.12.1",
|
||||
"@babel/plugin-proposal-private-property-in-object": "^7.12.1",
|
||||
"@babel/preset-env": "^7.6.0",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@babel/preset-typescript": "^7.6.0",
|
||||
"@storybook/addon-actions": "^6.1.10",
|
||||
"@storybook/addon-essentials": "^6.1.10",
|
||||
"@storybook/addon-links": "^6.1.10",
|
||||
"@storybook/react": "^6.1.10",
|
||||
"@testing-library/react-hooks": "^2.0.1",
|
||||
"@types/codemirror": "0.0.98",
|
||||
"@types/dashify": "^1.0.0",
|
||||
@ -73,6 +81,7 @@
|
||||
"@types/webpack-env": "^1.14.0",
|
||||
"@typescript-eslint/eslint-plugin": "^2.3.0",
|
||||
"@typescript-eslint/parser": "^2.3.0",
|
||||
"babel-loader": "^8.2.2",
|
||||
"chalk": "^4.0.0",
|
||||
"copy-webpack-plugin": "^6.2.1",
|
||||
"cross-env": "^6.0.0",
|
||||
|
@ -2,11 +2,7 @@ import React, { useMemo, useState, useEffect } from 'react'
|
||||
import Router from './Router'
|
||||
import GlobalStyle from './GlobalStyle'
|
||||
import { ThemeProvider } from 'styled-components'
|
||||
import { legacyTheme } from '../themes/legacy'
|
||||
import { darkTheme } from '../themes/dark'
|
||||
import { lightTheme } from '../themes/light'
|
||||
import { sepiaTheme } from '../themes/sepia'
|
||||
import { solarizedDarkTheme } from '../themes/solarizedDark'
|
||||
import { selectTheme } from '../themes'
|
||||
import Dialog from './organisms/Dialog'
|
||||
import { useDb } from '../lib/db'
|
||||
import PreferencesModal from './PreferencesModal/PreferencesModal'
|
||||
@ -374,20 +370,5 @@ const App = () => {
|
||||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
function selectTheme(theme: string) {
|
||||
switch (theme) {
|
||||
case 'legacy':
|
||||
return legacyTheme
|
||||
case 'light':
|
||||
return lightTheme
|
||||
case 'sepia':
|
||||
return sepiaTheme
|
||||
case 'solarizedDark':
|
||||
return solarizedDarkTheme
|
||||
case 'dark':
|
||||
default:
|
||||
return darkTheme
|
||||
}
|
||||
}
|
||||
|
||||
export default App
|
||||
|
19
src/stories/Button.stories.tsx
Normal file
19
src/stories/Button.stories.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { Meta } from '@storybook/react/types-6-0'
|
||||
|
||||
import { FormPrimaryButton } from '../components/atoms/form'
|
||||
import { createThemedTemplate } from './utils/themes'
|
||||
|
||||
const { Template, themeArgType } = createThemedTemplate(FormPrimaryButton)
|
||||
|
||||
export default {
|
||||
title: 'Legacy/Atoms/FormPrimaryButton',
|
||||
component: FormPrimaryButton,
|
||||
argTypes: {
|
||||
theme: themeArgType,
|
||||
},
|
||||
} as Meta
|
||||
|
||||
export const Primary = Template.bind({})
|
||||
Primary.args = {
|
||||
children: 'Button',
|
||||
}
|
0
src/stories/Index.mdx
Normal file
0
src/stories/Index.mdx
Normal file
58
src/stories/utils/themes.tsx
Normal file
58
src/stories/utils/themes.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
import React, { FC, PropsWithChildren, ComponentType } from 'react'
|
||||
import { Story } from '@storybook/react/types-6-0'
|
||||
import { ThemeProvider } from 'styled-components'
|
||||
|
||||
import { ThemeTypes, selectTheme } from '../../themes'
|
||||
import styled from '../../lib/styled'
|
||||
|
||||
interface ThemedWrapperProps {
|
||||
theme?: ThemeTypes
|
||||
}
|
||||
|
||||
export const ThemedWrapper: FC<ThemedWrapperProps> = ({
|
||||
theme = 'dark',
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<ThemeProvider theme={selectTheme(theme)}>
|
||||
<StyledBackground>{children}</StyledBackground>
|
||||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
|
||||
const StyledBackground = styled.div`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 10px;
|
||||
background-color: ${({ theme }) => theme.backgroundColor};
|
||||
box-sizing: border-box;
|
||||
`
|
||||
|
||||
export type ThemedStory<P> = Story<{ theme: ThemeTypes } & PropsWithChildren<P>>
|
||||
|
||||
export function createThemedTemplate<P = {}>(
|
||||
Component: ComponentType<P>
|
||||
): {
|
||||
Template: ThemedStory<P>
|
||||
themeArgType: {}
|
||||
} {
|
||||
return {
|
||||
Template: ({ theme, ...args }: any) => {
|
||||
return (
|
||||
<ThemedWrapper theme={theme}>
|
||||
<Component {...args} />
|
||||
</ThemedWrapper>
|
||||
)
|
||||
},
|
||||
themeArgType: {
|
||||
defaultValue: 'dark',
|
||||
control: {
|
||||
type: 'inline-radio',
|
||||
options: ['light', 'dark', 'sepia', 'solarizedDark', 'legacy'],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
25
src/themes/index.ts
Normal file
25
src/themes/index.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { lightTheme } from './light'
|
||||
import { darkTheme } from './dark'
|
||||
import { sepiaTheme } from './sepia'
|
||||
import { solarizedDarkTheme } from './solarizedDark'
|
||||
import { legacyTheme } from './legacy'
|
||||
|
||||
export { lightTheme, darkTheme, sepiaTheme, solarizedDarkTheme, legacyTheme }
|
||||
|
||||
export type ThemeTypes = 'light' | 'dark' | 'sepia' | 'solarizedDark' | 'legacy'
|
||||
|
||||
export function selectTheme(theme: string) {
|
||||
switch (theme) {
|
||||
case 'legacy':
|
||||
return legacyTheme
|
||||
case 'light':
|
||||
return lightTheme
|
||||
case 'sepia':
|
||||
return sepiaTheme
|
||||
case 'solarizedDark':
|
||||
return solarizedDarkTheme
|
||||
case 'dark':
|
||||
default:
|
||||
return darkTheme
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user