@thefittingroom/shop-ui 0.0.1

package/dist/esm/init.d.ts

@@ -0,0 +1,2 @@
+import { FittingRoom, TfrHooks } from './tfr';
+export declare const initFittingRoom: (shopId: string | number, modalDivId: string, hooks: TfrHooks) => FittingRoom;

package/dist/esm/styles/index.d.ts

@@ -0,0 +1,7 @@
+import './colors.css';
+import './general.css';
+import './input.css';
+import './media.css';
+import './spaces.css';
+import './telephone.css';
+import './text.css';

package/dist/esm/tfr-nav.d.ts

@@ -0,0 +1,23 @@
+import * as types from './types';
+export declare class FittingRoomNav {
+    private readonly signIn;
+    private readonly forgotPassword;
+    private readonly submitTel;
+    private readonly manager;
+    private _sku;
+    constructor(modalDivId: string, signIn: types.SignInModalProps['onSignIn'], forgotPassword: types.ForgotPasswordModalProps['onPasswordReset'], submitTel: types.ScanCodeModalProps['onTelSubmit']);
+    get sku(): string;
+    setSku(sku: string): void;
+    close(): void;
+    onSignOut(): void;
+    onNotCreated(): void;
+    onLoading(): void;
+    toScan(): void;
+    toSignIn(): void;
+    toForgotPassword(): void;
+    toPasswordReset(): void;
+    onTryOn(frames: types.TryOnFrames): void;
+    onError(error: string): void;
+    onSizeError(recommended: string, available: string[]): void;
+    navBack(): void;
+}

package/dist/esm/tfr.d.ts

@@ -0,0 +1,29 @@
+import { TfrShop } from '@thefittingroom/sdk';
+import { FittingRoomNav } from './tfr-nav';
+import * as types from './types';
+export interface TfrHooks {
+    onLoading?: () => void;
+    onLoadingComplete?: () => void;
+    onError?: (error: string) => void;
+    onAvatarReady?: (frames: types.TryOnFrames) => void;
+    onLogin?: () => void;
+    onLogout?: () => void;
+}
+export declare class FittingRoom {
+    private readonly shopId;
+    private readonly hooks;
+    readonly nav: FittingRoomNav;
+    private readonly tfrShop;
+    constructor(shopId: string | number, modalDivId: string, hooks?: TfrHooks);
+    get sku(): string;
+    get shop(): TfrShop;
+    onInit(): Promise<boolean>;
+    setSku(sku: string): void;
+    close(): void;
+    signOut(): Promise<void>;
+    signIn(username: string, password: string, validationError: (message: string) => void): Promise<void>;
+    submitTel(tel: string): Promise<void>;
+    forgotPassword(email: string): Promise<void>;
+    passwordReset(code: string, newPassword: string): Promise<void>;
+    tryOn(): Promise<void>;
+}

package/dist/esm/types/index.d.ts

