@salla.sa/twilight 1.0.19 → 1.6.13

package/types/event/comment.d.ts

@@ -0,0 +1,7 @@
+import {RequestErrorEventWithData} from "../common";
+import {AddCommentResponse} from "../api/comment";
+
+export default interface CommentEvent {
+    onAdded: (callback: (response: AddCommentResponse) => void, /*product/page id*/ id:number) => void;
+    onAdditionFailed: RequestErrorEventWithData</*product/page id*/number>;
+}

package/types/event/currency.d.ts

@@ -0,0 +1,9 @@
+import {ChangeCurrencyResponse, ListCurrenciesResponse} from "../api/currency";
+import {RequestErrorEvent} from "../common";
+
+export default interface CurrencyEvent {
+    onChanged: (callback: (response: ChangeCurrencyResponse, currency: 'SAR' | string) => void) => void;
+    onFetched: (callback: (response: ListCurrenciesResponse) => void) => void;
+    onFailed: RequestErrorEvent;
+    onFailedToFetch: RequestErrorEvent;
+}

package/types/event/document.d.ts

@@ -0,0 +1,29 @@
+import {RequestError} from "../common";
+
+export interface requestPayload {
+    namespace: string | 'cart';
+    action: string | 'latest';
+    hook: string | 'latest';
+    url: string | 'cart/latest';
+    payload: {} | { params: {} };
+    method: 'get' | 'post' | 'put' | 'delete';
+    headers?: {};
+}
+
+
+export default interface DocumentEvent {
+    onClick: (selector: string | ((event) => void), callback?: (event) => void) => void;
+    onChange: (selector: string | ((event) => void), callback?: (event) => void) => void;
+    onSubmit: (selector: string | ((event) => void), callback?: (event) => void) => void;
+    onKeyup: (selector: string | ((event) => void), callback?: (event) => void) => void;
+    onLeaving: (event: BeforeUnloadEvent) => boolean; //return false to show alert 'Changes you made may not be saved.'
+    onRequest: (payload: requestPayload) => void; //💡handy when there is need to prevent request by throwing an error `throw 'stop the request';`.
+    onRequestFailed: (payload: requestPayload, error?: RequestError) => void;
+    /**
+     * Helper method to fake firing event on element, for
+     * @example someInput.addEventListener("change",()=>{...});
+     * we want to fire this event programmatically, we can do that by:
+     * @example salla.document.event.fireEvent(someInput, 'change', {'bubbles': true})
+     */
+    fireEvent: (element: HTMLElement, eventName: 'click' | 'change' | string, payload: undefined | Object) => void;
+}

package/types/event/index.d.ts

@@ -0,0 +1,48 @@
+import AuthEvent from "./auth";
+import CartEvent from "./cart";
+import OrderEvent from "./order";
+import RatingEvent from "./rating";
+import CommentEvent from "./comment";
+import LoyaltyEvent from "./loyalty";
+import ProductEvent from "./product";
+import ProfileEvent from "./profile";
+import CurrencyEvent from "./currency";
+import DocumentEvent from "./document";
+import WishlistEvent from "./wishlist";
+import InfiniteScrollEvent from "./infiniteScroll";
+import ScopeEvents from "./scope";
+import Emitter from "@salla.sa/base/types/event";
+
+export type event = (symbol | string);
+
+export {
+    AuthEvent,
+    CartEvent,
+    OrderEvent,
+    RatingEvent,
+    CommentEvent,
+    LoyaltyEvent,
+    ProductEvent,
+    ProfileEvent,
+    CurrencyEvent,
+    DocumentEvent,
+    WishlistEvent,
+    InfiniteScrollEvent,
+    ScopeEvents,
+}
+
+export default interface TwilightEmitter extends Emitter {
+    auth: AuthEvent;
+    cart: CartEvent;
+    order: OrderEvent;
+    rating: RatingEvent;
+    comment: CommentEvent;
+    loyalty: LoyaltyEvent;
+    product: ProductEvent;
+    profile: ProfileEvent;
+    currency: CurrencyEvent;
+    document: DocumentEvent;
+    wishlist: WishlistEvent;
+    scope: ScopeEvents,
+    infiniteScroll: InfiniteScrollEvent;
+}

