npm - generator-folklore - Versions diffs - 3.0.30 → 3.0.33 - Mend

generator-folklore 3.0.30 → 3.0.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/lib/generators/micromag-project/templates/hooks/useStoryTrackingVariables.ts ADDED Viewed

@@ -0,0 +1,41 @@
+import isEmpty from 'lodash/isEmpty';
+import uniq from 'lodash/uniq';
+import { useMemo } from 'react';
+import { MicromagStory } from '../types/micromag';
+export function useStoryTrackingVariables(story: MicromagStory): Record<string, unknown> {
+    const trackingVariables = useMemo(() => {
+        // Organisation level
+        const { organisation = null, document_id: documentId = null } = story || {};
+        const { slug: organisationSlug = null, tracking = {} } = organisation || {};
+        const { codes: orgCodes = [] } = tracking || {};
+        const orgGoogleAnalyticsIds = (orgCodes || [])
+            .filter((orgCode) => {
+                const { type, id } = orgCode || {};
+                return type === 'ga' && !isEmpty(id);
+            })
+            .map(({ id }) => id);
+        // Story level
+        const { tracking: { codes: storyCodes = [] } = {} } =
+            story !== null ? story.settings || {} : {};
+        const storyGoogleAnalyticsIds = (storyCodes || [])
+            .filter((storyCode) => {
+                const { type, id } = storyCode || {};
+                return (type === 'ga' || type === 'ga4') && !isEmpty(id);
+            })
+            .map(({ id }) => id);
+        return {
+            documentId,
+            organisationSlug,
+            clientGoogleAnalyticsIds: uniq([...orgGoogleAnalyticsIds, ...storyGoogleAnalyticsIds]),
+        };
+    }, [story]);
+    return trackingVariables;
+}
+export default useStoryTrackingVariables;

package/lib/generators/micromag-project/templates/icons/Cookie.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import classNames from 'classnames';
+function Cookie({ className = null }) {
+    return (
+        <svg
+            className={classNames(className)}
+            width="600px"
+            height="600px"
+            viewBox="0 0 600 600"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+        >
+            <path
+                fill="#FFF"
+                d="M300,0C134.3,0,0,134.3,0,300s134.3,300,300,300,300-134.3,300-300-.9-24-2.3-35.8c-10,6.8-22.1,10.8-35.2,10.8-27,0-49.7-17.2-58.5-41-15.6,10-34.1,16-54,16-55.3,0-100-44.7-100-100s5.3-35.4,14-50.2c-.5,0-1,.2-1.5.2-34.6,0-62.5-27.9-62.5-62.5s4.7-26.7,12.4-37c-4.1-.2-8.2-.5-12.4-.5ZM487.5,0c-20.7,0-37.5,16.8-37.5,37.5s16.8,37.5,37.5,37.5,37.5-16.8,37.5-37.5S508.2,0,487.5,0ZM251.3,54.7c5,32.2,23.7,60,49.9,77.1-.8,6-1.2,12.1-1.2,18.2,0,82.7,67.3,150,150,150s24.8-1.6,36.7-4.7c17.1,15.6,38.7,26,62.1,28.9-12.2,126.6-119.1,225.8-248.8,225.8S50,437.9,50,300,136.7,77.4,251.3,54.7ZM450,125c-13.8,0-25,11.2-25,25s11.2,25,25,25,25-11.2,25-25-11.2-25-25-25ZM250,150c-13.8,0-25,11.2-25,25s11.2,25,25,25,25-11.2,25-25-11.2-25-25-25ZM575,150c-13.8,0-25,11.2-25,25s11.2,25,25,25,25-11.2,25-25-11.2-25-25-25ZM175,225c-27.6,0-50,22.4-50,50s22.4,50,50,50,50-22.4,50-50-22.4-50-50-50ZM300,275c-13.8,0-25,11.2-25,25s11.2,25,25,25,25-11.2,25-25-11.2-25-25-25ZM212.5,375c-20.7,0-37.5,16.8-37.5,37.5s16.8,37.5,37.5,37.5,37.5-16.8,37.5-37.5-16.8-37.5-37.5-37.5ZM387.5,400c-20.7,0-37.5,16.8-37.5,37.5s16.8,37.5,37.5,37.5,37.5-16.8,37.5-37.5-16.8-37.5-37.5-37.5Z"
+            />
+        </svg>
+    );
+}
+export default Cookie;

