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

package/components/icon/wifi.vue

@@ -0,0 +1,38 @@
+<script lang="ts">
+export default {
+    name: 'IconWifi',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12 6c-3.161 0-6.406 1.5-9.257 4.669A1 1 0 1 1 1.257 9.33C4.406 5.831 8.16 4 12 4c3.839 0 7.594 1.832 10.743 5.331a1 1 0 1 1-1.486 1.338C18.406 7.5 15.16 5.999 12 5.999Zm0 6c-1.761 0-3.606.835-5.257 2.669a1 1 0 1 1-1.486-1.338C7.206 11.165 9.56 10 12 10s4.794 1.165 6.743 3.331a1 1 0 1 1-1.486 1.338C15.606 12.835 13.76 12 12 12Zm-2 6a2 2 0 1 1 4 0 2 2 0 0 1-4 0Z" />
+    </svg>
+</template>

package/components/icon/x.vue

@@ -0,0 +1,38 @@
+<script lang="ts">
+export default {
+    name: 'XIcon',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '24px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M5.293 5.293a1 1 0 0 1 1.414 0L12 10.586l5.293-5.293a1 1 0 1 1 1.414 1.414L13.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414L12 13.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L10.586 12 5.293 6.707a1 1 0 0 1 0-1.414Z" />
+    </svg>
+</template>

package/components/icon/youtube.vue

@@ -0,0 +1,45 @@
+<script lang="ts">
+export default {
+    name: 'IconYoutube',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '31px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '32px',
+            required: false,
+        },
+    },
+};
+</script>
+<template>
+    <svg
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 31 32"
+        fill="currentColor">
+        <path
+            fill="none"
+            d="M0 .4h31v31H0z" />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="m13.4 19 5.5-3-5.5-3.3v6.4Z" />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M15.5.4a15.5 15.5 0 1 0 0 31 15.5 15.5 0 0 0 0-31ZM26.1 15V16.9a18 18 0 0 1-.4 4c0 .5-.3.9-.6 1.2-.4.4-.9.6-1.4.7-1 .3-2.7.5-6.3.5h-1.6c-8.6 0-8.7-.3-9.6-1l-.2-.2-.7-1a17.5 17.5 0 0 1-.4-4.3V14.9c0-1.4.1-2.7.4-4 .1-.5.3-.9.7-1.2.3-.4.8-.6 1.3-.7 1-.3 2.8-.5 6.3-.5h1.6c8.6 0 8.7.3 9.6 1l.2.2c.3.3.6.7.7 1.1A17.5 17.5 0 0 1 26 15Z" />
+    </svg>
+</template>

package/composables/forms.ts

