@nylas/web-elements 1.0.0-prealpha1

package/dist/types/stores/auth-store.d.ts

@@ -0,0 +1,9 @@
+import { TokenInfo } from '@nylas/core/dist/auth';
+import { DataState } from '..';
+export interface NylasAuthStoreState {
+    isAuthenticated: boolean;
+    tokenInfo: TokenInfo | null;
+    state: DataState;
+}
+export type NylasAuthStoreType = ReturnType<typeof CreateNylasAuthStore>;
+export declare function CreateNylasAuthStore(defaultState?: Partial<NylasAuthStoreState>): import("@stencil/store").ObservableMap<NylasAuthStoreState>;

package/dist/types/stores/mailbox-store.d.ts

@@ -0,0 +1,19 @@
+import type { Folder, Message, MessageQueryParameters, Thread, ThreadQueryParameters } from '@nylas/core';
+import { DataState } from '../components';
+export interface NylasMailboxStoreState {
+    state: DataState;
+    messages: Message[];
+    threads: Thread[];
+    folders: Folder[];
+    selectedThread: Thread | null;
+    selectedFolder: string;
+    searchQuery: string;
+    nextThreadPageToken: string | null;
+    previousThreadPageTokens: (string | null)[];
+    hasNextThreadPage: boolean;
+    hasPreviousThreadPage: boolean;
+    threadsQueryParams: Partial<ThreadQueryParameters>;
+    messgeQueryParams: Partial<MessageQueryParameters>;
+}
+export type NylasMailboxStoreType = ReturnType<typeof CreateNylasMailboxStore>;
+export declare function CreateNylasMailboxStore(defaultState?: Partial<NylasMailboxStoreState>): import("@stencil/store").ObservableMap<NylasMailboxStoreState>;

package/dist/types/stores/scheduler-store.d.ts

@@ -0,0 +1,32 @@
+import { DataState, NylasEvent } from "../common/types";
+import { NylasErrorResponse, NylasSchedulerBookingData, Timeslot } from '@nylas/core';
+export type AvailabilityTimeslot = {
+    emails: string[];
+    start_time: Date;
+    end_time: Date;
+};
+export type LoadingState = {
+    api: 'availability' | 'createBooking' | 'cancelBooking' | 'rescheduleBooking';
+};
+export interface NylasSchedulerStoreState {
+    selectedDate: Date | null;
+    selectedLanguage: string;
+    selectedTimezone: string;
+    selectedTimeslot: Timeslot | null;
+    showBookingForm: boolean;
+    showThankYouMessage: boolean;
+    selectableDates: Date[] | null;
+    availability: AvailabilityTimeslot[];
+    availabilityTimeslotsError: NylasErrorResponse | null;
+    state: DataState;
+    eventInfo: NylasEvent | null;
+    cancelledEvent: NylasEvent | null;
+    bookedEventError: NylasErrorResponse | null;
+    bookedEventLoading: boolean;
+    bookingInfo?: NylasSchedulerBookingData;
+    rescheduleId?: string;
+    bookingFlow?: 'booking' | 'rescheduling';
+    loadingState: LoadingState | null;
+}
+export type NylasSchedulerStoreType = ReturnType<typeof CreateNylasSchedulerStore>;
+export declare function CreateNylasSchedulerStore(defaultState?: Partial<NylasSchedulerStoreState>): import("@stencil/store").ObservableMap<NylasSchedulerStoreState>;

package/dist/types/utils/color-utils.d.ts

@@ -0,0 +1,9 @@
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+export declare function rgbToHex(r: number, g: number, b: number): string;
+export declare function invertColor(color: string): string;
+export declare function transformElement(element: Element): void;
+export declare function processStyles(root: HTMLElement): void;

package/dist/types/utils/utils.d.ts

@@ -0,0 +1,28 @@
+import { EmailName, Message } from '@nylas/core';
+export declare function format(first: string, middle: string, last: string): string;
+export declare function removeUndefined(obj: any): {
+    [key: string]: any;
+};
+export declare function debug(...args: any[]): void;
+export declare function error(...args: any[]): void;
+export declare function uniqueID(): string;
+export declare function formatEventName(propKey: string): string;
+export declare function formatDateTime(dateTimestamp: number): string;
+export declare function formatRecipient(recipient: EmailName): string | undefined;
+export declare function formatParticipants(participants: EmailName[], meEmail?: string, messageCount?: number, max?: number): string;
+export declare const formatTimeAgo: (date: Date) => string | undefined;
+export declare function getLastDayOfMonth(date: Date): Date;
+export declare function getFirstDayOfMonth(date: Date): Date;
+export declare function getFirstHourOfDay(date: Date): Date;
+export declare function isSameDay(date1: Date, date2: Date): boolean;
+export declare function isSameMonth(date1: Date, date2: Date): boolean;
+export declare function toTitleCase(str: string): string;
+export declare function formatFolderName(folderName: string): string;
+export declare function detectHTMLOrPlainText(html: string): "html" | "plain";
+export declare function detectIfMessageIsHTML(message: Message): boolean;
+export declare function parsePlainTextToHTML(text: string): string;
+export declare function htmlToPlainText(html: string): string;
+export declare function getStartHourOfDay(date: Date): Date;
+export declare function getEndHourOfDay(date: Date): Date;
+export declare function get24HourTime(date: Date): string;
+export declare function getUserTimezone(): string;

