@another_works/react-landscape

開発時コンパイル

$ npm run start

本番環境用コンパイル

$ npm run build

story book立ち上げ

$ npm run storybook

Deploy

versionを変更後、

$ npm publish --access=public

動作確認

storybookを使って動作確認を行う

Document

https://www.notion.so/another-works/ReactLandScape-49cd1931c8c542f3bc6861086b125dcc

In Use

$ 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};
`

use styled-components

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 {}
}