@papit/create 0.0.1

package/asset/component-templates/theme/views/style.css

@@ -0,0 +1,241 @@
+@import "@papit/theme";
+@import "VARIABLE_FULL_NAME";
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body,
+div.theme-opposite {
+    font-family: monospace;
+    font-size: 12px;
+    background: var(--background, light-dark(oklch(96% 0 0), oklch(17% 0 0)));
+    color: var(--foreground);
+    padding: var(--space-8);
+    display: grid;
+    gap: var(--space-16);
+}
+
+/* ── Section ── */
+
+.showcase-section {
+    display: grid;
+    gap: var(--space-4);
+}
+
+.showcase-title {
+    font-size: 10px;
+    font-weight: normal;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: var(--tertiary);
+}
+
+/* ── Swatches ── */
+
+.swatch-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+}
+
+.swatch {
+    width: 96px;
+    border-radius: var(--radius-small);
+    overflow: hidden;
+    border: 1px solid var(--background-dark, light-dark(oklch(90% 0 0), oklch(12% 0 0)));
+}
+
+.swatch::before {
+    content: '';
+    display: block;
+    height: 56px;
+}
+
+.swatch-label {
+    display: block;
+    padding: var(--space-1) var(--space-2);
+    background: var(--background-light, light-dark(oklch(99% 0 0), oklch(22% 0 0)));
+    color: var(--tertiary);
+    font-size: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* brand */
+.swatch--primary::before {
+    background: var(--primary);
+}
+
+.swatch--secondary::before {
+    background: var(--secondary);
+}
+
+.swatch--tertiary::before {
+    background: var(--tertiary);
+}
+
+/* semantic */
+.swatch--success::before {
+    background: var(--success);
+}
+
+.swatch--info::before {
+    background: var(--info);
+}
+
+.swatch--warning::before {
+    background: var(--warning);
+}
+
+.swatch--error::before {
+    background: var(--error);
+}
+
+/* backgrounds */
+
+.swatch--background-light::before {
+    background: var(--background-light, light-dark(oklch(99% 0 0), oklch(22% 0 0)));
+}
+
+.swatch--background::before {
+    background: var(--background, light-dark(oklch(96% 0 0), oklch(17% 0 0)));
+}
+
+.swatch--background-dark::before {
+    background: var(--background-dark, light-dark(oklch(90% 0 0), oklch(12% 0 0)));
+}
+
+
+/* foregrounds */
+
+.swatch--foreground-light::before {
+    background: var(--foreground-light);
+}
+
+.swatch--foreground::before {
+    background: var(--foreground);
+}
+
+.swatch--foreground-dark::before {
+    background: var(--foreground-dark);
+}
+
+/* ── Spacing ── */
+
+.space-list {
+    display: grid;
+    gap: var(--space-2);
+}
+
+.space-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+}
+
+.space-item::before {
+    content: '';
+    display: block;
+    height: var(--space-4);
+    background: var(--primary);
+    border-radius: var(--radius-small);
+    flex-shrink: 0;
+}
+
+.space-label {
+    color: var(--tertiary);
+}
+
+.space-item--1::before {
+    width: var(--space-1);
+}
+
+.space-item--2::before {
+    width: var(--space-2);
+}
+
+.space-item--3::before {
+    width: var(--space-3);
+}
+
+.space-item--4::before {
+    width: var(--space-4);
+}
+
+.space-item--5::before {
+    width: var(--space-5);
+}
+
+.space-item--6::before {
+    width: var(--space-6);
+}
+
+.space-item--7::before {
+    width: var(--space-7);
+}
+
+.space-item--8::before {
+    width: var(--space-8);
+}
+
+.space-item--9::before {
+    width: var(--space-9);
+}
+
+.space-item--10::before {
+    width: var(--space-10);
+}
+
+.space-item--12::before {
+    width: var(--space-12);
+}
+
+.space-item--16::before {
+    width: var(--space-16);
+}
+
+.space-item--20::before {
+    width: var(--space-20);
+}
+
+/* ── Radius ── */
+
+.swatch-row:has(.radius-item) {
+    align-items: flex-end;
+}
+
+.radius-item {
+    width: 96px;
+    height: 96px;
+    background: var(--background-dark, light-dark(oklch(90% 0 0), oklch(12% 0 0)));
+    display: flex;
+    align-items: flex-end;
+    padding: var(--space-2);
+}
+
+.radius-label {
+    color: var(--tertiary);
+    font-size: 10px;
+}
+
+.radius-item--small {
+    border-radius: var(--radius-small);
+}
+
+.radius-item--medium {
+    border-radius: var(--radius-medium);
+}
+
+.radius-item--large {
+    border-radius: var(--radius-large);
+}
+
+.radius-item--full {
+    border-radius: var(--radius-full);
+}

