@symply.io/basic-components 1.0.4 → 1.0.5

package/BasicTable/TableBody.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { BasicTableBodyProps } from "./types";
-declare const BasicTableBody: import("react").ForwardRefExoticComponent<BasicTableBodyProps & import("react").RefAttributes<HTMLDivElement>>;
-export default BasicTableBody;
+import { BasicTableBodyProps, KvProps } from "./types";
+declare const _default: import("react").ForwardRefExoticComponent<BasicTableBodyProps<KvProps, KvProps> & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/BasicTable/TableBody.js

@@ -14,8 +14,8 @@ import { forwardRef } from "react";
 import Grid from "@mui/material/Grid";
 import useTheme from "@mui/material/styles/useTheme";
 import TableBodyRow from "./TableBodyRow";
-var BasicTableBody = forwardRef(function (props, ref) {
-    var rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, noDataText = props.noDataText;
+function BasicTableBody(props, ref) {
+    var rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, noDataText = props.noDataText, onRowClick = props.onRowClick;
     var theme = useTheme();
     return (_jsx(Grid, __assign({ item: true, sx: {
             maxHeight: "41vh",
@@ -26,8 +26,8 @@ var BasicTableBody = forwardRef(function (props, ref) {
             "&::-webkit-scrollbar": {
                 width: forFrozen ? 0 : "initial"
             }
-        } }, { children: _jsx("div", __assign({ ref: ref }, { children: rows && rows.length > 0 ? (rows.map(function (row, index) {
-                return (_jsx(TableBodyRow, { row: row, rows: rows, forFrozen: forFrozen, columns: columns }, "BasicTable_".concat(index)));
+        } }, { children: _jsx("div", __assign({ ref: ref }, { children: rows.length > 0 ? (rows.map(function (row, index) {
+                return (_jsx(TableBodyRow, { row: row, rows: rows, forFrozen: forFrozen, columns: columns, onRowClick: onRowClick }, "BasicTable_".concat(index)));
             })) : (_jsx(Grid, __assign({ container: true, justifyContent: "space-around", alignItems: "center", wrap: "nowrap", sx: {
                     height: theme.spacing(7.5),
                     borderBottomWidth: "thin",
@@ -46,5 +46,5 @@ var BasicTableBody = forwardRef(function (props, ref) {
                         paddingLeft: theme.spacing(0.625),
                         paddingRight: theme.spacing(0.625)
                     } }, { children: noDataText })) }))) })) })));
-});
-export default BasicTableBody;
+}
+export default forwardRef(BasicTableBody);

package/BasicTable/TableBodyRow.d.ts

@@ -1,3 +1,3 @@
-import { BasicTableBodyRowProps } from "./types";
-declare function BasicTableBodyRow(props: BasicTableBodyRowProps): JSX.Element;
+import { BasicTableBodyRowProps, KvProps } from "./types";
+declare function BasicTableBodyRow<RowProps extends KvProps, ExtraProps extends KvProps>(props: BasicTableBodyRowProps<RowProps, ExtraProps>): JSX.Element;
 export default BasicTableBodyRow;

package/BasicTable/TableBodyRow.js

@@ -9,33 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, useMemo } from "react";
+import { cloneElement } from "react";
 import colorAlpha from "color-alpha";
 import Grid from "@mui/material/Grid";
 import useTheme from "@mui/material/styles/useTheme";
 function BasicTableBodyRow(props) {
-    var row = props.row, rows = props.rows, columns = props.columns, forFrozen = props.forFrozen;
-    var onRowClick = row.onRowClick, rawRow = __rest(row, ["onRowClick"]);
+    var row = props.row, rows = props.rows, columns = props.columns, forFrozen = props.forFrozen, onRowClick = props.onRowClick;
     var theme = useTheme();
-    var rawRows = useMemo(function () {
-        return rows.map(function (r) {
-            var newRow = __assign({}, r);
-            delete newRow.onRowClick;
-            return newRow;
-        });
-    }, [rows]);
     return (_jsx(Grid, __assign({ container: true, justifyContent: "space-evenly", alignItems: "center", wrap: "nowrap", sx: {
             height: theme.spacing(7.5),
             borderBottomWidth: "thin",
@@ -58,7 +39,7 @@ function BasicTableBodyRow(props) {
             }
         }, onClick: onRowClick
             ? function () {
-                onRowClick({ row: rawRow });
+                onRowClick(row);
             }
             : undefined }, { children: columns.map(function (col) {
             var accessor = col.accessor, Cell = col.Cell, _a = col.minWidth, minWidth = _a === void 0 ? "120px!important" : _a, width = col.width, _b = col.align, align = _b === void 0 ? "center" : _b;
@@ -67,7 +48,7 @@ function BasicTableBodyRow(props) {
                     width: width,
                     paddingLeft: theme.spacing(0.625),
                     paddingRight: theme.spacing(0.625)
-                } }, { children: cloneElement(Cell, { column: col, rows: rawRows, row: rawRow }) }), accessor));
+                } }, { children: cloneElement(Cell, { column: col, rows: rows, row: row }) }), accessor));
         }) })));
 }
 export default BasicTableBodyRow;

package/BasicTable/TableFooter.d.ts

@@ -1,3 +1,3 @@
-import { BasicTableFooterProps } from "./types";
-declare function BasicTableFooter(props: BasicTableFooterProps): JSX.Element;
+import { BasicTableFooterProps, KvProps } from "./types";
+declare function BasicTableFooter<RowProps extends KvProps, ExtraProps extends KvProps>(props: BasicTableFooterProps<RowProps, ExtraProps>): JSX.Element;
 export default BasicTableFooter;

package/BasicTable/TableHeader.d.ts

@@ -1,3 +1,3 @@
-import { BasicTableHeaderProps } from "./types";
-declare function BasicTableHeader(props: BasicTableHeaderProps): JSX.Element;
+import { BasicTableHeaderProps, KvProps } from "./types";
+declare function BasicTableHeader<RowProps extends KvProps, ExtraProps extends KvProps>(props: BasicTableHeaderProps<RowProps, ExtraProps>): JSX.Element;
 export default BasicTableHeader;

package/BasicTable/index.d.ts

@@ -1,5 +1,5 @@
-import { BasicTableProps } from "./types";
-declare function BasicTable(props: BasicTableProps): JSX.Element;
+import { BasicTableProps, KvProps } from "./types";
+declare function BasicTable<RowProps extends KvProps, ExtraProps extends KvProps>(props: BasicTableProps<RowProps, ExtraProps>): JSX.Element;
 export default BasicTable;
 export * from "./types";
 export { default as useTable } from "./useTable";

package/BasicTable/index.js

@@ -22,7 +22,7 @@ import TableHeader from "./TableHeader";
 import TableFooter from "./TableFooter";
 function BasicTable(props) {
     var _a;
-    var _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rows, rows = _c === void 0 ? [] : _c, _d = props.headers, headers = _d === void 0 ? [] : _d, _e = props.footers, footers = _e === void 0 ? [] : _e, _f = props.noDataText, noDataText = _f === void 0 ? "No Data!" : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rows, rows = _c === void 0 ? [] : _c, _d = props.headers, headers = _d === void 0 ? [] : _d, _e = props.footers, footers = _e === void 0 ? [] : _e, _f = props.noDataText, noDataText = _f === void 0 ? "No Data!" : _f, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onRowClick = props.onRowClick;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
     var fronzenColsCount = useMemo(function () { var _a; return (_a = columns.filter(function (col) { return col.canBeFrozen; })) === null || _a === void 0 ? void 0 : _a.length; }, [columns]);
@@ -63,7 +63,11 @@ function BasicTable(props) {
                             zIndex: 999,
                             backgroundColor: "Menu",
                             boxShadow: "6px 0 6px -4px rgba(0,0,0,0.15)"
-                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, columns: columns.filter(function (col) { return col.canBeFrozen; }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) { return footer.canBeFrozen; }) })] })) }))), _jsx(Grid, __assign({ item: true, style: {
+                        } }, { children: _jsxs(Grid, __assign({ container: true, direction: "column", justifyContent: "center" }, { children: [_jsx(TableHeader, { headers: headers.filter(function (header) { return header.canBeFrozen; }) }), _jsx(TableBody, { forFrozen: true, rows: rows, ref: fixedRef, onRowClick: onRowClick
+                                        ? function (row) {
+                                            onRowClick(row);
+                                        }
+                                        : undefined, columns: columns.filter(function (col) { return col.canBeFrozen; }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) { return footer.canBeFrozen; }) })] })) }))), _jsx(Grid, __assign({ item: true, style: {
                             width: "100%",
                             marginLeft: canFreeze ? frozenWidth || 0 : 0,
                             overflow: "auto"
@@ -71,7 +75,11 @@ function BasicTable(props) {
                                         return isUpMd ? !header.canBeFrozen : true;
                                     }) }), _jsx(TableBody, { rows: rows, ref: dynamicRef, noDataText: noDataText, columns: columns.filter(function (col) {
                                         return isUpMd ? !col.canBeFrozen : true;
-                                    }) }), _jsx(TableFooter, { footers: footers.filter(function (footer) {
+                                    }), onRowClick: onRowClick
+                                        ? function (row) {
+                                            onRowClick(row);
+                                        }
+                                        : undefined }), _jsx(TableFooter, { footers: footers.filter(function (footer) {
                                         return isUpMd ? !footer.canBeFrozen : true;
                                     }) })] })) }))] })) })) })));
 }

