diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..72c7744 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +18.12.1 \ No newline at end of file diff --git a/.storybook/main.js b/.storybook/main.js index 8e93c45..913e539 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -24,8 +24,8 @@ module.exports = { builder: 'webpack5', }, stories: [ - '../src/**/*.stories.mdx', - '../src/**/*.stories.@(js|jsx|ts|tsx)', + '../src/stories/**/*.stories.mdx', + '../src/stories/**/*.stories.@(js|jsx|ts|tsx)', ], addons: [ '@storybook/addon-docs', diff --git a/.storybook/preview.js b/.storybook/preview.js index 9c1d303..770aeab 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,6 +1,6 @@ import { configure, addParameters, addDecorator } from '@storybook/react' import { create } from '@storybook/theming/create' -import { muiThemeOptions, theme } from '../src' +import { muiThemeOptions, theme } from '../src/styles' import { ThemeProvider } from 'flipper-ui' import { StylesProvider } from '@material-ui/core/styles' import { ThemeProvider as StyledThemeProvider } from 'styled-components' @@ -15,7 +15,7 @@ const customTheme = create({ brandTitle: 'NGInformatica Styles', brandUrl: 'https://github.com/nginformatica/styleguide', - brandImage: require('./assets/logo.png') + brandImage: require('../src/assets/logo.png') }) addParameters({ @@ -36,7 +36,7 @@ addDecorator((storyFn) => ( )) -configure(require.context('../docs', true, /\.stories\.(mdx|tsx?)$/), module) +configure(require.context('../src', true, /\.stories\.(mdx|tsx?)$/), module) export const parameters = { actions: { argTypesRegex: '^on[A-Z].*' }, diff --git a/docs/Color/ColorSample.tsx b/docs/Color/ColorSample.tsx deleted file mode 100644 index c552df8..0000000 --- a/docs/Color/ColorSample.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React, { CSSProperties } from 'react' -import { theme } from "../../src" - -const colors = theme.colors - -interface IProps { - set: string, - token: string, - size: 'small' | 'medium' | 'large' -} - -const wrapperStyle: CSSProperties = { - margin: '0 2rem 2rem 0', - boxSizing: 'border-box', - display: 'inline-block', - fontFamily: 'Roboto, sans-serif', - color: colors.app.text.light, - fontWeight: 500, - boxShadow: '0px 2px 6px 1px #9995', - borderRadius: '4px' -} - -const getSize = { - small: '72px', - medium: '100px', - large: '140px' -} - -const colorStyle = (color: string, size: IProps['size'] = 'medium') => ({ - borderRadius: '4px', - backgroundColor: color, - width: getSize[size], - height: getSize[size] -}) - -const descStyle = { - padding: '0.5rem' -} - -const tagStyle = { - color: colors.app.text.main, - fontWeight: 600, - fontSize: '0.75rem', - marginBottom: '0.25rem' -} - -type Pair = [T, T] - -const colorBy = ([set, token]: Pair): string => { - if(set in colors) { - const obj = colors[set] - if (typeof obj === 'string') return obj - const tokens = token.split('.') - return tokens.reduce((acc: object, cur: string) => { - if (cur in acc) { - return acc[cur] - } - - return acc - }, obj) - } - - return '#000000' -} - -const ColorSample = ({ set, token, size }: IProps) => { - const value = colorBy([set, token]) - - return ( -
-
-
-
{ token ? token : set }
-
{ value }
-
-
- ) -} - -export default ColorSample diff --git a/docs/Color/Intro.stories.mdx b/docs/Color/Intro.stories.mdx deleted file mode 100644 index 0383b23..0000000 --- a/docs/Color/Intro.stories.mdx +++ /dev/null @@ -1,191 +0,0 @@ -import ColorSample from './ColorSample' - - - -> Current status: work in progress - -# Getting Started - -This guide is for patterns of color in the **NGInformatica Apps**, the colors will -be provided by a `theme provider` and the developer will access it with `theme.colors.NAME`. - -For more details see the example in the end of doc. - - -## Base - - -###### `theme.colors.(primary|secondary).(main|dark|light|contrast)` - -#### Primary - - - - - - -#### Secondary - - - - - - -### Grays - -###### `theme.colors.grays.g*` - - - - - - - -
- - - - - - - - -## Presets - -### Feedback - -###### `theme.colors.feedback.TYPE` - - - - - - - -### Actions - -###### `theme.colors.action.(confirm|cancel|neutral)` - - - - - - -### Graphic Scale - -###### `theme.colors.graphic.(pink|purple|brown|red|orange|yellow|lightgreen|green|blue|gray).(main|light)` - - - - - - - - - - - - -
- - - - - - - - - - - - - -### Priority Scale - -###### `theme.colors.priority.(neutral|minimal|low|medium|high|critical).(main|light)` - - - - - - - - -
- - - - - - - - -### App - -###### `theme.colors.app.TYPE` - - - - - -
- - - - - - - -## Usage with theme provider - -See below the implementation of the `card with tints` using **Typescript** - -```tsx -import { muiThemeOptions, theme, WithTheme } from 'nginformatica-styleguide' -import { ThemeProvider as StyledThemeProvider } from 'styled-components' -import { ThemeProvider } from 'flipper-ui' - -interface IProps { - kind: 'critical' | 'medium' | 'high' | 'minimal' | 'low' - tag?: string - children: React.ReactNode -} - -const CardStyled = styled('div')>( - ({ theme, kind }: WithTheme) => ({ - padding: '0.5rem', - borderLeft: `4px solid ${ theme.colors.priority[kind].main}`, - backgroundColor: theme.colors.priority[kind].light, - width: '144px', - height: '80px', - margin: '0 1rem 1rem 0', - borderRadius: '4px', - position: 'relative' - }) -) - -const Bold = styled('div')(({ theme }: ITheme) => ({ - color: theme.colors.primary, - fontWeight: 600 -})) - -const Desc = styled('div')(({ theme }: ITheme) => ({ - color: theme.colors.main.primary, - fontSize: '0.75rem' -})) - -const Card = (props: IProps) => - - { props.tag } - { `A ${ props.kind } situation` } - - -const App = () => ( - - - - - -) -``` - diff --git a/docs/Components.tsx b/docs/Components.tsx deleted file mode 100644 index 237e1fd..0000000 --- a/docs/Components.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import React from 'react' -import styled from 'styled-components' -import SnackbarContent from '@material-ui/core/SnackbarContent' -import { WithTheme, Theme } from '../src' - -interface IProps { - kind: 'critical' | 'medium' | 'high' | 'minimal' | 'low' | 'good'| 'pink' | 'purple' | 'brown' | 'neutral' - tag?: string - children: React.ReactNode -} - -const CardStyled = styled('div')>( - ({ theme, kind }: WithTheme) => ({ - padding: '0.5rem', - borderLeft: `4px solid ${ theme.colors.priority[kind].main}`, - backgroundColor: theme.colors.priority[kind].light, - width: '144px', - height: '80px', - margin: '0 1rem 1rem 0', - borderRadius: '4px', - position: 'relative' - }) -) - -const CardTagStyled = styled('div')>( - ({ theme, kind }: WithTheme) => ({ - padding: '0.5rem', - borderLeft: `4px solid ${theme.colors.priority[kind].main}`, - backgroundColor: 'white', - width: '216px', - height: '80px', - margin: '0 1rem 1rem 0', - boxShadow: '0 3px 10px #8888', - borderRadius: '4px' - }) -) - -// const CardTagStyledPattern = styled(CardStyled)` -// & > * { -// z-index: 1; -// position: relative; -// } -// ::before { -// z-index: 0; -// content: ''; -// opacity: 0.5; -// display: block; -// position: absolute; -// background-image: url("${require('./pattern.png')}"); -// width: 100%; -// height: 100%; -// top: 0; -// left: 0; -// } -// ` - -const Bold = styled('div')((p: Theme) => ({ - color: p.theme.colors.primary.main, - fontWeight: 600 -})) - -const Desc = styled('div')((p: Theme) => ({ - color: p.theme.colors.primary.main, - fontSize: '0.75rem' -})) - -const Card = (props: IProps) => - - { props.tag } - { `A ${props.kind} situation` } - - -export const Box = styled('div')` - display: flex; - flex-wrap: wrap; -` - -export const SpaceBetween = styled.div` - display: flex; - justify-content: space-between; -` - -const Tag = styled('span')>(p => ({ - color: p.theme.colors.neutral.white, - backgroundColor: p.theme.colors.priority[p.kind].main, - fontSize: '0.65rem', - padding: '0.125rem 0.25rem', - borderRadius: '5px' -})) - -const tagFromKind = (kind: IProps['kind']) => { - return kind.charAt(0).toUpperCase() + kind.slice(1) -} - -interface IFeedback { - kind: 'error' | 'info' | 'success' | 'warning' - children?: React.ReactNode -} - -const SnackbarStyled = styled(SnackbarContent)>( - (p: WithTheme) => ({ - backgroundColor: p.theme.colors.feedback[p.kind], - borderRadius: '4px', - color: 'white' - }) -) - -export const Snackbar = (props: IFeedback) => -
-

{ props.kind }

- { props.children } - }/> -
- -export const CardTag = (props: IProps) => - - - { props.tag } { tagFromKind(props.kind) } - - { `A ${props.kind} situation` } - - -export default Card diff --git a/docs/pattern.png b/docs/pattern.png deleted file mode 100644 index b6def01..0000000 Binary files a/docs/pattern.png and /dev/null differ diff --git a/.storybook/assets/logo.png b/src/assets/logo.png similarity index 100% rename from .storybook/assets/logo.png rename to src/assets/logo.png diff --git a/src/components/Box.tsx b/src/components/Box.tsx new file mode 100644 index 0000000..9326685 --- /dev/null +++ b/src/components/Box.tsx @@ -0,0 +1,6 @@ +import styled from "styled-components"; + +export const Box = styled('div')` + display: flex; + flex-wrap: wrap; +` \ No newline at end of file diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx new file mode 100644 index 0000000..0bac50e --- /dev/null +++ b/src/components/Card/index.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { CardStyled, Bold, Desc } from "./styles" + +interface CardProps { + kind: 'critical' | 'medium' | 'high' | 'minimal' | 'low' | 'good'| 'pink' | 'purple' | 'brown' | 'neutral' + tag?: string + children: React.ReactNode +} + +export function Card(props: CardProps) { + return ( + + { props.tag } + { `A ${props.kind} situation` } + + ) +} + \ No newline at end of file diff --git a/src/components/Card/styles.ts b/src/components/Card/styles.ts new file mode 100644 index 0000000..51e1fed --- /dev/null +++ b/src/components/Card/styles.ts @@ -0,0 +1,31 @@ +import styled from "styled-components" +import { Theme, WithTheme } from "../../styles" + +interface CardStyledProps { + kind: 'critical' | 'medium' | 'high' | 'minimal' | 'low' | 'good'| 'pink' | 'purple' | 'brown' | 'neutral' + tag?: string + children: React.ReactNode +} + +export const CardStyled = styled('div')>( + ({ theme, kind }: WithTheme) => ({ + padding: '0.5rem', + borderLeft: `4px solid ${ theme.colors.priority[kind].main}`, + backgroundColor: theme.colors.priority[kind].light, + width: '144px', + height: '80px', + margin: '0 1rem 1rem 0', + borderRadius: '4px', + position: 'relative' + }) +) + +export const Bold = styled('div')((p: Theme) => ({ + color: p.theme.colors.primary.main, + fontWeight: 600 +})) + +export const Desc = styled('div')((p: Theme) => ({ + color: p.theme.colors.primary.main, + fontSize: '0.75rem' +})) \ No newline at end of file diff --git a/src/components/CardTag/index.tsx b/src/components/CardTag/index.tsx new file mode 100644 index 0000000..25a5cd7 --- /dev/null +++ b/src/components/CardTag/index.tsx @@ -0,0 +1,34 @@ +import React from 'react' +import { SpaceBetween } from '../SpaceBetween' +import { Bold, CardTagStyled, Desc, Tag } from './styles' + +interface CardTagProps { + kind: + | 'critical' + | 'medium' + | 'high' + | 'minimal' + | 'low' + | 'good' + | 'pink' + | 'purple' + | 'brown' + | 'neutral' + tag?: string +} + +const tagFromKind = (kind: CardTagProps['kind']) => { + return kind.charAt(0).toUpperCase() + kind.slice(1) +} + +export function CardTag(props: CardTagProps) { + return ( + + + {props.tag}{' '} + {tagFromKind(props.kind)} + + {`A ${props.kind} situation`} + + ) +} diff --git a/src/components/CardTag/styles.ts b/src/components/CardTag/styles.ts new file mode 100644 index 0000000..410cd2b --- /dev/null +++ b/src/components/CardTag/styles.ts @@ -0,0 +1,39 @@ +import styled from "styled-components"; +import { Theme, WithTheme } from "../../styles"; + +interface CardTagStyledProps { + kind: 'critical' | 'medium' | 'high' | 'minimal' | 'low' | 'good'| 'pink' | 'purple' | 'brown' | 'neutral' + tag?: string + children: React.ReactNode +} + +export const CardTagStyled = styled('div')>( + ({ theme, kind }: WithTheme) => ({ + padding: '0.5rem', + borderLeft: `4px solid ${theme.colors.priority[kind].main}`, + backgroundColor: 'white', + width: '216px', + height: '80px', + margin: '0 1rem 1rem 0', + boxShadow: '0 3px 10px #8888', + borderRadius: '4px' + }) +) + +export const Bold = styled('div')((p: Theme) => ({ + color: p.theme.colors.primary.main, + fontWeight: 600 +})) + +export const Desc = styled('div')((p: Theme) => ({ + color: p.theme.colors.primary.main, + fontSize: '0.75rem' +})) + +export const Tag = styled('span')>(p => ({ + color: p.theme.colors.neutral.white, + backgroundColor: p.theme.colors.priority[p.kind].main, + fontSize: '0.65rem', + padding: '0.125rem 0.25rem', + borderRadius: '5px' +})) \ No newline at end of file diff --git a/src/components/ColorSample/index.tsx b/src/components/ColorSample/index.tsx new file mode 100644 index 0000000..69ed7fe --- /dev/null +++ b/src/components/ColorSample/index.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { theme } from "../../styles" +import { colorStyle, descStyle, tagStyle, wrapperStyle } from "./styles"; + +const colors = theme.colors + +interface ColorSampleProps { + set: string, + token: string, + size: 'small' | 'medium' | 'large' +} +type Pair = [T, T] + +const colorBy = ([set, token]: Pair): string => { + if(set in colors) { + const obj = colors[set] + if (typeof obj === 'string') return obj + const tokens = token.split('.') + return tokens.reduce((acc: object, cur: string) => { + if (cur in acc) { + return acc[cur] + } + + return acc + }, obj) + } + + return '#000000' +} + +export function ColorSample({ set, token, size }: ColorSampleProps) { + const value = colorBy([set, token]) + + return ( +
+
+
+
{ token ? token : set }
+
{ value }
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/ColorSample/styles.ts b/src/components/ColorSample/styles.ts new file mode 100644 index 0000000..9160588 --- /dev/null +++ b/src/components/ColorSample/styles.ts @@ -0,0 +1,45 @@ +import { CSSProperties } from 'react' +import { theme } from "../../styles" + +const colors = theme.colors + +interface IProps { + set: string, + token: string, + size: 'small' | 'medium' | 'large' +} + +export const wrapperStyle: CSSProperties = { + margin: '0 2rem 2rem 0', + boxSizing: 'border-box', + display: 'inline-block', + fontFamily: 'Roboto, sans-serif', + color: colors.app.text.light, + fontWeight: 500, + boxShadow: '0px 2px 6px 1px #9995', + borderRadius: '4px' +} + +export const getSize = { + small: '72px', + medium: '100px', + large: '140px' +} + +export const colorStyle = (color: string, size: IProps['size'] = 'medium') => ({ + borderRadius: '4px', + backgroundColor: color, + width: getSize[size], + height: getSize[size] +}) + +export const descStyle = { + padding: '0.5rem' +} + +export const tagStyle = { + color: colors.app.text.main, + fontWeight: 600, + fontSize: '0.75rem', + marginBottom: '0.25rem' +} \ No newline at end of file diff --git a/src/components/Snackbar/index.tsx b/src/components/Snackbar/index.tsx new file mode 100644 index 0000000..cc59973 --- /dev/null +++ b/src/components/Snackbar/index.tsx @@ -0,0 +1,19 @@ +import React from "react" +import { SnackbarStyled } from "./styles" + +interface SnackbarProps { + kind: 'error' | 'info' | 'success' | 'warning' + children?: React.ReactNode +} + +export function Snackbar(props: SnackbarProps) { + return ( +
+

{ props.kind }

+ { props.children } + }/> +
+ ) +} + \ No newline at end of file diff --git a/src/components/Snackbar/styles.ts b/src/components/Snackbar/styles.ts new file mode 100644 index 0000000..072ec03 --- /dev/null +++ b/src/components/Snackbar/styles.ts @@ -0,0 +1,16 @@ +import styled from "styled-components" +import SnackbarContent from '@material-ui/core/SnackbarContent' +import { WithTheme } from "../../styles" + +interface IFeedback { + kind: 'error' | 'info' | 'success' | 'warning' + children?: React.ReactNode +} + +export const SnackbarStyled = styled(SnackbarContent)>( + (p: WithTheme) => ({ + backgroundColor: p.theme.colors.feedback[p.kind], + borderRadius: '4px', + color: 'white' + }) +) \ No newline at end of file diff --git a/src/components/SpaceBetween.tsx b/src/components/SpaceBetween.tsx new file mode 100644 index 0000000..837680c --- /dev/null +++ b/src/components/SpaceBetween.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import styled from 'styled-components' + +const SpaceBetweenStyled = styled.div` + display: flex; + justify-content: space-between; +`; + +interface SpaceBetweenProps { + children: React.ReactNode | string; +} + +export function SpaceBetween ({ children }:SpaceBetweenProps) { + return {children}; +}; \ No newline at end of file diff --git a/src/components/index.tsx b/src/components/index.tsx new file mode 100644 index 0000000..cc9f7ca --- /dev/null +++ b/src/components/index.tsx @@ -0,0 +1,6 @@ +export { SpaceBetween } from './SpaceBetween' +export { Box } from './Box' +export { Snackbar } from './Snackbar' +export { Card } from './Card' +export { CardTag } from './CardTag' +export { ColorSample } from './ColorSample' diff --git a/src/stories/colors.stories.mdx b/src/stories/colors.stories.mdx new file mode 100644 index 0000000..7afee19 --- /dev/null +++ b/src/stories/colors.stories.mdx @@ -0,0 +1,120 @@ +import { ColorSample } from '../components/ColorSample' + + + +## Base + +###### `theme.colors.(primary|secondary).(main|dark|light|contrast)` + +#### Primary + + + + + + +#### Secondary + + + + + + +### Grays + +###### `theme.colors.grays.g*` + + + + + + + +
+ + + + + + + +## Presets + +### Feedback + +###### `theme.colors.feedback.TYPE` + + + + + + +### Actions + +###### `theme.colors.action.(confirm|cancel|neutral)` + + + + + +### Graphic Scale + +###### `theme.colors.graphic.(pink|purple|brown|red|orange|yellow|lightgreen|green|blue|gray).(main|light)` + + + + + + + + + + + + +
+ + + + + + + + + + + + +### Priority Scale + +###### `theme.colors.priority.(neutral|minimal|low|medium|high|critical).(main|light)` + + + + + + + + +
+ + + + + + + + +### App + +###### `theme.colors.app.TYPE` + + + + + +
+ + + + diff --git a/docs/Color/ColorUsage.stories.mdx b/src/stories/example.stories.mdx similarity index 70% rename from docs/Color/ColorUsage.stories.mdx rename to src/stories/example.stories.mdx index 1dae197..3a9f970 100644 --- a/docs/Color/ColorUsage.stories.mdx +++ b/src/stories/example.stories.mdx @@ -1,43 +1,50 @@ import Button from 'flipper-ui/core/Button' import List from 'flipper-ui/core/List' import ListItem from 'flipper-ui/core/ListItem' -import Card, { CardR, Box, CardTag, SpaceBetween, Snackbar } from '../Components' -import { Meta, Story, Preview } from '@storybook/addon-docs/blocks' +import { Card, Box, CardTag, SpaceBetween, Snackbar } from '../components' +import { Meta, Story, Canvas } from '@storybook/addon-docs' - + ## Buttons #### Primary - + - - + + - + #### Secondary - + - - + + - - + ## Priority scale demo #### with tints - + @@ -48,12 +55,11 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks' - + #### with tags - - + @@ -64,22 +70,19 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks' - - + ## Feedback preset demo #### Snackbar - + <> An error message or a bad thing occur - - Your trial period has finished - + Your trial period has finished A branch has been created with success @@ -88,4 +91,4 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks' - + diff --git a/src/stories/home.stories.mdx b/src/stories/home.stories.mdx new file mode 100644 index 0000000..2b11140 --- /dev/null +++ b/src/stories/home.stories.mdx @@ -0,0 +1,62 @@ + + +# Getting Started + +This guide is for patterns of color in the **NGInformatica Apps**, the colors will +be provided by a `theme provider` and the developer will access it with `theme.colors.NAME`. + +For more details see the example in the end of doc. + +## Usage with theme provider + +See below the implementation of the `card with tints` using **Typescript** + +```tsx +import { muiThemeOptions, theme, WithTheme } from 'nginformatica-styleguide' +import { ThemeProvider as StyledThemeProvider } from 'styled-components' +import { ThemeProvider } from 'flipper-ui' + +interface IProps { + kind: 'critical' | 'medium' | 'high' | 'minimal' | 'low' + tag?: string + children: React.ReactNode +} + +const CardStyled = styled('div')>( + ({ theme, kind }: WithTheme) => ({ + padding: '0.5rem', + borderLeft: `4px solid ${theme.colors.priority[kind].main}`, + backgroundColor: theme.colors.priority[kind].light, + width: '144px', + height: '80px', + margin: '0 1rem 1rem 0', + borderRadius: '4px', + position: 'relative', + }) +) + +const Bold = styled('div')(({ theme }: ITheme) => ({ + color: theme.colors.primary, + fontWeight: 600, +})) + +const Desc = styled('div')(({ theme }: ITheme) => ({ + color: theme.colors.main.primary, + fontSize: '0.75rem', +})) + +const Card = (props: IProps) => ( + + {props.tag} + {`A ${props.kind} situation`} + +) + +const App = () => ( + + + + + +) +``` diff --git a/src/colors.ts b/src/styles/colors.ts similarity index 100% rename from src/colors.ts rename to src/styles/colors.ts diff --git a/src/index.ts b/src/styles/index.ts similarity index 100% rename from src/index.ts rename to src/styles/index.ts diff --git a/src/presets.ts b/src/styles/presets.ts similarity index 100% rename from src/presets.ts rename to src/styles/presets.ts diff --git a/src/theme.ts b/src/styles/theme.ts similarity index 100% rename from src/theme.ts rename to src/styles/theme.ts diff --git a/tsconfig.json b/tsconfig.json index 3603292..c6217b1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,28 +1,49 @@ { - "compilerOptions": { - "outDir": "lib", - "module": "commonjs", - "target": "es5", - "lib": ["es5", "es6", "es7", "es2017", "dom"], - "sourceMap": true, - "allowJs": false, - "jsx": "react", - "types": ["react"], - "moduleResolution": "node", - "rootDirs": ["src", "docs"], - "forceConsistentCasingInFileNames": true, - "noImplicitReturns": true, - "noImplicitThis": true, - "noImplicitAny": true, - "strictNullChecks": true, - "suppressImplicitAnyIndexErrors": true, - "noUnusedLocals": true, - "declaration": true, - "allowSyntheticDefaultImports": true, - "experimentalDecorators": true, - "emitDecoratorMetadata": true, - "baseUrl": "." - }, - "include": ["./src/*"], - "exclude": ["node_modules", "lib", "scripts"] -} + "compilerOptions": { + "outDir": "lib", + "module": "commonjs", + "target": "es5", + "lib": [ + "es5", + "es6", + "es7", + "es2017", + "dom" + ], + "sourceMap": true, + "allowJs": false, + "jsx": "react", + "types": [ + "react" + ], + "moduleResolution": "node", + "rootDirs": [ + "src", + "docs" + ], + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "strictNullChecks": true, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true, + "declaration": true, + "allowSyntheticDefaultImports": true, + "experimentalDecorators": true, + "emitDecoratorMetadata": true, + "baseUrl": "." + }, + "include": [ + "./src/*", + "src/styles/colors.ts", + "src/styles/index.ts", + "src/styles/presets.ts", + "src/styles/theme.ts" + ], + "exclude": [ + "node_modules", + "lib", + "scripts" + ] +} \ No newline at end of file