@sebgroup/green-react 3.17.0 → 3.19.0

package/src/lib/table/components/parts/helperFunctions/index.js

@@ -0,0 +1,3 @@
+export { filterArrayByColumns, onRowSelect, paginate, searchTextByColumns, sortArray, sumCols } from './helperFunctions.js';
+import '../../../../../../_rollupPluginBabelHelpers.js';
+import '../../table-typings.js';

package/src/lib/table/components/table-typings.js

@@ -0,0 +1,7 @@
+var SortDirection;
+(function (SortDirection) {
+  SortDirection["ASC"] = "ASC";
+  SortDirection["DESC"] = "DESC";
+})(SortDirection || (SortDirection = {}));
+
+export { SortDirection };

package/src/lib/table/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/lib/table/index.js

@@ -0,0 +1,14 @@
+export { SortDirection } from './components/table-typings.js';
+export { TableContext, useTableContext } from './components/context/TableContextProvider.js';
+export { filterArrayByColumns, onRowSelect, paginate, searchTextByColumns, sortArray, sumCols } from './components/parts/helperFunctions/helperFunctions.js';
+export { TableCell } from './components/parts/TableCell/TableCell.js';
+export { TableBody } from './components/parts/TableBody/TableBody.js';
+export { TableHeader } from './components/parts/TableHeader/TableHeader.js';
+export { TableHeaderCell } from './components/parts/TableHeaderCell/TableHeaderCell.js';
+export { TableRow } from './components/parts/TableRow/TableRow.js';
+export { Table } from './components/Table.js';
+import 'react';
+import '../../../_rollupPluginBabelHelpers.js';
+import '../../../_tslib.js';
+import 'react/jsx-runtime';
+import 'classnames';

package/src/lib/table/story/multiple-story-tables.js

