generator-folklore 3.0.30 → 3.0.33

package/lib/generators/micromag-project/templates/partials/Micromag.tsx

@@ -0,0 +1,156 @@
+import { useWindowSize } from '@folklore/hooks';
+import { DataProvider } from '@micromag/data';
+import '@micromag/intl/locale/fr';
+import Viewer from '@micromag/viewer';
+import classNames from 'classnames';
+import { useState, useCallback, useMemo, ReactNode } from 'react';
+
+import useStoryTrackingVariables from '../../hooks/useStoryTrackingVariables';
+
+import { MicromagStory } from '../../types/micromag';
+
+import styles from '<%= getRelativeStylesPath('components/partials/Micromag.jsx', 'partials/micromag.module.css') %>';
+
+interface MicromagProps {
+    micromag: MicromagStory;
+    viewerMenuHeader?: ReactNode;
+    currentScreenId?: string | null;
+    paused?: boolean;
+    fullscreen?: boolean;
+    autoFullscreen?: boolean;
+    withoutPlaybackControls?: boolean;
+    basePath?: string | null;
+    withoutRouter?: boolean;
+    // onStart?: () => void | null;
+    onClose?: (() => void) | null;
+    onEnd?: (() => void) | null;
+    onScreenChange?: ((...args: any[]) => void) | null;
+    onMenuChange?: ((...args: any[]) => void) | null;
+    hasHome?: boolean;
+    className?: string | number | symbol | any;
+}
+
+function Micromag({
+    micromag,
+    viewerMenuHeader = null,
+    currentScreenId = null,
+    paused = false,
+    fullscreen: initialFullscreen = false,
+    autoFullscreen = false,
+    withoutPlaybackControls = false,
+    basePath = null,
+    withoutRouter = true,
+    // onStart: customOnStart = null,
+    onClose: customOnClose = null,
+    onEnd: customOnEnd = null,
+    onScreenChange = null,
+    onMenuChange = null,
+    hasHome = false,
+    className = null,
+}: MicromagProps) {
+    const googleApiKey = null;
+    const micromagApiBaseUrl = 'https://microm.ag/api';
+    const { organisation = null } = micromag || {};
+    const { branding = null } = organisation || {};
+
+    const { width = 0, height = 0 } = useWindowSize();
+    const [landscape, setLandscape] = useState(width > height);
+    const [fullscreen, setFullscreen] = useState(autoFullscreen && !landscape && initialFullscreen);
+
+    const onClose = useCallback(() => {
+        if (autoFullscreen && fullscreen) {
+            setFullscreen(false);
+        }
+        if (customOnClose !== null) {
+            customOnClose();
+        }
+    }, [autoFullscreen, fullscreen, setFullscreen, customOnClose]);
+
+    // const onStart = useCallback(() => {
+    //     if (autoFullscreen && !landscape) {
+    //         setFullscreen(true);
+    //     }
+    //     if (customOnStart !== null) {
+    //         customOnStart();
+    //     }
+    // }, [autoFullscreen, setFullscreen, landscape, customOnStart]);
+
+    const onEnd = useCallback(() => {
+        if (autoFullscreen && fullscreen) {
+            setFullscreen(false);
+        }
+        if (customOnEnd !== null) {
+            customOnEnd();
+        }
+    }, [autoFullscreen, fullscreen, setFullscreen, customOnEnd]);
+
+    const onViewModeChange = useCallback(
+        ({ landscape: isLandscape = false }) => {
+            setLandscape(isLandscape);
+            if (autoFullscreen && !isLandscape) {
+                setFullscreen(true);
+            }
+        },
+        [autoFullscreen, setLandscape, setFullscreen],
+    );
+
+    const trackingVariables = useStoryTrackingVariables(micromag);
+
+    const finalMicromag = useMemo(
+        () => ({
+            title: 'Custom micromag title',
+            ...micromag,
+        }),
+        [micromag],
+    );
+
+    return (
+        <div
+            className={classNames([
+                styles.container,
+                {
+                    [styles.fullscreen]: fullscreen,
+                    [className]: className !== null,
+                },
+            ])}
+        >
+            <DataProvider apiBaseUrl={micromagApiBaseUrl}>
+                <Viewer
+                    story={finalMicromag}
+                    trackingVariables={trackingVariables}
+                    paused={paused}
+                    theme={branding}
+                    locale="fr"
+                    visitor={null}
+                    memoryRouter={basePath === null}
+                    withoutRouter={withoutRouter}
+                    basePath={basePath}
+                    screen={currentScreenId}
+                    closeable={(autoFullscreen && fullscreen) || customOnClose !== null}
+                    googleApiKey={googleApiKey}
+                    onViewModeChange={onViewModeChange}
+                    onScreenChange={onScreenChange}
+                    onMenuChange={onMenuChange}
+                    onClose={onClose}
+                    onEnd={onEnd}
+                    withoutPlaybackControls={withoutPlaybackControls}
+                    withNavigationHint
+                    withMicromagBranding
+                    pathWithIndex
+                    menuHeader={viewerMenuHeader}
+                    beforeScreensMenuButton={
+                        hasHome
+                            ? // <Link className={styles.link} to="/">
+                              //     <FormattedMessage defaultMessage="Accueil" description="Homelink" />
+                              // </Link>
+                              null
+                            : null
+                    }
+                />
+            </DataProvider>
+        </div>
+    );
+}
+
+export default Micromag;
+

