Merge pull request #4 from Staketab/dev

add table

ui/components/atoms/loader/constants.ts

@@ -0,0 +1,11 @@
+export const colorConfig = {
+    blue: [
+        'rgba(222, 229, 255, 1)',
+        'rgba(189, 204, 255, 1)',
+        'rgba(155, 178, 255, 1)',
+        'rgba(122, 153, 255, 1)',
+        'rgba(89, 127, 255, 1)',
+    ],
+};
+
+export const disabledColor = 'rgba(232, 233, 235, 1)';

ui/components/atoms/loader/index.ts

@@ -0,0 +1,2 @@
+export { default as Loader } from './loader';
+export { LoaderVariant } from './loader';

ui/components/atoms/loader/loader.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { colorConfig, disabledColor } from './constants';
+import loaderIcon from './loader.gif';
+import Image from 'next/image';
+
+export enum LoaderVariant {
+    CIRCLE = 'circle',
+    DOTS = 'dots',
+}
+
+type LoaderProps = {
+    label?: string;
+    disabled?: boolean;
+    dotCount?: number;
+    radius?: number;
+    gap?: number;
+    duration?: number;
+    variant?: LoaderVariant;
+};
+
+const Loader = ({
+    label,
+    disabled,
+    dotCount = 5,
+    radius = 3,
+    gap = 8,
+    duration = 2000,
+    variant = LoaderVariant.DOTS,
+}: LoaderProps): JSX.Element => {
+    const r = radius;
+    const g = gap;
+    const colors = colorConfig.blue;
+
+    const getCX = (r, g, i) => r + (r * 2 + g) * i;
+    const width = getCX(r, g, dotCount - 1) + r;
+
+    const getCircles = (count) => {
+        const arr = [];
+
+        for (let i = 0; i < count; i++) {
+            let values = [];
+            for (let index = 0; index < count * 2 - 1; index++) {
+                values.push(index < i || index > count + i - 1 ? 0 : 1);
+            }
+            values = [0, ...values, 0];
+            arr.push(
+                <circle
+                    cx={getCX(r, g, i)}
+                    cy={r}
+                    r={r}
+                    fill={!disabled ? colors[i] ?? colors.at(-1) : disabledColor}
+                    key={i}
+                >
+                    {!disabled && (
+                        <animate
+                            attributeName="opacity"
+                            begin="0s"
+                            dur={duration + 'ms'}
+                            values={values.join(';')}
+                            calcMode="linear"
+                            repeatCount="indefinite"
+                        />
+                    )}
+                </circle>
+            );
+        }
+        return arr;
+    };
+
+    if (variant === LoaderVariant.CIRCLE) {
+        return <Image src={loaderIcon} alt="...loading" width={32} height={32} />;
+    }
+
+    return (
+        <svg
+            height={r * 2}
+            width={width}
+            viewBox={`0 0 ${width} ${r * 2}`}
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label={label}
+        >
+            {getCircles(dotCount)}
+        </svg>
+    );
+};
+
+export default Loader;

ui/components/atoms/tableErrorMessage/TableErrorMessage.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import noDataIcon from './img/tablePlaceholder.svg';
+
+import styles from './index.module.css';
+import classNames from 'classnames';
+import Image from 'next/image';
+
+const TableErrorMessage = () => {
+    return (
+        <div className={classNames(styles.errorScreen, 'container')}>
+            <Image src={noDataIcon} alt="" />
+            <p className={classNames(styles.errorTitle, 't-inter-semi-bold')}>There is no data yet</p>
+        </div>
+    );
+};
+export default TableErrorMessage;

ui/components/atoms/tableErrorMessage/index.module.css

