@imposium-hub/components 1.55.0 → 1.57.0

package/src/components/font-picker/FontPicker.tsx

@@ -0,0 +1,222 @@
+import * as React from 'react';
+import FontManager from './font-manager/FontManager';
+import {
+    Category,
+    Font,
+    Options,
+    Script,
+    Variant,
+    FontList,
+    OPTIONS_DEFAULTS
+} from './font-manager/types';
+import { FONT_FAMILY_DEFAULT } from './font-manager/constants';
+import { createFontStyleSheets } from './font-manager/fontStyle';
+
+interface IFontPickerProps {
+    apiKey: string;
+    activeFontFamily: string;
+    onChange: (font: string) => void;
+    families: string[];
+    categories: Category[];
+    scripts: Script[];
+    variants: Variant[];
+    filter: (font: Font) => boolean;
+    limit: number;
+    defaultFonts: any;
+    customFonts?: any;
+}
+
+interface IFontPickerState {
+    expanded: boolean;
+    fonts: any;
+}
+
+export default class FontPicker extends React.PureComponent<IFontPickerProps, IFontPickerState> {
+    fontManager: FontManager;
+
+    static defaultProps = {
+        activeFontFamily: FONT_FAMILY_DEFAULT,
+        families: OPTIONS_DEFAULTS.families,
+        categories: OPTIONS_DEFAULTS.categories,
+        scripts: OPTIONS_DEFAULTS.scripts,
+        variants: OPTIONS_DEFAULTS.variants,
+        filter: OPTIONS_DEFAULTS.filter,
+        limit: OPTIONS_DEFAULTS.limit
+    };
+
+    private clickOutsideHandler: any;
+
+    constructor(props: any) {
+        super(props);
+
+        const {
+            apiKey,
+            activeFontFamily,
+            families,
+            categories,
+            scripts,
+            variants,
+            filter,
+            limit,
+            onChange
+        } = this.props;
+
+        this.state = {
+            expanded: false,
+            fonts: null
+        };
+
+        const options: Options = {
+            families,
+            categories,
+            scripts,
+            variants,
+            filter,
+            limit
+        };
+
+        this.fontManager = new FontManager(apiKey, activeFontFamily, options, onChange);
+    }
+
+    public compoenntDidMount(): void {
+        this.clickOutsideHandler = (e) => this.onClose(e);
+    }
+
+    public componentWillUnmount(): void {
+        this.clickOutsideHandler = (e) => {
+            return;
+        };
+    }
+
+    public componentDidUpdate = (prevProps: any) => {
+        const { activeFontFamily, onChange, customFonts, defaultFonts } = this.props;
+        if (prevProps.customFonts !== customFonts) {
+            this.fontManager
+                .init()
+                .then((fontMap: FontList): void => {
+                    const googleFonts = Array.from(fontMap.values()).filter((f) => f.files);
+                    const updateDefaultFonts = defaultFonts.map(
+                        (f: any) => googleFonts.find((o: any) => o.family === f.family) || f
+                    );
+                    const uniqueFontFamilies = new Set();
+                    const uniqueFonts = updateDefaultFonts.filter((e: any) => {
+                        const isDup = uniqueFontFamilies.has(e.family);
+                        uniqueFontFamilies.add(e.family);
+                        if (!isDup) {
+                            return true;
+                        }
+                        return false;
+                    });
+                    this.setState({ fonts: uniqueFonts }, () =>
+                        createFontStyleSheets(defaultFonts, uniqueFonts, customFonts)
+                    );
+                })
+                .catch((err: Error): void => {
+                    console.error('Error trying to fetch the list of available fonts');
+                    console.error(err);
+                });
+        }
+
+        if (activeFontFamily !== prevProps.activeFontFamily) {
+            this.setActiveFontFamily(activeFontFamily);
+        }
+
+        if (onChange !== prevProps.onChange) {
+            this.fontManager.setOnChange(onChange);
+        }
+    };
+
+    private onClose = (e) => {
+        let targetEl = e.target;
+        const fontPickerEl = document.getElementById(`font-picker`);
+
+        while (true) {
+            if (targetEl === fontPickerEl) {
+                return;
+            }
+            if (targetEl.parentNode) {
+                targetEl = targetEl.parentNode;
+            } else {
+                this.toggleExpanded();
+                return;
+            }
+        }
+    };
+
+    private onSelection = (e): void => {
+        const activeFontFamily = e.target.textContent;
+        if (!activeFontFamily) {
+            throw Error(`Missing font family in clicked font button`);
+        }
+        this.setActiveFontFamily(activeFontFamily);
+        this.toggleExpanded();
+    };
+
+    private setActiveFontFamily = (activeFontFamily: string): void => {
+        this.fontManager.setActiveFont(activeFontFamily);
+    };
+
+    private generateFontList = () => {
+        const { activeFontFamily, families } = this.props;
+
+        return (
+            <ul className='font-list'>
+                {families.map((font) => {
+                    const isActive = font === activeFontFamily;
+                    return (
+                        <li
+                            key={font}
+                            className='font-list-item'>
+                            <button
+                                type='button'
+                                id={`font-button-${font}`}
+                                className={`font-button ${isActive ? 'active-font' : ''}`}
+                                onClick={this.onSelection}
+                                onKeyDown={this.onSelection}
+                                style={{ fontFamily: font }}>
+                                {font}
+                            </button>
+                        </li>
+                    );
+                })}
+            </ul>
+        );
+    };
+
+    private toggleExpanded = (): void => {
+        const { expanded } = this.state;
+
+        if (expanded) {
+            this.setState({
+                expanded: false
+            });
+            document.removeEventListener('click', this.clickOutsideHandler);
+        } else {
+            this.setState({
+                expanded: true
+            });
+            document.addEventListener('click', this.clickOutsideHandler);
+        }
+    };
+
+    public render = () => {
+        const { activeFontFamily } = this.props;
+        const { expanded } = this.state;
+
+        return (
+            <div
+                id={`font-picker`}
+                className={expanded ? 'expanded' : ''}>
+                <button
+                    type='button'
+                    className='dropdown-button'
+                    onClick={this.toggleExpanded}
+                    onKeyDown={this.toggleExpanded}>
+                    <p className='dropdown-font-family'>{activeFontFamily}</p>
+                    <p className='dropdown-icon finished' />
+                </button>
+                {this.generateFontList()}
+            </div>
+        );
+    };
+}

