Merge pull request #525 from folio-org/STRIPES-547-stripes-example-2

FOLIO-1547 implement stripes framework v1
folio-org · Oct 5, 2018 · e3c8d86 · e3c8d86
2 parents 303f256 + d001a9e
commit e3c8d86
Show file tree

Hide file tree

Showing 72 changed files with 434 additions and 331 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,7 @@
 # Change history for ui-users
+## 2.17.0
+* Depend on `@folio/stripes`.
+* Update imports for components moved from `stripes-components` to `stripes-smart-components`.
 
 ## [2.16.0](https://github.com/folio-org/ui-users/tree/v2.16.0) (2018-09-27)
 [Full Changelog](https://github.com/folio-org/ui-users/compare/v2.11.0...v2.16.0)

diff --git a/package.json b/package.json
@@ -437,10 +437,8 @@
   },
   "devDependencies": {
     "@folio/eslint-config-stripes": "^3.2.1",
-    "@folio/stripes-cli": "^1.2.0",
-    "@folio/stripes-connect": "^3.1.1",
-    "@folio/stripes-core": "^2.13.0",
-    "@folio/stripes-logger": "^0.0.2",
+    "@folio/stripes": "^1.0.0",
+    "@folio/stripes-cli": "^1.5.0",
     "babel-eslint": "^9.0.0",
     "eslint": "^5.5.0",
     "react": "^16.5.0",
@@ -450,9 +448,6 @@
   },
   "dependencies": {
     "@folio/react-intl-safe-html": "^1.0.0",
-    "@folio/stripes-components": "^3.1.0",
-    "@folio/stripes-form": "^1.0.0",
-    "@folio/stripes-smart-components": "^1.8.0",
     "hashcode": "^1.0.3",
     "lodash": "^4.17.4",
     "moment": "^2.22.2",
@@ -464,9 +459,7 @@
     "uuid": "^3.0.1"
   },
   "peerDependencies": {
-    "@folio/stripes-connect": "^3.1.1",
-    "@folio/stripes-core": "^2.13.0",
-    "@folio/stripes-logger": "^0.0.2",
+    "@folio/stripes": "^1.0.0",
     "react": "*"
   },
   "optionalDependencies": {

diff --git a/src/AccountActionsHistory.js b/src/AccountActionsHistory.js
@@ -2,13 +2,15 @@ import _ from 'lodash';
 import React from 'react';
 import Link from 'react-router-dom/Link';
 import PropTypes from 'prop-types';
-
-import { Row, Col } from '@folio/stripes-components/lib/LayoutGrid';
-import KeyValue from '@folio/stripes-components/lib/KeyValue';
-import Pane from '@folio/stripes-components/lib/Pane';
-import Paneset from '@folio/stripes-components/lib/Paneset';
-import Button from '@folio/stripes-components/lib/Button';
-import MultiColumnList from '@folio/stripes-components/lib/MultiColumnList';
+import {
+  Paneset,
+  Pane,
+  Button,
+  Row,
+  Col,
+  KeyValue,
+  MultiColumnList,
+} from '@folio/stripes/components';
 
 import { Actions } from './components/Accounts/Actions';
 import { formatDateTime, getFullName } from './util';

diff --git a/src/AccountsHistory.js b/src/AccountsHistory.js
@@ -3,19 +3,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import queryString from 'query-string';
-import Button from '@folio/stripes-components/lib/Button';
-import Icon from '@folio/stripes-components/lib/Icon';
-import Pane from '@folio/stripes-components/lib/Pane';
-import Paneset from '@folio/stripes-components/lib/Paneset';
-import { Row, Col } from '@folio/stripes-components/lib/LayoutGrid';
-import SegmentedControl from '@folio/stripes-components/lib/SegmentedControl';
-import PaneMenu from '@folio/stripes-components/lib/PaneMenu';
-import IconButton from '@folio/stripes-components/lib/IconButton';
-import { filterState } from '@folio/stripes-components/lib/FilterGroups';
-import { Dropdown } from '@folio/stripes-components/lib/Dropdown';
-import Checkbox from '@folio/stripes-components/lib/Checkbox';
-import DropdownMenu from '@folio/stripes-components/lib/DropdownMenu';
-import { makeQueryFunction } from '@folio/stripes-smart-components';
+import {
+  Paneset,
+  Pane,
+  PaneMenu,
+  IconButton,
+  Icon,
+  Button,
+  Dropdown,
+  DropdownMenu,
+  Row,
+  Col,
+  Checkbox,
+  SegmentedControl,
+  filterState,
+} from '@folio/stripes/components';
+import { makeQueryFunction } from '@folio/stripes/smart-components';
 
 import { getFullName } from './util';
 import { Actions } from './components/Accounts/Actions';

diff --git a/src/LoanActionsHistory.js b/src/LoanActionsHistory.js
@@ -3,16 +3,19 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import Link from 'react-router-dom/Link';
 import PropTypes from 'prop-types';
-import ChangeDueDateDialog from '@folio/stripes-smart-components/lib/ChangeDueDateDialog';
-import Popover from '@folio/stripes-components/lib/Popover';
-import { Row, Col } from '@folio/stripes-components/lib/LayoutGrid';
-import Modal from '@folio/stripes-components/lib/Modal';
-import KeyValue from '@folio/stripes-components/lib/KeyValue';
-import MultiColumnList from '@folio/stripes-components/lib/MultiColumnList';
-import Pane from '@folio/stripes-components/lib/Pane';
-import Paneset from '@folio/stripes-components/lib/Paneset';
-import Button from '@folio/stripes-components/lib/Button';
-import Callout from '@folio/stripes-components/lib/Callout';
+import { ChangeDueDateDialog } from '@folio/stripes/smart-components';
+import {
+  Paneset,
+  Pane,
+  Modal,
+  Button,
+  Popover,
+  Callout,
+  MultiColumnList,
+  KeyValue,
+  Row,
+  Col,
+} from '@folio/stripes/components';
 import SafeHTMLMessage from '@folio/react-intl-safe-html';
 import { getFullName } from './util';
 import loanActionMap from './data/loanActionMap';

diff --git a/src/LoanActionsHistoryProxy.js b/src/LoanActionsHistoryProxy.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Link from 'react-router-dom/Link';
-import KeyValue from '@folio/stripes-components/lib/KeyValue';
+import { KeyValue } from '@folio/stripes/components';
 import { getFullName } from './util';
 
 class LoanActionsHistoryProxy extends React.Component {

diff --git a/src/LoansHistory.js b/src/LoansHistory.js
@@ -1,10 +1,12 @@
 import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Paneset from '@folio/stripes-components/lib/Paneset';
-import Pane from '@folio/stripes-components/lib/Pane';
-import Button from '@folio/stripes-components/lib/Button';
-import SegmentedControl from '@folio/stripes-components/lib/SegmentedControl';
+import {
+  Paneset,
+  Pane,
+  Button,
+  SegmentedControl,
+} from '@folio/stripes/components';
 
 import { getFullName } from './util';
 import { OpenLoans, ClosedLoans } from './components/Loans';

diff --git a/src/UserForm.js b/src/UserForm.js
@@ -2,14 +2,17 @@ import _ from 'lodash';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import Paneset from '@folio/stripes-components/lib/Paneset';
-import Pane from '@folio/stripes-components/lib/Pane';
-import PaneMenu from '@folio/stripes-components/lib/PaneMenu';
-import Button from '@folio/stripes-components/lib/Button';
-import IconButton from '@folio/stripes-components/lib/IconButton';
-import stripesForm from '@folio/stripes-form';
-import { ExpandAllButton } from '@folio/stripes-components/lib/Accordion';
-import { Row, Col } from '@folio/stripes-components/lib/LayoutGrid';
+import {
+  Paneset,
+  Pane,
+  PaneMenu,
+  IconButton,
+  Button,
+  ExpandAllButton,
+  Row,
+  Col,
+} from '@folio/stripes/components';
+import stripesForm from '@folio/stripes/form';
 
 import {
   EditUserInfo,

diff --git a/src/Users.js b/src/Users.js
@@ -2,8 +2,8 @@ import _ from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { makeQueryFunction, SearchAndSort } from '@folio/stripes-smart-components';
-import AppIcon from '@folio/stripes-components/lib/AppIcon';
+import { makeQueryFunction, SearchAndSort } from '@folio/stripes/smart-components';
+import { AppIcon } from '@folio/stripes/components';
 
 import uuid from 'uuid';
 import ViewUser from './ViewUser';

diff --git a/src/ViewUser.js b/src/ViewUser.js
@@ -2,17 +2,20 @@ import { cloneDeep, get, omit, differenceBy, find } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import queryString from 'query-string';
-import TitleManager from '@folio/stripes-core/src/components/TitleManager'; // eslint-disable-line import/no-unresolved
-import Pane from '@folio/stripes-components/lib/Pane';
-import PaneMenu from '@folio/stripes-components/lib/PaneMenu';
-import { Row, Col } from '@folio/stripes-components/lib/LayoutGrid';
-import Icon from '@folio/stripes-components/lib/Icon';
-import Layer from '@folio/stripes-components/lib/Layer';
-import IfPermission from '@folio/stripes-components/lib/IfPermission';
-import IfInterface from '@folio/stripes-components/lib/IfInterface';
-import { ExpandAllButton } from '@folio/stripes-components/lib/Accordion';
-import IconButton from '@folio/stripes-components/lib/IconButton';
-import { withTags } from '@folio/stripes-smart-components/lib/Tags';
+import { TitleManager } from '@folio/stripes/core';
+import {
+  Pane,
+  PaneMenu,
+  IconButton,
+  Icon,
+  ExpandAllButton,
+  Row,
+  Col,
+  IfPermission,
+  IfInterface,
+  Layer,
+} from '@folio/stripes/components';
+import { withTags } from '@folio/stripes/smart-components';
 
 import UserForm from './UserForm';
 import LoansHistory from './LoansHistory';

diff --git a/src/components/Accounts/Actions/Actions.js b/src/components/Accounts/Actions/Actions.js
@@ -3,7 +3,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import moment from 'moment';
-import Callout from '@folio/stripes-components/lib/Callout';
+import { Callout } from '@folio/stripes/components';
 import CancellationModal from './CancellationModal';
 import PayModal from './PayModal';
 import WaiveModal from './WaiveModal';
@@ -104,22 +104,22 @@ class Actions extends React.Component {
   showCalloutMessage(a) {
     const message = (
       <span>
-      The
+        The
         {' '}
         {a.feeFineType}
         {' '}
-fee/fine of
+        fee/fine of
         {' '}
         <strong>{parseFloat(a.amount).toFixed(2)}</strong>
         {' '}
-has been successfully
+        has been successfully
         {' '}
         <strong>{a.paymentStatus.name}</strong>
         {' '}
-for
+        for
         {' '}
         <strong>{getFullName(this.props.user)}</strong>
-.
+        .
       </span>
     );
     this.callout.sendCallout({ message });

diff --git a/src/components/Accounts/Actions/CancellationModal.js b/src/components/Accounts/Actions/CancellationModal.js
@@ -2,11 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
 import { FormattedMessage } from 'react-intl';
-import Modal from '@folio/stripes-components/lib/Modal';
-import Button from '@folio/stripes-components/lib/Button';
-import TextArea from '@folio/stripes-components/lib/TextArea';
-import Checkbox from '@folio/stripes-components/lib/Checkbox';
-import { Row, Col } from '@folio/stripes-components/lib/LayoutGrid';
+import {
+  Modal,
+  Button,
+  TextArea,
+  Checkbox,
+  Row,
+  Col,
+} from '@folio/stripes/components';
 
 const validate = (values) => {
   const errors = {};

diff --git a/src/components/Accounts/Actions/CommentModal.js b/src/components/Accounts/Actions/CommentModal.js
@@ -1,10 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
-import { Row, Col } from '@folio/stripes-components/lib/LayoutGrid';
-import Button from '@folio/stripes-components/lib/Button';
-import TextArea from '@folio/stripes-components/lib/TextArea';
-import Modal from '@folio/stripes-components/lib/Modal';
+import {
+  Row,
+  Col,
+  Button,
+  TextArea,
+  Modal,
+} from '@folio/stripes/components';
 import { FormattedMessage } from 'react-intl';
 
 const validate = (values) => {

diff --git a/src/components/Accounts/Actions/PayModal.js b/src/components/Accounts/Actions/PayModal.js
@@ -2,13 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Field, reduxForm } from 'redux-form';
-import Modal from '@folio/stripes-components/lib/Modal';
-import Button from '@folio/stripes-components/lib/Button';
-import Checkbox from '@folio/stripes-components/lib/Checkbox';
-import TextArea from '@folio/stripes-components/lib/TextArea';
-import TextField from '@folio/stripes-components/lib/TextField';
-import Select from '@folio/stripes-components/lib/Select';
-import { Row, Col } from '@folio/stripes-components/lib/LayoutGrid';
+import {
+  Row,
+  Col,
+  Button,
+  TextArea,
+  Modal,
+  TextField,
+  Checkbox,
+  Select,
+} from '@folio/stripes/components';
 
 const validate = (values, props) => {
   const accounts = props.accounts || [];

diff --git a/src/components/Accounts/Actions/WaiveModal.js b/src/components/Accounts/Actions/WaiveModal.js
@@ -1,14 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm } from 'redux-form';
-import Modal from '@folio/stripes-components/lib/Modal';
 import { FormattedMessage } from 'react-intl';
-import Button from '@folio/stripes-components/lib/Button';
-import Checkbox from '@folio/stripes-components/lib/Checkbox';
-import TextArea from '@folio/stripes-components/lib/TextArea';
-import TextField from '@folio/stripes-components/lib/TextField';
-import Select from '@folio/stripes-components/lib/Select';
-import { Row, Col } from '@folio/stripes-components/lib/LayoutGrid';
+import {
+  Row,
+  Col,
+  Button,
+  TextArea,
+  Modal,
+  TextField,
+  Checkbox,
+  Select,
+} from '@folio/stripes/components';
 
 const validate = (values, props) => {
   const accounts = props.accounts || [];

diff --git a/src/components/Accounts/Actions/WarningModal.js b/src/components/Accounts/Actions/WarningModal.js
@@ -1,10 +1,14 @@
 import React from 'react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import Modal from '@folio/stripes-components/lib/Modal';
-import MultiCloumnList from '@folio/stripes-components/lib/MultiColumnList';
-import Button from '@folio/stripes-components/lib/Button';
-import { Row, Col } from '@folio/stripes-components/lib/LayoutGrid';
+import {
+  Row,
+  Col,
+  Button,
+  Modal,
+  MultiColumnList,
+} from '@folio/stripes/components';
+
 
 class WarningModal extends React.Component {
   static propTypes = {
@@ -130,7 +134,7 @@ class WarningModal extends React.Component {
         </Row>
         <Row>
           <Col xs>
-            <MultiCloumnList
+            <MultiColumnList
               formatter={this.getAccountsFormatter()}
               columnMapping={columnMapping}
               columnWidths={{ ' ': 28 }}