Add linting and tsc build

juancstlm · Sep 5, 2024 · 626ca1d · 626ca1d
1 parent 5a89b00
commit 626ca1d
Show file tree

Hide file tree

Showing 14 changed files with 1,595 additions and 57 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,33 @@
+module.exports = {
+  env: {
+    es6: true,
+    node: true,
+  },
+  parser: "@typescript-eslint/parser", // Use the TypeScript parser
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ["react", "react-native", "@typescript-eslint"],
+  rules: {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "react-native/no-unused-styles": "off",
+    "react-native/split-platform-components": "warn",
+    "react-native/no-inline-styles": "error",
+    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -81,4 +81,5 @@ _coverage/*
 # testing
 /coverage
 
-.history
+.history
+/dist
diff --git a/package.json b/package.json
@@ -3,10 +3,14 @@
   "version": "1.1.1",
   "description": "A react native design system for the Atlas workout app",
   "main": "src/index.ts",
+  "repository": "https://github.com/juancstlm/AtlasDesignSystem",
   "scripts": {
+    "lint": "eslint 'src/**/*.{ts,tsx}' && tsc --noEmit",
     "test": "test",
     "example": "yarn --cwd example",
     "build": "tsc",
+    "patch": "npm version patch",
+    "minor": "npm version minor",
     "watch": "tsc --watch"
   },
   "keywords": [
@@ -16,20 +20,29 @@
   "dependencies": {
     "@react-native-community/datetimepicker": "~8.0.1",
     "moment": "^2.29.0",
-    "react": "~18.2.0",
+    "react": "^18.2.0",
     "react-native": "0.74.3",
     "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "^4.10.9",
     "react-native-vector-icons": "^10.1.0"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=3.5.2",
     "react": ">=17.0.1",
     "react-native": ">=0.64.1",
     "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": ">=4.0.0",
     "react-native-vector-icons": ">=10.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0"
+    "@types/react": "^18.2.0",
+    "@types/react-native-vector-icons": "^6.4.18",
+    "@typescript-eslint/eslint-plugin": "^8.4.0",
+    "@typescript-eslint/parser": "^8.4.0",
+    "eslint": "^8.19.0",
+    "eslint-plugin-react": "^7.35.2",
+    "eslint-plugin-react-native": "^4.1.0",
+    "typescript": "^5.5.4"
   },
   "author": "Juan Castillo",
   "license": "ISC"

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -36,7 +36,7 @@ const getButtonStyle = (
   appearance: ButtonProps["appearance"],
   disabled: boolean
 ) => {
-  let style = [styles.primary];
+  const style = [styles.primary];
 
   if (appearance === "secondary") {
     style.push(styles.secondary);

diff --git a/src/components/DateTimeInput/index.tsx b/src/components/DateTimeInput/index.tsx
@@ -7,7 +7,7 @@ import moment from 'moment';
 
 import Sheet from '../Sheet';
 import Text from '../Text';
-import MenuItemDescription from '../MenuItemDescription';
+import { MenuItemDescription } from '../MenuItemDescription';
 import { useThemedStyle } from '../../hooks';
 import Button from '../Button';
 

diff --git a/src/components/MenuItemDescription/MenuItemDescription.tsx b/src/components/MenuItemDescription/MenuItemDescription.tsx
@@ -4,12 +4,12 @@ import { StyleSheet, View } from 'react-native';
 import Text from '../Text';
 import { useThemedStyle } from '../../hooks';
 
-type MenuItemDescriptionProps = {
+export type MenuItemDescriptionProps = {
   description: string;
 };
 
-const MenuItemDescription: React.FC<MenuItemDescriptionProps> = ({ description }) => {
-  const { styles } = useStyles();
+export const MenuItemDescription = ({ description }: MenuItemDescriptionProps) => {
+  const styles = useStyles().styles;
   return (
     <View style={styles.descriptionContainer}>
       <Text category="p2" contrast="low">
@@ -19,8 +19,6 @@ const MenuItemDescription: React.FC<MenuItemDescriptionProps> = ({ description }
   );
 };
 
-export default React.memo(MenuItemDescription);
-
 const useStyles = () =>
   useThemedStyle(
     useCallback(

diff --git a/src/components/MenuItemDescription/index.ts b/src/components/MenuItemDescription/index.ts
@@ -1,2 +1 @@
-export { default } from './MenuItemDescription';
 export * from './MenuItemDescription';
diff --git a/src/components/NavigationListRow/index.tsx b/src/components/NavigationListRow/index.tsx
@@ -33,7 +33,6 @@ export const NavigationListRow = ({
       <IonIcons
         style={styles.chevronRight}
         size={18}
-        tintColor={styles.chevronRightTint.color}
         name="chevron-forward-outline"
       />
     </TouchableOpacity>

diff --git a/src/components/SelectInput/SelectInput.tsx b/src/components/SelectInput/SelectInput.tsx
@@ -1,20 +1,20 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
 import Animated, {
   Easing,
   interpolate,
   interpolateColor,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
-} from 'react-native-reanimated';
-import IonIcons from 'react-native-vector-icons/Ionicons'
+} from "react-native-reanimated";
+import IonIcons from "react-native-vector-icons/Ionicons";
 
-import Text from '../Text';
-import Sheet from '../Sheet';
-import MenuItemDescription from '../MenuItemDescription';
-import { useThemedStyle } from '../../hooks';
-import { Option } from './types'
+import Text from "../Text";
+import Sheet from "../Sheet";
+import { MenuItemDescription } from "../MenuItemDescription";
+import { useThemedStyle } from "../../hooks";
+import { Option } from "./types";
 
 type Props<T> = {
   caption?: string;
@@ -23,12 +23,17 @@ type Props<T> = {
   onChange: (newValue: Option<T>) => void;
 };
 
-export const SelectInput = <T extends any>({ caption, label, options = [], onChange }: Props<T>) => {
+export function SelectInput<T>({
+  caption,
+  label,
+  options = [],
+  onChange,
+}: Props<T>) {
   // Rest of the component stays the same.
   const { styles, theme } = useStyles();
 
   const values = useMemo(() => {
-    return options.filter(v => v.selected);
+    return options.filter((v) => v.selected);
   }, options);
 
   const [sheetOpen, setSheetOpen] = useState(false);
@@ -44,19 +49,25 @@ export const SelectInput = <T extends any>({ caption, label, options = [], onCha
   }, [sheetOpen]);
 
   useEffect(() => {
-    animatedValue.value = values.length ? 1 : 0
-  }, [values.length])
+    animatedValue.value = values.length ? 1 : 0;
+  }, [values.length]);
 
   const animatedLabelStyles = useAnimatedStyle(() => {
     return {
-      transform: [{ translateY: interpolate(animatedValue.value, [0, 1], [1, -8]) }],
+      transform: [
+        { translateY: interpolate(animatedValue.value, [0, 1], [1, -8]) },
+      ],
       fontSize: interpolate(animatedValue.value, [0, 1], [14, 10]),
     };
   }, []);
 
   const animatedContainerStyles = useAnimatedStyle(() => {
     return {
-      borderColor: interpolateColor(animatedValue.value, [0, 1], ['#ffffff00', theme.colors.border]),
+      borderColor: interpolateColor(
+        animatedValue.value,
+        [0, 1],
+        ["#ffffff00", theme.colors.border]
+      ),
     };
   }, [animatedValue]);
 
@@ -65,11 +76,13 @@ export const SelectInput = <T extends any>({ caption, label, options = [], onCha
       flex: 1,
       transform: [{ translateY: animatedValue.value * 6 }],
     };
-  },  [animatedValue]);
+  }, [animatedValue]);
 
   const animatedChevronStyle = useAnimatedStyle(() => {
     return {
-      transform: [{ rotateX: `${interpolate(rotation.value, [0, 1], [0, 180])}deg` }],
+      transform: [
+        { rotateX: `${interpolate(rotation.value, [0, 1], [0, 180])}deg` },
+      ],
     };
   }, [rotation]);
 
@@ -83,7 +96,9 @@ export const SelectInput = <T extends any>({ caption, label, options = [], onCha
       <TouchableOpacity onPress={() => setSheetOpen(true)}>
         <Animated.View style={[styles.itemContainer, animatedContainerStyles]}>
           <View pointerEvents="none" style={styles.labelContainer}>
-            <Animated.Text style={[styles.label, animatedLabelStyles]}>{label}</Animated.Text>
+            <Animated.Text style={[styles.label, animatedLabelStyles]}>
+              {label}
+            </Animated.Text>
           </View>
           <Animated.View style={animatedValueStyle}>
             {!!values.length && (
@@ -93,30 +108,39 @@ export const SelectInput = <T extends any>({ caption, label, options = [], onCha
             )}
           </Animated.View>
           <Animated.View style={animatedChevronStyle}>
-            <IonIcons style={styles.chevron} name="chevron-down-outline" size={20} />
+            <IonIcons
+              style={styles.chevron}
+              name="chevron-down-outline"
+              size={20}
+            />
           </Animated.View>
         </Animated.View>
       </TouchableOpacity>
       {!!caption && <MenuItemDescription description={caption} />}
       <Sheet open={sheetOpen} setOpen={setSheetOpen} header={label}>
         {options.map((option, i) => (
           <TouchableOpacity
-            style={[styles.selectionItem, option.selected && styles.selectedSelectionItem]}
+            style={[
+              styles.selectionItem,
+              option.selected && styles.selectedSelectionItem,
+            ]}
             key={i}
             onPress={() => handleOptionPress(option)}
           >
-            <Text contrast={option.selected ? 'high' : 'low'}>{option.label}</Text>
+            <Text contrast={option.selected ? "high" : "low"}>
+              {option.label}
+            </Text>
           </TouchableOpacity>
         ))}
       </Sheet>
     </>
   );
-};
+}
 
 const useStyles = () =>
   useThemedStyle(
     useCallback(
-      theme =>
+      (theme) =>
         StyleSheet.create({
           chevron: {
             paddingRight: theme.size.baseSize * 2,
@@ -126,7 +150,7 @@ const useStyles = () =>
             borderColor: theme.colors.primary,
           },
           selectionItem: {
-            alignItems: 'center',
+            alignItems: "center",
             borderWidth: theme.borderWidth,
             borderColor: theme.colors.border,
             marginBottom: theme.size.baseSize * 2,
@@ -140,13 +164,13 @@ const useStyles = () =>
             marginBottom: theme.size.baseSize * 2,
             borderRadius: theme.borderRadius,
             minHeight: theme.size.baseSize * 8,
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
           },
           labelContainer: {
             left: theme.size.baseSize * 2,
-            position: 'absolute',
+            position: "absolute",
           },
           label: {
             color: theme.text,
@@ -164,4 +188,4 @@ const useStyles = () =>
     )
   );
 
-export default SelectInput;
+export default SelectInput;
diff --git a/src/components/SwitchToggle/index.tsx b/src/components/SwitchToggle/index.tsx
@@ -3,7 +3,7 @@ import { StyleProp, Switch, TouchableOpacity, View, ViewStyle } from 'react-nati
 
 
 import Text from '../Text';
-import MenuItemDescription from '../MenuItemDescription';
+import { MenuItemDescription } from '../MenuItemDescription';
 import { useMenuItemStyles } from '../../shared/styles/index';
 
 export type SwitchToggleProps = {

diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
@@ -24,7 +24,7 @@ import Animated, {
 } from "react-native-reanimated";
 
 import Text from "../Text";
-import MenuItemDescription from "../MenuItemDescription";
+import { MenuItemDescription } from "../MenuItemDescription";
 import { useThemedStyle } from "../../hooks";
 
 export type TextInputProps = {
@@ -187,6 +187,8 @@ export const TextInput = forwardRef(
 
 export default TextInput;
 
+TextInput.displayName = 'TextInput'
+
 const useStyles = (disabled: boolean) =>
   useThemedStyle(
     useCallback(

diff --git a/src/components/TitleBar/TitleBar.tsx b/src/components/TitleBar/TitleBar.tsx
@@ -55,7 +55,6 @@ export const TitleBar = ({
           style={styles.backButton}
           name="chevron-back-outline"
           size={20}
-          tintColor={styles.chevronBack.color}
         />
       </Pressable>
     );
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export { default } from './MenuItemDescription';
		export * from './MenuItemDescription';