$ npm run start
$ npm run build
$ npm run storybook
versionを変更後、
$ npm publish --access=public
storybookを使って動作確認を行う
https://www.notion.so/another-works/ReactLandScape-49cd1931c8c542f3bc6861086b125dcc
$ npm i @another_works/react-landscape
app.tsx
import { ColorConsts, ThemeProvider } from '@another_works/react-landscape'
const customThemeStyle: ThemeConsts.CustomTheme = {
color: {
light: {
service: {
primary: '#020D4A',
primaryHover: '#031162',
secondary: '#003524',
},
},
dark: {
service: {
primary: '#020D4A',
primaryHover: '#031162',
secondary: '#003524',
},
},
},
}
function App({ Component, pageProps }: AppProps) {
return (
<>
<ThemeProvider
customTheme={customThemeStyle}
mode={ColorConsts.ModeTypeValue.light}
>
<GlobalStyle />
<Component {...pageProps} />
</ThemeProvider>
</>
)
}
export default App
export function Component(props: {}) {
const [color] = useTheme()
return (
<Container width={props.width} focus={isFocus}>
<Icon iconType={'search'} size={16} color={color.basic.primary} />
</Container>
)
}
const Container = styled.div<{ width: string; focus: boolean }>`
background-color: ${({ theme }) => theme.basic.quartanary};
`
styled-components.d.ts
import { ThemeConsts } from '@another_works/react-landscape';
export interface Theme extends ThemeConsts.ColorSchema {}
declare module 'styled-components' {
interface DefaultTheme extends Theme {}
}