@pairbo/ui-kit 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/.husky/pre-commit +1 -0
  2. package/.prettierignore +16 -0
  3. package/.prettierrc.json +17 -0
  4. package/README.md +61 -0
  5. package/cspell.json +9 -0
  6. package/dev.html +101 -0
  7. package/docs/README.md +1 -0
  8. package/docs/_includes/component.njk +16 -0
  9. package/docs/_includes/default.njk +39 -0
  10. package/docs/_includes/sidebar.njk +16 -0
  11. package/docs/eleventy.config.mjs +72 -0
  12. package/docs/pages/components/message-selector.md +17 -0
  13. package/docs/pages/fabric-example.html +46 -0
  14. package/docs/pages/fabric-example.js +28 -0
  15. package/docs/pages/index.md +76 -0
  16. package/eslint.config.mjs +32 -0
  17. package/ignote_temp +3 -0
  18. package/index.html +162 -0
  19. package/lint-stage.confg.js +6 -0
  20. package/package.json +66 -0
  21. package/pages/card-selection.html +65 -0
  22. package/pages/drawer.html +47 -0
  23. package/pages/editor.html +45 -0
  24. package/pages/page-mgn.html +51 -0
  25. package/pages/test_build.html +47 -0
  26. package/public/Greeting Card from Pairbo.png +0 -0
  27. package/scripts/plop/plopfile.js +51 -0
  28. package/scripts/plop/templates/components/component.hbs +34 -0
  29. package/scripts/plop/templates/components/define.hbs +10 -0
  30. package/scripts/plop/templates/components/styles.hbs +7 -0
  31. package/src/components/button/button.component.ts +93 -0
  32. package/src/components/button/button.styles.ts +273 -0
  33. package/src/components/button/button.ts +10 -0
  34. package/src/components/button-group/button-group.component.ts +36 -0
  35. package/src/components/button-group/button-group.styles.ts +7 -0
  36. package/src/components/button-group/button-group.ts +10 -0
  37. package/src/components/card-selection/card-selection.component.ts +43 -0
  38. package/src/components/card-selection/card-selection.styles.ts +7 -0
  39. package/src/components/card-selection/card-selection.ts +10 -0
  40. package/src/components/category/category.component.ts +91 -0
  41. package/src/components/category/category.styles.ts +27 -0
  42. package/src/components/category/category.ts +10 -0
  43. package/src/components/category-image/category-image.component.ts +38 -0
  44. package/src/components/category-image/category-image.styles.ts +11 -0
  45. package/src/components/category-image/category-image.ts +10 -0
  46. package/src/components/drawer/drawer.component.ts +82 -0
  47. package/src/components/drawer/drawer.styles.ts +54 -0
  48. package/src/components/drawer/drawer.ts +10 -0
  49. package/src/components/editor/editor.component.ts +135 -0
  50. package/src/components/editor/editor.styles.ts +13 -0
  51. package/src/components/editor/editor.ts +10 -0
  52. package/src/components/fabric-example/fabric-example.component.ts +268 -0
  53. package/src/components/fabric-example/fabric-example.styles.ts +23 -0
  54. package/src/components/fabric-example/fabric-example.test.ts +0 -0
  55. package/src/components/fabric-example/fabric-example.ts +12 -0
  56. package/src/components/image-slider/editor-card-slider.component.ts +136 -0
  57. package/src/components/image-slider/editor-card-slider.styles.ts +46 -0
  58. package/src/components/image-slider/editor-card-slider.ts +9 -0
  59. package/src/components/main.ts +17 -0
  60. package/src/components/message-selector/message-selector.component.ts +154 -0
  61. package/src/components/message-selector/message-selector.styles.ts +16 -0
  62. package/src/components/message-selector/message-selector.test.ts +64 -0
  63. package/src/components/message-selector/message-selector.ts +13 -0
  64. package/src/components/page-manager/page-manager.component.ts +228 -0
  65. package/src/components/page-manager/page-manager.styles.ts +9 -0
  66. package/src/components/page-manager/page-manager.ts +10 -0
  67. package/src/components/radio-button/radio-button.component.ts +118 -0
  68. package/src/components/radio-button/radio-button.styles.ts +13 -0
  69. package/src/components/radio-button/radio-button.ts +10 -0
  70. package/src/components/radio-group/radio-group.component.ts +203 -0
  71. package/src/components/radio-group/radio-group.styles.ts +19 -0
  72. package/src/components/radio-group/radio-group.ts +10 -0
  73. package/src/components/selector/selector.component.ts +115 -0
  74. package/src/components/selector/selector.styles.ts +9 -0
  75. package/src/components/selector/selector.ts +10 -0
  76. package/src/components/textarea/textarea.component.ts +234 -0
  77. package/src/components/textarea/textarea.styles.ts +178 -0
  78. package/src/components/textarea/textarea.ts +10 -0
  79. package/src/components/type-form/type-form.component.ts +121 -0
  80. package/src/components/type-form/type-form.styles.ts +7 -0
  81. package/src/components/type-form/type-form.ts +10 -0
  82. package/src/declaration.d.ts +44 -0
  83. package/src/events/events.ts +1 -0
  84. package/src/events/pbo-category-card-select.ts +7 -0
  85. package/src/internal/form.ts +376 -0
  86. package/src/internal/pairbo-element.ts +85 -0
  87. package/src/internal/slots.ts +54 -0
  88. package/src/internal/watch.ts +79 -0
  89. package/src/styles/component.styles.ts +17 -0
  90. package/src/styles/form-control.styles.ts +59 -0
  91. package/src/themes/default.css +414 -0
  92. package/temp +20 -0
  93. package/tsconfig.json +28 -0
  94. package/vite.config.ts +26 -0