@@ -0,0 +1,145 @@
+import { FirebaseUser, TfrShop } from '@thefittingroom/sdk';
+import { ModalManager } from '../components';
+import { UIError } from '../components/uiError';
+import * as types from '../types';
+export declare const TfrLogo: string;
+export declare const AposeLogo: string;
+export declare const AppStoreLogo: string;
+export declare const QrCodeLogo: string;
+export declare const NotLoggedIn: Error;
+export declare const NoFramesFound: Error;
+export declare const NoColorwaySizeAssetsFound: Error;
+export declare const NoStylesFound: Error;
+export interface RecommendedAvailableSizes {
+    error: string;
+    recommended_size: string;
+    available_sizes: string[];
+}
+export interface FittingRoom {
+    shop: TfrShop;
+    manager: ModalManager;
+    onSignout(colorwaySizeAssetSKU: string): () => Promise<void>;
+    onClose(): void;
+    onNavBack(): void;
+    onTryOn(colorwaySizeAssetSKU: string): void;
+    whenAvatarNotCreated(colorwaySizeAssetSKU: string): void;
+    whenAvatarPending(colorwaySizeAssetSKU: string): void;
+    whenAvatarCreated(colorwaySizeAssetSKU: string): void;
+    whenNotSignedIn(colorwaySizeAssetSKU: string): void;
+    whenTryOnReady(colorwaySizeAssetSKU: string, frames: types.TryOnFrames): void;
+    whenTryOnLoading(colorwaySizeAssetSKU: string): void;
+    whenTryOnFailed(colorwaySizeAssetSKU: string, error: Error): void;
+    whenError(colorwaySizeAssetSKU: string, error: UIError): void;
+    whenSignedIn(user: FirebaseUser, colorwaySizeAssetSKU: string): void;
+    whenSignedOut(colorwaySizeAssetSKU: string): void;
+    onSignIn(colorwaySizeAssetSKU: string): (username: string, password: string, validation: (message: string) => void) => void;
+    onNavSignIn(colorwaySizeAssetSKU: string): (email: string) => void;
+    onPasswordReset(colorwaySizeAssetSKU: string): (email: string) => void;
+    onNavForgotPassword(colorwaySizeAssetSKU: string): (email: string) => void;
+    onNavScanCode(colorwaySizeAssetSKU: string): void;
+    TryOn(colorwaySizeAssetSKU: string): void;
+}
+export interface ModalContent {
+    Body: () => string;
+    Hook(): void;
+    Unhook(): void;
+}
+export interface ModalProps {
+}
+export interface SignInParams {
+    email: string;
+    password: string;
+}
+export interface SignInModalProps extends ModalProps {
+    email?: string;
+    onSignIn: (email: string, password: string, validationError: (message: string) => void) => void;
+    onNavForgotPassword: (email?: string) => void;
+    onNavScanCode: () => void;
+}
+export interface ForgotPasswordModalProps extends ModalProps {
+    email?: string;
+    onNavSignIn: (email: string) => void;
+    onPasswordReset: (email: string) => void;
+}
+export type NoAvatarModalProps = ModalProps;
+export interface LoadingAvatarModalProps extends ModalProps {
+    timeoutMS: number;
+}
+export interface TryOnModalProps extends ModalProps {
+    frames: TryOnFrames;
+    onNavBack: () => void;
+    onClose: () => void;
+}
+export interface ErrorModalProps extends ModalProps {
+    error: string;
+    onNavBack: () => void;
+    onClose: () => void;
+}
+export interface SizeErrorModalProps {
+    onNavBack: () => void;
+    onClose: () => void;
+    sizes?: {
+        recommended: string;
+        available: string[];
+    };
+}
+export interface ResetLinkModalProps {
+    email: string;
+    onNavSignIn: (email: string) => void;
+}
+export interface ScanCodeModalProps {
+    onSignInNav: () => void;
+    onTelSubmit: (tel: string) => void;
+}
+export interface LoggedOutModalProps {
+    onClose: () => void;
+    onNavSignIn: (email: string) => void;
+}
+export type TryOnFrames = string[];
+export declare enum AvatarState {
+    NOT_CREATED = "NOT_CREATED",
+    CREATED = "CREATED",
+    PENDING = "PENDING"
+}
+export type FirestoreColorwaySizeAsset = {
+    id: number;
+    size_id: number;
+    style_id: number;
+    colorway_id: number;
+    colorway_name: string;
+    sku: string;
+};
+export type FirestoreGarmentMeasurement = {
+    id: number;
+    garment_measurement_location: string;
+    tolerance: number;
+    value: number;
+};
+export type FirestoreSize = {
+    id: number;
+    size: string;
+    label: string;
+    size_system: string;
+    size_value_id: string;
+    garment_measurements: Map<string, FirestoreGarmentMeasurement>;
+};
+export type FirestoreColorway = {
+    id: number;
+    name: string;
+};
+export type FirestoreStyle = {
+    id: number;
+    brand_id: number;
+    brand_style_id: string;
+    name: string;
+    description: string;
+    garment_category: string;
+    is_published: boolean;
+    sale_type: string;
+    colorways: {
+        [key: number]: FirestoreColorway;
+    };
+    sizes: {
+        [key: number]: FirestoreSize;
+    };
+};

package/index.html

