@archbase/components 3.0.0

package/src/hooks/useArchbaseNavigateParams.ts

@@ -0,0 +1,17 @@
+import { NavigateOptions, useNavigate } from "react-router";
+import { URLSearchParamsInit, createSearchParams } from "react-router-dom";
+
+export const useArchbaseNavigateParams = () => {
+    const navigate = useNavigate();
+  
+    return (pathname : string, options?: NavigateOptions, params?: URLSearchParamsInit) => {
+      let path = {pathname, search:''}; 
+      if (params){ 
+        path = {
+            pathname,
+            search: createSearchParams(params).toString()
+        };
+      }
+      navigate(path, options);
+    };
+  };

package/src/hooks/useArchbaseVisible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useArchbaseVisible.d.ts","sourceRoot":"","sources":["useArchbaseVisible.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAS9C,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,OAAO,EAAE,CAAC,gBACjD,CAAC,EAAE,EAAE,MAAM,KAAK,CAAC,WACd,OAAO,CAAC,wBAAwB,CAAC,KACvC,CAAC,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAsBhC,CAAC"}

package/src/hooks/useArchbaseVisible.ts

@@ -0,0 +1,35 @@
+import type { MutableRefObject } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const defaultIntersectionObserverInit: IntersectionObserverInit = {
+	root: null,
+	rootMargin: '0px',
+	threshold: Array.from({ length: 100 }, (_v: undefined, i: number) => i * 0.01),
+};
+
+export const useArchbaseVisible = <T extends Element, V = number>(
+	cb?: (vi: number) => V,
+	option: Partial<IntersectionObserverInit> = {},
+): [MutableRefObject<T | null>, V] => {
+	const targetRef = useRef<T | null>(null);
+	const observerRef = useRef<IntersectionObserver | null>(null);
+	const [visible, setVisible] = useState<number>(0);
+	const status: V = typeof cb === 'function' ? cb(visible) : (visible as any);
+	const observerCallback: IntersectionObserverCallback = useCallback((entries: IntersectionObserverEntry[]) => {
+		entries.forEach((entry: IntersectionObserverEntry) => {
+			setVisible(entry.intersectionRatio);
+		});
+	}, []);
+
+	useEffect(() => {
+		if (observerRef.current) return;
+		if (!targetRef.current) return;
+		observerRef.current = new IntersectionObserver(observerCallback, {
+			...defaultIntersectionObserverInit,
+			...option,
+		});
+		observerRef.current.observe(targetRef.current);
+	});
+
+	return [targetRef, status];
+};

package/src/image/ArchbaseImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseImage.d.ts","sourceRoot":"","sources":["ArchbaseImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,WAAW,kBAAkB,CAAC,CAAC,EAAE,EAAE;IACxC,0DAA0D;IAC1D,UAAU,CAAC,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACvC,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,WAAW,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAC/C,2CAA2C;IAC3C,YAAY,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAChD,iDAAiD;IACjD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACjD,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;CACzD;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EACpC,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,QAAgB,EAChB,GAAG,MAAM,EACT,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,2CAa3B"}

package/src/image/ArchbaseImage.tsx

@@ -0,0 +1,56 @@
+import { Rating } from '@mantine/core';
+import React, { CSSProperties, FocusEventHandler } from 'react';
+import { useArchbaseV1V2Compatibility, IArchbaseDataSourceBase } from '@archbase/data';
+import { ArchbaseDataSource } from '@archbase/data';
+
+export interface ArchbaseImageProps<T, ID> {
+	/** Fonte de dados onde será atribuido o valor do rating (V1 ou V2) */
+	dataSource?: IArchbaseDataSourceBase<T>;
+	/** Campo onde deverá ser atribuido o valor do rating na fonte de dados */
+	dataField?: string;
+	/** Indicador se o rating está desabilitado */
+	disabled?: boolean;
+	/** Indicador se o rating é somente leitura. Obs: usado em conjunto com o status da fonte de dados */
+	readOnly?: boolean;
+	/** Indicador se o preenchimento do rating é obrigatório */
+	required?: boolean;
+	/** Estilo do checkbox */
+	style?: CSSProperties;
+	/** Texto sugestão do rating */
+	placeholder?: string;
+	/** Título do rating */
+	label?: string;
+	/** Descrição do rating */
+	description?: string;
+	/** Último erro ocorrido no rating */
+	error?: string;
+	/** Evento quando o foco sai do rating */
+	onFocusExit?: FocusEventHandler<T> | undefined;
+	/** Evento quando o rating recebe o foco */
+	onFocusEnter?: FocusEventHandler<T> | undefined;
+	/** Evento quando o valor do rating é alterado */
+	onChangeValue?: (value: any, event: any) => void;
+	/** Referência para o componente interno */
+	innerRef?: React.RefObject<HTMLInputElement> | undefined;
+}
+
+export function ArchbaseImage<T, ID>({
+	dataSource,
+	dataField,
+	disabled = false,
+	readOnly = false,
+	..._props
+}: ArchbaseImageProps<T, ID>) {
+	// V1/V2 Compatibility Pattern (basic setup)
+	const {
+		isDataSourceV2
+	} = useArchbaseV1V2Compatibility<T>(
+		'ArchbaseImage',
+		dataSource,
+		dataField
+	);
+
+	// This component currently just renders a Rating as placeholder
+	// TODO: Implement actual image functionality with DataSource integration
+	return <Rating defaultValue={2}/>;
+}

package/src/image/ArchbaseMicrosoftAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseMicrosoftAvatar.d.ts","sourceRoot":"","sources":["ArchbaseMicrosoftAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAIpD,eAAO,MAAM,cAAc,mnHACslH,CAAC;AAoBlnH,MAAM,WAAW,4BAA6B,SAAQ,WAAW;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,uBAAuB,gCAAiC,4BAA4B,4CAmBhG,CAAC"}

package/src/image/ArchbaseMicrosoftAvatar.tsx

@@ -0,0 +1,50 @@
+import { Avatar, AvatarProps } from '@mantine/core';
+import React, { useEffect, useState } from 'react';
+import { processErrorMessage } from '@archbase/core';
+
+export const DEFAULT_AVATAR =
+	'data:image/png;base64,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';
+
+const MS_GRAPH_API_ENDPOINT = 'https://graph.microsoft.com/v1.0';
+
+const msGraphApiRequest = async (endpoint: string, accessToken: string, headers: {}) => {
+	const response = await fetch(`${MS_GRAPH_API_ENDPOINT}${endpoint}`, {
+		headers: {
+			...headers,
+			Authorization: `Bearer ${accessToken}`,
+			ConsistencyLevel: 'eventual',
+		},
+	});
+
+	if (response.status !== 200) {
+		throw new Error(`HTTP error! status: ${response.status}`);
+	}
+
+	return response;
+};
+
+export interface ArchbaseMicrosoftAvatarProps extends AvatarProps {
+	token?: string | null;
+	email?: string | null;
+}
+
+export const ArchbaseMicrosoftAvatar = ({ token, email, ...others }: ArchbaseMicrosoftAvatarProps) => {
+	const [loadedSrc, setLoadedSrc] = useState<string | null>(null);
+	useEffect(() => {
+		setLoadedSrc(null);
+		if (token && email) {
+			msGraphApiRequest(`/users/${email}/photo/$value`, token, { responseType: 'Blob' })
+				.then((photoResponse: any) => {
+					photoResponse.blob().then((blob) => {
+						const url = URL.createObjectURL(blob);
+						setLoadedSrc(url);
+					});
+				})
+				.catch((error) => {
+					console.log(processErrorMessage(error));
+				});
+		}
+	}, [email, token]);
+
+	return <Avatar src={loadedSrc ? loadedSrc : DEFAULT_AVATAR} {...others} />;
+};

package/src/image/editor/components/BasicFilters/BasicFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicFilter.d.ts","sourceRoot":"","sources":["BasicFilter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAI9D,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,iBAAiB,GAAG,SAAS,GAAG,IAAI,CAAC;IACnD,YAAY,EAAE,QAAQ,CAAA;CACvB;AAYD,QAAA,MAAM,WAAW,oEAA4E,gBAAgB,6CAyJ3G,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/src/image/editor/components/BasicFilters/BasicFilter.tsx

