@addev-be/ui 0.12.3 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/Icons.tsx

@@ -79,6 +79,10 @@ export const LoadingIcon: FC<IconFCProps> = ({ className, ...props }) => (
   <SpinnerIcon className={`animate-spin ${className}`} {...props} />
 );
 
+export const BlankIcon: FC<IconFCProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} />
+);
+
 export {
   AngleLeftIcon,
   AngleRightIcon,

package/src/components/forms/Form/Checkbox.tsx

@@ -0,0 +1,13 @@
+import { FC, InputHTMLAttributes } from 'react';
+
+import { InputContainerProps } from './types';
+import { InputWithLabel } from './InputWithLabel';
+import { StyledCheckbox } from './styles';
+
+export const Checkbox: FC<
+  InputContainerProps & InputHTMLAttributes<HTMLInputElement>
+> = ({ label, icon, ...props }) => (
+  <InputWithLabel label={label} icon={icon}>
+    <StyledCheckbox {...props} />
+  </InputWithLabel>
+);

package/src/components/forms/Form/FormGroup.tsx

@@ -0,0 +1,27 @@
+import { FC, PropsWithChildren } from 'react';
+import { FormGroupContainer, FormGroupHeader } from './styles';
+
+import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider';
+
+type FormGroupProps = PropsWithChildren<{
+  color?: ThemeColorWithIntensity;
+  title?: string;
+  subTitle?: string;
+}>;
+
+export const FormGroup: FC<FormGroupProps> = ({
+  children,
+  color,
+  title,
+  subTitle,
+}) => (
+  <FormGroupContainer color={color}>
+    {(title || subTitle) && (
+      <FormGroupHeader>
+        {title && <h3>{title}</h3>}
+        {subTitle && <h4>{subTitle}</h4>}
+      </FormGroupHeader>
+    )}
+    {children}
+  </FormGroupContainer>
+);

package/src/components/forms/Form/Input.tsx

@@ -0,0 +1,13 @@
+import { FC, InputHTMLAttributes } from 'react';
+
+import { InputContainerProps } from './types';
+import { InputWithLabel } from './InputWithLabel';
+import { StyledInput } from './styles';
+
+export const Input: FC<
+  InputContainerProps & InputHTMLAttributes<HTMLInputElement>
+> = ({ label, icon, ...props }) => (
+  <InputWithLabel label={label} icon={icon}>
+    <StyledInput {...props} />
+  </InputWithLabel>
+);

package/src/components/forms/Form/InputWithLabel.tsx

@@ -0,0 +1,18 @@
+import { InputContainer } from './styles';
+import { InputContainerProps } from './types';
+
+export const InputWithLabel = ({
+  label,
+  icon: Icon,
+  children,
+}: InputContainerProps) => (
+  <InputContainer>
+    {(label || Icon) && (
+      <span>
+        {Icon && <Icon />}
+        {label}
+      </span>
+    )}
+    {children}
+  </InputContainer>
+);

package/src/components/forms/Form/Select.tsx

@@ -0,0 +1,49 @@
+import { InputContainerProps } from './types';
+import { InputWithLabel } from './InputWithLabel';
+import { SelectHTMLAttributes } from 'react';
+import { StyledSelect } from './styles';
+
+type SelectProps<T> = {
+  items: T[];
+  itemKey: keyof T | ((item: T, index: number) => string);
+  itemLabel: keyof T | ((item: T, index: number) => string);
+  readOnly?: boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const Select = <T,>({
+  icon,
+  label,
+  items,
+  itemKey,
+  itemLabel,
+  readOnly,
+  ...props
+}: InputContainerProps &
+  SelectProps<T> &
+  SelectHTMLAttributes<HTMLSelectElement>) => {
+  const keyGetter =
+    typeof itemKey === 'function'
+      ? itemKey
+      : (item: T) => String(item[itemKey]);
+  const labelGetter =
+    typeof itemLabel === 'function'
+      ? itemLabel
+      : (item: T) => String(item[itemLabel]);
+
+  return (
+    <InputWithLabel label={label} icon={icon}>
+      <StyledSelect {...props} disabled={readOnly}>
+        {items.map((item, index) => {
+          const key = keyGetter(item, index);
+          const label = labelGetter(item, index);
+          return (
+            <option key={key} value={key}>
+              {label}
+            </option>
+          );
+        })}
+      </StyledSelect>
+    </InputWithLabel>
+  );
+};

package/src/components/forms/Form/TextArea.tsx

@@ -0,0 +1,13 @@
+import { FC, TextareaHTMLAttributes } from 'react';
+
+import { InputContainerProps } from './types';
+import { InputWithLabel } from './InputWithLabel';
+import { StyledTextArea } from './styles';
+
+export const TextArea: FC<
+  InputContainerProps & TextareaHTMLAttributes<HTMLTextAreaElement>
+> = ({ label, icon, ...props }) => (
+  <InputWithLabel label={label} icon={icon}>
+    <StyledTextArea {...props} />
+  </InputWithLabel>
+);

package/src/components/forms/Form/index.tsx

@@ -0,0 +1,37 @@
+import { FC, PropsWithChildren, useCallback } from 'react';
+
+import { Checkbox } from './Checkbox';
+import { FormGroup } from './FormGroup';
+import { Input } from './Input';
+import { Select } from './Select';
+import { TextArea } from './TextArea';
+
+export type FormProps = PropsWithChildren<{
+  onSubmit?: () => void;
+}>;
+
+export type FormFC = FC<FormProps> & {
+  Group: typeof FormGroup;
+  Input: typeof Input;
+  Select: typeof Select;
+  Checkbox: typeof Checkbox;
+  TextArea: typeof TextArea;
+};
+
+export const Form = ({ children, onSubmit }: FormProps) => {
+  const handleSubmit = useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      onSubmit?.();
+    },
+    [onSubmit]
+  );
+
+  return <form onSubmit={handleSubmit}>{children}</form>;
+};
+
+Form.Group = FormGroup;
+Form.Input = Input;
+Form.Select = Select;
+Form.Checkbox = Checkbox;
+Form.TextArea = TextArea;

