@energysage/es-ds-components 0.0.1 → 3.0.0-alpha.10

package/components/es-data-table.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+
+const props = defineProps({
+    fields: {
+        type: Array,
+        default: null,
+    },
+    items: {
+        type: Array,
+        required: true,
+    },
+    stickyFirstCol: {
+        type: Boolean,
+        default: false,
+    },
+    stickyHeader: {
+        type: [Boolean, String],
+        default: false,
+    },
+});
+
+const checkFrozenRow = (index: any) => {
+    if (index === 0 && props.stickyFirstCol) {
+        return true;
+    }
+    return false;
+};
+
+// Code is taken from BootStrap Vue to implemnt <b-table> feature that automatically
+// samples the first row to extract field name and "humanize" by converting kebab-case,
+// snake_case, and camelCase to individual words and capitalizes each word.
+// Doc: https://bootstrap-vue.org/docs/components/table
+// Source Code: https://github.com/bootstrap-vue/bootstrap-vue/blob/5173dd19f6f46dc9d125cd7233fb59ccd2ef9296/src/utils/string.js#L30
+const startCase = (str: string) =>
+    str
+        .replace(/_/g, ' ')
+        .replace(/([a-z])([A-Z])/g, (_, $1, $2) => `${$1} ${$2}`)
+        .replace(/(\s|^)(\w)/g, (_, $1, $2) => $1 + $2.toUpperCase());
+
+const label = (col: any) => {
+    if (typeof col === 'string') {
+        return startCase(col);
+    }
+    return col?.label ? col.label : startCase(col?.key);
+};
+
+const columns = computed(() => {
+    if (props.fields) {
+        return props.fields;
+    }
+    // @ts-expect-error not sure
+    return Object.keys(props.items[0]);
+});
+
+const scrollHeight = computed(() => {
+    if (props.stickyHeader) {
+        if (typeof props.stickyHeader === 'string') {
+            return props.stickyHeader;
+        }
+        return '300px';
+    }
+    return '';
+});
+</script>
+<template>
+    <data-table
+        scrollable
+        :pt="{
+            table: {
+                class: 'font-size-75 font-size-md-100',
+                style: 'border-collapse: separate; border-spacing: 0;',
+            },
+            wrapper: {
+                style: 'border-radius: inherit',
+            },
+            thead: {
+                style: 'top: 0px; z-index: 2',
+            },
+        }"
+        :value="props.items"
+        class="border table__data-table table-spacing table"
+        :scroll-height="scrollHeight">
+        <!-- @vue-expect-error -->
+        <column
+            v-for="(col, index) of columns"
+            :key="col?.key ? col.key : col"
+            :field="col?.key ? col.key : col"
+            :header="label(col)"
+            :sortable="col?.sortable"
+            :frozen="checkFrozenRow(index)"
+            align-frozen="left"
+            :pt="{
+                sortIcon: {
+                    style: 'display: none',
+                },
+                headerCell: (options) => ({
+                    class: [
+                        {
+                            sortable: options.props.sortable,
+                            stickyFirstColHeader: options.props.frozen,
+                        },
+                    ],
+                }),
+                bodyCell: (options) => ({
+                    class: [
+                        {
+                            stickyFirstCol: options.props.frozen,
+                        },
+                    ],
+                }),
+            }">
+        </column>
+    </data-table>
+</template>
+<style scoped lang="scss">
+:deep(.stickyFirstColHeader) {
+    position: sticky !important;
+}
+:deep(.stickyFirstCol) {
+    position: sticky !important;
+    background: inherit;
+}
+:deep(.sortable) {
+    cursor: pointer !important;
+}
+</style>

