DRAFT: checkpoint

.github/workflows/ci.yml

@@ -15,10 +15,10 @@ jobs:
     - uses: actions/setup-node@v4
 
     - name: Install dependencies
-      run: yarn install
+      run: npm install
 
-    - name: Run tests
-      run: yarn run test
+    # - name: Run tests
+    #   run: npm run test
 
-    - name: Upload reports
-      run: npx codecov
+    # - name: Upload reports
+    #   run: npx codecov

.github/workflows/gh-pages-main.yml

@@ -19,10 +19,10 @@ jobs:
       - uses: actions/setup-node@v4
 
       - name: Install dependencies
-        run: yarn install
+        run: npm install
 
       - name: Create build files for gh-pages deploy
-        run: yarn ghpages:build
+        run: npm run ghpages:build
 
       # Reference: https://github.com/JamesIves/github-pages-deploy-action
       - name: Deploy 🚀

.github/workflows/pr-preview.yml

@@ -24,8 +24,8 @@ jobs:
 
       - name: Install and Build
         run: |
-          yarn install
-          yarn ghpages:build
+          npm install
+          npm run ghpages:build
 
       # Reference: https://github.com/rossjrw/pr-preview-action
       - name: Deploy preview

README.md

@@ -1,144 +1,15 @@
-![Build Status](https://github.com/internetarchive/iaux-typescript-wc-template/actions/workflows/ci.yml/badge.svg) [![codecov](https://codecov.io/gh/internetarchive/iaux-typescript-wc-template/branch/main/graph/badge.svg?token=ZOYRJ2BV9W)](https://codecov.io/gh/internetarchive/iaux-typescript-wc-template)
+# \<donation-form>
 
-# Internet Archive Typescript WebComponent Template
+The Internet Archive monthly donation management, web components.
 
-This is a base template for creating Typescript WebComponents. It is based off of the [Open WebComponents generator](https://open-wc.org/docs/development/generator/) with some IA-specific customizations and some development niceities.
+<!-- ![Donation Form](./assets/img/screenshot.png "Donation Form") -->
 
-## Usage
-
-1. Click the "Use this Template" button in GitHub to create a new repository based on this one.
-2. Clone your new repo and update the things below:
-
-### Things to update in your copy
-1. Remove this section
-2. Search for the strings `your-webcomponent` and `YourWebComponent` and those are most of the spots that need to be updated.
-3. `README.md` (this file). Update the readme in general, but also the badge URLs
-4. `package.json` Update the name and description
-5. Rename the `your-webcomponent.ts` and its associated `.test` file
-
-## Local Demo with `web-dev-server`
-```bash
-yarn start
-```
-To run a local development server that serves the basic demo located in `demo/index.html`
-
-## Testing with Web Test Runner
-To run the suite of Web Test Runner tests, run
-```bash
-yarn run test
-```
-
-To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
-
-```bash
-yarn run test:watch
-```
-
-## Linting with ESLint, Prettier, and Types
-To scan the project for linting errors, run
+## Installation
 ```bash
-yarn run lint
+yarn add @internetarchive/donation-form
 ```
 
-You can lint with ESLint and Prettier individually as well
-```bash
-yarn run lint:eslint
-```
-```bash
-yarn run lint:prettier
-```
-
-To automatically fix many linting errors, run
-```bash
-yarn run format
-```
-
-You can format using ESLint and Prettier individually as well
-```bash
-yarn run format:eslint
-```
-```bash
-yarn run format:prettier
-```
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
-
-If you customize the configuration a lot, you can consider moving them to individual files.
-
-### Add Codecov
-- after forking, add your repo to the authorized codecov list: `https://github.com/organizations/internetarchive/settings/installations/1268216`
-- then, go to the badge maker page for your repo: `https://app.codecov.io/gh/internetarchive/<repo-name>/settings/badge`
-- copy link & paste into top of README.md
-
-## Steps to setup `gh-pages` static site generator
-
-Let's start with creating a `gh-pages` branch.
-
-This branch is where Github will look for the `index.html` to be hosted
-
-```
-git checkout --orphan gh-pages
-git reset --hard
-git commit --allow-empty -m "Initializing gh-pages branch"
-git push origin gh-pages
-```
-
-### Additional setup 
-
-- Go to repo `Settings` -> sidebar `Pages` 
-- In the `Source` drop-down, choose the branch where you want to host your Github Pages and the `directory` where it was hosted
-  - We'll use `gh-pages` branch for this but you can use other branch name for this
-  - Just make sure that's the branch where the `index.html` that you want to host lives in
-
-<p align="center">
-  <img src="screenshot/gh-pages-settings.png" alt="Github Pages Settings" style="height:720px; width:890px;">
-</p>
-
-## Manual Deploy using `gh-pages`
-
-You can update the current Github Page without pushing a commit by running:
-```
-yarn run ghpages:publish
+## Usage
+```html
+please see demo.
 ```
-
-This build script does the following, see `package.json`:
-- `ghpages:publish` 
-  - This executes `ghpages:prepare` in the current branch you are currently working on
-    - Note: The branch name is required so that it will not override the whole Github Pages directory 
-  - You can check it by navigating through the branch name files directory you set from the [step to setup `gh-pages` branch](#steps-to-setup-gh-pages)
-    - You can checkout how it looks like in one of our projects here: [https://github.com/internetarchive/iaux-collection-browser/tree/gh-pages](https://github.com/internetarchive/iaux-collection-browser/tree/gh-pages)
-
-- `ghpages:prepare` 
-  - This executes `ghpages:build` that builds the project dependencies and generates `vite` build from it
-  - We use [vite](https://vitejs.dev/) to bundle and generate the static assets that we host in Github Pages
-    - See `vite.config.ts` related to this
-
-- `ghpages:generate`
-  - This executes `gh-pages` [npm package](https://www.npmjs.com/package/gh-pages) command to publish/upload the generated files from our `vite` build files
-  - Upon executing this command:
-    - This generates a commit message formatted from the most recent commit message of the branch
-    - Push the commit to `gh-pages` branch that we setup earlier
-
-The live demo app URL from current branch will look something like this: 
-`https://<organization_name_or_username>.github.io/<repo_name>/<branch_name>/demo`
-
-## Automatic Deploy of Demo App
-
-Things that trigger automatic site generation:
-- a merge to `main`
-  - See workflow: `gh-pages-main.yml`
-  - Example: `https://<organization_name_or_username>.github.io/<repo_name>/main`
-
-- a pull request against `main`
-  - See workflow: `pr-preview.yml`
-    - The URL for your Pull Request will be deleted after merging to main but you can update that in the config
-  - When you create a Pull Request, if your code passes codecov unit tests, it will be always served live at base URL/pull request number. 
-  - Example: `https://<organization_name_or_username>.github.io/<repo_name>/pr/<pr-number>/demo`
-    - Note that `demo` is another directory where the `index.html` lives in
-    - You are free to playaround with it and set your desired file directory/structure on your end
-
-Another thing to note: pushing a branch up alone will not trigger site creation. 
-
-Happy devving ^_^ 🥳  🎉 

demo/assets/style.css

@@ -0,0 +1,15 @@
+html {
+  font-size: 10px;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #333;
+}
+
+#demo {
+  margin: 0;
+  padding: 1em;
+}

demo/data-recent-donations.json

@@ -0,0 +1,11 @@
+{
+  "success": true,
+  "value": {
+    'donation1': {
+      id: 1,
+      amount: 100
+
+    }
+
+  }
+}

demo/data-short.json

@@ -0,0 +1,70 @@
+{
+  "success": true,
+  "value": {
+    "41": {
+      "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJtYWlsc3luYyIsImlhdCI6MTcyMzc1MDI3OS41MjgwMjksIm5iZiI6MTcyMzc1MDIxOS41MjgwMjksImV4cCI6MTcyMzc1MDg3OS41MjgwMjksImtleSI6eyJwaWQiOiI1czUzazYiLCJjaWQiOjgwMzUzOCwiYW1vdW50IjoxMCwicGF5bWVudE1ldGhvZFRva2VuIjoiZ3l3ZnA5IiwiY3VzdG9tZXJJZCI6IjY5OTk2NjAyNiJ9LCJ1c2VyIjoiQGlzYS1hdC10aGUtYXJjaGl2ZSJ9.drnp9oK-UVsuzuRAW_MTFjdWjiS630B88P-c0jDzzVw",
+      "amount": 10,
+      "start_date": "2024-05-22 00:00:00",
+      "contribution_status_id": 5,
+      "is_test": true,
+      "btdata": {
+        "billingDayOfMonth": 22,
+        "nextBillingDate": {
+          "date": "2024-08-22 00:00:00.000000",
+          "timezone_type": 3,
+          "timezone": "UTC"
+        },
+        "status": "Active",
+        "paymentMethodType": "Paypal",
+        "last4": null,
+        "cardType": null,
+        "expirationMonth": null,
+        "expirationYear": null,
+        "paypalEmail": "[email protected]"
+      }
+    },
+    "23764": {
+      "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJtYWlsc3luYyIsImlhdCI6MTcyMzc1MDI3OS41Mjg3NzEsIm5iZiI6MTcyMzc1MDIxOS41Mjg3NzEsImV4cCI6MTcyMzc1MDg3OS41Mjg3NzEsImtleSI6eyJwaWQiOiI4NWRyNzIiLCJjaWQiOjgwMzUzOCwiYW1vdW50Ijo1LCJwYXltZW50TWV0aG9kVG9rZW4iOiJjZXBha256ZCIsImN1c3RvbWVySWQiOiIyOTY3MjM2OTUifSwidXNlciI6IkBpc2EtYXQtdGhlLWFyY2hpdmUifQ.csGjSCrk3FV-mm7O1SwoUKCghwTQCRaD8_LJemo4YhQ",
+      "amount": 5,
+      "start_date": "2022-12-09 00:00:00",
+      "contribution_status_id": 5,
+      "is_test": true,
+      "btdata": {
+        "billingDayOfMonth": 9,
+        "nextBillingDate": {
+          "date": "2024-09-09 00:00:00.000000",
+          "timezone_type": 3,
+          "timezone": "UTC"
+        },
+        "status": "Active",
+        "paymentMethodType": "creditCard",
+        "last4": "1111",
+        "cardType": "Visa",
+        "expirationMonth": "12",
+        "expirationYear": "2023"
+      }
+    },
+    "35406": {
+      "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJtYWlsc3luYyIsImlhdCI6MTcyMzc1MDI3OS41MjcyMTYsIm5iZiI6MTcyMzc1MDIxOS41MjcyMTYsImV4cCI6MTcyMzc1MDg3OS41MjcyMTYsImtleSI6eyJwaWQiOiIyN21yNnIiLCJjaWQiOjgwMzUzOCwiYW1vdW50Ijo1LCJwYXltZW50TWV0aG9kVG9rZW4iOiI4dDduenFnIiwiY3VzdG9tZXJJZCI6Ijg1MzkzMjIxMyJ9LCJ1c2VyIjoiQGlzYS1hdC10aGUtYXJjaGl2ZSJ9.Si-IBV0VhSwTL1SDXpn5bfuFP4qp-r9Jkoe4bw4eRyw",
+      "amount": 5,
+      "start_date": "2024-07-01 00:00:00",
+      "contribution_status_id": 5,
+      "is_test": true,
+      "btdata": {
+        "billingDayOfMonth": 22,
+        "nextBillingDate": {
+          "date": "2024-08-22 00:00:00.000000",
+          "timezone_type": 3,
+          "timezone": "UTC"
+        },
+        "status": "Active",
+        "paymentMethodType": "Venmo",
+        "last4": null,
+        "cardType": null,
+        "expirationMonth": null,
+        "expirationYear": null,
+        "venmoUsername": "venmojoe"
+      }
+    }
+  }
+}