@@ -0,0 +1,126 @@
+<html lang="en">
+  <head>
+    <title>TheFittingRoom</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link href="https://fonts.googleapis.com" rel="preconnect" />
+    <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&family=Roboto&display=swap"
+      rel="stylesheet"
+    />
+
+    <script type="module">
+      import { InitFittingRoom, InitLocale, comps } from 'http://localhost:3030/dist/esm/main.js?language=en'
+
+      InitLocale()
+      window.mm = comps.InitModalManager('tfr-manual-modal')
+      window.comps = comps
+      window.onSignout = (colorwaySizeAssetSKU) => {
+        console.log('signout', colorwaySizeAssetSKU)
+      }
+      window.onClose = () => {
+        console.log('close')
+      }
+      window.onNavBack = () => {
+        console.log('back')
+      }
+      window.onTryOn = (colorwaySizeAssetSKU) => {
+        console.log('try on', colorwaySizeAssetSKU)
+      }
+      window.whenSignedIn = (user, colorwaySizeAssetSKU) => {
+        console.log('after sign in', user, colorwaySizeAssetSKU)
+      }
+      window.onSignIn = (colorwaySizeAssetSKU) => (username, password, validationError) => {
+        if (username.length == 0 || password.length == 0) {
+          validationError('Username or password is empty')
+        }
+      }
+      window.onNavSignIn = (colorwaySizeAssetSKU) => (email) => {
+        console.log('nav sign in', colorwaySizeAssetSKU, email)
+      }
+      window.onPasswordReset = (colorwaySizeAssetSKU) => (email) => {
+        console.log('password reset', colorwaySizeAssetSKU, email)
+      }
+      window.onNavForgotPassword = (colorwaySizeAssetSKU) => (email) => {
+        console.log('nav forgot password', colorwaySizeAssetSKU, email)
+      }
+      window.onNavScanCode = () => {
+        console.log('nav scan code')
+      }
+
+      window.addEventListener('load', (e) => {
+        let tryOnImage = document.getElementById('tfr-tryon-image')
+        let signout = document.getElementById('signout')
+        let onChange = (slider, imageUrl) => {
+          tryOnImage.src = imageUrl
+        }
+        let slider = comps.InitImageSlider('tfr-slider', onChange)
+        let tfr = InitFittingRoom(1, 'tfr-tryon-modal')
+
+        tfr.whenFramesReady = (sku, frames) => {
+          console.log('frames ready', sku, frames)
+          slider.Load(frames)
+        }
+
+        signout.addEventListener('click', () => {
+          tfr
+            .onSignout('')()
+            .then(() => {
+              console.log('signout')
+            })
+        })
+
+        document.getElementById('tryon').addEventListener('click', (e) => {
+          tfr.TryOn('5003-007-08')
+        })
+      })
+    </script>
+  </head>
+
+  <body>
+    <div class="tfr-home-button-container">
+      <button
+        onclick="window.mm.Open(window.comps.ErrorModal({error: 'custom error message', onNavBack: window.onNavBack, onClose: window.onClose}))"
+      >
+        Error Modal
+      </button>
+      <br />
+      <button onclick="window.mm.Open(window.comps.ScanCodeModal())">Scan Code Modal</button>
+      <br />
+      <button
+        onclick="window.mm.Open(window.comps.SignInModal({email:'email@mail.com', onSignIn: window.onSignIn('abc'), onNavForgotPassword: window.onNavForgotPassword('123'), onNavScanCode: window.onNavScanCode}))"
+      >
+        Sign In Modal
+      </button>
+      <br />
+      <button
+        onclick="window.mm.Open(window.comps.ForgotPasswordModal({email: 'email@mail.com', onNavSignIn: window.onNavSignIn('123'), onPasswordReset: window.onPasswordReset('123')}))"
+      >
+        Forgot Password Modal
+      </button>
+      <br />
+      <button onclick="window.mm.Open(window.comps.NoAvatarModal({}))">No Avatar Modal</button>
+      <br />
+      <button onclick="window.mm.Open(window.comps.LoadingAvatarModal({timeoutMS: 12000}))">
+        Loading Avatar Modal
+      </button>
+      <br />
+      <button
+        onclick="window.mm.Open(window.comps.SizeErrorModal({onNavBack: window.onNavBack, onClose: window.onClose, sizes: {recommended: 'large', avaliable: ['small', 'medium', 'large']}}))"
+      >
+        Size Error Modal
+      </button>
+      <br />
+      <button onclick="window.mm.Open(window.comps.ResetLinkModal({onNavSignIn: window.onNavSignIn('abc')}))">
+        Reset Link Modal
+      </button>
+      <button id="tryon">Try On</button>
+      <button id="signout">Sign Out</button>
+    </div>
+    <div id="tfr-manual-modal"></div>
+    <div id="tfr-tryon-modal"></div>
+    <input type="range" id="tfr-slider" />
+    <img id="tfr-tryon-image" src="" />
+  </body>
+</html>

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@thefittingroom/shop-ui",
+  "version": "0.0.1",
+  "description": "the fitting room UI library",
+  "type": "module",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "clean:all": "rm -rf dist && rm -rf build && rm -rf .rollup.cache",
+    "build:prod": "npm run clean && NODE_ENV=prod rollup --config",
+    "build:dev": "npm run clean && NODE_ENV=dev rollup --config",
+    "watch:prod": "npm run clean && NODE_ENV=prod rollup --config -w",
+    "watch:dev": "npm run clean && NODE_ENV=dev rollup --config -w",
+    "serve": "live-server --host=localhost --port=3030 --cors"
+  },
+  "engines": {
+    "node": ">=10"
+  },
+  "dependencies": {
+    "@thefittingroom/sdk": "^0.0.5"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^14.1.0",
+    "@rollup/plugin-typescript": "^8.5.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "live-server": "^1.2.2",
+    "prettier": "^2.8.8",
+    "rollup": "^2.79.1",
+    "rollup-plugin-dotenv": "^0.4.0",
+    "rollup-plugin-styles": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "ts-node": "^9.0.0",
+    "tslib": "^2.4.0",
+    "typescript": "^4.0.2"
+  }
+}