package/types/event/infiniteScroll.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @see https://infinite-scroll.com/events.html
+ */
+export default interface InfiniteScrollEvent {
+    onScrollThreshold: (callback: (event: Event) => void) => void;
+    onRequest: (callback: (event: Event, path: string, fetchPromise: Promise<any>) => void) => void;
+    onLoad: (callback: (event: Event, body: Body, path: string, response: Response) => void) => void;
+    onAppend: (callback: (event: Event, body: Body, path: string, items: NodeList, response: Response) => void) => void;
+    onError: (callback: (event: Event, error: Error, path: string, response: Response) => void) => void;
+    onLast: (callback: (event: Event, body: Body, path: string) => void) => void;
+    onHistory: (callback: (event: Event, title: string, path: string) => void) => void;
+}

package/types/event/loyalty.d.ts

@@ -0,0 +1,14 @@
+import { RequestErrorEvent, SuccessResponse } from "../common";
+import { LoyaltyApiResponse } from '../api/loyalty'
+
+export default interface LoyaltyEvent {
+
+    onProgramFetched: (callback: (response: LoyaltyApiResponse.program, prod_id: number) => void) => void;
+    onProgramNotFetched: RequestErrorEvent;
+    // Point
+    onExchangeFetched: (callback: (response: LoyaltyApiResponse.point, prod_id: number) => void) => void;
+    onExchangeFetchFailed: RequestErrorEvent;
+    // Reset Exchange
+    onResetSucceeded: (callback: (response: SuccessResponse) => void) => void;
+    onResetFailed: RequestErrorEvent
+}

package/types/event/order.d.ts

@@ -0,0 +1,11 @@
+import {RequestError, SuccessResponse} from "../common";
+import {CreateCartFromOrderResponse} from "../api/order";
+
+export default interface OrderEvent {
+    onCanceled: (callback: (response: SuccessResponse, order_id?: number) => void) => void;
+    onNotCanceled: (callback: (error: RequestError, order_id?: number) => void) => void;
+    onOrderCreated: (callback: (response: CreateCartFromOrderResponse, order_id?: number) => void) => void;
+    onOrderCreationFailed: (callback: (error: RequestError, order_id?: number) => void) => void;
+    onInvoiceSent: (callback: (response: SuccessResponse, order_id?: number) => void) => void;
+    onInvoiceNotSent: (callback: (error: RequestError | 'There is no id!', order_id?: number) => void) => void;
+}

package/types/event/product.d.ts

@@ -0,0 +1,30 @@
+import { OfferSummary } from "../api/cart";
+import { ProductResponse } from "../api/product";
+import { RequestError, RequestErrorEvent, RequestErrorEventWithData, SuccessResponse } from "../common";
+
+export default interface ProductEvent {
+    onPriceUpdated: (callback: (response: ProductResponse.getPrice, product_id: number) => void) => void;
+    onPriceUpdateFailed: RequestErrorEventWithData</*product_id*/ number>;
+    onAvailabilitySubscribed: (callback: (response: SuccessResponse, product_id: number) => void) => void;
+    onAvailabilitySubscribeFailed: RequestErrorEventWithData</*product_id*/ number>;
+    onCategoriesFetched: (callback: (response: ProductResponse.categories) => void) => void;
+    onCategoriesFailed: RequestError;
+    onSearchResults: (callback: (response: ProductResponse.search, query?: string) => void) => void;
+    onSearchFailed: RequestErrorEventWithData</*query*/string | undefined>;
+
+    onOfferExisted: (callback: (offer: OfferSummary) => void) => void;
+    onOffersFetched: (callback: (response: ProductResponse.offers) => void) => void;
+    onFetchOffersFailed: RequestErrorEvent;
+
+    onSizeGuideFetched: (callback: (response: ProductResponse.sizeGuides, prod_id: number) => void) => void;
+    onSizeGuideFetchFailed: RequestErrorEvent;
+
+    onGiftFetched: (callback: (response: ProductResponse.giftResponse, product_id: number) => void) => void;
+    onGiftFetchFailed: RequestErrorEvent;
+
+    onAddGiftToCartSucceeded: (callback: (response: ProductResponse.giftToCart, product_id: number) => void) => void;
+    onAddGiftToCartFailed: RequestErrorEvent;
+
+    onGiftImageUploadSucceeded: (callback: (response: ProductResponse.giftImageUpload) => void) => void;
+    onGiftImageUploadFailed: RequestErrorEvent;
+}

package/types/event/profile.d.ts

