Eslint and prettier

.eslintignore

@@ -0,0 +1,12 @@
+src/constants/Permissions.ts
+src/types/Levita.d.ts
+
+*.ignore
+lib
+
+.eslintrc.js
+babel.config.js
+cucumber.js
+jest.config.js
+jest.setup.js
+metro.config.js

.eslintrc.js

@@ -0,0 +1,100 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react-native/all',
+    'plugin:react-hooks/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      typescript: {},
+    },
+    'import/ignore': ['node_modules/react-native/index\\.js$'],
+  },
+  plugins: ['react', 'react-native', '@typescript-eslint'],
+  rules: {
+    // eslint
+    'no-empty-pattern': 'off',
+    'prefer-const': 'off',
+    'no-constant-condition': 'off',
+    'no-empty': 'off',
+    'no-unused-vars': 'off',
+
+    // react
+    'react/prop-types': 'off',
+    'react/display-name': 'off',
+    'react/no-unescaped-entities': 'off',
+
+    // react-native
+    'react-native/no-raw-text': 'off',
+    'react-native/no-inline-styles': 'off',
+    'react-native/no-color-literals': 'off',
+    'react-native/no-unused-styles': 'off',
+    'react-native/sort-styles': 'off',
+    'react-native/split-platform-components': 'off',
+
+    // typescript
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-inferrable-types': 'off',
+    '@typescript-eslint/no-this-alias': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn',
+      {
+        argsIgnorePattern: '^_',
+      },
+    ],
+
+    // import
+    'import/no-named-as-default': 'off',
+    'import/no-named-as-default-member': 'off',
+    'import/order': [
+      'warn',
+      {
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling'],
+        pathGroups: [
+          {
+            pattern: 'react',
+            group: 'builtin',
+          },
+          {
+            pattern: 'react-native',
+            group: 'builtin',
+          },
+          {
+            pattern: '~/**',
+            group: 'internal',
+            position: 'after',
+          },
+        ],
+        'newlines-between': 'always',
+        pathGroupsExcludedImportTypes: ['builtin'],
+        alphabetize: {
+          order: 'asc',
+        },
+      },
+    ],
+  },
+};

.prettierignore

@@ -0,0 +1,5 @@
+src/constants/Permissions.ts
+src/types/Levita.d.ts
+
+*.ignore
+lib

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  bracketSameLine: false,
+  singleQuote: true,
+  trailingComma: 'all',
+  semi: true,
+  arrowParens: 'avoid',
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "private": true,
   "workspaces": [
-      "example",
-      "packages/*"
+    "example",
+    "packages/*"
   ],
   "scripts": {
     "start": "yarn workspace example start",
@@ -14,7 +14,30 @@
     "publish:theme": "yarn workspace @nomada-sh/react-native-eyecandy-theme publish",
     "publish:icons": "yarn workspace @nomada-sh/react-native-eyecandy-icons publish",
     "publish:components": "yarn workspace @nomada-sh/react-native-eyecandy publish",
-    "build": "yarn build:theme && yarn build:icons && yarn build:components"
+    "build": "yarn build:theme && yarn build:icons && yarn build:components",
+    "lint:theme": "eslint packages/react-native-eyecandy-theme",
+    "lint:fix:theme": "eslint packages/react-native-eyecandy-theme --fix",
+    "lint:icons": "eslint packages/react-native-eyecandy-icons",
+    "lint:fix:icons": "eslint packages/react-native-eyecandy-icons --fix",
+    "lint:components": "eslint packages/react-native-eyecandy",
+    "lint:fix:components": "eslint packages/react-native-eyecandy --fix",
+    "lint:example": "eslint example",
+    "lint:fix:example": "eslint example --fix",
+    "lint": "yarn lint:theme && yarn lint:icons && yarn lint:components && yarn lint:example",
+    "lint:fix": "yarn lint:fix:theme && yarn lint:fix:icons && yarn lint:fix:components && yarn lint:fix:example"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
+    "@typescript-eslint/parser": "^5.16.0",
+    "eslint": "^8.12.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^2.7.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react-native": "^4.0.0",
+    "prettier": "^2.6.1",
+    "typescript": "^4.5.5"
+  }
 }

