@griddo/ax 11.10.11-rc.0 → 11.10.11

package/src/components/Fields/VisualOption/index.tsx

@@ -3,36 +3,36 @@ import React from "react";
 import * as S from "./style";
 
 const VisualOption = ({ value, onChange, name, label, checked, img, disabled }: IVisualOptionProps): JSX.Element => {
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(e.target.value);
-  };
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		onChange(e.target.value);
+	};
 
-  return (
-    <S.Label>
-      <S.RadioButton
-        data-testid="radioButtons"
-        type="radio"
-        name={name}
-        value={value}
-        checked={checked}
-        onChange={handleChange}
-        disabled={disabled}
-      />
-      <S.ImageWrapper active={checked} disabled={disabled}>
-        <S.Image src={img} />
-      </S.ImageWrapper>
-    </S.Label>
-  );
+	return (
+		<S.Label>
+			<S.RadioButton
+				data-testid="radioButtons"
+				type="radio"
+				name={name}
+				value={value}
+				checked={checked}
+				onChange={handleChange}
+				disabled={disabled}
+			/>
+			<S.ImageWrapper active={checked} disabled={disabled}>
+				<S.Image src={img} />
+			</S.ImageWrapper>
+		</S.Label>
+	);
 };
 
 interface IVisualOptionProps {
-  value: string;
-  onChange: any;
-  name: string;
-  label: string;
-  checked: boolean;
-  img: string;
-  disabled?: boolean;
+	value: string;
+	onChange: any;
+	name: string;
+	label: string;
+	checked: boolean;
+	img: string;
+	disabled?: boolean;
 }
 
 export default VisualOption;

package/src/components/Fields/VisualOption/style.tsx

@@ -1,18 +1,18 @@
 import styled from "styled-components";
 
-export const RadioButton = styled.input<{disabled: boolean | undefined}>`
+export const RadioButton = styled.input<{ disabled: boolean | undefined }>`
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
-  pointer-events: ${(p) => p.disabled ? "none" : "auto"};
+  pointer-events: ${(p) => (p.disabled ? "none" : "auto")};
 `;
 
 export const Label = styled.label``;
 
 export const ImageWrapper = styled.div<{ active: boolean | undefined; disabled: boolean | undefined }>`
   position: relative;