package/src/components/font-picker/font-manager/FontManager.ts

@@ -0,0 +1,138 @@
+import { Font, FontList, Options, OPTIONS_DEFAULTS, Script } from './types';
+import { FONT_FAMILY_DEFAULT, LIST_BASE_URL } from './constants';
+import { getFontId, get } from './utils';
+
+interface FontResponse extends Font {
+    subsets: Script[];
+}
+
+export default class FontManager {
+    private readonly apiKey: string;
+
+    private readonly options: Options;
+
+    private onChange: (font: string) => void;
+
+    private fonts: FontList = new Map<string, Font>();
+
+    constructor(
+        apiKey: string,
+        defaultFamily: string = FONT_FAMILY_DEFAULT,
+        {
+            families = OPTIONS_DEFAULTS.families,
+            categories = OPTIONS_DEFAULTS.categories,
+            scripts = OPTIONS_DEFAULTS.scripts,
+            variants = OPTIONS_DEFAULTS.variants,
+            filter = OPTIONS_DEFAULTS.filter,
+            limit = OPTIONS_DEFAULTS.limit
+        }: Options,
+
+        onChange: (font: string) => void
+    ) {
+        // Save parameters as class variables
+        this.apiKey = apiKey;
+        this.options = {
+            families,
+            categories,
+            scripts,
+            variants,
+            filter,
+            limit
+        };
+        this.onChange = onChange;
+
+        // Download default font and add it to the empty font list
+        this.addFont(defaultFamily);
+        this.setActiveFont(defaultFamily);
+    }
+
+    /**
+     * Fetch list of all fonts from Google Fonts API, filter it according to the class parameters and
+     * save them to the font map
+     */
+    public async init(): Promise<FontList> {
+        // Get list of all fonts
+        const fonts = await this.getFontList(this.apiKey);
+        // Save desired fonts in the font map
+        for (const font of fonts) {
+            // const font = fonts[i];
+            // Exit once specified limit of number of fonts is reached
+            if (this.fonts.size >= this.options.limit) {
+                break;
+            }
+
+            if (
+                // Skip default font if it is also contained in the list
+                !this.fonts.has(font.family) &&
+                // `families` parameter: Only keep fonts whose names are included in the provided array
+                (this.options.families.length === 0 ||
+                    this.options.families.includes(font.family)) &&
+                // `categories` parameter: only keep fonts in categories from the provided array
+                (this.options.categories.length === 0 ||
+                    this.options.categories.includes(font.category)) &&
+                // `scripts` parameter: Only keep fonts which are available in all specified scripts
+                this.options.scripts.every((script): boolean => font.scripts.includes(script)) &&
+                // `variants` parameter: Only keep fonts which contain all specified variants
+                this.options.variants.every((variant): boolean =>
+                    font.variants.includes(variant)
+                ) &&
+                // `filter` parameter: Only keep fonts for which the `filter` function evaluates to `true`
+                this.options.filter(font) === true
+            ) {
+                // Font fulfils all requirements: Add it to font map
+                this.fonts.set(font.family, font);
+            }
+        }
+
+        return this.fonts;
+    }
+
+    private async getFontList(apiKey: string): Promise<Font[]> {
+        const url = new URL(LIST_BASE_URL);
+        url.searchParams.append('sort', 'popularity');
+        url.searchParams.append('key', apiKey);
+        const response = await get(url.href);
+        const fontsOriginal = JSON.parse(response).items;
+        return fontsOriginal.map((fontOriginal: FontResponse): Font => {
+            const { family, subsets, ...others } = fontOriginal;
+            return {
+                ...others,
+                family,
+                id: getFontId(family),
+                scripts: subsets
+            };
+        });
+    }
+
+    /**
+     * Add a new font to the font map and download its preview characters
+     */
+    private addFont(fontFamily: string): void {
+        const font: Font = {
+            family: fontFamily,
+            id: getFontId(fontFamily),
+            variants: [],
+            category: 'display',
+            scripts: []
+        };
+        this.fonts.set(fontFamily, font);
+    }
+
+    /**
+     * Set the specified font as the active font and download it
+     */
+    public setActiveFont(fontFamily: string): void {
+        const runOnChange = fontFamily !== 'Font not found';
+
+        if (runOnChange) {
+            this.onChange(fontFamily);
+        }
+    }
+
+    /**
+     * Update the onChange function (executed when changing the active font)
+     */
+    public setOnChange(onChange: (font: string) => void): void {
+        this.onChange = onChange;
+    }
+}

