@pairbo/ui-kit 0.0.1 → 0.0.3

package/docs/eleventy.config.mjs

@@ -1,72 +0,0 @@
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-import markdownIt from "markdown-it";
-import markdownItAttrs from "markdown-it-attrs";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-export default function (eleventyConfig) {
-  eleventyConfig.addGlobalData("meta", {
-    title: "Shoelace",
-    description: "A forward-thinking library of web components.",
-  });
-  eleventyConfig.addGlobalData("layout", "default"); // make 'default' the default layout
-
-  // Add directories for component demos and source files
-  eleventyConfig.addPassthroughCopy({ "../src/components": "components" });
-  eleventyConfig.addPassthroughCopy({
-    [path.join(__dirname, "../src")]: "src",
-  });
-  eleventyConfig.addPassthroughCopy({
-    [path.join(__dirname, "../dist")]: "dist",
-  });
-
-  // Add a collection for components
-  eleventyConfig.addCollection("components", () => {
-    const componentsDir = path.join(__dirname, "../src/components");
-    return fs.readdirSync(componentsDir).filter(file => file.endsWith(".ts"));
-  });
-
-  // Generate a page for each component
-  eleventyConfig.addCollection("componentPages", () => {
-    const componentsDir = path.join(__dirname, "../src/components");
-    return fs
-      .readdirSync(componentsDir)
-      .filter(file => file.endsWith(".ts"))
-      .map(file => {
-        const componentName = path.basename(file, ".ts");
-        return {
-          inputPath: path.join(componentsDir, file),
-          outputPath: path.join(__dirname, "../_site/components", `${componentName}.html`),
-          data: {
-            title: `${componentName} Component`,
-            layout: "component",
-            componentName,
-          },
-        };
-      });
-  });
-
-  // Configure markdown-it with markdown-it-attrs
-  const markdownLib = markdownIt({
-    html: true,
-    breaks: true,
-    linkify: true,
-  }).use(markdownItAttrs);
-
-  eleventyConfig.setLibrary("md", markdownLib);
-  eleventyConfig.addPassthroughCopy({ "docs/pages/fabric-example.js": "fabric-example.js" });
-  // Configure Eleventy
-  return {
-    dir: {
-      input: "docs/pages",
-      output: "_site",
-      includes: "../_includes",
-      data: "_data",
-    },
-    markdownTemplateEngine: "njk",
-    templateEngineOverride: ["njk"],
-  };
-}

package/docs/pages/components/message-selector.md

@@ -1,17 +0,0 @@
----
-title: Message Selector Component
-layout: component
-componentName: message-selector
----
-
-# Message Selector Component
-
-This is a demo page for the `message-selector` component.
-
-```js
-console.log("hello");
-```
-
-<pairbo-message-selector id="custom" giftLabel="This is a custom label🎁" premiumLabel="Let's have a premium card" premiumDescription="TL;DR" freeMessageSelected="Oh? How about a free message?">
-</pairbo-message-selector>
-<fabric-example></fabric-example>

package/docs/pages/fabric-example.html

@@ -1,46 +0,0 @@
-<script src="https://cdn.jsdelivr.net/npm/fabric@latest/dist/fabric.min.js"></script>
-<h1>Fabric Example</h1>
-<div id="content">
-  <canvas id="fabric-canvas" width="500" height="500"></canvas>
-</div>
-
-<script>
-  const canvas = new fabric.Canvas("fabric-canvas");
-  const helloWorld = new fabric.Textbox("1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12", {
-    fontSize: 16,
-    left: 100,
-    top: 100,
-    width: 200,
-    height: 200,
-    fixedWidth: 200,
-    lockScalingX: true,
-    lockScalingY: true,
-    lockScalingZ: true,
-  });
-  helloWorld.on("", function (e) {
-    console.log("selection:changed", e);
-  });
-  console.log("Available Fabric events:", helloWorld.__eventListeners);
-  helloWorld.on("changed", function () {
-    console.log("The text has changed", helloWorld);
-    let lines = helloWorld.textLines;
-    if (lines.length > 12) {
-      lines = lines.slice(0, 12);
-      helloWorld.text = lines.join("\n");
-      helloWorld.setSelectionStart(helloWorld.text.length);
-      helloWorld.setSelectionEnd(helloWorld.text.length);
-    }
-    console.log(lines);
-    console.log("Hello World was clicked");
-  });
-  console.log({ helloWorld });
-  canvas.add(helloWorld);
-  canvas.centerObject(helloWorld);
-  canvas.renderAll();
-</script>
-
-<style>
-  #fabric-canvas {
-    border: 1px solid black;
-  }
-</style>

