@spaced-out/ui-design-system 0.0.38 → 0.0.39

package/lib/components/Table/TableHeader.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BasicTableHead = exports.BasicHeadCell = void 0;
+exports.DefaultTableHeader = DefaultTableHeader;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
+var _Checkbox = require("../Checkbox");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _Row = require("./Row");
+var _TableModule = _interopRequireDefault(require("./Table.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const BasicHeadCell = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultHeaderCell, 'th');
+exports.BasicHeadCell = BasicHeadCell;
+const BasicTableHead = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultTableHead, 'thead');
+exports.BasicTableHead = BasicTableHead;
+const SortIcon = _ref => {
+  let {
+    sortDirection,
+    color,
+    className
+  } = _ref;
+  if (sortDirection === 'original') {
+    return /*#__PURE__*/React.createElement(_Icon.Icon, {
+      color: color,
+      name: "caret-down",
+      size: "small",
+      type: "solid",
+      className: className
+    });
+  } else if (sortDirection === 'asc') {
+    return /*#__PURE__*/React.createElement(_Icon.Icon, {
+      color: color,
+      name: "arrow-up",
+      size: "small",
+      type: "regular",
+      className: className
+    });
+  } else if (sortDirection === 'desc') {
+    return /*#__PURE__*/React.createElement(_Icon.Icon, {
+      color: color,
+      name: "arrow-down",
+      size: "small",
+      type: "regular",
+      className: className
+    });
+  }
+};
+function DefaultTableHeader(props) {
+  const {
+    tableHeaderClassName,
+    className,
+    sortable = false,
+    columns,
+    handleSortClick,
+    sortKey,
+    sortDirection = 'original',
+    handleCheckboxClick,
+    checked,
+    disabled
+  } = props;
+  const tableHeaderCells = () => /*#__PURE__*/React.createElement(React.Fragment, null, columns.map((columnData, index) => {
+    const {
+      key,
+      label,
+      subtext,
+      filterIcon,
+      filtered,
+      className,
+      sticky,
+      sortable: columnSortable = false
+    } = columnData;
+    let headerClassName;
+    const filterable = Boolean(filterIcon);
+    if (sortable && columnSortable || filterable) {
+      headerClassName = (0, _classify.default)(_TableModule.default.defaultHeaderCellSortable, {
+        [_TableModule.default.filtered]: filtered,
+        [_TableModule.default.stickyHeaderCell]: sticky
+      }, _TableModule.default[sortDirection], className);
+    } else {
+      headerClassName = (0, _classify.default)(className, {
+        [_TableModule.default.stickyHeaderCell]: sticky
+      });
+    }
+    const headCellClickHandler = () => {
+      if (sortable && columnSortable && handleSortClick) {
+        handleSortClick(key);
+      }
+    };
+    let columnSortDirection = 'original';
+    if (sortKey === key) {
+      columnSortDirection = sortDirection;
+    }
+    return /*#__PURE__*/React.createElement(BasicHeadCell, {
+      className: (0, _classify.default)({
+        [_TableModule.default.selectedHeader]: sortKey === key && columnSortDirection !== 'original'
+      }, headerClassName),
+      key: index,
+      scope: "col",
+      onClick: headCellClickHandler
+    }, /*#__PURE__*/React.createElement("div", {
+      className: (0, _classify.default)(_TableModule.default.labelContents)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _TableModule.default.labelContainer
+    }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+      color: _Text.TEXT_COLORS.secondary,
+      className: (0, _classify.default)({
+        [_TableModule.default.selectedHeader]: sortKey === key && columnSortDirection !== 'original'
+      })
+    }, label), /*#__PURE__*/React.createElement("span", {
+      className: _TableModule.default.headerSubtext
+    }, subtext && subtext)), (sortable || filterIcon != null) && /*#__PURE__*/React.createElement("div", {
+      className: _TableModule.default.headerIconContainer
+    }, columnSortable && /*#__PURE__*/React.createElement(SortIcon, {
+      color: _Text.TEXT_COLORS.secondary,
+      className: (0, _classify.default)(_TableModule.default.sortArrow, {
+        [_TableModule.default.selectedSortArrow]: sortKey === key
+      }),
+      sortDirection: columnSortDirection
+    }), filterIcon != null && /*#__PURE__*/React.createElement("div", {
+      className: _TableModule.default.filterIcon
+    }, filterIcon))));
+  }));
+  return /*#__PURE__*/React.createElement(BasicTableHead, {
+    className: (0, _classify.default)(_TableModule.default.tableHeaderSortable, tableHeaderClassName, className)
+  }, /*#__PURE__*/React.createElement(_Row.BasicRow, {
+    className: _TableModule.default.defaultHeaderRow
+  }, handleCheckboxClick && /*#__PURE__*/React.createElement(BasicHeadCell, {
+    scope: "col"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _TableModule.default.checkbox
+  }, /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
+    value: "all",
+    checked: checked === 'true' ? true : false,
+    indeterminate: checked === 'mixed',
+    onChange: handleCheckboxClick,
+    disabled: disabled
+  }))), tableHeaderCells()));
+}

