feat: move to lerna

Author: ajhenry

.markdownlint.jsonc

@@ -0,0 +1,8 @@
+{
+  "default": true,
+  "MD007": { "indent": 4 },
+  "MD013": false,
+  "MD033": { "allowed_elements": ["code", "kbd", "pre", "sub", "div", "img"] },
+  "MD041": false,
+  "no-hard-tabs": false
+}

README.md

@@ -21,4 +21,4 @@ module.exports = {
       ],
     ],
   },
-};
+}

commitlint.config.js

@@ -0,0 +1,6 @@
+{
+  "packages": ["packages/*"],
+  "useNx": false,
+  "version": "0.0.1",
+  "npmClient": "yarn"
+}

jest.setup.js

@@ -1,95 +1,27 @@
 {
-  "name": "website",
-  "version": "0.0.1",
+  "name": "prettyavatars",
   "private": true,
-  "scripts": {
-    "dev": "concurrently \"next dev\" \"firebase emulators:start --only firestore,auth\"",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "lint:fix": "eslint src --fix && yarn format",
-    "lint:strict": "eslint --max-warnings=0 src",
-    "typecheck": "tsc --noEmit --incremental false",
-    "test:watch": "jest --watch",
-    "test": "jest",
-    "format": "prettier -w .",
-    "format:check": "prettier -c .",
-    "postbuild": "next-sitemap --config next-sitemap.config.js",
-    "prepare": "husky install"
-  },
-  "dependencies": {
-    "@faker-js/faker": "^7.6.0",
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@headlessui/react": "^1.7.7",
-    "@kodingdotninja/use-tailwind-breakpoint": "^0.0.5",
-    "@next-auth/firebase-adapter": "^1.0.3",
-    "@next-auth/upstash-redis-adapter": "^3.0.3",
-    "@tanstack/react-query": "^4.22.0",
-    "@trpc/client": "^10.8.1",
-    "@trpc/next": "^10.8.1",
-    "@trpc/react-query": "^10.8.1",
-    "@trpc/server": "^10.8.1",
-    "@types/request-ip": "^0.0.37",
-    "@upstash/ratelimit": "^0.1.5",
-    "@upstash/redis": "^1.19.1",
-    "clsx": "^1.2.1",
-    "color": "^4.2.3",
-    "firebase": "^9.15.0",
-    "firebase-admin": "^11.4.1",
-    "next": "^13.1.1",
-    "next-auth": "^4.19.0",
-    "next-dark-mode": "4.0.0-beta.1",
-    "nice-color-palettes": "^3.0.0",
-    "react": "^18.2.0",
-    "react-code-blocks": "^0.0.9-0",
-    "react-color": "^2.19.3",
-    "react-dom": "^18.2.0",
-    "react-html-parser": "^2.0.2",
-    "react-icons": "^4.7.1",
-    "request-ip": "^3.3.0",
-    "tailwind-merge": "^1.8.1",
-    "text-to-svg": "^3.1.5",
-    "use-dark-mode": "^2.3.1",
-    "use-persisted-state": "^0.3.3",
-    "usehooks-ts": "^2.9.1",
-    "zod": "^3.20.2"
-  },
   "devDependencies": {
     "@commitlint/cli": "^16.3.0",
     "@commitlint/config-conventional": "^16.2.4",
-    "@svgr/webpack": "^6.5.1",
-    "@tailwindcss/forms": "^0.5.3",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@types/color": "^3.0.3",
-    "@types/react": "^18.0.26",
-    "@types/react-color": "^3.0.6",
-    "@types/react-html-parser": "^2.0.2",
-    "@types/text-to-svg": "^3.1.1",
-    "@types/use-persisted-state": "^0.3.1",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
-    "autoprefixer": "^10.4.13",
-    "concurrently": "^7.6.0",
     "eslint": "^8.31.0",
     "eslint-config-next": "^13.1.1",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
-    "firebase-tools": "^11.21.0",
     "husky": "^7.0.4",
-    "jest": "^27.5.1",
-    "lint-staged": "^12.5.0",
-    "next-router-mock": "^0.7.5",
-    "next-sitemap": "^2.5.28",
-    "postcss": "^8.4.21",
+    "lerna": "^5.1.6",
     "prettier": "^2.8.1",
-    "prettier-plugin-tailwindcss": "^0.1.13",
-    "tailwindcss": "^3.2.4",
     "typescript": "^4.9.4"
   },
+  "scripts": {
+    "dev": "lerna run dev",
+    "build": "lerna run build",
+    "test": "lerna run test",
+    "prepare": "husky install"
+  },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
       "eslint --fix",

lerna.json

@@ -0,0 +1,73 @@
+<div align="center">
+
+# Pretty Avatars
+
+A collection of pretty default avatars for your next project
+
+![boring avatars preview](packages/prettyavatars/public/preview.png)
+
+</div>
+
+## Install
+
+```sh
+npm install prettyavatars
+```
+
+```sh
+yarn add prettyavatars
+```
+
+## Usage
+
+<!-- prettier-ignore -->
+```tsx
+import Avatar from 'prettyavatars'
+
+<Avatar
+  variant='marble'
+  name='Maria Mitchell'
+  size={40}
+  colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
+/>
+```
+
+Or with tree-shaking:
+
+<!-- prettier-ignore -->
+```tsx
+import LetterAvatar from 'prettyavatars/letter'
+
+<LetterAvatar
+  name='Maria Mitchell'
+  size={40}
+  colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
+/>
+```
+
+### Props
+
+| Prop        | Type                                                                   |
+| ----------- | ---------------------------------------------------------------------- |
+| **variant** | oneOf: `letter`, `marble`, `beam`, `pixel`,`sunset`, `ring`, `bauhaus` |
+| **name**    | string                                                                 |
+| size        | number or string, `40px` (default)                                     |
+| square      | boolean: `false` (default)                                             |
+| title       | boolean: `false` (default)                                             |
+| colors      | array of colors                                                        |
+
+<sub>\* bold means required</sub>
+
+## CDN Service
+
+If you wish to use pretty avatars from a CDN, you can use the [Pretty Avatars API](https://prettyavatars.com/docs). For more information and how to customize your avatars, [check out the docs](https://prettyavatars.com/docs)
+
+To choose a random avatar from a specific user and a color palette, the format follows:
+
+<div align="center">
+<img src="https://prettyavatars.com/api/letter/120/Johnny%20Appleseed/264653,2a9d8f,e9c46a,f4a261,e76f51" alt="Johnny Appleseed" width="120" height="120" />
+</div>
+
+```url
+https://prettyavatars.com/api/letter/120/Johnny%20Appleseed/264653,2a9d8f,e9c46a,f4a261,e76f51
+```

next-env.d.ts

@@ -1,16 +1,16 @@
 {
-  "name": "pretty-avatars",
-  "description": "Pretty avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.",
+  "name": "prettyavatars",
+  "description": "A collection of pretty default avatars to use in your next project",
   "homepage": "https://prettyavatars.com/",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/ajhenry/pretty-avatars"
+    "url": "https://github.com/ajhenry/prettyavatars"
   },
   "bugs": {
-    "url": "https://github.com/ajhenry/pretty-avatars/issues"
+    "url": "https://github.com/ajhenry/prettyavatars/issues"
   },
   "keywords": [
     "avatar",
@@ -22,16 +22,17 @@
   ],
   "scripts": {
     "dev": "tsc --watch",
-    "start": "node scripts/start.js",
-    "build": "tsc -b .",
-    "demo": "node scripts/demo.js",
-    "test": "node scripts/test.js"
+    "build": "tsc -b ."
   },
-  "files": ["build/*", "index.d.ts"],
+  "files": [
+    "build/*",
+    "index.d.ts"
+  ],
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "7.6.0",
     "@svgr/webpack": "4.3.2",
+    "@types/color": "^3.0.3",
     "@types/react-html-parser": "^2.0.2",
     "@types/text-to-svg": "^3.1.1",
     "@typescript-eslint/eslint-plugin": "^2.2.0",
@@ -93,64 +94,7 @@
     "webpack-manifest-plugin": "2.1.1",
     "workbox-webpack-plugin": "4.3.1"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [">0.2%", "not dead", "not op_mini all"],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "jest": {
-    "roots": ["<rootDir>/src"],
-    "collectCoverageFrom": ["src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts"],
-    "setupFiles": ["react-app-polyfill/jsdom"],
-    "setupFilesAfterEnv": [],
-    "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
-      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
-    ],
-    "testEnvironment": "jest-environment-jsdom-fourteen",
-    "transform": {
-      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
-      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
-    },
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
-      "^.+\\.module\\.(css|sass|scss)$"
-    ],
-    "modulePaths": [],
-    "moduleNameMapper": {
-      "^react-native$": "react-native-web",
-      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
-    },
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "web.ts",
-      "ts",
-      "web.tsx",
-      "tsx",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node"
-    ],
-    "watchPlugins": [
-      "jest-watch-typeahead/filename",
-      "jest-watch-typeahead/testname"
-    ]
-  },
-  "babel": {
-    "presets": ["react-app"]
-  },
   "dependencies": {
-    "color-contrast-checker": "^2.1.0",
-    "opentype.js": "^1.3.4",
     "react-html-parser": "^2.0.2",
     "text-to-svg": "^3.1.5"
   }

package.json

@@ -21,7 +21,7 @@ const deprecatedVariants: Record<string, string> = {
   abstract: 'bauhaus',
 }
 
-export type Variant = typeof variants[number]
+export type Variant = (typeof variants)[number]
 
 export interface AvatarProps {
   colors: string[]