fix: linting and d3 additions

.eslintrc.js

@@ -1,33 +1,22 @@
 module.exports = {
   root: true,
-  extends: ['@react-native-community', 'prettier'],
-  ignorePatterns: ['build'],
+  extends: ["universe", "universe/native", "universe/web", "prettier"],
+  env: {
+    node: true,
+  },
   overrides: [
     {
-      files: ['*.ts', '*.tsx', '*.d.ts'],
+      files: ["*.ts", "*.tsx", "*.d.ts"],
       parserOptions: {
-        project: './tsconfig.json',
+        project: "./tsconfig.json",
         tsconfigRootDir: __dirname,
-        sourceType: 'module',
+        sourceType: "module",
       },
     },
   ],
-  env: {
-    node: true,
-  },
   rules: {
-    'prettier/prettier': [
-      'error',
-      {
-        quoteProps: 'consistent',
-        singleQuote: true,
-        tabWidth: 2,
-        trailingComma: 'es5',
-        useTabs: false,
-        printWidth: 100,
-      },
-    ],
-    'react/jsx-uses-react': 'off',
-    'react/react-in-jsx-scope': 'off',
+    "prettier/prettier": ["error", {}, { usePrettierrc: true }],
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
   },
 };

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "quoteProps": "consistent",
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "printWidth": 100
+}

example/.eslintrc.js

@@ -1,29 +1,22 @@
 module.exports = {
   root: true,
-  extends: ['@react-native-community', 'prettier'],
+  extends: ["universe", "universe/native", "universe/web", "prettier"],
+  env: {
+    node: true,
+  },
   overrides: [
     {
-      files: ['*.ts', '*.tsx', '*.d.ts'],
+      files: ["*.ts", "*.tsx", "*.d.ts"],
       parserOptions: {
-        project: './tsconfig.json',
+        project: "./tsconfig.json",
         tsconfigRootDir: __dirname,
-        sourceType: 'module',
+        sourceType: "module",
       },
     },
   ],
   rules: {
-    'prettier/prettier': [
-      'error',
-      {
-        quoteProps: 'consistent',
-        singleQuote: true,
-        tabWidth: 2,
-        trailingComma: 'es5',
-        useTabs: false,
-        printWidth: 100,
-      },
-    ],
-    'react/jsx-uses-react': 'off',
-    'react/react-in-jsx-scope': 'off',
+    "prettier/prettier": ["error", {}, { usePrettierrc: true }],
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
   },
 };

example/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "quoteProps": "consistent",
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "printWidth": 100
+}

example/app/_layout.tsx

@@ -1,3 +1,3 @@
-import { Slot } from 'expo-router';
+import { Slot } from "expo-router";
 
 export default Slot;

example/app/index.tsx

@@ -1,12 +1,10 @@
+import { LineChart } from "@codeherence/react-native-graph";
 import { useMemo } from "react";
 import { View, useWindowDimensions } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-import { LineChart } from "@codeherence/react-native-graph";
 import { Banner } from "../components/Banner";
 
-const GRAPH_HEIGHT_PROPORTION = 0.5;
-
 export default () => {
   const { top, bottom } = useSafeAreaInsets();
   const { width, height } = useWindowDimensions();
@@ -20,15 +18,14 @@ export default () => {
       style={{
         paddingTop: top,
         paddingBottom: bottom,
-        position: "relative",
         justifyContent: "center",
         alignItems: "center",
       }}
     >
       <LineChart
         points={data}
         width={width}
-        height={height * GRAPH_HEIGHT_PROPORTION}
+        height={height - (top + bottom)}
         BannerComponent={Banner}
       />
     </View>

example/babel.config.js

@@ -1,14 +1,8 @@
-const path = require("path");
-const pak = require("../package.json");
-
 module.exports = function (api) {
   api.cache(true);
 
   return {
     presets: ["babel-preset-expo"],
-    plugins: [
-      "@babel/plugin-proposal-export-namespace-from",
-      "react-native-reanimated/plugin",
-    ],
+    plugins: ["@babel/plugin-proposal-export-namespace-from", "react-native-reanimated/plugin"],
   };
 };

example/components/Banner.tsx

@@ -3,7 +3,7 @@ import { Text, useFont } from "@shopify/react-native-skia";
 
 const robotoMedium = require("../public/fonts/Roboto/Roboto-Medium.ttf");
 
-export const Banner: React.FC<BannerComponentProps> = (props) => {
+export const Banner: React.FC<BannerComponentProps> = ({ text }) => {
   const font = useFont(robotoMedium, 24);
-  return <Text x={0} y={0} font={font} text={props.text} />;
+  return <Text x={0} y={0} font={font} text={text} />;
 };

example/declarations.d.ts

@@ -1,6 +1,6 @@
-declare module '*.svg' {
-  import React from 'react';
-  import { SvgProps } from 'react-native-svg';
+declare module "*.svg" {
+  import React from "react";
+  import { SvgProps } from "react-native-svg";
   const content: React.FC<SvgProps>;
   export default content;
 }

example/package.json

@@ -36,6 +36,11 @@
     "@expo/webpack-config": "~19.0.1",
     "babel-loader": "^8.1.0",
     "babel-plugin-module-resolver": "^4.1.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-universe": "^12.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "prettier": "^3.2.5",
     "react-native-svg-transformer": "^1.0.0"
   },
   "private": true

example/path-fs-canvaskit-postinstall.js

@@ -1,8 +1,8 @@
 // To be added in package.json "postinstall": "(...) && node path-fs-canvaskit-postinstall.js"
-const fs = require('fs');
-const path = require('path');
+const fs = require("fs");
+const path = require("path");
 
-const packageJsonPath = path.join(__dirname, 'node_modules', 'canvaskit-wasm', 'package.json');
+const packageJsonPath = path.join(__dirname, "node_modules", "canvaskit-wasm", "package.json");
 const packageJson = require(packageJsonPath);
 
 packageJson.browser = {