package/src/components/font-picker/font-manager/constants.ts

@@ -0,0 +1,7 @@
+export const FONT_BASE_URL = 'https://fonts.googleapis.com/css2';
+
+export const LIST_BASE_URL = 'https://www.googleapis.com/webfonts/v1/webfonts';
+
+export const FONT_FACE_REGEX = /@font-face {([\s\S]*?)}/gm;
+
+export const FONT_FAMILY_DEFAULT = 'Open Sans';

package/src/components/font-picker/font-manager/fontStyle.ts

@@ -0,0 +1,78 @@
+import { FONT_BASE_URL, FONT_FACE_REGEX } from './constants';
+import { get, getMatches } from './utils';
+
+export const createFontStyleSheets = (
+    defaultFonts: any,
+    uniqueFonts: any,
+    availableFonts?: any
+): void => {
+    defaultFonts.map((font: any) => {
+        const fonts = uniqueFonts.find((f: any) => f.family === font.family);
+        const fontId = font.name.toLowerCase().split(' ').join('-');
+
+        // non Google Font style
+        if (fonts?.file) {
+            fillFontStyleSheets(fontId, font);
+        }
+
+        // google font style
+        if (fonts?.files) {
+            const fontURL = new URL(FONT_BASE_URL);
+            fontURL.searchParams.append('family', `${font.family}:wght@${font.weight}`);
+            fontURL.searchParams.append('text', font.name);
+            fontURL.searchParams.append('font-display', 'swap');
+            get(fontURL.href)
+                .then((res) => {
+                    const rule = getMatches(FONT_FACE_REGEX, res);
+                    const updateFont = rule[rule.length - 1].replace(font.family, font.name);
+                    fillFontStyleSheets(fontId, updateFont, font.name);
+                })
+                .catch((e) => console.error(e));
+        }
+    });
+
+    // custom font style
+    if (availableFonts) {
+        availableFonts.map((font: any) => {
+            const fontId = font.name.toLowerCase();
+            fillFontStyleSheets(fontId, font);
+        });
+    }
+};
+
+const fillFontStyleSheets = (fontId: string, font: any, fontName?: any) => {
+    let stylesheetNode = document.getElementById(`font-${fontId}`);
+    const { weight, file, url, name, family } = font;
+
+    const fontFamily = name !== family ? name : family;
+    const fontWeight = weight ? `font-weight: ${weight};` : '';
+    const fontUrl = file ? `fonts/${file}` : `${url}`;
+
+    if (stylesheetNode === null) {
+        stylesheetNode = stylesheetNode;
+        stylesheetNode = document.createElement('style');
+        if (stylesheetNode !== null) {
+            stylesheetNode.id = `font-${fontId}`;
+            stylesheetNode.setAttribute('data-is-preview', 'true');
+
+            // non-google and custom fonts style
+            if (fontFamily && fontFamily && fontUrl) {
+                stylesheetNode.textContent = `
+                @font-face {
+                    font-family: ${fontFamily};
+                    ${fontWeight}
+                    src: url(${fontUrl});
+                }`;
+            }
+
+            if (fontName) {
+                stylesheetNode.textContent = `
+                @font-face {
+                    ${font.replace(`'${fontName}'`, fontName)}
+                }`;
+            }
+
+            document.head.appendChild(stylesheetNode);
+        }
+    }
+};