package/lib/components/Table/TableHeader.js.flow

@@ -0,0 +1,236 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {ColorTypes} from '../../types/typography';
+import classify from '../../utils/classify';
+import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
+import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
+import {Checkbox} from '../Checkbox';
+import {Icon} from '../Icon';
+import {SubTitleExtraSmall, TEXT_COLORS} from '../Text';
+
+import type {SortDirection} from './hooks';
+import {BasicRow} from './Row';
+import type {GenericObject} from './Table';
+
+import css from './Table.module.css';
+
+
+export type GenericHeaderItem<T: GenericObject, U: GenericObject> = {
+  label: React.Node,
+  key: $Keys<T>,
+  className?: string,
+  filterIcon?: React.Node,
+  filtered?: boolean,
+  subtext?: string,
+  sortable?: boolean,
+  headerIconClassName?: string,
+  sticky?: boolean,
+  render?: React.ComponentType<{
+    data: T,
+    extras?: U,
+    className?: string,
+    selected?: boolean,
+  }>,
+};
+
+export type GenericHeaderItems<T, U> = GenericHeaderItem<T, U>[];
+
+export const BasicHeadCell: ClassNameComponent<'th'> = makeClassNameComponent(
+  css.defaultHeaderCell,
+  'th',
+);
+
+export const BasicTableHead: ClassNameComponent<'thead'> =
+  makeClassNameComponent(css.defaultTableHead, 'thead');
+
+export type TableHeaderProps<T, U> = {
+  className?: string,
+  tableHeaderClassName?: string,
+  sortable?: boolean,
+  columns: GenericHeaderItems<T, U>,
+  handleSortClick?: (sortKey: $Keys<T>) => mixed,
+  sortKey?: $Keys<T>,
+  sortDirection?: SortDirection,
+  checked?: 'true' | 'false' | 'mixed',
+  handleCheckboxClick?: ({value: string, checked: boolean}) => mixed,
+  disabled?: boolean,
+};
+
+const SortIcon = ({
+  sortDirection,
+  color,
+  className,
+}: {
+  sortDirection: SortDirection,
+  className: string,
+  color: ColorTypes,
+}) => {
+  if (sortDirection === 'original') {
+    return (
+      <Icon
+        color={color}
+        name="caret-down"
+        size="small"
+        type="solid"
+        className={className}
+      />
+    );
+  } else if (sortDirection === 'asc') {
+    return (
+      <Icon
+        color={color}
+        name="arrow-up"
+        size="small"
+        type="regular"
+        className={className}
+      />
+    );
+  } else if (sortDirection === 'desc') {
+    return (
+      <Icon
+        color={color}
+        name="arrow-down"
+        size="small"
+        type="regular"
+        className={className}
+      />
+    );
+  }
+};
+
+export function DefaultTableHeader<T: GenericObject, U: GenericObject>(
+  props: TableHeaderProps<T, U>,
+): React.Node {
+  const {
+    tableHeaderClassName,
+    className,
+    sortable = false,
+    columns,
+    handleSortClick,
+    sortKey,
+    sortDirection = 'original',
+    handleCheckboxClick,
+    checked,
+    disabled,
+  } = props;
+
+  const tableHeaderCells = () => (
+    <>
+      {columns.map((columnData, index) => {
+        const {
+          key,
+          label,
+          subtext,
+          filterIcon,
+          filtered,
+          className,
+          sticky,
+          sortable: columnSortable = false,
+        } = columnData;
+        let headerClassName;
+        const filterable = Boolean(filterIcon);
+        if ((sortable && columnSortable) || filterable) {
+          headerClassName = classify(
+            css.defaultHeaderCellSortable,
+            {
+              [css.filtered]: filtered,
+              [css.stickyHeaderCell]: sticky,
+            },
+            css[sortDirection],
+            className,
+          );
+        } else {
+          headerClassName = classify(className, {
+            [css.stickyHeaderCell]: sticky,
+          });
+        }
+
+        const headCellClickHandler = () => {
+          if (sortable && columnSortable && handleSortClick) {
+            handleSortClick(key);
+          }
+        };
+        let columnSortDirection = 'original';
+
+        if (sortKey === key) {
+          columnSortDirection = sortDirection;
+        }
+
+        return (
+          <BasicHeadCell
+            className={classify(
+              {
+                [css.selectedHeader]:
+                  sortKey === key && columnSortDirection !== 'original',
+              },
+              headerClassName,
+            )}
+            key={index}
+            scope="col"
+            onClick={headCellClickHandler}
+          >
+            <div className={classify(css.labelContents)}>
+              <div className={css.labelContainer}>
+                <SubTitleExtraSmall
+                  color={TEXT_COLORS.secondary}
+                  className={classify({
+                    [css.selectedHeader]:
+                      sortKey === key && columnSortDirection !== 'original',
+                  })}
+                >
+                  {label}
+                </SubTitleExtraSmall>
+                <span className={css.headerSubtext}>{subtext && subtext}</span>
+              </div>
+              {(sortable || filterIcon != null) && (
+                <div className={css.headerIconContainer}>
+                  {columnSortable && (
+                    <SortIcon
+                      color={TEXT_COLORS.secondary}
+                      className={classify(css.sortArrow, {
+                        [css.selectedSortArrow]: sortKey === key,
+                      })}
+                      sortDirection={columnSortDirection}
+                    />
+                  )}
+                  {filterIcon != null && (
+                    <div className={css.filterIcon}>{filterIcon}</div>
+                  )}
+                </div>
+              )}
+            </div>
+          </BasicHeadCell>
+        );
+      })}
+    </>
+  );
+
+  return (
+    <BasicTableHead
+      className={classify(
+        css.tableHeaderSortable,
+        tableHeaderClassName,
+        className,
+      )}
+    >
+      <BasicRow className={css.defaultHeaderRow}>
+        {handleCheckboxClick && (
+          <BasicHeadCell scope="col">
+            <div className={css.checkbox}>
+              <Checkbox
+                value="all"
+                checked={checked === 'true' ? true : false}
+                indeterminate={checked === 'mixed'}
+                onChange={handleCheckboxClick}
+                disabled={disabled}
+              />
+            </div>
+          </BasicHeadCell>
+        )}
+        {tableHeaderCells()}
+      </BasicRow>
+    </BasicTableHead>
+  );
+}

