@antscorp/antsomi-ui 1.3.4 → 1.3.5

package/es/components/molecules/FontFamilySelect/constants.d.ts

@@ -0,0 +1,307 @@
+export declare const OPTION_FONT_FAMILY: readonly [{
+    readonly label: "Arial";
+    readonly value: "Arial";
+    readonly style: {
+        readonly fontFamily: "Arial";
+    };
+}, {
+    readonly label: "Sacramento";
+    readonly value: "Sacramento";
+    readonly style: {
+        readonly fontFamily: "Sacramento";
+    };
+}, {
+    readonly label: "PT Serif";
+    readonly value: "PT Serif";
+    readonly style: {
+        readonly fontFamily: "PT Serif";
+    };
+}, {
+    readonly label: "Georgia";
+    readonly value: "Georgia";
+    readonly style: {
+        readonly fontFamily: "Georgia";
+    };
+}, {
+    readonly label: "Helvetica";
+    readonly value: "Helvetica";
+    readonly style: {
+        readonly fontFamily: "Helvetica";
+    };
+}, {
+    readonly label: "Helvetica Neue";
+    readonly value: "Helvetica Neue";
+    readonly style: {
+        readonly fontFamily: "Helvetica Neue";
+    };
+}, {
+    readonly label: "Lucida Grande";
+    readonly value: "Lucida Grande";
+    readonly style: {
+        readonly fontFamily: "Lucida Grande";
+    };
+}, {
+    readonly label: "Tahoma";
+    readonly value: "Tahoma";
+    readonly style: {
+        readonly fontFamily: "Tahoma";
+    };
+}, {
+    readonly label: "Times New Roman";
+    readonly value: "Times New Roman";
+    readonly style: {
+        readonly fontFamily: "Times New Roman";
+    };
+}, {
+    readonly label: "Verdana";
+    readonly value: "Verdana";
+    readonly style: {
+        readonly fontFamily: "Verdana";
+    };
+}, {
+    readonly label: "Abril Fatface";
+    readonly value: "Abril Fatface";
+    readonly style: {
+        readonly fontFamily: "Abril Fatface";
+    };
+}, {
+    readonly label: "Aleo";
+    readonly value: "Aleo";
+    readonly style: {
+        readonly fontFamily: "Aleo";
+    };
+}, {
+    readonly label: "Arvo";
+    readonly value: "arvo";
+    readonly style: {
+        readonly fontFamily: "Arvo";
+    };
+}, {
+    readonly label: "Bitter";
+    readonly value: "bitter";
+    readonly style: {
+        readonly fontFamily: "Bitter";
+    };
+}, {
+    readonly label: "Bree Serif";
+    readonly value: "Bree Serif";
+    readonly style: {
+        readonly fontFamily: "Bree Serif";
+    };
+}, {
+    readonly label: "Cabin";
+    readonly value: "Cabin";
+    readonly style: {
+        readonly fontFamily: "Cabin";
+    };
+}, {
+    readonly label: "Cookie";
+    readonly value: "Cookie";
+    readonly style: {
+        readonly fontFamily: "Cookie";
+    };
+}, {
+    readonly label: "Delius Swash Caps";
+    readonly value: "Delius Swash Caps";
+    readonly style: {
+        readonly fontFamily: "Delius Swash Caps";
+    };
+}, {
+    readonly label: "Dosis";
+    readonly value: "Dosis";
+    readonly style: {
+        readonly fontFamily: "Dosis";
+    };
+}, {
+    readonly label: "Droid Sans";
+    readonly value: "Droid Sans";
+    readonly style: {
+        readonly fontFamily: "Droid Sans";
+    };
+}, {
+    readonly label: "Droid Serif";
+    readonly value: "Droid Serif";
+    readonly style: {
+        readonly fontFamily: "Droid Serif";
+    };
+}, {
+    readonly label: "EB Garamond";
+    readonly value: "EB Garamond";
+    readonly style: {
+        readonly fontFamily: "EB Garamond";
+    };
+}, {
+    readonly label: "Josefin Slab";
+    readonly value: "Josefin Slab";
+    readonly style: {
+        readonly fontFamily: "Josefin Slab";
+    };
+}, {
+    readonly label: "Just Another Hand";
+    readonly value: "Just Another Hand";
+    readonly style: {
+        readonly fontFamily: "Just Another Hand";
+    };
+}, {
+    readonly label: "Lakki Reddy";
+    readonly value: "Lakki Reddy";
+    readonly style: {
+        readonly fontFamily: "Lakki Reddy";
+    };
+}, {
+    readonly label: "Lato";
+    readonly value: "Lato";
+    readonly style: {
+        readonly fontFamily: "Lato";
+    };
+}, {
+    readonly label: "Libre Baskerville";
+    readonly value: "Libre Baskerville";
+    readonly style: {
+        readonly fontFamily: "Libre Baskerville";
+    };
+}, {
+    readonly label: "Lobster";
+    readonly value: "Lobster";
+    readonly style: {
+        readonly fontFamily: "Lobster";
+    };
+}, {
+    readonly label: "Lora";
+    readonly value: "Lora";
+    readonly style: {
+        readonly fontFamily: "Lora";
+    };
+}, {
+    readonly label: "Mali";
+    readonly value: "Mali";
+    readonly style: {
+        readonly fontFamily: "Mali";
+    };
+}, {
+    readonly label: "Merriweather";
+    readonly value: "Merriweather";
+    readonly style: {
+        readonly fontFamily: "Merriweather";
+    };
+}, {
+    readonly label: "Montserrat";
+    readonly value: "Montserrat";
+    readonly style: {
+        readonly fontFamily: "Montserrat";
+    };
+}, {
+    readonly label: "Noto Sans";
+    readonly value: "Noto Sans";
+    readonly style: {
+        readonly fontFamily: "Noto Sans";
+    };
+}, {
+    readonly label: "Noto Serif";
+    readonly value: "Noto Serif";
+    readonly style: {
+        readonly fontFamily: "Noto Serif";
+    };
+}, {
+    readonly label: "Nunito";
+    readonly value: "Nunito";
+    readonly style: {
+        readonly fontFamily: "Nunito";
+    };
+}, {
+    readonly label: "Open Sans";
+    readonly value: "Open Sans";
+    readonly style: {
+        readonly fontFamily: "Open Sans";
+    };
+}, {
+    readonly label: "Oswald";
+    readonly value: "Oswald";
+    readonly style: {
+        readonly fontFamily: "Oswald";
+    };
+}, {
+    readonly label: "Poppins";
+    readonly value: "Poppins";
+    readonly style: {
+        readonly fontFamily: "Poppins";
+    };
+}, {
+    readonly label: "PT Sans";
+    readonly value: "PT Sans";
+    readonly style: {
+        readonly fontFamily: "PT Sans";
+    };
+}, {
+    readonly label: "Pinyon Script";
+    readonly value: "Pinyon Script";
+    readonly style: {
+        readonly fontFamily: "Pinyon Script";
+    };
+}, {
+    readonly label: "Playfair Display";
+    readonly value: "Playfair Display";
+    readonly style: {
+        readonly fontFamily: "Playfair Display";
+    };
+}, {
+    readonly label: "Quicksand";
+    readonly value: "Quicksand";
+    readonly style: {
+        readonly fontFamily: "Quicksand";
+    };
+}, {
+    readonly label: "Raleway";
+    readonly value: "Raleway";
+    readonly style: {
+        readonly fontFamily: "Raleway";
+    };
+}, {
+    readonly label: "Righteous";
+    readonly value: "Righteous";
+    readonly style: {
+        readonly fontFamily: "Righteous";
+    };
+}, {
+    readonly label: "Roboto Slab";
+    readonly value: "Roboto Slab";
+    readonly style: {
+        readonly fontFamily: "Roboto Slab";
+    };
+}, {
+    readonly label: "Roboto";
+    readonly value: "Roboto";
+    readonly style: {
+        readonly fontFamily: "Roboto";
+    };
+}, {
+    readonly label: "Rubik";
+    readonly value: "Rubik";
+    readonly style: {
+        readonly fontFamily: "Rubik";
+    };
+}, {
+    readonly label: "Sarabun";
+    readonly value: "Sarabun";
+    readonly style: {
+        readonly fontFamily: "Sarabun";
+    };
+}, {
+    readonly label: "Source Sans Pro";
+    readonly value: "Source Sans Pro";
+    readonly style: {
+        readonly fontFamily: "Source Sans Pro";
+    };
+}, {
+    readonly label: "Ubuntu";
+    readonly value: "Ubuntu";
+    readonly style: {
+        readonly fontFamily: "Ubuntu";
+    };
+}, {
+    readonly label: "Vollkorn";
+    readonly value: "Vollkorn";
+    readonly style: {
+        readonly fontFamily: "Vollkorn";
+    };
+}];