@@ -0,0 +1,179 @@
+
+import React, { memo, useEffect, useState } from 'react'
+import { IBasicFilterState } from '../../models/index.models';
+import Input from '../Input/Input';
+import { useArchbaseTranslation } from '@archbase/core';
+
+export interface BasicFilterProps {
+  color: string;
+  initialState: IBasicFilterState | undefined | null,
+  changeFilter: Function
+}
+const _initialState: IBasicFilterState = {
+  contrast: 1,
+  blur: 0,
+  brightness: 1,
+  grayscale: 0,
+  invert: 0,
+  saturate: 1,
+  sepia: 0,
+}
+
+
+const BasicFilter = memo(({ color, initialState = _initialState, changeFilter = () => { } }: BasicFilterProps) => {
+  const [state, setState] = useState<IBasicFilterState>(initialState as any)
+  const { t } = useArchbaseTranslation()
+
+  useEffect(() => {
+    if (initialState) {
+      setState(JSON.parse(JSON.stringify({ ...state, ...initialState })));
+    } else {
+      setState(_initialState)
+    }
+  }, [initialState])
+
+  function onUpdateContrast(contrast: number) {
+    changeFilter({ ...state, contrast })
+  }
+
+  function onUpdateBrightness(brightness: number) {
+    changeFilter({ ...state, brightness })
+  }
+
+  function onUpdateGrayscale(grayscale: number) {
+    changeFilter({ ...state, grayscale })
+  }
+  function onUpdateSaturate(saturate: number) {
+    changeFilter({ ...state, saturate })
+  }
+  function onUpdateSepia(sepia: number) {
+    changeFilter({ ...state, sepia })
+  }
+  function onUpdateBlur(blur: number) {
+    changeFilter({ ...state, blur })
+  }
+
+  return <div>
+    <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between' }}>
+      <p className="item-panel">{`${t('Contrast')}`}</p>
+      <p className="item-panel">{(+state.contrast).toFixed(2)}</p>
+    </div>
+
+    <div className='flex-row-start'>
+      <Input
+        className="input-range"
+        onChangedDelayed={onUpdateContrast}
+        delayMs={100}
+        onChangedValue={(value: number) => { setState({ ...state, contrast: value }) }}
+        style={{
+          maxWidth: '100%', width: '100%', color: color
+        }}
+        type="range"
+        min="0"
+        max="5"
+        step="0.01"
+        value={state.contrast} />
+    </div>
+
+    <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between' }}>
+      <p className="item-panel">{`${t('Brightness')}`}</p>
+      <p className="item-panel">{(+state.brightness).toFixed(2)}</p>
+    </div>
+
+    <div className='flex-row-start'>
+      <Input
+        className="input-range"
+        onChangedDelayed={onUpdateBrightness}
+        onChangedValue={(value: number) => { setState({ ...state, brightness: value }) }}
+        style={{
+          maxWidth: '100%', width: '100%', color: color
+        }}
+        type="range"
+        min="0"
+        max="5"
+        step="0.01"
+        value={state.brightness} />
+    </div>
+
+    <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between' }}>
+      <p className="item-panel">{`${t('Grayscale')}`}</p>
+      <p className="item-panel">{(+state.grayscale).toFixed(2)}</p>
+    </div>
+
+    <div className='flex-row-start'>
+      <Input
+        className="input-range"
+        onChangedDelayed={onUpdateGrayscale}
+        onChangedValue={(value: number) => { setState({ ...state, grayscale: value }) }}
+        style={{
+          maxWidth: '100%', width: '100%', color: color
+        }}
+        type="range"
+        min="0"
+        max="5"
+        step="0.01"
+        value={state.grayscale} />
+    </div>
+    <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between' }}>
+      <p className="item-panel">{`${t('Saturate')}`}</p>
+      <p className="item-panel">{(+state.saturate).toFixed(2)}</p>
+    </div>
+
+    <div className='flex-row-start'>
+      <Input
+        className="input-range"
+        onChangedDelayed={onUpdateSaturate}
+        onChangedValue={(value: number) => { setState({ ...state, saturate: value }) }}
+        style={{
+          maxWidth: '100%', width: '100%', color: color
+        }}
+        type="range"
+        min="0"
+        max="5"
+        step="0.01"
+        value={state.saturate} />
+    </div>
+
+    <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between' }}>
+      <p className="item-panel">{`${t('Sepia')}`}</p>
+      <p className="item-panel">{(+state.sepia).toFixed(2)}</p>
+    </div>
+
+    <div className='flex-row-start'>
+      <Input
+        className="input-range"
+        onChangedDelayed={onUpdateSepia}
+        onChangedValue={(value: number) => { setState({ ...state, sepia: value }) }}
+        style={{
+          maxWidth: '100%', width: '100%', color: color
+        }}
+        type="range"
+        min="0"
+        max="5"
+        step="0.01"
+        value={state.sepia} />
+    </div>
+
+    <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between' }}>
+      <p className="item-panel">{`${t('Blur')}`}</p>
+      <p className="item-panel">{(+state.blur).toFixed(2)}</p>
+    </div>
+
+    <div className='flex-row-start'>
+      <Input
+        className="input-range"
+        onChangedDelayed={onUpdateBlur}
+        onChangedValue={(value: number) => { setState({ ...state, blur: value }) }}
+        style={{
+          maxWidth: '100%', width: '100%', color: color
+        }}
+        type="range"
+        min="0"
+        max="5"
+        step="0.01"
+        value={state.blur} />
+    </div>
+  </div>
+})
+
+export default BasicFilter