@@ -0,0 +1,13 @@
+import {ProfileResponse} from "../api/profile";
+import {RequestErrorEvent, SuccessResponse} from "../common";
+
+export default interface ProfileEvent {
+    onUpdated: (callback: (response: ProfileResponse) => void) => void;
+    onVerified: (callback: (response: SuccessResponse) => void) => void;
+    onVerificationCodeSent: (callback: (response: ProfileResponse) => void) => void; //should trigger action to fill verify code, then calling salla.profile.verify(...)
+
+    //errors
+    onUpdateFailed: RequestErrorEvent;
+    onUnverified: RequestErrorEvent;
+    onUpdateContactsFailed: RequestErrorEvent;
+}

package/types/event/rating.d.ts

@@ -0,0 +1,13 @@
+import {OrderDetailsResponse, RatingStorePayload, RatingProductsPayload, RatingShippingPayload} from "../api/rating";
+import {RequestErrorEventWithData, SuccessResponse} from "../common";
+
+export default interface RatingEvent {
+    onOrderFetched: (callback: (response: OrderDetailsResponse, order_id: number) => void) => void;
+    onOrderNotFetched: RequestErrorEventWithData</*order_id*/number>;
+    onStoreRated: (callback: (response: SuccessResponse, data: RatingStorePayload) => void) => void;
+    onStoreFailed: RequestErrorEventWithData</*data*/RatingStorePayload>;
+    onProductRated: (callback: (response: SuccessResponse, data: RatingProductsPayload) => void) => void;
+    onProductFailed: RequestErrorEventWithData</*data*/RatingProductsPayload>;
+    onShippingRated: (callback: (response: SuccessResponse, data: RatingShippingPayload) => void) => void;
+    onShippingFailed: RequestErrorEventWithData</*data*/RatingShippingPayload>;
+}

package/types/event/scope.d.ts

@@ -0,0 +1,15 @@
+import { RequestErrorEvent } from "../common";
+import { ScopeApiResponse } from '../api/scope'
+
+export default interface ScopeEvents {
+    onFetched: (callback: (response: ScopeApiResponse.scopeList) => void) => void;
+    onNotFetched: RequestErrorEvent;
+    
+    // POST
+    onChangeSucceeded: (callback: (response: ScopeApiResponse.scopeAddition) => void) => void;
+    onChangeFailed: RequestErrorEvent;
+
+    // Availability
+    onProductAvailabilityFetched: (callback: (response: ScopeApiResponse.availability, product_id: number) => void) => void;
+    onProductAvailabilityNotFetched: RequestErrorEvent;
+}

package/types/event/wishlist.d.ts

@@ -0,0 +1,8 @@
+import {RequestErrorEventWithData, SuccessResponse} from "../common";
+
+export default interface WishlistEvent {
+    onAdded: (callback: (response: SuccessResponse, product_id: number) => void) => void;
+    onRemoved: (callback: (response: SuccessResponse, product_id: number) => void) => void;
+    onAdditionFailed: RequestErrorEventWithData</*product_id*/number>;
+    onRemovingFailed: RequestErrorEventWithData</*product_id*/number>;
+}

package/types/helpers/app-helpers.d.ts

@@ -0,0 +1,29 @@
+type ElementOrSelector = string | HTMLElement;
+type EventTypes = 'click' | 'keyup' | 'input' | 'change' | string;
+export default interface AppHelpers {
+    toggleClassIf: (selector: string, classes1: string | Array<string>, classes2: string | Array<string>, callback: (element: HTMLElement) => boolean) => AppHelpers;
+    toggleElementClassIf: (element: HTMLElement, classes1: string | Array<string>, classes2: string | Array<string>, callback: (element: HTMLElement) => boolean) => AppHelpers;
+
+    isValidEmail: (email: string) => boolean;
+
+    element: (selector: ElementOrSelector) => HTMLElement | undefined;
+    watchElement: (name: string, selector: ElementOrSelector) => AppHelpers;
+    watchElements: (elements: { [key: string]: [value: ElementOrSelector] }) => AppHelpers;
+    hideElement: (element: ElementOrSelector) => AppHelpers;
+    showElement: (element: ElementOrSelector) => AppHelpers;
+    //💡 you can pass one or multi classes: this.removeClass(element, 'class_1', 'class_2', ...)
+    removeClass: (element: ElementOrSelector, ...className: string[]) => AppHelpers;
+    addClass: (element: ElementOrSelector, ...className: string[]) => AppHelpers;
+    //💡instead of: `document.querySelectorAll('.test').forEach(element=>{...})`
+    // you can use: `this.all('.test', element=>{...})`
+    all: (element: ElementOrSelector, callback: (element: HTMLElement) => void) => AppHelpers;
+
+    //💡instead of: `document.querySelectorAll('.test').forEach(el => el.addEventListener('keyup', callback));`
+    // you can use: `this.on('.test', 'keyup', callback)`
+    // or can use: `this.onKeyUp('.test', callback)`
+    on: (eventType: EventTypes, element: ElementOrSelector, callback: EventListener, options?: AddEventListenerOptions) => AppHelpers;
+    onClick: (element: ElementOrSelector, callback: EventListener) => AppHelpers;
+    onKeyUp: (element: ElementOrSelector, callback: EventListener) => AppHelpers;
+    onEnter: (element: ElementOrSelector, callback: EventListener) => AppHelpers;
+    debounce: (callback: () => unknown) => (...data: any | undefined) => Promise<unknown>
+}