package/es/components/molecules/FontFamilySelect/constants.js

@@ -0,0 +1,257 @@
+export const OPTION_FONT_FAMILY = [
+    {
+        label: 'Arial',
+        value: 'Arial',
+        style: { fontFamily: 'Arial' },
+    },
+    {
+        label: 'Sacramento',
+        value: 'Sacramento',
+        style: { fontFamily: 'Sacramento' },
+    },
+    {
+        label: 'PT Serif',
+        value: 'PT Serif',
+        style: { fontFamily: 'PT Serif' },
+    },
+    {
+        label: 'Georgia',
+        value: 'Georgia',
+        style: { fontFamily: 'Georgia' },
+    },
+    {
+        label: 'Helvetica',
+        value: 'Helvetica',
+        style: { fontFamily: 'Helvetica' },
+    },
+    {
+        label: 'Helvetica Neue',
+        value: 'Helvetica Neue',
+        style: { fontFamily: 'Helvetica Neue' },
+    },
+    {
+        label: 'Lucida Grande',
+        value: 'Lucida Grande',
+        style: { fontFamily: 'Lucida Grande' },
+    },
+    {
+        label: 'Tahoma',
+        value: 'Tahoma',
+        style: { fontFamily: 'Tahoma' },
+    },
+    {
+        label: 'Times New Roman',
+        value: 'Times New Roman',
+        style: { fontFamily: 'Times New Roman' },
+    },
+    {
+        label: 'Verdana',
+        value: 'Verdana',
+        style: { fontFamily: 'Verdana' },
+    },
+    {
+        label: 'Abril Fatface',
+        value: 'Abril Fatface',
+        style: { fontFamily: 'Abril Fatface' },
+    },
+    {
+        label: 'Aleo',
+        value: 'Aleo',
+        style: { fontFamily: 'Aleo' },
+    },
+    {
+        label: 'Arvo',
+        value: 'arvo',
+        style: { fontFamily: 'Arvo' },
+    },
+    {
+        label: 'Bitter',
+        value: 'bitter',
+        style: { fontFamily: 'Bitter' },
+    },
+    {
+        label: 'Bree Serif',
+        value: 'Bree Serif',
+        style: { fontFamily: 'Bree Serif' },
+    },
+    {
+        label: 'Cabin',
+        value: 'Cabin',
+        style: { fontFamily: 'Cabin' },
+    },
+    {
+        label: 'Cookie',
+        value: 'Cookie',
+        style: { fontFamily: 'Cookie' },
+    },
+    {
+        label: 'Delius Swash Caps',
+        value: 'Delius Swash Caps',
+        style: { fontFamily: 'Delius Swash Caps' },
+    },
+    {
+        label: 'Dosis',
+        value: 'Dosis',
+        style: { fontFamily: 'Dosis' },
+    },
+    {
+        label: 'Droid Sans',
+        value: 'Droid Sans',
+        style: { fontFamily: 'Droid Sans' },
+    },
+    {
+        label: 'Droid Serif',
+        value: 'Droid Serif',
+        style: { fontFamily: 'Droid Serif' },
+    },
+    {
+        label: 'EB Garamond',
+        value: 'EB Garamond',
+        style: { fontFamily: 'EB Garamond' },
+    },
+    {
+        label: 'Josefin Slab',
+        value: 'Josefin Slab',
+        style: { fontFamily: 'Josefin Slab' },
+    },
+    {
+        label: 'Just Another Hand',
+        value: 'Just Another Hand',
+        style: { fontFamily: 'Just Another Hand' },
+    },
+    {
+        label: 'Lakki Reddy',
+        value: 'Lakki Reddy',
+        style: { fontFamily: 'Lakki Reddy' },
+    },
+    {
+        label: 'Lato',
+        value: 'Lato',
+        style: { fontFamily: 'Lato' },
+    },
+    {
+        label: 'Libre Baskerville',
+        value: 'Libre Baskerville',
+        style: { fontFamily: 'Libre Baskerville' },
+    },
+    {
+        label: 'Lobster',
+        value: 'Lobster',
+        style: { fontFamily: 'Lobster' },
+    },
+    {
+        label: 'Lora',
+        value: 'Lora',
+        style: { fontFamily: 'Lora' },
+    },
+    {
+        label: 'Mali',
+        value: 'Mali',
+        style: { fontFamily: 'Mali' },
+    },
+    {
+        label: 'Merriweather',
+        value: 'Merriweather',
+        style: { fontFamily: 'Merriweather' },
+    },
+    {
+        label: 'Montserrat',
+        value: 'Montserrat',
+        style: { fontFamily: 'Montserrat' },
+    },
+    {
+        label: 'Noto Sans',
+        value: 'Noto Sans',
+        style: { fontFamily: 'Noto Sans' },
+    },
+    {
+        label: 'Noto Serif',
+        value: 'Noto Serif',
+        style: { fontFamily: 'Noto Serif' },
+    },
+    {
+        label: 'Nunito',
+        value: 'Nunito',
+        style: { fontFamily: 'Nunito' },
+    },
+    {
+        label: 'Open Sans',
+        value: 'Open Sans',
+        style: { fontFamily: 'Open Sans' },
+    },
+    {
+        label: 'Oswald',
+        value: 'Oswald',
+        style: { fontFamily: 'Oswald' },
+    },
+    {
+        label: 'Poppins',
+        value: 'Poppins',
+        style: { fontFamily: 'Poppins' },
+    },
+    {
+        label: 'PT Sans',
+        value: 'PT Sans',
+        style: { fontFamily: 'PT Sans' },
+    },
+    {
+        label: 'Pinyon Script',
+        value: 'Pinyon Script',
+        style: { fontFamily: 'Pinyon Script' },
+    },
+    {
+        label: 'Playfair Display',
+        value: 'Playfair Display',
+        style: { fontFamily: 'Playfair Display' },
+    },
+    {
+        label: 'Quicksand',
+        value: 'Quicksand',
+        style: { fontFamily: 'Quicksand' },
+    },
+    {
+        label: 'Raleway',
+        value: 'Raleway',
+        style: { fontFamily: 'Raleway' },
+    },
+    {
+        label: 'Righteous',
+        value: 'Righteous',
+        style: { fontFamily: 'Righteous' },
+    },
+    {
+        label: 'Roboto Slab',
+        value: 'Roboto Slab',
+        style: { fontFamily: 'Roboto Slab' },
+    },
+    {
+        label: 'Roboto',
+        value: 'Roboto',
+        style: { fontFamily: 'Roboto' },
+    },
+    {
+        label: 'Rubik',
+        value: 'Rubik',
+        style: { fontFamily: 'Rubik' },
+    },
+    {
+        label: 'Sarabun',
+        value: 'Sarabun',
+        style: { fontFamily: 'Sarabun' },
+    },
+    {
+        label: 'Source Sans Pro',
+        value: 'Source Sans Pro',
+        style: { fontFamily: 'Source Sans Pro' },
+    },
+    {
+        label: 'Ubuntu',
+        value: 'Ubuntu',
+        style: { fontFamily: 'Ubuntu' },
+    },
+    {
+        label: 'Vollkorn',
+        value: 'Vollkorn',
+        style: { fontFamily: 'Vollkorn' },
+    },
+];

