@addev-be/ui 0.16.0 → 0.16.2

package/src/components/layout/Loading/index.tsx

@@ -1,29 +1,29 @@
-import * as styles from './styles';
-
-import { FC, PropsWithChildren, useMemo } from 'react';
-
-import { LoadingIcon } from '../../../Icons';
-import { usePortals } from '../../../providers';
-
-type LoadingProps = PropsWithChildren<{
-  visible?: boolean;
-}>;
-
-export const Loading: FC<LoadingProps> = ({ visible, children }) => {
-  const { createPortal } = usePortals();
-  const loadingPortal = useMemo(
-    () =>
-      visible
-        ? createPortal(
-            <styles.LoadingBackdrop>
-              <LoadingIcon />
-              <styles.LoadingContainer>
-                {children || 'Loading ...'}
-              </styles.LoadingContainer>
-            </styles.LoadingBackdrop>
-          )
-        : null,
-    [children, createPortal, visible]
-  );
-  return <>{loadingPortal}</>;
-};
+import * as styles from './styles';
+
+import { FC, PropsWithChildren, useMemo } from 'react';
+
+import { LoadingIcon } from '../../../Icons';
+import { usePortals } from '../../../providers';
+
+type LoadingProps = PropsWithChildren<{
+  visible?: boolean;
+}>;
+
+export const Loading: FC<LoadingProps> = ({ visible, children }) => {
+  const { createPortal } = usePortals();
+  const loadingPortal = useMemo(
+    () =>
+      visible
+        ? createPortal(
+            <styles.LoadingBackdrop>
+              <LoadingIcon />
+              <styles.LoadingContainer>
+                {children || 'Loading ...'}
+              </styles.LoadingContainer>
+            </styles.LoadingBackdrop>
+          )
+        : null,
+    [children, createPortal, visible]
+  );
+  return <>{loadingPortal}</>;
+};

package/src/components/layout/Loading/styles.ts

@@ -1,29 +1,29 @@
-import styled from 'styled-components';
-
-export const LoadingContainer = styled.div.attrs({
-  className: 'LoadingContent',
-})`
-  padding: var(--space-4);
-`;
-
-export const LoadingBackdrop = styled.div.attrs({
-  className: 'LoadingBackdrop',
-})`
-  position: fixed;
-  z-index: 1100;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: var(--color-gray-50);
-  fill: var(--color-gray-50);
-  & > svg {
-    width: var(--space-8);
-    height: var(--space-8);
-  }
-`;
+import styled from 'styled-components';
+
+export const LoadingContainer = styled.div.attrs({
+  className: 'LoadingContent',
+})`
+  padding: var(--space-4);
+`;
+
+export const LoadingBackdrop = styled.div.attrs({
+  className: 'LoadingBackdrop',
+})`
+  position: fixed;
+  z-index: 1100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--color-gray-50);
+  fill: var(--color-gray-50);
+  & > svg {
+    width: var(--space-8);
+    height: var(--space-8);
+  }
+`;

package/src/components/layout/Masonry/index.tsx

@@ -1,29 +1,29 @@
-import { FC, PropsWithChildren, ReactNode, useMemo } from 'react';
-import {
-  MasonryColumnContainer,
-  MasonryContainer,
-  MasonryContainerProps,
-} from './styles';
-
-export const Masonry: FC<PropsWithChildren<MasonryContainerProps>> = ({
-  children,
-  columns = 3,
-}) => {
-  const childrenByColumn = useMemo(() => {
-    const arr = Array.from({ length: columns }, (): ReactNode[] => []);
-    if (Array.isArray(children)) {
-      children.forEach((child, index) => {
-        arr[index % columns].push(child);
-      });
-    }
-    return arr;
-  }, [children, columns]);
-
-  return (
-    <MasonryContainer columns={columns}>
-      {childrenByColumn.map((column, index) => (
-        <MasonryColumnContainer key={index}>{column}</MasonryColumnContainer>
-      ))}
-    </MasonryContainer>
-  );
-};
+import { FC, PropsWithChildren, ReactNode, useMemo } from 'react';
+import {
+  MasonryColumnContainer,
+  MasonryContainer,
+  MasonryContainerProps,
+} from './styles';
+
+export const Masonry: FC<PropsWithChildren<MasonryContainerProps>> = ({
+  children,
+  columns = 3,
+}) => {
+  const childrenByColumn = useMemo(() => {
+    const arr = Array.from({ length: columns }, (): ReactNode[] => []);
+    if (Array.isArray(children)) {
+      children.forEach((child, index) => {
+        arr[index % columns].push(child);
+      });
+    }
+    return arr;
+  }, [children, columns]);
+
+  return (
+    <MasonryContainer columns={columns}>
+      {childrenByColumn.map((column, index) => (
+        <MasonryColumnContainer key={index}>{column}</MasonryColumnContainer>
+      ))}
+    </MasonryContainer>
+  );
+};

