@ctablex/core - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

CHANGELOG.md

@@ -5,2 +5,12 @@ # Changelog
 
+## [0.1.0](https://github.com/sahabpardaz/ctablex/compare/v0.0.1...v0.1.0) (2020-07-04)
+
+### Features
+
+- add table components ([#1](https://github.com/sahabpardaz/ctablex/issues/1)) ([f4d0d9a](https://github.com/sahabpardaz/ctablex/commit/f4d0d9ad43581f77ddebbec9b863f2c4557d114b))
+
+### Documentations
+
+- add the example section to the readme file ([#8](https://github.com/sahabpardaz/ctablex/issues/8)) ([cc62e78](https://github.com/sahabpardaz/ctablex/commit/cc62e7881cce56f2d7fe424ab5e01d13147d525b))
+
 ### 0.0.1 (2020-06-24)
@@ -7,0 +17,0 @@

dist/ctablex.js

 (function (global, factory) {
-typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-typeof define === 'function' && define.amd ? define(['exports'], factory) :
-(global = global || self, factory(global.ctablex = {}));
-}(this, (function (exports) { 'use strict';
+typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
+typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
+(global = global || self, factory(global.ctablex = {}, global.React));
+}(this, (function (exports, React) { 'use strict';
 
-/**
- * @public
- */
+var React__default = 'default' in React ? React['default'] : React;
 
-/**
- *
- * return `ctablex` string
- *
- * @returns the `ctablex`  string
- *
- * @example
- * Here's an example:
- *
- * ```ts
- * import { ctablex } from '@ctablex/core'
- *
- * console.log(ctablex());
- * // Prints "ctablex":
- * ```
- */
-function ctablex(options) {
-  return 'ctablex';
+var ColumnsContext = /*#__PURE__*/React.createContext(undefined);
+function useColumns() {
+  var context = React.useContext(ColumnsContext);
+
+  if (context === undefined) {
+    throw new Error('useColumnsContext must be used inside the <ColumnsContextProvider/>');
+  }
+
+  return context;
 }
+function ColumnsContextProvider(props) {
+  return /*#__PURE__*/React__default.createElement(ColumnsContext.Provider, {
+    value: props.value
+  }, props.children);
+}
 
-exports.ctablex = ctablex;
+function isColumnsType(type) {
+  return Boolean(type && type.__COLUMNS__);
+}
 
+function findColumns(children) {
+  var columnsChild = null;
+  React__default.Children.forEach(children, function (child) {
+    if ( /*#__PURE__*/React__default.isValidElement(child) && isColumnsType(child.type)) {
+      columnsChild = child;
+    }
+  });
+  return columnsChild;
+}
+
+var TablePartContext = /*#__PURE__*/React.createContext(undefined);
+function useTablePart() {
+  var context = React.useContext(TablePartContext);
+
+  if (context === undefined) {
+    throw new Error('useTablePartContext must be used inside the <TablePartContextProvider/>');
+  }
+
+  return context;
+}
+function TablePartContextProvider(props) {
+  return /*#__PURE__*/React__default.createElement(TablePartContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+var DataContext = /*#__PURE__*/React.createContext(undefined);
+function useData(value) {
+  var context = React.useContext(DataContext);
+
+  if (value !== undefined) {
+    return value;
+  }
+
+  if (context === undefined) {
+    throw new Error('useDataContext must be used inside the <DataContextProvider/>');
+  }
+
+  return context;
+}
+function DataContextProvider(props) {
+  return /*#__PURE__*/React__default.createElement(DataContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+function DataTable(props) {
+  var children = props.children;
+  var columns = findColumns(children);
+  var data = useData(props.data);
+  return /*#__PURE__*/React__default.createElement(DataContextProvider, {
+    value: data
+  }, /*#__PURE__*/React__default.createElement(TablePartContextProvider, {
+    value: "definition"
+  }, /*#__PURE__*/React__default.createElement(ColumnsContextProvider, {
+    value: columns
+  }, children)));
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
+var defaultTableComponents = {
+  Table: 'table',
+  Thead: 'thead',
+  Tbody: 'tbody',
+  Tr: 'tr',
+  Th: 'th',
+  Td: 'td'
+};
+var TableComponentsContext = /*#__PURE__*/React.createContext(defaultTableComponents);
+function useTableComponentsContext() {
+  return React.useContext(TableComponentsContext);
+}
+function TableComponentsContextProvider(props) {
+  var contextValue = useTableComponentsContext();
+  var value = React.useMemo(function () {
+    return _objectSpread2(_objectSpread2({}, contextValue), props.value);
+  }, [contextValue, props.value]);
+  return /*#__PURE__*/React__default.createElement(TableComponentsContext.Provider, {
+    value: value
+  }, props.children);
+}
+
+function Columns(props) {
+  var children = props.children;
+  var part = useTablePart();
+
+  if (part === 'definition') {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, children);
+}
+Columns.__COLUMNS__ = true;
+
+var RowDataContext = /*#__PURE__*/React.createContext(undefined);
+function useRowData() {
+  var context = React.useContext(RowDataContext);
+
+  if (context === undefined) {
+    throw new Error('useRowDataContext must be used inside the <RowDataContextProvider/>');
+  }
+
+  return context;
+}
+function RowDataContextProvider(props) {
+  return /*#__PURE__*/React__default.createElement(RowDataContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+function path(path, obj) {
+  var current = obj;
+  path.forEach(function (prop) {
+    var _current;
+
+    current = (_current = current) === null || _current === void 0 ? void 0 : _current[prop];
+  });
+  return current;
+}
+
+function getValue(data, accessor) {
+  if (accessor === null) {
+    return null;
+  }
+
+  if (typeof accessor === 'string') {
+    return path(accessor.split('.'), data);
+  }
+
+  return accessor(data);
+}
+
+function useContentValue(accessor) {
+  var row = useRowData();
+  return getValue(row, accessor);
+}
+
+var ContentContext = /*#__PURE__*/React.createContext(undefined);
+function useContent() {
+  var context = React.useContext(ContentContext);
+
+  if (context === undefined) {
+    throw new Error('useContentContext must be used inside the <ContentContextProvider/>');
+  }
+
+  return context;
+}
+function ContentContextProvider(props) {
+  return /*#__PURE__*/React__default.createElement(ContentContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+function DefaultContent(props) {
+  var value = useContent();
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, value);
+}
+
+function ContentValue(props) {
+  var accessor = props.accessor,
+      _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__default.createElement(DefaultContent, null) : _props$children;
+  var value = useContentValue(accessor);
+  return /*#__PURE__*/React__default.createElement(ContentContextProvider, {
+    value: value
+  }, children);
+}
+
+function Cell(props) {
+  var accessor = props.accessor,
+      children = props.children;
+  var Components = useTableComponentsContext();
+  return /*#__PURE__*/React__default.createElement(ContentValue, {
+    accessor: accessor
+  }, /*#__PURE__*/React__default.createElement(Components.Td, null, children));
+}
+
+function HeaderCell(props) {
+  var children = props.children;
+  var Components = useTableComponentsContext();
+  return /*#__PURE__*/React__default.createElement(Components.Th, null, children);
+}
+
+function Column(props) {
+  var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__default.createElement(DefaultContent, null) : _props$children,
+      _props$accessor = props.accessor,
+      accessor = _props$accessor === void 0 ? null : _props$accessor,
+      header = props.header;
+  var part = useTablePart();
+
+  if (part === 'header') {
+    return /*#__PURE__*/React__default.createElement(HeaderCell, null, header);
+  }
+
+  if (part === 'body') {
+    return /*#__PURE__*/React__default.createElement(Cell, {
+      accessor: accessor
+    }, children);
+  }
+
+  return null;
+}
+
+function TableHeader(props) {
+  var children = props.children;
+  var Components = useTableComponentsContext();
+  return /*#__PURE__*/React__default.createElement(TablePartContextProvider, {
+    value: "header"
+  }, /*#__PURE__*/React__default.createElement(Components.Thead, null, children));
+}
+
+function HeaderRow(props) {
+  var Components = useTableComponentsContext();
+  var columns = useColumns();
+  return /*#__PURE__*/React__default.createElement(Components.Tr, null, columns);
+}
+
+var IndexContext = /*#__PURE__*/React.createContext(undefined);
+function useIndex() {
+  var context = React.useContext(IndexContext);
+
+  if (context === undefined) {
+    throw new Error('useIndexContext must be used inside the <IndexContextProvider/>');
+  }
+
+  return context;
+}
+function IndexContextProvider(props) {
+  return /*#__PURE__*/React__default.createElement(IndexContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+var CurrentValueContext = /*#__PURE__*/React.createContext(undefined);
+function useCurrentValue(value) {
+  var context = React.useContext(CurrentValueContext);
+
+  if (value !== undefined) {
+    return value;
+  }
+
+  if (context === undefined) {
+    throw new Error('useCurrentValue must be used inside the <ItemContextProvider/>');
+  }
+
+  return context;
+}
+function CurrentValueContextProvider(props) {
+  return /*#__PURE__*/React__default.createElement(CurrentValueContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+var defaultGetKey = function defaultGetKey(value, index) {
+  return index;
+};
+
+function ArrayOutput(props) {
+  var values = props.value,
+      children = props.children,
+      _props$getKey = props.getKey,
+      getKey = _props$getKey === void 0 ? defaultGetKey : _props$getKey;
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, values.map(function (value, index) {
+    return /*#__PURE__*/React__default.createElement(CurrentValueContextProvider, {
+      value: value,
+      key: getKey(value, index)
+    }, /*#__PURE__*/React__default.createElement(IndexContextProvider, {
+      value: index
+    }, children));
+  }));
+}
+
+function Rows(props) {
+  var children = props.children,
+      keyAccessor = props.keyAccessor;
+  var data = useData(props.data);
+  var getKey = React.useMemo(function () {
+    if (keyAccessor) {
+      return function (value) {
+        return getValue(value, keyAccessor);
+      };
+    }
+  }, [keyAccessor]);
+  return /*#__PURE__*/React__default.createElement(ArrayOutput, {
+    value: data,
+    getKey: getKey
+  }, children);
+}
+
+function Row(props) {
+  var Components = useTableComponentsContext();
+  var columns = useColumns();
+  var row = useCurrentValue(props.row);
+  return /*#__PURE__*/React__default.createElement(RowDataContextProvider, {
+    value: row
+  }, /*#__PURE__*/React__default.createElement(Components.Tr, null, columns));
+}
+
+function TableBody(props) {
+  var children = props.children;
+  var Components = useTableComponentsContext();
+  return /*#__PURE__*/React__default.createElement(TablePartContextProvider, {
+    value: "body"
+  }, /*#__PURE__*/React__default.createElement(Components.Tbody, null, children));
+}
+
+function Table(props) {
+  var children = props.children;
+  var Components = useTableComponentsContext();
+  return /*#__PURE__*/React__default.createElement(Components.Table, null, children);
+}
+
+exports.ArrayOutput = ArrayOutput;
+exports.Cell = Cell;
+exports.Column = Column;
+exports.Columns = Columns;
+exports.ColumnsContext = ColumnsContext;
+exports.ColumnsContextProvider = ColumnsContextProvider;
+exports.ContentContext = ContentContext;
+exports.ContentContextProvider = ContentContextProvider;
+exports.ContentValue = ContentValue;
+exports.CurrentValueContext = CurrentValueContext;
+exports.CurrentValueContextProvider = CurrentValueContextProvider;
+exports.DataContext = DataContext;
+exports.DataContextProvider = DataContextProvider;
+exports.DataTable = DataTable;
+exports.DefaultContent = DefaultContent;
+exports.HeaderCell = HeaderCell;
+exports.HeaderRow = HeaderRow;
+exports.IndexContext = IndexContext;
+exports.IndexContextProvider = IndexContextProvider;
+exports.Row = Row;
+exports.RowDataContext = RowDataContext;
+exports.RowDataContextProvider = RowDataContextProvider;
+exports.Rows = Rows;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableComponentsContext = TableComponentsContext;
+exports.TableComponentsContextProvider = TableComponentsContextProvider;
+exports.TableHeader = TableHeader;
+exports.TablePartContext = TablePartContext;
+exports.TablePartContextProvider = TablePartContextProvider;
+exports.findColumns = findColumns;
+exports.getValue = getValue;
+exports.isColumnsType = isColumnsType;
+exports.useColumns = useColumns;
+exports.useContent = useContent;
+exports.useContentValue = useContentValue;
+exports.useCurrentValue = useCurrentValue;
+exports.useData = useData;
+exports.useIndex = useIndex;
+exports.useRowData = useRowData;
+exports.useTableComponentsContext = useTableComponentsContext;
+exports.useTablePart = useTablePart;
+
 Object.defineProperty(exports, '__esModule', { value: true });
 
 })));

dist/ctablex.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).ctablex={})}(this,(function(e){"use strict";e.ctablex=function(e){return"ctablex"},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ctablex={},e.React)}(this,(function(e,t){"use strict";var r="default"in t?t.default:t,n=t.createContext(void 0);function o(){var e=t.useContext(n);if(void 0===e)throw Error("useColumnsContext must be used inside the <ColumnsContextProvider/>");return e}function u(e){return r.createElement(n.Provider,{value:e.value},e.children)}function a(e){return!(!e||!e.__COLUMNS__)}function l(e){var t=null;return r.Children.forEach(e,(function(e){r.isValidElement(e)&&a(e.type)&&(t=e)})),t}var i=t.createContext(void 0);function c(){var e=t.useContext(i);if(void 0===e)throw Error("useTablePartContext must be used inside the <TablePartContextProvider/>");return e}function d(e){return r.createElement(i.Provider,{value:e.value},e.children)}var v=t.createContext(void 0);function s(e){var r=t.useContext(v);if(void 0!==e)return e;if(void 0===r)throw Error("useDataContext must be used inside the <DataContextProvider/>");return r}function f(e){return r.createElement(v.Provider,{value:e.value},e.children)}function C(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function m(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function x(e){for(var t=1;arguments.length>t;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?m(Object(r),!0).forEach((function(t){C(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):m(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var h=t.createContext({Table:"table",Thead:"thead",Tbody:"tbody",Tr:"tr",Th:"th",Td:"td"});function b(){return t.useContext(h)}function E(e){var n=e.children;return"definition"===c()?null:r.createElement(t.Fragment,null,n)}E.__COLUMNS__=!0;var P=t.createContext(void 0);function p(){var e=t.useContext(P);if(void 0===e)throw Error("useRowDataContext must be used inside the <RowDataContextProvider/>");return e}function y(e){return r.createElement(P.Provider,{value:e.value},e.children)}function T(e,t){return null===t?null:"string"==typeof t?function(e,t){var r=t;return e.forEach((function(e){var t;r=null===(t=r)||void 0===t?void 0:t[e]})),r}(t.split("."),e):t(e)}function w(e){return T(p(),e)}var O=t.createContext(void 0);function D(){var e=t.useContext(O);if(void 0===e)throw Error("useContentContext must be used inside the <ContentContextProvider/>");return e}function g(e){return r.createElement(O.Provider,{value:e.value},e.children)}function j(e){var n=D();return r.createElement(t.Fragment,null,n)}function _(e){var t=e.accessor,n=e.children,o=void 0===n?r.createElement(j,null):n,u=w(t);return r.createElement(g,{value:u},o)}function R(e){var t=e.accessor,n=e.children,o=b();return r.createElement(_,{accessor:t},r.createElement(o.Td,null,n))}function V(e){var t=e.children,n=b();return r.createElement(n.Th,null,t)}var I=t.createContext(void 0);function M(e){return r.createElement(I.Provider,{value:e.value},e.children)}var S=t.createContext(void 0);function k(e){var r=t.useContext(S);if(void 0!==e)return e;if(void 0===r)throw Error("useCurrentValue must be used inside the <ItemContextProvider/>");return r}function F(e){return r.createElement(S.Provider,{value:e.value},e.children)}var H=function(e,t){return t};function A(e){var n=e.children,o=e.getKey,u=void 0===o?H:o;return r.createElement(t.Fragment,null,e.value.map((function(e,t){return r.createElement(F,{value:e,key:u(e,t)},r.createElement(M,{value:t},n))})))}e.ArrayOutput=A,e.Cell=R,e.Column=function(e){var t=e.children,n=void 0===t?r.createElement(j,null):t,o=e.accessor,u=void 0===o?null:o,a=e.header,l=c();return"header"===l?r.createElement(V,null,a):"body"===l?r.createElement(R,{accessor:u},n):null},e.Columns=E,e.ColumnsContext=n,e.ColumnsContextProvider=u,e.ContentContext=O,e.ContentContextProvider=g,e.ContentValue=_,e.CurrentValueContext=S,e.CurrentValueContextProvider=F,e.DataContext=v,e.DataContextProvider=f,e.DataTable=function(e){var t=e.children,n=l(t),o=s(e.data);return r.createElement(f,{value:o},r.createElement(d,{value:"definition"},r.createElement(u,{value:n},t)))},e.DefaultContent=j,e.HeaderCell=V,e.HeaderRow=function(e){var t=b(),n=o();return r.createElement(t.Tr,null,n)},e.IndexContext=I,e.IndexContextProvider=M,e.Row=function(e){var t=b(),n=o(),u=k(e.row);return r.createElement(y,{value:u},r.createElement(t.Tr,null,n))},e.RowDataContext=P,e.RowDataContextProvider=y,e.Rows=function(e){var n=e.children,o=e.keyAccessor,u=s(e.data),a=t.useMemo((function(){if(o)return function(e){return T(e,o)}}),[o]);return r.createElement(A,{value:u,getKey:a},n)},e.Table=function(e){var t=e.children,n=b();return r.createElement(n.Table,null,t)},e.TableBody=function(e){var t=e.children,n=b();return r.createElement(d,{value:"body"},r.createElement(n.Tbody,null,t))},e.TableComponentsContext=h,e.TableComponentsContextProvider=function(e){var n=b(),o=t.useMemo((function(){return x(x({},n),e.value)}),[n,e.value]);return r.createElement(h.Provider,{value:o},e.children)},e.TableHeader=function(e){var t=e.children,n=b();return r.createElement(d,{value:"header"},r.createElement(n.Thead,null,t))},e.TablePartContext=i,e.TablePartContextProvider=d,e.findColumns=l,e.getValue=T,e.isColumnsType=a,e.useColumns=o,e.useContent=D,e.useContentValue=w,e.useCurrentValue=k,e.useData=s,e.useIndex=function(){var e=t.useContext(I);if(void 0===e)throw Error("useIndexContext must be used inside the <IndexContextProvider/>");return e},e.useRowData=p,e.useTableComponentsContext=b,e.useTablePart=c,Object.defineProperty(e,"__esModule",{value:!0})}));

es/ctablex.js

@@ -1,25 +0,384 @@
-/**
- * @public
- */
+import React, { createContext, useContext, useMemo, Fragment } from 'react';
 
-/**
- *
- * return `ctablex` string
- *
- * @returns the `ctablex`  string
- *
- * @example
- * Here's an example:
- *
- * ```ts
- * import { ctablex } from '@ctablex/core'
- *
- * console.log(ctablex());
- * // Prints "ctablex":
- * ```
- */
-function ctablex(options) {
-  return 'ctablex';
+var ColumnsContext = /*#__PURE__*/createContext(undefined);
+function useColumns() {
+  var context = useContext(ColumnsContext);
+
+  if (context === undefined) {
+    throw new Error('useColumnsContext must be used inside the <ColumnsContextProvider/>');
+  }
+
+  return context;
 }
+function ColumnsContextProvider(props) {
+  return /*#__PURE__*/React.createElement(ColumnsContext.Provider, {
+    value: props.value
+  }, props.children);
+}
 
-export { ctablex };
+function isColumnsType(type) {
+  return Boolean(type && type.__COLUMNS__);
+}
+
+function findColumns(children) {
+  var columnsChild = null;
+  React.Children.forEach(children, function (child) {
+    if ( /*#__PURE__*/React.isValidElement(child) && isColumnsType(child.type)) {
+      columnsChild = child;
+    }
+  });
+  return columnsChild;
+}
+
+var TablePartContext = /*#__PURE__*/createContext(undefined);
+function useTablePart() {
+  var context = useContext(TablePartContext);
+
+  if (context === undefined) {
+    throw new Error('useTablePartContext must be used inside the <TablePartContextProvider/>');
+  }
+
+  return context;
+}
+function TablePartContextProvider(props) {
+  return /*#__PURE__*/React.createElement(TablePartContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+var DataContext = /*#__PURE__*/createContext(undefined);
+function useData(value) {
+  var context = useContext(DataContext);
+
+  if (value !== undefined) {
+    return value;
+  }
+
+  if (context === undefined) {
+    throw new Error('useDataContext must be used inside the <DataContextProvider/>');
+  }
+
+  return context;
+}
+function DataContextProvider(props) {
+  return /*#__PURE__*/React.createElement(DataContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+function DataTable(props) {
+  var children = props.children;
+  var columns = findColumns(children);
+  var data = useData(props.data);
+  return /*#__PURE__*/React.createElement(DataContextProvider, {
+    value: data
+  }, /*#__PURE__*/React.createElement(TablePartContextProvider, {
+    value: "definition"
+  }, /*#__PURE__*/React.createElement(ColumnsContextProvider, {
+    value: columns
+  }, children)));
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
+var defaultTableComponents = {
+  Table: 'table',
+  Thead: 'thead',
+  Tbody: 'tbody',
+  Tr: 'tr',
+  Th: 'th',
+  Td: 'td'
+};
+var TableComponentsContext = /*#__PURE__*/createContext(defaultTableComponents);
+function useTableComponentsContext() {
+  return useContext(TableComponentsContext);
+}
+function TableComponentsContextProvider(props) {
+  var contextValue = useTableComponentsContext();
+  var value = useMemo(function () {
+    return _objectSpread2(_objectSpread2({}, contextValue), props.value);
+  }, [contextValue, props.value]);
+  return /*#__PURE__*/React.createElement(TableComponentsContext.Provider, {
+    value: value
+  }, props.children);
+}
+
+function Columns(props) {
+  var children = props.children;
+  var part = useTablePart();
+
+  if (part === 'definition') {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Fragment, null, children);
+}
+Columns.__COLUMNS__ = true;
+
+var RowDataContext = /*#__PURE__*/createContext(undefined);
+function useRowData() {
+  var context = useContext(RowDataContext);
+
+  if (context === undefined) {
+    throw new Error('useRowDataContext must be used inside the <RowDataContextProvider/>');
+  }
+
+  return context;
+}
+function RowDataContextProvider(props) {
+  return /*#__PURE__*/React.createElement(RowDataContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+function path(path, obj) {
+  var current = obj;
+  path.forEach(function (prop) {
+    var _current;
+
+    current = (_current = current) === null || _current === void 0 ? void 0 : _current[prop];
+  });
+  return current;
+}
+
+function getValue(data, accessor) {
+  if (accessor === null) {
+    return null;
+  }
+
+  if (typeof accessor === 'string') {
+    return path(accessor.split('.'), data);
+  }
+
+  return accessor(data);
+}
+
+function useContentValue(accessor) {
+  var row = useRowData();
+  return getValue(row, accessor);
+}
+
+var ContentContext = /*#__PURE__*/createContext(undefined);
+function useContent() {
+  var context = useContext(ContentContext);
+
+  if (context === undefined) {
+    throw new Error('useContentContext must be used inside the <ContentContextProvider/>');
+  }
+
+  return context;
+}
+function ContentContextProvider(props) {
+  return /*#__PURE__*/React.createElement(ContentContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+function DefaultContent(props) {
+  var value = useContent();
+  return /*#__PURE__*/React.createElement(Fragment, null, value);
+}
+
+function ContentValue(props) {
+  var accessor = props.accessor,
+      _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React.createElement(DefaultContent, null) : _props$children;
+  var value = useContentValue(accessor);
+  return /*#__PURE__*/React.createElement(ContentContextProvider, {
+    value: value
+  }, children);
+}
+
+function Cell(props) {
+  var accessor = props.accessor,
+      children = props.children;
+  var Components = useTableComponentsContext();
+  return /*#__PURE__*/React.createElement(ContentValue, {
+    accessor: accessor
+  }, /*#__PURE__*/React.createElement(Components.Td, null, children));
+}
+
+function HeaderCell(props) {
+  var children = props.children;
+  var Components = useTableComponentsContext();
+  return /*#__PURE__*/React.createElement(Components.Th, null, children);
+}
+
+function Column(props) {
+  var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React.createElement(DefaultContent, null) : _props$children,
+      _props$accessor = props.accessor,
+      accessor = _props$accessor === void 0 ? null : _props$accessor,
+      header = props.header;
+  var part = useTablePart();
+
+  if (part === 'header') {
+    return /*#__PURE__*/React.createElement(HeaderCell, null, header);
+  }
+
+  if (part === 'body') {
+    return /*#__PURE__*/React.createElement(Cell, {
+      accessor: accessor
+    }, children);
+  }
+
+  return null;
+}
+
+function TableHeader(props) {
+  var children = props.children;
+  var Components = useTableComponentsContext();
+  return /*#__PURE__*/React.createElement(TablePartContextProvider, {
+    value: "header"
+  }, /*#__PURE__*/React.createElement(Components.Thead, null, children));
+}
+
+function HeaderRow(props) {
+  var Components = useTableComponentsContext();
+  var columns = useColumns();
+  return /*#__PURE__*/React.createElement(Components.Tr, null, columns);
+}
+
+var IndexContext = /*#__PURE__*/createContext(undefined);
+function useIndex() {
+  var context = useContext(IndexContext);
+
+  if (context === undefined) {
+    throw new Error('useIndexContext must be used inside the <IndexContextProvider/>');
+  }
+
+  return context;
+}
+function IndexContextProvider(props) {
+  return /*#__PURE__*/React.createElement(IndexContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+var CurrentValueContext = /*#__PURE__*/createContext(undefined);
+function useCurrentValue(value) {
+  var context = useContext(CurrentValueContext);
+
+  if (value !== undefined) {
+    return value;
+  }
+
+  if (context === undefined) {
+    throw new Error('useCurrentValue must be used inside the <ItemContextProvider/>');
+  }
+
+  return context;
+}
+function CurrentValueContextProvider(props) {
+  return /*#__PURE__*/React.createElement(CurrentValueContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+var defaultGetKey = function defaultGetKey(value, index) {
+  return index;
+};
+
+function ArrayOutput(props) {
+  var values = props.value,
+      children = props.children,
+      _props$getKey = props.getKey,
+      getKey = _props$getKey === void 0 ? defaultGetKey : _props$getKey;
+  return /*#__PURE__*/React.createElement(Fragment, null, values.map(function (value, index) {
+    return /*#__PURE__*/React.createElement(CurrentValueContextProvider, {
+      value: value,
+      key: getKey(value, index)
+    }, /*#__PURE__*/React.createElement(IndexContextProvider, {
+      value: index
+    }, children));
+  }));
+}
+
+function Rows(props) {
+  var children = props.children,
+      keyAccessor = props.keyAccessor;
+  var data = useData(props.data);
+  var getKey = useMemo(function () {
+    if (keyAccessor) {
+      return function (value) {
+        return getValue(value, keyAccessor);
+      };
+    }
+  }, [keyAccessor]);
+  return /*#__PURE__*/React.createElement(ArrayOutput, {
+    value: data,
+    getKey: getKey
+  }, children);
+}
+
+function Row(props) {
+  var Components = useTableComponentsContext();
+  var columns = useColumns();
+  var row = useCurrentValue(props.row);
+  return /*#__PURE__*/React.createElement(RowDataContextProvider, {
+    value: row
+  }, /*#__PURE__*/React.createElement(Components.Tr, null, columns));
+}
+
+function TableBody(props) {
+  var children = props.children;
+  var Components = useTableComponentsContext();
+  return /*#__PURE__*/React.createElement(TablePartContextProvider, {
+    value: "body"
+  }, /*#__PURE__*/React.createElement(Components.Tbody, null, children));
+}
+
+function Table(props) {
+  var children = props.children;
+  var Components = useTableComponentsContext();
+  return /*#__PURE__*/React.createElement(Components.Table, null, children);
+}
+
+export { ArrayOutput, Cell, Column, Columns, ColumnsContext, ColumnsContextProvider, ContentContext, ContentContextProvider, ContentValue, CurrentValueContext, CurrentValueContextProvider, DataContext, DataContextProvider, DataTable, DefaultContent, HeaderCell, HeaderRow, IndexContext, IndexContextProvider, Row, RowDataContext, RowDataContextProvider, Rows, Table, TableBody, TableComponentsContext, TableComponentsContextProvider, TableHeader, TablePartContext, TablePartContextProvider, findColumns, getValue, isColumnsType, useColumns, useContent, useContentValue, useCurrentValue, useData, useIndex, useRowData, useTableComponentsContext, useTablePart };

index.d.ts

@@ -1,33 +0,320 @@
-/**
- * Flexible and powerful react table
- *
- * @remarks
- * provide {@link ctablex} function that returns `ctablex` string
- *
- * @packageDocumentation
- */
+import { Context } from 'react';
+import { ElementType } from 'react';
+import { PropsWithChildren } from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
 
-/**
- *
- * return `ctablex` string
- *
- * @returns the `ctablex`  string
- *
- * @example
- * Here's an example:
- *
- * ```ts
- * import { ctablex } from '@ctablex/core'
- *
- * console.log(ctablex());
- * // Prints "ctablex":
- * ```
- */
-export declare function ctablex(options?: Options): string;
+export declare type Accessor<D, C> = string | ((row: D) => C);
 
-/**
- * @public
- */
-export declare interface Options {}
+export declare function ArrayOutput<V>(props: ArrayOutputProps<V>): JSX.Element;
 
+declare interface ArrayOutputOwnProps<V> {
+  value: ReadonlyArray<V>;
+  getKey?: (value: V, index: number) => string | number;
+}
+
+export declare type ArrayOutputProps<V> = PropsWithChildren<
+  ArrayOutputOwnProps<V>
+>;
+
+export declare function Cell<D, C>(props: CellProps<D, C>): JSX.Element;
+
+declare interface CellOwnProps<D, C> {
+  accessor: Accessor<D, C> | null;
+}
+
+export declare type CellProps<D, C> = PropsWithChildren<CellOwnProps<D, C>>;
+
+export declare function Column<D, C>(
+  props: ColumnProps<D, C>,
+): JSX.Element | null;
+
+declare interface ColumnOwnProps<D, C> {
+  header?: ReactNode;
+  accessor?: Accessor<D, C> | null;
+}
+
+export declare type ColumnProps<D, C> = PropsWithChildren<ColumnOwnProps<D, C>>;
+
+export declare function Columns(props: ColumnsProps): JSX.Element | null;
+
+export declare namespace Columns {
+  var __COLUMNS__: boolean;
+}
+
+export declare const ColumnsContext: Context<ColumnsContextType | undefined>;
+
+export declare function ColumnsContextProvider(
+  props: ColumnsContextProviderProps,
+): JSX.Element;
+
+declare interface ColumnsContextProviderOwnProps {
+  value: ColumnsContextType;
+}
+
+export declare type ColumnsContextProviderProps = PropsWithChildren<
+  ColumnsContextProviderOwnProps
+>;
+
+export declare type ColumnsContextType = ReactNode;
+
+declare interface ColumnsOwnProps {}
+
+export declare type ColumnsProps = PropsWithChildren<ColumnsOwnProps>;
+
+export declare interface ColumnsType<D extends object = {}> {
+  __COLUMNS__: true;
+}
+
+export declare const ContentContext: Context<
+  ContentContextType<any> | undefined
+>;
+
+export declare function ContentContextProvider<V>(
+  props: ContentContextProviderProps<V>,
+): JSX.Element;
+
+declare interface ContentContextProviderOwnProps<V> {
+  value: ContentContextType<V>;
+}
+
+export declare type ContentContextProviderProps<V> = PropsWithChildren<
+  ContentContextProviderOwnProps<V>
+>;
+
+export declare type ContentContextType<V> = V;
+
+export declare function ContentValue<D, C>(
+  props: ContentValueProps<D, C>,
+): JSX.Element;
+
+declare interface ContentValueOwnProps<D, C> {
+  accessor: Accessor<D, C> | null;
+}
+
+export declare type ContentValueProps<D, C> = PropsWithChildren<
+  ContentValueOwnProps<D, C>
+>;
+
+export declare const CurrentValueContext: Context<
+  CurrentValueContextType<any> | undefined
+>;
+
+export declare function CurrentValueContextProvider<V>(
+  props: CurrentValueContextProviderProps<V>,
+): JSX.Element;
+
+export declare type CurrentValueContextProviderProps<V> = PropsWithChildren<
+  ItemContextProviderOwnProps<V>
+>;
+
+export declare type CurrentValueContextType<V> = V;
+
+export declare const DataContext: Context<DataContextType<any> | undefined>;
+
+export declare function DataContextProvider<D>(
+  props: DataContextProviderProps<D>,
+): JSX.Element;
+
+declare interface DataContextProviderOwnProps<D> {
+  value: DataContextType<D>;
+}
+
+export declare type DataContextProviderProps<D> = PropsWithChildren<
+  DataContextProviderOwnProps<D>
+>;
+
+export declare type DataContextType<D> = ReadonlyArray<D>;
+
+export declare function DataTable<D>(props: DataTableProps<D>): JSX.Element;
+
+declare interface DataTableOwnProps<D> {
+  data?: ReadonlyArray<D>;
+}
+
+export declare type DataTableProps<D> = PropsWithChildren<DataTableOwnProps<D>>;
+
+export declare function DefaultContent<D>(
+  props: DefaultContentProps<D>,
+): JSX.Element;
+
+declare interface DefaultContentOwnProps<D> {}
+
+export declare type DefaultContentProps<D> = PropsWithChildren<
+  DefaultContentOwnProps<D>
+>;
+
+export declare function findColumns<D extends object = {}>(
+  children: ReactNode,
+): ReactElement | null;
+
+export declare function getValue<D, C>(data: D, accessor: null): null;
+
+export declare function getValue<D, C>(data: D, accessor: Accessor<D, C>): C;
+
+export declare function getValue<D, C>(
+  data: D,
+  accessor: Accessor<D, C> | null,
+): C | null;
+
+export declare function HeaderCell(props: HeaderCellProps): JSX.Element;
+
+declare interface HeaderCellOwnProps {}
+
+export declare type HeaderCellProps = PropsWithChildren<HeaderCellOwnProps>;
+
+export declare function HeaderRow(props: HeaderRowProps): JSX.Element;
+
+declare interface HeaderRowOwnProps {}
+
+export declare type HeaderRowProps = PropsWithChildren<HeaderRowOwnProps>;
+
+export declare const IndexContext: Context<IndexContextType | undefined>;
+
+export declare function IndexContextProvider(
+  props: IndexContextProviderProps,
+): JSX.Element;
+
+declare interface IndexContextProviderOwnProps {
+  value: IndexContextType;
+}
+
+export declare type IndexContextProviderProps = PropsWithChildren<
+  IndexContextProviderOwnProps
+>;
+
+export declare type IndexContextType = number;
+
+export declare function isColumnsType<D extends object = {}>(
+  type: any,
+): type is ColumnsType<D>;
+
+declare interface ItemContextProviderOwnProps<V> {
+  value: CurrentValueContextType<V>;
+}
+
+export declare function Row<D>(props: RowProps<D>): JSX.Element;
+
+export declare const RowDataContext: Context<
+  RowDataContextType<any> | undefined
+>;
+
+export declare function RowDataContextProvider<V>(
+  props: RowDataContextProviderProps<V>,
+): JSX.Element;
+
+declare interface RowDataContextProviderOwnProps<V> {
+  value: RowDataContextType<V>;
+}
+
+export declare type RowDataContextProviderProps<V> = PropsWithChildren<
+  RowDataContextProviderOwnProps<V>
+>;
+
+export declare type RowDataContextType<V> = V;
+
+declare interface RowOwnProps<D> {
+  row?: D;
+}
+
+export declare type RowProps<D> = PropsWithChildren<RowOwnProps<D>>;
+
+export declare function Rows<D>(props: RowsProps<D>): JSX.Element;
+
+declare interface RowsOwnProps<D> {
+  keyAccessor?: Accessor<D, string | number>;
+  data?: ReadonlyArray<D>;
+}
+
+export declare type RowsProps<D> = PropsWithChildren<RowsOwnProps<D>>;
+
+export declare function Table(props: TableProps): JSX.Element;
+
+export declare function TableBody<D>(props: TableBodyProps<D>): JSX.Element;
+
+declare interface TableBodyOwnProps<D> {}
+
+export declare type TableBodyProps<D> = PropsWithChildren<TableBodyOwnProps<D>>;
+
+export declare const TableComponentsContext: Context<TableComponentsContextType>;
+
+export declare function TableComponentsContextProvider(
+  props: TableComponentsContextProviderProps,
+): JSX.Element;
+
+declare interface TableComponentsContextProviderOwnProps {
+  value: Partial<TableComponentsContextType>;
+}
+
+export declare type TableComponentsContextProviderProps = PropsWithChildren<
+  TableComponentsContextProviderOwnProps
+>;
+
+export declare interface TableComponentsContextType {
+  Table: ElementType;
+  Thead: ElementType;
+  Tbody: ElementType;
+  Tr: ElementType;
+  Th: ElementType;
+  Td: ElementType;
+}
+
+export declare function TableHeader(props: TableHeaderProps): JSX.Element;
+
+declare interface TableHeaderOwnProps {}
+
+export declare type TableHeaderProps = PropsWithChildren<TableHeaderOwnProps>;
+
+declare interface TableOwnProps {}
+
+export declare const TablePartContext: Context<
+  TablePartContextType | undefined
+>;
+
+export declare function TablePartContextProvider(
+  props: TablePartContextProviderProps,
+): JSX.Element;
+
+declare interface TablePartContextProviderOwnProps {
+  value: TablePartContextType;
+}
+
+export declare type TablePartContextProviderProps = PropsWithChildren<
+  TablePartContextProviderOwnProps
+>;
+
+export declare type TablePartContextType = TablePartType;
+
+export declare type TablePartType = 'definition' | 'header' | 'body' | string;
+
+export declare type TableProps = PropsWithChildren<TableOwnProps>;
+
+export declare function useColumns(): ColumnsContextType;
+
+export declare function useContent<V>(): ContentContextType<V>;
+
+export declare function useContentValue<D, C>(accessor: null): null;
+
+export declare function useContentValue<D, C>(accessor: Accessor<D, C>): C;
+
+export declare function useContentValue<D, C>(
+  accessor: Accessor<D, C> | null,
+): C | null;
+
+export declare function useCurrentValue<V>(
+  value?: V,
+): CurrentValueContextType<V>;
+
+export declare function useData<D>(
+  value?: ReadonlyArray<D>,
+): DataContextType<D>;
+
+export declare function useIndex(): IndexContextType;
+
+export declare function useRowData<V>(): RowDataContextType<V>;
+
+export declare function useTableComponentsContext(): TableComponentsContextType;
+
+export declare function useTablePart(): TablePartContextType;
+
 export {};

lib/ctablex.js

@@ -5,26 +5,400 @@ 'use strict';
 
-/**
- * @public
- */
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-/**
- *
- * return `ctablex` string
- *
- * @returns the `ctablex`  string
- *
- * @example
- * Here's an example:
- *
- * ```ts
- * import { ctablex } from '@ctablex/core'
- *
- * console.log(ctablex());
- * // Prints "ctablex":
- * ```
- */
-function ctablex(options) {
-  return 'ctablex';
+var React = require('react');
+var React__default = _interopDefault(React);
+
+var ColumnsContext = /*#__PURE__*/React.createContext(undefined);
+function useColumns() {
+  var context = React.useContext(ColumnsContext);
+
+  if (context === undefined) {
+    throw new Error('useColumnsContext must be used inside the <ColumnsContextProvider/>');
+  }
+
+  return context;
 }
+function ColumnsContextProvider(props) {
+  return /*#__PURE__*/React__default.createElement(ColumnsContext.Provider, {
+    value: props.value
+  }, props.children);
+}
 
-exports.ctablex = ctablex;
+function isColumnsType(type) {
+  return Boolean(type && type.__COLUMNS__);
+}
+
+function findColumns(children) {
+  var columnsChild = null;
+  React__default.Children.forEach(children, function (child) {
+    if ( /*#__PURE__*/React__default.isValidElement(child) && isColumnsType(child.type)) {
+      columnsChild = child;
+    }
+  });
+  return columnsChild;
+}
+
+var TablePartContext = /*#__PURE__*/React.createContext(undefined);
+function useTablePart() {
+  var context = React.useContext(TablePartContext);
+
+  if (context === undefined) {
+    throw new Error('useTablePartContext must be used inside the <TablePartContextProvider/>');
+  }
+
+  return context;
+}
+function TablePartContextProvider(props) {
+  return /*#__PURE__*/React__default.createElement(TablePartContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+var DataContext = /*#__PURE__*/React.createContext(undefined);
+function useData(value) {
+  var context = React.useContext(DataContext);
+
+  if (value !== undefined) {
+    return value;
+  }
+
+  if (context === undefined) {
+    throw new Error('useDataContext must be used inside the <DataContextProvider/>');
+  }
+
+  return context;
+}
+function DataContextProvider(props) {
+  return /*#__PURE__*/React__default.createElement(DataContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+function DataTable(props) {
+  var children = props.children;
+  var columns = findColumns(children);
+  var data = useData(props.data);
+  return /*#__PURE__*/React__default.createElement(DataContextProvider, {
+    value: data
+  }, /*#__PURE__*/React__default.createElement(TablePartContextProvider, {
+    value: "definition"
+  }, /*#__PURE__*/React__default.createElement(ColumnsContextProvider, {
+    value: columns
+  }, children)));
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+var defineProperty = _defineProperty;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var defaultTableComponents = {
+  Table: 'table',
+  Thead: 'thead',
+  Tbody: 'tbody',
+  Tr: 'tr',
+  Th: 'th',
+  Td: 'td'
+};
+var TableComponentsContext = /*#__PURE__*/React.createContext(defaultTableComponents);
+function useTableComponentsContext() {
+  return React.useContext(TableComponentsContext);
+}
+function TableComponentsContextProvider(props) {
+  var contextValue = useTableComponentsContext();
+  var value = React.useMemo(function () {
+    return _objectSpread(_objectSpread({}, contextValue), props.value);
+  }, [contextValue, props.value]);
+  return /*#__PURE__*/React__default.createElement(TableComponentsContext.Provider, {
+    value: value
+  }, props.children);
+}
+
+function Columns(props) {
+  var children = props.children;
+  var part = useTablePart();
+
+  if (part === 'definition') {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, children);
+}
+Columns.__COLUMNS__ = true;
+
+var RowDataContext = /*#__PURE__*/React.createContext(undefined);
+function useRowData() {
+  var context = React.useContext(RowDataContext);
+
+  if (context === undefined) {
+    throw new Error('useRowDataContext must be used inside the <RowDataContextProvider/>');
+  }
+
+  return context;
+}
+function RowDataContextProvider(props) {
+  return /*#__PURE__*/React__default.createElement(RowDataContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+function path(path, obj) {
+  var current = obj;
+  path.forEach(function (prop) {
+    var _current;
+
+    current = (_current = current) === null || _current === void 0 ? void 0 : _current[prop];
+  });
+  return current;
+}
+
+function getValue(data, accessor) {
+  if (accessor === null) {
+    return null;
+  }
+
+  if (typeof accessor === 'string') {
+    return path(accessor.split('.'), data);
+  }
+
+  return accessor(data);
+}
+
+function useContentValue(accessor) {
+  var row = useRowData();
+  return getValue(row, accessor);
+}
+
+var ContentContext = /*#__PURE__*/React.createContext(undefined);
+function useContent() {
+  var context = React.useContext(ContentContext);
+
+  if (context === undefined) {
+    throw new Error('useContentContext must be used inside the <ContentContextProvider/>');
+  }
+
+  return context;
+}
+function ContentContextProvider(props) {
+  return /*#__PURE__*/React__default.createElement(ContentContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+function DefaultContent(props) {
+  var value = useContent();
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, value);
+}
+
+function ContentValue(props) {
+  var accessor = props.accessor,
+      _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__default.createElement(DefaultContent, null) : _props$children;
+  var value = useContentValue(accessor);
+  return /*#__PURE__*/React__default.createElement(ContentContextProvider, {
+    value: value
+  }, children);
+}
+
+function Cell(props) {
+  var accessor = props.accessor,
+      children = props.children;
+  var Components = useTableComponentsContext();
+  return /*#__PURE__*/React__default.createElement(ContentValue, {
+    accessor: accessor
+  }, /*#__PURE__*/React__default.createElement(Components.Td, null, children));
+}
+
+function HeaderCell(props) {
+  var children = props.children;
+  var Components = useTableComponentsContext();
+  return /*#__PURE__*/React__default.createElement(Components.Th, null, children);
+}
+
+function Column(props) {
+  var _props$children = props.children,
+      children = _props$children === void 0 ? /*#__PURE__*/React__default.createElement(DefaultContent, null) : _props$children,
+      _props$accessor = props.accessor,
+      accessor = _props$accessor === void 0 ? null : _props$accessor,
+      header = props.header;
+  var part = useTablePart();
+
+  if (part === 'header') {
+    return /*#__PURE__*/React__default.createElement(HeaderCell, null, header);
+  }
+
+  if (part === 'body') {
+    return /*#__PURE__*/React__default.createElement(Cell, {
+      accessor: accessor
+    }, children);
+  }
+
+  return null;
+}
+
+function TableHeader(props) {
+  var children = props.children;
+  var Components = useTableComponentsContext();
+  return /*#__PURE__*/React__default.createElement(TablePartContextProvider, {
+    value: "header"
+  }, /*#__PURE__*/React__default.createElement(Components.Thead, null, children));
+}
+
+function HeaderRow(props) {
+  var Components = useTableComponentsContext();
+  var columns = useColumns();
+  return /*#__PURE__*/React__default.createElement(Components.Tr, null, columns);
+}
+
+var IndexContext = /*#__PURE__*/React.createContext(undefined);
+function useIndex() {
+  var context = React.useContext(IndexContext);
+
+  if (context === undefined) {
+    throw new Error('useIndexContext must be used inside the <IndexContextProvider/>');
+  }
+
+  return context;
+}
+function IndexContextProvider(props) {
+  return /*#__PURE__*/React__default.createElement(IndexContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+var CurrentValueContext = /*#__PURE__*/React.createContext(undefined);
+function useCurrentValue(value) {
+  var context = React.useContext(CurrentValueContext);
+
+  if (value !== undefined) {
+    return value;
+  }
+
+  if (context === undefined) {
+    throw new Error('useCurrentValue must be used inside the <ItemContextProvider/>');
+  }
+
+  return context;
+}
+function CurrentValueContextProvider(props) {
+  return /*#__PURE__*/React__default.createElement(CurrentValueContext.Provider, {
+    value: props.value
+  }, props.children);
+}
+
+var defaultGetKey = function defaultGetKey(value, index) {
+  return index;
+};
+
+function ArrayOutput(props) {
+  var values = props.value,
+      children = props.children,
+      _props$getKey = props.getKey,
+      getKey = _props$getKey === void 0 ? defaultGetKey : _props$getKey;
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, values.map(function (value, index) {
+    return /*#__PURE__*/React__default.createElement(CurrentValueContextProvider, {
+      value: value,
+      key: getKey(value, index)
+    }, /*#__PURE__*/React__default.createElement(IndexContextProvider, {
+      value: index
+    }, children));
+  }));
+}
+
+function Rows(props) {
+  var children = props.children,
+      keyAccessor = props.keyAccessor;
+  var data = useData(props.data);
+  var getKey = React.useMemo(function () {
+    if (keyAccessor) {
+      return function (value) {
+        return getValue(value, keyAccessor);
+      };
+    }
+  }, [keyAccessor]);
+  return /*#__PURE__*/React__default.createElement(ArrayOutput, {
+    value: data,
+    getKey: getKey
+  }, children);
+}
+
+function Row(props) {
+  var Components = useTableComponentsContext();
+  var columns = useColumns();
+  var row = useCurrentValue(props.row);
+  return /*#__PURE__*/React__default.createElement(RowDataContextProvider, {
+    value: row
+  }, /*#__PURE__*/React__default.createElement(Components.Tr, null, columns));
+}
+
+function TableBody(props) {
+  var children = props.children;
+  var Components = useTableComponentsContext();
+  return /*#__PURE__*/React__default.createElement(TablePartContextProvider, {
+    value: "body"
+  }, /*#__PURE__*/React__default.createElement(Components.Tbody, null, children));
+}
+
+function Table(props) {
+  var children = props.children;
+  var Components = useTableComponentsContext();
+  return /*#__PURE__*/React__default.createElement(Components.Table, null, children);
+}
+
+exports.ArrayOutput = ArrayOutput;
+exports.Cell = Cell;
+exports.Column = Column;
+exports.Columns = Columns;
+exports.ColumnsContext = ColumnsContext;
+exports.ColumnsContextProvider = ColumnsContextProvider;
+exports.ContentContext = ContentContext;
+exports.ContentContextProvider = ContentContextProvider;
+exports.ContentValue = ContentValue;
+exports.CurrentValueContext = CurrentValueContext;
+exports.CurrentValueContextProvider = CurrentValueContextProvider;
+exports.DataContext = DataContext;
+exports.DataContextProvider = DataContextProvider;
+exports.DataTable = DataTable;
+exports.DefaultContent = DefaultContent;
+exports.HeaderCell = HeaderCell;
+exports.HeaderRow = HeaderRow;
+exports.IndexContext = IndexContext;
+exports.IndexContextProvider = IndexContextProvider;
+exports.Row = Row;
+exports.RowDataContext = RowDataContext;
+exports.RowDataContextProvider = RowDataContextProvider;
+exports.Rows = Rows;
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableComponentsContext = TableComponentsContext;
+exports.TableComponentsContextProvider = TableComponentsContextProvider;
+exports.TableHeader = TableHeader;
+exports.TablePartContext = TablePartContext;
+exports.TablePartContextProvider = TablePartContextProvider;
+exports.findColumns = findColumns;
+exports.getValue = getValue;
+exports.isColumnsType = isColumnsType;
+exports.useColumns = useColumns;
+exports.useContent = useContent;
+exports.useContentValue = useContentValue;
+exports.useCurrentValue = useCurrentValue;
+exports.useData = useData;
+exports.useIndex = useIndex;
+exports.useRowData = useRowData;
+exports.useTableComponentsContext = useTableComponentsContext;
+exports.useTablePart = useTablePart;

package.json

 {
   "name": "@ctablex/core",
   "description": "Flexible and powerful react table",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "license": "MIT",
@@ -18,2 +18,9 @@ "main": "lib/ctablex.js",
   ],
+  "keywords": [
+    "react",
+    "table",
+    "ctablex",
+    "react-table",
+    "datagrid"
+  ],
   "publishConfig": {
@@ -41,3 +48,7 @@ "access": "public"
     "@commitlint/config-conventional": "^9.0.1",
+    "@testing-library/jest-dom": "^5.10.1",
+    "@testing-library/react": "^10.3.0",
     "@types/jest": "26.0.0",
+    "@types/react": "^16.9.41",
+    "@types/testing-library__jest-dom": "^5.9.1",
     "husky": "4.2.5",
@@ -47,4 +58,10 @@ "libton-script": "0.12.7",
     "markdown-toc": "^1.2.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "standard-version": "^8.0.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^16.9.38",
+    "react": "^16.9.0"
   }
 }

README.md

@@ -5,6 +5,6 @@ # ctablex
 [![NPM downloads](https://badgen.net/npm/dm/@ctablex/core)](https://npmjs.com/package/@ctablex/core)
-[![Build Status](https://travis-ci.com/ctablex/core.svg?branch=master)](https://travis-ci.com/ctablex/core)
-[![codecov](https://codecov.io/gh/ctablex/core/branch/master/graph/badge.svg)](https://codecov.io/gh/ctablex/core)
+[![Build Status](https://travis-ci.com/sahabpardaz/ctablex.svg?branch=master)](https://travis-ci.com/sahabpardaz/ctablex)
+[![codecov](https://codecov.io/gh/sahabpardaz/ctablex/branch/master/graph/badge.svg)](https://codecov.io/gh/sahabpardaz/ctablex)
 
-Flexible and powerful react table
+Featureable, flexible and powerful react table. `ctablex` will not hold you back and let you customize table UI and behavior. `ctablex` name is the combination of `table` and `ctx` (context).
 
@@ -27,6 +27,64 @@ <!-- toc -->
 ```js
-import { ctablex } from '@ctablex/core';
+import React from 'react';
+import {
+  DataTable,
+  Columns,
+  Column,
+  IndexCell,
+  Table,
+  TableHeader,
+  HeaderRow,
+  TableBody,
+  Rows,
+  Row,
+} from '@ctablex/core';
 
-ctablex();
-//=> ctablex
+const data = [
+    id: '1',
+    name: 'Gloves',
+    price: 544,
+    count: 5,
+  },
+  {
+    id: '2',
+    name: 'Salad',
+    price: 601,
+    count: 6,
+  },
+  {
+    id: '3',
+    name: 'Keyboard',
+    price: 116,
+    count: 1,
+  },
+];
+export function MyTable() {
+  return (
+    <DataTable data={data}>
+      <Columns>
+        <Column header="Name" accessor="name" />
+        <Column header="Price" accessor="price" />
+        <Column header="Count" accessor="count" />
+      </Columns>
+      <Table>
+        <TableHeader>
+          <HeaderRow />
+        </TableHeader>
+        <TableBody>
+          <Rows>
+            <Row />
+          </Rows>
+        </TableBody>
+      </Table>
+    </DataTable>
+  );
+}
 ```
+
+## Changelog
+
+Please read the changelog [here](https://github.com/sahabpardaz/ctablex/blob/master/CHANGELOG.md).
+
+## License
+
+This project is licensed under the terms of the [Apache License 2.0](https://github.com/sahabpardaz/ctablex/blob/master/LICENSE).

src/index.ts

@@ -1,12 +0,62 @@
-// read more about doc comment syntax in https://api-extractor.com/pages/tsdoc/doc_comment_syntax/
+export { DataTable } from './data/DataTable';
+export {
+  TableComponentsContext,
+  useTableComponentsContext,
+  TableComponentsContextProvider,
+} from './TableComponentsContext';
+export { useData, DataContext, DataContextProvider } from './data/DataContext';
 
-/**
- * Flexible and powerful react table
- *
- * @remarks
- * provide {@link ctablex} function that returns `ctablex` string
- *
- * @packageDocumentation
- */
+export { Columns } from './column/Columns';
+export { Column } from './column/Column';
+export {
+  useColumns,
+  ColumnsContext,
+  ColumnsContextProvider,
+} from './column/ColumnsContext';
+export { isColumnsType } from './column/ColumnsType';
+export { findColumns } from './column/findColumns';
 
-export { ctablex } from './ctablex';
+export { TableHeader } from './header/TableHeader';
+export { HeaderRow } from './header/HeaderRow';
+export { HeaderCell } from './header/HeaderCell';
+
+export { Rows } from './row/Rows';
+export { Row } from './row/Row';
+export {
+  useRowData,
+  RowDataContextProvider,
+  RowDataContext,
+} from './row/RowDataContext';
+
+export { TableBody } from './table/TableBody';
+export { Table } from './table/Table';
+export {
+  TablePartContext,
+  TablePartContextProvider,
+  useTablePart,
+} from './table/TablePartContext';
+
+export { ContentValue } from './content/ContentValue';
+export { useContentValue } from './content/useContentValue';
+export { DefaultContent } from './content/DefaultContent';
+
+export { Cell } from './cell/Cell';
+export {
+  ContentContext,
+  ContentContextProvider,
+  useContent,
+} from './content/ContentContext';
+
+export { ArrayOutput } from './array/ArrayOutput';
+export {
+  useCurrentValue,
+  CurrentValueContextProvider,
+  CurrentValueContext,
+} from './array/CurrentValueContext';
+export {
+  useIndex,
+  IndexContext,
+  IndexContextProvider,
+} from './array/IndexContext';
+
+export { getValue } from './utils/getValue';

src/types.d.ts

@@ -1,1 +0,47 @@
-export { Options } from './ctablex';
+export {
+  TableComponentsContextType,
+  TableComponentsContextProviderProps,
+} from './TableComponentsContext';
+export {
+  CurrentValueContextType,
+  CurrentValueContextProviderProps,
+} from './array/CurrentValueContext';
+export {
+  IndexContextType,
+  IndexContextProviderProps,
+} from './array/IndexContext';
+export {
+  ContentContextType,
+  ContentContextProviderProps,
+} from './content/ContentContext';
+export {
+  ColumnsContextType,
+  ColumnsContextProviderProps,
+} from './column/ColumnsContext';
+export { ColumnsType } from './column/ColumnsType';
+export { DataContextType, DataContextProviderProps } from './data/DataContext';
+export {
+  RowDataContextType,
+  RowDataContextProviderProps,
+} from './row/RowDataContext';
+export {
+  TablePartContextType,
+  TablePartType,
+  TablePartContextProviderProps,
+} from './table/TablePartContext';
+export { Accessor } from './utils/accessor';
+
+export { ArrayOutputProps } from './array/ArrayOutput';
+export { CellProps } from './cell/Cell';
+export { ColumnProps } from './column/Column';
+export { ColumnsProps } from './column/Columns';
+export { ContentValueProps } from './content/ContentValue';
+export { DataTableProps } from './data/DataTable';
+export { DefaultContentProps } from './content/DefaultContent';
+export { HeaderCellProps } from './header/HeaderCell';
+export { HeaderRowProps } from './header/HeaderRow';
+export { RowProps } from './row/Row';
+export { RowsProps } from './row/Rows';
+export { TableBodyProps } from './table/TableBody';
+export { TableHeaderProps } from './header/TableHeader';
+export { TableProps } from './table/Table';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

103934

increased by524.45%

Number of package files

43

increased by207.14%

Lines of code

2330

increased by1443.05%

Number of lines in readme file

89

increased by187.1%

Worsened metrics

Dependency count

2

increased byInfinity%

Dev dependency count

14

increased by75%

Number of low quality alerts

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes