generator-folklore 3.0.31 → 3.0.33

package/lib/generators/build/index.js

@@ -83,18 +83,6 @@ module.exports = class AppGenerator extends _generator.default {
         this.addDevDependencies({
           '@folklore/cli': '^0.1.28'
         });
-        this.addDevDependencies({
-          '@tsconfig/create-react-app': '^2.0.7'
-        });
-      },
-      templates() {
-        // const srcPathJs = this.templatePath('.jsconfig.json');
-        // const destPathJs = this.destinationPath('jsconfig.json');
-        // this.fs.copy(srcPathJs, destPathJs);
-
-        const srcPathTs = this.templatePath('.tsconfig.json');
-        const destPathTs = this.destinationPath('tsconfig.json');
-        this.fs.copy(srcPathTs, destPathTs);
       }
     };
   }

package/lib/generators/html-project/index.js

@@ -92,6 +92,11 @@ module.exports = class HTMLProjectGenerator extends _generator.default {
       'skip-install': true,
       quiet: true
     });
+    this.composeWith('folklore:typescript', {
+      'src-path': srcPath,
+      'skip-install': true,
+      quiet: true
+    });
     this.composeWith('folklore:eslint', {
       'skip-install': true,
       quiet: true

package/lib/generators/laravel-project/index.js

@@ -194,6 +194,10 @@ module.exports = class LaravelProjectGenerator extends _generator.default {
       'skip-install': true,
       quiet: true
     });
+    this.composeWith('folklore:typescript', {
+      'src-path': jsSrcPath,
+      quiet: true
+    });
     this.composeWith('folklore:eslint', {
       'skip-install': true,
       quiet: true

package/lib/generators/micromag-project/index.js

@@ -24,6 +24,12 @@ module.exports = class MicromagProjectGenerator extends _generator.default {
       desc: 'Path for build',
       defaults: './dist'
     });
+    this.option('kiosk', {
+      type: Boolean,
+      required: false,
+      defaults: false
+    });
+    this.relativeStylesPath = (from, src) => _path.default.relative(this.destinationPath(_path.default.dirname(_path.default.join(this.options['src-path'], from))), this.destinationPath(_path.default.join(_path.default.join(this.options['src-path'], 'styles'), src)));
     this.srcPath = filePath => this.destinationPath(_path.default.join(this.options['src-path'], filePath));
   }
   get prompting() {
@@ -35,6 +41,7 @@ module.exports = class MicromagProjectGenerator extends _generator.default {
         console.log(_chalk.default.yellow('\n----------------------'));
         console.log('Micromag Project Generator');
         console.log(_chalk.default.yellow('----------------------\n'));
+        console.log('Kiosk mode: ' + (this.options.kiosk ? 'Enabled' : 'Disabled'));
       },
       prompts() {
         const prompts = [];
@@ -66,41 +73,91 @@ module.exports = class MicromagProjectGenerator extends _generator.default {
       'dest-path': destPath
     });
   }
-  get conflicts() {
+  conflicts() {
+    const {
+      kiosk = false
+    } = this.options;
+    const files = {
+      'index.html.ejs': 'index.html.ejs',
+      'components/App.tsx': 'App.tsx',
+      'components/Routes.tsx': kiosk ? 'kiosk/Routes.tsx' : 'Routes.tsx',
+      'styles/styles.css': kiosk ? 'kiosk/styles.css' : 'styles.css',
+      'components/layouts/Main.tsx': 'Layout.tsx',
+      'styles/layouts/main.module.css': 'layout.module.css',
+      'components/pages/Home.tsx': kiosk ? 'kiosk/HomePage.tsx' : null,
+      'styles/pages/home.module.css': kiosk ? 'kiosk/home-page.module.css' : null
+    };
+    Object.keys(files).forEach(destFile => {
+      if (files[destFile] === null) {
+        return;
+      }
+      this.fs.delete(this.srcPath(destFile));
+      this.fs.copyTpl(this.templatePath(files[destFile]), this.srcPath(destFile), {
+        getRelativeStylesPath: this.relativeStylesPath
+      });
+    });
+  }
+  get writing() {
     return {
-      home() {
+      data() {
         const {
-          'src-path': srcPath
+          kiosk = false
         } = this.options;
-        const templateData = {
-          getRelativeStylesPath: (from, src) => _path.default.relative(this.destinationPath(_path.default.dirname(_path.default.join(srcPath, from))), this.destinationPath(_path.default.join(_path.default.join(srcPath, 'styles'), src)))
-        };
-        this.fs.delete(this.srcPath('components/pages/Home.jsx'));
-        this.fs.delete(this.srcPath('styles/pages/home.module.css'));
-        this.fs.copyTpl(this.templatePath('Home.jsx'), this.srcPath('components/pages/Home.jsx'), templateData);
-        this.fs.copyTpl(this.templatePath('home.module.css'), this.srcPath('styles/pages/home.module.css'), templateData);
+        this.fs.copyTpl(this.templatePath('data.json'), this.srcPath(kiosk ? 'micromags/test/data.json' : 'micromag/data.json'));
+        this.fs.copyTpl(this.templatePath(kiosk ? 'kiosk/micromags.ts' : 'micromags.ts'), this.srcPath('micromags.ts'));
       },
-      routes() {
-        const {
-          'src-path': srcPath
-        } = this.options;
-        const templateData = {
-          getRelativeStylesPath: (from, src) => _path.default.relative(this.destinationPath(_path.default.dirname(_path.default.join(srcPath, from))), this.destinationPath(_path.default.join(_path.default.join(srcPath, 'styles'), src)))
-        };
-        this.fs.delete(this.srcPath('components/Routes.jsx'));
-        this.fs.copyTpl(this.templatePath('Routes.jsx'), this.srcPath('components/Routes.jsx'), templateData);
+      micromagPage() {
+        this.fs.copyTpl(this.templatePath('MicromagPage.tsx'), this.srcPath('components/pages/Micromag.tsx'), {
+          getRelativeStylesPath: this.relativeStylesPath
+        });
+      },
+      types() {
+        this.fs.copyTpl(this.templatePath('types'), this.srcPath('types'), {
+          getRelativeStylesPath: this.relativeStylesPath
+        });
       },
       styles() {
-        this.fs.delete(this.srcPath('styles/styles.css'));
-        this.fs.copyTpl(this.templatePath('styles.css'), this.srcPath('styles/styles.css'));
+        this.fs.copyTpl(this.templatePath('styles'), this.srcPath('styles'), {
+          getRelativeStylesPath: this.relativeStylesPath
+        });
+      },
+      hooks() {
+        this.fs.copyTpl(this.templatePath('hooks'), this.srcPath('hooks'), {
+          getRelativeStylesPath: this.relativeStylesPath
+        });
+      },
+      contexts() {
+        this.fs.copyTpl(this.templatePath('contexts'), this.srcPath('contexts'), {
+          getRelativeStylesPath: this.relativeStylesPath
+        });
+      },
+      lib() {
+        this.fs.copyTpl(this.templatePath('lib'), this.srcPath('lib'), {
+          getRelativeStylesPath: this.relativeStylesPath
+        });
+      },
+      partials() {
+        this.fs.copyTpl(this.templatePath('partials'), this.srcPath('components/partials'), {
+          getRelativeStylesPath: this.relativeStylesPath
+        });
       },
-      micromag() {
-        this.fs.copyTpl(this.templatePath('data.json'), this.srcPath('micromag/data.json'));
+      modals() {
+        this.fs.copyTpl(this.templatePath('modals'), this.srcPath('components/modals'), {
+          getRelativeStylesPath: this.relativeStylesPath
+        });
+      },
+      icons() {
+        this.fs.copyTpl(this.templatePath('icons'), this.srcPath('components/icons'), {
+          getRelativeStylesPath: this.relativeStylesPath
+        });
       },
       dependencies() {
         this.addDependencies({
-          '@micromag/viewer': '^0.3.492',
-          '@micromag/intl': '^0.3.488'
+          '@micromag/viewer': '^0.3.767',
+          '@micromag/data': '^0.3.767',
+          '@micromag/core': '^0.3.767',
+          '@micromag/consent': '^0.3.767',
+          '@micromag/intl': '^0.3.767'
         });
       }
     };

package/lib/generators/micromag-project/templates/App.tsx

@@ -0,0 +1,50 @@
+import { RoutesProvider } from '@folklore/routes';
+import { ConsentProvider } from '@micromag/core/contexts';
+import { Router } from 'wouter';
+import { IntlProvider } from '@micromag/intl';
+
+import { AnalyticsProvider } from '../contexts/AnalyticsContext';
+import { ModalProvider } from '../contexts/ModalContext';
+import { MicromagItem } from '../types/micromag';
+import Routes from './Routes';
+
+import defaultMicromags from '../micromags';
+
+import '<%= getRelativeStylesPath('components/App.jsx', 'styles.css') %>';
+
+
+interface IntlProps {
+    locale?: string;
+    messages?: Record<string, Record<string, string>> | Record<string, string>;
+}
+
+interface AppProps {
+    intl?: IntlProps | null;
+    routes?: Record<string, string>;
+    googleAnalyticsIds?: Array<string>;
+    micromags?: MicromagItem[] | null;
+}
+
+function App({ intl = null, routes = {}, micromags = defaultMicromags, googleAnalyticsIds }: AppProps) {
+    const { locale = 'fr', messages = null } = intl || {};
+    const finalMessages = messages !== null && messages[locale] ? messages[locale] : messages;
+
+    return (
+        <IntlProvider locale={locale} messages={finalMessages || {}}>
+            <ConsentProvider>
+                <ModalProvider>
+                    <AnalyticsProvider googleAnalyticsIds={googleAnalyticsIds || null}>
+                        <Router>
+                            <RoutesProvider routes={routes}>
+                                <Routes micromags={micromags} />
+                            </RoutesProvider>
+                        </Router>
+                    </AnalyticsProvider>
+                </ModalProvider>
+            </ConsentProvider>
+        </IntlProvider>
+    );
+}
+
+export default App;
+

package/lib/generators/micromag-project/templates/Layout.tsx

@@ -0,0 +1,38 @@
+import { useCallback, ReactNode } from 'react';
+
+import { useModal } from '../../contexts/ModalContext';
+import Button from '../buttons/Button';
+import Cookie from '../icons/Cookie';
+import Consent from '../modals/Consent';
+
+import styles from '<%= getRelativeStylesPath('components/layouts/Main.jsx', 'layouts/main.module.css') %>';
+
+interface MainLayoutProps {
+    children?: ReactNode;
+}
+
+function MainLayout({ children = null }: MainLayoutProps) {
+    const { modal = null, setModal = null } = useModal();
+    const onClickCookie = useCallback(() => {
+        if (setModal !== null) {
+            setModal('consent');
+        }
+    }, [setModal]);
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.inner}>
+                <div className={styles.content}>{children}</div>
+            </div>
+            {modal === 'consent' ? (
+                <Consent className={styles.consentModal} />
+            ) : (
+                <Button className={styles.cookies} onClick={onClickCookie}>
+                    <Cookie className={styles.cookieIcon} />
+                </Button>
+            )}
+        </div>
+    );
+}
+
+export default MainLayout;

package/lib/generators/micromag-project/templates/MicromagPage.tsx

@@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+import { useLocation } from 'wouter';
+
+import useMicromagStory from '../../hooks/useMicromagStory';
+
+import { MicromagItem } from '../../types/micromag';
+import Micromag from '../partials/Micromag';
+import PageMeta from '../partials/PageMeta';
+
+import styles from '<%= getRelativeStylesPath('components/pages/Micromag.jsx', 'pages/micromag.module.css') %>';
+
+interface MicromagPageProps {
+    micromag: MicromagItem;
+    screen?: string | null;
+    hasHome?: boolean;
+}
+
+function MicromagPage({ micromag, screen = null, hasHome = false }: MicromagPageProps) {
+    const [, setLocation] = useLocation();
+    const { slug = null } = micromag || {};
+    const { story = null } = useMicromagStory(micromag);
+    const { title = null } = story || {};
+
+    const { components: screens = [] } = story || {};
+    const baseUrl = slug !== null && hasHome ? `/${slug}` : '/';
+
+    const pathScreenId = screen || null;
+    const pathScreenIndex =
+        pathScreenId !== null && pathScreenId.match(/^[0-9]+$/) !== null
+            ? parseInt(pathScreenId, 10) - 1
+            : null;
+    const screenByPathId =
+        pathScreenId !== null
+            ? screens.find(({ id: screenId = null }) => screenId === pathScreenId) || null
+            : null;
+    const screenByPathIndex = pathScreenIndex !== null ? screens[pathScreenIndex] || null : null;
+    const currentScreen =
+        screenByPathId ||
+        screenByPathIndex ||
+        (pathScreenId === '' ? screens[0] : null) ||
+        screens[0] ||
+        null;
+
+    const onScreenChange = useCallback(
+        (newScreen = null) => {
+            const { id: newScreenId = null } = newScreen || {};
+            const newScreenIndex =
+                screens.findIndex(({ id: screenId = null }) => screenId === newScreenId) || null;
+            setLocation(
+                newScreenIndex !== null && newScreenIndex > 0
+                    ? `${baseUrl.replace(/\/$/, '')}/${newScreenIndex + 1}`
+                    : `${baseUrl.replace(/\/$/, '')}/`,
+            );
+        },
+        [screens, setLocation],
+    );
+
+    return (
+        <div className={styles.container}>
+            <PageMeta title={title} />
+            <Micromag
+                micromag={story}
+                basePath={baseUrl}
+                hasHome={hasHome}
+                currentScreenId={currentScreen !== null ? currentScreen.id : undefined}
+                className={styles.micromag}
+                onScreenChange={onScreenChange}
+            />
+        </div>
+    );
+}
+
+export default MicromagPage;

package/lib/generators/micromag-project/templates/Routes.tsx

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

package/lib/generators/micromag-project/templates/contexts/AnalyticsContext.tsx

@@ -0,0 +1,44 @@
+import { useCallback, useContext, useMemo, useState, createContext, ReactNode } from 'react';
+
+type AnalyticsContextType = {
+    googleAnalyticsIds: Array<string> | null;
+    setGoogleAnalyticsIds: ((val: string | null) => void) | null;
+};
+
+export const AnalyticsContext = createContext<AnalyticsContextType>({
+    googleAnalyticsIds: null,
+    setGoogleAnalyticsIds: null,
+});
+
+export const useAnalyticsContext = (): AnalyticsContextType => useContext(AnalyticsContext);
+
+export const useAnalytics = () => {
+    const { googleAnalyticsIds = null, setGoogleAnalyticsIds = null } = useAnalyticsContext() || {};
+    return { googleAnalyticsIds, setGoogleAnalyticsIds };
+};
+
+interface AnalyticsProviderProps {
+    children: ReactNode;
+    googleAnalyticsIds: Array<string> | null;
+}
+
+export const AnalyticsProvider = ({
+    children,
+    googleAnalyticsIds: initialIds = null,
+}: AnalyticsProviderProps) => {
+    const [googleAnalyticsIds, setGoogleAnalyticsIdsState] = useState(initialIds);
+    const setGoogleAnalyticsIds = useCallback(
+        (val) => {
+            setGoogleAnalyticsIdsState(val);
+        },
+        [setGoogleAnalyticsIdsState],
+    );
+    const value = useMemo(
+        () => ({
+            googleAnalyticsIds,
+            setGoogleAnalyticsIds,
+        }),
+        [googleAnalyticsIds, setGoogleAnalyticsIds],
+    );
+    return <AnalyticsContext.Provider value={value}>{children}</AnalyticsContext.Provider>;
+};

package/lib/generators/micromag-project/templates/contexts/ModalContext.tsx

@@ -0,0 +1,69 @@
+import { useConsent } from '@micromag/core/contexts';
+import {
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+    createContext,
+    ReactNode,
+} from 'react';
+
+type ModalContextType = {
+    modal: any;
+    setModal: ((val: any) => void) | null;
+    unsetModal: (() => void) | null;
+};
+
+export const ModalContext = createContext<ModalContextType>({
+    modal: null,
+    setModal: null,
+    unsetModal: null,
+});
+
+export const useModalContext = (): ModalContextType => useContext(ModalContext);
+
+export const useModal = () => {
+    const { modal = null, setModal = null, unsetModal = null } = useModalContext() || {};
+    return { modal, setModal, unsetModal };
+};
+
+interface ModalProviderProps {
+    children: ReactNode;
+    modal?: any;
+}
+
+export const ModalProvider = ({
+    children = null,
+    modal: initialModal = null,
+}: ModalProviderProps) => {
+    const [modal, setModalState] = useState(initialModal);
+    const { consented = null } = useConsent();
+
+    useEffect(() => {
+        if (!consented) {
+            setModalState('consent');
+        }
+    }, [consented]);
+
+    const setModal = useCallback(
+        (val) => {
+            setModalState(val);
+        },
+        [setModalState],
+    );
+
+    const unsetModal = useCallback(() => {
+        setModalState(null);
+    }, [setModalState]);
+
+    const value = useMemo(
+        () => ({
+            modal,
+            setModal,
+            unsetModal,
+        }),
+        [modal, setModalState, setModal, unsetModal],
+    );
+    return <ModalContext.Provider value={value}>{children}</ModalContext.Provider>;
+};

package/lib/generators/micromag-project/templates/hooks/useKeyboardKeys.ts

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+
+export const KEYS = {
+    ARROW_LEFT: 37,
+    ARROW_UP: 38,
+    ARROW_RIGHT: 39,
+    ARROW_DOWN: 40,
+    ESCAPE: 27,
+    SPACE: 32,
+};
+
+const useKeyboardKeys = (keys = {}, { eventName = 'keydown' } = {}) => {
+    const keysNames = Object.keys(keys);
+    const keysListeners = keysNames.map((key) => keys[key]);
+    useEffect(() => {
+        const onKeyDown = (e) => {
+            const { keyCode } = e;
+            if (typeof keys[keyCode] !== 'undefined') {
+                keys[keyCode](e);
+            }
+        };
+        document.addEventListener(eventName, onKeyDown);
+        return () => {
+            document.removeEventListener(eventName, onKeyDown);
+        };
+    }, [...keysNames, ...keysListeners, eventName]);
+};
+
+export default useKeyboardKeys;

package/lib/generators/micromag-project/templates/hooks/useMicromagPreview.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { MicromagStory } from '../types/micromag';
+
+export function useMicromagPreview(story: MicromagStory): MicromagStory {
+    return useMemo(() => {
+        const { components = null } = story || {};
+        const [firstScreen = null] = components || [];
+        return {
+            ...(story || {}),
+            components: [firstScreen],
+        };
+    }, [story]);
+}
+
+export default useMicromagPreview;

package/lib/generators/micromag-project/templates/hooks/useMicromagStory.ts

@@ -0,0 +1,48 @@
+import { getJSON } from '@folklore/fetch';
+import { useEffect, useState } from 'react';
+
+import addTrackingCodesToStory from '../lib/addTrackingCodesToStory';
+
+import { useAnalytics } from '../contexts/AnalyticsContext';
+import { MicromagItem } from '../types/micromag';
+
+const cache = new Map();
+
+export function useMicromagStory(initialMicromag: MicromagItem) {
+    const { googleAnalyticsIds = null } = useAnalytics();
+
+    const [micromag, setMicromag] = useState(initialMicromag);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (micromag === null) {
+            return;
+        }
+        const { url = null } = micromag || {};
+        const previous = cache.get(url) || null;
+
+        if (previous === null && url !== null) {
+            setLoading(true);
+            getJSON(url)
+                .then((newMicromag) => {
+                    cache.set(url, newMicromag);
+                    setMicromag({
+                        ...micromag,
+                        story: addTrackingCodesToStory(newMicromag, googleAnalyticsIds),
+                    });
+                    setLoading(false);
+                })
+                .catch(() => {
+                    // Load failure
+                    setLoading(false);
+                });
+        }
+    }, [setLoading, setMicromag, micromag, googleAnalyticsIds]);
+
+    return {
+        story: micromag?.story || null,
+        loading,
+    };
+}
+
+export default useMicromagStory;

package/lib/generators/micromag-project/templates/hooks/useMicromagVideo.ts

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+
+import { MicromagStory } from '../types/micromag';
+
+export function useMicromagVideo(story: MicromagStory): {
+    url: string | null;
+    thumbnail: string | null;
+} {
+    const video = useMemo(() => {
+        const { components = null, medias = null } = story || {};
+        const [firstScreen = null] = components || [];
+        const { video = null, background = null } = firstScreen || {};
+        const { media: videoMedia = null } = video || {};
+
+        const { video: backgroundVideo = null } = background || {};
+        const { media: backgroundVideoMedia = null } = backgroundVideo || {};
+
+        const videoId = videoMedia || backgroundVideoMedia || null;
+        if (videoId === null) {
+            return null;
+        }
+
+        if (medias !== null && typeof medias[videoId] !== 'undefined') {
+            return medias[videoId];
+        }
+
+        return null;
+    }, [story]);
+
+    const { files = null, thumbnail_url: thumbnail = null } = video || {};
+    const { h264 = null } = files || {};
+    const { url = null } = h264 || {};
+
+    return {
+        url,
+        thumbnail,
+    };
+}
+
+export default useMicromagVideo;

package/lib/generators/micromag-project/templates/hooks/useParseFonts.ts

@@ -0,0 +1,15 @@
+export function parseFonts(story = null) {
+    if (story !== null) {
+        // TODO: implement font parsing/replacing logic here if needed
+        // const jsonMicromag = JSON.stringify(story);
+        // const replaced = jsonMicromag
+        //     .replace(/Arial/g, 'omnes-semicond')
+        //     .replace(/Verdana/g, 'omnes-semicond');
+        // const finalMicromag = JSON.parse(replaced);
+        // return finalMicromag;
+        return story;
+    }
+    return story;
+}
+
+export default parseFonts;