@salla.sa/twilight 1.0.4 → 1.0.6

package/components/package.json

@@ -19,7 +19,8 @@
   "unpkg": "dist/atoms/atoms.js",
   "files": [
     "dist/",
-    "loader/"
+    "loader/",
+    "src/"
   ],
   "repository": {
     "type": "git",

package/components/src/_redirects

@@ -0,0 +1,5 @@
+# *** Warning! Your custom domain is not using HTTPS yet ***
+# These rules will change if you change your site’s custom domains or HTTPS settings
+
+# Redirect default Netlify subdomain to primary domain
+https://salla-web-components.netlify.com/* https://salla-web-components.salla.sa/:splat 301!

package/components/src/components/generate-summary.js

@@ -0,0 +1,35 @@
+var fs = require('fs'), path = require('path'), util = require('util');
+
+var dirToJSON = function (dir, done) {
+  var results = [];
+
+  function recWalk(d, res) {
+    var list = fs.readdirSync(d);
+    list.forEach((name) => {
+      var file = path.resolve(d, name);
+      var stat = fs.statSync(file);
+      if (stat && stat.isDirectory()) {
+        var title;
+        if (name) {
+          title = 'salla-' + name
+        }
+        res.push({ title: title, file: name + '/readme.md' });
+      }
+    });
+  }
+
+  try {
+    recWalk(dir, results);
+    done(null, results);
+  } catch (err) {
+    done(err);
+  }
+};
+
+dirToJSON("src/components", function (err, results) {
+  if (err) console.log(err);
+  else fs.writeFile('src/components/summary.json', JSON.stringify(results), 'utf8', function (err) {
+    if (err) throw err;
+    console.log('Saved!');
+  });
+});

package/components/src/components/salla-login/readme.md

@@ -0,0 +1,18 @@
+# salla-login
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property     | Attribute     | Description                            | Type      | Default             |
+| ------------ | ------------- | -------------------------------------- | --------- | ------------------- |
+| `searchIcon` | `search-icon` |                                        | `string`  | `'Search_Icon.svg'` |
+| `visible`    | `visible`     | If 'true' will make the modal visible. | `boolean` | `false`             |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/components/src/components/salla-login/salla-login.scss

@@ -0,0 +1,105 @@
+.wrapper {
+  opacity: 0;
+  visibility: hidden;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+
+  background: rgb(252 252 252);
+  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
+  transition: opacity 0.5s, visibility 0s 0.5s;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1050;
+
+  .modal {
+    font-family: Helvetica, sans-serif;
+    font-size: 14px;
+    background-color: #fff;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+
+    @media (min-width: 576px) {
+      max-width: 500px;
+    }
+
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 0.3rem;
+
+    .displayed {
+      display: flex;
+    }
+
+    .modal-body {
+      position: relative;
+      -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+      padding: 1rem;
+    }
+  }
+}
+
+.visible {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1);
+  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
+}
+
+.hide {
+  display: none !important;
+}
+
+.show {
+  display: block !important;
+}
+
+.search-box {
+  display: flex;
+
+  input {
+    width: 100%;
+    padding: 10px;
+    padding-inline-start: 32px;
+  }
+  button{
+    background-color: transparent;
+    border: 0;
+    position: absolute;
+    padding: 12px;
+    left: 12px;
+  }
+}
+
+.results {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: 300px;
+  overflow-y: scroll;
+
+  .product-img {
+    width: 50px;
+    margin-inline-end: 10px;
+  }
+
+  a:first-child{
+    margin-top: 20px;
+  }
+
+  a {
+    display: flex;
+    border-bottom: 1px solid #ddd;
+
+    h5 {
+      margin-top: 5px;
+    }
+  }
+}

package/components/src/components/salla-login/salla-login.tsx