package/asset/component-templates/web-component/src/component.ts

@@ -0,0 +1,31 @@
+// import statements 
+// system 
+import { CustomElement, html, property } from "@papit/web-component";
+
+// local 
+import sheet from "./style.css" assert { type: "css" };
+import { ClickEvent } from "./types";
+
+export class VARIABLE_CLASS_NAME extends CustomElement {
+    static sheet = sheet;
+
+    // properties 
+    @property({ type: Boolean }) foo: boolean = false;
+
+    // event handlers
+    private handleclick = () => {
+        this.dispatchEvent(new CustomEvent<ClickEvent>("main-click", { detail: { timestamp: performance.now() } }));
+    }
+
+    render() {
+        return html`
+            <p @click="${this.handleclick}">Llama Trauma Baby Mama</p>
+        `
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "VARIABLE_HTML_NAME": VARIABLE_CLASS_NAME;
+    }
+}

package/asset/component-templates/web-component/src/index.ts

@@ -0,0 +1,15 @@
+import { VARIABLE_CLASS_NAME } from './component.js';
+
+// export 
+export * from "./component";
+export * from "./types";
+
+// Register the element with the browser
+
+if (!window.customElements) {
+  throw new Error('Custom Elements not supported');
+}
+
+if (!window.customElements.get('VARIABLE_HTML_NAME')) {
+  window.customElements.define('VARIABLE_HTML_NAME', VARIABLE_CLASS_NAME);
+}

package/asset/component-templates/web-component/src/style.css

@@ -0,0 +1,4 @@
+:host {
+    color: var(--text);
+    background-color: var(--background, light-dark(oklch(96% 0 0), oklch(17% 0 0)));
+}

package/asset/component-templates/web-component/src/types.ts

@@ -0,0 +1 @@
+export type ClickEvent = { timestamp: number };

package/asset/component-templates/web-component/tests/index.html

@@ -0,0 +1,17 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VARIABLE_NAME test</title>
+
+    <script type="module" defer src="main.js"></script>
+</head>
+
+<body>
+    <VARIABLE_HTML_NAME data-testid="base-target">
+        fallback
+    </VARIABLE_HTML_NAME>
+</body>
+
+</html>

package/asset/component-templates/web-component/tests/main.js

@@ -0,0 +1 @@
+import 'VARIABLE_FULL_NAME';

package/asset/component-templates/web-component/tests/public/translations/en.json

@@ -0,0 +1,7 @@
+{
+  "meta": {
+    "region": "GB",
+    "language": "en-UK"
+  },
+  "VARIABLE_NAME": "VARIABLE_NAME"
+}

package/asset/component-templates/web-component/tests/snapshot.test.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  // Navigate to your test page
+  await page.goto('tests/VARIABLE_NAME/');
+});
+
+test.describe("VARIABLE_FULL_NAME visual regression", () => {
+  test('default snapshot', async ({ page }) => {
+    await expect(page).toHaveScreenshot();
+  });
+})

package/asset/component-templates/web-component/tests/unit.test.ts

