Chore/4391/devtooling

.commitlintrc.js

@@ -0,0 +1 @@
+module.exports = require('@commitlint/config-conventional');

.eslintignore

@@ -0,0 +1,7 @@
+!.*
+node_modules/
+
+pnpm-lock.yaml
+.commitlintrc.js
+.prettierrc.js
+.eslintrc.js

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["@leather-wallet/eslint-config"]
+}

.github/actions/provision/action.yml

@@ -0,0 +1,17 @@
+name: Provision
+description: Set up job with tasks needed to run a code check
+runs:
+  using: 'composite'
+  steps:
+    - name: Install pnpm
+      uses: pnpm/action-setup@v2
+      with:
+        version: 8
+    - name: Set up node
+      uses: actions/setup-node@v3
+      with:
+        node-version: 20
+        cache: 'pnpm'
+    - name: install dependencies
+      run: pnpm install
+      shell: bash

.github/workflows/code-checks.yml

@@ -0,0 +1,42 @@
+name: Code checks
+
+on:
+  merge_group:
+  push:
+    branches:
+      - '**'
+
+jobs:
+  lint-prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/provision
+      - name: Lint Prettier
+        run: pnpm lint:prettier
+
+  lint-eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/provision
+      - name: Lint Eslint
+        run: pnpm lint:eslint
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/provision
+      - name: Lint Types
+        run: pnpm lint:types
+
+  lint-commit:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Lint commit message
+        uses: wagoid/commitlint-github-action@v4

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint-staged --quiet

.lintstagedrc.mjs

@@ -0,0 +1,4 @@
+export default {
+  '*.{mjs,js,ts,tsx,json,yaml}': 'pnpm lint:prettier',
+  '*.{mjs,js,ts,tsx}': 'pnpm lint:eslint',
+};

.npmrc

@@ -0,0 +1,2 @@
+  engine-strict = true
+  auto-install-peers = true

.prettierignore

@@ -0,0 +1,2 @@
+node_modules/
+pnpm-lock.yaml

.prettierrc.js

@@ -0,0 +1,5 @@
+const defaultConfig = require('@leather-wallet/prettier-config');
+
+module.exports = {
+  ...defaultConfig,
+};

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Leather Wallet LLC [a subsidiary of Nassau Machines]
+
+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.

README.md