package/types/index.d.ts

@@ -0,0 +1,36 @@
+import TwilightEmitter from './event';
+import Api, {ApiActionName} from "./api";
+import SallaActions from "./actions";
+
+import Config from "./lib/config";
+import AppHelpers from "./helpers/app-helpers";
+import SallaNotify from "./lib/notify";
+import SallaLang from "./lib/lang";
+import SallaForm from "./lib/form";
+import {TwilightConfig} from "./tiwlight-config";
+
+export default interface Salla extends SallaActions {
+    api: Api;
+    event: TwilightEmitter;
+
+    config: TwilightConfig;
+    lang: SallaLang;
+
+    notify: SallaNotify;
+    success: (message: string, data?: any) => void;
+    error: (message: string, data?: any) => void;
+
+    AppHelpers: AppHelpers;
+    form: SallaForm;
+    isInitiated: boolean; // will be true when firing event `twilight::initiated`
+    onReady: (callback: (event: Event) => unknown) => void; // don't relay on it because Salla may not existed yet
+    init: (config: TwilightConfig) => void; // an alias for `salla.twilight.init(config)`
+    call: (action: ApiActionName | string) => any;
+
+    onInitiated: (callback) => void;
+}
+
+declare global {
+    // @ts-ignore
+    let salla: Salla, Salla: Salla;
+}

package/types/lib/config.ts

@@ -0,0 +1,14 @@
+import { Language, TwilightConfig } from "../tiwlight-config";
+import { Currency, Price } from "../common";
+import { default as SallaConfig } from "@salla.sa/base/types/config";
+
+export default interface Config extends SallaConfig {
+    merge: (config: TwilightConfig) => Config;
+    isRTL: () => boolean;
+    money: (money: number | Price) => string;
+    isUser: () => boolean;
+    isGuest: () => boolean;
+    currency: (code?: string | 'SAR') => Currency;
+    currencies: () => Promise<{ SAR: Currency, [iso_code: string]: Currency }>;
+    languages: () => Promise<Language[]>;
+}

package/types/lib/form.d.ts

@@ -0,0 +1,8 @@
+import {ApiActionName} from "../api";
+
+export default interface SallaForm {
+    submit: (action: ApiActionName|string, eventOrData: Event | Object) => Promise<any>;
+    onSubmit: (action: ApiActionName|string, eventOrData: Event | Object) => false;
+    onChange: (action: ApiActionName|string, eventOrData: Event | Object) => false;
+    getPossibleValue(formData: object|FormData, possibleNames: Array<string>, objectable?: boolean): object | FormData | string | undefined;
+}

package/types/lib/lang.d.ts

@@ -0,0 +1,14 @@
+import Lang from 'lang.js'
+
+type Replacements = { [key: string]: string }
+
+/**
+ * @Example
+ * salla.lang.get('pages.cart.free_shipping_alert',{amount:salla.money(100)})
+ */
+export default interface SallaLang extends Lang {
+    translationsLoaded: boolean;
+    onLoaded: (callback: Function) => void;
+    get: (key: string, replacements?: Replacements, locale?: string | 'ar') => string;
+    set: (key: string, message: string) => SallaLang;
+}

package/types/lib/notify.d.ts

