@planningcenter/wrapped 0.0.0-alpha

package/README.md

@@ -0,0 +1,64 @@
+# @planningcenter/wrapped
+
+This package enables adding a [Planning Center Wrapped](https://app.asana.com/0/1208915073501662/1208918971246017) banner to your app with ease! Exported as a React component, it includes everything needed. All you need to do is supply viewable permissions!
+### Light mode
+<img width="1006" height="66" alt="image" src="https://github.com/user-attachments/assets/54090151-b900-4f6e-80ae-6dc3f99dfebc" />
+
+### Dark mode
+<img width="1007" height="67" alt="image" src="https://github.com/user-attachments/assets/814960ed-1e95-49a5-89f1-6f2ac2176401" />
+
+
+
+## Installation
+
+### Add the package
+
+It's a private repo, so you need to supply the auth token or grab it from our private gem repo
+
+```bash
+yarn add @planningcenter/wrapped
+
+```
+
+### Add the banner to your layout
+
+```js
+<ThemeProvider className="product-wrap">
+  <div className="topbar-wrap">
+    <PcoWrappedBanner canView={currentPerson.can_view_wrapped} />
+    <HomeTopbar {...context.topbar} autoMountAddon={autoMountAddon} />
+  </div>
+  ...
+</ThemProvider>
+
+```
+
+### That's it!
+
+## Development
+
+I didn't have time to create a dummy app to develop from. For now, home is easiest app to spin up and develop from.
+
+### Clone the repo
+
+```bash
+git clone git@github.com:planningcenter/wrapped.git
+```
+
+### `cd` into the gem and start the `microbuild` watcher.
+
+This will automatically output the built JS file.
+
+```bash
+cd pco-wrapped && yarn dev
+```
+
+If you need to re-build JS without running the watcher you can run
+
+```bash
+yarn build
+```
+
+## Contributing
+
+Commit changes, submit a PR, then release a new version!

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@planningcenter/wrapped",
+  "version": "0.0.0-alpha",
+  "description": "PCO Wrapped components",
+  "source": "index.tsx",
+  "main": "./dist/wrapped.js",
+  "exports": "./dist/wrapped.modern.js",
+  "module": "./dist/wrapped.module.js",
+  "unpkg": "./dist/wrapped.umd.js",
+  "types": "./dist/index.d.ts",
+  "amdName": "PLANNINGCENTER.wrapped",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/planningcenter/wrapped.git"
+  },
+  "author": "Tanner Mares <tanner@planningcenter.com>",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "exit 0",
+    "dev": "microbundle watch",
+    "prepublishOnly": "yarn run build",
+    "test": "jest"
+  },
+  "bugs": {
+    "url": "https://github.com/planningcenter/wrapped/issues"
+  },
+  "homepage": "https://github.com/planningcenter/wrapped",
+  "private": false,
+  "dependencies": {
+    "@planningcenter/tapestry": "^2.6.0",
+    "@planningcenter/tapestry-react": "^4.13.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.14",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.29.0",
+    "@typescript-eslint/parser": "^8.29.0",
+    "eslint": "^9.23.0",
+    "eslint-import-resolver-typescript": "^4.3.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-sort-keys-fix": "^1.1.2",
+    "eslint-plugin-typescript-sort-keys": "^3.3.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "microbundle": "^0.15.1",
+    "prettier": "^3.5.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "ts-jest": "^29.3.1",
+    "ts-loader": "^9.5.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}