package/lib/generators/micromag-project/templates/partials/Preview.tsx

@@ -0,0 +1,28 @@
+import Viewer from '@micromag/viewer';
+import classNames from 'classnames';
+
+import { useMicromagPreview } from '../../hooks/useMicromagPreview';
+
+import styles from '<%= getRelativeStylesPath('components/partials/Preview.jsx', 'partials/preview.module.css') %>';
+
+interface MicromagPreviewProps {
+    story?: Record<string, any> | null;
+    className?: string | number | symbol | any;
+}
+
+const Preview = ({ story = null, className = null }: MicromagPreviewProps) => {
+    const simpleStory = useMicromagPreview(story);
+    return (
+        <Viewer
+            story={simpleStory}
+            className={classNames([styles.container, { [className]: className !== null }])}
+            withoutMenu
+            withoutGestures
+            withoutNavigationArrow
+            withNavigationHint={false}
+            withoutPlaybackControls
+        />
+    );
+};
+
+export default Preview;

package/lib/generators/micromag-project/templates/partials/Thumbnail.tsx

@@ -0,0 +1,24 @@
+import useMicromagStory from '../../hooks/useMicromagStory';
+import { useMicromagVideo } from '../../hooks/useMicromagVideo';
+
+import { MicromagItem } from '../../types/micromag';
+import Preview from './Preview';
+import Video from './Video';
+
+interface ThumbnailProps {
+    micromag?: MicromagItem | null;
+    isPoster?: boolean;
+    className?: string | null;
+}
+
+const Thumbnail = ({ micromag = null, isPoster = false, className = null }: ThumbnailProps) => {
+    const { story = null, loading = false } = useMicromagStory(micromag);
+    const { url, thumbnail } = useMicromagVideo(story);
+    return url !== null || thumbnail !== null ? (
+        <Video url={url} thumbnail={thumbnail} isPoster={isPoster} className={className} />
+    ) : (
+        <Preview story={story} className={className} />
+    );
+};
+
+export default Thumbnail;

package/lib/generators/micromag-project/templates/partials/Video.tsx

@@ -0,0 +1,36 @@
+import classNames from 'classnames';
+
+import styles from '<%= getRelativeStylesPath('components/partials/Video.jsx', 'partials/video.module.css') %>';
+
+interface VideoProps {
+    url?: string | null;
+    thumbnail?: string | null;
+    isPoster?: boolean;
+    className?: string | null;
+}
+
+const Video = ({
+    url = null,
+    thumbnail = null,
+    isPoster = false,
+    className = null,
+}: VideoProps) => {
+    return url !== null || thumbnail !== null ? (
+        <video
+            className={classNames([
+                styles.container,
+                styles.video,
+                { [className]: className !== null },
+            ])}
+            src={!isPoster && url !== null ? `${url}#t=0.01` : null}
+            poster={thumbnail}
+            autoPlay
+            loop
+            muted
+            playsInline
+            preload="auto"
+        />
+    ) : null;
+};
+
+export default Video;

package/lib/generators/micromag-project/templates/styles/modals/consent.module.css