package/lib/components/Table/hooks.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSortableEntries = useSortableEntries;
+var React = _interopRequireWildcard(require("react"));
+var _get = _interopRequireDefault(require("lodash/get"));
+var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function useSortableEntries(entries, idName, _ref) {
+  let {
+    defaultSortKey = 'id',
+    defaultSortDirection = 'original',
+    onSort
+  } = _ref;
+  const [sortKey, setSortKey] = React.useState(defaultSortKey);
+  const [sortDirection, setSortDirection] = React.useState(defaultSortDirection);
+  const getNextDirection = direction => {
+    switch (direction) {
+      case 'original':
+        return 'desc';
+      case 'asc':
+        return 'original';
+      case 'desc':
+        return 'asc';
+      default:
+        return 'original';
+    }
+  };
+  const advanceSortDirection = dir => {
+    const nextDirection = getNextDirection(dir);
+    setSortDirection(dir => nextDirection);
+    return nextDirection;
+  };
+  const handleSortClick = React.useCallback(nextSortKey => {
+    let nextSortDirection = sortDirection;
+    if (nextSortKey === sortKey) {
+      nextSortDirection = advanceSortDirection(sortDirection);
+    } else {
+      setSortKey(nextSortKey);
+      setSortDirection('desc');
+    }
+    onSort?.(nextSortKey, nextSortDirection);
+  }, [sortKey, sortDirection, entries]);
+  const sortedEntries = React.useMemo(() => {
+    if (sortDirection === 'original') {
+      return entries;
+    }
+    const sortedDesc = (0, _sortBy.default)(entries, sortKey);
+    if (sortDirection === 'asc') {
+      return sortedDesc;
+    } else {
+      return sortedDesc.reverse();
+    }
+  }, [sortDirection, sortKey, entries]);
+  const sortedKeys = React.useMemo(() => sortedEntries.map(ent => (0, _get.default)(ent, idName)), [sortedEntries]);
+  return {
+    sortedEntries,
+    sortedKeys,
+    sortDirection,
+    sortKey,
+    handleSortClick
+  };
+}

