chore: Prettify

Author: niklavsBariss

.eslintignore

@@ -0,0 +1,16 @@
+# Dependencies
+node_modules/
+lib/
+
+# Generated files
+android/build/
+ios/build/
+
+# Assets that shouldn't be linted
+ios/assets/
+android/src/main/assets/
+**/d3*.js
+**/chart.html
+example/ios/react-native-d3-chart-*
+example/android/app/src/main/assets/react-native-d3-chart/
+

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
   presets: ['module:react-native-builder-bob/babel-preset'],
-};
+}

example/babel.config.js

@@ -1,12 +1,14 @@
-const path = require('path');
-const { getConfig } = require('react-native-builder-bob/babel-config');
-const pkg = require('../package.json');
+const path = require('path')
 
-const root = path.resolve(__dirname, '..');
+const { getConfig } = require('react-native-builder-bob/babel-config')
+
+const pkg = require('../package.json')
+
+const root = path.resolve(__dirname, '..')
 
 module.exports = getConfig(
   {
     presets: ['module:@react-native/babel-preset'],
   },
   { root, pkg }
-);
+)

example/index.js

@@ -1,5 +1,6 @@
-import { AppRegistry } from 'react-native';
-import App from './src/App';
-import { name as appName } from './app.json';
+import { AppRegistry } from 'react-native'
 
-AppRegistry.registerComponent(appName, () => App);
+import { name as appName } from './app.json'
+import App from './src/App'
+
+AppRegistry.registerComponent(appName, () => App)

example/jest.config.js

@@ -1,3 +1,3 @@
 module.exports = {
   preset: 'react-native',
-};
+}

example/metro.config.js

@@ -1,9 +1,11 @@
-const path = require('path');
-const { getDefaultConfig } = require('@react-native/metro-config');
-const { getConfig } = require('react-native-builder-bob/metro-config');
-const pkg = require('../package.json');
+const path = require('path')
 
-const root = path.resolve(__dirname, '..');
+const { getDefaultConfig } = require('@react-native/metro-config')
+const { getConfig } = require('react-native-builder-bob/metro-config')
+
+const pkg = require('../package.json')
+
+const root = path.resolve(__dirname, '..')
 
 /**
  * Metro configuration
@@ -15,4 +17,4 @@ module.exports = getConfig(getDefaultConfig(__dirname), {
   root,
   pkg,
   project: __dirname,
-});
+})

example/src/App.tsx

@@ -1,10 +1,11 @@
-import React, { useMemo, useState } from 'react';
-import { View, StyleSheet, TouchableOpacity, Text, Switch } from 'react-native';
-import Chart, { ChartProps, Dataset } from 'react-native-d3-chart';
+import React, { useMemo, useState } from 'react'
+import { View, StyleSheet, TouchableOpacity, Text, Switch } from 'react-native'
 
-type TimeDomainType = 'hour' | 'day' | 'week' | 'month';
+import Chart, { ChartProps, Dataset } from 'react-native-d3-chart'
 
-const TIME_DOMAIN_TYPES: TimeDomainType[] = ['hour', 'day', 'week', 'month'];
+type TimeDomainType = 'hour' | 'day' | 'week' | 'month'
+
+const TIME_DOMAIN_TYPES: TimeDomainType[] = ['hour', 'day', 'week', 'month']
 
 const chartColors: ChartProps['colors'] = {
   background: '#fff',
@@ -13,42 +14,42 @@ const chartColors: ChartProps['colors'] = {
   cursorStroke: '#0ff',
   highlightLabel: '#000',
   highlightTime: '#444',
-};
+}
 
 // Generate data points every minute from a month ago to now
 const generateDataPoints = ({
   startingValue = 400,
   minimum = 0,
   radomFactor = 20,
 } = {}) => {
-  const points = [];
-  const now = Date.now();
-  const monthAgo = now - 30 * 24 * 60 * 60 * 1000; // 30 days ago
-  let value = startingValue;
+  const points = []
+  const now = Date.now()
+  const monthAgo = now - 30 * 24 * 60 * 60 * 1000 // 30 days ago
+  let value = startingValue
 
   for (let timestamp = monthAgo; timestamp <= now; timestamp += 60 * 1000) {
-    const randomVariation = (Math.random() - 0.5) * radomFactor;
-    value += randomVariation;
+    const randomVariation = (Math.random() - 0.5) * radomFactor
+    value += randomVariation
 
     // randomVariation was negative and value went below minimum
     if (value < minimum) {
       // invert direction to keep above minimum
-      value -= 2 * randomVariation;
+      value -= 2 * randomVariation
     }
 
-    points.push({ timestamp, value });
+    points.push({ timestamp, value })
   }
 
-  return points;
-};
+  return points
+}
 
 enum Measurement {
   Red = 'Red',
   Blue = 'Blue',
   Green = 'Green',
   Pink = 'Pink',
 }
-const measurementKeys = Object.values(Measurement);
+const measurementKeys = Object.values(Measurement)
 const measurementsRecords: Record<Measurement, Dataset> = {
   [Measurement.Red]: {
     unit: '°C',
@@ -85,41 +86,41 @@ const measurementsRecords: Record<Measurement, Dataset> = {
     color: '#e0e',
     measurementName: Measurement.Pink,
   },
-};
+}
 
 export default function App() {
-  const [width, setWidth] = useState<number>(0);
-  const height = width * 1.1;
-  const [timeDomainType, setTimeDomainType] = useState<TimeDomainType>('hour');
+  const [width, setWidth] = useState<number>(0)
+  const height = width * 1.1
+  const [timeDomainType, setTimeDomainType] = useState<TimeDomainType>('hour')
   const timeDomain = useMemo(() => {
-    const now = new Date().valueOf();
-    var hours = 1;
+    const now = new Date().valueOf()
+    let hours = 1
     if (timeDomainType !== 'hour') {
-      hours *= 24;
+      hours *= 24
 
       if (timeDomainType === 'week') {
-        hours *= 7;
+        hours *= 7
       }
 
       if (timeDomainType === 'month') {
-        hours *= 30;
+        hours *= 30
       }
     }
 
-    const start = now - hours * 60 * 60 * 1000;
-    const end = now;
+    const start = now - hours * 60 * 60 * 1000
+    const end = now
 
-    return { start, end, type: timeDomainType };
-  }, [timeDomainType]);
+    return { start, end, type: timeDomainType }
+  }, [timeDomainType])
 
   const [enabledMeasurements, setEnabledMeasurements] = useState<Measurement[]>(
     [Measurement.Red]
-  );
+  )
 
   const datasets = useMemo<Dataset[]>(
     () => enabledMeasurements.map((m) => measurementsRecords[m]),
     [enabledMeasurements]
-  );
+  )
 
   return (
     <View
@@ -153,52 +154,39 @@ export default function App() {
       </View>
       {/* Measurement toggles */}
       {measurementKeys.map((measurement) => (
-        <View
-          key={measurement}
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginVertical: 10,
-          }}
-        >
+        <View key={measurement} style={styles.switchContainer}>
           <Switch
             value={enabledMeasurements.includes(measurement)}
             onValueChange={() =>
               setEnabledMeasurements((prev) => {
                 if (!prev.includes(measurement))
                   // enable
-                  return prev.concat(measurement);
+                  return prev.concat(measurement)
 
                 if (prev.length !== 1)
                   // disable
-                  return prev.filter((m) => m !== measurement);
+                  return prev.filter((m) => m !== measurement)
 
                 // only one measurement was enabled, switch to next one
                 const currentIndex = measurementKeys.findIndex(
                   (m) => m === measurement
-                );
-                const nextIndex = (currentIndex + 1) % measurementKeys.length;
-                const nextMeasurement = measurementKeys[nextIndex]!;
+                )
+                const nextIndex = (currentIndex + 1) % measurementKeys.length
+                const nextMeasurement = measurementKeys[nextIndex]!
 
-                return [nextMeasurement];
+                return [nextMeasurement]
               })
             }
           />