-  pointer-events: ${(p) => p.disabled ? "none" : "auto"};
+  pointer-events: ${(p) => (p.disabled ? "none" : "auto")};
 
   &:before {
     content: '';
@@ -21,7 +21,7 @@ export const ImageWrapper = styled.div<{ active: boolean | undefined; disabled:
     bottom: 0;
     left: 0;
     right: 0;
-    box-shadow: ${(p) => p.active ? `inset 0 0 0 2px ${ p.disabled ?  p.theme.color.interactiveDisabled : p.theme.color.interactive01}` : "none" };
+    box-shadow: ${(p) => (p.active ? `inset 0 0 0 2px ${p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01}` : "none")};
     border-radius: 4px;
   }
 

package/src/components/Fields/VisualUniqueSelection/ImageSelection/index.tsx

@@ -6,40 +6,40 @@ import { getOptions } from "../utils";
 import * as S from "./style";
 
 const ImageSelection = (props: IImageSelectionProps): JSX.Element => {
-  const { value, onChange, options, objKey, columns, disabled, theme } = props;
-
-  const mappedOptions: any = getOptions(theme, options);
-
-  const handleChange = (newValue: string) => onChange(newValue);
-
-  return (
-    <S.Wrapper columns={columns} data-testid="imageSelectionComponent">
-      {mappedOptions.map((option: any, index: number) => (
-        <VisualOption
-          value={option.value}
-          onChange={handleChange}
-          label={option.value}
-          key={index}
-          name={objKey}
-          checked={option.value === value}
-          img={option.img}
-          disabled={disabled}
-        />
-      ))}
-    </S.Wrapper>
-  );
+	const { value, onChange, options, objKey, columns, disabled, theme } = props;
+
+	const mappedOptions: any = getOptions(theme, options);
+
+	const handleChange = (newValue: string) => onChange(newValue);
+
+	return (
+		<S.Wrapper columns={columns} data-testid="imageSelectionComponent">
+			{mappedOptions.map((option: any, index: number) => (
+				<VisualOption
+					value={option.value}
+					onChange={handleChange}
+					label={option.value}
+					key={index}
+					name={objKey}
+					checked={option.value === value}
+					img={option.img}
+					disabled={disabled}
+				/>
+			))}
+		</S.Wrapper>
+	);
 };
 
 export interface IImageSelectionProps {
-  value: string;
-  title: string;
-  onChange: (value: string) => void;
-  options: any;
-  name: string;
-  objKey: string;
-  columns: number;
-  disabled?: boolean;
-  theme: string;
+	value: string;
+	title: string;
+	onChange: (value: string) => void;
+	options: any;
+	name: string;
+	objKey: string;
+	columns: number;
+	disabled?: boolean;
+	theme: string;
 }
 
 export default ImageSelection;

package/src/components/Fields/VisualUniqueSelection/ImageSelection/style.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const Wrapper = styled.div<{columns: number }>`
+export const Wrapper = styled.div<{ columns: number }>`
   display: grid;
   grid-template-columns: repeat(${(p) => p.columns}, 1fr);
   grid-gap: 8px;

package/src/components/Fields/VisualUniqueSelection/ScrollableSelection/index.tsx

@@ -6,93 +6,93 @@ import { getOptions } from "../utils";
 import * as S from "./style";
 
 const ScrollableSelection = (props: IScrollableSelectionProps): JSX.Element => {
-  const { value, onChange, actions, options, objKey, columns, disabled, reference, theme } = props;
-  const [carouselIndex, setCarouselIndex] = useState(0);
-  const [carouselItemWidth, setCarouselItemWidth] = useState<number>();
-  const carouselRef = useRef<HTMLDivElement>(null);
+	const { value, onChange, actions, options, objKey, columns, disabled, reference, theme } = props;
+	const [carouselIndex, setCarouselIndex] = useState(0);
+	const [carouselItemWidth, setCarouselItemWidth] = useState<number>();
+	const carouselRef = useRef<HTMLDivElement>(null);
 
-  const mappedOptions: any = getOptions(theme, options);
+	const mappedOptions: any = getOptions(theme, options);
 
-  const slides = Math.ceil(mappedOptions.length / columns);
+	const slides = Math.ceil(mappedOptions.length / columns);
 
-  const handleSelection = (newValue: string) => {
-    onChange(newValue);
-    actions.replaceElementsInCollectionAction(newValue, reference);
-  };
+	const handleSelection = (newValue: string) => {
+		onChange(newValue);
+		actions.replaceElementsInCollectionAction(newValue, reference);
+	};
 
-  const handlePreviousPage = () => {
-    setCarouselIndex(carouselIndex > 0 ? carouselIndex - 1 : 0);
-  };
+	const handlePreviousPage = () => {
+		setCarouselIndex(carouselIndex > 0 ? carouselIndex - 1 : 0);
+	};
 
-  const handleNextPage = () => {
-    setCarouselIndex(carouselIndex < slides - 1 ? carouselIndex + 1 : 0);
-  };
+	const handleNextPage = () => {
+		setCarouselIndex(carouselIndex < slides - 1 ? carouselIndex + 1 : 0);
+	};
 
-  useEffect(() => {
-    carouselRef.current!.scrollLeft = carouselItemWidth ? carouselItemWidth * carouselIndex * columns : 0;
-  }, [carouselIndex, carouselItemWidth, columns]);
+	useEffect(() => {
+		carouselRef.current!.scrollLeft = carouselItemWidth ? carouselItemWidth * carouselIndex * columns : 0;
+	}, [carouselIndex, carouselItemWidth, columns]);
 
-  useEffect(() => {
-    if (carouselRef && carouselRef.current) {
-      setCarouselItemWidth(Math.floor(carouselRef.current.offsetWidth / columns));
-    }
-  }, [carouselRef, columns]);
+	useEffect(() => {
+		if (carouselRef && carouselRef.current) {
+			setCarouselItemWidth(Math.floor(carouselRef.current.offsetWidth / columns));
+		}
+	}, [carouselRef, columns]);
 
-  return (
-    <S.Wrapper data-testid="scrollableSelectionComponent">
-      <S.Carousel ref={carouselRef}>
-        {mappedOptions.map((option: IScrollableUniqueSelectionFieldOptionsProps, index: number) => (
-          <S.CarouselItem width={carouselItemWidth} columns={columns} key={index}>
-            <VisualOption
-              value={option.value}
-              onChange={handleSelection}
-              label={option.value}
-              name={objKey}
-              checked={option.value === value}
-              img={option.img}
-              disabled={disabled}
-            />
-          </S.CarouselItem>
-        ))}
-      </S.Carousel>
-      {options.length > columns && (
-        <S.SlideSelector>
-          <S.MoveButton>
-            <IconAction icon="Left-arrow" onClick={handlePreviousPage} />
-          </S.MoveButton>
-          <S.DotGroup>
-            {[...Array(slides)].map((_, i) => (
-              <S.Dot data-testid="dotSelected" selected={i === carouselIndex} key={i}></S.Dot>
-            ))}
-          </S.DotGroup>
-          <S.MoveButton>
-            <IconAction icon="Right-arrow" onClick={handleNextPage} />
-          </S.MoveButton>
-        </S.SlideSelector>
-      )}
-    </S.Wrapper>
-  );
+	return (
+		<S.Wrapper data-testid="scrollableSelectionComponent">
+			<S.Carousel ref={carouselRef}>
+				{mappedOptions.map((option: IScrollableUniqueSelectionFieldOptionsProps, index: number) => (
+					<S.CarouselItem width={carouselItemWidth} columns={columns} key={index}>
+						<VisualOption
+							value={option.value}
+							onChange={handleSelection}
+							label={option.value}
+							name={objKey}
+							checked={option.value === value}
+							img={option.img}
+							disabled={disabled}
+						/>
+					</S.CarouselItem>
+				))}
+			</S.Carousel>
+			{options.length > columns && (
+				<S.SlideSelector>
+					<S.MoveButton>
+						<IconAction icon="Left-arrow" onClick={handlePreviousPage} />
+					</S.MoveButton>
+					<S.DotGroup>
+						{[...Array(slides)].map((_, i) => (
+							<S.Dot data-testid="dotSelected" selected={i === carouselIndex} key={i}></S.Dot>
+						))}
+					</S.DotGroup>
+					<S.MoveButton>
+						<IconAction icon="Right-arrow" onClick={handleNextPage} />
+					</S.MoveButton>
+				</S.SlideSelector>
+			)}
+		</S.Wrapper>
+	);
 };
 
 export interface IScrollableSelectionProps {
-  value: string;
-  title: string;
-  onChange: (value: string) => void;
-  options: any[];
-  name: string;
-  objKey: string;
-  columns: number;
-  disabled?: boolean;
-  actions: any;
-  selectedContent: any;
-  reference?: string;
-  theme: string;
-  elementUniqueSelection: boolean;
+	value: string;
+	title: string;
+	onChange: (value: string) => void;
+	options: any[];
+	name: string;
+	objKey: string;
+	columns: number;
+	disabled?: boolean;
+	actions: any;
+	selectedContent: any;
+	reference?: string;
+	theme: string;
+	elementUniqueSelection: boolean;
 }
 
 interface IScrollableUniqueSelectionFieldOptionsProps {
-  value: string;
-  img: string;
+	value: string;
+	img: string;
 }
 
 export default ScrollableSelection;

package/src/components/Fields/VisualUniqueSelection/index.tsx

@@ -4,10 +4,10 @@ import ImageSelection, { IImageSelectionProps } from "./ImageSelection";
 import ScrollableSelection, { IScrollableSelectionProps } from "./ScrollableSelection";
 
 const VisualUniqueSelection = (props: IImageSelectionProps & IScrollableSelectionProps): JSX.Element => {
-  const { elementUniqueSelection = false } = props;
-  const Component = elementUniqueSelection ? ScrollableSelection : ImageSelection;
+	const { elementUniqueSelection = false } = props;
+	const Component = elementUniqueSelection ? ScrollableSelection : ImageSelection;
 
-  return <Component {...props} />;
+	return <Component {...props} />;
 };
 
 export default VisualUniqueSelection;

package/src/components/Fields/VisualUniqueSelection/utils.tsx

@@ -1,25 +1,25 @@
 import { hasProps } from "@ax/helpers";
 
 const defaultOptions = (vusOptions: Record<string, unknown>[]) => {
-  return !vusOptions.find((entry) => entry.theme);
+	return !vusOptions.find((entry) => entry.theme);
 };
 
 const getOptions = (theme: string, vusOptions: Record<string, unknown>[]) => {
-  const themes = vusOptions.filter((entry) => entry.theme).map((entry) => entry.theme);
-  const themeExists = themes.includes(theme);
-  const defaultsOptions = vusOptions.filter((entry) => hasProps(entry, ["img", "value"]));
+	const themes = vusOptions.filter((entry) => entry.theme).map((entry) => entry.theme);
+	const themeExists = themes.includes(theme);
+	const defaultsOptions = vusOptions.filter((entry) => hasProps(entry, ["img", "value"]));
 
-  // 1 - Si options solo tiene las defaults options (legacy) devuelve las defaults.
-  // 2 - Si options no tiene el theme, devuelve las defaults.
-  if (defaultOptions(vusOptions) || !themeExists) return defaultsOptions;
+	// 1 - Si options solo tiene las defaults options (legacy) devuelve las defaults.
+	// 2 - Si options no tiene el theme, devuelve las defaults.
+	if (defaultOptions(vusOptions) || !themeExists) return defaultsOptions;
 
-  // Si options tiene el theme, devuelve las options de ese theme.
-  if (themeExists) {
-    const optionsObj = vusOptions.find((entry) => entry.theme === theme);
-    return optionsObj && optionsObj.options;
-  }
+	// Si options tiene el theme, devuelve las options de ese theme.
+	if (themeExists) {
+		const optionsObj = vusOptions.find((entry) => entry.theme === theme);
+		return optionsObj && optionsObj.options;
+	}
 
-  return [];
+	return [];
 };
 
 export { getOptions };

package/src/components/Fields/Wysiwyg/config.tsx

@@ -9,118 +9,118 @@ const tableStyles = richTextConfig?.tableStyles ? parseClassNames(richTextConfig
 const tableCellStyles = richTextConfig?.tableCellStyles ? parseClassNames(richTextConfig.tableCellStyles) : undefined;
 
 const miscButtons = [
-  "underline",
-  "textColor",
-  "formatOLSimple",
-  "specialCharacters",
-  "insertHR",
-  "alignLeft",
-  "alignRight",
-  "alignJustify",
-  "outdent",
-  "indent",
-  "undo",
-  "redo",
-  "selectAll",
-  "html",
-  "insertTable",
-  paragraphStyles ? "paragraphStyle" : undefined,
-  "langDropdown",
+	"underline",
+	"textColor",
+	"formatOLSimple",
+	"specialCharacters",
+	"insertHR",
+	"alignLeft",
+	"alignRight",
+	"alignJustify",
+	"outdent",
+	"indent",
+	"undo",
+	"redo",
+	"selectAll",
+	"html",
+	"insertTable",
+	paragraphStyles ? "paragraphStyle" : undefined,
+	"langDropdown",
 ];
 
 const buttonsFull = {
-  moreText: {
-    buttons: ["bold", "italic", "paragraphFormat", "formatUL", "quote", "alignCenter"],
-    buttonsVisible: 6,
-  },
-  moreText2: {
-    buttons: ["insertLink", "insertImage", "insertVideo", "clearFormatting", "fullscreen"],
-    buttonsVisible: 5,
-  },
-  moreMisc: {
-    buttons: miscButtons,
-    align: "right",
-    buttonsVisible: 0,
-  },
+	moreText: {
+		buttons: ["bold", "italic", "paragraphFormat", "formatUL", "quote", "alignCenter"],
+		buttonsVisible: 6,
+	},
+	moreText2: {
+		buttons: ["insertLink", "insertImage", "insertVideo", "clearFormatting", "fullscreen"],
+		buttonsVisible: 5,
+	},
+	moreMisc: {
+		buttons: miscButtons,
+		align: "right",
+		buttonsVisible: 0,
+	},
 };
 
 const buttons = [
-  [
-    "bold",
-    "italic",
-    "formatUL",
-    "insertLink",
-    "paragraphFormat",
-    paragraphStyles ? "paragraphStyle" : undefined,
-    "langDropdown",
-  ],
+	[
+		"bold",
+		"italic",
+		"formatUL",
+		"insertLink",
+		"paragraphFormat",
+		paragraphStyles ? "paragraphStyle" : undefined,
+		"langDropdown",
+	],
 ];
 
 const inlineToolbar = ["langDropdown", "undo", "redo"];
 
 const wysiwygConfig = {
-  key: process.env.REACT_APP_FROALA_KEY,
-  // pastePlain: false,
-  pasteDeniedAttrs: ["class", "id", "style", "dir"],
-  listAdvancedTypes: false,
-  attribution: false,
-  paragraphFormat: {
-    N: "Normal",
-    H1: "Heading 1",
-    H2: "Heading 2",
-    H3: "Heading 3",
-    H4: "Heading 4",
-  },
-  imageEditButtons: [
-    "imageReplace",
-    "imageAlign",
-    "imageCaption",
-    "imageRemove",
-    "|",
-    "imageLink",
-    "linkOpen",
-    "linkEdit",
-    "linkRemove",
-    "-",
-    "imageDisplay",
-    "imageAlt",
-  ],
-  imageResize: false,
-  linkEditButtons: ["linkOpen", "linkEdit", "linkRemove"],
-  videoInsertButtons: ["videoBack", "|", "videoByURL", "videoEmbed"],
-  imageAllowedTypes: ["jpeg", "jpg", "png", "svg"],
-  imageMaxSize: 20 * 1024 * 1024,
-  imageManagerLoadURL: `${API_URL}/images/wysiwyg`,
-  requestWithCORS: false,
-  paragraphStyles,
-  tableStyles,
-  tableCellStyles,
-  imageUploadRemoteUrls: false,
+	key: process.env.REACT_APP_FROALA_KEY,
+	// pastePlain: false,
+	pasteDeniedAttrs: ["class", "id", "style", "dir"],
+	listAdvancedTypes: false,
+	attribution: false,
+	paragraphFormat: {
+		N: "Normal",
+		H1: "Heading 1",
+		H2: "Heading 2",
+		H3: "Heading 3",
+		H4: "Heading 4",
+	},
+	imageEditButtons: [
+		"imageReplace",
+		"imageAlign",
+		"imageCaption",
+		"imageRemove",
+		"|",
+		"imageLink",
+		"linkOpen",
+		"linkEdit",
+		"linkRemove",
+		"-",
+		"imageDisplay",
+		"imageAlt",
+	],
+	imageResize: false,
+	linkEditButtons: ["linkOpen", "linkEdit", "linkRemove"],
+	videoInsertButtons: ["videoBack", "|", "videoByURL", "videoEmbed"],
+	imageAllowedTypes: ["jpeg", "jpg", "png", "svg"],
+	imageMaxSize: 20 * 1024 * 1024,
+	imageManagerLoadURL: `${API_URL}/images/wysiwyg`,
+	requestWithCORS: false,
+	paragraphStyles,
+	tableStyles,
+	tableCellStyles,
+	imageUploadRemoteUrls: false,
 };
 
 FroalaEditor.DefineIcon("langIcon", {
-  PATH: "m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04ZM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12Zm-2.62 7 1.62-4.33L19.12 17h-3.24Z",
-  template: "svg",
+	PATH: "m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04ZM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12Zm-2.62 7 1.62-4.33L19.12 17h-3.24Z",
+	template: "svg",
 });
 
 FroalaEditor.RegisterCommand("langDropdown", {
-  title: "Language",
-  type: "dropdown",
-  icon: "langIcon",
-  undo: true,
-  focus: true,
-  refreshAfterCallback: true,
-  html: function () {
-    return getLanguageMenuHtml(richTextConfig?.editorLangs ? richTextConfig.editorLangs : languages);
-  },
-  callback: function (cmd: any, val: string) {
-    const html = this.selection.text();
-    if (val !== "") {
-      this.html.insert(`<span lang="${val}" translate="no">${html}</span>`, true);
-    } else {
-      this.html.insert(html, true);
-    }
-  },
+	title: "Language",
+	type: "dropdown",
+	icon: "langIcon",
+	undo: true,
+	focus: true,
+	refreshAfterCallback: true,
+	html: function () {
+		return getLanguageMenuHtml(richTextConfig?.editorLangs ? richTextConfig.editorLangs : languages);
+	},
+	callback: function (cmd: any, val: string) {
+		const html = this.selection.text();
+		if (val !== "") {
+			this.html.insert(`<span lang="${val}" translate="no">${html}</span>`, true);
+		} else {
+			this.html.insert(html, true);
+		}
+	},
 });
 
 export { buttonsFull, buttons, inlineToolbar, wysiwygConfig };