package/lib/components/Table/hooks.js.flow

@@ -0,0 +1,91 @@
+// @flow strict
+
+import * as React from 'react';
+import get from 'lodash/get';
+import sortBy from 'lodash/sortBy';
+
+import type {GenericObject} from './Table';
+
+
+export type SortDirection = 'asc' | 'desc' | 'original';
+
+export function useSortableEntries<T: GenericObject>(
+  entries: Array<T>,
+  idName: $Keys<T>,
+  {
+    defaultSortKey = 'id',
+    defaultSortDirection = 'original',
+    onSort,
+  }: {
+    defaultSortKey?: $Keys<T>,
+    defaultSortDirection?: SortDirection,
+    onSort?: (sortKey: string, sortDirection: SortDirection) => mixed,
+  },
+): {
+  handleSortClick: (sortKey: $Keys<T>) => mixed,
+  sortDirection: SortDirection,
+  sortKey?: string,
+  sortedEntries: T[],
+  sortedKeys: $Keys<T>[],
+} {
+  const [sortKey, setSortKey] = React.useState(defaultSortKey);
+  const [sortDirection, setSortDirection] =
+    React.useState<SortDirection>(defaultSortDirection);
+
+  const getNextDirection = (direction: SortDirection): SortDirection => {
+    switch (direction) {
+    case 'original':
+      return 'desc';
+    case 'asc':
+      return 'original';
+    case 'desc':
+      return 'asc';
+    default:
+      return 'original';
+    }
+  };
+  const advanceSortDirection = (dir: SortDirection) => {
+    const nextDirection = getNextDirection(dir);
+    setSortDirection((dir) => nextDirection);
+    return nextDirection;
+  };
+
+  const handleSortClick = React.useCallback(
+    (nextSortKey: string) => {
+      let nextSortDirection = sortDirection;
+      if (nextSortKey === sortKey) {
+        nextSortDirection = advanceSortDirection(sortDirection);
+      } else {
+        setSortKey(nextSortKey);
+        setSortDirection('desc');
+      }
+      onSort?.(nextSortKey, nextSortDirection);
+    },
+    [sortKey, sortDirection, entries],
+  );
+
+  const sortedEntries = React.useMemo(() => {
+    if (sortDirection === 'original') {
+      return entries;
+    }
+    const sortedDesc = sortBy(entries, sortKey);
+    if (sortDirection === 'asc') {
+      return sortedDesc;
+    } else {
+      return sortedDesc.reverse();
+    }
+  }, [sortDirection, sortKey, entries]);
+
+  const sortedKeys = React.useMemo(
+    () => sortedEntries.map((ent) => get(ent, idName)),
+    [sortedEntries],
+  );
+
+  return {
+    sortedEntries,
+    sortedKeys,
+    sortDirection,
+    sortKey,
+    handleSortClick,
+  };
+}