package/components/es-error-page.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import IconContactUs from './icon/contact-us.vue';
+import IconCommunitySolar from './icon/community-solar.vue';
+import IconInfoBlogPost from './icon/info-blog-post.vue';
+import IconMarketplace from './icon/marketplace.vue';
+
+const ES_DOMAIN = process.env.ES_DOMAIN || 'https://www.energysage.com';
+const linkItems = [
+    {
+        icon: IconContactUs,
+        link: 'mailto:hello@energysage.com',
+        label: 'Contact us',
+    },
+    {
+        icon: IconCommunitySolar,
+        link: `${ES_DOMAIN}/solar/`,
+        label: 'Learn about solar',
+    },
+    {
+        icon: IconInfoBlogPost,
+        link: `${ES_DOMAIN}/blog/`,
+        label: 'EnergySage blog',
+    },
+    {
+        icon: IconMarketplace,
+        link: `${ES_DOMAIN}/shop/home-solar/`,
+        label: 'EnergySage marketplace',
+    },
+];
+
+const props = defineProps({
+    errorType: {
+        type: String,
+        required: true,
+    },
+});
+
+interface ErrorCode {
+    shortMessage?: string;
+    longMessage: string;
+}
+
+interface ErrorCodeMap {
+    [key: string]: ErrorCode;
+}
+
+const errorCodeToMessages: ErrorCodeMap = {
+    403: {
+        shortMessage: 'Access denied',
+        longMessage:
+            "Oops! If you're seeing this message, there's a good chance you have cookies or " +
+            'referrers turned off in your browser.',
+    },
+    404: {
+        shortMessage: 'Page not found',
+        longMessage: 'Oops! We are terribly sorry, but there is nothing bright to see here.',
+    },
+    500: {
+        shortMessage: 'Internal server error',
+        longMessage: 'Oops! We are terribly sorry, but our server is not so bright today. Please try again.',
+    },
+    503: {
+        shortMessage: 'Service unavailable',
+        longMessage: 'The page you are requesting is temporarily unavailable.',
+    },
+    default: {
+        longMessage: 'Oops! Something went wrong!',
+    },
+};
+
+const messages: ErrorCode = errorCodeToMessages[props.errorType];
+
+const errorShortMessage = messages?.shortMessage || props.errorType;
+
+const errorLongMessage = messages?.longMessage || errorCodeToMessages.default.longMessage;
+</script>
+
+<template>
+    <div class="bg-gray-50">
+        <es-container class="py-500 py-lg-800">
+            <es-row>
+                <es-col
+                    md="7"
+                    class="my-500 mx-auto text-center">
+                    <h1 class="post1 text-gray-600">
+                        {{ errorShortMessage }}
+                    </h1>
+                    <p
+                        id="msgError"
+                        class="font-size-lg text-gray-600">
+                        {{ errorLongMessage }}
+                    </p>
+                </es-col>
+            </es-row>
+            <es-row>
+                <es-col
+                    v-for="(item, index) in linkItems"
+                    :key="index"
+                    cols="6"
+                    md="3">
+                    <a
+                        class="align-items-center d-flex flex-column justify-content-center text-center"
+                        :href="item.link">
+                        <div
+                            class="bg-white d-flex justify-content-center mb-50 rounded-circle"
+                            align-v="center">
+                            <div class="m-100 text-orange">
+                                <component
+                                    :is="item.icon"
+                                    height="53px"
+                                    width="53px" />
+                            </div>
+                        </div>
+                        <p class="mb-200 mb-md-0">{{ item.label }}</p>
+                    </a>
+                </es-col>
+            </es-row>
+        </es-container>
+    </div>
+</template>

package/components/es-file-input.vue

