@salla.sa/twilight-bundles-starter-kit 0.1.1

package/README.md

@@ -0,0 +1,184 @@
+# Salla Twilight Bundles Starter Kit
+
+This starter kit provides a foundation for building custom Twilight components for Salla's e-commerce platform. It includes a pre-configured build setup and development environment to help you get started quickly.
+
+## Getting Started
+
+1. Clone this repository
+2. Remove the example components in `src/components/`
+3. Create your own components using the component generator:
+   ```
+   pnpm run create-component
+   ```
+4. Run `pnpm install` to install dependencies
+5. Run `pnpm run dev` to start the development server
+6. Run `pnpm run build` to build your components for production
+
+## Project Structure
+
+```
+src/
+  components/
+    your-component-name/
+      index.ts        # Main component file
+      styles.ts       # Component styles (optional)
+      types.ts        # Component types (optional)
+```
+
+## Built-in Plugins
+
+This starter kit includes three Vite plugins that handle the build process:
+
+### 1. Transform Plugin (`sallaTransformPlugin`)
+- Transforms component files to ensure proper naming and registration
+- Matches components in `src/components/*/index.ts`
+- To disable: Remove from `vite.config.ts` plugins array
+
+### 2. Build Plugin (`sallaBuildPlugin`)
+- Handles component bundling and output
+- Creates individual files for each component in `dist/`
+- Configures external dependencies (lit libraries)
+- To customize: Remove from plugins array and configure your own build settings:
+  ```typescript
+  {
+    build: {
+      lib: {
+        entry: {/* your entries */},
+        formats: ['es'],
+        fileName: (format, entryName) => `${entryName}.js`
+      },
+      rollupOptions: {
+        external: [/^lit/],
+        output: {/* your output config */}
+      }
+    }
+  }
+  ```
+
+### 3. Demo Plugin (`sallaDemoPlugin`)
+- Provides a development environment for testing components
+- Creates a demo page with your components
+- Configures hot module reloading
+- To disable: Remove from plugins array and set up your own dev server
+
+### Demo Plugin Options
+
+The `sallaDemoPlugin` accepts the following configuration options:
+
+```typescript
+{
+  // Optional: Show only specific components
+  components?: string[];
+
+  // Optional: Customize the demo grid layout
+  grid?: {
+    // CSS grid-template-columns value
+    columns?: string;     // default: 'repeat(auto-fill, minmax(300px, 1fr))'
+    
+    // Gap between components
+    gap?: string;        // default: '1rem'
+    
+    // Responsive breakpoint
+    minWidth?: string;   // default: '300px'
+  };
+
+  // Optional: Add custom CSS
+  css?: string;
+
+  // Optional: Add custom JavaScript
+  js?: string;
+}
+```
+
+#### Example Configuration
+
+```typescript
+// vite.config.ts
+export default defineConfig({
+  plugins: [
+    // ... other plugins
+    sallaDemoPlugin({
+      // Show only specific components
+      components: ['product-card', 'scroll-top'],
+      
+      // Customize grid layout
+      grid: {
+        columns: 'repeat(3, 1fr)',
+        gap: '1.5rem',
+        minWidth: '768px'
+      },
+
+      // Add custom styles
+      css: `
+        .component-card {
+          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+          transition: transform 0.2s;
+        }
+        .component-card:hover {
+          transform: translateY(-2px);
+        }
+      `,
+
+      // Add custom JavaScript
+      js: `
+        console.log('Demo page loaded!');
+        // Add your custom JavaScript here
+      `
+    })
+  ]
+});
+```
+
+## Creating New Components
+
+This starter kit includes a component generator to help you create new components quickly. To use it, run:
+
+```bash
+pnpm create-component
+```
+
+The generator will:
+1. Prompt you for a component name (in kebab-case format)
+2. Validate that the name is in kebab-case and doesn't already exist
+3. Create a new component folder with an `index.ts` file
+4. Add the component definition to `twilight-bundle.json`
+
+## Component Requirements
+
+Each component should:
+1. Be a class that extends `LitElement`
+2. Export the class as default
+3. Be placed in its own directory under `src/components/`
+4. Have an `index.ts` as the entry point
+
+Example:
+```typescript
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export default class MyComponent extends LitElement {
+  @property({ type: String })
+  name = 'World';
+
+  static styles = css`/* your styles */`;
+
+  render() {
+    return html`<div>Hello ${this.name}!</div>`;
+  }
+}
+```
+
+## Building for Production
+
+Run `pnpm run build` to create production-ready bundles in the `dist/` directory. Each component will have its own file named after the component (e.g., `my-component.js`).
+
+## Development
+
+Run `pnpm run dev` to start the development server. This will:
+1. Create a demo page with all your components
+2. Enable hot module reloading
+3. Provide a development environment for testing
+
+## License
+
+MIT

