Release 2.1.0: New icons, extendable props, fix import issue (#59)

* fix: upgrade deps (phosphor 2.1)

* fix: upgrade deps (+ eslint v9)

* fix: upgrade example deps

* feat: init example and showcase

* feat: add testID, fixes #32, fixes #50

* fix: unable to resolve imports for web fixes #58

* fix: cleanup

* fix: circlecli node version

* chore: release 2.1.1

* fix: cleanup bootstrap

* fix: upgrade github ci

* fix: fixes #47 add support for aria label

* fix: fix build + update readme

* fix: fix ci fail because src/index does not exist

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 executors:
   default:
     docker:
-      - image: circleci/node:10
+      - image: circleci/node:22
     working_directory: ~/project
 
 commands:

.github/workflows/ci.yml

@@ -1,20 +1,21 @@
 name: CI
-on:
-  push
+on: push
 
 jobs:
   run:
     runs-on: ubuntu-latest
     timeout-minutes: 360
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - uses: actions/cache@v2
+      - uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: |

.gitignore

@@ -36,10 +36,6 @@ project.xcworkspace
 local.properties
 android.iml
 
-# Cocoapods
-#
-example/ios/Pods
-
 # node.js
 #
 node_modules/

.npmignore

@@ -1,2 +1,3 @@
 /src
 lib/**/*.map
+/example

CONTRIBUTING.md

@@ -92,7 +92,6 @@ yarn release
 
 The `package.json` file contains various scripts for common tasks:
 
-- `yarn bootstrap`: setup project by installing all dependencies and pods.
 - `yarn typescript`: type-check files with TypeScript.
 - `yarn lint`: lint files with ESLint.
 - `yarn test`: run unit tests with Jest.

README.md

@@ -72,6 +72,8 @@ Icon components accept all props that you can pass to a normal SVG element, incl
 - **size?**: `number | string` – Icon height & width. As with standard React elements, this can be a number, or a string with units in `px`, `%`, `em`, `rem`, `pt`, `cm`, `mm`, `in`.
 - **weight?**: `"thin" | "light" | "regular" | "bold" | "fill" | "duotone"` – Icon weight/style. Can also be used, for example, to "toggle" an icon's state: a rating component could use Stars with `weight="regular"` to denote an empty star, and `weight="fill"` to denote a filled star.
 - **mirrored?**: `boolean` – Flip the icon horizontally. Can be useful in RTL languages where normal icon orientation is not appropriate.
+- **title?**: `string` – Accessibility label
+- **titleId?**: `string` – Accessibility label ID
 
 ### Context
 

babel.config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
 };

eslint.config.mjs

@@ -0,0 +1,27 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+
+export default [
+  { files: ['**/*.{js,mjs,cjs,ts}'] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    ignores: [
+      'node_modules/',
+      'lib/',
+      'src/bold/',
+      'src/duotone/',
+      'src/fill/',
+      'src/icons/',
+      'src/light/',
+      'src/regular/',
+      'src/thin/',
+      'src/index.tsx',
+      'example/',
+    ],
+  },
+  eslintPluginPrettierRecommended,
+];

example/App.tsx

@@ -1,4 +1,6 @@
 /* eslint-disable react-native/no-inline-styles */
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+
 import * as React from 'react';
 
 import {
@@ -12,7 +14,7 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import * as IconPack from 'phosphor-react-native';
-const PhosphorLogo = require('./phosphor-mark-tight-yellow.png');
+import PhosphorLogo from './phosphor-mark-tight-yellow.png';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { IconContext, ...Icons } = IconPack;

example/app.json

@@ -27,4 +27,4 @@
       "favicon": "./assets/favicon.png"
     }
   }
-}
+}

example/eslint.config.mjs

@@ -0,0 +1,12 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+
+export default [
+  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
+  { languageOptions: { globals: globals.node } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];

example/metro.config.js

@@ -1,4 +1,5 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
+/* eslint-disable @typescript-eslint/no-require-imports */
 const { getDefaultConfig } = require('expo/metro-config');
 const path = require('path');
 

example/package.json

@@ -6,20 +6,26 @@
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "lint": "eslint ."
   },
   "dependencies": {
-    "expo": "~49.0.5",
-    "expo-status-bar": "~1.6.0",
+    "expo": "^51.0.26",
+    "expo-status-bar": "~1.12.1",
     "phosphor-react-native": "file:..",
     "react": "18.2.0",
-    "react-native": "0.72.3",
-    "react-native-svg": "13.9.0"
+    "react-native": "0.74.5",
+    "react-native-svg": "15.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@types/react": "~18.2.14",
-    "typescript": "^5.1.3"
+    "@babel/core": "^7.24.0",
+    "@eslint/js": "^9.9.0",
+    "@types/react": "~18.2.79",
+    "eslint": "9.x",
+    "eslint-plugin-react": "^7.35.0",
+    "globals": "^15.9.0",
+    "typescript": "~5.3.3",
+    "typescript-eslint": "^8.0.1"
   },
   "private": true
-}
+}