package/src/components/font-picker/font-manager/types.ts

@@ -0,0 +1,83 @@
+export type Category = 'sans-serif' | 'serif' | 'display' | 'handwriting' | 'monospace';
+
+export type Script =
+    | 'arabic'
+    | 'bengali'
+    | 'chinese-simplified'
+    | 'chinese-traditional'
+    | 'cyrillic'
+    | 'cyrillic-ext'
+    | 'devanagari'
+    | 'greek'
+    | 'greek-ext'
+    | 'gujarati'
+    | 'gurmukhi'
+    | 'hebrew'
+    | 'japanese'
+    | 'kannada'
+    | 'khmer'
+    | 'korean'
+    | 'latin'
+    | 'latin-ext'
+    | 'malayalam'
+    | 'myanmar'
+    | 'oriya'
+    | 'sinhala'
+    | 'tamil'
+    | '​telugu'
+    | 'thai'
+    | 'vietnamese';
+
+export type SortOption = 'alphabet' | 'popularity';
+
+export type Variant =
+    | '100'
+    | '100italic'
+    | '200'
+    | '200italic'
+    | '300'
+    | '300italic'
+    | 'regular'
+    | 'italic'
+    | '500'
+    | '500italic'
+    | '600'
+    | '600italic'
+    | '700'
+    | '700italic'
+    | '800'
+    | '800italic'
+    | '900'
+    | '900italic';
+
+export interface Font {
+    family: string;
+    id: string;
+    category: Category;
+    scripts: Script[];
+    variants: Variant[];
+    kind?: string;
+    version?: string;
+    lastModified?: string;
+    files?: Record<Variant, string>;
+}
+
+export type FontList = Map<string, Font>;
+
+export interface Options {
+    families: string[];
+    categories: Category[];
+    scripts: Script[];
+    variants: Variant[];
+    filter: (font: Font) => boolean;
+    limit: number;
+}
+
+export const OPTIONS_DEFAULTS: Options = {
+    families: [],
+    categories: [],
+    scripts: ['latin'],
+    variants: ['regular'],
+    filter: () => true,
+    limit: 50
+};

package/src/components/font-picker/font-manager/utils.ts

@@ -0,0 +1,36 @@
+export const getFontId = (fontFamily: string): string => {
+    return fontFamily.replace(/\s+/g, '-').toLowerCase();
+};
+
+export const get = (url: string): Promise<string> => {
+    return new Promise((resolve, reject): void => {
+        const request = new XMLHttpRequest();
+        request.overrideMimeType('application/json');
+        request.open('GET', url, true);
+        request.onreadystatechange = (): void => {
+            // Request has completed
+            if (request.readyState === 4) {
+                if (request.status !== 200) {
+                    // On error
+                    reject(new Error(`Response has status code ${request.status}`));
+                } else {
+                    // On success
+                    resolve(request.responseText);
+                }
+            }
+        };
+        request.send();
+    });
+};
+
+export const getMatches = (regex: RegExp, str: string): string[] => {
+    const matches: string[] = [];
+    let match;
+    do {
+        match = regex.exec(str);
+        if (match) {
+            matches.push(match[1]);
+        }
+    } while (match);
+    return matches;
+};