package/dist/advanced-inputs.js

@@ -0,0 +1,54 @@
+import { LitElement as a, css as f, html as d } from "lit";
+import { property as p } from "lit/decorators.js";
+var c = Object.defineProperty, m = (s, r, e, g) => {
+  for (var i = void 0, o = s.length - 1, n; o >= 0; o--)
+    (n = s[o]) && (i = n(r, e, i) || i);
+  return i && c(r, e, i), i;
+};
+const l = class l extends a {
+  render() {
+    return this.config ? d`
+      <div class="grid">
+        ${Object.entries(this.config).map(([r, e]) => this.renderValue(r, e))}
+      </div>
+    ` : d`<div style="color: red;">Configuration is required</div>`;
+  }
+  renderValue(r, e) {
+    return typeof e == "object" && (e = JSON.stringify(e)), d`
+      <div class="label">${r}</div>
+      <code class="value">${e}</code>
+    `;
+  }
+};
+l.styles = f`
+    .grid {
+      display: grid;
+      grid-template-columns: 20% 75%;
+      gap: 0.5rem 1rem;
+      align-items: center;
+    }
+    .label { 
+      font-weight: bold; 
+      font-size: 0.9rem; 
+      text-align: left;
+    }
+    .value { 
+      background: #f5f5f5;
+      padding: 0.5rem;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-family: monospace;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      direction: ltr;
+    }
+  `;
+let t = l;
+m([
+  p({ type: Object })
+], t.prototype, "config");
+typeof t < "u" && t.registerSallaComponent("salla-advanced-inputs");
+export {
+  t as default
+};

package/dist/basic-inputs.js

@@ -0,0 +1,54 @@
+import { LitElement as a, css as f, html as d } from "lit";
+import { property as p } from "lit/decorators.js";
+var c = Object.defineProperty, m = (n, r, e, g) => {
+  for (var i = void 0, o = n.length - 1, s; o >= 0; o--)
+    (s = n[o]) && (i = s(r, e, i) || i);
+  return i && c(r, e, i), i;
+};
+const l = class l extends a {
+  render() {
+    return this.config ? d`
+      <div class="grid">
+        ${Object.entries(this.config).map(([r, e]) => this.renderValue(r, e))}
+      </div>
+    ` : d`<div style="color: red;">Configuration is required</div>`;
+  }
+  renderValue(r, e) {
+    return typeof e == "object" && (e = JSON.stringify(e)), d`
+      <div class="label">${r}</div>
+      <code class="value">${e}</code>
+    `;
+  }
+};
+l.styles = f`
+    .grid {
+      display: grid;
+      grid-template-columns: 20% 75%;
+      gap: 0.5rem 1rem;
+      align-items: center;
+    }
+    .label { 
+      font-weight: bold; 
+      font-size: 0.9rem; 
+      text-align: left;
+    }
+    .value { 
+      background: #f5f5f5;
+      padding: 0.5rem;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-family: monospace;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      direction: ltr;
+    }
+  `;
+let t = l;
+m([
+  p({ type: Object })
+], t.prototype, "config");
+typeof t < "u" && t.registerSallaComponent("salla-basic-inputs");
+export {
+  t as default
+};