package/src/components/forms/Form/styles.ts

@@ -0,0 +1,105 @@
+import styled, { css } from 'styled-components';
+
+import { ThemeColorWithIntensity } from '../../../providers/ThemeProvider';
+import { getColor } from '../../../providers/ThemeProvider/helpers';
+
+export const FormGroupContainer = styled.fieldset<{
+  color?: ThemeColorWithIntensity;
+}>`
+  display: flex;
+  flex-direction: column;
+  background: ${({ color = 'neutral-100' }) =>
+    `linear-gradient(180deg, var(--color-${getColor(
+      color
+    )}-200) 0%, var(--color-neutral-100) var(--space-10))`};
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-4);
+  margin: 0;
+  border: 1px solid var(--color-neutral-100);
+  gap: var(--space-2);
+  border-left: 4px solid ${({ color = 'neutral' }) => `var(--color-${color})`};
+`;
+
+export const FormGroupHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  margin-bottom: var(--space-1);
+
+  & > h3 {
+    margin: 0;
+    font-size: var(--text-lg);
+    font-weight: bold;
+  }
+  & > h4 {
+    margin: 0;
+    font-size: var(--text-sm);
+    font-weight: var(--font-normal);
+    color: var(--color-neutral-500);
+  }
+`;
+
+export const InputContainer = styled.label<{ readOnly?: boolean }>`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  border: 1px solid var(--color-neutral-200);
+  background-color: ${({ readOnly }) =>
+    readOnly ? 'var(--color-neutral-50)' : 'var(--color-neutral-0)'};
+
+  & > span {
+    color: var(--color-neutral-500);
+    font-size: var(--text-base);
+    padding: var(--space-1);
+    display: flex;
+    flex-direction: row;
+    gap: var(--space-2);
+    line-height: 1.25;
+
+    & > svg {
+      width: var(--space-4);
+      height: var(--space-4);
+      fill: var(--color-neutral-500);
+      flex-shrink: 0;
+    }
+  }
+
+  &:focus-within {
+    outline: 2px solid var(--color-primary-500);
+  }
+`;
+
+const inputCss = css`
+  font-family: inherit;
+  font-size: var(--text-base);
+  color: var(--color-neutral-900);
+  border: none;
+  padding: var(--space-1);
+  flex: 1;
+  text-align: right;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export const StyledInput = styled.input`
+  ${inputCss}
+`;
+
+export const StyledSelect = styled.select`
+  ${inputCss}
+`;
+
+export const StyledTextArea = styled.textarea`
+  ${inputCss}
+  resize: none;
+`;
+
+export const StyledCheckbox = styled.input.attrs({ type: 'checkbox' })`
+  width: var(--space-4);
+  height: var(--space-4);
+`;

package/src/components/forms/Form/types.ts

@@ -0,0 +1,7 @@
+import { IconFC } from '../../../Icons';
+import { PropsWithChildren } from 'react';
+
+export type InputContainerProps = PropsWithChildren<{
+  label?: string;
+  icon?: IconFC;
+}>;

package/src/components/forms/index.ts

@@ -3,4 +3,6 @@ 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/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/Grid/index.tsx

@@ -0,0 +1,8 @@
+import { GridContainer, GridItemContainer } from './styles';
+
+type GridFC = typeof GridContainer & {
+  Item: typeof GridItemContainer;
+};
+
+export const Grid = GridContainer as GridFC;
+Grid.Item = GridItemContainer;

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

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+type GridProps = {
+  columns?: number;
+};
+
+export const GridContainer = styled.div<GridProps>`
+  display: grid;
+  grid-template-columns: repeat(
+    ${({ columns = 12 }) => columns},
+    minmax(0, 1fr)
+  );
+  grid-template-rows: masonry;
+`;
+
+type GridItemProps = {
+  row?: number;
+  col?: number;
+  rowSpan?: number;
+  colSpan?: number;
+};
+
+export const GridItemContainer = styled.div.attrs<GridItemProps>(
+  ({ col, colSpan, row, rowSpan }) => ({
+    style: {
+      gridColumn: [col, !!colSpan && `span ${colSpan}`]
+        .filter(Boolean)
+        .join(' / '),
+      gridRow: [row, !!rowSpan && `span ${rowSpan}`]
+        .filter(Boolean)
+        .join(' / '),
+    },
+  })
+)``;

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

@@ -0,0 +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>
+  );
+};

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

@@ -0,0 +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);
+`;

package/src/components/layout/index.ts

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

package/src/providers/ThemeProvider/helpers.ts

@@ -0,0 +1,11 @@
+import { ThemeColorWithIntensity } from './types';
+
+export const getColor = (colorWithIntensity: ThemeColorWithIntensity) => {
+  const [colorName] = colorWithIntensity.split('-');
+  return colorName;
+};
+
+export const getIntensity = (colorWithIntensity: ThemeColorWithIntensity) => {
+  const [, intensity] = colorWithIntensity.split('-');
+  return intensity;
+};