@addev-be/ui 0.12.2 → 0.13.0

package/src/components/forms/IconButton.tsx

@@ -1,57 +1,57 @@
-import { Button, ButtonProps } from './Button';
-import { ButtonHTMLAttributes, forwardRef } from 'react';
-
-import { IconFC } from '../../Icons';
-import { ThemeSize } from '../../providers';
-import styled from 'styled-components';
-
-type IconButtonProps = ButtonProps & {
-  icon: IconFC;
-  $iconSize?: ThemeSize;
-};
-
-const styles = {
-  IconButton: styled(Button).attrs({
-    className: 'IconButton',
-  })<Omit<IconButtonProps, 'icon'>>`
-    &.small {
-      padding: var(--space-1);
-      height: var(--space-6);
-      width: var(--space-6);
-      svg {
-        margin-right: 0;
-        width: ${({ $iconSize = '5' }) => `var(--space-${$iconSize})`};
-        height: ${({ $iconSize = '5' }) => `var(--space-${$iconSize})`};
-      }
-    }
-    &.medium {
-      padding: var(--space-2);
-      height: var(--space-8);
-      width: var(--space-8);
-      svg {
-        margin-right: 0;
-        width: ${({ $iconSize = '6' }) => `var(--space-${$iconSize})`};
-        height: ${({ $iconSize = '6' }) => `var(--space-${$iconSize})`};
-      }
-    }
-    &.large {
-      padding: var(--space-3);
-      height: var(--space-10);
-      width: var(--space-10);
-      svg {
-        margin-right: 0;
-        width: ${({ $iconSize = '8' }) => `var(--space-${$iconSize})`};
-        height: ${({ $iconSize = '8' }) => `var(--space-${$iconSize})`};
-      }
-    }
-  `,
-};
-
-export const IconButton = forwardRef<
-  HTMLButtonElement,
-  IconButtonProps & ButtonHTMLAttributes<HTMLButtonElement>
->(({ icon: Icon, ...props }, ref) => (
-  <styles.IconButton ref={ref} {...props}>
-    <Icon className="iconbutton-icon" />
-  </styles.IconButton>
-));
+import { Button, ButtonProps } from './Button';
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+
+import { IconFC } from '../../Icons';
+import { ThemeSize } from '../../providers';
+import styled from 'styled-components';
+
+type IconButtonProps = ButtonProps & {
+  icon: IconFC;
+  $iconSize?: ThemeSize;
+};
+
+const styles = {
+  IconButton: styled(Button).attrs({
+    className: 'IconButton',
+  })<Omit<IconButtonProps, 'icon'>>`
+    &.small {
+      padding: var(--space-1);
+      height: var(--space-6);
+      width: var(--space-6);
+      svg {
+        margin-right: 0;
+        width: ${({ $iconSize = '5' }) => `var(--space-${$iconSize})`};
+        height: ${({ $iconSize = '5' }) => `var(--space-${$iconSize})`};
+      }
+    }
+    &.medium {
+      padding: var(--space-2);
+      height: var(--space-8);
+      width: var(--space-8);
+      svg {
+        margin-right: 0;
+        width: ${({ $iconSize = '6' }) => `var(--space-${$iconSize})`};
+        height: ${({ $iconSize = '6' }) => `var(--space-${$iconSize})`};
+      }
+    }
+    &.large {
+      padding: var(--space-3);
+      height: var(--space-10);
+      width: var(--space-10);
+      svg {
+        margin-right: 0;
+        width: ${({ $iconSize = '8' }) => `var(--space-${$iconSize})`};
+        height: ${({ $iconSize = '8' }) => `var(--space-${$iconSize})`};
+      }
+    }
+  `,
+};
+
+export const IconButton = forwardRef<
+  HTMLButtonElement,
+  IconButtonProps & ButtonHTMLAttributes<HTMLButtonElement>
+>(({ icon: Icon, ...props }, ref) => (
+  <styles.IconButton ref={ref} {...props}>
+    <Icon className="iconbutton-icon" />
+  </styles.IconButton>
+));

package/src/components/forms/IndeterminateCheckbox.tsx