@@ -0,0 +1,69 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  // Navigate to your test page
+  await page.goto('tests/VARIABLE_NAME/');
+});
+
+declare global {
+  interface Window {
+    EVENT_EMITTED: any;
+  }
+}
+
+test.describe("VARIABLE_FULL_NAME unit tests", () => {
+  test('available in DOM', async ({ page }) => {
+    // Interact with your component and make assertions
+    const component = await page.$('VARIABLE_HTML_NAME');
+    expect(component).not.toBeNull();
+  });
+});
+
+test.describe.skip("helpers", () => {
+  test("wait for event : enter press", async ({ page }) => {
+    const target = page.getByTestId("base-target");
+    await page.evaluate(() => {
+      window.EVENT_EMITTED = null;
+      const target = document.querySelector<HTMLElement>("*[data-testid='base-target']");
+      if (!target) return;
+
+      target.addEventListener("event-name", () => {
+        window.EVENT_EMITTED = true;
+      });
+
+      target.focus();
+      target.dispatchEvent(new KeyboardEvent("up", { key: "Enter" }));
+      // enter is tricky to capture so we make sure to dispatch inside evalute
+    });
+
+    await target.focus();
+    await target.press("Enter");
+
+    expect(await page.evaluate(() => window.EVENT_EMITTED)).toBeTruthy();
+  });
+
+  test("should submit a form", async ({ page }) => {
+    // NOTE this requires in main.js you have form.onsubmit = (e) => { e.preventDefault() }
+    // setting this in evaluate did not work.. (maybe with page.evalute)
+
+    await page.getByTestId("a").fill("hello");
+    await page.getByTestId("submit").click();
+
+    const results = await page.evaluate(() => {
+      const form = document.querySelector("form");
+      if (!form) return null;
+
+      const formdata = new FormData(form);
+      return {
+        a: formdata.get("a"),
+        b: formdata.get("b"),
+      }
+    });
+
+    expect(results).not.toBe(null);
+    expect(results).toMatchObject({
+      a: "hello",
+      b: "value",
+    });
+  });
+});

package/asset/component-templates/web-component/views/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VARIABLE_CLASS_NAME | experiment</title>
+
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="style.css" />
+
+    <script defer type="module" src="main.js"></script>
+</head>
+
+<body>
+    <h1>VARIABLE_CLASS_NAME | experiment</h1>
+    <section>
+        <h2>Example</h2>
+        <pap-codeblock>
+            <VARIABLE_HTML_NAME></VARIABLE_HTML_NAME>
+        </pap-codeblock>
+    </section>
+</body>
+
+</html>

package/asset/component-templates/web-component/views/main.js

@@ -0,0 +1,14 @@
+// core
+import { translator } from '@papit/translator';
+import "@papit/codeblock";
+
+// component
+import 'VARIABLE_FULL_NAME';
+
+window.onload = () => {
+    console.log('[demo]: window loaded');
+
+    translator.add({ id: "en", url: "/en.json" });
+    translator.change("en");
+}
+

package/asset/component-templates/web-component/views/public/translations/en.json

@@ -0,0 +1,7 @@
+{
+  "meta": {
+    "region": "GB",
+    "language": "en-UK"
+  },
+  "VARIABLE_NAME": "VARIABLE_NAME"
+}

package/asset/component-templates/web-component/views/style.css

@@ -0,0 +1,28 @@
+@import "@papit/theme";
+
+body {
+    background-color: var(--background, light-dark(oklch(96% 0 0), oklch(17% 0 0)));
+    color: var(--text, light-dark(oklch(10% 0 0), oklch(95% 0 0)));
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4, 16px);
+
+    padding-block: 5rem;
+
+    h1 {
+        max-width: 1200px;
+        margin-inline: auto;
+        width: 100%;
+    }
+
+    section {
+        max-width: 1200px;
+        margin-inline: auto;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 1rem 2rem;
+        border-radius: 1rem;
+        border: 1px solid light-dark(oklch(88% 0.01 264), oklch(28% 0.015 264));
+        background-color: var(--background-light, light-dark(oklch(99% 0 0), oklch(22% 0 0)));
+    }
+}

package/asset/package-templates/browser/README.md