package/dist/dropdown-list-source-input.js

@@ -0,0 +1,54 @@
+import { LitElement as f, css as p, html as l } from "lit";
+import { property as c } from "lit/decorators.js";
+var m = Object.defineProperty, g = (s, r, e, n) => {
+  for (var i = void 0, d = s.length - 1, a; d >= 0; d--)
+    (a = s[d]) && (i = a(r, e, i) || i);
+  return i && m(r, e, i), i;
+};
+const o = class o extends f {
+  render() {
+    return this.config ? l`
+      <div class="grid">
+        ${Object.entries(this.config).map(([r, e]) => this.renderValue(r, e))}
+      </div>
+    ` : l`<div style="color: red;">Configuration is required</div>`;
+  }
+  renderValue(r, e) {
+    return e = typeof e == "object" ? e.map((n) => n.label).join(", ") : e, l`
+      <div class="label">${r}</div>
+      <code class="value">${e}</code>
+    `;
+  }
+};
+o.styles = p`
+    .grid {
+      display: grid;
+      grid-template-columns: 30% 65%;
+      gap: 0.5rem 1rem;
+      align-items: center;
+    }
+    .label { 
+      font-weight: bold; 
+      font-size: 0.9rem; 
+      text-align: left;
+    }
+    .value { 
+      background: #f5f5f5;
+      padding: 0.5rem;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-family: monospace;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      direction: ltr;
+    }
+  `;
+let t = o;
+g([
+  c({ type: Object })
+], t.prototype, "config");
+typeof t < "u" && t.registerSallaComponent("salla-dropdown-list-source-input");
+export {
+  t as default
+};

package/dist/items-select-input.js

@@ -0,0 +1,51 @@
+import { LitElement as f, css as p, html as d } from "lit";
+import { property as c } from "lit/decorators.js";
+var m = Object.defineProperty, g = (s, r, e, n) => {
+  for (var i = void 0, o = s.length - 1, a; o >= 0; o--)
+    (a = s[o]) && (i = a(r, e, i) || i);
+  return i && m(r, e, i), i;
+};
+const l = class l extends f {
+  render() {
+    return this.config ? d`
+      <div class="grid">
+        ${Object.entries(this.config).map(([r, e]) => this.renderValue(r, e))}
+      </div>
+    ` : d`<div style="color: red;">Configuration is required</div>`;
+  }
+  renderValue(r, e) {
+    return e = typeof e == "object" ? e.map((n) => n.label).join(", ") : e, d`<div class="label">${r}</div><code class="value">${e}</code>`;
+  }
+};
+l.styles = p`
+    .grid {
+      display: grid;
+      grid-template-columns: 35% 60%;
+      gap: 0.5rem 1rem;
+      align-items: center;
+    }
+    .label { 
+      font-weight: bold; 
+      font-size: 0.9rem; 
+      text-align: left;
+    }
+    .value { 
+      background: #f5f5f5;
+      padding: 0.5rem;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-family: monospace;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      direction: ltr;
+    }
+  `;
+let t = l;
+g([
+  c({ type: Object })
+], t.prototype, "config");
+typeof t < "u" && t.registerSallaComponent("salla-items-select-input");
+export {
+  t as default
+};

package/dist/product-card.js

