Setup the React Components project

.gitignore

@@ -3,3 +3,6 @@ node_modules
 .idea
 .vscode
 tmp
+.history
+.yarn/install-state.gz
+packages/circle-demo-webapp/storybook-static

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint && npx lint-staged

.nvmrc

@@ -0,0 +1 @@
+v20

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

package.json

@@ -22,7 +22,8 @@
     "lint": "yarn workspace web3-circle-sdk lint",
     "build": "yarn workspace web3-circle-sdk build",
     "build:docs": "yarn workspace web3-circle-sdk build:docs",
-    "test": "yarn workspace web3-circle-sdk test"
+    "test": "yarn workspace web3-circle-sdk test",
+    "prepare": "husky install"
   },
-  "packageManager": "yarn@1.22.22"
+  "packageManager": "yarn@4.5.3"
 }

packages/circle-demo-webapp/package.json

@@ -45,11 +45,11 @@
     "@types/node": "^22.9.0",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
+    "@typescript-eslint/eslint-plugin": "8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.38.0",
+    "eslint": "8.57.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",

packages/circle-react-components/.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['plugin:react/recommended', 'standard-with-typescript', 'prettier', 'plugin:storybook/recommended'],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: {
+    'react/jsx-key': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'warn',
+    'no-console': 'warn',
+  },
+}

packages/circle-react-components/.github/examples/github-release-please.yml

@@ -0,0 +1,60 @@
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  packages: write
+  pull-requests: write
+
+name: release-please
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Release
+        id: release
+        if: ${{ github.ref_name == 'main' }}
+        uses: google-github-actions/release-please-action@v3
+        with:
+          release-type: node
+          default-branch: main
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Checkout
+        uses: actions/checkout@v3
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        if: ${{ steps.release.outputs.releases_created }}
+        with:
+          version: 8
+
+      # Setup .npmrc file to publish to npm
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          registry-url: 'https://npm.pkg.github.com'
+          cache: 'pnpm'
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: CI
+        run: pnpm install --frozen-lockfile
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Build
+        run: pnpm build:lib
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Prepublish
+        run: pnpm ci-prepublish
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Publish
+        run: pnpm publish
+        if: ${{ steps.release.outputs.releases_created }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

packages/circle-react-components/.github/workflows/release-please.yml

@@ -0,0 +1,59 @@
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
+
+name: release-please
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Release
+        id: release
+        if: ${{ github.ref_name == 'main' }}
+        uses: google-github-actions/release-please-action@v3
+        with:
+          release-type: node
+          default-branch: main
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Checkout
+        uses: actions/checkout@v3
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        if: ${{ steps.release.outputs.releases_created }}
+        with:
+          version: 8
+
+      # Setup .npmrc file to publish to npm
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'pnpm'
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: CI
+        run: pnpm install --frozen-lockfile
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Build
+        run: pnpm build:lib
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Prepublish
+        run: pnpm ci-prepublish
+        if: ${{ steps.release.outputs.releases_created }}
+
+      - name: Publish
+        run: pnpm publish
+        if: ${{ steps.release.outputs.releases_created }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

packages/circle-react-components/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Storybook
+storybook-static
+
+# Testing
+coverage

packages/circle-react-components/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 120,
+  "endOfLine": "auto"
+}

packages/circle-react-components/.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling-webpack',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: '.storybook/vite.config.ts',
+      },
+    },
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+export default config

packages/circle-react-components/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react'
+import '../src/lib/tailwind/theme.css'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+}
+
+export default preview

packages/circle-react-components/.storybook/vite.config.ts

@@ -0,0 +1,17 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vitest/config'
+import tailwindcss from 'tailwindcss'
+import { UserConfigExport } from 'vite'
+
+const app = async (): Promise<UserConfigExport> => {
+  return defineConfig({
+    plugins: [react()],
+    css: {
+      postcss: {
+        plugins: [tailwindcss],
+      },
+    },
+  })
+}
+// https://vitejs.dev/config/
+export default app

packages/circle-react-components/CHANGELOG.md

@@ -0,0 +1 @@
+# Changelog

packages/circle-react-components/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) [2024] [ChainSafe]
+Copyright (c) [2023] [Ignacio Andrés Miranda Figueroa] (https://github.com/IgnacioNMiranda/vite-component-library-template)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/circle-react-components/MAINTAINERS_NOTES.md

@@ -0,0 +1,41 @@
+# Notes for maintainers
+
+Built and tested with node v20.
+
+## Features
+
+- ⚛️ [React 18](https://reactjs.org/)
+- 📚 [Storybook 7](https://storybook.js.org/) - Components preview
+- 🖌️ [Tailwind CSS 3](https://tailwindcss.com/)
+- ⏩ [Vite](https://vitejs.dev/) - Run and build the project blazingly fast!
+- ⚡ [Vitest](https://vitest.dev/) - Components Unit Testing
+- 📐 [ESLint](https://eslint.org/) & [Prettier](https://prettier.io/) - Formatting and Linting
+- 🌟 [Typescript](https://www.typescriptlang.org/)
+- 🐶 [Husky](https://typicode.github.io/husky) & [Lint Staged](https://www.npmjs.com/package/lint-staged) - Pre-commit Hooks
+- ⏰ [Release Please](https://github.com/googleapis/release-please) — Generate the changelog with the release-please workflow
+- 👷 [Github Actions](https://github.com/features/actions) — Releasing versions to NPM
+- Initial components setup using [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)
+
+## Getting Started
+
+1. Clone your repo
+2. Install dependencies with `yarn`
+3. Run `yarn prepare` command to setup [Husky](https://typicode.github.io/husky) pre-commit hooks.
+4. Run `yarn build` to build.
+5. Check the scripts at [this-folder]/package.json like `yarn dev` to run the `storybook`.
+
+## Main Scripts
+
+Always prepending `yarn`:
+
+- `dev`: Bootstrap the Storybook preview with Hot Reload.
+- `build:storybook`: Builds the static storybook project.
+- `build`: Builds the component library into the **dist** folder.
+- `lint:fix`: Applies linting based on the rules defined in **.eslintrc.js**.
+- `format:prettier`: Formats files using the prettier rules defined in **.prettierrc**.
+- `test`: Runs testing using watch mode.
+- `test:cov`: Runs testing displaying a coverage report.
+
+## Used template
+
+This template was created based on: [here](https://igna.hashnode.dev/vite-react-typescript-component-library-template-setup-explanation).

packages/circle-react-components/README.md

@@ -0,0 +1,7 @@
+# ⚛️⚡ Web3 Circle React Components
+
+A project containing the Web3 Circle React Components.
+
+---
+
+Note: You are welcome to contribute. And if you want to create a Pull Request check the file ./MAINTAINERS_NOTES.md.