package/src/components/layout/Masonry/styles.ts

@@ -1,20 +1,20 @@
-import styled from 'styled-components';
-
-export type MasonryContainerProps = {
-  columns?: number;
-};
-
-export const MasonryContainer = styled.div<MasonryContainerProps>`
-  display: grid;
-  grid-gap: var(--space-2);
-  grid-template-columns: repeat(
-    ${({ columns = 4 }) => columns},
-    minmax(0, 1fr)
-  );
-`;
-
-export const MasonryColumnContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-`;
+import styled from 'styled-components';
+
+export type MasonryContainerProps = {
+  columns?: number;
+};
+
+export const MasonryContainer = styled.div<MasonryContainerProps>`
+  display: grid;
+  grid-gap: var(--space-2);
+  grid-template-columns: repeat(
+    ${({ columns = 4 }) => columns},
+    minmax(0, 1fr)
+  );
+`;
+
+export const MasonryColumnContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+`;

package/src/components/layout/Modal/index.tsx

@@ -1,51 +1,51 @@
-import * as styles from './styles';
-
-import { FC, PropsWithChildren, useMemo } from 'react';
-
-import { usePortals } from '../../../providers';
-
-type ModalProps = PropsWithChildren<
-  styles.ModalContainerProps & {
-    closeOnBackdropClick?: boolean;
-    onClose?: () => void;
-  }
->;
-
-type ModalFC = FC<ModalProps> & {
-  Header: typeof styles.ModalHeader;
-  Message: typeof styles.ModalMessage;
-  Content: typeof styles.ModalContent;
-  ContentWithIcon: typeof styles.ModalContentWithIcon;
-  Footer: typeof styles.ModalFooter;
-  Buttons: typeof styles.ModalButtons;
-};
-
-export const Modal: ModalFC = ({
-  children,
-  closeOnBackdropClick,
-  onClose,
-  ...props
-}) => {
-  const { createPortal } = usePortals();
-
-  const modalPortal = useMemo(
-    () =>
-      createPortal(
-        <styles.ModalBackdrop
-          onClick={closeOnBackdropClick ? onClose : undefined}
-        >
-          <styles.ModalContainer {...props}>{children}</styles.ModalContainer>
-        </styles.ModalBackdrop>
-      ),
-    [children, closeOnBackdropClick, createPortal, onClose, props]
-  );
-
-  return <>{modalPortal}</>;
-};
-
-Modal.Header = styles.ModalHeader;
-Modal.Message = styles.ModalMessage;
-Modal.Content = styles.ModalContent;
-Modal.ContentWithIcon = styles.ModalContentWithIcon;
-Modal.Footer = styles.ModalFooter;
-Modal.Buttons = styles.ModalButtons;
+import * as styles from './styles';
+
+import { FC, PropsWithChildren, useMemo } from 'react';
+
+import { usePortals } from '../../../providers';
+
+type ModalProps = PropsWithChildren<
+  styles.ModalContainerProps & {
+    closeOnBackdropClick?: boolean;
+    onClose?: () => void;
+  }
+>;
+
+type ModalFC = FC<ModalProps> & {
+  Header: typeof styles.ModalHeader;
+  Message: typeof styles.ModalMessage;
+  Content: typeof styles.ModalContent;
+  ContentWithIcon: typeof styles.ModalContentWithIcon;
+  Footer: typeof styles.ModalFooter;
+  Buttons: typeof styles.ModalButtons;
+};
+
+export const Modal: ModalFC = ({
+  children,
+  closeOnBackdropClick,
+  onClose,
+  ...props
+}) => {
+  const { createPortal } = usePortals();
+
+  const modalPortal = useMemo(
+    () =>
+      createPortal(
+        <styles.ModalBackdrop
+          onClick={closeOnBackdropClick ? onClose : undefined}
+        >
+          <styles.ModalContainer {...props}>{children}</styles.ModalContainer>
+        </styles.ModalBackdrop>
+      ),
+    [children, closeOnBackdropClick, createPortal, onClose, props]
+  );
+
+  return <>{modalPortal}</>;
+};
+
+Modal.Header = styles.ModalHeader;
+Modal.Message = styles.ModalMessage;
+Modal.Content = styles.ModalContent;
+Modal.ContentWithIcon = styles.ModalContentWithIcon;
+Modal.Footer = styles.ModalFooter;
+Modal.Buttons = styles.ModalButtons;

