chore: fix eslint

algorandfoundation · Mar 15, 2024 · a16d502 · a16d502
1 parent 6d817b3
commit a16d502
Show file tree

Hide file tree

Showing 22 changed files with 1,644 additions and 100 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,19 @@
+# don't lint the linter config
+.eslintrc.cjs
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+build
+# don't lint nyc coverage output
+coverage
+# don't lint generated types
+**/generated
+# don't lint ide files
+.idea
+.vscode
+scripts
+temp
+
+src/features/common/components/svg
+src/features/common/components/icons
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: ['@makerx/eslint-config', 'plugin:react-hooks/recommended'],
+  extends: ['@makerx/eslint-config', 'plugin:react-hooks/recommended', 'plugin:tailwindcss/recommended'],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],

diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,5 @@
+build/
+public/_static
+/app/tailwind.css
+package-lock.json
+node_modules/
diff --git a/.prettierrc b/.prettierrc
@@ -4,7 +4,5 @@
   "trailingComma": "es5",
   "printWidth": 140,
   "endOfLine": "lf",
-  "plugins": [
-    "prettier-plugin-tailwindcss"
-  ]
+  "plugins": []
 }
diff --git a/.svgrrc.cjs b/.svgrrc.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  svgoConfig: {
+    plugins: [
+    ],
+  },
+}
diff --git a/README.md b/README.md
@@ -19,3 +19,14 @@ npm run tauri dev
 ```
 
 Note: You should use VSCode and install recommended extensions for the best dev experience.
+
+## SVG Icons
+
+To add new svg icons, add them to the `~/src/assets/icons` directory with an appropriate kebab case name, then run the npm task `build:1-icons`. This will create a react component for each svg file found. The components will be created under `~/features/common/components/icons/**`.
+
+There is also a folder for svgs `~/src/assets/svg` which will generate components under `~/features/common/components/svg/**` when running the task `build:2-svg`. The difference is that icons are optimised to display at `1em x 1em`, whereas svgs will display at their originally defined size.
+
+Depending on where you have sourced the svg, you may wish to make a few tweaks to the svg file in order to make using the icon a bit easier:
+
+- Where appropriate, replace specific colours in the svg (stroke/fill) with 'currentColor'. This will cause the icon to be rendered in the current font colour at its position in the DOM, meaning you can change the colour of the icon using the css `color: <whatever you want>`
+- Tweak the viewbox so it just fits the subject, and with the subject centered vertically and horizontally. Since svgs are scalable, it doesn't matter what the actual view box are dimensions are - but if you have one icon with 50% padding around the subject and another with 10% padding - the latter will display a lot larger when rendered making it more difficult to style consistently. View boxes can contain negative values so feel free to use that to help center the subject.
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <link as="font" crossorigin href="/fonts/Poppins-Regular.ttf" rel="preload" type="font/ttf" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Algorand Studio</title>
   </head>
   <body>
     <div id="root"></div>