@@ -0,0 +1,14 @@
+export type NotifyType = 'error' | 'success' | 'info' | string;
+export type Notifier = (message: string, type: NotifyType, data?: object | any) => void | unknown;
+export type Logger = (...data: string[]) => void | unknown;
+export default interface SallaNotify {
+    fire: (message: string, type: NotifyType, data?: object | any) => Notifier; //default is just `alert(message)
+    setNotifier: (callback: Notifier) => void;// handy to override notifier used by salla.notify.fire(salla.success, salla.error, salla.info)
+    log: Logger; //default is just `console.log(...data)`
+    setLogger: (callback: Logger) => void;// handy to override logger used by salla.log()
+    error: (message: string, data?: object | any) => Notifier; //an alias for fire(message, salla.notify.types.error, data)
+    success: (message: string, data?: object | any) => Notifier; //an alias for fire(message, salla.notify.types.success, data)
+    info: (message: string, data?: object | any) => Notifier; //an alias for fire(message, salla.notify.types.info, data)
+    sallaInitiated;
+    types: { error: 'error', success: 'success', info: 'info' }; //handy to be overridden, to be passed via salla.error, salla.info, salla.success second argument when calling salla.notify.fire(message, /*{type}*/, data)
+}

package/types/tiwlight-config.d.ts

@@ -0,0 +1,74 @@
+import {Currency} from "./common";
+
+export interface Language {
+    name: string;
+    code: string;
+    url: string;
+    is_rtl: boolean;
+    country_code: string;
+}
+
+type Installment = 'tabby_installment' | 'tamara_installment' | 'spotii_pay';
+type PaymentName = Installment | 'mada' | 'credit_card' | 'paypal' | 'bank' | 'stc_pay' | 'apple_pay' | 'knet';
+
+export interface TwilightConfig {
+    /**
+     * @deprecated
+     */
+    _token?: string;
+
+    maintenance?: boolean;
+    debug?: boolean;
+    events?: { [event_name: string]: any };
+    sdk?: {
+        notifier_handler_disabled: boolean
+    },
+    store: {
+        url: string;
+        id: number;
+        logo?: string;
+        name?: string;
+        api?: string;
+        settings?: {
+            auth: {
+                email_allowed: boolean;
+                mobile_allowed: boolean;
+                is_email_required: boolean;
+            };
+            arabic_numbers_enabled: boolean;
+            payments: PaymentName[];
+            installments: Installment[];
+        };
+    };
+    user?: {
+        type?: 'user' | 'guest';
+        id?: string | number;
+        email?: any;
+        mobile?: any;
+        language_code?: string;
+        currency_code?: string;
+        country_code?: string;
+    };
+    theme?: {
+        name?: string;
+        mode?: string;
+        translations_hash?: string;
+        color?: {
+            primary: string | '#5cd5c4';
+            text: string | '#ffffff';
+            is_dark: boolean;
+            reverse_primary: string | '#5cd5c4';
+            reverse_text: string | '#005544';
+        }
+    };
+    languages?: Language[];
+    currencies?: {
+        SAR?: Currency;
+        [key: string]: Currency;
+    };
+    page?: {
+        title?: string;
+        slug?: string;
+        id?: number;//available in product.single, customer.orders.single, cart, thank-you, page-single
+    };
+}

package/watcher.js

@@ -2,6 +2,8 @@ const path = require('path');
 const glob = require("glob");
 const color = {normal: "\x1b[0m", red: "\x1b[31m", green: "\x1b[32m", yellow: "\x1b[33m", cyan: "\x1b[36m",}
 const {execSync} = require("child_process");
+const fs = require("fs");
+const WebSocketClient = require('websocket').client;
 //const webpack = require("webpack");
 /**
  * @callback HookCallback
@@ -48,10 +50,26 @@ const {execSync} = require("child_process");
  * @property {boolean} isWin
  */
 class WatcherPlugin {
-    constructor(sallaCli = 'salla') {
-        this.sallaCli = sallaCli;
+    constructor(params = {}) {
+      try{
+        if(!params.theme_id){
+          // this is another way to get params from cli 
+          let cachePath = path.join(process.cwd(), "/node_modules/.salla-cli");
+          if(fs.existsSync(cachePath)) params = JSON.parse(fs.readFileSync(cachePath, 'utf8'));
+        }
+      }catch(err){}
+      
+      let {wsport = 8001, sallaCli = "salla", theme_id, upload_url, store_id, draft_id} = params;
+      
+      this.sallaCli = sallaCli;
+      this.theme_id = theme_id;
+      this.upload_url = upload_url;
+      this.store_id = store_id;
+      this.draft_id = draft_id;
+      this.wsport = wsport;
+      this.files = {};
     }
-
+  
     /**
      * @param {Compiler} compiler
      */
@@ -65,9 +83,19 @@ class WatcherPlugin {
 
         console.log(color.green, '✓ Listening to webpack watch.', color.normal);
         this.addFilesToWatcher(compiler);
+        this.connectToWsServer();
         this.watchingChangedFiles(compiler);
+        this.afterCompile(compiler);
+    }
+    
+    /**
+     * @param {Compiler} compiler
+     */  
+    afterCompile(compiler) {
+      compiler.hooks.afterCompile.tap('SallaAfterCompilePlugin', (compilation) => {
+        this.connection.sendUTF(JSON.stringify({ msg: "reload" }));
+      });
     }
-
     /**
      * @param {Compiler} compiler
      */
@@ -76,8 +104,10 @@ class WatcherPlugin {
                 let files = this.isWebpack5
                     ? Array.from(compiler_.modifiedFiles || [])
                     : Object.keys(compiler_.watchFileSystem.watcher.mtimes);
-                files.filter(file => file.toLowerCase().endsWith('.twig'))
-                    .forEach(file => execSync(`${this.sallaCli} theme sync -f "${file}" -t ${this.draftId}`, {stdio: 'inherit'}));
+               
+                files.map((file) => {
+                  if (file.toLowerCase().endsWith(".twig")) this.addToQ(file);
+                });
             }
         );
     }