package/docs/pages/fabric-example.js

@@ -1,28 +0,0 @@
-import { Canvas, Textbox } from "fabric";
-const canvas = new Canvas("fabric-canvas");
-const helloWorld = new Textbox("1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12", {
-  fontSize: 16,
-  left: 100,
-  top: 100,
-  width: 200,
-  height: 200,
-  lockScalingX: true,
-  lockScalingY: true,
-});
-
-helloWorld.on("changed", function () {
-  console.log("The text has changed", helloWorld);
-  let lines = helloWorld.textLines;
-  if (lines.length > 12) {
-    lines = lines.slice(0, 12);
-    helloWorld.text = lines.join("\n");
-    helloWorld.setSelectionStart(helloWorld.text.length);
-    helloWorld.setSelectionEnd(helloWorld.text.length);
-  }
-  console.log(lines);
-  console.log("Hello World was clicked");
-});
-console.log({ helloWorld });
-canvas.add(helloWorld);
-canvas.centerObject(helloWorld);
-canvas.renderAll();

package/docs/pages/index.md

@@ -1,76 +0,0 @@
-# Pairbo Custom Integration
-
-Welcome to Pairbo Custom Integration - a suite of customizable web components designed to enhance e-commerce platforms with personalized card selection and messaging capabilities.
-
-## Project Overview
-
-This project provides a collection of framework-agnostic web components that enable online stores to integrate personalized card selection and messaging features. Built with TypeScript and modern web standards, these components are designed to be lightweight, performant, and easily customizable.
-
-## Core Features
-
-### Custom Components
-
-- **Enhanced Checkbox Components**: Custom-styled, accessible checkbox elements
-- **Card Selection Module**: Interactive popup interface for browsing and selecting greeting cards
-- **Message Editor Modules**:
-  - Text-based message editor for typed greetings
-  - Handwriting-enabled editor for personal notes
-
-### Technical Benefits
-
-- Framework-agnostic implementation using Web Components
-- TypeScript for type safety and better developer experience
-- Comprehensive test coverage
-- Detailed documentation with live examples
-- Optional framework wrappers (React/Vue)
-
-## Project Timeline
-
-### Phase 1: Foundation (Week 1)
-
-- Development environment setup
-- Tool configuration (ESLint, Prettier, TypeScript)
-- Documentation framework implementation
-
-### Phase 2: Core Development (Weeks 2-3)
-
-- Component development
-- Automated testing implementation
-- Integration testing
-
-### Phase 3: Documentation (Weeks 3-4)
-
-- API documentation
-- Integration guides
-- Usage examples
-
-### Phase 4: Delivery (Week 4)
-
-- Build optimization
-- CDN configuration
-- Production deployment
-
-### Phase 5: Extensions (Week 5)
-
-- Framework wrapper development
-- Demo integration implementation
-- Final testing and refinement
-
-For detailed timeline and milestones, please refer to our [Roadmap](./roadmap.md) section.
-
-## Getting Started
-
-- [Issue Tracker](https://github.com/pairbo/custom-integration/issues)
-- [GitHub Repository](https://github.com/pairbo/custom-integration)
-
-For technical support and contributions, please visit our:
-
-## Support
-
-- [Integration Examples](./examples/index.md)
-- [Component Documentation](./components/index.md)
-- [Installation Guide](./installation.md)
-
-To begin integrating Pairbo components into your e-commerce platform, please refer to our:
-
-For integration guides and detailed documentation, please navigate to the respective sections using the sidebar navigation.

package/eslint.config.mjs

@@ -1,32 +0,0 @@
-import globals from 'globals';
-import tseslint, { parser } from 'typescript-eslint';
-import eslintPluginPrettier from 'eslint-plugin-prettier/recommended';
-import {configs as litConfigs} from 'eslint-plugin-lit'
-import {fileURLToPath} from 'url';
-
-const __dirname = fileURLToPath(new URL('.', import.meta.url));
-console.log(`${__dirname}/tsconfig.json`)
-export default [
-  { 
-    files: ['src'],
-    ignores: ['**/node_modules/**', '**/dist/**', '**/build/**', 'scripts/plop/plopfile.js']
-  },
-  // TODO: Try to override the parserOptions.project with the tsconfig.json in the root
-  {
-    files: ['scr/**/*.ts'],
-    languageOptions:{globals: globals.browser},
-    parser: "@typescript-eslint/parser",
-    parserOptions: {
-      project: `${__dirname}/tsconfig.json`,
-      tsconfigRootDir: __dirname,
-    },
-  },
-  { languageOptions: { globals: globals.browser } },
-  {
-    rules: {
-      "no-unused-vars": "warn",
-    }
-  },
-  eslintPluginPrettier,
-  litConfigs['flat/recommended'], 
-];

package/ignote_temp

@@ -1,3 +0,0 @@
-node_modules
-dist
-.husky/

package/index.html

@@ -1,162 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <title>Development</title>
-
-  <link rel="stylesheet" href="src/themes/default.css">
-  <script type="module" src="src/components/main.ts"></script>
-
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Kablammo&family=Monsieur+La+Doulaise&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
-    rel="stylesheet">
-
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/themes/light.css" />
-  <script type="module"
-    src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/shoelace-autoloader.js"></script>
-
-  <script>
-    (() => {
-      document.documentElement.classList.toggle('pbo-theme-default', true);
-    })();
-  </script>
-</head>
-
-<body>
-  <a href="/index.html">Home</a>
-  <a href="/pages/editor.html">Editor</a>
-  <a href="/pages/card-selection.html">Card Selection</a>
-  <div style="
-        height: 100vh;
-        width: 100vw;
-        padding-left: auto;
-        padding-right: auto;
-        margin-left: auto;
-        margin-right: auto;
-      ">
-    <div style="
-          height: 60%;
-          width: 60%;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        ">
-      <fabric-example backgroundUrl="./public/Greeting Card from Pairbo.png" alignment="right"></fabric-example>
-    </div>
-  </div>
-  <textarea id="message"></textarea>
-  <input type="color" id="color" value="#000000" />
-  <select name="alignment" id="alignment">
-    <option value="left">Left</option>
-    <option value="center">Center</option>
-    <option value="right">Right</option>
-  </select>
-  <!-- Example usage -->
-  <pbo-selector .fonts='${[
-  { value: "helvetica", label: "Helvetica", font: "Helvetica, Arial, sans-serif" },
-  { value: "georgia", label: "Georgia", font: "Georgia, serif" }
-]}'></pbo-selector>
-
-  <div style="display: inline-flex; flex-direction: column; gap:1rem">
-    <pbo-button outline>
-      <div>Click me</div>
-    </pbo-button>
-
-    <pbo-button-group>
-      <pbo-button outline>
-        left
-      </pbo-button>
-      <pbo-button outline>
-        center
-      </pbo-button>
-      <pbo-button>
-        right
-      </pbo-button>
-    </pbo-button-group>
-
-    <pbo-radio-button aria-disabled="true" disabled>
-      disabled
-    </pbo-radio-button>
-
-    <pbo-radio-button checked>
-      focused
-    </pbo-radio-button>
-
-    <form>
-      <input type="text" name="name" />
-      <input type="email" name="email" />
-
-      <input type="radio" name="align" />
-      <input type="radio" name="align" />
-      <input type="radio" name="align" />
-      <pbo-radio-group required id="alignment-group">
-        <pbo-radio-button value="left" size="small" circle>Left</pbo-radio-button>
-        <pbo-radio-button value="center">Center</pbo-radio-button>
-        <pbo-radio-button value="right">Right</pbo-radio-button>
-      </pbo-radio-group>
-
-      <pbo-radio-group required id="color-group">
-        <pbo-radio-button value="white" size="small" circle>White</pbo-radio-button>
-        <pbo-radio-button value="black">Black</pbo-radio-button>
-      </pbo-radio-group>
-      <pbo-textarea required rows="12" resize="none"></pbo-textarea>
-      <sl-radio-group required>
-        <sl-radio value="left">Left</sl-radio>
-        <sl-radio value="center">Center</sl-radio>
-        <sl-radio value="right">Right</sl-radio>
-      </sl-radio-group>
-      <button type="submit">Submit</button>
-    </form>
-    <pbo-button circle>Circle</pbo-button>
-  </div>
-
-
-  <script>
-    const textareaEl = document.querySelector("pbo-textarea");
-    textareaEl.addEventListener("pbo-input", () => {
-      fabricExample.message = textareaEl.value;
-    });
-
-    const message = document.getElementById("message");
-    const fabricExample = document.querySelector("fabric-example");
-    message.addEventListener("input", e => {
-      fabricExample.message = message.value;
-    });
-
-    const color = document.getElementById("color");
-    color.addEventListener("input", e => {
-      fabricExample.color = color.value;
-    });
-
-    const element = document.getElementById("alignment");
-    element.addEventListener("pbo-change", e => {
-      fabricExample.alignment = element.value;
-    });
-
-    const alignmentGroup = document.getElementById("alignment-group");
-    alignmentGroup.addEventListener("pbo-change", e => {
-      console.log(alignmentGroup.value);
-      fabricExample.alignment = alignmentGroup.value;
-      fabricExample.setAttribute("alignment", alignmentGroup.value);
-    });
-
-    const colorGroup = document.getElementById("color-group");
-    colorGroup.addEventListener("pbo-change", e => {
-      console.log(colorGroup.value);
-    });
-
-    const slGroupEl = document.querySelector("sl-radio-group");
-    slGroupEl.addEventListener("sl-change", e => {
-      console.log({ e })
-      console.log(slGroupEl.value);
-    });
-  </script>
-</body>
-
-</html>