-          <Text style={{ marginLeft: 10 }}>{measurement}</Text>
+          <Text style={styles.switchLabel}>{measurement}</Text>
         </View>
       ))}
     </View>
-  );
+  )
 }
 
-const PADDING = 20;
+const PADDING = 20
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#eee',
-  },
   holder: {
     width: '100%',
     flex: 1,
@@ -226,4 +214,10 @@ const styles = StyleSheet.create({
   timeDomainItemText: {
     fontSize: 13,
   },
-});
+  switchContainer: {
+    marginVertical: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  switchLabel: { marginLeft: 10 },
+})

package.json

@@ -72,6 +72,7 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.5.0",
+    "@mitigate-dev/eslint-config-react-native": "^0.0.13",
     "@react-native/eslint-config": "^0.73.1",
     "@release-it/conventional-changelog": "^9.0.2",
     "@types/jest": "^29.5.5",
@@ -82,7 +83,7 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "jest": "^29.7.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.6.2",
     "react": "19.0.0",
     "react-native": "0.78.0",
     "react-native-builder-bob": "^0.37.0",
@@ -138,7 +139,17 @@
     "root": true,
     "extends": [
       "@react-native",
-      "prettier"
+      "prettier",
+      "@mitigate-dev/eslint-config-react-native"
+    ],
+    "ignorePatterns": [
+      "ios/assets/**",
+      "android/src/main/assets/**",
+      "**/d3*.js",
+      "**/chart.html",
+      "src/drawFunction.js",
+      "example/ios/react-native-d3-chart-*",
+      "example/android/app/src/main/assets/react-native-d3-chart/**"
     ],
     "rules": {
       "react/react-in-jsx-scope": "off",
@@ -149,21 +160,19 @@
           "singleQuote": true,
           "tabWidth": 2,
           "trailingComma": "es5",
-          "useTabs": false
+          "useTabs": false,
+          "semi": false
         }
       ]
     }
   },
-  "eslintIgnore": [
-    "node_modules/",
-    "lib/"
-  ],
   "prettier": {
     "quoteProps": "consistent",
     "singleQuote": true,
     "tabWidth": 2,
     "trailingComma": "es5",
-    "useTabs": false
+    "useTabs": false,
+    "semi": false
   },
   "react-native-builder-bob": {
     "source": "src",

react-native.config.js

@@ -11,4 +11,4 @@ module.exports = {
     },
     assets: ['android/src/main/assets', 'ios/assets'], // Note: relative to library root
   },
-};
+}