@@ -1,61 +1,44 @@
-# Sample repo for Leather monorepo setup
-
-Here we review a few monorepo approaches and how they may fit into our codebase
-
-# Motivation
-
-As a largely single-product company, with a vision for being a multi-product company, we need a way to share code between our various projects. Consider how, when we begin work on the mobile wallet, much code needs to be refactored out of the Web Extension, into an environment-agnostic home. For use elsewhere, such as a React Native or Electron app.
-
-## Requirements
-
-- Well organised monorepo
-- Automated package releases
-    - Publishing to npm
-        - [with NX](https://nx.dev/concepts/more-concepts/buildable-and-publishable-libraries)
-- Enables developers to easily create new packages
-- Easy to work with in local development
-- Easy to set up package-specific CI jobs
-- monorepo vs. one big npm package?
-
-
-Ideally we want to:
-- not change the existing extension too much
-- facilitate sharing of code between platforms - web, native, desktop
-- re-use our new panda + radix system as much as possible
-- extract shared library code 
-- allow independant publishing of packages
-- solution must work with panda css
-- storybook for UI lib demos
-- storybook to replace test-app also? 
-
-## Basic Leather monorepo architecture
-
-
-```md
-leather-mono
-├─ apps
-│  ├─ extension
-│  ├─ mobile
-│  ├─ desktop
-│  ├─ storybook <-- replaces test-app, place to view UI components with context + tests
-│  ├─ website <-- maybe we can get rid of Framer and just host our site ourself, keeping code here?
-├─ docs -> should we host out dev docs here?
-├─ packages
-│  ├─ api <-- leather API / wrapper interface to other libs: here / under apps,
-│  ├─ tsconfig
-│  ├─ lib
-│  ├─ utils <-- shared utils,
-│  ├─ ui <-- using definePreset(), contains the theme base (tokens.colors, semantic tokens, etc)
-│  └─ button <-- consuming the preset, provides a button recipe (in a buttonPreset) + a ShadcnButton component
-│  └─ some-component <-- consuming the preset, provides a component using internal `css` calls, ships a panda.json extract result
-```
-
-
-## Items for further consideration
-
-- migration from `yarn` to [`pnpm`](https://pnpm.io/)
-- upgrading from `webpack` to [`esbuild`](https://esbuild.github.io/)
-- Can use Nx + Lerna or just Nx
-- for HTML Ordinals, do we want to use SSR so we can show them? Maybe we can have a library/package using Next.js just to render those that gets imported?
-- how do we manage our documentation? could we host that here also? 
-- do we still need Framer? It helped us release fast but now we could manage the site as a monorepo app
+# Monorepo Setup
+
+The purpose of this configuration is to ensure strict coding standards and facilitate code sharing. The monorepo uses `pnpm workspaces` at its core and provides several shared packages to be found under the `packages` folder.
+
+### Monorepo setup
+
+- [Architecture](docs/core/ARCHITECTURE.md)
+- [Monorepo](docs/core/MONOREPO.md)
+
+Coding standards are enforced through the use of
+
+- `eslint`
+- `prettier`
+- `typescripts`
+
+Shared configuration files for these tools exist in `packages` and the same base configurations are used in the monorepo itself.
+
+Some other configured tools are:
+
+- [Husky](docs/tools/HUSKY.md): run code checks and enforce standards locally as a first prevention
+- [LintStaged](docs/tools/LINTSTAGED.md): only run checks on staged files
+- [CommitLint](docs/tools/COMMITLINT.md) enforce [Conventional Commit](https://www.conventionalcommits.org/en/v1.0.0/) standard
+
+### Monorepo packages
+
+The current packages are listed below
+
+- [ESLint](packages/eslint-config/README.md)
+- [Prettier](packages/prettier-config/README.md)
+- [TSconfig](packages/tsconfig-config/README.md)
+
+### Git Actions
+
+Basic CI actions to run code quality checks have been setup in
+
+- [Code checks](.github/workflows/code-checks.yml)
+
+### Documentation
+
+Documentation has been provided from the outset and can be found in `docs/tools/` along with a [TEMPLATE.md](docs/core/TEMPLATE.md) file
+
+## License
+
+[MIT](LICENSE) © [Leather Wallet LLC](https://github.com/leather-wallet/mono)

docs/core/ARCHITECTURE.md

@@ -0,0 +1,54 @@
+# Leather monorepo setup
+
+We reviewed a few monorepo approaches and how they may fit into our codebase and decided upon starting with `pnpm workspaces` before then adding `Nx` if needed
+
+# Motivation
+
+As a largely single-product company, with a vision for being a multi-product company, we need a way to share code between our various projects. We also need to ensure high code standards and have the best developer experience we can
+
+## Requirements
+
+- Well organised monorepo
+- Automated package releases
+  - Publishing to npm
+    - [with NX](https://nx.dev/concepts/more-concepts/buildable-and-publishable-libraries)
+- Enable developers to easily create new packages
+- Easy to work with in local development
+- Easy to set up package-specific CI jobs
+
+## Basic Leather monorepo architecture
+
+This is a basic blueprint of the monorepo. We will begin with a package based monorepo and then decide whether to also host `apps` here too
+
+```md
+leather-mono
+├─ apps
+│ ├─ extension
+│ ├─ mobile
+│ ├─ desktop
+│ ├─ storybook <-- replaces test-app, place to view UI components with context + tests
+├─ docs
+├─ packages
+│ ├─ api <-- leather API / wrapper interface to other libs: here / under apps,
+│ ├─ eslint-config
+│ ├─ prettier-config
+│ ├─ tsconfig-config
+│ ├─ lib
+│ ├─ utils <-- shared utils,
+│ ├─ ui <-- using definePreset(), contains the theme base (tokens.colors, semantic tokens, etc)
+│ │ └─ button <-- consuming the preset, provides a button recipe (in a buttonPreset)
+│ │ └─ some-component <-- consuming the preset, provides a component using internal `css` calls, ships a panda.json extract result
+```
+
+## Items for further consideration
+
+- migration from `yarn` to [`pnpm`](https://pnpm.io/)
+- upgrading from `webpack` to [`esbuild`](https://esbuild.github.io/)
+
+# Useful references
+
+- https://medium.com/reactbrasil/reuse-your-eslint-prettier-config-in-a-monorepo-with-lerna-54c1800cacdc
+- https://github.com/muravjev/configs/
+- https://www.raulmelo.me/en/blog/replacing-lerna-and-yarn-with-pnpm-workspaces
+- https://medium.com/@guysenpai89/nx-monorepo-publish-your-libraries-to-github-packages-with-github-actions-semantic-release-fa9822467b24
+- https://www.javierbrea.com/blog/pnpm-nx-monorepo-01/

docs/core/MONOREPO.md

@@ -0,0 +1,71 @@
+# Package configuration
+
+The purpose of this monorepo is to host various **[npm packages ↗](https://docs.npmjs.com/about-packages-and-modules)** to facilitate code sharing and at high standards. At it's core it uses `pnpm workspaces` to manage the monorepo
+
+## Contents
+
+- [Setup](#setup)
+- [License](#license)
+
+## Setup
+
+- Create `package.json` file:
+
+  ```jsonc
+  // package.json
+
+  {
+    // Package info
+
+    "name": "eather-mono",
+    "description": "...",
+    "author": "...",
+    "license": "MIT",
+
+    // Common scripts
+
+    "scripts": {
+      "install:clean": "rm -rf \"**/node_modules\" && pnpm -r clean",
+      "install:fresh": "pnpm install:clean && pnpm i",
+      "install:nuke": "rm -rf pnpm-lock.yaml && pnpm install:fresh"
+    },
+
+    // Only allow pnpm as package manager
+
+    "engines": {
+      "node": ">=14.16.0",
+      "pnpm": ">=7.10.0",
+      "npm": "please-use-pnpm",
+      "yarn": "please-use-pnpm"
+    },
+    "packageManager": "[email protected]"
+  }
+  ```
+
+- Add npm configuration file:
+
+  ```yaml
+  # .npmrc
+
+  engine-strict = true
+  auto-install-peers = true
+  ```
+
+- Add pnpm workspace file:
+
+  ```yaml
+  # pnpm-workspace.yaml
+
+  packages:
+    - 'packages/*'
+  ```
+
+## License
+
+[MIT](../../LICENSE) © [Leather Wallet LLC](https://github.com/leather-wallet/mono)
+
+---
+
+[⬅ Back](../../README.md)
+
+---

docs/core/TEMPLATE.md

@@ -0,0 +1,18 @@
+# TEMPLATE
+
+## Contents
+
+- [Setup](#setup)
+- [License](#license)
+
+## Setup
+
+## License
+
+[MIT](../../LICENSE) © [Leather Wallet LLC](https://github.com/leather-wallet/mono)
+
+---
+
+[⬅ Back](../../README.md)
+
+---