From 6cb948f9cb10225ca5541285e5bd6e00415ba65b Mon Sep 17 00:00:00 2001
From: Isa Herico Velasco <7840857+iisa@users.noreply.github.com>
Date: Thu, 19 Dec 2024 13:52:27 -0800
Subject: [PATCH] checkpoint - style & component. next: cycling
---
.github/workflows/ci.yml | 4 +-
.github/workflows/gh-pages-main.yml | 4 +-
.github/workflows/pr-preview.yml | 4 +-
.gitignore | 4 +-
README.md | 20 +-
demo/app-root.ts | 77 +-
demo/index.html | 3 +-
package-lock.json | 11610 +++++++++++++++++++++++++
package.json | 12 +-
src/iaux-notification-toast.ts | 72 +
src/your-webcomponent.ts | 29 -
test/iaux-notification-toast.test.ts | 39 +
test/your-webcomponent.test.ts | 40 -
yarn.lock | 5605 ------------
14 files changed, 11820 insertions(+), 5703 deletions(-)
create mode 100644 package-lock.json
create mode 100644 src/iaux-notification-toast.ts
delete mode 100644 src/your-webcomponent.ts
create mode 100644 test/iaux-notification-toast.test.ts
delete mode 100644 test/your-webcomponent.test.ts
delete mode 100644 yarn.lock
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 118e4e6..17ea52c 100644
--- a/.github/workflows/ci.yml
+++ b/.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
+ run: npm run test
- name: Upload reports
run: npx codecov
diff --git a/.github/workflows/gh-pages-main.yml b/.github/workflows/gh-pages-main.yml
index 820805d..7a5f300 100644
--- a/.github/workflows/gh-pages-main.yml
+++ b/.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 🚀
diff --git a/.github/workflows/pr-preview.yml b/.github/workflows/pr-preview.yml
index a53767e..5b5fc1d 100644
--- a/.github/workflows/pr-preview.yml
+++ b/.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
diff --git a/.gitignore b/.gitignore
index f6d2310..bffe7ca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,5 +35,5 @@ storybook-static
logs
*.log
npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+npm-debug.log*
+npm-error.log*
diff --git a/README.md b/README.md
index 3340178..17dbb5e 100644
--- a/README.md
+++ b/README.md
@@ -18,47 +18,47 @@ This is a base template for creating Typescript WebComponents. It is based off o
## Local Demo with `web-dev-server`
```bash
-yarn start
+npm 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
+npm run test
```
To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run
```bash
-yarn run test:watch
+npm run test:watch
```
## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
-yarn run lint
+npm run lint
```
You can lint with ESLint and Prettier individually as well
```bash
-yarn run lint:eslint
+npm run lint:eslint
```
```bash
-yarn run lint:prettier
+npm run lint:prettier
```
To automatically fix many linting errors, run
```bash
-yarn run format
+npm run format
```
You can format using ESLint and Prettier individually as well
```bash
-yarn run format:eslint
+npm run format:eslint
```
```bash
-yarn run format:prettier
+npm run format:prettier
```
## Tooling configs
@@ -100,7 +100,7 @@ git push origin gh-pages
You can update the current Github Page without pushing a commit by running:
```
-yarn run ghpages:publish
+npm run ghpages:publish
```
This build script does the following, see `package.json`:
diff --git a/demo/app-root.ts b/demo/app-root.ts
index be4715f..476ea77 100644
--- a/demo/app-root.ts
+++ b/demo/app-root.ts
@@ -1,14 +1,76 @@
import { html, css, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
-import '../src/your-webcomponent';
+import '../src/iaux-notification-toast';
+import type {
+ aNotification,
+ IauxNotificationToast,
+} from '../src/iaux-notification-toast';
@customElement('app-root')
export class AppRoot extends LitElement {
+ successNotif(message?: string): aNotification {
+ return {
+ message: message ?? 'Default success message',
+ status: 'success',
+ };
+ }
+
+ errorNotif(message?: string): aNotification {
+ return {
+ message: message ?? 'Default error message',
+ status: 'fail',
+ };
+ }
+
render() {
return html`
-
- Some slotted content
-
+
+
+
+
+
+
+
`;
}
@@ -16,5 +78,12 @@ export class AppRoot extends LitElement {
:host {
display: block;
}
+ section#demo-controls {
+ background-color: aliceblue;
+ width: 100%;
+ min-height: 50px;
+ display: flex;
+ padding-bottom: 50px;
+ }
`;
}
diff --git a/demo/index.html b/demo/index.html
index 225bd2e..a9bbc12 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -5,7 +5,8 @@