package/es/components/molecules/FontFamilySelect/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { OPTION_FONT_FAMILY } from './constants';
+import { SelectProps } from 'antd';
+export type FontFamilySelectProps = Omit<SelectProps, 'onChange'> & {
+    defaultValue?: string;
+    value?: string;
+    label?: string;
+    showOptions?: (typeof OPTION_FONT_FAMILY)[number]['label'][];
+    onChange?: (family: string) => void;
+};
+/**
+ * Renders a select input for font family options.
+ *
+ * @param {FontFamilySelectProps} props - The props for the component.
+ * @return {ReactNode} The rendered React node.
+ */
+export declare const FontFamilySelect: React.FC<FontFamilySelectProps>;

package/es/components/molecules/FontFamilySelect/index.js

@@ -0,0 +1,53 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { useEffect, useMemo, useState } from 'react';
+// Molecules
+import { Select } from '../Select';
+import { SettingWrapper } from '../SettingWrapper';
+// Constants
+import { OPTION_FONT_FAMILY } from './constants';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+/**
+ * Renders a select input for font family options.
+ *
+ * @param {FontFamilySelectProps} props - The props for the component.
+ * @return {ReactNode} The rendered React node.
+ */
+export const FontFamilySelect = (props) => {
+    const { defaultValue, label, value, showOptions, onChange } = props, selectProps = __rest(props, ["defaultValue", "label", "value", "showOptions", "onChange"]);
+    const [selected, setSelected] = useState(defaultValue || value);
+    useEffect(() => {
+        setSelected(value);
+    }, [value]);
+    const { t } = i18nInstance;
+    const filteredFontFamilyOptions = useMemo(() => {
+        let filteredOptions = [...OPTION_FONT_FAMILY];
+        if (showOptions === null || showOptions === void 0 ? void 0 : showOptions.length) {
+            filteredOptions = OPTION_FONT_FAMILY.filter(({ value }) => showOptions.some(font => font === value));
+        }
+        return filteredOptions;
+    }, [showOptions]);
+    const handleChange = (value) => {
+        if (typeof onChange === 'function') {
+            onChange(value);
+        }
+    };
+    return (React.createElement(SettingWrapper, { label: label !== null && label !== void 0 ? label : '', containerStyle: { width: '100%' }, vertical: true },
+        React.createElement(Select, Object.assign({ value: selected, options: [...filteredFontFamilyOptions], style: { fontFamily: value, width: '100%' }, onChange: select => {
+                setSelected(select);
+                handleChange(select);
+            }, showSearch: true }, selectProps))));
+};
+FontFamilySelect.defaultProps = {
+    showOptions: [],
+};