@@ -93,7 +123,7 @@ class WatcherPlugin {
     }
 
     getEntry() {
-        let viewsPath = path.join(process.cwd(), "views");
+        let viewsPath = path.join(process.cwd(), "src/views");
         return this.isWin && this.isWebpack5
             ? viewsPath
             : glob.sync(path.join(viewsPath, "**/*.twig"), {absolute: true});
@@ -104,19 +134,31 @@ class WatcherPlugin {
      * @return {boolean}
      */
     canWatch(options) {
-        if (options.mode !== 'development' || !options.watch) {
-            console.log(color.green, `✓ Skipping Watching Theme files in production.`, color.normal);
-            return false;
-        }
-        //if theme id not existed go out
-        try {
-            this.draftId = require(path.resolve(process.cwd(), 'theme.json')).draft_id
-            return !!this.draftId;
-        } catch (e) {
-            let command = color.cyan + this.sallaCli + ' theme watch' + color.red
-            console.log(color.red, `X Theme files won't sync! if you want to sync them, run: ${command}`, color.normal);
-            return false;
-        }
+        if (!options.watch) return false;
+        return !!this.theme_id;
+    }
+    connectToWsServer(){
+        // connect to live reload server
+        let client = new WebSocketClient();
+            client.on('connectFailed', (error)=> {
+            console.error('[x] Oops! Hot reload is currently not working. Check the error message for details: ',error.toString());
+        });
+
+        client.on('connect', (connection)=> {
+            this.connection = connection;
+            console.log(color.green, `✓ Performing hot reload on port ws://localhost:${this.wsport}`, color.normal);
+        });
+        client.connect(`ws://localhost:${this.wsport}`, 'echo-protocol');
+    }
+    addToQ(file) {
+        if (this.files[file]) clearTimeout(this.files[file]);
+        this.files[file] = setTimeout(() => {
+          execSync(
+            `${this.sallaCli} theme sync -f "${file}" -id ${this.theme_id}  -store_id ${this.store_id} -draft_id ${this.draft_id}  -upload_url ${this.upload_url}`,
+            { stdio: "inherit" }
+          );
+          delete this.files[file];
+        }, 700);
     }
 }
 

package/components/README.md

@@ -1,55 +0,0 @@
-# Twilight Components
-
-Salla web components for building web applications.
-
-## Components
-
-- [ ] [blocks](#)
-  - [*] [salla-search-modal](src/components/search-modal/readme.md)
-  - [ ] [salla-login](src/components/search-modal/readme.md)
-
-## Install
-
-### npm
-
- ```
-  npm install @salla.sa/twilight-components
- ```
-
-### yarn
-
- ```
- yarn add @salla.sa/twilight-components
- ```
-
-## Usage
-
-```
-# npm link
-npm install @salla.sa/twilight-components
-npm install @salla.sa/twilight-tailwind-theme
-// or npm install {full-path-of-folder}
-
-// inclued dev
-require('@salla.sa/twilight-components/dist/twilight-components/twilight-components.esm')
-// include prod 
-require('@salla.sa/twilight-components')
-```
-
-
-## Publish 
-
-### @salla.sa/twilight-components
-
-```
-npm version patch
-npm publish --access private
-```
-
-### @salla.sa/plugins
-
-todo :: finx the publish scripts
-
-```
-node publish.js
-```