package/loader/cdn.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.cjs.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.d.ts

@@ -0,0 +1,21 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1,3 @@
+
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,4 @@
+
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm/loader.js';

package/loader/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "nylas-web-elements-loader",
+  "private": true,
+  "typings": "./index.d.ts",
+  "module": "./index.js",
+  "main": "./index.cjs.js",
+  "jsnext:main": "./index.es2017.js",
+  "es2015": "./index.es2017.js",
+  "es2017": "./index.es2017.js",
+  "unpkg": "./cdn.js"
+}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@nylas/web-elements",
+  "version": "1.0.0-prealpha1",
+  "description": "Stencil Component Starter",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.js",
+  "es2017": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/nylas-web-elements/nylas-web-elements.esm.js",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nylas/nylas.git"
+  },
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "dependencies": {
+    "@nylas/core": "*",
+    "@spectrum-web-components/bundle": "^0.39.3",
+    "@spectrum-web-components/icon": "^0.40.0",
+    "@spectrum-web-components/icons": "^0.40.0",
+    "@spectrum-web-components/icons-ui": "^0.40.0",
+    "@spectrum-web-components/icons-workflow": "^0.40.0",
+    "@stencil/core": "^4.8.0",
+    "d3-time": "^3.1.0",
+    "dompurify": "^3.0.6",
+    "froala-editor": "^4.1.4",
+    "quill": "^1.3.7",
+    "tinycolor2": "^1.6.0"
+  },
+  "devDependencies": {
+    "@stencil-community/eslint-plugin": "^0.7.1",
+    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/sass": "^3.0.7",
+    "@stencil/store": "^2.0.11",
+    "@types/d3-time": "^3.0.3",
+    "@types/dompurify": "^3.0.5",
+    "@types/jest": "^29.5.6",
+    "@types/node": "^16.18.11",
+    "@types/quill": "^2.0.14",
+    "@types/tinycolor2": "^1.4.6",
+    "dexie": "^3.2.4",
+    "fake-indexeddb": "^5.0.1",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "moment-timezone": "^0.5.43",
+    "msw": "^2.0.10",
+    "node-fetch": "^3.3.2",
+    "puppeteer": "21.1.1"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "stencil build",
+    "build:docs": "stencil build --docs",
+    "dev": "stencil build --watch",
+    "lint": "eslint --ext .ts src/",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate",
+    "deploy": "node ../../scripts/deploy-cloudflare.mjs -p nylas-playground -d ./packages/nylas-web-elements/www/"
+  }
+}

package/readme.md

@@ -0,0 +1,42 @@
+# Nylas Web Elements
+
+A collection of web components for Nylas.
+
+This is a pre-alpha version of Nylas web elements. It is not yet ready for production use.
+
+## Requirements
+
+- [Node.js](https://nodejs.org/en/) v20 or higher
+- [PNPM](https://pnpm.io/) v8 or higher
+
+## Getting Started
+
+1. Run `pnpm install` to install dependencies.
+
+2. Run `pnpm nx run @nylas/web-elements:start` to start the web elements server.
+
+3. Visit [http://localhost:3333/](http://localhost:3333/) to see the web elements server (this has hot reloading enabled!).
+
+## Naming Components
+
+Prefix all components with `nylas-`. For example, `nylas-scheduler`.
+
+## Good to know
+
+### Style guide for Stencil components
+
+- [Stencil Style Guide](https://stenciljs.com/docs/style-guide)
+
+### Getting errors with Jest regarding invalid imports of 3rd party libraries?
+
+If you are getting errors like this:
+
+```
+SyntaxError: Unexpected token 'export'
+```
+
+You may need to add the 3rd party library to the `esModules` array in the `stencil.config.ts` file. For example:
+
+```ts
+const esmModules = ['d3-time'];
+```