package/es/components/molecules/FontSetting/constants.d.ts

@@ -0,0 +1,3 @@
+import { TFontSettings, TFontStyles } from './types';
+export declare const FONT_SETTING_DEFAULT: TFontSettings;
+export declare const FONT_STYLE_DEFAULT: TFontStyles;

package/es/components/molecules/FontSetting/constants.js

@@ -0,0 +1,22 @@
+export const FONT_SETTING_DEFAULT = {
+    fontColor: '#000000',
+    fontFamily: 'Roboto',
+    fontItalic: false,
+    fontSize: 14,
+    fontWeight: '400',
+    letterSpacing: 2,
+    lineHeight: 1.5,
+    textTransform: 'none',
+    textDecoration: 'none',
+};
+export const FONT_STYLE_DEFAULT = {
+    color: '#000000',
+    fontFamily: 'Roboto',
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 1.5,
+    letterSpacing: 2,
+    textTransform: 'none',
+    textDecoration: 'none',
+    fontStyle: 'normal',
+};

package/es/components/molecules/FontSetting/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { PopoverProps } from 'antd';
+import { SettingWrapperProps } from '../SettingWrapper';
+import { TFontSettings, TFontStyles } from './types';
+type TFontSettingOptions = 'fontFamily' | 'color' | 'fontSize' | 'fontWeight' | 'textTransform' | 'textDecoration' | 'italic' | 'lineHeight' | 'letterSpacing';
+export type TFontSettingProps = {
+    label?: string;
+    settings: Partial<TFontSettings>;
+    styles: Partial<TFontStyles>;
+    showSettings?: TFontSettingOptions[];
+    wrapperProps?: Omit<SettingWrapperProps, 'label'>;
+    popoverProps?: Omit<PopoverProps, 'content'>;
+    childrenProps?: Omit<TFontSettingEditProps, 'settings' | 'styles' | 'onChange'>;
+    onChange?: (settings: Partial<TFontSettings>, styles: Partial<TFontStyles>) => void;
+};
+export type TFontSettingEditProps = {
+    settings: Partial<TFontSettings>;
+    styles: Partial<TFontStyles>;
+    showSettings?: TFontSettingOptions[];
+    onChange?: (settings: Partial<TFontSettings>, styles: Partial<TFontStyles>) => void;
+};
+export declare const FontSettingEdit: React.FC<TFontSettingEditProps>;
+export declare const FontSetting: React.FC<TFontSettingProps>;
+export {};