package/lib/generators/micromag-project/templates/index.html.ejs ADDED Viewed

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<!--[if IE]> <html class="ie" lang="fr"> <![endif]-->
+<!--[if !(IE)]><!-->
+<html lang="fr">
+    <!--<![endif]-->
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <title></title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="" />
+        <meta property="og:locale" content="fr_CA" />
+        <meta property="og:image" content="/static/media/facebook.jpg" />
+        <meta property="og:title" content="Espace pour la vie - Micromags" />
+        <meta property="og:type" content="website" />
+        <meta property="og:description" content="" />
+        <meta property="og:url" content="/" />
+        <link rel="shortcut icon" href="/static/media/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <script type="text/javascript">
+            var TAG_MANAGER_ID = '';
+        </script>
+        <!-- Google Tag Manager -->
+        <script>
+            (function (w, d, s, l, i) {
+                w[l] = w[l] || [];
+                w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+                var f = d.getElementsByTagName(s)[0],
+                    j = d.createElement(s),
+                    dl = l != 'dataLayer' ? '&l=' + l : '';
+                j.async = true;
+                j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+                f.parentNode.insertBefore(j, f);
+                window.dataLayer = window.dataLayer || [];
+                function gtag() {
+                    dataLayer.push(arguments);
+                }
+                window.gtag = gtag;
+                function getCookieValue(name) {
+                    const regex = new RegExp(`(^| )${name}=([^;]+)`);
+                    const match = document.cookie.match(regex);
+                    if (match) {
+                        return match[2];
+                    }
+                }
+                const defaultConsent = {
+                    ad_storage: getCookieValue('ad_storage') === 'granted' ? 'granted' : 'denied',
+                    ad_user_data:
+                        getCookieValue('ad_user_data') === 'granted' ? 'granted' : 'denied',
+                    ad_personalization:
+                        getCookieValue('ad_personalization') === 'granted' ? 'granted' : 'denied',
+                    personalization_storage:
+                        getCookieValue('personalization_storage') === 'granted'
+                            ? 'granted'
+                            : 'denied',
+                    analytics_storage:
+                        getCookieValue('analytics_storage') === 'granted' ? 'granted' : 'denied',
+                    functionality_storage: 'granted',
+                    security_storage: 'granted',
+                };
+                gtag('consent', 'default', defaultConsent);
+            })(window, document, 'script', 'dataLayer', TAG_MANAGER_ID);
+        </script>
+        <!-- End Google Tag Manager -->
+    </head>
+    <body>
+        <!-- Google Tag Manager (noscript) -->
+        <noscript
+            ><iframe
+                src="https://www.googletagmanager.com/ns.html?id="
+                height="0"
+                width="0"
+                style="display: none; visibility: hidden"
+            ></iframe
+        ></noscript>
+        <!-- End Google Tag Manager (noscript) -->
+        <script type="text/javascript">
+            var props = {
+                googleAnalyticsIds: [],
+                tagManagerId: TAG_MANAGER_ID,
+            };
+        </script>
+        <div id="app"></div>
+    </body>
+</html>

package/lib/generators/micromag-project/templates/kiosk/HomePage.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+import { Link, Redirect } from 'wouter';
+import Thumbnail from '../partials/Thumbnail';
+import styles from '<%= getRelativeStylesPath('components/pages/Home.jsx', 'pages/home.module.css') %>';
+interface HomePageProps {
+    screen?: string | null;
+    micromags?: Record<string, any> | null;
+}
+function HomePage({ micromags = null }: HomePageProps) {
+    if (micromags === null || micromags.length === 0) {
+        return <div className={styles.container} />;
+    }
+    if (micromags.length === 1) {
+        return <Redirect to={`/${micromags[0].slug}`} />;
+    }
+    return (
+        <div className={styles.container}>
+            <div className={styles.grid}>
+                {(micromags || []).map((micromag) => (
+                    <Link key={micromag.id} href={`/${micromag.slug}`} className={styles.cellLink}>
+                        <Thumbnail micromag={micromag} className={styles.cell} />
+                    </Link>
+                ))}
+            </div>
+        </div>
+    );
+}
+export default HomePage;