@@ -0,0 +1,124 @@
+import { type ErrorObject, useVuelidate, type ValidationArgs } from '@vuelidate/core';
+import type { ToRefs, Ref } from 'vue';
+
+export function useEsForms<
+    // eslint-disable-next-line no-unused-vars, no-use-before-define, @typescript-eslint/no-explicit-any
+    T extends { [key in keyof Vargs]: any },
+    Vargs extends ValidationArgs = ValidationArgs,
+>(validationsArgs: Ref<Vargs> | Vargs, state: T | Ref<T> | ToRefs<T>) {
+    const v$ = useVuelidate(validationsArgs, state);
+
+    const submitInProgress = ref(false);
+    const formShowSuccess = ref(false);
+    const formShowError = ref(false);
+    const formMsgVariant = ref('danger');
+
+    const isSubmitInProgress = computed(() => submitInProgress.value);
+
+    const getFields = (obj: any, valueKey = 'obj') => {
+        let objKeys = null;
+        try {
+            objKeys = Object.keys(obj);
+            // eslint-disable-next-line no-console
+            console.log('objKeys: ', objKeys);
+        } catch {
+            return [];
+        }
+        return objKeys.filter((name) => !name.startsWith('$')).map((name) => ({ name, [valueKey]: obj[name] }));
+    };
+
+    const formErrors = computed(() => {
+        const errors = v$.value.$errors.map((error) => error);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return errors.reduce((acc: any, error: ErrorObject) => {
+            if (!(error.$property in acc)) {
+                // eslint-disable-next-line no-param-reassign
+                acc[error.$property] = [];
+            }
+            acc[error.$property].push(error.$validator);
+            return acc;
+        }, {});
+    });
+
+    const getValidatorField = (dotPath: string) => {
+        const validatorField = dotPath.split('.').reduce((acc, field) => {
+            // eslint-disable-next-line no-param-reassign
+            acc = acc[field];
+            return acc;
+        }, v$.value);
+        if (!validatorField) {
+            return null;
+        }
+        if (!['$dirty', '$error'].map((key) => Object.prototype.hasOwnProperty.call(validatorField, key))) {
+            return null;
+        }
+        return validatorField;
+    };
+
+    const validateState = (dotPath: string) => {
+        const validatorField = getValidatorField(dotPath);
+        if (!validatorField) {
+            return null;
+        }
+        const { $dirty, $error } = validatorField;
+        return $dirty ? !$error : null;
+    };
+
+    const touchOnChange = (dotPath: string) => {
+        const validatorField = getValidatorField(dotPath);
+        if (!validatorField) {
+            return;
+        }
+        if (validatorField.$dirty) {
+            validatorField.$touch();
+        }
+    };
+
+    const showFormError = () => {
+        formMsgVariant.value = 'danger';
+        formShowError.value = true;
+    };
+
+    const showFormSuccess = () => {
+        formMsgVariant.value = 'success';
+        formShowSuccess.value = true;
+    };
+
+    const hideFormError = () => {
+        formShowError.value = false;
+    };
+
+    const hideFormSuccess = () => {
+        formShowSuccess.value = false;
+    };
+
+    const startSubmit = () => {
+        submitInProgress.value = true;
+        formShowSuccess.value = false;
+        formShowError.value = false;
+    };
+
+    const stopSubmit = () => {
+        submitInProgress.value = false;
+    };
+
+    return {
+        v$,
+        submitInProgress,
+        formShowSuccess,
+        formShowError,
+        formMsgVariant,
+        isSubmitInProgress,
+        formErrors,
+        getValidatorField,
+        validateState,
+        touchOnChange,
+        showFormError,
+        showFormSuccess,
+        hideFormError,
+        hideFormSuccess,
+        startSubmit,
+        stopSubmit,
+        getFields,
+    };
+}

package/nuxt.config.ts

@@ -1,2 +1,84 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
-export default defineNuxtConfig({})
+export default defineNuxtConfig({
+    compatibilityDate: '2024-04-03',
+
+    // https://nuxt.com/docs/getting-started/styling#the-css-property
+    css: ['@energysage/es-ds-styles/scss/bootstrap.scss'],
+
+    // https://google-fonts.nuxtjs.org/options
+    googleFonts: {
+        preload: true,
+        download: false,
+        display: 'swap',
+        families: {
+            'Plus+Jakarta+Sans': {
+                wght: '200..800',
+                ital: '200..800',
+            },
+        },
+    },
+
+    // Configure how Nuxt auto-imports composables into your application.
+    imports: {
+        dirs: ['composables', 'types'],
+    },
+
+    modules: [
+        // https://google-fonts.nuxtjs.org/getting-started/setup
+        '@nuxtjs/google-fonts',
+        // https://v3.primevue.org/nuxt
+        'nuxt-primevue',
+    ],
+
+    primevue: {
+        components: {
+            include: [],
+        },
+        options: {
+            unstyled: true,
+        },
+    },
+
+    sourcemap: {
+        server: true,
+        client: true,
+    },
+
+    // Per suggestion from https://github.com/nuxt/nuxt/issues/26783#issuecomment-2058966800
+    // See also:
+    // - https://github.com/nuxt/nuxt/issues/24196#issuecomment-1853870504
+    vite: {
+        optimizeDeps: {
+            include: [
+                '@vuelidate/core',
+                '@vuelidate/validators',
+                'html-truncate',
+                '@vueuse/core',
+                'primevue/accordion',
+                'primevue/accordiontab',
+                'primevue/breadcrumb',
+                'primevue/button',
+                'primevue/carousel',
+                'primevue/column',
+                'primevue/datatable',
+                'primevue/dialog',
+                'primevue/inputmask',
+                'primevue/inputotp',
+                'primevue/inputtext',
+                'primevue/overlaypanel',
+                'primevue/paginator',
+                'primevue/panel',
+                'primevue/progressbar',
+                'primevue/radiobutton',
+                'primevue/rating',
+                'primevue/skeleton',
+                'primevue/slider',
+                'primevue/tabpanel',
+                'primevue/tabview',
+            ],
+        },
+    },
+    typescript: {
+        typeCheck: true,
+    },
+});