@@ -0,0 +1,44 @@
+# VARIABLE_FULL_NAME
+
+VARIABLE_DESCRIPTION
+
+![Logo](VARIABLE_GITHUB_REPO/blob/main/asset/logo.svg)
+
+---
+
+![Type](https://img.shields.io/badge/Type-VARIABLE_LAYER_FOLDER-orange)
+[![Tests](VARIABLE_GITHUB_REPO/actions/workflows/pull-request.yml/badge.svg)](VARIABLE_GITHUB_REPO/actions/workflows/pull-request.yml)
+[![NPM version](https://img.shields.io/npm/v/VARIABLE_FULL_NAME.svg?logo=npm)](https://www.npmjs.com/package/VARIABLE_FULL_NAME)
+
+---
+
+## installation
+
+```bash
+npm install VARIABLE_FULL_NAME
+```
+
+## Contributing
+
+Contributions are welcome! Please follow the development guidelines above and ensure all tests pass before submitting a pull request.
+
+## License
+
+Licensed under the @Papit License 1.0 - Copyright (c) 2024 Henry Pap (@onkelhoy)
+
+**Key points:**
+
+- ✅ Free to use in commercial projects
+- ✅ Free to modify and distribute
+- ✅ Attribution required
+- ❌ Cannot resell the component itself as a standalone product
+
+See the [LICENSE](https://github.com/onkelhoy/papit/blob/main/LICENSE) file for full details.
+
+## Related Components
+
+- [@papit/web-component](https://github.com/onkelhoy/papit/tree/main/packages/system/core): Core utilities, decorators, and base component class
+
+## Support
+
+For issues, questions, or contributions, please visit the [GitHub repository](https://github.com/onkelhoy/papit).

package/asset/package-templates/browser/asset/translations/en.json

@@ -0,0 +1,7 @@
+{
+  "meta": {
+    "region": "GB",
+    "language": "en-UK"
+  },
+  "VARIABLE_NAME": "VARIABLE_NAME"
+}

package/asset/package-templates/browser/package.json

@@ -0,0 +1,76 @@
+{
+    "name": "VARIABLE_FULL_NAME",
+    "description": "VARIABLE_DESCRIPTION",
+    "keywords": [
+        "papit",
+        "web-component",
+        "typescript",
+        "VARIABLE_NAME"
+    ],
+    "version": "0.0.1",
+    "scripts": {
+        "build": "npx @papit/build -- --error --ancestors",
+        "watch": "tsc -w",
+        "start": "npx @papit/server --info --live",
+        "test": "npx playwright test -c tests/playwright.config.ts $@",
+        "preversion": "papit-version",
+        "postversion": "papit-version",
+        "component": "npm create @papit -- --component",
+        "test:update-snapshots": "npx playwright test --update-snapshots -c tests/playwright.config.ts",
+        "test:chrome": "npm test -- --project=chromium"
+    },
+    "main": "./lib/bundle.js",
+    "types": "./lib/bundle.d.ts",
+    "type": "module",
+    "files": [
+        "asset/",
+        "lib/"
+    ],
+    "exports": {
+        ".": {
+            "import": "./lib/bundle.js",
+            "types": "./lib/bundle.d.ts"
+        }
+    },
+    "author": "VARIABLE_USER",
+    "private": false,
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org/"
+    },
+    "license": "VARIABLE_PROJECTLICENSE",
+    "homepage": "VARIABLE_GITHUB_REPO/tree/main/VARIABLE_LOCAL_DESTINATION",
+    "bugs": {
+        "url": "VARIABLE_GITHUB_REPO/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "VARIABLE_GITHUB_REPO.git",
+        "directory": "VARIABLE_LOCAL_DESTINATION"
+    },
+    "sideEffects": true,
+    "engines": {
+        "node": ">=18"
+    },
+    "dependencies": {},
+    "devDependencies": {
+        "@playwright/test": "1.58.0",
+        "playwright": "1.58.0",
+        "typescript": "5.9.3",
+        "@papit/theme": "*",
+        "@papit/translator": "*",
+        "@papit/codeblock": "*"
+    },
+    "browserslist": [
+        "defaults",
+        "not IE 11",
+        "not dead"
+    ],
+    "papit": {
+        "publish": true,
+        "type": "browser",
+        "main": "VARIABLE_NAME",
+        "htmlprefix": "VARIABLE_HTML_PREFIX",
+        "components": {}
+    }
+}