package/lib/generators/micromag-project/templates/kiosk/Routes.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import { useRoutes } from '@folklore/routes';
+import { Route, Switch } from 'wouter';
+import { MicromagItem } from '../types/micromag';
+import MainLayout from './layouts/Main';
+import HomePage from './pages/Home';
+import MicromagPage from './pages/Micromag';
+interface RoutesProps {
+    micromags?: MicromagItem[] | null;
+    loading?: boolean;
+}
+function Routes({ micromags = null, loading = false }: RoutesProps) {
+    const routes = useRoutes() || {};
+    return (
+        <Switch>
+            <Route path="/:micromag/:screen?">
+                {({
+                    micromag: micromagSlug = null,
+                    screen = null,
+                }: {
+                    micromag: string;
+                    screen?: string;
+                }) => (
+                    <MainLayout>
+                        <MicromagPage
+                            micromag={
+                                (micromags || []).find(({ slug }) => slug === micromagSlug) || null
+                            }
+                            screen={screen}
+                            hasHome
+                        />
+                    </MainLayout>
+                )}
+            </Route>
+            <Route>
+                <MainLayout>
+                    <HomePage micromags={micromags} />
+                </MainLayout>
+            </Route>
+        </Switch>
+    );
+}
+export default Routes;

package/lib/generators/micromag-project/templates/kiosk/home-page.module.css ADDED Viewed

@@ -0,0 +1,83 @@
+.container {
+    position: relative;
+    width: 100%;
+    min-height: 100%;
+    .hero {
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        padding: 40px;
+    }
+    .heroLink {
+        display: block;
+        max-height: 60svh;
+        aspect-ratio: 9 / 16;
+    }
+    .heroThumbnail {
+        display: block;
+        max-width: 100%;
+    }
+    .heroInfo {
+        margin-left: 20px;
+    }
+    .grid {
+        display: grid;
+        overflow: hidden;
+        padding: 20px;
+        gap: 20px;
+        grid-template-columns: 1fr;
+        style {
+            display: none;
+            visibility: hidden;
+        }
+        .cell {
+            position: absolute;
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+            background: transparent;
+            inset: 0;
+            object-fit: contain;
+        }
+        .cellLink {
+            position: relative;
+            overflow: hidden;
+            width: 100%;
+            height: 100svh;
+            margin: 0 auto;
+            cursor: pointer;
+            transform-origin: center;
+            transition: transform 0.3s ease;
+            &:hover {
+                transform: scale(1.05);
+            }
+        }
+        @media (min-width: 768px) {
+            grid-template-columns: repeat(2, 1fr);
+            .cellLink {
+                height: 66svh;
+            }
+        }
+        @media (min-width: 1400px) {
+            grid-template-columns: repeat(3, 1fr);
+            .cellLink {
+                height: 50svh;
+            }
+        }
+    }
+}

package/lib/generators/micromag-project/templates/kiosk/micromags.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { MicromagItem } from './types/micromag';
+import testStory from './micromags/test/data.json';
+const micromags: MicromagItem[] = [
+    {
+        id: 'test-story',
+        slug: 'test-story',
+        story: testStory,
+    },
+];
+export default micromags;

package/lib/generators/micromag-project/templates/kiosk/styles.css ADDED Viewed

