@thefittingroom/shop-ui 0.0.1

package/.env.dev

@@ -0,0 +1,3 @@
+NODE_ENV=dev
+LANGUAGE_URL=https://assets.dev.thefittingroom.xyz/shop-sdk/${GITHUB_SHA_7}/languages
+ASSETS_URL=https://assets.dev.thefittingroom.xyz/shop-sdk/assets

package/.env.example

@@ -0,0 +1,3 @@
+NODE_ENV
+LANGUAGE_URL
+ASSETS_URL

package/.env.prod

@@ -0,0 +1,3 @@
+NODE_ENV=prod
+LANGUAGE_URL=https://assets.p.thefittingroom.xyz/shop-sdk/${GITHUB_REF}/languages
+ASSETS_URL=https://assets.p.thefittingroom.xyz/shop-sdk/assets

package/README.md

@@ -0,0 +1,75 @@
+# The Fitting Room - Shop SDK
+
+## Installation
+
+```bash
+LANGUAGE_URL=https://assets.dev.thefittingroom.xyz/shop-sdk/4200127/languages
+ASSETS_URL=https://assets.dev.thefittingroom.xyz/shop-sdk/assets
+
+# build everytime changes are detected
+npm run dev:rollup
+# run a live server on localhost:3030 and disable cors
+npx live-server --host=localhost --port=3030 --cors
+```
+
+The sdk gets transpiled from typescript a javascript ESM module located at `dist/esm/main(.min).js`
+
+You can develop locally and reference it in your html like this:
+`import {InitFittingRoom, comps, InitLocale} from "http://localhost:3030/dist/cjs/main.js"`
+
+## Merges on main branch
+
+When a pull request gets merged into main, a development build gets published to S3.
+You can access the development builds by using a commit sha on main like this:
+
+`import {InitFittingRoom, comps, InitLocale} from "https://assets.dev.thefittingroom.xyz/shop-sdk/<COMMIT_SHA>/main.js"`
+
+## Overriding library functions
+
+The sdk works out of the box with modals and does not require any overriding.
+All methods on the `tfr` object are overridable.
+View the [FittingRoom](https://github.com/TheFittingRoom/shop-sdk/blob/96d59558bdbec6cc1e899cac297838a4810de5d4/src/types/index.ts#L63) interface to see all of the overridable function signatures.
+The main implementation can be found in `init.ts`
+
+```javascript
+// use the language code in the get url (ex. ?lang=en)
+InitLocale()
+
+// define a modal div in the html to attach the fitting room to
+let tfr = InitFittingRoom(1, 'tfr-tryon-modal')
+
+// add an optional sign out button
+let signout = document.getElementById('signout')
+signout.addEventListener('click', () => {
+  // pass an empty sku to the onSignout since its not being used in a modal
+  // call the onSignout function wrapper to return a promise
+  // wait for the promise
+  // shows signed out modal by default
+  tfr
+    .onSignout('')()
+    .then(() => {
+      // do something after signing out of the fitting room
+    })
+})
+
+// call TryOn with a colorway_size_asset sku
+document.getElementById('tryon').addEventListener('click', (e) => {
+  tfr.TryOn('5003-007-08')
+})
+```
+
+## Localization
+
+You can call `SetLocale` to change the language of the sdk without using url searchParams.
+
+```javascript
+SetLocale('en')
+  .then(() => {
+    // do something after setting the locale
+  })
+  .catch((err) => {
+    // handle error
+  })
+```
+
+Warnings will be generated in the console for any missing locale definitions.

package/dist/esm/components/Modals/ErrorModal.d.ts

@@ -0,0 +1,7 @@
+import { ErrorModalProps } from '../../types';
+declare const ErrorModal: (props: ErrorModalProps) => {
+    Hook: () => void;
+    Unhook: () => void;
+    Body: () => string;
+};
+export default ErrorModal;

package/dist/esm/components/Modals/ForgotPasswordModal.d.ts

@@ -0,0 +1,3 @@
+import { ForgotPasswordModalProps, ModalContent } from '../../types';
+declare const ForgotPasswordModal: (props: ForgotPasswordModalProps) => ModalContent;
+export default ForgotPasswordModal;

package/dist/esm/components/Modals/LoadingAvatarModal.d.ts

@@ -0,0 +1,3 @@
+import { LoadingAvatarModalProps, ModalContent } from '../../types';
+declare const LoadingAvatarModal: (props: LoadingAvatarModalProps) => ModalContent;
+export default LoadingAvatarModal;

package/dist/esm/components/Modals/LoggedOutModal.d.ts

@@ -0,0 +1,3 @@
+import { LoggedOutModalProps, ModalContent } from '../../types';
+declare const LoggedOutModal: (props: LoggedOutModalProps) => ModalContent;
+export default LoggedOutModal;

package/dist/esm/components/Modals/ModalManager.d.ts

@@ -0,0 +1,8 @@
+import { ModalContent } from '../../types';
+interface ModalManager {
+    open(content: ModalContent): void;
+    close(): void;
+    Content(): ModalContent;
+}
+declare const InitModalManager: (elementID: string) => ModalManager;
+export { InitModalManager, ModalManager };

package/dist/esm/components/Modals/NoAvatarModal.d.ts

@@ -0,0 +1,3 @@
+import { ModalContent } from '../../types';
+declare const NoAvatarModal: () => ModalContent;
+export default NoAvatarModal;

package/dist/esm/components/Modals/ResetLinkModal.d.ts

@@ -0,0 +1,3 @@
+import { ModalContent, ResetLinkModalProps } from '../../types';
+declare const ResetLinkModal: (props: ResetLinkModalProps) => ModalContent;
+export default ResetLinkModal;

package/dist/esm/components/Modals/ScanCodeModal.d.ts

@@ -0,0 +1,3 @@
+import { ModalContent, ScanCodeModalProps } from '../../types';
+declare const ScanCodeModal: (props: ScanCodeModalProps) => ModalContent;
+export default ScanCodeModal;

package/dist/esm/components/Modals/SignInModal.d.ts

@@ -0,0 +1,3 @@
+import { ModalContent, SignInModalProps } from '../../types';
+declare const SignInModal: (props: SignInModalProps) => ModalContent;
+export default SignInModal;

package/dist/esm/components/Modals/SizeErrorModal.d.ts

@@ -0,0 +1,3 @@
+import { ModalContent, SizeErrorModalProps } from '../../types';
+declare const SizeErrorModal: (props: SizeErrorModalProps) => ModalContent;
+export default SizeErrorModal;

package/dist/esm/components/Modals/TryOnModal.d.ts

@@ -0,0 +1,3 @@
+import { ModalContent, TryOnModalProps } from '../../types';
+declare const TryOnModal: (props: TryOnModalProps) => ModalContent;
+export default TryOnModal;

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

@@ -0,0 +1,14 @@
+import '../styles';
+import ErrorModal from './Modals/ErrorModal';
+import ForgotPasswordModal from './Modals/ForgotPasswordModal';
+import LoadingAvatarModal from './Modals/LoadingAvatarModal';
+import LoggedOutModal from './Modals/LoggedOutModal';
+import { InitModalManager, ModalManager } from './Modals/ModalManager';
+import NoAvatarModal from './Modals/NoAvatarModal';
+import ResetLinkModal from './Modals/ResetLinkModal';
+import ScanCodeModal from './Modals/ScanCodeModal';
+import SignInModal from './Modals/SignInModal';
+import SizeErrorModal from './Modals/SizeErrorModal';
+import TryOnModal from './Modals/TryOnModal';
+import InitImageSlider from './slider';
+export { SignInModal, ForgotPasswordModal, ScanCodeModal, ErrorModal, LoadingAvatarModal, InitModalManager, ModalManager, NoAvatarModal, LoggedOutModal, SizeErrorModal, ResetLinkModal, InitImageSlider, TryOnModal, };

package/dist/esm/components/locale.d.ts

@@ -0,0 +1,57 @@
+declare var L: {
+    AssociatedEmail: string;
+    BackToSignIn: string;
+    CreateAvatarSc: string;
+    DontHaveAcc: string;
+    DontHaveAvatar: string;
+    EmailAddress: string;
+    EmailError: string;
+    EnterEmailAddress: string;
+    EnterPhoneNumber: string;
+    FailedToLoadLocale: string;
+    ForgotPassword: string;
+    ForgotPasswordWithSymbol: string;
+    GetRecommendedSizesErrorText: string;
+    GetVirtualTryOnFramesErrorText: string;
+    HaveAcc: string;
+    HowItWorks: string;
+    HowItWorksText: string;
+    Loading: string;
+    LoadingAvatar: string;
+    ModalTitle: string;
+    NoSizeAvailable: string;
+    Or: string;
+    OrSize: string;
+    Password: string;
+    PasswordError: string;
+    PhoneNumber: string;
+    ReturnToCatalogPage: string;
+    ReturnToProductPage: string;
+    ReturnToSignIn: string;
+    ReturnToSite: string;
+    ReturnToTfr: string;
+    Send: string;
+    SendPasswordResetEmailErrorText: string;
+    SignBackIn: string;
+    SignIn: string;
+    SignOut: string;
+    SignOutErrorText: string;
+    SignUp: string;
+    SimplyScan: string;
+    SimplyScanText: string;
+    SomethingIsWrongWithThisUser: string;
+    SomethingWentWrong: string;
+    StyleNotReadyForVTO: string;
+    SuccessfullyLoggedOut: string;
+    TheFittingRoom: string;
+    TryOn: string;
+    TryOnText: string;
+    TrySize: string;
+    UsernameOrPasswordEmpty: string;
+    UsernameOrPasswordIncorrect: string;
+    VirtualTryOnWith: string;
+    WeRecommendSize: string;
+};
+declare function SetLocale(locale: string): Promise<void>;
+declare const InitLocale: () => Promise<string>;
+export { InitLocale, L, SetLocale };

package/dist/esm/components/slider.d.ts

@@ -0,0 +1,4 @@
+declare const InitImageSlider: (sliderID: string, onChange: (slider: HTMLInputElement, imageUrl: string) => void) => {
+    Load(imageURLs: string[]): Error | (() => void);
+};
+export default InitImageSlider;

package/dist/esm/components/uiError.d.ts

@@ -0,0 +1,6 @@
+interface UIError {
+    userMessage: string;
+    error: Error;
+}
+declare function createUIError(message: string, error?: Error): UIError;
+export { createUIError, UIError };

package/dist/esm/helpers/telephone.d.ts

@@ -0,0 +1 @@
+export declare const initTel: (selector: string) => void;

package/dist/esm/helpers/validations.d.ts

@@ -0,0 +1,2 @@
+export declare const validateEmail: (email: string) => boolean;
+export declare const validatePassword: (password: string) => boolean;

package/dist/esm/index.d.ts

@@ -0,0 +1,3 @@
+export { VTO_TIMEOUT_MS } from '@thefittingroom/sdk';
+export { initFittingRoom } from './init';
+export type { FittingRoom } from './tfr';