package/lint-stage.confg.js

@@ -1,6 +0,0 @@
-export default {
-  "*.{js,ts,json,html,xml,css,scss,sass,md}": "cspell --no-must-find-files",
-  "src/**/*.{js,ts}": "eslint --max-warnings 0 --fix",
-  "*": "prettier --write --ignore-unknown",
-  "dist/**/*": "ignore", // Add this line to ignore the dist directory
-};

package/pages/card-selection.html

@@ -1,65 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <title>Development</title>
-
-  <link rel="stylesheet" href="../src/themes/default.css">
-  <script type="module" src="../src/components/main.ts"></script>
-
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Kablammo&family=Monsieur+La+Doulaise&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
-    rel="stylesheet">
-
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/themes/light.css" />
-  <script type="module"
-    src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/shoelace-autoloader.js"></script>
-
-  <script>
-    (() => {
-      document.documentElement.classList.toggle('pbo-theme-default', true);
-    })();
-  </script>
-</head>
-
-<body>
-  <div class="container">
-    <pbo-category>
-      <h1 slot="title">Title</h1>
-    </pbo-category>
-  </div>
-</body>
-
-<script>
-  const categoryEl = document.querySelector('pbo-category');
-
-  categoryEl.cards = [
-    { cover_url: "https://picsum.photos/id/1/300/400", id: "1" },
-    { cover_url: "https://picsum.photos/id/10/300/400", id: "10" },
-    { cover_url: "https://picsum.photos/id/14/300/400", id: "10" },
-    { cover_url: "https://picsum.photos/id/20/300/400", id: "10" },
-    { cover_url: "https://picsum.photos/id/30/300/400", id: "10" },
-    { cover_url: "https://picsum.photos/id/40/300/400", id: "10" },
-    { cover_url: "https://picsum.photos/id/100/300/400", id: "100" },
-  ]
-</script>
-
-<style>
-  body {
-    height: 100vh;
-    width: 100vw;
-  }
-
-  .container {
-    height: 100%;
-    width: 100%;
-    padding-left: auto;
-    padding-right: auto;
-    margin-left: auto;
-    margin-right: auto;
-  }
-</style>
-
-</html>