@@ -0,0 +1,150 @@
+.container {
+    position: absolute;
+    z-index: 99999;
+    width: 100%;
+    height: 100%;
+    font-family: Inter, Helvetica, Arial, sans-serif;
+    inset: 0;
+
+    --color-primary: #f19e85;
+
+    .closeBtn, .arrowBtn {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        display: none;
+        width: 3rem;
+        height: 3rem;
+        align-items: center;
+        justify-content: center;
+        border-radius: 2rem;
+        background-color: rgb(0 0 0 / 0.2);
+        color: #FFF;
+        visibility: hidden;
+    }
+
+    .arrowBtn {
+        top: 50%;
+        padding: 0.5em;
+    }
+
+    .arrowLeftBtn {
+        right: auto;
+        left: 1rem;
+
+        .arrowIcon {
+            transform: rotate(180deg);
+            transform-origin: center;
+        }
+    }
+
+    .arrowRightBtn {
+        right: 1rem;
+        left: auto;
+    }
+
+    .lightBox {
+        position: fixed;
+        z-index: 1;
+        display: block;
+        width: 100%;
+        height: 100%;
+        backdrop-filter: blur(4px);
+        background-color: rgb(0 0 0 / 0.33);
+        inset: 0;
+        opacity: 0;
+        pointer-events: auto;
+        pointer-events: none;
+        transition: opacity 300ms 100ms ease-in;
+    }
+
+    .inner {
+        min-height: 100%;
+        padding: 0 10px;
+        opacity: 0;
+        transition: opacity 500ms ease-out, transform 500ms ease-out;
+    }
+
+    &.visible {
+        pointer-events: all;
+
+        .closeBtn, .arrowBtn {
+            z-index: 99999;
+            display: flex;
+            pointer-events: all;
+            visibility: visible;
+        }
+
+        .lightBox {
+            opacity: 1;
+            pointer-events: all;
+            transition: opacity 500ms ease-out;
+        }
+
+        .inner {
+            opacity: 1;
+        }
+    }
+
+    .wrapper {
+        position: relative;
+        z-index: 2;
+        display: flex;
+        overflow: auto;
+        width: 100%;
+        height: 100%;
+        flex-direction: column;
+        padding: 0;
+        -webkit-overflow-scrolling: touch;
+        overscroll-behavior: contain;
+    }
+
+    .image, .embedContainer {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        padding: 10px;
+    }
+
+    .imageInner, .embed {
+        display: block;
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+        max-height: 100%;
+    }
+
+    .embed {
+        height: 100%;
+    }
+
+    .consent {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        width: calc(100% - 20px);
+        max-width: 550px;
+        transform: translateX(-50%);
+
+        & > div {
+            border: 2px solid #f19e85;
+            border-radius: 10px 10px 0 0;
+            border-bottom: 0;
+            background-color: #123438;
+        }
+
+        h3 {
+            font-size: 1.2rem;
+        }
+
+        button {
+            line-height: 1;
+        }
+
+        p {
+            line-height: 1.3;
+        }
+    }
+}

package/lib/generators/micromag-project/templates/styles/pages/micromag.module.css

@@ -0,0 +1,6 @@
+.container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    inset: 0;
+}

package/lib/generators/micromag-project/templates/styles/partials/micromag.module.css

@@ -0,0 +1,17 @@
+.container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .link {
+        margin-right: 10px;
+        color: var(--color-text);
+        font-size: 12px;
+        opacity: 0.8;
+        text-decoration: none;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+}

package/lib/generators/micromag-project/templates/styles/partials/preview.module.css

@@ -0,0 +1,3 @@
+.container {
+    /* yo */
+}

package/lib/generators/micromag-project/templates/styles/partials/thumbnail.module.css

@@ -0,0 +1,3 @@
+.container {
+    /* yo */
+}

package/lib/generators/micromag-project/templates/styles/partials/video.module.css

@@ -0,0 +1,3 @@
+.container {
+    /* yo */
+}

package/lib/generators/micromag-project/templates/styles.css