packages/react-native-eyecandy-icons/src/Icon.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import Svg, { SvgProps } from 'react-native-svg';
 
 import {
   useColors,
   ThemeTextColorsChoices,
 } from '@nomada-sh/react-native-eyecandy-theme';
+import Svg, { SvgProps } from 'react-native-svg';
 
 export interface IconProps extends Omit<SvgProps, 'color'> {
   size?: number;

packages/react-native-eyecandy-theme/package.json

@@ -10,6 +10,7 @@
   "source": "src/index.ts",
   "scripts": {
     "prepare": "bob build",
+    "build": "bob build",
     "test": "jest --passWithNoTests",
     "test:watch": "jest --watch",
     "publish": "npm publish --access public",

packages/react-native-eyecandy-theme/src/colors/createColors.ts

@@ -1,14 +1,14 @@
-import { CreateThemeColors } from './types';
 import { createPalette } from '../palette';
 import { createTypography } from '../typography';
 
+import getBackgroundColors from './getBackgroundColors';
+import getBadgeColors from './getBadgeColors';
 import getButtonColors from './getButtonColors';
-import getTextColors from './getTextColors';
+import getDividerColors from './getDividerColors';
 import getInputColors from './getInputColors';
 import getSwitchColors from './getSwitchColors';
-import getBackgroundColors from './getBackgroundColors';
-import getDividerColors from './getDividerColors';
-import getBadgeColors from './getBadgeColors';
+import getTextColors from './getTextColors';
+import { CreateThemeColors } from './types';
 
 const createColors: CreateThemeColors = (options = {}) => {
   const variables = {

packages/react-native-eyecandy-theme/src/colors/getBackgroundColors.ts

@@ -1,5 +1,5 @@
-import { ThemeBackgroundColors, GetThemeColors } from './types';
 import mergeColors from './mergeColors';
+import { ThemeBackgroundColors, GetThemeColors } from './types';
 
 const getButtonColors: GetThemeColors<ThemeBackgroundColors> = options => {
   const { dark, palette } = options;

packages/react-native-eyecandy-theme/src/colors/getBadgeColors.ts

@@ -1,5 +1,6 @@
-import { ThemeDividerColors, GetThemeColors } from './types';
 import mergeColors from './mergeColors';
+import { GetThemeColors } from './types';
+
 import { ThemeBadgeColors } from '.';
 
 const getDividerColors: GetThemeColors<ThemeBadgeColors> = options => {

packages/react-native-eyecandy-theme/src/colors/getButtonColors.ts

@@ -1,5 +1,5 @@
-import { ThemeButtonColors, GetThemeColors } from './types';
 import mergeColors from './mergeColors';
+import { ThemeButtonColors, GetThemeColors } from './types';
 
 const getButtonColors: GetThemeColors<ThemeButtonColors> = options => {
   const { dark, palette } = options;

packages/react-native-eyecandy-theme/src/colors/getDividerColors.ts

@@ -1,5 +1,5 @@
-import { ThemeDividerColors, GetThemeColors } from './types';
 import mergeColors from './mergeColors';
+import { ThemeDividerColors, GetThemeColors } from './types';
 
 const getDividerColors: GetThemeColors<ThemeDividerColors> = options => {
   const { dark, palette } = options;

packages/react-native-eyecandy-theme/src/colors/getInputColors.ts

@@ -1,5 +1,5 @@
-import { ThemeInputColors, GetThemeColors } from './types';
 import mergeColors from './mergeColors';
+import { ThemeInputColors, GetThemeColors } from './types';
 
 const getInputColors: GetThemeColors<ThemeInputColors> = options => {
   const { dark, palette } = options;

packages/react-native-eyecandy-theme/src/colors/getSwitchColors.ts

@@ -1,5 +1,5 @@
-import { ThemeSwitchColors, GetThemeColors } from './types';
 import mergeColors from './mergeColors';
+import { ThemeSwitchColors, GetThemeColors } from './types';
 
 const getSwitchColors: GetThemeColors<ThemeSwitchColors> = options => {
   const { dark, palette } = options;

packages/react-native-eyecandy-theme/src/colors/getTextColors.ts

@@ -1,5 +1,5 @@
-import { ThemeTextColors, GetThemeColors } from './types';
 import mergeColors from './mergeColors';
+import { ThemeTextColors, GetThemeColors } from './types';
 
 const getTextColors: GetThemeColors<ThemeTextColors> = options => {
   const { dark, palette } = options;

packages/react-native-eyecandy-theme/src/colors/mergeColors.ts

@@ -1,4 +1,5 @@
 import deepmerge from 'deepmerge';
+
 import { MergeThemeColorsOptions } from './types';
 
 export default function mergeColors<T>({

packages/react-native-eyecandy-theme/src/colors/types.ts

@@ -1,5 +1,5 @@
-import { DeepPartial } from '../types';
 import { CustomThemePalette, ThemePalette } from '../palette';
+import { DeepPartial } from '../types';
 import { CustomThemeTypography, ThemeTypography } from '../typography';
 
 export type ThemeColors = {
@@ -142,7 +142,13 @@ export type ThemeDividerColors = {
 /**
  * Badge
  */
-export type ThemeBadgeColorChoices = 'default' | 'primary' | 'error' | 'warning' | 'success' | 'greyout';
+export type ThemeBadgeColorChoices =
+  | 'default'
+  | 'primary'
+  | 'error'
+  | 'warning'
+  | 'success'
+  | 'greyout';
 
 export type ThemeBadgeColor = {
   border: string;
@@ -151,4 +157,4 @@ export type ThemeBadgeColor = {
 
 export type ThemeBadgeColors = {
   [key in ThemeBadgeColorChoices]: ThemeBadgeColor;
-};
+};

packages/react-native-eyecandy-theme/src/context/useColors.ts

@@ -1,14 +1,12 @@
-import useTheme from './useTheme';
-
 import { ThemeColors } from '../colors';
 
-export default function useColors(): ThemeColors;
+import useTheme from './useTheme';
 
-export default function useColors<T>(selector: (colors: ThemeColors) => T): T;
+function useColors(): ThemeColors;
 
-export default function useColors<T>(
-  selector?: (colors: ThemeColors) => T,
-): T | ThemeColors {
+function useColors<T>(selector: (colors: ThemeColors) => T): T;
+
+function useColors<T>(selector?: (colors: ThemeColors) => T): T | ThemeColors {
   const theme = useTheme();
 
   if (selector) {
@@ -17,3 +15,5 @@ export default function useColors<T>(
 
   return theme.colors;
 }
+
+export default useColors;

packages/react-native-eyecandy-theme/src/context/usePalette.ts

@@ -1,14 +1,12 @@
-import useTheme from './useTheme';
-
 import { ThemePalette } from '../palette';
 
-export default function usePalette(): ThemePalette;
+import useTheme from './useTheme';
 
-export default function usePalette<T>(
-  selector: (palette: ThemePalette) => T,
-): T;
+function usePalette(): ThemePalette;
 
-export default function usePalette<T>(
+function usePalette<T>(selector: (palette: ThemePalette) => T): T;
+
+function usePalette<T>(
   selector?: (palette: ThemePalette) => T,
 ): T | ThemePalette {
   const theme = useTheme();
@@ -19,3 +17,5 @@ export default function usePalette<T>(
 
   return theme.palette;
 }
+
+export default usePalette;

packages/react-native-eyecandy-theme/src/context/useTheme.ts

@@ -1,13 +1,14 @@
 import { useContext } from 'react';
 
-import { ThemeContext } from './ThemeProvider';
 import { Theme } from '../themes';
 
-export default function useTheme(): Theme;
+import { ThemeContext } from './ThemeProvider';
+
+function useTheme(): Theme;
 
-export default function useTheme<T>(selector: (theme: Theme) => T): T;
+function useTheme<T>(selector: (theme: Theme) => T): T;
 
-export default function useTheme<T>(selector?: (theme: Theme) => T): T | Theme {
+function useTheme<T>(selector?: (theme: Theme) => T): T | Theme {
   const theme = useContext(ThemeContext);
 
   if (selector) {
@@ -16,3 +17,5 @@ export default function useTheme<T>(selector?: (theme: Theme) => T): T | Theme {
 
   return theme;
 }
+
+export default useTheme;