fix: add support to eslint

.eslintignore

@@ -0,0 +1 @@
+**/*.d.ts

.eslintrc.js

@@ -0,0 +1,40 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'plugin:react/recommended',
+    'airbnb',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 13,
+    sourceType: 'module',
+  },
+  plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
+  rules: {
+    'import/no-unresolved': 'error',
+    'import/prefer-default-export': 'off',
+    'react/jsx-filename-extension': [1, { extensions: ['.tsx'] }],
+    'react/jsx-props-no-spreading': 'off',
+    'react/function-component-definition': [
+      2,
+      {
+        namedComponents: 'function-declaration',
+      },
+    ],
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': ['error'],
+  },
+  settings: {
+    'import/resolver': {
+      typescript: {},
+    },
+  },
+};

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "editorconfig": true
+}

@types/styled-jsx.d.ts

@@ -5,4 +5,4 @@ declare module 'react' {
     jsx?: boolean;
     global?: boolean;
   }
-}
+}

lib/components.ts

@@ -1,4 +1,4 @@
 export { theme } from '@lib/core/theme/theme';
 export { Box } from '@lib/components/box/box';
 export { Provider } from '@lib/components/provider/provider';
-export { Text } from '@lib/components/text/text'; 
+export { Text } from '@lib/components/text/text';

lib/components/box/box.tsx

@@ -5,80 +5,101 @@ import { StyleSheet } from '@lib/core/stylesheet/stylesheet';
 
 interface BoxProps {
   as?: any;
-  children?: any;
+  children: any;
   className?: string;
   styleSheet?: StyleSheet;
-  ref?: Ref<any>;
+  ref: Ref<any>;
 }
-export const Box = React.forwardRef(({
-  as,
-  styleSheet: { focus, hover, srOnly, ...styleSheet },
-  ...props
-}: BoxProps, ref) => {
-  const Tag = as || 'div';
+export const Box = React.forwardRef(
+  (
+    {
+      as,
+      styleSheet: { focus, hover, srOnly, ...styleSheet },
+      ...props
+    }: BoxProps,
+    ref
+  ) => {
+    const Tag = as || 'div';
 
-  return (
-    <React.Fragment>
-      <Tag ref={ref} {...props} className={`${props.className ? props.className : ''} ${srOnly ? 'sr-only' : ''}`} />
-      <style jsx>{`
-        ${Tag} {
-          ${renderCSS(styleSheet, 'xs')};
-        }
-        ${Tag}:hover {
-          ${renderCSS(hover, 'xs')};
-        }
-        ${Tag}:focus {
-          ${renderCSS(focus, 'xs')};
-        }
-        @media screen and (min-width: ${theme.breakpoints['Breakpoints.sm']}px) {
+    return (
+      <>
+        <Tag
+          ref={ref}
+          {...props}
+          className={`${props.className ? props.className : ''} ${
+            srOnly ? 'sr-only' : ''
+          }`}
+        />
+        <style jsx>{`
           ${Tag} {
-            ${renderCSS(styleSheet, 'sm')};
+            ${renderCSS(styleSheet, 'xs')};
           }
           ${Tag}:hover {
-            ${renderCSS(hover, 'sm')};
+            ${renderCSS(hover, 'xs')};
           }
           ${Tag}:focus {
-            ${renderCSS(focus, 'sm')};
+            ${renderCSS(focus, 'xs')};
           }
-        }
-        @media screen and (min-width: ${theme.breakpoints['Breakpoints.md']}px) {
-          ${Tag} {
-            ${renderCSS(styleSheet, 'md')};
-          }
-          ${Tag}:hover {
-            ${renderCSS(hover, 'md')};
-          }
-          ${Tag}:focus {
-            ${renderCSS(focus, 'md')};
-          }
-        }
-        @media screen and (min-width: ${theme.breakpoints['Breakpoints.lg']}px) {
-          ${Tag} {
-            ${renderCSS(styleSheet, 'lg')};
+          @media screen and (min-width: ${theme.breakpoints[
+              'Breakpoints.sm'
+            ]}px) {
+            ${Tag} {
+              ${renderCSS(styleSheet, 'sm')};
+            }
+            ${Tag}:hover {
+              ${renderCSS(hover, 'sm')};
+            }
+            ${Tag}:focus {
+              ${renderCSS(focus, 'sm')};
+            }
           }
-          ${Tag}:hover {
-            ${renderCSS(hover, 'lg')};
-          }
-          ${Tag}:focus {
-            ${renderCSS(focus, 'lg')};
+          @media screen and (min-width: ${theme.breakpoints[
+              'Breakpoints.md'
+            ]}px) {
+            ${Tag} {
+              ${renderCSS(styleSheet, 'md')};
+            }
+            ${Tag}:hover {
+              ${renderCSS(hover, 'md')};
+            }
+            ${Tag}:focus {
+              ${renderCSS(focus, 'md')};
+            }
           }
-        }
-        @media screen and (min-width: ${theme.breakpoints['Breakpoints.xl']}px) {
-          ${Tag} {
-            ${renderCSS(styleSheet, 'xl')};
+          @media screen and (min-width: ${theme.breakpoints[
+              'Breakpoints.lg'
+            ]}px) {
+            ${Tag} {
+              ${renderCSS(styleSheet, 'lg')};
+            }
+            ${Tag}:hover {
+              ${renderCSS(hover, 'lg')};
+            }
+            ${Tag}:focus {
+              ${renderCSS(focus, 'lg')};
+            }
           }
-          ${Tag}:hover {
-            ${renderCSS(hover, 'xl')};
-          }
-          ${Tag}:focus {
-            ${renderCSS(focus, 'xl')};
+          @media screen and (min-width: ${theme.breakpoints[
+              'Breakpoints.xl'
+            ]}px) {
+            ${Tag} {
+              ${renderCSS(styleSheet, 'xl')};
+            }
+            ${Tag}:hover {
+              ${renderCSS(hover, 'xl')};
+            }
+            ${Tag}:focus {
+              ${renderCSS(focus, 'xl')};
+            }
           }
-        }
-      `}</style>
-    </React.Fragment>
-  )
-});
+        `}</style>
+      </>
+    );
+  }
+);
 
 Box.defaultProps = {
+  as: 'div',
   styleSheet: {},
-}
+  className: '',
+};

lib/components/provider/provider.tsx

@@ -1,13 +1,7 @@
-import React from 'react';
-
 interface ProviderProps {
   theme: any;
   children: any;
 }
-export const Provider = ({ theme, children }: ProviderProps) => {
-  return (
-    <>
-      {children}
-    </>
-  );
-}
+export function Provider({ children }: ProviderProps) {
+  return children;
+}

lib/components/text/text.tsx

@@ -3,20 +3,17 @@ import { StyleSheet } from '@lib/core/stylesheet/stylesheet';
 import { Box } from '@lib/components/box/box';
 
 interface TextProps {
-  styleSheet: StyleSheet;
+  styleSheet?: StyleSheet;
   children: React.ReactNode;
 }
-
-export function Text({ children, styleSheet }: TextProps) {
+export function Text({ children, styleSheet }: TextProps): JSX.Element {
   return (
     <Box styleSheet={styleSheet}>
-      <span>
-        {children}
-      </span>
+      <span>{children}</span>
     </Box>
-  )
+  );
 }
 
 Text.defaultProps = {
   styleSheet: {},
-}
+};

lib/core/breakpoints/breakpoints.ts

@@ -1,7 +1,7 @@
 export enum Breakpoints {
-  xs = "Breakpoints.xs",
-  sm = "Breakpoints.sm",
-  md = "Breakpoints.md",
-  lg = "Breakpoints.lg",
-  xl = "Breakpoints.xl",
-}
+  xs = 'Breakpoints.xs',
+  sm = 'Breakpoints.sm',
+  md = 'Breakpoints.md',
+  lg = 'Breakpoints.lg',
+  xl = 'Breakpoints.xl',
+}

lib/core/stylesheet/stylesheet.ts

@@ -9,4 +9,4 @@ export interface StyleSheet {
   margin?: ResponsiveProperty<number>;
   focus?: any;
   hover?: any;
-}
+}