package/src/components/layout/Modal/styles.ts

@@ -1,121 +1,121 @@
-import styled, { css } from 'styled-components';
-
-import { ThemeColor } from '../../../providers';
-
-export const ModalBackdrop = styled.div.attrs({
-  className: 'ModalBackdrop',
-})`
-  position: fixed;
-  z-index: 1000;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export type ModalContainerProps = {
-  $width?: number;
-  $height?: number;
-  $zIndex?: number;
-  $fullscreen?: boolean;
-  $color?: ThemeColor;
-};
-
-export const ModalContainer = styled.div.attrs({
-  className: 'ModalContainer',
-})<ModalContainerProps>`
-  background: var(--color-neutral-100);
-  border-radius: var(--rounded-lg);
-  box-shadow: var(--shadow-lg);
-  display: flex;
-  flex-direction: column;
-  max-height: 100vh;
-  overflow: hidden;
-
-  position: fixed;
-  z-index: 1001;
-  ${({ $fullscreen, $width, $height }) =>
-    $fullscreen
-      ? css`
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          margin: var(--space-4);
-        `
-      : css`
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          width: ${$width ? `${$width}px` : 'auto'};
-          height: ${$height ? `${$height}px` : 'auto'};
-        `}
-
-  ${({ $color }) =>
-    $color
-      ? css`
-          border: 1px solid var(--color-${$color}-500);
-          box-shadow: 0 0 var(--space-3) var(--color-${$color}-500);
-        `
-      : null}
-`;
-
-export const ModalHeader = styled.div.attrs({ className: 'ModalHeader' })`
-  font-weight: bold;
-  font-size: var(--text-lg);
-  padding: var(--space-2);
-  background-color: var(--color-neutral-200);
-  padding: var(--space-4);
-`;
-
-export const ModalMessage = styled.p.attrs({ className: 'ModalMessage' })`
-  margin-bottom: 1rem;
-`;
-
-export const ModalContent = styled.div.attrs({ className: 'ModalContent' })`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: auto;
-  padding: var(--space-4);
-`;
-
-export const ModalContentWithIcon = styled.div.attrs({
-  className: 'ModalContentWithIcon',
-})`
-  display: flex;
-  flex-direction: row;
-  padding: var(--space-4);
-  gap: var(--space-2);
-
-  & > svg {
-    margin: var(--space-2);
-    width: var(--space-8);
-    height: var(--space-8);
-  }
-`;
-
-export const ModalFooter = styled.div.attrs({ className: 'ModalFooter' })`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: var(--space-2);
-  background-color: var(--color-neutral-200);
-  padding: var(--space-4);
-`;
-
-export const ModalButtons = styled(ModalFooter).attrs({
-  className: 'ModalButtons',
-})`
-  display: flex;
-  flex-direction: row;
-  gap: var(--space-2);
-
-  button.right:first-of-type {
-    margin-left: auto;
-  }
-`;
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../../providers';
+
+export const ModalBackdrop = styled.div.attrs({
+  className: 'ModalBackdrop',
+})`
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export type ModalContainerProps = {
+  $width?: number;
+  $height?: number;
+  $zIndex?: number;
+  $fullscreen?: boolean;
+  $color?: ThemeColor;
+};
+
+export const ModalContainer = styled.div.attrs({
+  className: 'ModalContainer',
+})<ModalContainerProps>`
+  background: var(--color-neutral-100);
+  border-radius: var(--rounded-lg);
+  box-shadow: var(--shadow-lg);
+  display: flex;
+  flex-direction: column;
+  max-height: 100vh;
+  overflow: hidden;
+
+  position: fixed;
+  z-index: 1001;
+  ${({ $fullscreen, $width, $height }) =>
+    $fullscreen
+      ? css`
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          margin: var(--space-4);
+        `
+      : css`
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: ${$width ? `${$width}px` : 'auto'};
+          height: ${$height ? `${$height}px` : 'auto'};
+        `}
+
+  ${({ $color }) =>
+    $color
+      ? css`
+          border: 1px solid var(--color-${$color}-500);
+          box-shadow: 0 0 var(--space-3) var(--color-${$color}-500);
+        `
+      : null}
+`;
+
+export const ModalHeader = styled.div.attrs({ className: 'ModalHeader' })`
+  font-weight: bold;
+  font-size: var(--text-lg);
+  padding: var(--space-2);
+  background-color: var(--color-neutral-200);
+  padding: var(--space-4);
+`;
+
+export const ModalMessage = styled.p.attrs({ className: 'ModalMessage' })`
+  margin-bottom: 1rem;
+`;
+
+export const ModalContent = styled.div.attrs({ className: 'ModalContent' })`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: auto;
+  padding: var(--space-4);
+`;
+
+export const ModalContentWithIcon = styled.div.attrs({
+  className: 'ModalContentWithIcon',
+})`
+  display: flex;
+  flex-direction: row;
+  padding: var(--space-4);
+  gap: var(--space-2);
+
+  & > svg {
+    margin: var(--space-2);
+    width: var(--space-8);
+    height: var(--space-8);
+  }
+`;
+
+export const ModalFooter = styled.div.attrs({ className: 'ModalFooter' })`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: var(--space-2);
+  background-color: var(--color-neutral-200);
+  padding: var(--space-4);
+`;
+
+export const ModalButtons = styled(ModalFooter).attrs({
+  className: 'ModalButtons',
+})`
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-2);
+
+  button.right:first-of-type {
+    margin-left: auto;
+  }
+`;