@@ -0,0 +1,160 @@
+import { LitElement as u, css as m, html as d } from "lit";
+import { property as l } from "lit/decorators.js";
+var g = Object.defineProperty, p = (s, t, r, a) => {
+  for (var e = void 0, i = s.length - 1, c; i >= 0; i--)
+    (c = s[i]) && (e = c(t, r, e) || e);
+  return e && g(t, r, e), e;
+};
+const n = class n extends u {
+  async connectedCallback() {
+    var r, a, e;
+    super.connectedCallback();
+    const t = (e = (a = (r = this.config) == null ? void 0 : r.product) == null ? void 0 : a[0]) == null ? void 0 : e.value;
+    if (!t) {
+      console.error('Product card config is not valid, you must provide `config="{...}"!');
+      return;
+    }
+    await window.Salla.onReady(), this.product = await window.Salla.product.api.getDetails(t).then((i) => i.data);
+  }
+  handleAddToCart() {
+    var t;
+    window.Salla.log("Adding to cart:", { product: this.product }), window.Salla.success(`Added ${(t = this.product) == null ? void 0 : t.name} to cart!`);
+  }
+  renderPlaceholder() {
+    return d`
+      <div class="product-card">
+        <div class="skeleton-image"></div>
+        <div class="skeleton-title"></div>
+        <div class="skeleton-price"></div>
+        <div class="skeleton-button"></div>
+      </div>
+    `;
+  }
+  render() {
+    var t, r;
+    return this.product ? d`
+      <div class="product-card">
+        <img
+          class="product-image"
+          src="${(t = this.product.image) == null ? void 0 : t.url}"
+          alt="${(r = this.product.image) == null ? void 0 : r.alt}"
+        />
+        <h3 class="product-title">${this.product.name}</h3>
+        <div>
+          <span class="price-tag">${window.Salla.money(this.product.price)}</span>
+          ${this.product.discount ? d`<span class="discount">${window.Salla.money(this.product.discount)}</span>` : ""}
+        </div>
+        <button class="add-to-cart" @click="${this.handleAddToCart}">
+          ${window.Salla.lang.get("pages.cart.add_to_cart")}
+        </button>
+      </div>
+    ` : this.renderPlaceholder();
+  }
+};
+n.styles = m`
+    .product-card {
+      width: 250px;
+      padding: 1rem;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      transition: transform 0.2s;
+      background: white;
+      margin: 1rem;
+    }
+    .product-card:hover {
+      transform: translateY(-5px);
+    }
+    .product-image {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+      border-radius: 4px;
+    }
+    .product-title {
+      margin: 0.5rem 0;
+      color: #333;
+      font-size: 1.1rem;
+    }
+    .price-tag {
+      font-size: 1.2rem;
+      color:var(--primary);
+      font-weight: bold;
+    }
+    .discount {
+      background: #ff4444;
+      color: white;
+      padding: 0.2rem 0.5rem;
+      border-radius: 4px;
+      font-size: 0.9rem;
+      margin-left: 0.5rem;
+    }
+    .add-to-cart {
+      width: 100%;
+      padding: 0.8rem;
+      margin-top: 1rem;
+      border: none;
+      border-radius: 4px;
+      background: var(--primary);
+      color: white;
+      font-weight: bold;
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    .add-to-cart:hover {
+      background: var(--primary-100);
+    }
+    
+    /* Skeleton loading styles */
+    @keyframes pulse {
+      0% { opacity: 0.6; }
+      50% { opacity: 0.8; }
+      100% { opacity: 0.6; }
+    }
+    
+    .skeleton-image {
+      width: 100%;
+      height: 200px;
+      background-color: #e0e0e0;
+      border-radius: 4px;
+      margin-bottom: 0.5rem;
+      animation: pulse 1.5s infinite ease-in-out;
+    }
+    
+    .skeleton-title {
+      width: 80%;
+      height: 20px;
+      background-color: #e0e0e0;
+      border-radius: 4px;
+      margin: 0.5rem 0;
+      animation: pulse 1.5s infinite ease-in-out;
+    }
+    
+    .skeleton-price {
+      width: 40%;
+      height: 24px;
+      background-color: #e0e0e0;
+      border-radius: 4px;
+      margin: 0.5rem 0;
+      animation: pulse 1.5s infinite ease-in-out;
+    }
+    
+    .skeleton-button {
+      width: 100%;
+      height: 40px;
+      background-color: #e0e0e0;
+      border-radius: 4px;
+      margin-top: 1rem;
+      animation: pulse 1.5s infinite ease-in-out;
+    }
+  `;
+let o = n;
+p([
+  l({ type: Object })
+], o.prototype, "config");
+p([
+  l({ type: Object })
+], o.prototype, "product");
+typeof o < "u" && o.registerSallaComponent("salla-product-card");
+export {
+  o as default
+};