package/package.json

@@ -1,15 +1,49 @@
 {
-  "name": "@energysage/es-ds-components",
-  "version": "0.0.1",
-  "private": false,
-  "description": "An EnergySage Vue component library",
-  "main": "./nuxt.config.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "EnergySage",
-  "license": "MIT",
-  "devDependencies": {
-    "nuxt": "^3.12.4"
-  }
+    "name": "@energysage/es-ds-components",
+    "version": "3.0.0-alpha.10",
+    "private": false,
+    "type": "module",
+    "description": "An EnergySage Vue component library",
+    "main": "./nuxt.config.ts",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "lint:eslint": "eslint .",
+        "lint:prettier": "prettier --check .",
+        "lint": "npm run lint:eslint && npm run lint:prettier",
+        "format:prettier": "prettier --write --list-different .",
+        "format:eslint": "npm run lint:eslint -- --fix",
+        "format": "npm run format:prettier && npm run format:eslint"
+    },
+    "author": "EnergySage",
+    "license": "MIT",
+    "dependencies": {
+        "@energysage/es-ds-styles": "^3.0.0-alpha.8",
+        "@nuxtjs/google-fonts": "^3.2.0",
+        "@vuelidate/core": "^2.0.3",
+        "@vuelidate/validators": "^2.0.4",
+        "@vueuse/core": "^11.1.0",
+        "html-truncate": "^1.2.2",
+        "nuxt": "^3.13.2",
+        "nuxt-primevue": "^3.0.0",
+        "primevue": "^3.53.0",
+        "prismjs": "^1.29.0",
+        "vue": "^3.5.6"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.9.0",
+        "@types/eslint__js": "^8.42.3",
+        "eslint": "^8.57.0",
+        "eslint-config-airbnb-base": "^15.0.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-import-resolver-typescript": "^3.6.1",
+        "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-vitest": "^0.5.4",
+        "eslint-plugin-vue": "^9.27.0",
+        "nuxt-primevue": "^3.0.0",
+        "prettier": "^3.3.3",
+        "sass": "^1.77.8",
+        "typescript": "^5.5.4",
+        "typescript-eslint": "^8.2.0",
+        "vue-tsc": "^2.0.29"
+    }
 }

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    // https://nuxt.com/docs/guide/concepts/typescript
+    "extends": "../es-ds-docs/.nuxt/tsconfig.json"
+}

package/types/es-carousel.ts

@@ -0,0 +1,12 @@
+export interface EsCarouselBreakpointInterface {
+    numScroll?: number;
+    numVisible: number;
+}
+
+export interface EsCarouselBreakpointsInterface {
+    sm?: EsCarouselBreakpointInterface;
+    md?: EsCarouselBreakpointInterface;
+    lg?: EsCarouselBreakpointInterface;
+    xl?: EsCarouselBreakpointInterface;
+    xxl?: EsCarouselBreakpointInterface;
+}

package/types/index.ts

@@ -0,0 +1 @@
+export type * from './es-carousel';

package/utils/forms.ts