@@ -1,46 +1,46 @@
-import {
-  ChangeEvent,
-  FC,
-  InputHTMLAttributes,
-  useLayoutEffect,
-  useRef,
-} from 'react';
-
-import { join } from 'lodash';
-
-type IndeterminateCheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
-  className?: string;
-  checked: boolean | undefined;
-  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-};
-
-export const IndeterminateCheckbox: FC<IndeterminateCheckboxProps> = ({
-  className,
-  checked,
-  onChange,
-  ...props
-}) => {
-  const checkbox = useRef<HTMLInputElement>(null);
-
-  useLayoutEffect(() => {
-    if (checkbox.current)
-      checkbox.current.indeterminate = checked === undefined;
-  }, [checked]);
-
-  return (
-    <input
-      type="checkbox"
-      className={join(
-        [
-          'h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600',
-          className,
-        ],
-        ' '
-      )}
-      ref={checkbox}
-      checked={!!checked}
-      onChange={onChange}
-      {...props}
-    />
-  );
-};
+import {
+  ChangeEvent,
+  FC,
+  InputHTMLAttributes,
+  useLayoutEffect,
+  useRef,
+} from 'react';
+
+import { join } from 'lodash';
+
+type IndeterminateCheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
+  className?: string;
+  checked: boolean | undefined;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const IndeterminateCheckbox: FC<IndeterminateCheckboxProps> = ({
+  className,
+  checked,
+  onChange,
+  ...props
+}) => {
+  const checkbox = useRef<HTMLInputElement>(null);
+
+  useLayoutEffect(() => {
+    if (checkbox.current)
+      checkbox.current.indeterminate = checked === undefined;
+  }, [checked]);
+
+  return (
+    <input
+      type="checkbox"
+      className={join(
+        [
+          'h-4 w-4 rounded border-gray-300 text-sky-600 focus:ring-sky-600',
+          className,
+        ],
+        ' '
+      )}
+      ref={checkbox}
+      checked={!!checked}
+      onChange={onChange}
+      {...props}
+    />
+  );
+};

package/src/components/forms/Select.tsx

@@ -1,40 +1,40 @@
-import { SelectHTMLAttributes } from 'react';
-import { inputStyle } from './styles';
-import styled from 'styled-components';
-
-type SelectProps<T> = {
-  items: T[];
-  itemKey: keyof T | ((item: T) => string);
-  itemLabel: keyof T | ((item: T) => string);
-};
-
-const StyledSelect = styled.select`
-  ${inputStyle}
-`;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const Select = <T extends { [k: string]: any }>({
-  items,
-  itemKey,
-  itemLabel,
-  ...props
-}: SelectProps<T> & SelectHTMLAttributes<HTMLSelectElement>) => {
-  const keyGetter =
-    typeof itemKey === 'function' ? itemKey : (item: T) => item[itemKey];
-  const labelGetter =
-    typeof itemLabel === 'function' ? itemLabel : (item: T) => item[itemLabel];
-
-  return (
-    <StyledSelect {...props}>
-      {items.map((item) => {
-        const key = keyGetter(item);
-        const label = labelGetter(item);
-        return (
-          <option key={key} value={key}>
-            {label}
-          </option>
-        );
-      })}
-    </StyledSelect>
-  );
-};
+import { SelectHTMLAttributes } from 'react';
+import { inputStyle } from './styles';
+import styled from 'styled-components';
+
+type SelectProps<T> = {
+  items: T[];
+  itemKey: keyof T | ((item: T) => string);
+  itemLabel: keyof T | ((item: T) => string);
+};
+
+const StyledSelect = styled.select`
+  ${inputStyle}
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Select = <T extends { [k: string]: any }>({
+  items,
+  itemKey,
+  itemLabel,
+  ...props
+}: SelectProps<T> & SelectHTMLAttributes<HTMLSelectElement>) => {
+  const keyGetter =
+    typeof itemKey === 'function' ? itemKey : (item: T) => item[itemKey];
+  const labelGetter =
+    typeof itemLabel === 'function' ? itemLabel : (item: T) => item[itemLabel];
+
+  return (
+    <StyledSelect {...props}>
+      {items.map((item) => {
+        const key = keyGetter(item);
+        const label = labelGetter(item);
+        return (
+          <option key={key} value={key}>
+            {label}
+          </option>
+        );
+      })}
+    </StyledSelect>
+  );
+};

package/src/components/forms/VerticalLabel.tsx

@@ -1,20 +1,20 @@
-import { FC, HTMLAttributes } from 'react';
-
-import { StackedLabelContainer } from './styles';
-
-type StackedLabelProps = HTMLAttributes<HTMLDivElement> & {
-  label: string;
-};
-
-export const StackedLabel: FC<StackedLabelProps> = ({
-  label,
-  children,
-  ...props
-}) => {
-  return (
-    <StackedLabelContainer {...props}>
-      <label>{label}</label>
-      {children}
-    </StackedLabelContainer>
-  );
-};
+import { FC, HTMLAttributes } from 'react';
+
+import { StackedLabelContainer } from './styles';
+
+type StackedLabelProps = HTMLAttributes<HTMLDivElement> & {
+  label: string;
+};
+
+export const StackedLabel: FC<StackedLabelProps> = ({
+  label,
+  children,
+  ...props
+}) => {
+  return (
+    <StackedLabelContainer {...props}>
+      <label>{label}</label>
+      {children}
+    </StackedLabelContainer>
+  );
+};

package/src/components/forms/index.ts

@@ -1,6 +1,8 @@
-export * from './AutoTextArea';
-export * from './Button';
-export * from './Select';
-export * from './IconButton';
-export * from './IndeterminateCheckbox';
-export * from './styles';
+export * from './AutoTextArea';
+export * from './Button';
+export * from './Select';
+export * from './IconButton';
+export * from './IndeterminateCheckbox';
+export * from './Form';
+export * from './Form/InputWithLabel';
+export * from './styles';

package/src/components/forms/styles.ts

@@ -1,31 +1,31 @@
-import styled, { css } from 'styled-components';
-
-export const inputStyle = css`
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-  border: 1px solid var(--color-gray-300);
-  border-radius: var(--rounded-md);
-  padding: var(--space-1);
-  width: 100%;
-  box-sizing: border-box;
-
-  &:focus {
-    outline: 2px solid var(--color-primary-500);
-  }
-`;
-
-export const Input = styled.input.attrs({
-  className: 'Input',
-})`
-  ${inputStyle}
-`;
-
-export const StackedLabelContainer = styled.div.attrs({
-  className: 'StackedLabelContainer',
-})`
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  color: var(--color-gray-900);
-`;
+import styled, { css } from 'styled-components';
+
+export const inputStyle = css`
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  border: 1px solid var(--color-gray-300);
+  border-radius: var(--rounded-md);
+  padding: var(--space-1);
+  width: 100%;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: 2px solid var(--color-primary-500);
+  }
+`;
+
+export const Input = styled.input.attrs({
+  className: 'Input',
+})`
+  ${inputStyle}
+`;
+
+export const StackedLabelContainer = styled.div.attrs({
+  className: 'StackedLabelContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  color: var(--color-gray-900);
+`;