package/BasicTable/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement, CSSProperties } from "react";
+export declare type KvProps = Record<string, unknown>;
 interface SortByProps {
     id: string;
     desc: boolean;
@@ -6,7 +7,15 @@ interface SortByProps {
 interface InitialStateProps {
     sortBy?: SortByProps;
 }
-export interface IColumn {
+export interface SortingProps {
+    field: string;
+    isSorted?: boolean;
+    descending?: boolean;
+}
+export interface UseScrollProps {
+    canFreeze?: boolean;
+}
+export declare type ColumnBaseProps = {
     Header: ReactElement;
     headerTip?: string;
     Body: ReactElement;
@@ -17,63 +26,55 @@ export interface IColumn {
     canBeFrozen?: boolean;
     minWidth?: number;
     width?: number;
-    [name: string]: any;
-}
-interface IHeader extends IColumn {
+};
+export declare type UseTableBaseProps<RowProps extends KvProps> = {
+    data: Array<RowProps>;
+    columns: Array<ColumnBaseProps>;
+    initialState?: InitialStateProps;
+    disableSortBy?: boolean;
+    onSort?: (props: SortingProps) => unknown;
+};
+export declare type UseTableProps<RowProps extends KvProps, ExtraProps extends KvProps> = UseTableBaseProps<RowProps> & ExtraProps;
+export declare type HeaderProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnBaseProps & Omit<UseTableProps<RowProps, ExtraProps>, keyof UseTableBaseProps<RowProps>> & {
     Cell: ReactElement;
     title: string;
     canSort?: boolean;
     onSort: (props: SortingProps) => unknown;
-}
-interface IFooter extends IColumn {
+};
+export declare type FooterProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnBaseProps & Omit<UseTableProps<RowProps, ExtraProps>, keyof UseTableBaseProps<RowProps>> & {
     Cell: ReactElement;
-}
-interface IBodyColumn extends IColumn {
+};
+export declare type ColumnProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnBaseProps & Omit<UseTableProps<RowProps, ExtraProps>, keyof UseTableBaseProps<RowProps>>;
+export declare type ColumnWithCellProps<RowProps extends KvProps, ExtraProps extends KvProps> = ColumnProps<RowProps, ExtraProps> & {
     Cell: ReactElement;
+};
+export declare type UserTableReturns<RowProps extends KvProps, ExtraProps extends KvProps> = {
+    headers: Array<HeaderProps<RowProps, ExtraProps>>;
+    footers: Array<FooterProps<RowProps, ExtraProps>>;
+    columns: Array<ColumnWithCellProps<RowProps, ExtraProps>>;
+    rows: Array<RowProps>;
+};
+export interface BasicTableHeaderProps<RowProps extends KvProps, ExtraProps extends KvProps> {
+    headers: Array<HeaderProps<RowProps, ExtraProps>>;
 }
-export interface IRow {
-    [name: string]: any;
-}
-interface RowClickProps {
-    onRowClick?: (props: {
-        row: IRow;
-    }) => unknown;
-}
-export interface SortingProps {
-    field: string;
-    isSorted?: boolean;
-    descending?: boolean;
-}
-export interface UseTableProps extends RowClickProps {
-    data: Array<IRow>;
-    columns: Array<IColumn>;
-    initialState?: InitialStateProps;
-    disableSortBy?: boolean;
-    onSort?: (props: SortingProps) => unknown;
-    [name: string]: any;
-}
-export interface UseScrollProps {
-    canFreeze?: boolean;
-}
-export interface BasicTableHeaderProps {
-    headers: Array<IHeader>;
-}
-export interface BasicTableFooterProps {
-    footers: Array<IFooter>;
+export interface BasicTableFooterProps<RowProps extends KvProps, ExtraProps extends KvProps> {
+    footers: Array<FooterProps<RowProps, ExtraProps>>;
 }
-export interface BasicTableBodyProps {
-    columns: Array<IBodyColumn>;
-    rows: Array<IRow & RowClickProps>;
+export interface BasicTableBodyProps<RowProps extends KvProps, ExtraProps extends KvProps> {
+    columns: Array<ColumnWithCellProps<RowProps, ExtraProps>>;
+    rows: Array<RowProps>;
     noDataText?: string;
     forFrozen?: boolean;
+    onRowClick?: (row: RowProps) => unknown;
 }
-export interface BasicTableBodyRowProps {
-    columns: Array<IBodyColumn>;
-    rows: Array<IRow & RowClickProps>;
-    row: IRow & RowClickProps;
+export interface BasicTableBodyRowProps<RowProps extends KvProps, ExtraProps extends KvProps> {
+    columns: Array<ColumnWithCellProps<RowProps, ExtraProps>>;
+    rows: Array<RowProps>;
+    row: RowProps;
     forFrozen?: boolean;
+    onRowClick?: (row: RowProps) => unknown;
 }
-export declare type BasicTableProps = BasicTableHeaderProps & Omit<BasicTableBodyProps, "forFrozen"> & Partial<BasicTableFooterProps> & {
+export declare type BasicTableProps<RowProps extends KvProps, ExtraProps extends KvProps> = BasicTableHeaderProps<RowProps, ExtraProps> & Omit<BasicTableBodyProps<RowProps, ExtraProps>, "forFrozen"> & Partial<BasicTableFooterProps<RowProps, ExtraProps>> & {
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 };

package/BasicTable/useTable.d.ts

@@ -1,51 +1,3 @@
-/// <reference types="react" />
-import { UseTableProps, SortingProps } from "./types";
-declare function useTable(props: UseTableProps): {
-    headers: {
-        Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        headerTip?: string | undefined;
-        Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-        align?: "left" | "right" | "center" | undefined;
-        accessor: string;
-        canSort: boolean | undefined;
-        canBeFrozen?: boolean | undefined;
-        minWidth?: number | undefined;
-        width?: number | undefined;
-        Cell: JSX.Element;
-        title: string;
-        onSort: ({ field }: Pick<SortingProps, "field">) => void;
-    }[];
-    footers: {
-        Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        headerTip?: string | undefined;
-        Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-        align?: "left" | "right" | "center" | undefined;
-        accessor: string;
-        canSort?: boolean | undefined;
-        canBeFrozen?: boolean | undefined;
-        minWidth?: number | undefined;
-        width?: number | undefined;
-        Cell: import("react").FunctionComponentElement<any>;
-    }[];
-    columns: {
-        Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        headerTip?: string | undefined;
-        Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-        Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-        align?: "left" | "right" | "center" | undefined;
-        accessor: string;
-        canSort?: boolean | undefined;
-        canBeFrozen?: boolean | undefined;
-        minWidth?: number | undefined;
-        width?: number | undefined;
-        Cell: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    }[];
-    rows: {
-        onRowClick: ((props: {
-            row: import("./types").IRow;
-        }) => unknown) | undefined;
-    }[];
-};
+import { UseTableProps, KvProps, UserTableReturns } from "./types";
+declare function useTable<T extends KvProps, F extends KvProps>(props: UseTableProps<T, F>): UserTableReturns<T, F>;
 export default useTable;

package/BasicTable/useTable.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useState, useMemo, useCallback } from "react";
 function useTable(props) {
-    var data = props.data, columns = props.columns, initialState = props.initialState, disableSortBy = props.disableSortBy, onSort = props.onSort, onRowClick = props.onRowClick, rest = __rest(props, ["data", "columns", "initialState", "disableSortBy", "onSort", "onRowClick"]);
+    var data = props.data, columns = props.columns, initialState = props.initialState, disableSortBy = props.disableSortBy, onSort = props.onSort, rest = __rest(props, ["data", "columns", "initialState", "disableSortBy", "onSort"]);
     if (!data) {
         throw new Error('"data" is required but got null or undefined');
     }
@@ -66,7 +66,7 @@ function useTable(props) {
         }
         return "↓";
     }, [sortingProps]);
-    var rows = useMemo(function () { return data.map(function (d) { return (__assign(__assign({}, d), { onRowClick: onRowClick })); }); }, [data]);
+    var rows = useMemo(function () { return data.map(function (d) { return (__assign({}, d)); }); }, [data]);
     var cols = useMemo(function () {
         return columns.map(function (col) {
             var Body = col.Body;

package/README.md

@@ -214,7 +214,7 @@ import { BasicTable, useTable } from '@symply.io/basic-components';
 import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable'; 
 ```
 
-<h5>Column Props (IColumn)</h5>
+<h5>Column Props (ColumnBaseProps)</h5>
 
 | Name        | Type                        | Default | Required | Description                                           |
 | ----------- | --------------------------- | ------- | -------- | ----------------------------------------------------- |
@@ -231,33 +231,33 @@ import BasicTable, { useTable } from '@symply.io/basic-components/BasicTable';
 
 <h5>Hook Props</h5>
 
-| Name          | Type                       | Default | Required | Description                                 |
-| ------------- | -------------------------- | ------- | -------- | ------------------------------------------- |
-| columns       | Array\<IColumn\>           |         | true     | table columns                               |
-| data          | Array<{ [name]: unknown }> |         | true     | table data/rows                             |
-| disableSortBy | bool                       |         | false    | If true, the whole table can't be sortable. |
-| initialState  | { sortBy?: SortByProps }   |         | false    | Set the initial states                      |
-| onRowClick    | func                       |         | false    | The function for row clicking.              |
-| onSort        | func                       |         | false    | The function for sorting rows.              |
+| Name          | Type                               | Default | Required | Description                                 |
+| ------------- | ---------------------------------- | ------- | -------- | ------------------------------------------- |
+| columns       | Array\<ColumnBaseProps\>           |         | true     | table columns                               |
+| data          | Array<{ [name: string]: unknown }> |         | true     | table data/rows                             |
+| disableSortBy | bool                               |         | false    | If true, the whole table can't be sortable. |
+| initialState  | { sortBy?: SortByProps }           |         | false    | Set the initial states                      |
+| onSort        | func                               |         | false    | The function for sorting rows.              |
 
 <h5>Hook Returns</h5>
 
-| Name    | Type                 | Description               |
-| ------- | -------------------- | ------------------------- |
-| headers | Array\<IHeader\>     | The cells for the header. |
-| columns | Array\<IBodyColumn\> | The cells for the body.   |
-| footers | Array\<IFooter>      | The cells for the footer. |
-| rows    | Array<IRow\>         | The rows for the table.   |
+| Name    | Type                         | Description               |
+| ------- | ---------------------------- | ------------------------- |
+| headers | Array\<HeaderProps\>         | The cells for the header. |
+| columns | Array\<ColumnWithCellProps\> | The cells for the body.   |
+| footers | Array\<FooterProps>          | The cells for the footer. |
+| rows    | Array<RowProps\>             | The rows for the table.   |
 
 <h5>Component Props</h5>
 
-| Name       | Type                 | Default    | Required | Description                               |
-| ---------- | -------------------- | ---------- | -------- | ----------------------------------------- |
-| headers    | Array\<IHeader\>     |            | true     | The cells for the header. (from the hook) |
-| columns    | Array\<IBodyColumn\> |            | true     | The cells for the body. (from the hook)   |
-| footers    | Array\<IFooter>      | []         | false    | The cells for the footer. (from the hook) |
-| noDataText | string               | 'No Data!' | false    | The text when no data rendered.           |
-| rows       | Array<IRow\>         |            | true     | The rows for the table. (from the hook)   |
+| Name       | Type                         | Default    | Required | Description                               |
+| ---------- | ---------------------------- | ---------- | -------- | ----------------------------------------- |
+| headers    | Array\<HeaderProps\>         |            | true     | The cells for the header. (from the hook) |
+| columns    | Array\<ColumnWithCellProps\> |            | true     | The cells for the body. (from the hook)   |
+| footers    | Array\<FooterProps>          | []         | false    | The cells for the footer. (from the hook) |
+| onRowClick | func                         |            | false    | The function for row clicking.            |
+| noDataText | string                       | 'No Data!' | false    | The text when no data rendered.           |
+| rows       | Array<RowProps\>             |            | true     | The rows for the table. (from the hook)   |
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",