@@ -0,0 +1,205 @@
+import { _ as _slicedToArray } from '../../../../_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import '../components/table-typings.js';
+import { sortArray, onRowSelect } from '../components/parts/helperFunctions/helperFunctions.js';
+import { TableCell } from '../components/parts/TableCell/TableCell.js';
+import { TableBody } from '../components/parts/TableBody/TableBody.js';
+import { TableHeader } from '../components/parts/TableHeader/TableHeader.js';
+import { TableHeaderCell } from '../components/parts/TableHeaderCell/TableHeaderCell.js';
+import { TableRow } from '../components/parts/TableRow/TableRow.js';
+import { Table } from '../components/Table.js';
+import '../../../../_tslib.js';
+import 'classnames';
+import '../components/context/TableContextProvider.js';
+
+var columnData = [{
+  children: '#',
+  accessor: 'id'
+}, {
+  children: 'First name',
+  accessor: 'firstName'
+}, {
+  children: 'Last name',
+  accessor: 'lastName'
+}, {
+  children: 'Superhero',
+  accessor: 'superHero'
+}];
+var rowData = [{
+  id: '1',
+  firstName: 'Peter',
+  lastName: 'Parker',
+  superHero: 'Spider-man',
+  expanded: false,
+  checked: false,
+  rowContentDetails: [{
+    id: '1',
+    firstName: 'Peter',
+    lastName: 'Parker',
+    superHero: 'Spider-man'
+  }]
+}, {
+  id: '2',
+  firstName: 'John',
+  lastName: 'Wayne',
+  superHero: 'Batman',
+  expanded: false,
+  checked: false,
+  rowContentDetails: [{
+    id: '1',
+    firstName: 'Peter',
+    lastName: 'Parker',
+    superHero: 'Spider-man'
+  }]
+}, {
+  id: '3',
+  firstName: 'Bruce',
+  lastName: 'Banner',
+  superHero: 'Hulk',
+  expanded: false,
+  checked: false,
+  rowContentDetails: [{
+    id: '1',
+    firstName: 'Peter',
+    lastName: 'Parker',
+    superHero: 'Spider-man'
+  }]
+}];
+var SortableTable = function SortableTable() {
+  var _React$useState = React.useState(rowData),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    data = _React$useState2[0],
+    setData = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    sortedColumn = _React$useState4[0],
+    setSortedColumn = _React$useState4[1];
+  var onSort = function onSort(newSortedColumn) {
+    setSortedColumn(newSortedColumn);
+    newSortedColumn && setData(sortArray(data, newSortedColumn.accessor, newSortedColumn.sortDirection));
+  };
+  return jsxs(Table, {
+    sortedColumn: sortedColumn,
+    onSort: onSort,
+    children: [jsx(TableHeader, {
+      children: jsx(TableRow, {
+        children: columnData.map(function (column, i) {
+          return jsx(TableHeaderCell, Object.assign({}, column), i);
+        })
+      })
+    }), jsx(TableBody, {
+      children: data.map(function (item, i) {
+        return jsx(TableRow, {
+          children: columnData.map(function (column, columnIndex) {
+            return jsx(TableCell, {
+              children: item[column.accessor]
+            }, columnIndex);
+          })
+        }, i);
+      })
+    })]
+  });
+};
+var SelectableTable = function SelectableTable() {
+  var _React$useState5 = React.useState(rowData),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    data = _React$useState6[0],
+    setData = _React$useState6[1];
+  var _React$useState7 = React.useState({
+      checked: false,
+      indeterminate: false
+    }),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    selectAllIndicator = _React$useState8[0],
+    setSelectAllIndicator = _React$useState8[1];
+  var onSelect = function onSelect(event, rowUniqueKey) {
+    var _onRowSelect = onRowSelect(event, data, 'id', rowUniqueKey),
+      newData = _onRowSelect.data,
+      isAllSelected = _onRowSelect.isAllSelected,
+      isIndeterminate = _onRowSelect.isIndeterminate;
+    setSelectAllIndicator({
+      checked: isAllSelected,
+      indeterminate: isIndeterminate
+    });
+    setData(newData);
+  };
+  return jsxs(Table, {
+    onRowSelect: onSelect,
+    children: [jsx(TableHeader, {
+      children: jsx(TableRow, Object.assign({}, selectAllIndicator, {
+        children: columnData.map(function (column, i) {
+          return jsx(TableHeaderCell, Object.assign({}, column), i);
+        })
+      }))
+    }), jsx(TableBody, {
+      children: data.map(function (item, i) {
+        return jsx(TableRow, {
+          uniqueKey: item.id,
+          checked: item.checked,
+          children: columnData.map(function (column, columnIndex) {
+            return jsx(TableCell, {
+              children: item[column.accessor]
+            }, columnIndex);
+          })
+        }, i);
+      })
+    })]
+  });
+};
+var ExpandableTable = function ExpandableTable() {
+  var _React$useState9 = React.useState(rowData),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    data = _React$useState10[0],
+    setData = _React$useState10[1];
+  var onRowExpand = function onRowExpand(expanded, rowId) {
+    setData(function (prevData) {
+      return prevData.map(function (item) {
+        if (item.id === rowId) {
+          return Object.assign(Object.assign({}, item), {
+            expanded: expanded
+          });
+        }
+        return item;
+      });
+    });
+  };
+  return jsxs(Table, {
+    onRowExpand: onRowExpand,
+    children: [jsx(TableHeader, {
+      children: jsx(TableRow, {
+        children: columnData.map(function (column, i) {
+          return jsx(TableHeaderCell, Object.assign({}, column), i);
+        })
+      })
+    }), jsx(TableBody, {
+      children: data.map(function (item, i) {
+        var _a;
+        return jsxs(React.Fragment, {
+          children: [jsx(TableRow, {
+            uniqueKey: item.id,
+            isExpanded: item.expanded,
+            children: columnData.map(function (column, columnIndex) {
+              return jsx(TableCell, {
+                children: item[column.accessor]
+              }, columnIndex);
+            })
+          }), (_a = item.rowContentDetails) === null || _a === void 0 ? void 0 : _a.map(function (rowItem) {
+            return jsx(TableRow, {
+              isSubRow: true,
+              uniqueKey: rowItem.id,
+              isExpanded: rowItem.expanded,
+              children: columnData.map(function (column, columnIndex) {
+                return jsx(TableCell, {
+                  children: rowItem[column.accessor]
+                }, columnIndex);
+              })
+            }, rowItem.id);
+          })]
+        }, i);
+      })
+    })]
+  });
+};
+
+export { ExpandableTable, SelectableTable, SortableTable, columnData, rowData };

package/src/lib/tabs/index.d.ts

@@ -0,0 +1 @@
+export * from './tabs';

package/src/lib/tabs/index.js

@@ -0,0 +1,4 @@
+export { Tab, Tabs } from './tabs.js';
+import '../../../_rollupPluginBabelHelpers.js';
+import 'react/jsx-runtime';
+import 'react';

package/src/lib/tabs/tabs.js