package/dist/scroll-top.js

@@ -0,0 +1,20 @@
+class e extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = "↑", this.style.cssText = `
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 40px;
+        height: 40px;
+        background: hsl(var(--primary-400));
+        color: hsl(var(--primary-force));
+        cursor:pointer;
+        font-size: 24px;
+        `, this.onclick = () => window.scrollTo(0, 0);
+  }
+}
+typeof e < "u" && e.registerSallaComponent("salla-scroll-top");
+export {
+  e as default
+};

package/dist/table-list.js

@@ -0,0 +1,66 @@
+import { LitElement as p, css as c, html as d } from "lit";
+import { property as m } from "lit/decorators.js";
+var f = Object.defineProperty, b = (a, t, i, o) => {
+  for (var e = void 0, s = a.length - 1, n; s >= 0; s--)
+    (n = a[s]) && (e = n(t, i, e) || e);
+  return e && f(t, i, e), e;
+};
+const l = class l extends p {
+  render() {
+    var t, i;
+    return d`
+      <div class="table-list">
+        ${(i = (t = this.config) == null ? void 0 : t.items) == null ? void 0 : i.map(
+      (o) => d`
+            <div class="table-item">
+              <div class="item-content">
+                <h3 class="item-title">${o.title}</h3>
+                <p class="item-description">${o.description}</p> 
+              </div>
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+};
+l.styles = c`
+    .table-list {
+      width: 100%;
+      border-radius: 8px;
+      overflow: hidden;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    }
+    .table-item {
+      display: flex;
+      padding: 1rem;
+      background: white;
+      border-bottom: 1px solid #eee;
+      align-items: center;
+      transition: background 0.2s;
+    }
+    .table-item:hover {
+      background: #f8f9fa;
+    }
+    .item-content {
+      flex: 1;
+    }
+    .item-title {
+      font-weight: 500;
+      color: #2c3e50;
+      margin: 0;
+    }
+    .item-description {
+      color: #666;
+      font-size: 0.9rem;
+      margin: 4px 0 0;
+    }
+  `;
+let r = l;
+b([
+  m({ type: Object })
+], r.prototype, "config");
+typeof r < "u" && r.registerSallaComponent("salla-table-list");
+export {
+  r as default
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@salla.sa/twilight-bundles-starter-kit",
+  "version": "0.1.1",
+  "description": "Starter kit for building custom Salla components",
+  "type": "module",
+  "keywords": [
+    "salla",
+    "ecommerce",
+    "components",
+    "web-components",
+    "lit-element"
+  ],
+  "author": "Salla",
+  "license": "MIT",
+  "devDependencies": {
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@types/node": "^22.13.1",
+    "@typescript-eslint/eslint-plugin": "^8.24.0",
+    "@typescript-eslint/parser": "^8.24.0",
+    "esbuild": "^0.25.0",
+    "eslint": "^9.20.1",
+    "glob": "^11.0.1",
+    "jsdom": "^24.0.0",
+    "prettier": "^3.5.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0",
+    "vitest": "^3.0.5"
+  },
+  "dependencies": {
+    "lit": "^3.2.1",
+    "@salla.sa/twilight-bundles": "0.1.1"
+  },
+  "engines": {
+    "node": ">=16.0.0",
+    "pnpm": ">=9.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "format": "prettier --write \"src/**/*.{ts,html,css}\"",
+    "create-component": "tw-component"
+  }
+}