package/pages/drawer.html

@@ -1,47 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <title>Development</title>
-
-  <link rel="stylesheet" href="../src/themes/default.css">
-  <script type="module" src="../src/components/main.ts"></script>
-
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Kablammo&family=Monsieur+La+Doulaise&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
-    rel="stylesheet">
-
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/themes/light.css" />
-  <script type="module"
-    src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/shoelace-autoloader.js"></script>
-
-  <script>
-    (() => {
-      document.documentElement.classList.toggle('pbo-theme-default', true);
-    })();
-  </script>
-</head>
-
-<body>
-  <div class="container">
-    <pbo-drawer>
-      <div part="body">
-        <pbo-page-manager></pbo-page-manager>
-      </div>
-    </pbo-drawer>
-  </div>
-  <button>Toggle modal</button>
-</body>
-
-<script>
-  const buttonEl = document.querySelector('button');
-  const modalEl = document.querySelector('pbo-drawer');
-  buttonEl.addEventListener('click', () => {
-    modalEl.show();
-  });
-</script>
-
-
-</html>

package/pages/editor.html

@@ -1,45 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <title>Development</title>
-
-  <link rel="stylesheet" href="../src/themes/default.css">
-  <script type="module" src="../src/components/main.ts"></script>
-
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Kablammo&family=Monsieur+La+Doulaise&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
-    rel="stylesheet">
-
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/themes/light.css" />
-  <script type="module"
-    src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/shoelace-autoloader.js"></script>
-
-  <script>
-    (() => {
-      document.documentElement.classList.toggle('pbo-theme-default', true);
-    })();
-  </script>
-</head>
-
-<body>
-  <div class="container">
-    <pbo-editor></pbo-editor>
-  </div>
-</body>
-
-<style>
-  .container {
-    height: 100%;
-    width: 100%;
-    padding-left: auto;
-    padding-right: auto;
-    margin-left: auto;
-    margin-right: auto;
-  }
-</style>
-
-
-</html>

package/pages/page-mgn.html

@@ -1,51 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-  <title>Development</title>
-
-  <link rel="stylesheet" href="../src/themes/default.css">
-  <script type="module" src="../src/components/main.ts"></script>
-
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Kablammo&family=Monsieur+La+Doulaise&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
-    rel="stylesheet">
-
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/themes/light.css" />
-  <script type="module"
-    src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.0/cdn/shoelace-autoloader.js"></script>
-
-  <script>
-    (() => {
-      document.documentElement.classList.toggle('pbo-theme-default', true);
-    })();
-  </script>
-</head>
-
-<body>
-  <div class="container">
-    <pbo-page-manager></pbo-page-manager>
-  </div>
-</body>
-
-<style>
-  html,
-  body {
-    height: 100vh;
-    width: 100wh;
-  }
-
-  .container {
-    height: 100%;
-    width: 100%;
-    padding-left: auto;
-    padding-right: auto;
-    margin-left: auto;
-    margin-right: auto;
-  }
-</style>
-
-
-</html>