@@ -0,0 +1,77 @@
+import { _ as _slicedToArray } from '../../../_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+
+var Tab = function Tab(props) {
+  return null;
+};
+var Tabs = function Tabs(_ref) {
+  var list = _ref.list,
+    onTabChange = _ref.onTabChange,
+    children = _ref.children;
+  var _useState = useState(getDefaultSelectedTab()),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedTab = _useState2[0],
+    setSelectedTab = _useState2[1];
+  var onClick = function onClick(event) {
+    event.preventDefault();
+    if (event.currentTarget.ariaDisabled !== 'true') {
+      var focusedIndex = parseInt(event.currentTarget.dataset.indexNumber);
+      setSelectedTab(focusedIndex);
+      onTabChange && onTabChange(focusedIndex);
+    }
+  };
+  function getDefaultSelectedTab() {
+    var selectedTabIndex = 0;
+    if (children) selectedTabIndex = children.findIndex(function (x) {
+      return x.props.selected;
+    });else if (list) {
+      selectedTabIndex = list.findIndex(function (x) {
+        return x.selected;
+      });
+    }
+    return selectedTabIndex !== -1 ? selectedTabIndex : 0;
+  }
+  return jsxs(Fragment, {
+    children: [jsxs("nav", {
+      role: "tablist",
+      children: [!children && (list === null || list === void 0 ? void 0 : list.map(function (value, index) {
+        return jsx("a", {
+          href: value.disabled ? undefined : value.href || '#',
+          onClick: onClick,
+          role: "tab",
+          "data-index-number": index,
+          "aria-disabled": value.disabled,
+          "aria-selected": selectedTab === index,
+          children: value.text
+        }, index);
+      })), children === null || children === void 0 ? void 0 : children.map(function (tab, index) {
+        return jsx("a", {
+          href: tab.props.disabled ? undefined : tab.props.href || '#',
+          onClick: onClick,
+          role: "tab",
+          "data-index-number": index,
+          "aria-disabled": tab.props.disabled,
+          "aria-selected": selectedTab === index,
+          children: tab.props.title
+        }, index);
+      })]
+    }), jsxs("section", {
+      children: [!children && (list === null || list === void 0 ? void 0 : list.map(function (value, index) {
+        return jsx("article", {
+          role: "tabpanel",
+          "aria-hidden": selectedTab !== index,
+          children: value.text
+        }, index);
+      })), children === null || children === void 0 ? void 0 : children.map(function (tab, index) {
+        return jsx("article", {
+          role: "tabpanel",
+          "aria-hidden": selectedTab !== index,
+          children: selectedTab === index && tab.props.children
+        }, index);
+      })]
+    })]
+  });
+};
+
+export { Tab, Tabs, Tabs as default };

package/src/types/index.js

@@ -0,0 +1 @@
+

package/src/types/props/index.js

@@ -0,0 +1 @@
+

package/valueList.js

@@ -0,0 +1,55 @@
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * @deprecated
+ * Use `GroupedList` instead.
+ */
+var Label = function Label(_ref) {
+  var children = _ref.children;
+  return jsx("dt", {
+    children: children
+  });
+};
+/**
+ * @deprecated
+ * Use `GroupedList` instead.
+ */
+var Value = function Value(_ref2) {
+  var children = _ref2.children;
+  return jsx("dd", {
+    children: children
+  });
+};
+/**
+ * @deprecated
+ * Use `GroupedList` instead.
+ */
+var List = function List(_ref3) {
+  var children = _ref3.children,
+    inverted = _ref3.inverted;
+  var classNames = 'gds-list';
+  if (inverted) classNames += ' gds-list--inverted';
+  return jsx("dl", {
+    className: classNames,
+    children: children
+  });
+};
+/**
+ * @deprecated
+ * Use `GroupedList` instead.
+ */
+var valueList = {
+  List: List,
+  Label: Label,
+  Value: Value
+};
+
+var valueList$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Label: Label,
+  List: List,
+  Value: Value,
+  default: valueList
+});
+
+export { Label as L, Value as V, List as a, valueList as b, valueList$1 as v };

package/README.md

@@ -1,64 +0,0 @@
-<div align="center">
-<img width="600" alt="green-react" src="https://github.com/seb-oss/green/assets/11420341/ad4c9fe3-137f-4230-9ea7-a4de87752aa9">
-<h1>@sebgroup/green-react</h1>
-<p>
-React components with SEB's look and feel.
-</p>
-</div>
-
-## Install
-
-```bash
-npm install --save @sebgroup/green-react
-```
-
-```bash
-yarn add @sebgroup/green-react
-```
-
-## Use
-
-```tsx
-import { Button } from '@sebgroup/green-react'
-
-// Use in your JSX
-;<Button>A Green React Button!</Button>
-```
-
-### Components
-
-View all components in the [React Storybook](https://storybook.seb.io/latest/react/)
-
-## Develop \*
-
-1. Clone the monorepo
-
-```bash
-git clone git@github.com:sebgroup/green.git
-```
-
-2. Install the dependencies
-
-```bash
-cd green
-yarn
-```
-
-3. Start the Storybook
-
-```bash
-npx nx run react:storybook
-```
-
-4. Start the test runner (or make sure your IDE runs the tests continuously)
-
-```bash
-yarn test react --watch
-```
-
-5. Pick an issue from the board and pull it into `In progress`
-6. Open a Draft PR and reference the Issue
-7. Start coding 🎉 Don't forget:
-   1. Test
-   2. Code
-   3. Refactor

package/index.esm.d.ts

@@ -1 +0,0 @@
-export * from "./src/index";