@mailstep/design-system 0.7.22 → 0.7.23-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.22",
+  "version": "0.7.23-beta.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/Table/Table.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { ColumnDefinitions, DataRow } from './types';
+type Props = {
+    columnDefinitions: ColumnDefinitions;
+    data: DataRow[];
+    onRowClick?: (dataRow: DataRow) => void;
+};
+export declare const Table: FC<Props>;
+export {};

package/ui/Blocks/Table/Table.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table as TableComponent, Thead, Tr, Td, Th, Tbody } from '../../Elements/Table';
+export var Table = function (_a) {
+    var columnDefinitions = _a.columnDefinitions, data = _a.data, onRowClick = _a.onRowClick;
+    return (_jsxs(TableComponent, { children: [_jsx(Thead, { children: _jsx(Tr, { children: columnDefinitions.map(function (column) { return (_jsx(Th, { children: column.title })); }) }) }), _jsx(Tbody, { children: data.map(function (item) { return (_jsx(Tr, { onClick: function () { return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(item); }, cursor: onRowClick ? 'pointer' : 'auto', children: columnDefinitions.map(function (column) { return (_jsx(Td, { children: item[column.name] }, column.name)); }) }, item.id)); }) })] }));
+};

package/ui/Blocks/Table/index.d.ts

@@ -0,0 +1 @@
+export { Table } from './Table';

package/ui/Blocks/Table/index.js

@@ -0,0 +1 @@
+export { Table } from './Table';

package/ui/Blocks/Table/stories/Table.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare const meta: {
+    title: string;
+    component: import("react").FC<{
+        columnDefinitions: import("../types").ColumnDefinitions;
+        data: import("../types").DataRow[];
+        onRowClick?: ((dataRow: import("../types").DataRow) => void) | undefined;
+    }>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/ui/Blocks/Table/stories/Table.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Table } from '../';
+var meta = {
+    title: 'Blocks/Table',
+    component: Table,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+var columnDefinitions = [
+    { name: 'name', title: 'Name' },
+    { name: 'surname', title: 'Surname' },
+    { name: 'age', title: 'Age' }
+];
+var data = [
+    { id: 'id1', name: 'Fred', surname: 'Borow', age: 15 },
+    { id: 'id2', name: 'Karl', surname: 'Boxer', age: 25 },
+    { id: 'id3', name: 'Igor', surname: 'Laryngtown', age: 35 },
+];
+export var Default = function () { return (_jsx(Table, { columnDefinitions: columnDefinitions, data: data, onRowClick: function (dataRow) { return console.log(dataRow); } })); };

package/ui/Blocks/Table/types.d.ts

@@ -0,0 +1,8 @@
+export type ColumnDefinition = {
+    name: string;
+    title?: string;
+};
+export type DataRow = Record<string, unknown> & {
+    id: string;
+};
+export type ColumnDefinitions = ColumnDefinition[];

package/ui/Blocks/Table/types.js

@@ -0,0 +1 @@
+export {};