package/.husky/pre-commit ADDED
@@ -0,0 +1 @@
1
+ npx --no-install lint-staged
package/.prettierignore ADDED
@@ -0,0 +1,16 @@
1
+ *.hbs
2
+ .cache
3
+ .github
4
+ cspell.json
5
+ dist
6
+ docs/search.json
7
+ src/components/icon/icons
8
+ src/react/index.ts
9
+ node_modules
10
+ package-lock.json
11
+ tsconfig.json
12
+ cdn
13
+ _site
14
+ eslint.config.mjs
15
+ my-custom-element.ts
16
+ vite.config.ts
package/.prettierrc.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "arrowParens": "avoid",
3
+ "bracketSpacing": true,
4
+ "htmlWhitespaceSensitivity": "css",
5
+ "insertPragma": false,
6
+ "bracketSameLine": false,
7
+ "jsxSingleQuote": false,
8
+ "printWidth": 120,
9
+ "proseWrap": "preserve",
10
+ "quoteProps": "as-needed",
11
+ "requirePragma": false,
12
+ "semi": true,
13
+ "singleQuote": false,
14
+ "tabWidth": 2,
15
+ "trailingComma": "es5",
16
+ "useTabs": false
17
+ }
package/README.md ADDED
@@ -0,0 +1,61 @@
1
+ # Custom Integration Components
2
+
3
+ This directory contains custom elements and integrations for the **Pairbo** project.
4
+
5
+ ## Roadmap
6
+
7
+ ### Preprepare
8
+
9
+ - [ ] **Live Documentation for Development and Future Reference**
10
+ _Status_: The basic structure has been initialized using **11ty**. However, the bundling process for `src/components` is not fully configured. Additionally, rendering inline `` `html` `` within Markdown to actual HTML in **11ty** is not yet fully functional.
11
+
12
+ ---
13
+
14
+ ### Phase 1: Core Card Editor
15
+
16
+ - [ ] **Font Dropdown Selector**
17
+ - [ ] **Editor Dropdown Selector**
18
+ - [ ] **Text Alignment Button Group**
19
+ - [ ] **Text Color Block**
20
+ - [ ] **Live Preview (Zoomed View)**
21
+ - [ ] **Typing Live Preview**
22
+ - [ ] **Handwritten Live Preview**
23
+ - [ ] **Image Slider**
24
+ - [ ] **CTA Button**
25
+ - [ ] **Handwritten Description Section**
26
+
27
+ ---
28
+
29
+ ### Phase 2: Core Card Selection
30
+
31
+ - [ ] **Image Slider for Card Covers**
32
+ _(4 columns on desktop, 2 columns on mobile)_
33
+ - [ ] **Category Selection**
34
+ - [ ] **Image Components (Optional)**
35
+
36
+ ---
37
+
38
+ ### Phase 3: Integration Components
39
+
40
+ - [ ] **Card Selection - Main Content**
41
+ - [ ] **Card Editor (Typing) - Right Content Group**
42
+ - [ ] **Card Editor (Handwritten) - Right Content Group**
43
+ - [ ] **Card Editor (Handwritten) - Content Section**
44
+ - [ ] **Card Editor (Typing) - Content Section**
45
+
46
+ ---
47
+
48
+ ### Phase 4: Modal/Pop-up
49
+
50
+ - [ ] **Checkboxes**
51
+ - [ ] **Basic Modal Implementation**
52
+ - [ ] **Sectioned Form in Modal**
53
+ - [ ] **Modal Submission API**
54
+
55
+ ---
56
+
57
+ ### Phase 5: Abstract Internal Logic
58
+
59
+ - **TBD** _(Detailed planning will be decided later.)_
60
+
61
+ This phase will focus on abstracting internal logic, such as retrieving card data and synchronizing editing information across different components.
package/cspell.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "words": [
3
+ "maxlength",
4
+ "minlength",
5
+ "pairbo",
6
+ "splide",
7
+ "splidejs"
8
+ ]
9
+ }
package/dev.html ADDED
@@ -0,0 +1,101 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Message Selector Demo</title>
7
+ <style>
8
+ body {
9
+ font-family: sans-serif;
10
+ padding: 1rem;
11
+ }
12
+
13
+ /* Style for the code snippet */
14
+ pre {
15
+ background: #f7f7f7;
16
+ padding: 1rem;
17
+ border: 1px solid #ccc;
18
+ border-radius: 4px;
19
+ overflow-x: auto;
20
+ margin-bottom: 2rem;
21
+ }
22
+
23
+ code {
24
+ font-family: monospace;
25
+ }
26
+
27
+ /* Style for the rendered custom element container */
28
+ .rendered {
29
+ margin-top: 2rem;
30
+ padding: 1rem;
31
+ border: 1px solid #ccc;
32
+ border-radius: 4px;
33
+ }
34
+
35
+ .rendered > div.toggle-container {
36
+ margin-bottom: 1rem;
37
+ }
38
+ </style>
39
+ </head>
40
+
41
+ <body>
42
+ <!-- Display the literal string by escaping the angle brackets -->
43
+ <pre><code>&lt;pairbo-message-selector&gt;&lt;/pairbo-message-selector&gt;</code></pre>
44
+
45
+ <div class="rendered">
46
+ <div class="toggle-container">
47
+ <button>Toggle Message Selector</button>
48
+ </div>
49
+ <!-- Here the default custom element will be rendered -->
50
+ <pairbo-message-selector id="default"></pairbo-message-selector>
51
+ </div>
52
+
53
+ <pre><code>
54
+ &lt;pairbo-message-selector
55
+ giftLabel="This is a custom label🎁"
56
+ premiumLabel="Let's have a premium card"
57
+ premiumDescription="TL;DR"
58
+ freeMessageSelected="Oh? How about a free message?"
59
+ &gt;&lt;/pairbo-message-selector&gt;
60
+ </code></pre>
61
+
62
+ <div class="rendered">
63
+ <div class="toggle-container">
64
+ <button>Toggle Message Selector</button>
65
+ </div>
66
+ <!-- Here the custom version of the custom element is rendered -->
67
+ <pairbo-message-selector
68
+ id="custom"
69
+ giftLabel="This is a custom label🎁"
70
+ premiumLabel="Let's have a premium card"
71
+ premiumDescription="TL;DR"
72
+ freeMessageSelected="Oh? How about a free message?"
73
+ >
74
+ </pairbo-message-selector>
75
+
76
+ <fabric-example></fabric-example>
77
+ </div>
78
+
79
+ <!-- Vite will transform and serve the TS file on the fly -->
80
+ <script type="module" src="/src/components/message-selector/message-selector.ts"></script>
81
+ <script type="module" src="/src/components/fabric-example/fabric-example.ts"></script>
82
+
83
+ <script>
84
+ // Add an event listener to each toggle button.
85
+ document.querySelectorAll(".toggle-container button").forEach(button => {
86
+ button.addEventListener("click", event => {
87
+ // Find the nearest container with class "rendered"
88
+ const container = event.target.closest(".rendered");
89
+ if (container) {
90
+ // Find the custom element within that container.
91
+ const messageSelector = container.querySelector("pairbo-message-selector");
92
+ // If the custom element has the toggleMessageSelector method, call it.
93
+ if (messageSelector && typeof messageSelector.toggleMessageSelector === "function") {
94
+ messageSelector.toggleMessageSelector();
95
+ }
96
+ }
97
+ });
98
+ });
99
+ </script>
100
+ </body>
101
+ </html>
package/docs/README.md ADDED
@@ -0,0 +1 @@
1
+ # Heading
package/docs/_includes/component.njk ADDED
@@ -0,0 +1,16 @@
1
+ {%extends 'default.njk'%}
2
+
3
+ {% block content%}
4
+ <!DOCTYPE html>
5
+ <html lang="en">
6
+ <head>
7
+ <meta charset="UTF-8">
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
+ <title>{{ title }}</title>
10
+ </head>
11
+ <body>
12
+ {{ content | safe }}
13
+ <script type="module" src="/dist/my-custom-element.umd.js"></script>
14
+ </body>
15
+ </html>
16
+ {% endblock %}
package/docs/_includes/default.njk ADDED
@@ -0,0 +1,39 @@
1
+ <!DOCTYPE html>
2
+ <html
3
+ lang="en"
4
+ data-layout="{{ layout }}"
5
+ data-shoelace-version="{{ meta.version }}"
6
+ >
7
+ <header></header>
8
+ <body>
9
+ {% set baseURL = "---Test base url---" %}
10
+ <aside id="sidebar" data-preserve-scroll>
11
+ This is the default template with the toc sidebar
12
+ <nav>
13
+ {% include 'sidebar.njk' %}
14
+ </nav>
15
+ </aside>
16
+
17
+ {# Content #}
18
+ <main>
19
+ <a id="main-content"></a>
20
+ <article id="content" class="content{% if toc %} content--with-toc{% endif %}">
21
+ {% if toc %}
22
+ <div class="content__toc">
23
+ <ul>
24
+ <li class="top">
25
+ <a href="#">{{ meta.title }}</a>
26
+ </li>
27
+ </ul>
28
+ </div>
29
+ {% endif %}
30
+
31
+ <div class="content__body">
32
+ {% block content %}
33
+ {{ content | safe }}
34
+ {% endblock %}
35
+ </div>
36
+ </article>
37
+ </main>
38
+ </body>
39
+ </html>
package/docs/_includes/sidebar.njk ADDED
@@ -0,0 +1,16 @@
1
+ <ul>
2
+ <li>
3
+ <a href="/">Home Page</a>
4
+ </li>
5
+ <li>
6
+ <a href="/fabric-example">Fabric Example</a>
7
+ </li>
8
+ <li>
9
+ <h2>Components</h2>
10
+ <ul>
11
+ <li>
12
+ <a href="/components/message-selector">Alert</a>
13
+ </li>
14
+ </ul>
15
+ </li>
16
+ </ul>
package/docs/eleventy.config.mjs ADDED
@@ -0,0 +1,72 @@
1
+ import fs from "fs";
2
+ import path from "path";
3
+ import { fileURLToPath } from "url";
4
+ import markdownIt from "markdown-it";
5
+ import markdownItAttrs from "markdown-it-attrs";
6
+
7
+ const __filename = fileURLToPath(import.meta.url);
8
+ const __dirname = path.dirname(__filename);
9
+
10
+ export default function (eleventyConfig) {
11
+ eleventyConfig.addGlobalData("meta", {
12
+ title: "Shoelace",
13
+ description: "A forward-thinking library of web components.",
14
+ });
15
+ eleventyConfig.addGlobalData("layout", "default"); // make 'default' the default layout
16
+
17
+ // Add directories for component demos and source files
18
+ eleventyConfig.addPassthroughCopy({ "../src/components": "components" });
19
+ eleventyConfig.addPassthroughCopy({
20
+ [path.join(__dirname, "../src")]: "src",
21
+ });
22
+ eleventyConfig.addPassthroughCopy({
23
+ [path.join(__dirname, "../dist")]: "dist",
24
+ });
25
+
26
+ // Add a collection for components
27
+ eleventyConfig.addCollection("components", () => {
28
+ const componentsDir = path.join(__dirname, "../src/components");
29
+ return fs.readdirSync(componentsDir).filter(file => file.endsWith(".ts"));
30
+ });
31
+
32
+ // Generate a page for each component
33
+ eleventyConfig.addCollection("componentPages", () => {
34
+ const componentsDir = path.join(__dirname, "../src/components");
35
+ return fs
36
+ .readdirSync(componentsDir)
37
+ .filter(file => file.endsWith(".ts"))
38
+ .map(file => {
39
+ const componentName = path.basename(file, ".ts");
40
+ return {
41
+ inputPath: path.join(componentsDir, file),
42
+ outputPath: path.join(__dirname, "../_site/components", `${componentName}.html`),
43
+ data: {
44
+ title: `${componentName} Component`,
45
+ layout: "component",
46
+ componentName,
47
+ },
48
+ };
49
+ });
50
+ });
51
+
52
+ // Configure markdown-it with markdown-it-attrs
53
+ const markdownLib = markdownIt({
54
+ html: true,
55
+ breaks: true,
56
+ linkify: true,
57
+ }).use(markdownItAttrs);
58
+
59
+ eleventyConfig.setLibrary("md", markdownLib);
60
+ eleventyConfig.addPassthroughCopy({ "docs/pages/fabric-example.js": "fabric-example.js" });
61
+ // Configure Eleventy
62
+ return {
63
+ dir: {
64
+ input: "docs/pages",
65
+ output: "_site",
66
+ includes: "../_includes",
67
+ data: "_data",
68
+ },
69
+ markdownTemplateEngine: "njk",
70
+ templateEngineOverride: ["njk"],
71
+ };
72
+ }
package/docs/pages/components/message-selector.md ADDED
@@ -0,0 +1,17 @@
1
+ ---
2
+ title: Message Selector Component
3
+ layout: component
4
+ componentName: message-selector
5
+ ---
6
+
7
+ # Message Selector Component
8
+
9
+ This is a demo page for the `message-selector` component.
10
+
11
+ ```js
12
+ console.log("hello");
13
+ ```
14
+
15
+ <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?">
16
+ </pairbo-message-selector>
17
+ <fabric-example></fabric-example>
package/docs/pages/fabric-example.html ADDED
@@ -0,0 +1,46 @@
1
+ <script src="https://cdn.jsdelivr.net/npm/fabric@latest/dist/fabric.min.js"></script>
2
+ <h1>Fabric Example</h1>
3
+ <div id="content">
4
+ <canvas id="fabric-canvas" width="500" height="500"></canvas>
5
+ </div>
6
+
7
+ <script>
8
+ const canvas = new fabric.Canvas("fabric-canvas");
9
+ const helloWorld = new fabric.Textbox("1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12", {
10
+ fontSize: 16,
11
+ left: 100,
12
+ top: 100,
13
+ width: 200,
14
+ height: 200,
15
+ fixedWidth: 200,
16
+ lockScalingX: true,
17
+ lockScalingY: true,
18
+ lockScalingZ: true,
19
+ });
20
+ helloWorld.on("", function (e) {
21
+ console.log("selection:changed", e);
22
+ });
23
+ console.log("Available Fabric events:", helloWorld.__eventListeners);
24
+ helloWorld.on("changed", function () {
25
+ console.log("The text has changed", helloWorld);
26
+ let lines = helloWorld.textLines;
27
+ if (lines.length > 12) {
28
+ lines = lines.slice(0, 12);
29
+ helloWorld.text = lines.join("\n");
30
+ helloWorld.setSelectionStart(helloWorld.text.length);
31
+ helloWorld.setSelectionEnd(helloWorld.text.length);
32
+ }
33
+ console.log(lines);
34
+ console.log("Hello World was clicked");
35
+ });
36
+ console.log({ helloWorld });
37
+ canvas.add(helloWorld);
38
+ canvas.centerObject(helloWorld);
39
+ canvas.renderAll();
40
+ </script>
41
+
42
+ <style>
43
+ #fabric-canvas {
44
+ border: 1px solid black;
45
+ }
46
+ </style>
package/docs/pages/fabric-example.js ADDED
@@ -0,0 +1,28 @@
1
+ import { Canvas, Textbox } from "fabric";
2
+ const canvas = new Canvas("fabric-canvas");
3
+ const helloWorld = new Textbox("1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n11\n12", {
4
+ fontSize: 16,
5
+ left: 100,
6
+ top: 100,
7
+ width: 200,
8
+ height: 200,
9
+ lockScalingX: true,
10
+ lockScalingY: true,
11
+ });
12
+
13
+ helloWorld.on("changed", function () {
14
+ console.log("The text has changed", helloWorld);
15
+ let lines = helloWorld.textLines;
16
+ if (lines.length > 12) {
17
+ lines = lines.slice(0, 12);
18
+ helloWorld.text = lines.join("\n");
19
+ helloWorld.setSelectionStart(helloWorld.text.length);
20
+ helloWorld.setSelectionEnd(helloWorld.text.length);
21
+ }
22
+ console.log(lines);
23
+ console.log("Hello World was clicked");
24
+ });
25
+ console.log({ helloWorld });
26
+ canvas.add(helloWorld);
27
+ canvas.centerObject(helloWorld);
28
+ canvas.renderAll();
package/docs/pages/index.md ADDED
@@ -0,0 +1,76 @@
1
+ # Pairbo Custom Integration
2
+
3
+ Welcome to Pairbo Custom Integration - a suite of customizable web components designed to enhance e-commerce platforms with personalized card selection and messaging capabilities.
4
+
5
+ ## Project Overview
6
+
7
+ 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.
8
+
9
+ ## Core Features
10
+
11
+ ### Custom Components
12
+
13
+ - **Enhanced Checkbox Components**: Custom-styled, accessible checkbox elements
14
+ - **Card Selection Module**: Interactive popup interface for browsing and selecting greeting cards
15
+ - **Message Editor Modules**:
16
+ - Text-based message editor for typed greetings
17
+ - Handwriting-enabled editor for personal notes
18
+
19
+ ### Technical Benefits
20
+
21
+ - Framework-agnostic implementation using Web Components
22
+ - TypeScript for type safety and better developer experience
23
+ - Comprehensive test coverage
24
+ - Detailed documentation with live examples
25
+ - Optional framework wrappers (React/Vue)
26
+
27
+ ## Project Timeline
28
+
29
+ ### Phase 1: Foundation (Week 1)
30
+
31
+ - Development environment setup
32
+ - Tool configuration (ESLint, Prettier, TypeScript)
33
+ - Documentation framework implementation
34
+
35
+ ### Phase 2: Core Development (Weeks 2-3)
36
+
37
+ - Component development
38
+ - Automated testing implementation
39
+ - Integration testing
40
+
41
+ ### Phase 3: Documentation (Weeks 3-4)
42
+
43
+ - API documentation
44
+ - Integration guides
45
+ - Usage examples
46
+
47
+ ### Phase 4: Delivery (Week 4)
48
+
49
+ - Build optimization
50
+ - CDN configuration
51
+ - Production deployment
52
+
53
+ ### Phase 5: Extensions (Week 5)
54
+
55
+ - Framework wrapper development
56
+ - Demo integration implementation
57
+ - Final testing and refinement
58
+
59
+ For detailed timeline and milestones, please refer to our [Roadmap](./roadmap.md) section.
60
+
61
+ ## Getting Started
62
+
63
+ - [Issue Tracker](https://github.com/pairbo/custom-integration/issues)
64
+ - [GitHub Repository](https://github.com/pairbo/custom-integration)
65
+
66
+ For technical support and contributions, please visit our:
67
+
68
+ ## Support
69
+
70
+ - [Integration Examples](./examples/index.md)
71
+ - [Component Documentation](./components/index.md)
72
+ - [Installation Guide](./installation.md)
73
+
74
+ To begin integrating Pairbo components into your e-commerce platform, please refer to our:
75
+
76
+ For integration guides and detailed documentation, please navigate to the respective sections using the sidebar navigation.
package/eslint.config.mjs ADDED
@@ -0,0 +1,32 @@
1
+ import globals from 'globals';
2
+ import tseslint, { parser } from 'typescript-eslint';
3
+ import eslintPluginPrettier from 'eslint-plugin-prettier/recommended';
4
+ import {configs as litConfigs} from 'eslint-plugin-lit'
5
+ import {fileURLToPath} from 'url';
6
+
7
+ const __dirname = fileURLToPath(new URL('.', import.meta.url));
8
+ console.log(`${__dirname}/tsconfig.json`)
9
+ export default [
10
+ {
11
+ files: ['src'],
12
+ ignores: ['**/node_modules/**', '**/dist/**', '**/build/**', 'scripts/plop/plopfile.js']
13
+ },
14
+ // TODO: Try to override the parserOptions.project with the tsconfig.json in the root
15
+ {
16
+ files: ['scr/**/*.ts'],
17
+ languageOptions:{globals: globals.browser},
18
+ parser: "@typescript-eslint/parser",
19
+ parserOptions: {
20
+ project: `${__dirname}/tsconfig.json`,
21
+ tsconfigRootDir: __dirname,
22
+ },
23
+ },
24
+ { languageOptions: { globals: globals.browser } },
25
+ {
26
+ rules: {
27
+ "no-unused-vars": "warn",
28
+ }
29
+ },
30
+ eslintPluginPrettier,
31
+ litConfigs['flat/recommended'],
32
+ ];
package/ignote_temp ADDED
@@ -0,0 +1,3 @@
1
+ node_modules
2
+ dist
3
+ .husky/