@@ -0,0 +1,120 @@
+import {
+    helpers,
+    required,
+    minValue,
+    maxValue,
+    requiredIf,
+    numeric,
+    integer,
+    minLength,
+    maxLength,
+} from '@vuelidate/validators';
+
+// Only some vuelidate validators can be reused; others don't work well
+export const vuelidateRequired = required;
+export const vuelidateMinValue = minValue;
+export const vuelidateMaxValue = maxValue;
+export const vuelidateRequiredIf = requiredIf;
+export const vuelidateNumeric = numeric;
+export const vuelidateInteger = integer;
+export const vuelidateMinLength = minLength;
+export const vuelidateMaxLength = maxLength;
+export const vuelidateHelpers = helpers;
+
+/**
+ * @returns a function that takes a number, and returns another function which takes a string param
+ * that will ultimately be what you're comparing the pattern against N times.
+ */
+// eslint-disable-next-line max-len
+const matchesPatternNTimes =
+    (pattern: RegExp) =>
+    (N = 1) =>
+    (param: string) =>
+        [...String(param).matchAll(pattern)].length >= N;
+
+/**
+ * @param { Number } number of times the resulting function will need to match
+ * @returns { Function } function that will take a string param that will compare against a
+ * pattern N times. The pattern is defined in the functional closure.
+ *
+ * Usage: hasNumber(1)('s0me string')
+ */
+const hasNumber = matchesPatternNTimes(/[0-9]/g);
+
+/**
+ * @param { Number } number of times the resulting function will need to match
+ * @returns { Function } function that will take a string param that will compare against a
+ * pattern N times. The pattern is defined in the functional closure.
+ *
+ * Usage: hasSpecialCharacter(1)('some $tring')
+ */
+const hasSpecialCharacter = matchesPatternNTimes(/\W|_/g);
+
+/**
+ * @param { Number } number of times the resulting function will need to match
+ * @returns { Function } function that will take a string param that will compare against a
+ * pattern N times. The pattern is defined in the functional closure.
+ *
+ * Usage: hasUppercaseLetter(1)('some String')
+ */
+const hasUppercaseLetter = matchesPatternNTimes(/[A-Z]/g);
+
+/**
+ * @param { Number } number of times the resulting function will need to match
+ * @returns { Function } function that will take a string param that will compare against a
+ * pattern N times. The pattern is defined in the functional closure.
+ *
+ * Usage: hasLowercaseLetter(1)('some String')
+ */
+const hasLowercaseLetter = matchesPatternNTimes(/[a-z]/g);
+
+/**
+ * @param emailAddress Email Address
+ * @returns if valid
+ */
+export function vuelidateEmail(emailAddress: string) {
+    const valid = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z][\w]{1,}$/i.test(emailAddress);
+    return !helpers.req(emailAddress) || valid;
+}
+
+/**
+ * @param number US Based phone number
+ * @returns if valid
+ */
+export function vuelidatePhone(number: string) {
+    return !helpers.req(number) || /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,6}$/.test(number);
+}
+
+/**
+ * @returns if not required or string contains a number
+ */
+// eslint-disable-next-line max-len
+export const vuelidateHasNumber = (X: number) =>
+    helpers.withParams({ type: 'xTimes', value: X }, (value: string) => !helpers.req(value) || hasNumber(X)(value));
+
+/**
+ * @returns if not required or string contains a special character
+ */
+export const vuelidateHasSpecialCharacter = (X: number) =>
+    helpers.withParams(
+        { type: 'xTimes', value: X },
+        (value: string) => !helpers.req(value) || hasSpecialCharacter(X)(value),
+    );
+
+/**
+ * @returns if not required or string contains an uppercase letter
+ */
+export const vuelidateHasUppercaseLetter = (X: number) =>
+    helpers.withParams(
+        { type: 'xTimes', value: X },
+        (value: string) => !helpers.req(value) || hasUppercaseLetter(X)(value),
+    );
+
+/**
+ * @returns if not required or string contains an lowercase letter
+ */
+export const vuelidateHasLowercaseLetter = (X: number) =>
+    helpers.withParams(
+        { type: 'xTimes', value: X },
+        (value: string) => !helpers.req(value) || hasLowercaseLetter(X)(value),
+    );

package/utils/get-es-footer-content.ts