@@ -0,0 +1,52 @@
+.errorTitle {
+    margin: 16px 0 0px;
+    font-size: 16px;
+}
+
+.errorTitleWithBtn {
+    margin: 16px 0 8px;
+}
+
+.descriptionError {
+    margin-bottom: 20px;
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 14px;
+}
+
+.errorScreen {
+    padding: 48px 0 32px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.button {
+    margin-bottom: 16px;
+    font-size: 14px;
+    color: #597fff;
+    background-color: #eef1ff;
+    border: 1px solid #597fff;
+    border-radius: 7px;
+    padding: 10px 12px;
+    display: flex;
+    align-items: center;
+}
+
+.button:last-child {
+    margin: 0;
+}
+
+.button:hover {
+    background: #e8ecfa;
+    cursor: pointer;
+}
+
+.button:active {
+    background: #d7dffa;
+}
+
+.button svg {
+    margin-right: 4px;
+    fill: #597fff;
+}

ui/components/atoms/tableErrorMessage/index.ts

@@ -0,0 +1 @@
+export { default as TableErrorMessage } from './TableErrorMessage';

ui/components/molecules/selectPlate/SelectPlate.module.css

@@ -0,0 +1,81 @@
+.selectPlate {
+	width: max-content;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	cursor: pointer;
+	padding: 4px 12px;
+	user-select: none;
+	background-color: #f0f1f5;
+	border: 2px solid transparent;
+	border-radius: 7px;
+	transition: all ease 200ms;
+  }
+
+  .selectPlate * {
+	transition: all ease 200ms;
+  }
+
+  .selectPlate > * {
+	margin-right: 6px;
+  }
+
+  .selectPlate > *:last-child {
+	margin-right: 0;
+  }
+
+  .selectTitle {
+	font-weight: 600;
+	color: rgba(0, 0, 0, 0.8);
+	line-height: 24px;
+	text-transform: capitalize;
+	white-space: nowrap;
+  }
+
+  .selectCount {
+	font-weight: 500;
+	color: rgba(0, 0, 0, 0.8);
+	line-height: 16px;
+	text-align: center;
+	padding: 2px 8px;
+	border-radius: 30px;
+	background-color: #fff;
+  }
+
+  .selectClear {
+	display: flex;
+	align-items: center;
+	transition: all ease 200ms;
+  }
+
+  .selectClear:hover {
+	transform: scale(1.2);
+  }
+
+  .arrow {
+	fill: rgba(0, 0, 0, 0.8);
+	transform: rotateX(180deg);
+  }
+
+  .arrowDisabled {
+	fill: rgba(0, 0, 0, 0.4);
+  }
+
+  .expanded {
+	border: 2px solid #ebebf0;
+  }
+
+  .active {
+	border: 2px solid #e3e8fd;
+	background-color: #eef1ff;
+  }
+
+  .active span {
+	color: #3e66ec;
+  }
+
+  .active svg {
+	fill: #3e66ec;
+  }
+
+

ui/components/molecules/selectPlate/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import style from './SelectPlate.module.css';
+import ArrowIcon from './img/Arrow.svg';
+import classNames from 'classnames';
+import Image from 'next/image';
+
+type SelectPlateProps = {
+    onClick: () => void;
+    expanded: boolean;
+    title: string;
+    disable: boolean;
+};
+
+const SelectPlate = ({ onClick, expanded, title, disable }: SelectPlateProps): JSX.Element => {
+    return (
+        <div className={classNames(style.selectPlate, expanded && style.expanded)} onClick={!disable ? onClick : null}>
+            <span className={classNames('t-inter-semi-bold', style.selectTitle)}>{title}</span>
+            <Image
+                src={ArrowIcon}
+                alt=""
+                style={{ transform: !expanded ? 'rotateX(0deg)' : '' }}
+                className={classNames(style.arrow, disable && style.arrowDisabled)}
+            />
+        </div>
+    );
+};
+
+export default SelectPlate;

ui/components/molecules/singleSelect/SingleSelect.module.css

@@ -0,0 +1,19 @@
+.singleSelect {
+    position: relative;
+}
+
+.dropdown {
+    padding: 0;
+    border-radius: 7px;
+    width: 100%;
+}
+
+.item {
+    padding: 6px 12px;
+    transition: all ease 200ms;
+    cursor: pointer;
+}
+
+.item:hover {
+    background-color: var(--col--gray3);
+}

ui/components/molecules/singleSelect/index.tsx

@@ -0,0 +1 @@
+export { default as SingleSelect } from './singleSelect';