@synerise/ds-editable-items-list 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,41 @@
+---
+id: editable-items-list
+title: EditableItemsList
+---
+
+EditableItemsList UI Component
+
+## Installation
+```
+npm i @synerise/ds-editable-items-list
+or
+yarn add @synerise/ds-editable-items-list
+```
+
+## Usage
+```
+import EditableItemsList from '@synerise/ds-editable-items-list'
+
+<EditableItemsList />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-editable-items-list--default"></iframe>
+
+## API
+
+| Property       | Description                                                              | Type                        | Default |
+|----------------|--------------------------------------------------------------------------|-----------------------------|---------|
+| renderRowElement      | Function to render each row. Invoked with item index and item object.    | (index: number, item: T) => ReactElement | -       |
+| items          | Array of items to be rendered, each should have a unique id.             | T[]                         | -       |
+| addButtonLabel | Text or custom component for the "Add" button.                           | string \| ReactNode         | -       |
+| addButtonIcon  | Custom icon for the "Add" button.                                        | ReactElement                | -       |
+| addButtonProps | Additional props for the "Add" button. It can override default style.    | Partial<ButtonProps>        | -       |
+| onAdd          | Callback function called when the "Add" button is clicked.               | () => void                  | -       |
+| minRowLength   | The minimum number of rows to display.                                   | number                      | 1       |
+| maxRowLength   | The maximum number of rows allowed.                                      | number                      | -       |
+| deleteTooltip  | Tooltip text for the delete button.                                      | string                      | -       |
+| onDelete       | Callback function called when a row's delete button is clicked. It receives the ID and index of the row to delete. | (id: string, index: number) => void | -       |
+

package/dist/EditableItemsList.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { EditableItemsListProps } from './EditableItemsList.types';
+declare const EditableItemsList: <T extends {
+    id: string;
+}>({ renderRowElement, items, addButtonLabel, addButtonIcon, addButtonProps, onAdd, minRowLength, maxRowLength, deleteTooltip, onDelete, }: EditableItemsListProps<T>) => ReactNode;
+export default EditableItemsList;

package/dist/EditableItemsList.js

@@ -0,0 +1,61 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+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; }
+
+import React from 'react';
+import Button from '@synerise/ds-button';
+import Icon, { Add3M } from '@synerise/ds-icon';
+import Cruds from '@synerise/ds-cruds';
+import { theme } from '@synerise/ds-core';
+import * as S from './EditableItemsList.style';
+var DEFAULT_ADD_BUTTON_PROPS = {
+  type: 'ghost-primary',
+  style: {
+    transition: 'none'
+  }
+};
+
+var EditableItemsList = function EditableItemsList(_ref) {
+  var renderRowElement = _ref.renderRowElement,
+      _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      addButtonLabel = _ref.addButtonLabel,
+      addButtonIcon = _ref.addButtonIcon,
+      addButtonProps = _ref.addButtonProps,
+      onAdd = _ref.onAdd,
+      _ref$minRowLength = _ref.minRowLength,
+      minRowLength = _ref$minRowLength === void 0 ? 1 : _ref$minRowLength,
+      maxRowLength = _ref.maxRowLength,
+      deleteTooltip = _ref.deleteTooltip,
+      onDelete = _ref.onDelete;
+
+  var mergedAddButtonProps = _objectSpread({}, DEFAULT_ADD_BUTTON_PROPS, {}, addButtonProps, {
+    style: _objectSpread({}, DEFAULT_ADD_BUTTON_PROPS.style, {}, addButtonProps == null ? void 0 : addButtonProps.style)
+  });
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, items.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(S.RowWrapper, {
+      key: item.id,
+      "data-testid": "item-" + item.id
+    }, renderRowElement(index, item), items.length > minRowLength && /*#__PURE__*/React.createElement(S.CrudWrapper, null, /*#__PURE__*/React.createElement(Cruds, {
+      onRemove: onDelete ? function () {
+        return onDelete(item.id, index);
+      } : undefined,
+      removeTooltip: deleteTooltip,
+      "data-testid": "remove-button-" + item.id
+    })));
+  }), /*#__PURE__*/React.createElement(Button, _extends({}, mergedAddButtonProps, {
+    onClick: onAdd,
+    disabled: maxRowLength !== undefined && items.length >= maxRowLength
+  }), addButtonIcon || /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(Add3M, null),
+    size: 24,
+    color: theme.palette['blue-600']
+  }), addButtonLabel));
+};
+
+export default EditableItemsList;

package/dist/EditableItemsList.style.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const CrudWrapper: import("styled-components").StyledComponent<"div", any, {
+    marginWithLabel?: boolean | React.ReactNode;
+}, never>;
+export declare const RowWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/EditableItemsList.style.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+export var CrudWrapper = styled.div.withConfig({
+  displayName: "EditableItemsListstyle__CrudWrapper",
+  componentId: "a71i6b-0"
+})(["padding-left:4px;visibility:hidden;margin-top:0;"]);
+export var RowWrapper = styled.div.withConfig({
+  displayName: "EditableItemsListstyle__RowWrapper",
+  componentId: "a71i6b-1"
+})(["display:flex;justify-content:space-between;align-items:center;padding:0 0 16px 0;&:hover{", "{visibility:visible;}}& > *:not(:last-child){margin-right:12px;}"], CrudWrapper);

package/dist/EditableItemsList.types.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { ButtonProps } from '@synerise/ds-button';
+export type EditableItemsListProps<T extends {
+    id: string;
+}> = {
+    renderRowElement: (index: number, data: T) => ReactElement | null;
+    items?: T[];
+    addButtonProps?: Partial<ButtonProps>;
+    addButtonLabel: string | ReactNode;
+    addButtonIcon?: ReactNode;
+    minRowLength?: number;
+    maxRowLength?: number;
+    deleteTooltip?: string;
+    onDelete: (id: string, index: number) => void;
+    onAdd: React.MouseEventHandler<HTMLElement>;
+};

package/dist/EditableItemsList.types.js

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

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './EditableItemsList';
+export type { EditableItemsListProps } from './EditableItemsList.types';

package/dist/index.js

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

package/dist/modules.d.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@synerise/ds-editable-items-list",
+  "version": "0.0.1",
+  "description": "EditableItemsList UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "pack:ci": "npm pack --pack-destination ../../portal/storybook-static/static",
+    "prepublish": "npm run build",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "types": "tsc --noEmit"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-button": "^0.18.7",
+    "@synerise/ds-cruds": "^0.3.40"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 < 17.0.0",
+    "styled-components": "5.0.1"
+  },
+  "gitHead": "212fee47706d5956bde989445e89ad46ef5c8867"
+}