@bolio-ui/core 1.0.4 → 1.0.6

package/esm/Table/Table.js

@@ -0,0 +1,115 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "data", "initialData", "hover", "emptyText", "onRow", "onCell", "onChange", "className", "rowClassName"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import TableHead from './TableHead';
+import TableBody from './TableBody';
+import useRealShape from '../utils/use-real-shape';
+import useResize from '../utils/use-resize';
+import { TableContext } from './TableContext';
+import useScale, { withScale } from '../use-scale';
+import TableColumn from './TableColumn';
+var defaultProps = {
+  hover: true,
+  initialData: [],
+  emptyText: '',
+  className: '',
+  rowClassName: function rowClassName() {
+    return '';
+  }
+};
+
+function TableComponent(tableProps) {
+  /* eslint-disable  @typescript-eslint/no-unused-vars */
+  var _ref = tableProps,
+      children = _ref.children,
+      customData = _ref.data,
+      initialData = _ref.initialData,
+      hover = _ref.hover,
+      emptyText = _ref.emptyText,
+      onRow = _ref.onRow,
+      onCell = _ref.onCell,
+      onChange = _ref.onChange,
+      className = _ref.className,
+      rowClassName = _ref.rowClassName,
+      props = _objectWithoutProperties(_ref, _excluded);
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var ref = useRef(null);
+
+  var _useRealShape = useRealShape(ref),
+      _useRealShape2 = _slicedToArray(_useRealShape, 2),
+      width = _useRealShape2[0].width,
+      updateShape = _useRealShape2[1];
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      columns = _useState2[0],
+      setColumns = _useState2[1];
+
+  var _useState3 = useState(initialData),
+      _useState4 = _slicedToArray(_useState3, 2),
+      data = _useState4[0],
+      setData = _useState4[1];
+
+  var updateColumn = function updateColumn(column) {
+    setColumns(function (last) {
+      var hasColumn = last.find(function (item) {
+        return item.prop === column.prop;
+      });
+      if (!hasColumn) return [].concat(_toConsumableArray(last), [column]);
+      return last.map(function (item) {
+        if (item.prop !== column.prop) return item;
+        return column;
+      });
+    });
+  };
+
+  var contextValue = useMemo(function () {
+    return {
+      columns: columns,
+      updateColumn: updateColumn
+    };
+  }, [columns]);
+  useEffect(function () {
+    if (typeof customData === 'undefined') return;
+    setData(customData);
+  }, [customData]);
+  useResize(function () {
+    return updateShape();
+  });
+  return /*#__PURE__*/React.createElement(TableContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("table", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["2991182230", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), /*#__PURE__*/React.createElement(TableHead, {
+    columns: columns,
+    width: width
+  }), /*#__PURE__*/React.createElement(TableBody, {
+    data: data,
+    hover: hover,
+    emptyText: emptyText,
+    onRow: onRow,
+    onCell: onCell,
+    rowClassName: rowClassName
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2991182230",
+    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}"))));
+}
+
+TableComponent.defaultProps = defaultProps;
+TableComponent.displayName = 'BolioUITable';
+TableComponent.Column = TableColumn;
+var Table = withScale(TableComponent);
+Table.Column = TableColumn;
+export default Table;

package/esm/Table/TableBody.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TableDataItemBase, TableOnCellClick, TableOnRowClick, TableRowClassNameHandler } from "./TableTypes";
+interface Props<TableDataItem extends TableDataItemBase> {
+    hover: boolean;
+    emptyText: string;
+    onRow?: TableOnRowClick<TableDataItem>;
+    onCell?: TableOnCellClick<TableDataItem>;
+    data: Array<TableDataItem>;
+    className?: string;
+    rowClassName: TableRowClassNameHandler<TableDataItem>;
+}
+declare const defaultProps: {
+    className: string;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
+export declare type TableBodyProps<TableDataItem> = Props<TableDataItem> & NativeAttrs;
+declare const TableBody: {
+    <TableDataItem extends TableDataItemBase>({ data, hover, emptyText, onRow, onCell, rowClassName }: Props<TableDataItem> & NativeAttrs & {
+        className: string;
+    }): JSX.Element;
+    defaultProps: {
+        className: string;
+    };
+    displayName: string;
+};
+export default TableBody;

package/esm/Table/TableBody.js

@@ -0,0 +1,54 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import TableCell from './TableCell';
+import { useTableContext } from './TableContext';
+import useClasses from '../use-classes';
+var defaultProps = {
+  className: ''
+};
+
+var TableBody = function TableBody(_ref) {
+  var data = _ref.data,
+      hover = _ref.hover,
+      emptyText = _ref.emptyText,
+      onRow = _ref.onRow,
+      onCell = _ref.onCell,
+      rowClassName = _ref.rowClassName;
+  var theme = useTheme();
+
+  var _useTableContext = useTableContext(),
+      columns = _useTableContext.columns;
+
+  var rowClickHandler = function rowClickHandler(row, index) {
+    onRow && onRow(row, index);
+  };
+
+  return /*#__PURE__*/React.createElement("tbody", {
+    className: _JSXStyle.dynamic([["3433300570", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
+  }, data.map(function (row, index) {
+    var className = rowClassName(row, index);
+    return /*#__PURE__*/React.createElement("tr", {
+      key: "tbody-row-".concat(index),
+      onClick: function onClick() {
+        return rowClickHandler(row, index);
+      },
+      className: _JSXStyle.dynamic([["3433300570", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses({
+        hover: hover
+      }, className) || "")
+    }, /*#__PURE__*/React.createElement(TableCell, {
+      columns: columns,
+      row: row,
+      rowIndex: index,
+      emptyText: emptyText,
+      onCellClick: onCell
+    }));
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3433300570",
+    dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
+  }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
+};
+
+TableBody.defaultProps = defaultProps;
+TableBody.displayName = 'BolioUITableBody';
+export default TableBody;

package/esm/Table/TableCell.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TableDataItemBase, TableAbstractColumn, TableOnCellClick } from "./TableTypes";
+interface Props<TableDataItem extends TableDataItemBase> {
+    columns: Array<TableAbstractColumn<TableDataItem>>;
+    row: TableDataItem;
+    rowIndex: number;
+    emptyText: string;
+    onCellClick?: TableOnCellClick<TableDataItem>;
+}
+export declare type TableCellData<TableDataItem> = {
+    row: number;
+    column: number;
+    rowValue: TableDataItem;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
+export declare type TableCellProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
+declare const TableCell: <TableDataItem extends TableDataItemBase>({ columns, row, rowIndex, emptyText, onCellClick }: TableCellProps<TableDataItem>) => JSX.Element;
+export default TableCell;

package/esm/Table/TableColumn.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TableColumnRender, TableDataItemBase } from "./TableTypes";
+export declare type TableColumnProps<TableDataItem> = {
+    prop: keyof TableDataItem;
+    label?: string;
+    width?: number;
+    className?: string;
+    render?: TableColumnRender<TableDataItem>;
+};
+declare const TableColumn: {
+    <TableDataItem extends TableDataItemBase>(columnProps: React.PropsWithChildren<TableColumnProps<TableDataItem>>): null;
+    defaultProps: {
+        className: string;
+        render: () => void;
+    };
+    displayName: string;
+};
+export default TableColumn;

package/esm/Table/TableColumn.js

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useTableContext } from './TableContext';
+import useWarning from '../utils/use-warning';
+var defaultProps = {
+  className: '',
+  render: function render() {}
+};
+
+var TableColumn = function TableColumn(columnProps) {
+  var _ref = columnProps,
+      children = _ref.children,
+      prop = _ref.prop,
+      label = _ref.label,
+      width = _ref.width,
+      className = _ref.className,
+      renderHandler = _ref.render;
+
+  var _useTableContext = useTableContext(),
+      updateColumn = _useTableContext.updateColumn;
+
+  var safeProp = "".concat(prop).trim();
+
+  if (!safeProp) {
+    useWarning('The props "prop" is required.', 'Table.Column');
+  }
+
+  useEffect(function () {
+    updateColumn({
+      label: children || label,
+      prop: safeProp,
+      width: width,
+      className: className,
+      renderHandler: renderHandler
+    });
+  }, [children, label, prop, width, className, renderHandler]);
+  return null;
+};
+
+TableColumn.defaultProps = defaultProps;
+TableColumn.displayName = 'BolioUITableColumn';
+export default TableColumn;

package/esm/Table/TableContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TableAbstractColumn } from "./TableTypes";
+export interface TableConfig<T> {
+    columns: Array<TableAbstractColumn<T>>;
+    updateColumn: (column: TableAbstractColumn<T>) => void;
+}
+export declare const TableContext: React.Context<TableConfig<any>>;
+export declare const useTableContext: <T>() => TableConfig<T>;

package/esm/Table/TableHead.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TableAbstractColumn, TableDataItemBase } from "./TableTypes";
+interface Props<TableDataItem extends TableDataItemBase> {
+    width: number;
+    columns: Array<TableAbstractColumn<TableDataItem>>;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
+export declare type TableHeadProps<TableDataItem> = Props<TableDataItem> & NativeAttrs;
+declare const TableHead: {
+    <TableDataItem extends TableDataItemBase>(props: TableHeadProps<TableDataItem>): JSX.Element;
+    defaultProps: {
+        className: string;
+    };
+    displayName: string;
+};
+export default TableHead;

package/esm/Table/TableTypes.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare type TableDataItemBase = Record<string, any>;
+export declare type TableColumnRender<Item extends TableDataItemBase> = (value: Item[keyof Item], rowData: Item, rowIndex: number) => JSX.Element | void;
+export declare type TableAbstractColumn<TableDataItem> = {
+    prop: keyof TableDataItem;
+    label: React.ReactNode | string;
+    className: string;
+    width?: number;
+    renderHandler: TableColumnRender<TableDataItem>;
+};
+export declare type TableOnRowClick<TableDataItem> = (rowData: TableDataItem, rowIndex: number) => void;
+export declare type TableOnCellClick<TableDataItem> = (cellValue: TableDataItem[keyof TableDataItem], rowIndex: number, colunmIndex: number) => void;
+export declare type TableOnChange<TableDataItem> = (data: Array<TableDataItem>) => void;
+export declare type TableRowClassNameHandler<TableDataItem> = (rowData: TableDataItem, rowIndex: number) => string;

package/esm/Table/index.d.ts

@@ -0,0 +1,5 @@
+import Table from "./Table";
+export type { TableProps } from "./Table";
+export type { TableColumnProps } from "./TableColumn";
+export type { TableOnCellClick, TableAbstractColumn, TableOnChange, TableOnRowClick, TableRowClassNameHandler, TableDataItemBase, TableColumnRender } from "./TableTypes";
+export default Table;

package/esm/Table/index.js

@@ -0,0 +1,2 @@
+import Table from './Table';
+export default Table;

package/esm/Table/stories.js

@@ -0,0 +1,269 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import Table from '.';
+import Code from '../Code';
+import Text from '../Text';
+import Button from '../Button';
+export default {
+  title: 'Data Display/Table',
+  component: Table
+};
+export var Default = function Default() {
+  var data = [{
+    property: 'type',
+    description: 'Content type',
+    type: 'secondary | warning',
+    "default": '-'
+  }, {
+    property: 'Component',
+    description: 'DOM element to use',
+    type: 'string',
+    "default": '-'
+  }, {
+    property: 'bold',
+    description: 'Bold style',
+    type: 'boolean',
+    "default": 'true'
+  }];
+  return /*#__PURE__*/React.createElement(Table, {
+    data: data
+  }, /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "property",
+    label: "property"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "description",
+    label: "description"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "type",
+    label: "type"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "default",
+    label: "default"
+  }));
+};
+export var Compose = function Compose() {
+  var data = [{
+    property: 'type',
+    description: 'Content type',
+    type: 'secondary | warning',
+    "default": '-'
+  }, {
+    property: 'Component',
+    description: 'DOM element to use',
+    type: /*#__PURE__*/React.createElement(Code, null, "string"),
+    "default": '-'
+  }, {
+    property: /*#__PURE__*/React.createElement(Text, {
+      b: true
+    }, "bold"),
+    description: 'Bold style',
+    type: /*#__PURE__*/React.createElement(Code, null, "boolean"),
+    "default": /*#__PURE__*/React.createElement(Code, null, "true")
+  }];
+  return /*#__PURE__*/React.createElement(Table, {
+    data: data
+  }, /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "property",
+    label: "property"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "description",
+    label: "description"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "type",
+    label: "type"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "default",
+    label: "default"
+  }));
+};
+export var Width = function Width() {
+  var data = [{
+    property: 'type',
+    description: 'Content type',
+    type: 'secondary | warning',
+    "default": '-'
+  }, {
+    property: 'Component',
+    description: 'DOM element to use',
+    type: /*#__PURE__*/React.createElement(Code, null, "string"),
+    "default": '-'
+  }, {
+    property: /*#__PURE__*/React.createElement(Text, {
+      b: true
+    }, "bold"),
+    description: 'Bold style',
+    type: /*#__PURE__*/React.createElement(Code, null, "boolean"),
+    "default": /*#__PURE__*/React.createElement(Code, null, "true")
+  }];
+  return /*#__PURE__*/React.createElement(Table, {
+    data: data
+  }, /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "property",
+    label: "property",
+    width: 50
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "description",
+    label: "description"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "type",
+    label: "type"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "default",
+    label: "default"
+  }));
+};
+export var Actions = function Actions() {
+  var dataSource = [{
+    property: 'type',
+    description: 'Content type',
+    operation: ''
+  }, {
+    property: 'Component',
+    description: 'DOM element to use',
+    operation: ''
+  }, {
+    property: /*#__PURE__*/React.createElement(Text, {
+      b: true
+    }, "bold"),
+    description: 'Bold style',
+    operation: ''
+  }];
+
+  var _useState = useState(dataSource),
+      _useState2 = _slicedToArray(_useState, 2),
+      data = _useState2[0],
+      setData = _useState2[1];
+
+  var renderAction = function renderAction(value, rowData, index) {
+    var removeHandler = function removeHandler() {
+      setData(function (last) {
+        return last.filter(function (_, dataIndex) {
+          return dataIndex !== index;
+        });
+      });
+    };
+
+    return /*#__PURE__*/React.createElement(Button, {
+      type: "error",
+      auto: true,
+      scale: 1 / 3,
+      font: "12px",
+      onClick: removeHandler
+    }, "Remove");
+  };
+
+  return /*#__PURE__*/React.createElement(Table, {
+    data: data,
+    onChange: function onChange(value) {
+      return setData(value);
+    }
+  }, /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "property",
+    label: "property"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "description",
+    label: "description"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "operation",
+    label: "operation",
+    width: 150,
+    render: renderAction
+  }));
+};
+export var UpdateRow = function UpdateRow() {
+  var dataSource = [{
+    property: 'type',
+    description: 'Content type',
+    operation: ''
+  }, {
+    property: 'Component',
+    description: 'DOM element to use',
+    operation: ''
+  }, {
+    property: /*#__PURE__*/React.createElement(Text, {
+      b: true
+    }, "bold"),
+    description: 'Bold style',
+    operation: ''
+  }];
+
+  var _React$useState = React.useState(dataSource),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      data = _React$useState2[0],
+      setData = _React$useState2[1];
+
+  var renderAction = function renderAction(value, rowData, rowIndex) {
+    var updateHandler = function updateHandler() {
+      setData(function (last) {
+        return last.map(function (item, dataIndex) {
+          if (dataIndex !== rowIndex) return item;
+          return _extends({}, item, {
+            property: Math.random().toString(16).slice(-5)
+          });
+        });
+      });
+    };
+
+    return /*#__PURE__*/React.createElement(Button, {
+      type: "secondary",
+      auto: true,
+      scale: 1 / 3,
+      font: "12px",
+      onClick: updateHandler
+    }, "Update");
+  };
+
+  return /*#__PURE__*/React.createElement(Table, {
+    data: data,
+    onChange: function onChange(value) {
+      return setData(value);
+    }
+  }, /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "property",
+    label: "property"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "description",
+    label: "description"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "operation",
+    label: "operation",
+    width: 150,
+    render: renderAction
+  }));
+};
+export var CustomHead = function CustomHead() {
+  var data = [{
+    property: 'type',
+    description: 'Content type',
+    type: 'secondary | warning',
+    "default": '-'
+  }, {
+    property: 'Component',
+    description: 'DOM element to use',
+    type: /*#__PURE__*/React.createElement(Code, null, "string"),
+    "default": '-'
+  }, {
+    property: /*#__PURE__*/React.createElement(Text, {
+      b: true
+    }, "bold"),
+    description: 'Bold style',
+    type: /*#__PURE__*/React.createElement(Code, null, "boolean"),
+    "default": /*#__PURE__*/React.createElement(Code, null, "true")
+  }];
+  return /*#__PURE__*/React.createElement(Table, {
+    data: data
+  }, /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "property",
+    label: "property"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "description",
+    label: "description"
+  }), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "type"
+  }, /*#__PURE__*/React.createElement(Code, null, "type")), /*#__PURE__*/React.createElement(Table.Column, {
+    prop: "default"
+  }, /*#__PURE__*/React.createElement(Text, {
+    b: true
+  }, "default")));
+};

package/esm/Tabs/Tabs.d.ts

@@ -0,0 +1,20 @@
+import React, { CSSProperties } from 'react';
+interface Props {
+    initialValue?: string;
+    value?: string;
+    hideDivider?: boolean;
+    hideBorder?: boolean;
+    highlight?: boolean;
+    onChange?: (val: string) => void;
+    className?: string;
+    leftSpace?: CSSProperties['marginLeft'];
+    hoverHeightRatio?: number;
+    hoverWidthRatio?: number;
+    align?: CSSProperties['justifyContent'];
+    activeClassName?: string;
+    activeStyles?: CSSProperties;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type TabsProps = Props & NativeAttrs;
+declare const Tabs: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+export default Tabs;