@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-unused-vars */
+// keeping COMMUNITY_SOLAR_DOMAIN, HEAT_PUMPS_DOMAIN and NEWS_DOMAIN for now to keep function argument order intact
+// and to minimize breaking change to consuming applications, but they are now deprecated in this function
+export default (
+    ES_DOMAIN = process.env.ES_DOMAIN || 'https://www.energysage.com',
+    NEWS_DOMAIN = process.env.NEWS_DOMAIN || 'https://www.energysage.com',
+    COMMUNITY_SOLAR_DOMAIN = process.env.COMMUNITY_SOLAR_DOMAIN || 'https://communitysolar.energysage.com',
+    HEAT_PUMPS_DOMAIN = process.env.HEAT_PUMPS_DOMAIN || 'https://heatpumps.energysage.com',
+) => ({
+    banner: {
+        headline: 'Make an impact.',
+        subHeadline: "It's never been easier.",
+        body: `We developed our one-of-a-kind marketplace with funding from the U.S. Department of Energy to make
+            clean home energy solutions affordable and accessible to all.`,
+    },
+    home: {
+        name: 'EnergySage',
+        link: ES_DOMAIN,
+    },
+    columns: [
+        // TODO: remove new tab option once other verticals adopt global nav
+        {
+            title: 'Our offerings',
+            links: [
+                { text: 'Home solar', url: `${ES_DOMAIN}/shop/home-solar/` },
+                { text: 'Community solar', url: `${ES_DOMAIN}/shop/community-solar/` },
+                { text: 'Heating & cooling', url: `${ES_DOMAIN}/shop/heat-pumps/` },
+                { text: 'Backup power', url: `${ES_DOMAIN}/energy-storage/` },
+                { text: 'EV charging', url: `${ES_DOMAIN}/ev-charging/` },
+                { text: 'For your business', url: `${ES_DOMAIN}/businesses/` },
+                { text: 'Other energy options', url: `${ES_DOMAIN}/other-clean-options/` },
+            ],
+        },
+        {
+            title: 'Resources',
+            links: [
+                { text: 'Solar calculator', url: `${ES_DOMAIN}/solar/calculator/` },
+                { text: 'Solar rebates', url: `${ES_DOMAIN}/market/equipment-rebates/` },
+                { text: 'News', url: `${ES_DOMAIN}/blog/` },
+                { text: 'Home solar guide', url: `${ES_DOMAIN}/shop/home-solar/` },
+                { text: 'Market intel', url: `${ES_DOMAIN}/data/` },
+                { text: 'Refer a friend', url: `${ES_DOMAIN}/refer-a-friend/` },
+            ],
+        },
+        {
+            title: 'About us',
+            links: [
+                { text: 'Mission & values', url: `${ES_DOMAIN}/about-us/company/` },
+                { text: 'How it works', url: `${ES_DOMAIN}/shop/home-solar/` },
+                { text: 'Careers', url: `${ES_DOMAIN}/about-us/careers/` },
+                { text: 'Contact us', url: `${ES_DOMAIN}/contact/` },
+                { text: 'Editorial guidelines', url: `${ES_DOMAIN}/editorial-guidelines/` },
+            ],
+        },
+        {
+            title: 'Work with us',
+            links: [
+                { text: 'Solar & HVAC installers', url: `${ES_DOMAIN}/installers/` },
+                { text: 'Corporate partnerships', url: `${ES_DOMAIN}/partners/corporations` },
+                { text: 'Community programs', url: `${ES_DOMAIN}/partners/non-profits` },
+                { text: 'Utility programs', url: `${ES_DOMAIN}/partners/utilities` },
+                { text: 'Others', url: `${ES_DOMAIN}/partners/` },
+            ],
+        },
+    ],
+    socialLinks: [
+        { text: 'Facebook', url: 'https://www.facebook.com/EnergySage', icon: 'icon-facebook' },
+        { text: 'LinkedIn', url: 'https://www.linkedin.com/company/energysage/', icon: 'icon-linkedin' },
+        { text: 'Instagram', url: 'https://www.instagram.com/energysage_official/', icon: 'icon-instagram' },
+        { text: 'X', url: 'https://X.com/energysage', icon: 'icon-twitter' },
+        { text: 'YouTube', url: 'https://www.youtube.com/c/EnergySage', icon: 'icon-youtube' },
+    ],
+    legalLinks: [
+        { text: 'Terms of use', url: `${ES_DOMAIN}/terms-of-use/` },
+        { text: 'Privacy policy', url: `${ES_DOMAIN}/privacy-policy/` },
+        { text: 'Mobile terms of use', url: `${ES_DOMAIN}/mobile-terms-of-use/` },
+        { text: 'Non-discrimination policy', url: `${ES_DOMAIN}/nondiscrimination/` },
+    ],
+    copyrightText: '© Copyright 2009-{currentYear} EnergySage, Inc. All rights reserved.',
+    trademarkText: `ENERGYSAGE is a registered trademark and the EnergySage logo is a trademark of EnergySage, Inc.
+        Other trademarks are the property of either EnergySage, Inc. or our licensors and are used with permission.`,
+    departmentOfEnergy: {
+        learnMore: {
+            link: 'https://www.energy.gov/eere/solar/articles/eere-success-story-doe-funding-helps-build-one-stop-shop-rooftop-pv-systems',
+            text: 'Learn more about our success working with the U.S. Department of Energy.',
+        },
+        logoUrl: 'https://www-static.energysage.com/static/img/doe/doe-logo-179.943fe6467b04.png',
+    },
+});