package/src/components/layout/index.ts

@@ -1,6 +1,6 @@
-export * from './Columns';
-export * from './Dropdown';
-export * from './Grid';
-export * from './Loading';
-export * from './Masonry';
-export * from './Modal';
+export * from './Columns';
+export * from './Dropdown';
+export * from './Grid';
+export * from './Loading';
+export * from './Masonry';
+export * from './Modal';

package/src/components/search/HighlightedText.tsx

@@ -1,37 +1,37 @@
-import { FC, HTMLAttributes, useMemo } from 'react';
-import { escapeForRegExp, extractTextFromHTML } from '../../helpers';
-
-export const HighlightedText: FC<
-  {
-    text: string;
-    highlight?: string;
-  } & HTMLAttributes<HTMLSpanElement>
-> = ({ text, highlight, ...props }) => {
-  const textWithoutHtml = useMemo(() => extractTextFromHTML(text), [text]);
-  console.log('textWithoutHtml', textWithoutHtml);
-  if (!highlight) return <span {...props}>{textWithoutHtml}</span>;
-
-  const parts =
-    textWithoutHtml?.split(
-      new RegExp(`(${escapeForRegExp(highlight)})`, 'gi')
-    ) ?? [];
-
-  return (
-    <span {...props}>
-      {parts
-        .filter((part) => !!part)
-        .map((part, index) => (
-          <span
-            key={index}
-            style={
-              part.toLowerCase() === highlight.toLowerCase()
-                ? { backgroundColor: 'gold' }
-                : {}
-            }
-          >
-            {part}
-          </span>
-        ))}
-    </span>
-  );
-};
+import { FC, HTMLAttributes, useMemo } from 'react';
+import { escapeForRegExp, extractTextFromHTML } from '../../helpers';
+
+export const HighlightedText: FC<
+  {
+    text: string;
+    highlight?: string;
+  } & HTMLAttributes<HTMLSpanElement>
+> = ({ text, highlight, ...props }) => {
+  const textWithoutHtml = useMemo(() => extractTextFromHTML(text), [text]);
+  console.log('textWithoutHtml', textWithoutHtml);
+  if (!highlight) return <span {...props}>{textWithoutHtml}</span>;
+
+  const parts =
+    textWithoutHtml?.split(
+      new RegExp(`(${escapeForRegExp(highlight)})`, 'gi')
+    ) ?? [];
+
+  return (
+    <span {...props}>
+      {parts
+        .filter((part) => !!part)
+        .map((part, index) => (
+          <span
+            key={index}
+            style={
+              part.toLowerCase() === highlight.toLowerCase()
+                ? { backgroundColor: 'gold' }
+                : {}
+            }
+          >
+            {part}
+          </span>
+        ))}
+    </span>
+  );
+};