@cyber-harbour/ui 1.0.18 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/IconComponents/BallsMenu.tsx

@@ -0,0 +1,15 @@
+import { SVGProps } from 'react';
+
+interface InfoCircleIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const BallsMenu = ({ fill = 'currentColor', ...props }: InfoCircleIconProps) => {
+  return (
+    <svg viewBox="0 0 16 3" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <ellipse cx="1.56746" cy="1.5" rx="1.53633" ry="1.5" fill={fill} />
+      <ellipse cx="7.71278" cy="1.5" rx="1.53633" ry="1.5" fill={fill} />
+      <ellipse cx="13.8581" cy="1.5" rx="1.53633" ry="1.5" fill={fill} />
+    </svg>
+  );
+};

package/src/Core/IconComponents/Check.tsx

@@ -0,0 +1,13 @@
+import { SVGProps } from 'react';
+
+interface InfoCircleIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const CheckIcon = ({ fill = 'currentColor', ...props }: InfoCircleIconProps) => {
+  return (
+    <svg viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M14.4983 1L5.34428 11L1.18338 6.45455" stroke={fill} stroke-width="1.5" stroke-linejoin="round" />;
+    </svg>
+  );
+};

package/src/Core/IconComponents/ChevronDown.tsx

@@ -0,0 +1,18 @@
+import { SVGProps } from 'react';
+
+interface ChevronRightIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const ChevronDownIcon = ({ fill = 'currentColor', ...props }: ChevronRightIconProps) => {
+  return (
+    <svg viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.4517 5.77798L16.4067 6.79197L10.8447 12.1899C10.0753 12.9367 8.82791 12.9367 8.05853 12.1899L2.49647 6.79197L1.45166 5.77798L3.54128 3.75L4.58609 4.76399L9.45161 9.48599L14.3172 4.76399L15.362 3.75L17.4517 5.77798Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/ChevronUp.tsx

@@ -0,0 +1,18 @@
+import { SVGProps } from 'react';
+
+interface ChevronRightIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const ChevronUpIcon = ({ fill = 'currentColor', ...props }: ChevronRightIconProps) => {
+  return (
+    <svg viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0.20166 10.722L1.24661 9.70803L6.80863 4.31012C7.57801 3.56329 8.82541 3.56329 9.59479 4.31012L15.1569 9.70803L16.2017 10.722L14.112 12.75L13.0672 11.736L8.20171 7.01401L3.33611 11.736L2.29136 12.75L0.20166 10.722Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -32,3 +32,7 @@ export { StatisticIcon } from './StatisticIcon';
 export { SunIcon } from './SunIcon';
 export { UpRightArrowCircleIcon } from './UpRightArrowCircleIcon';
 export { VectorIcon } from './VectorIcon';
+export { BallsMenu } from './BallsMenu';
+export { CheckIcon } from './Check';
+export { ChevronDownIcon } from './ChevronDown';
+export { ChevronUpIcon } from './ChevronUp';

package/src/Core/ListMenu/ListMenuSection.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { styled } from 'styled-components';
 
 export interface ListMenuSectionProps {
-  items: ReactNode | ReactNode[];
+  items: any;
   title?: string;
 }
 export const ListMenuSection = ({ title, items }: ListMenuSectionProps) => {

package/src/Core/Pagination/Pagination.tsx

@@ -16,7 +16,7 @@ const VISIBLE_GROUPE = 5;
 const STEP = 1;
 const ELLIPSIS = '...';
 
-export const Pagination: FC<PaginationProps> = ({ total_items, limit, offset, onChangePage }) => {
+export const Pagination = ({ total_items, limit, offset, onChangePage }: PaginationProps) => {
   const currentPage = useMemo(() => (offset ? offset / limit + 1 : 1), [limit, offset]);
   const pages = Math.ceil(total_items / limit);
   const paginationItems: (number | string)[] = useMemo(() => {

package/src/Core/Table/Table.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode, useMemo, CSSProperties } from 'react';
+import { ReactNode, useMemo, CSSProperties } from 'react';
 import { styled } from 'styled-components';
 import { Row } from './Row';
 import { Cell, HeadCell } from './Cell';
@@ -24,12 +24,12 @@ export type RenderHeaderCellProps<T = string> = {
 interface TableProps {
   columns: ColumnTable[];
   rowCount: number;
-  renderCell: (props: RenderCellProps<any>) => ReactNode;
-  renderHeaderCell: (props: RenderHeaderCellProps<any>) => ReactNode;
+  renderCell: (props: RenderCellProps<any>) => any;
+  renderHeaderCell: (props: RenderHeaderCellProps<any>) => any;
   rowIds?: string[];
 }
 
-export const Table: FC<TableProps> = ({ columns, rowCount, renderCell, renderHeaderCell, rowIds }) => {
+export const Table = ({ columns, rowCount, renderCell, renderHeaderCell, rowIds }: TableProps) => {
   const cellCount = columns.length;
 
   const data = useMemo(() => {
@@ -49,7 +49,7 @@ export const Table: FC<TableProps> = ({ columns, rowCount, renderCell, renderHea
 
   return (
     <StyledTable>
-      <thead>
+      <StyledHead>
         <Row>
           {columns.map(({ id, title, width }) => (
             <HeadCell
@@ -62,7 +62,7 @@ export const Table: FC<TableProps> = ({ columns, rowCount, renderCell, renderHea
             </HeadCell>
           ))}
         </Row>
-      </thead>
+      </StyledHead>
       <tbody>
         {data.map((cells, rowIndex) => (
           <Row key={`row-${rowIndex}`} id={rowIds ? rowIds[rowIndex] : `row-${rowIndex}`}>
@@ -83,3 +83,12 @@ const StyledTable = styled.table`
   border-spacing: 0;
   table-layout: fixed;
 `;
+
+const StyledHead = styled.thead(
+  ({ theme }) => `
+  background-color: ${theme.colors.background};
+  position: sticky;
+  top: 0;
+  z-index: 1;
+`
+);