package/src/components/index.ts

@@ -1,6 +1,6 @@
-export * from './auth';
-export * from './data';
-export * from './forms';
-export * from './layout';
-export * from './search';
-export * from './ui';
+export * from './auth';
+export * from './data';
+export * from './forms';
+export * from './layout';
+export * from './search';
+export * from './ui';

package/src/components/layout/Columns.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export type ColumnsProps = {
+  columns?: number | string[];
+};
+
+export const Columns = styled.div<ColumnsProps>`
+  display: grid;
+  grid-gap: var(--space-2);
+  grid-template-columns: ${({ columns }) =>
+    typeof columns === 'number'
+      ? `repeat(${columns}, 1fr)`
+      : columns?.join(' ') || 'none'};
+`;
+
+export const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+`;

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

@@ -1,112 +1,112 @@
-import * as styles from './styles';
-
-import {
-  CSSProperties,
-  FC,
-  PropsWithChildren,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
-
-import { usePortals } from '../../../providers';
-
-type DropdownProps = PropsWithChildren<
-  styles.DropdownContainerProps & {
-    $sourceRect: DOMRect;
-    $autoPositionX?: boolean;
-    $autoPositionY?: boolean;
-    onClose?: () => void;
-    style?: CSSProperties;
-  }
->;
-
-const getDropdownStyle = (dropdown: DropdownProps): CSSProperties => {
-  const minHeight = Array.isArray(dropdown.$height)
-    ? dropdown.$height[0]
-    : dropdown.$height;
-  const maxHeight = Array.isArray(dropdown.$height)
-    ? dropdown.$height[1]
-    : dropdown.$height;
-  const bottomSpace = document.body.scrollHeight - dropdown.$sourceRect.bottom;
-  const topSpace = dropdown.$sourceRect.top;
-  const isDropdownBelow =
-    !dropdown.$autoPositionY ||
-    bottomSpace > topSpace ||
-    bottomSpace >= minHeight;
-  const height = Math.max(
-    Math.min(maxHeight, isDropdownBelow ? bottomSpace : topSpace),
-    minHeight
-  );
-
-  const rightSpace = document.body.scrollWidth - dropdown.$sourceRect.right;
-  const leftSpace = dropdown.$sourceRect.left;
-  const isDropdownRight =
-    !dropdown.$autoPositionX ||
-    rightSpace > leftSpace ||
-    rightSpace >= dropdown.$width;
-
-  const dropdownStyle: CSSProperties = {
-    ...(isDropdownBelow
-      ? { top: topSpace + dropdown.$sourceRect.height }
-      : { bottom: bottomSpace + dropdown.$sourceRect.height }),
-    ...(isDropdownRight ? { left: leftSpace } : { right: rightSpace }),
-    width: dropdown.$width,
-    height,
-    minHeight,
-    maxHeight,
-    boxSizing: 'border-box',
-    ...dropdown.style,
-  };
-  return dropdownStyle;
-};
-
-export const Dropdown: FC<DropdownProps> = ({
-  children,
-  onClose,
-  ...props
-}) => {
-  const { createPortal } = usePortals();
-
-  const firstClick = useRef(true);
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const style = useMemo(() => getDropdownStyle(props), [props]);
-
-  const onDocumentClick = useCallback(
-    (ev: MouseEvent) => {
-      if (firstClick.current) {
-        firstClick.current = false;
-        return;
-      }
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(ev.target as Node)
-      ) {
-        return onClose?.();
-      }
-    },
-    [onClose]
-  );
-
-  useEffect(() => {
-    if (containerRef.current) {
-      document.addEventListener('click', onDocumentClick);
-      return () => {
-        document.removeEventListener('click', onDocumentClick);
-      };
-    }
-  }, [onDocumentClick]);
-
-  const modalPortal = useMemo(
-    () =>
-      createPortal(
-        <styles.DropdownContainer ref={containerRef} {...props} style={style}>
-          {children}
-        </styles.DropdownContainer>
-      ),
-    [children, createPortal, props, style]
-  );
-
-  return <>{modalPortal}</>;
-};
+import * as styles from './styles';
+
+import {
+  CSSProperties,
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+
+import { usePortals } from '../../../providers';
+
+type DropdownProps = PropsWithChildren<
+  styles.DropdownContainerProps & {
+    $sourceRect: DOMRect;
+    $autoPositionX?: boolean;
+    $autoPositionY?: boolean;
+    onClose?: () => void;
+    style?: CSSProperties;
+  }
+>;
+
+const getDropdownStyle = (dropdown: DropdownProps): CSSProperties => {
+  const minHeight = Array.isArray(dropdown.$height)
+    ? dropdown.$height[0]
+    : dropdown.$height;
+  const maxHeight = Array.isArray(dropdown.$height)
+    ? dropdown.$height[1]
+    : dropdown.$height;
+  const bottomSpace = document.body.scrollHeight - dropdown.$sourceRect.bottom;
+  const topSpace = dropdown.$sourceRect.top;
+  const isDropdownBelow =
+    !dropdown.$autoPositionY ||
+    bottomSpace > topSpace ||
+    bottomSpace >= minHeight;
+  const height = Math.max(
+    Math.min(maxHeight, isDropdownBelow ? bottomSpace : topSpace),
+    minHeight
+  );
+
+  const rightSpace = document.body.scrollWidth - dropdown.$sourceRect.right;
+  const leftSpace = dropdown.$sourceRect.left;
+  const isDropdownRight =
+    !dropdown.$autoPositionX ||
+    rightSpace > leftSpace ||
+    rightSpace >= dropdown.$width;
+
+  const dropdownStyle: CSSProperties = {
+    ...(isDropdownBelow
+      ? { top: topSpace + dropdown.$sourceRect.height }
+      : { bottom: bottomSpace + dropdown.$sourceRect.height }),
+    ...(isDropdownRight ? { left: leftSpace } : { right: rightSpace }),
+    width: dropdown.$width,
+    height,
+    minHeight,
+    maxHeight,
+    boxSizing: 'border-box',
+    ...dropdown.style,
+  };
+  return dropdownStyle;
+};
+
+export const Dropdown: FC<DropdownProps> = ({
+  children,
+  onClose,
+  ...props
+}) => {
+  const { createPortal } = usePortals();
+
+  const firstClick = useRef(true);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const style = useMemo(() => getDropdownStyle(props), [props]);
+
+  const onDocumentClick = useCallback(
+    (ev: MouseEvent) => {
+      if (firstClick.current) {
+        firstClick.current = false;
+        return;
+      }
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(ev.target as Node)
+      ) {
+        return onClose?.();
+      }
+    },
+    [onClose]
+  );
+
+  useEffect(() => {
+    if (containerRef.current) {
+      document.addEventListener('click', onDocumentClick);
+      return () => {
+        document.removeEventListener('click', onDocumentClick);
+      };
+    }
+  }, [onDocumentClick]);
+
+  const modalPortal = useMemo(
+    () =>
+      createPortal(
+        <styles.DropdownContainer ref={containerRef} {...props} style={style}>
+          {children}
+        </styles.DropdownContainer>
+      ),
+    [children, createPortal, props, style]
+  );
+
+  return <>{modalPortal}</>;
+};