@addev-be/ui 1.0.0 → 1.0.2

package/src/components/data/DataGrid/DataGridColumnsModal/styles.ts

@@ -1,104 +1,104 @@
-import styled, { css } from 'styled-components';
-
-export const Container = styled.div.attrs({
-  className: 'DataGridColumnsModal-Container',
-})`
-  display: flex;
-  flex-direction: row;
-  gap: var(--space-2);
-  overflow: auto;
-  font-size: var(--text-base);
-  height: 100%;
-`;
-
-export const Panel = styled.div.attrs({
-  className: 'DataGridColumnsModal-Panel',
-})`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-`;
-
-export const Title = styled.div.attrs({
-  className: 'DataGridColumnsModal-Title',
-})`
-  margin: 0;
-  margin-bottom: var(--space-2);
-  font-weight: bold;
-`;
-
-export const ColumnsList = styled.ul.attrs({
-  className: 'DataGridColumnsModal-ColumnsList',
-})`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: auto;
-  border: 1px solid var(--color-base-200);
-  margin: 0;
-  background-color: var(--color-base-50);
-
-  & > li:not(:last-child) {
-    border-bottom: 1px solid var(--color-base-100);
-  }
-`;
-
-export const ColumnItem = styled.li.attrs({
-  className: 'DataGridColumnsModal-ColumnItem',
-})<{
-  $visible?: boolean;
-}>`
-  padding: var(--space-1);
-  transition: background-color 0.2s;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--space-2);
-
-  span {
-    flex: 1;
-  }
-
-  button {
-    display: none;
-    padding: var(--space-1);
-    width: var(--space-6);
-    height: var(--space-6);
-    border-radius: var(--rounded-full);
-    background-color: var(--color-base-200);
-    border: none;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &:hover {
-    background-color: var(--color-base-100);
-    button {
-      display: flex;
-      background-color: var(--color-base-300);
-    }
-  }
-`;
-
-export const Buttons = styled.div.attrs({
-  className: 'DataGridColumnsModal-Buttons',
-})<{ $visible?: boolean }>`
-  display: flex;
-  gap: var(--space-1);
-  height: var(--space-6);
-  ${({ $visible }) =>
-    $visible
-      ? css`
-          width: var(--space-24);
-          justify-content: flex-end;
-        `
-      : css`
-          width: var(--space-6);
-        `}
-
-  svg {
-    width: var(--space-4);
-    height: var(--space-4);
-  }
-`;
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div.attrs({
+  className: 'DataGridColumnsModal-Container',
+})`
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-2);
+  overflow: auto;
+  font-size: var(--text-base);
+  height: 100%;
+`;
+
+export const Panel = styled.div.attrs({
+  className: 'DataGridColumnsModal-Panel',
+})`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
+export const Title = styled.div.attrs({
+  className: 'DataGridColumnsModal-Title',
+})`
+  margin: 0;
+  margin-bottom: var(--space-2);
+  font-weight: bold;
+`;
+
+export const ColumnsList = styled.ul.attrs({
+  className: 'DataGridColumnsModal-ColumnsList',
+})`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: auto;
+  border: 1px solid var(--color-base-200);
+  margin: 0;
+  background-color: var(--color-base-50);
+
+  & > li:not(:last-child) {
+    border-bottom: 1px solid var(--color-base-100);
+  }
+`;
+
+export const ColumnItem = styled.li.attrs({
+  className: 'DataGridColumnsModal-ColumnItem',
+})<{
+  $visible?: boolean;
+}>`
+  padding: var(--space-1);
+  transition: background-color 0.2s;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2);
+
+  span {
+    flex: 1;
+  }
+
+  button {
+    display: none;
+    padding: var(--space-1);
+    width: var(--space-6);
+    height: var(--space-6);
+    border-radius: var(--rounded-full);
+    background-color: var(--color-base-200);
+    border: none;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &:hover {
+    background-color: var(--color-base-100);
+    button {
+      display: flex;
+      background-color: var(--color-base-300);
+    }
+  }
+`;
+
+export const Buttons = styled.div.attrs({
+  className: 'DataGridColumnsModal-Buttons',
+})<{ $visible?: boolean }>`
+  display: flex;
+  gap: var(--space-1);
+  height: var(--space-6);
+  ${({ $visible }) =>
+    $visible
+      ? css`
+          width: var(--space-24);
+          justify-content: flex-end;
+        `
+      : css`
+          width: var(--space-6);
+        `}
+
+  svg {
+    width: var(--space-4);
+    height: var(--space-4);
+  }
+`;

package/src/components/data/DataGrid/DataGridEditableCell/CheckboxEditableCell.tsx

@@ -1,38 +1,38 @@
-import { ForwardedRef, forwardRef, useCallback } from 'react';
-
-import { DataGridEditableCellProps } from './types';
-
-const CheckboxEditableCellInner = <R,>(
-  { value, onChange, onClose }: DataGridEditableCellProps<R, boolean>,
-  ref: ForwardedRef<HTMLInputElement>
-) => {
-  const onBlur = useCallback(() => {
-    onClose(true);
-  }, [onClose]);
-
-  const onKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        onClose(true);
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        onClose(false);
-      }
-    },
-    [onClose]
-  );
-
-  return (
-    <input
-      ref={ref}
-      type="checkbox"
-      checked={value}
-      onChange={(e) => onChange(e.target.checked)}
-      onBlur={onBlur}
-      onKeyDown={onKeyDown}
-    />
-  );
-};
-
-export const CheckboxEditableCell = forwardRef(CheckboxEditableCellInner);
+import { ForwardedRef, forwardRef, useCallback } from 'react';
+
+import { DataGridEditableCellProps } from './types';
+
+const CheckboxEditableCellInner = <R,>(
+  { value, onChange, onClose }: DataGridEditableCellProps<R, boolean>,
+  ref: ForwardedRef<HTMLInputElement>
+) => {
+  const onBlur = useCallback(() => {
+    onClose(true);
+  }, [onClose]);
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onClose(true);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose(false);
+      }
+    },
+    [onClose]
+  );
+
+  return (
+    <input
+      ref={ref}
+      type="checkbox"
+      checked={value}
+      onChange={(e) => onChange(e.target.checked)}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+    />
+  );
+};
+
+export const CheckboxEditableCell = forwardRef(CheckboxEditableCellInner);

package/src/components/data/DataGrid/DataGridEditableCell/DateEditableCell.tsx

@@ -1,39 +1,39 @@
-import { ForwardedRef, forwardRef, useCallback } from 'react';
-
-import { DataGridEditableCellProps } from './types';
-import moment from 'moment';
-
-const DateEditableCellInner = <R,>(
-  { value, onChange, onClose }: DataGridEditableCellProps<R, string>,
-  ref: ForwardedRef<HTMLInputElement>
-) => {
-  const onBlur = useCallback(() => {
-    onClose(true);
-  }, [onClose]);
-
-  const onKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        onClose(true);
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        onClose(false);
-      }
-    },
-    [onClose]
-  );
-
-  return (
-    <input
-      ref={ref}
-      type="date"
-      value={moment(value).format('YYYY-MM-DD')}
-      onChange={(e) => onChange(e.target.value)}
-      onBlur={onBlur}
-      onKeyDown={onKeyDown}
-    />
-  );
-};
-
-export const DateEditableCell = forwardRef(DateEditableCellInner);
+import { ForwardedRef, forwardRef, useCallback } from 'react';
+
+import { DataGridEditableCellProps } from './types';
+import moment from 'moment';
+
+const DateEditableCellInner = <R,>(
+  { value, onChange, onClose }: DataGridEditableCellProps<R, string>,
+  ref: ForwardedRef<HTMLInputElement>
+) => {
+  const onBlur = useCallback(() => {
+    onClose(true);
+  }, [onClose]);
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onClose(true);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose(false);
+      }
+    },
+    [onClose]
+  );
+
+  return (
+    <input
+      ref={ref}
+      type="date"
+      value={moment(value).format('YYYY-MM-DD')}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+    />
+  );
+};
+
+export const DateEditableCell = forwardRef(DateEditableCellInner);

package/src/components/data/DataGrid/DataGridEditableCell/NumberEditableCell.tsx

@@ -1,75 +1,75 @@
-import { ForwardedRef, forwardRef, useCallback } from 'react';
-import {
-  decimalSeparator,
-  getCurrencySymbol,
-  parseNumber,
-} from '../../../../helpers/numbers';
-
-import { DataGridEditableCellProps } from './types';
-import { NumericFormat } from 'react-number-format';
-
-const NumberEditableCellInner = <R,>(
-  {
-    decimals = 0,
-    currency,
-    prefix: prefixFromProps,
-    suffix: suffixFromProps,
-    row,
-    value,
-    onChange,
-    onClose,
-  }: DataGridEditableCellProps<R, number> & {
-    decimals?: number;
-    currency?: string | ((row: R) => string);
-    prefix?: string;
-    suffix?: string;
-  },
-  ref: ForwardedRef<HTMLElement>
-) => {
-  const currencyName =
-    typeof currency === 'function' ? currency(row) : currency;
-
-  const [prefixFromCurrency, suffixFromCurrency] = currencyName
-    ? getCurrencySymbol(currencyName)
-    : [undefined, undefined];
-
-  const prefix = prefixFromProps || prefixFromCurrency;
-  const suffix = suffixFromProps || suffixFromCurrency;
-
-  const onBlur = useCallback(() => {
-    onClose(true);
-  }, [onClose]);
-
-  const onKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        onClose(true);
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        onClose(false);
-      }
-    },
-    [onClose]
-  );
-
-  return (
-    <NumericFormat
-      getInputRef={ref}
-      value={Number(value)}
-      onChange={(e) => {
-        console.log('e:', e);
-        onChange(parseNumber(e.target.value));
-      }}
-      onBlur={onBlur}
-      onKeyDown={onKeyDown}
-      decimalSeparator={decimalSeparator}
-      decimalScale={decimals}
-      fixedDecimalScale={!!decimals}
-      prefix={prefix ? prefix + ' ' : undefined}
-      suffix={suffix ? ' ' + suffix : undefined}
-    />
-  );
-};
-
-export const NumberEditableCell = forwardRef(NumberEditableCellInner);
+import { ForwardedRef, forwardRef, useCallback } from 'react';
+import {
+  decimalSeparator,
+  getCurrencySymbol,
+  parseNumber,
+} from '../../../../helpers/numbers';
+
+import { DataGridEditableCellProps } from './types';
+import { NumericFormat } from 'react-number-format';
+
+const NumberEditableCellInner = <R,>(
+  {
+    decimals = 0,
+    currency,
+    prefix: prefixFromProps,
+    suffix: suffixFromProps,
+    row,
+    value,
+    onChange,
+    onClose,
+  }: DataGridEditableCellProps<R, number> & {
+    decimals?: number;
+    currency?: string | ((row: R) => string);
+    prefix?: string;
+    suffix?: string;
+  },
+  ref: ForwardedRef<HTMLElement>
+) => {
+  const currencyName =
+    typeof currency === 'function' ? currency(row) : currency;
+
+  const [prefixFromCurrency, suffixFromCurrency] = currencyName
+    ? getCurrencySymbol(currencyName)
+    : [undefined, undefined];
+
+  const prefix = prefixFromProps || prefixFromCurrency;
+  const suffix = suffixFromProps || suffixFromCurrency;
+
+  const onBlur = useCallback(() => {
+    onClose(true);
+  }, [onClose]);
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onClose(true);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose(false);
+      }
+    },
+    [onClose]
+  );
+
+  return (
+    <NumericFormat
+      getInputRef={ref}
+      value={Number(value)}
+      onChange={(e) => {
+        console.log('e:', e);
+        onChange(parseNumber(e.target.value));
+      }}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+      decimalSeparator={decimalSeparator}
+      decimalScale={decimals}
+      fixedDecimalScale={!!decimals}
+      prefix={prefix ? prefix + ' ' : undefined}
+      suffix={suffix ? ' ' + suffix : undefined}
+    />
+  );
+};
+
+export const NumberEditableCell = forwardRef(NumberEditableCellInner);

package/src/components/data/DataGrid/DataGridEditableCell/TextEditableCell.tsx

@@ -1,38 +1,38 @@
-import { Ref, forwardRef, useCallback } from 'react';
-
-import { DataGridEditableCellProps } from './types';
-
-const TextEditableCellInner = <R,>(
-  { value, onChange, onClose }: DataGridEditableCellProps<R, string>,
-  ref: Ref<HTMLInputElement>
-) => {
-  const onBlur = useCallback(() => {
-    onClose(true);
-  }, [onClose]);
-
-  const onKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        onClose(true);
-      } else if (e.key === 'Escape') {
-        e.preventDefault();
-        onClose(false);
-      }
-    },
-    [onClose]
-  );
-
-  return (
-    <input
-      ref={ref}
-      type="text"
-      value={String(value)}
-      onChange={(e) => onChange(e.target.value)}
-      onBlur={onBlur}
-      onKeyDown={onKeyDown}
-    />
-  );
-};
-
-export const TextEditableCell = forwardRef(TextEditableCellInner);
+import { Ref, forwardRef, useCallback } from 'react';
+
+import { DataGridEditableCellProps } from './types';
+
+const TextEditableCellInner = <R,>(
+  { value, onChange, onClose }: DataGridEditableCellProps<R, string>,
+  ref: Ref<HTMLInputElement>
+) => {
+  const onBlur = useCallback(() => {
+    onClose(true);
+  }, [onClose]);
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onClose(true);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose(false);
+      }
+    },
+    [onClose]
+  );
+
+  return (
+    <input
+      ref={ref}
+      type="text"
+      value={String(value)}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+    />
+  );
+};
+
+export const TextEditableCell = forwardRef(TextEditableCellInner);