@@ -0,0 +1,334 @@
+<script setup lang="ts">
+type UploadInfo = {
+    name: string;
+    uploadUrl: string;
+    additionalFields?: object;
+};
+
+const props = defineProps({
+    /**
+     * An array of Objects with the following shape:
+     * {
+     *    name: String,
+     *    uploadUrl: String,
+     *    additionalFields: Object,
+     * }
+     */
+    uploadUrls: {
+        type: Array<UploadInfo>,
+        default: () => [],
+    },
+    /**
+     * The file types that are allowed to be uploaded. This is a list of MIME types as strings. If the array is
+     * empty, all file types are allowed. A list of acceptable MIME types can be found here in the template column:
+     * https://www.iana.org/assignments/media-types/media-types.xhtml
+     */
+    fileTypes: {
+        type: Array,
+        default: () => [],
+        required: true,
+        validator(fileTypes: any[]) {
+            return fileTypes.every((fileType) => mimeTypes.includes(fileType));
+        },
+    },
+    /**
+     * The maximum file size in MB. This is per file, not the total size of all files.
+     */
+    maxFileSizeMb: {
+        type: Number,
+        default: 25,
+        required: false,
+    },
+    /**
+     * When true, the component will be shorter vertically. This is achieved by giving the parent div
+     * flex-direction: row instead of the default flex-direction: column.
+     */
+    collapsed: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+});
+
+let currentFiles: Array<File> = [];
+let active = false;
+const fileInput = ref(null);
+const emit = defineEmits([
+    'fileSizeError',
+    'fileTypeError',
+    'fileIsAFolderError',
+    'fileDataRead',
+    'duplicateFileMessage',
+    'readyToUpload',
+    'uploadFailure',
+    'uploadSuccess',
+]);
+
+const filterLargeFiles = (files: Array<File>) => {
+    // Takes an array of files, and filters out any files that exceed the maxFileSizeMb prop. Emits a
+    // fileSizeError event for each file that exceeds the maxFileSizeMb prop. The File API uses bytes, so
+    // we have to convert the maxFileSizeMb prop to bytes.
+    const maxFileSizeBytes = props.maxFileSizeMb * 1000000;
+    return [...files].filter((file) => {
+        if (file.size > maxFileSizeBytes) {
+            emit('fileSizeError', file.name);
+            return false;
+        }
+        return true;
+    });
+};
+
+const removeSpaceFromFileNames = (files: Array<File>) => {
+    const newFiles = files.map(
+        (file) =>
+            new File(
+                // Return new File object with the modified name (without any space)
+                [file],
+                file.name.replace(/\s/g, ''),
+                { type: file.type, lastModified: file.lastModified },
+            ),
+    );
+    return newFiles;
+};
+
+async function verifyMimeType(file: File) {
+    // If an empty folder then trigger fileIsAFolderError
+    if (file.type === '') {
+        emit('fileIsAFolderError');
+    }
+    return new Promise((resolve, reject) => {
+        const fileReader = new FileReader();
+        fileReader.onload = (evt) => {
+            // @ts-expect-error not sure
+            const uint = new Uint8Array(evt.target.result);
+            const bytes: string[] = [];
+            uint.forEach((byte) => {
+                bytes.push(byte.toString(16));
+            });
+            const hex = bytes.join('').toUpperCase();
+            const mimeType = findMimeType(hex);
+            if (!mimeType || (props.fileTypes.length > 0 && !props.fileTypes.includes(mimeType))) {
+                emit('fileTypeError', file.name);
+                return reject();
+            }
+            return resolve(file);
+        };
+        fileReader.onerror = (error) => {
+            reject(error);
+        };
+        const blob = file.slice(0, 4);
+        fileReader.readAsArrayBuffer(blob);
+    });
+}
+
+async function uploadSingleFile(file: File) {
+    const uploadInfo = props.uploadUrls.find((uploadUrl) => uploadUrl.name === file.name);
+    if (!uploadInfo) {
+        emit('uploadFailure', {
+            name: file.name,
+            message: 'No upload URL found for this file.',
+        });
+        return;
+    }
+    const form = new FormData();
+    if (uploadInfo.additionalFields) {
+        Object.entries(uploadInfo.additionalFields).forEach(([key, value]) => {
+            form.append(key, value);
+        });
+    }
+    form.append('file', file);
+    fetch(uploadInfo.uploadUrl, {
+        method: 'POST',
+        body: form,
+    })
+        .then((response) => {
+            if (response.status >= 200 && response.status < 300) {
+                emit('uploadSuccess', file.name);
+            } else {
+                emit('uploadFailure', {
+                    name: file.name,
+                    message: `Received ${response.status} code from server.`,
+                });
+            }
+        })
+        .catch((error) => {
+            if (error.response) {
+                // The request was made and the server responded with a status code
+                // that falls out of the range of 2xx
+                emit('uploadFailure', {
+                    name: file.name,
+                    message: `Received ${error.response.status} code from server.`,
+                });
+            } else if (error.request) {
+                // The request was made but no response was received
+                // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+                // http.ClientRequest in node.js
+                emit('uploadFailure', { name: file.name, message: 'The server did not respond.' });
+            } else {
+                // Something happened in setting up the request that triggered an Error
+                emit('uploadFailure', {
+                    name: file.name,
+                    message: 'There was an error sending your file to the server.',
+                });
+            }
+        });
+}
+
+const readFilesIntoUrl = (files: Array<File>) => {
+    files.forEach((file) => {
+        const fileReader = new FileReader();
+        fileReader.onload = () => {
+            emit('fileDataRead', {
+                name: file.name,
+                type: file.type,
+                size: file.size,
+                // For non-image files (pdf, docx, etc.)
+                data: file.type.includes('application')
+                    ? URL.createObjectURL(new Blob([file], { type: file.type }))
+                    : fileReader.result,
+            });
+        };
+        fileReader.readAsDataURL(file);
+    });
+};
+
+async function verifyFiles(files: Array<File>) {
+    const correctlySizedFiles = filterLargeFiles(files);
+    const correctlyNamedFiles = removeSpaceFromFileNames(correctlySizedFiles);
+
+    // Make sure the file is the correct mime type
+    let newValidFiles = (await Promise.allSettled(
+        correctlyNamedFiles.map(async (file) => verifyMimeType(file)),
+    )) as unknown as File[];
+    // Filter out undefined values and "rejected"
+    // @ts-expect-error basically we're filtering out the non-Files here
+    newValidFiles = newValidFiles.filter((file) => file && file.status === 'fulfilled').map((file) => file.value);
+
+    // If the new file with name already exists in the current files
+    // Don't upload the new file and display an error
+    const duplicateFiles = newValidFiles.filter(({ name }) => currentFiles.some((file) => file.name === name));
+    duplicateFiles.forEach((file) => emit('duplicateFileMessage', file.name));
+
+    // For new files with unused names, add them to files
+    newValidFiles = newValidFiles.filter(({ name }) => !currentFiles.some((file) => file.name === name));
+    currentFiles = [...currentFiles, ...newValidFiles];
+
+    if (newValidFiles.length > 0) {
+        emit('readyToUpload', newValidFiles);
+        readFilesIntoUrl(newValidFiles);
+    }
+}
+
+watch(
+    () => props.uploadUrls,
+    (newUrls, oldUrls) => {
+        // For every file that has an associated upload URL, we start the upload
+        newUrls.forEach((newUrlPair) => {
+            const oldUrl = oldUrls.find(({ name }) => name === newUrlPair.name);
+            const fileToUpload = currentFiles.find((file) => file.name === newUrlPair.name);
+            if ((!oldUrl || oldUrl.uploadUrl !== newUrlPair.uploadUrl) && fileToUpload) {
+                uploadSingleFile(fileToUpload);
+            }
+        });
+    },
+);
+
+async function onFileChanged($event: Event) {
+    const target = $event.target as HTMLInputElement;
+    // The user has selected files from the file picker. We have to filter out any files that exceed the
+    // maxFileSizeMb prop.
+    if (target && target.files) {
+        await verifyFiles([...target.files]);
+    }
+}
+
+const onDrop = (event: any) => {
+    // The user has dropped files onto the component. We have to apply the same logic as if they had
+    // selected the files from the file picker which limits the file types to the ones specified in the
+    // fileTypes prop.
+    active = false;
+
+    // Use DataTransferItemList interface to access the file(s)
+    const dataTransfersAsFiles = [...event.dataTransfer.items]
+        .filter((item) => {
+            if (item.kind !== 'file') {
+                emit('fileTypeError', item.name);
+                return false;
+            }
+            return true;
+        })
+        .map((item) => item.getAsFile());
+
+    verifyFiles(dataTransfersAsFiles);
+};
+
+const openFilePicker = () => {
+    if (fileInput.value) {
+        // @ts-expect-error not sure
+        fileInput.value.click();
+    }
+};
+</script>
+
+<template>
+    <div
+        role="presentation"
+        class="es-file-upload align-items-center rounded-sm d-flex flex-column justify-content-center p-150"
+        :class="{ active: active }"
+        @dragenter.stop.prevent="active = true"
+        @dragover.stop.prevent="active = true"
+        @dragleave.stop.prevent="active = false"
+        @dragend.stop.prevent="onDrop"
+        @drop.stop.prevent="onDrop"
+        @click.self="openFilePicker"
+        @keydown.enter.prevent="openFilePicker"
+        @keydown.space.prevent="openFilePicker">
+        <div
+            class="d-flex justify-content-center flex-column"
+            :class="{ 'flex-md-row': collapsed }">
+            <div class="align-self-center">
+                <icon-upload
+                    class="d-none d-md-inline-block"
+                    :class="{ 'mb-200': collapsed }"
+                    height="32px"
+                    width="32px" />
+                <icon-upload
+                    class="d-md-none"
+                    height="24px"
+                    width="24px" />
+            </div>
+            <div
+                class="align-self-center text-center"
+                :class="{ 'px-100': collapsed }">
+                <slot name="cta" />
+            </div>
+            <div class="align-self-center">
+                <es-button
+                    class="d-none d-md-inline w-100 w-md-auto"
+                    :class="{ 'mb-200': collapsed }"
+                    @click="openFilePicker">
+                    <slot name="buttonText">
+                        <p class="m-0">Browse files</p>
+                    </slot>
+                </es-button>
+                <es-button
+                    class="d-md-none w-100"
+                    @click="openFilePicker">
+                    <slot name="buttonText">
+                        <p class="m-0">Choose files</p>
+                    </slot>
+                </es-button>
+            </div>
+        </div>
+        <div>
+            <slot name="helpText" />
+        </div>
+        <input
+            ref="fileInput"
+            type="file"
+            :accept="fileTypes.join(', ')"
+            style="display: none"
+            multiple
+            @change="onFileChanged($event)" />
+    </div>
+</template>