@@ -1,3 +1,86 @@
-@import url('@micromag/core');
-@import url('@micromag/viewer');
+/* 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/types/micromag.d.ts

@@ -0,0 +1,58 @@
+export interface MicromagTrackingCode {
+    id: string;
+    type: string;
+    [key: string]: unknown;
+}
+
+export interface MicromagVideo {
+    media?: string;
+    [key: string]: unknown;
+}
+
+export interface MicromagComponent {
+    id: string;
+    type: string;
+    video?: MicromagVideo;
+    background?: {
+        video?: MicromagVideo;
+        [key: string]: unknown;
+    };
+    [key: string]: unknown;
+}
+
+export interface MicromagOrganisation {
+    slug?: string;
+    tracking?: {
+        codes?: MicromagTrackingCode[];
+        [key: string]: unknown;
+    };
+    branding?: {
+        [key: string]: unknown;
+    };
+    [key: string]: unknown;
+}
+
+export interface MicromagStory {
+    title?: string;
+    metadata?: {
+        [key: string]: unknown;
+    };
+    organisation?: MicromagOrganisation;
+    settings?: {
+        tracking?: {
+            codes?: MicromagTrackingCode[];
+            [key: string]: unknown;
+        };
+        [key: string]: unknown;
+    };
+    components: MicromagComponent[];
+    medias?: Record<string, Media>;
+    [key: string]: unknown;
+}
+
+export interface MicromagItem {
+    id: string;
+    slug: string;
+    story?: MicromagStory;
+    url?: string | null;
+}

package/lib/generators/react-app/templates/types/base.d.ts

@@ -35,6 +35,7 @@ interface Media {
     id: string;
     type: string;
     url: string;
+    thumbnail_url?: string | null;
     name?: string | null;
     description?: string | null;
     files?: Record<string, Source>;

package/lib/generators/typescript/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _chalk = _interopRequireDefault(require("chalk"));
+var _generator = _interopRequireDefault(require("../../lib/generator"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+module.exports = class TypescriptGenerator extends _generator.default {
+  constructor(...args) {
+    super(...args);
+    this.option('src-path', {
+      type: String,
+      desc: 'Path for source',
+      defaults: './src'
+    });
+    this.option('skip-install', {
+      type: Boolean,
+      required: false,
+      defaults: false
+    });
+  }
+  prompting() {
+    if (this.options.quiet) {
+      return;
+    }
+    console.log(_chalk.default.yellow('\n----------------------'));
+    console.log('Typescript Generator');
+    console.log(_chalk.default.yellow('----------------------\n'));
+  }
+  get writing() {
+    return {
+      tsconfig() {
+        const srcPath = this.templatePath('_tsconfig.json');
+        const destPath = this.destinationPath('tsconfig.json');
+        this.fs.copyTpl(srcPath, destPath, {
+          srcPath: this.options['src-path']
+        });
+      },
+      dependencies() {
+        this.addDevDependencies({
+          '@tsconfig/create-react-app': '^2.0.9'
+        });
+      }
+    };
+  }
+  async install() {
+    if (this.options['skip-install']) {
+      return;
+    }
+    await this.spawnCommand('npm', ['install']);
+  }
+};

package/lib/generators/typescript/templates/_tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "@tsconfig/create-react-app/tsconfig.json",
+    "compilerOptions": {
+        "strict": false
+    },
+    "include": ["<%= srcPath.replace(/\/$/, '') %>/**/*", "<%= srcPath.replace(/\/$/, '') %>/types/*.ts"],
+    "exclude": ["node_modules", "./public", "./storage", "./vendor", "./dist", "./es", "./lib"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "generator-folklore",
-    "version": "3.0.30",
+    "version": "3.0.33",
     "description": "Yeoman generator for projects at Folklore",
     "keywords": [
         "yeoman-generator"
@@ -9,7 +9,7 @@
     "scripts": {
         "clean:lib": "rm -rf lib/*",
         "clean": "npm run clean:lib",
-        "copy:dirs": "find src/ -type d | grep -E '(/templates|/instructions)$' | sed 's/src\\///g' | xargs -I{} cp -r \"./src/{}\" \"./lib/{}\"",
+        "copy:dirs": "find src/ -type d | grep -E '(/templates|/instructions)$' | sed 's/src\\///g' | xargs -I{} cp -r \"./src/{}/\" \"./lib/{}/\"",
         "compile": "../../node_modules/.bin/babel -d lib/ src/",
         "build": "npm run compile && npm run copy:dirs",
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -40,5 +40,5 @@
         "yeoman-generator": "5.9.0",
         "yeoman-remote": "^1.0.1"
     },
-    "gitHead": "729e543ff89bac05964cdafb710eeb79d8e09362"
+    "gitHead": "5f3d4e617c80404bf8653fb486edceaa719f22cc"
 }

package/lib/generators/build/templates/.jsconfig.json

@@ -1,9 +0,0 @@
-{
-    "compilerOptions": {
-        "jsx": "react-jsx",
-        "module": "esnext",
-        "moduleResolution": "Bundler",
-        "target": "ES5"
-    },
-    "include": ["src/**/*"]
-}