package/src/image/editor/components/CropprWrapper/ArchbaseCropper.scss

@@ -0,0 +1,73 @@
+  .ArchbaseCropprWrapper {
+
+    //////////////////CROPPR STYLES////////////////////////////
+    .croppr-container * {
+      user-select: none;
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+      box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+    }
+
+    .croppr-container img {
+      vertical-align: middle;
+      max-width: 100%;
+      max-height: 650px;
+      object-fit: cover;
+      object-position: center;
+    }
+
+    .croppr {
+      position: relative;
+      display: inline-block;
+    }
+
+    .croppr-overlay {
+      background: rgba(0, 0, 0, 0.5);
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      cursor: crosshair;
+    }
+
+    .croppr-region {
+      border: 1px dashed rgba(0, 0, 0, 0.5);
+      position: absolute;
+      z-index: 3;
+      cursor: move;
+      top: 0;
+      display: grid;
+      gap: 0px;
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    .croppr-imageClipped {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 2;
+      pointer-events: none;
+    }
+
+    .croppr-handle {
+      border: 1px solid #ccc;
+      background-color: #fafafa;
+      width: 14px;
+      height: 14px;
+      position: absolute;
+      z-index: 4;
+      top: 0;
+      border-radius: 50%;
+    }
+
+    //////////////////////////////////////////////////////////
+
+
+  }

package/src/image/editor/components/CropprWrapper/ArchbaseCropperWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseCropperWrapper.d.ts","sourceRoot":"","sources":["ArchbaseCropperWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAEhE,OAAO,wBAAwB,CAAC;AAEhC,eAAO,MAAM,sBAAsB,yDACjC;IACE,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,GAAG,CAAC;IACV,WAAW,EAAE,CAAC,IAAI,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CACrF,6CAwCD,CAAA"}

package/src/image/editor/components/CropprWrapper/ArchbaseCropperWrapper.tsx

@@ -0,0 +1,50 @@
+import React, { memo, useEffect, useRef, useState } from 'react'
+import Croppr from '../../functions/croppr/index';
+import './ArchbaseCropper.scss';
+
+export const ArchbaseCropperWrapper = memo(({ src, size, croppUpdate }:
+  {
+    src: string,
+    size: any,
+    croppUpdate: (data: { x: number; y: number; width: number; height: number }) => void
+  }) => {
+  const [imageSrc, setImageSrc] = useState<string | undefined | null>()
+  const [croppSize, setCroppSize] = useState<{ width: number; height: number }>({ width: 150, height: 150 })
+  const croppr = useRef<Croppr | undefined | null>(null);
+  const mount = useRef<HTMLImageElement | undefined | null>(null);
+
+  useEffect(() => {
+    if (size) {
+      setCroppSize({ ...size });
+      if (croppr.current) croppr.current.resizeTo(size.width, size.height);
+    }
+  }, [size])
+
+  useEffect(() => {
+    if (src) {
+      setImageSrc(src);
+    }
+  }, [src])
+
+  useEffect(() => {
+    if (mount.current && imageSrc) {
+      croppr.current = new Croppr('#croppr', {
+        minSize: [32, 32, 'px'],
+        startSize: [croppSize.width, croppSize.height, 'px'],
+        onInitialize: (data: Croppr | any) => {
+          croppUpdate(data?.getValue());
+        },
+        onCropEnd: (data: { x: number; y: number; width: number; height: number }) => {
+          croppUpdate(data);
+        },
+      });
+    }
+    return () => (croppr?.current?.destroy())
+  }, [mount.current, imageSrc])
+
+
+  return <div className='ArchbaseCropprWrapper'>
+    <img ref={mount as any} src={imageSrc as string} id="croppr" />
+  </div>
+
+})

package/src/image/editor/components/EditImage/ArchbaseEditImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseEditImage.d.ts","sourceRoot":"","sources":["ArchbaseEditImage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAqB,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAKtE,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,sBAAsB;IACtC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,QAAQ,CAAC;CACtB;AAaD,QAAA,MAAM,iBAAiB,0EACoE,sBAAsB,6CAibhH,CAAC;AAEF,eAAe,iBAAiB,CAAC"}