@@ -0,0 +1,86 @@
+/* stylelint-disable selector-class-pattern */
+@import 'sanitize.css';
+@import './theme.css';
+@import '@micromag/core/assets/css/styles.css';
+@import '@micromag/viewer/assets/css/styles.css';
+@import '@micromag/consent/assets/css/styles.css';
+html,
+body {
+    overscroll-behavior: none;
+    overscroll-behavior-x: none;
+}
+html, body, #app {
+    width: 100%;
+    height: 100%;
+}
+body {
+    background: var(--color-background, var(--color-black));
+    color: var(--color-text, var(--color-white));
+    font-family: var(--font-text);
+    font-size: 16px;
+    font-weight: 400;
+    overflow-y: scroll;
+}
+h1,h2,h3,h4,h5,h6 {
+    font-family: var(--font-title);
+    font-weight: 700;
+}
+p {
+    font-family: var(--font-text);
+}
+strong {
+    font-weight: 700;
+}
+/* Hide scrollbar for IE, Edge and Firefox */
+.hide-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+.modal-open {
+    overflow: hidden;
+    padding-right: 0;
+}
+.micromag-viewer-menus-menu-preview-title {
+    max-width: 100%;
+    font-family: Inter, Helvetica, arial, sans-serif;;
+    font-size: 20px;
+    font-weight: 400;
+    text-transform: uppercase;
+}
+.micromag-viewer-menus-menu-preview-titleContainer {
+    padding: 10px 20px;
+}
+@media screen and (width >= 600px) {
+    .micromag-viewer-menus-menu-preview-title {
+        font-size: 24px;
+    }
+    .micromag-viewer-menus-menu-preview-titleContainer {
+        padding: 10px 30px;
+    }
+}
+@media screen and (width >= 1200px) {
+    .micromag-viewer-menus-menu-preview-title {
+        font-size: 28px;
+    }
+    .micromag-viewer-menus-menu-preview-titleContainer {
+        padding: 10px 40px;
+    }
+}

package/lib/generators/micromag-project/templates/layout.module.css ADDED Viewed

@@ -0,0 +1,26 @@
+.container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    .inner {
+        transition: opacity 0.2s ease-out;
+    }
+    .cookies {
+        position: absolute;
+        z-index: 2;
+        right: 15px;
+        bottom: 60px;
+        width: 30px;
+        height: 30px;
+        background-color: transparent;
+        color: #FFF;
+    }
+    .cookieIcon {
+        display: block;
+        max-width: 100%;
+        max-height: 100%;
+    }
+}

package/lib/generators/micromag-project/templates/lib/addTrackingCodesToStory.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import { MicromagStory } from '../types/micromag';
+export default function addTrackingCodesToStory(story: MicromagStory, extraCodes: string[]) {
+    if (extraCodes.length <= 0 || story === null) {
+        return story;
+    }
+    const { settings = {} } = story;
+    const { tracking = {} } = settings || {};
+    const { codes = [] } = tracking || {};
+    return {
+        ...story,
+        settings: {
+            ...settings,
+            tracking: {
+                ...tracking,
+                codes: [
+                    ...(codes || []),
+                    ...extraCodes.map((code) => ({
+                        id: code,
+                        type: 'ga4',
+                    })),
+                ],
+            },
+        },
+    };
+};

package/lib/generators/micromag-project/templates/micromags.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { MicromagItem } from './types/micromag';
+import testStory from './micromag/data.json';
+const micromags: MicromagItem[] = [
+    {
+        id: 'test-story',
+        slug: 'test-story',
+        story: testStory,
+    },
+];
+export default micromags;

package/lib/generators/micromag-project/templates/modals/Consent.tsx ADDED Viewed

@@ -0,0 +1,63 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import MicromagConsent from '@micromag/consent';
+import classNames from 'classnames';
+import React, { useEffect, useCallback, useRef } from 'react';
+import useKeyboardKeys, { KEYS } from '../../hooks/useKeyboardKeys';
+import { useLocale } from '../../contexts/LocaleContext';
+import { useModal } from '../../contexts/ModalContext';
+import styles from '../../styles/modals/consent.module.css';
+function Consent({ className = null }: { className?: string | null }) {
+    const modalRef = useRef(null);
+    const { modal = null, setModal, unsetModal } = useModal();
+    const onClose = useCallback(() => {
+        unsetModal();
+        setModal(null);
+    }, [setModal]);
+    const visible = modal !== null;
+    useEffect(() => {
+        if (modal !== null) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [modal]);
+    useKeyboardKeys({
+        [KEYS.ESCAPE]: onClose,
+    });
+    return (
+        <div
+            className={classNames([
+                styles.container,
+                {
+                    [styles.visible]: visible,
+                    [className]: className !== null,
+                },
+            ])}
+        >
+            <div className={styles.wrapper} ref={modalRef}>
+                <div className={styles.inner}>
+                    <MicromagConsent
+                        className={styles.consent}
+                        onConfirm={onClose}
+                        onClose={onClose}
+                    />
+                </div>
+            </div>
+            <div className={styles.lightBox} />
+        </div>
+    );
+}
+export default Consent;