@@ -0,0 +1,110 @@
+import { Component, h, Prop, Listen, State } from '@stencil/core';
+
+@Component({
+  tag: 'salla-login',
+  styleUrl: 'salla-login.scss',
+  shadow: true,
+  assetsDirs: ['assets'],
+})
+export class SallaLogin {
+  @State() searchTerm: string;
+  @State() results: string[];
+  @State() fetchStatus: string = '';
+  @State() showResult: boolean;
+  @Prop() searchIcon = 'Search_Icon.svg';
+
+  /**
+   * If 'true' will make the modal visible.
+   */
+  @Prop({ mutable: true, reflect: true }) visible: boolean = false;
+
+  @Listen('click', { target: 'window' })
+  handleClick(ev) {
+    if (
+      !ev.path.some(x => x.className && x.className.includes('modal-body')) &&
+      ev.target.localName === 'salla-search-modal'
+    ) {
+      this.visible = false;
+    }
+  }
+
+
+  private handleClose = () => {
+    this.visible = false;
+  };
+
+
+  render() {
+    return (
+      <div class={this.visible ? 'wrapper visible' : 'wrapper'}>
+        <div class="modal">
+
+        <div class='modal-header'>
+            <h5 class="title">سجل دخول إلي الموقع</h5>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+              onClick={this.handleClose}
+            >
+              <span aria-hidden="true">×</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            
+          <div id="showLoginMethods">
+            <p class="text-sm text-gray-text mb-5">اختر الوسيلة المناسبة</p>
+            <div id="openEmailLogin" class="mb-2.5 box-content relative rounded-md border border-border-color bg-white py-5 pe-4 ps-5 flex items-center space-s-3 hover:border-gray-200">
+              <div class="flex-shrink-0">
+                <div class="bg-primary w-12 h-12 text-lg text-white rounded-icon">
+                  <i class="sicon-mail"></i>
+                </div>
+              </div>
+              <div class="flex-1 min-w-0">
+                <a href="#" class="focus:outline-none flex justify-between items-center">
+                  <div class="flex-1">
+                    <span class="absolute inset-0" aria-hidden="true"></span>
+                    <p class="text-sm text-gray-text">
+                      سجل دخول
+                    </p>
+                    <h6 class="font-boldf">
+                      البريد الإلكتروني
+                    </h6>
+                  </div>
+                  <i class="sicon-keyboard_arrow_left text-primary text-xl"></i>
+                </a>
+              </div>
+            </div>
+            <div class="box-content relative rounded-md border border-border-color bg-white py-5 pe-4 ps-5 flex items-center space-s-3 hover:border-gray-200">
+              <div class="flex-shrink-0">
+                <div class="bg-primary w-12 h-12 text-lg text-white rounded-icon">
+                  <i class="sicon-phone"></i>
+                </div>
+              </div>
+              <div class="flex-1 min-w-0">
+                <a href="#" class="focus:outline-none flex justify-between items-center">
+                  <div class="flex-1">
+                    <span class="absolute inset-0" aria-hidden="true"></span>
+                    <p class="text-sm text-gray-text">
+                      سجل دخول
+                    </p>
+                    <h6 class="font-boldf">
+                      الهاتف
+                    </h6>
+                  </div>
+                  <i class="sicon-keyboard_arrow_left text-primary text-xl"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+
+
+            
+           
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

package/components/src/components/search-modal/readme.md

@@ -0,0 +1,17 @@
+# salla-search-modal
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute            | Description                               | Type     | Default             |
+| ------------------- | -------------------- | ----------------------------------------- | -------- | ------------------- |
+| `searchPlaceholder` | `search-placeholder` | The text to overwrite search placeholder. | `string` | `'Search here ...'` |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/components/src/components/search-modal/search-modal.scss

@@ -0,0 +1,37 @@
+// .s-search-modal-search-button-icon {}
+
+// .s-search-modal-container {}
+
+// .s-search-modal-wrapper {}
+
+// .s-search-modal-inner {}
+
+// .s-search-modal-search-box-container {}
+
+// .s-search-modal-search-box-inner {}
+
+// .s-search-modal-search-box-inner-open {}
+
+// .s-search-modal-input {}
+
+// .s-search-modal-search-icon {}
+
+// .s-search-modal-spinner {}
+
+// .s-search-modal-spinner-loader {}
+
+// .s-search-modal-search-results {}
+
+// .s-search-modal-no-results {}
+
+// .s-search-modal-product {}
+
+// .s-search-modal-product-image-container {}
+
+// .s-search-modal-product-image {}
+
+// .s-search-modal-product-details {}
+
+// .s-search-modal-product-title {}
+
+// .s-search-modal-product-price {}

package/components/src/components/search-modal/search-modal.tsx

@@ -0,0 +1,182 @@
+import { Component, h, Host, Prop, State, Element } from '@stencil/core';
+import { HTMLStencilElement } from '@stencil/core/internal';
+
+@Component({
+  tag: 'salla-search-modal',
+  styleUrl: 'search-modal.scss',
+  scoped: false,
+  assetsDirs: ['assets'],
+})
+export class SearchModal {
+  @State() searchTerm: string;
+  @State() results: string[];
+  @State() fetchStatus: string = '';
+  @State() showResult: boolean;
+  @State() showModal: boolean = false;
+
+  /**
+   * The text to overwrite search placeholder.
+   */
+  @Prop() searchPlaceholder: string = 'Search here ...';
+
+  /**
+   * The text to overwrite no results text.
+   */
+  @Prop() noResultsText: string = 'There are no results at the moment';
+
+  private hasSearchIconSlot: boolean;
+  private hasProductTemplateSlot: boolean;
+  private productTemplateHtml: string;
+
+
+  @Element() hostElement: HTMLStencilElement;
+  componentWillLoad() {
+    this.hasSearchIconSlot = !!this.hostElement.querySelector('[slot="search-icon"]');
+    this.hasProductTemplateSlot = !!this.hostElement.querySelector('[slot="product-template"]');
+    if(this.hasProductTemplateSlot){
+      this.productTemplateHtml = this.hostElement.querySelector('[slot="product-template"]').innerHTML;
+    }
+
+  }
+
+  private handleChange = event => {
+    this.searchTerm = event.target.value;
+    this.fetchStatus = 'loading';
+    this.showResult = false;
+    this.results = [];
+    if (this.searchTerm.length > 2) {
+      window.salla.search.api
+        .search(this.searchTerm)
+        .then(response => response)
+        .then(response => {
+          console.log('response', response);
+          this.fetchStatus = 'idle';
+          this.results = response.results;
+          this.showResult = true;
+          if (this.results.length < 1) {
+            this.fetchStatus = 'error';
+          }
+        })
+        .catch(err => {
+          this.showResult = true;
+          this.fetchStatus = 'error';
+          console.log(err);
+        });
+    }
+  };
+
+  private getProduct(item) {
+    // todo use art-template  https://aui.github.io/art-template/docs/.
+   if(this.hasProductTemplateSlot) {
+    let product = this.productTemplateHtml
+    .replace("{title}", item.title)
+    .replace("{price}", item.price?.after)
+    .replace("{url}", item.url)
+    .replace("{thumb}", item.thumb);
+    return (
+      <div class="s-search-modal-product" innerHTML={product}></div>
+    )
+   }else{
+    return (
+        <div class="s-search-modal-product">
+          <a target="_blank" href={item.url} class="s-search-modal-product-image-container">
+            <img class="s-search-modal-product-image" src={item.thumb} />
+          </a>
+          <div class="s-search-modal-product-details">
+            <div class="s-search-modal-product-title">
+              {item.title}
+            </div>
+            <div class="s-search-modal-product-price">
+              {item.price?.after}
+            </div>
+          </div>
+        </div>
+    );
+   }
+  }
+
+  private openSearch = () => {
+    this.searchTerm = '';
+    this.fetchStatus = '';
+    this.results = [];
+    this.showModal = true;
+    window.scrollTo(0, 0);
+    document.getElementsByTagName('html')[0].style.position = 'fixed';
+    document.getElementsByTagName('html')[0].style.overflowY = 'scroll';
+  };
+
+  private closeSearch = () => {
+    this.searchTerm = '';
+    this.fetchStatus = '';
+    this.results = [];
+    document.getElementsByTagName('html')[0].style.position = 'static';
+    document.getElementsByTagName('html')[0].style.overflowY = 'auto';
+    this.showModal = false;
+  };
+
+  render() {
+    return (
+      <Host class="s-search-modal">
+        <button type="button" onClick={this.openSearch} class="s-search-modal-search-button-icon">
+          {this.hasSearchIconSlot ? (
+            <slot name="search-icon" />
+          ) : (
+            <i class="sicon-search font-bold"></i>
+          )}
+        </button>
+
+        {this.showModal && (
+          <div class="s-search-modal-container" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+            <div class="s-search-modal-wrapper" onClick={this.closeSearch}>
+              <div class="s-search-modal-inner" onClick={e => {
+                        e.stopPropagation();
+                      }}>
+                <div class="s-search-modal-search-box-container">
+                  <div
+                    class={
+                      !this.showResult
+                        ? 's-search-modal-search-box-inner'
+                        : 's-search-modal-search-box-inner-open'
+                    }
+                  >
+                    <input
+                      class="s-search-modal-input"
+                      type="text"
+                      placeholder={this.searchPlaceholder}
+                      value={this.searchTerm}
+                      onInput={event => this.handleChange(event)}
+                    />
+
+                    {this.fetchStatus != 'loading' ? (
+                      <button class="s-search-modal-search-icon">
+                        <i class="sicon-search"></i>
+                      </button>
+                    ) : (
+                      <span class="s-search-modal-spinner">
+                        <span class="s-search-modal-spinner-loader"></span>
+                      </span>
+                    )}
+                  </div>
+                </div>
+
+                {/* results */}
+                <div class="s-search-modal-search-results">
+                  {this.fetchStatus === 'error' && (
+                    <p class="s-search-modal-no-results error p-4 text-sm text-gray-text">
+                      {this.noResultsText}
+                    </p>
+                  )}
+
+                  {this.results &&
+                    this.results.map(item => {
+                      return this.getProduct(item);
+                    })}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </Host>
+    );
+  }
+}

package/components/src/components/summary.json

@@ -0,0 +1 @@
+[{"title":"salla-salla-login","file":"salla-login/readme.md"},{"title":"salla-search-modal","file":"search-modal/readme.md"}]

package/components/src/components.d.ts

@@ -0,0 +1,76 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+export namespace Components {
+    interface SallaLogin {
+        "searchIcon": string;
+        /**
+          * If 'true' will make the modal visible.
+         */
+        "visible": boolean;
+    }
+    interface SallaSearchModal {
+        /**
+          * The text to overwrite no results text.
+         */
+        "noResultsText": string;
+        /**
+          * The text to overwrite search placeholder.
+         */
+        "searchPlaceholder": string;
+    }
+}
+declare global {
+    interface HTMLSallaLoginElement extends Components.SallaLogin, HTMLStencilElement {
+    }
+    var HTMLSallaLoginElement: {
+        prototype: HTMLSallaLoginElement;
+        new (): HTMLSallaLoginElement;
+    };
+    interface HTMLSallaSearchModalElement extends Components.SallaSearchModal, HTMLStencilElement {
+    }
+    var HTMLSallaSearchModalElement: {
+        prototype: HTMLSallaSearchModalElement;
+        new (): HTMLSallaSearchModalElement;
+    };
+    interface HTMLElementTagNameMap {
+        "salla-login": HTMLSallaLoginElement;
+        "salla-search-modal": HTMLSallaSearchModalElement;
+    }
+}
+declare namespace LocalJSX {
+    interface SallaLogin {
+        "searchIcon"?: string;
+        /**
+          * If 'true' will make the modal visible.
+         */
+        "visible"?: boolean;
+    }
+    interface SallaSearchModal {
+        /**
+          * The text to overwrite no results text.
+         */
+        "noResultsText"?: string;
+        /**
+          * The text to overwrite search placeholder.
+         */
+        "searchPlaceholder"?: string;
+    }
+    interface IntrinsicElements {
+        "salla-login": SallaLogin;
+        "salla-search-modal": SallaSearchModal;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "salla-login": LocalJSX.SallaLogin & JSXBase.HTMLAttributes<HTMLSallaLoginElement>;
+            "salla-search-modal": LocalJSX.SallaSearchModal & JSXBase.HTMLAttributes<HTMLSallaSearchModalElement>;
+        }
+    }
+}