package/lib/components/Table/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BasicSingleCell", {
+  enumerable: true,
+  get: function () {
+    return _Cell.BasicSingleCell;
+  }
+});
+Object.defineProperty(exports, "DateCell", {
+  enumerable: true,
+  get: function () {
+    return _Cell.DateCell;
+  }
+});
+Object.defineProperty(exports, "DefaultRow", {
+  enumerable: true,
+  get: function () {
+    return _Row.DefaultRow;
+  }
+});
+Object.defineProperty(exports, "DoubleCell", {
+  enumerable: true,
+  get: function () {
+    return _Cell.DoubleCell;
+  }
+});
+Object.defineProperty(exports, "Monogram", {
+  enumerable: true,
+  get: function () {
+    return _Cell.Monogram;
+  }
+});
+Object.defineProperty(exports, "MonogramCell", {
+  enumerable: true,
+  get: function () {
+    return _Cell.MonogramCell;
+  }
+});
+Object.defineProperty(exports, "SingleCell", {
+  enumerable: true,
+  get: function () {
+    return _Cell.SingleCell;
+  }
+});
+Object.defineProperty(exports, "StaticTable", {
+  enumerable: true,
+  get: function () {
+    return _StaticTable.StaticTable;
+  }
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function () {
+    return _Table.Table;
+  }
+});
+var _Cell = require("./Cell");
+var _Row = require("./Row");
+var _StaticTable = require("./StaticTable");
+var _Table = require("./Table");

package/lib/components/Table/index.js.flow

@@ -0,0 +1,14 @@
+// @flow strict
+
+export {
+  BasicSingleCell,
+  DateCell,
+  DoubleCell,
+  Monogram,
+  MonogramCell,
+  SingleCell,
+} from './Cell';
+export {DefaultRow} from './Row';
+export {StaticTable} from './StaticTable';
+export type {TableProps} from './Table';
+export {Table} from './Table';

package/lib/styles/variables/_size.css

@@ -32,6 +32,8 @@
 
 @value size42: 42px;
 
+@value size48: 48px;
+
 @value size58: 58px;
 
 @value size60: 60px;
@@ -71,3 +73,5 @@
 @value sizeFluid: 100%;
 
 @value sizeFullViewportHeight: 100vh;
+
+@value sizeFullViewportWidth: 100vw;

package/lib/styles/variables/_size.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size5 = exports.size480 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
+exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -39,6 +39,8 @@ const size40 = '40px';
 exports.size40 = size40;
 const size42 = '42px';
 exports.size42 = size42;
+const size48 = '48px';
+exports.size48 = size48;
 const size58 = '58px';
 exports.size58 = size58;
 const size60 = '60px';
@@ -78,4 +80,6 @@ exports.size960 = size960;
 const sizeFluid = '100%';
 exports.sizeFluid = sizeFluid;
 const sizeFullViewportHeight = '100vh';
-exports.sizeFullViewportHeight = sizeFullViewportHeight;
+exports.sizeFullViewportHeight = sizeFullViewportHeight;
+const sizeFullViewportWidth = '100vw';
+exports.sizeFullViewportWidth = sizeFullViewportWidth;

package/lib/styles/variables/_size.js.flow

@@ -34,6 +34,8 @@ export const size40 = '40px';
 
 export const size42 = '42px';
 
+export const size48 = '48px';
+
 export const size58 = '58px';
 
 export const size60 = '60px';
@@ -73,3 +75,5 @@ export const size960 = '960px';
 export const sizeFluid = '100%';
 
 export const sizeFullViewportHeight = '100vh';
+
+export const sizeFullViewportWidth = '100vw';

package/lib/utils/makeClassNameComponent.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = makeClassNameComponent;
+exports.makeClassNameComponent = makeClassNameComponent;
 exports.makeClassNameComponentCustom = makeClassNameComponentCustom;
 exports.nameHoc = nameHoc;
 var React = _interopRequireWildcard(require("react"));