package/components/es-file-preview-modal.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+defineProps({
+    visible: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    fileName: {
+        type: String,
+        default: 'test.png',
+        required: false,
+    },
+    fileSource: {
+        type: String,
+        default: '',
+        required: false,
+    },
+});
+
+defineEmits(['hidden']);
+</script>
+
+<template>
+    <es-modal
+        :id="`preview-modal-${fileName}`"
+        hide-footer
+        :visible="visible"
+        size="xl"
+        body-class="border-top p-0"
+        @hidden="$emit('hidden')">
+        <template #modal-title>
+            {{ fileName }}
+        </template>
+        <div class="d-md-none d-block file-preview text-center">
+            <nuxt-img
+                loading="lazy"
+                class="img-fluid file-preview"
+                :src="fileSource"
+                :alt="fileName" />
+        </div>
+        <div class="d-none d-md-block">
+            <div class="px-500 py-200 bg-gray-200">
+                <div class="card bg-white file-preview">
+                    <nuxt-img
+                        loading="lazy"
+                        class="img-fluid file-preview rounded-img"
+                        :src="fileSource"
+                        :alt="fileName" />
+                </div>
+            </div>
+        </div>
+    </es-modal>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+.rounded-img {
+    border-radius: variables.$card-inner-border-radius !important;
+}
+</style>