Update import examples in docs

MIGRATIONPATHS.md

@@ -1,12 +1,12 @@
 # Stripes-Components Migration Paths
 ## 3.x to 4.x
-Upcoming release.  
+Upcoming release.
 
 ### Some Components and utilities have moved
 We've provided console warnings for these items. If you've used these in your module with a `stripes-components` path, you'll simply have to update your import path:
 
 Component/Util | New path
 -- | --
-`<AddressList>`, `<AddressEditList>`, `<EditableList>`, `<Settings>`  | `import { ... } from '@folio/stripes-smart-components'`
-`<Pluggable>`  | `@folio/stripes-core/lib/Pluggable`
-`makeQueryFunction()` | `import { makeQueryFunction } from '@folio/stripes-smart-components'`
+`<AddressList>`, `<AddressEditList>`, `<EditableList>`, `<Settings>`  | `import { ... } from '@folio/stripes/smart-components'`
+`<Pluggable>`  | `@folio/stripes/core`
+`makeQueryFunction()` | `import { makeQueryFunction } from '@folio/stripes/smart-components'`

docs/UIModuleLayout.md

@@ -18,9 +18,7 @@ A `<Row>` is a container that spans the width of its parent element. It nests on
 
 ```
 import React from 'react';
-import Paneset from '@folio/stripes-components/lib/Paneset';
-import Pane from '@folio/stripes-components/lib/Pane';
-import { Row, Col } from '@folio/stripes-components/lib/LayoutGrid';
+import { Col, Pane, Paneset, Row } from '@folio/stripes/components';
 
 class LayoutExample extends React.Component {
   render() {

lib/Accordion/readme.md

@@ -5,7 +5,7 @@ Make parts of the UI collapsible using this component.
 ## Basic Usage
 
 ```
-import { AccordionSet, Accordion } from '@folio/stripes-components/lib/Accordion';
+import { AccordionSet, Accordion } from '@folio/stripes/components';
 
 ...
 <AccordionSet>
@@ -42,7 +42,7 @@ Keyboard support comes packaged with use of the `<AccordionSet>`. The keys are a
 Accordions can, of course, be controlled by state or local resource. Simply include an object with a list of keys for each accordion's `id` set to a boolean value that will be passed through to the corresponding accordion's `open` prop. This object should be passed to the `<AccordionSet>`'s `accordionStatus` prop. An `onToggle` handler will also need to be provided for proper state interaction. Passed to the `<AccordionSet>`'s `onToggle` prop, it will receive both the label and id of the target accordion, either of which could be used for additional interactions as needed.
 
 ```
-import { AccordionSet, Accordion } from '@folio/stripes-components/lib/Accordion';
+import { AccordionSet, Accordion } from '@folio/stripes/components';
 
 ... // state or manifest/local resource.
 

lib/AppIcon/readme.md

@@ -7,7 +7,7 @@ AppIcon supports different ways of loading icons.
 
 ***1. Use context (recommended)***
 ```js
-  import AppIcon from '@folio/stripes-components/lib/AppIcon';
+  import { AppIcon } from '@folio/stripes/components';
 
   // Note: Make sure that the AppIcon has "stripes" in context as it relies on stripes.metadata.
   <AppIcon app="users" size="small" />
@@ -29,7 +29,7 @@ AppIcon supports different ways of loading icons.
 
 ***3. Pass src and alt as props***
 ```js
-  <AppIcon 
+  <AppIcon
     src="/static/some-icon.png"
     alt="My Icon"
   />

lib/AutoSuggest/readme.md

@@ -3,7 +3,7 @@ Displays a dropdown with a list of suggestions based on the entered string in th
 
 ## Usage
 ```
-import AutoSuggest from '../../lib/AutoSuggest';
+import { AutoSuggest } from '@folio/stripes/components';
 
 // later in your JSX....
 <AutoSuggest items={items} />

lib/Button/readme.md

@@ -5,7 +5,7 @@ The classic button, in different styles and sizes
 ## Basic Usage
 
 ```
-import { Button } from '@folio/stripes-components/lib/Button';
+import { Button } from '@folio/stripes/components';
 
 ...
 <Button>

lib/DateRangeWrapper/readme.md

@@ -6,7 +6,7 @@ Primitive for setting up two Datepickers to assemble a date range structure. Dat
 While it can certainly be used with vanilla Datepickers, a common use-case of FOLIO forms will be redux-form.
 Used with Redux-form, we need to apply a custom value getter. Here's what that code looks like.
 ```
-  import { DateRangeWrapper, Datepicker } from '@folio/stripes-components'
+  import { DateRangeWrapper, Datepicker } from '@folio/stripes/components'
 
     // with redux-form, best value comes in the 2nd param...
     const getter = (e, value) => {
@@ -56,17 +56,17 @@ Used with Redux-form, we need to apply a custom value getter. Here's what that c
 ## Common Props
 Name | type | description | default | required
 --- | --- | --- | --- | ---
-`children` | function | should be set up to accept render props passed in from the wrapper |  | 
-`initialStartDate` | string | used to initialize the wrapper's internal state. Should be the same as your starting date field's initial value prop. | | 
-`initialEndDate` | string | used to initialize the wrapper's internal state. Should be the same as your ending date field's initial value prop. | | 
+`children` | function | should be set up to accept render props passed in from the wrapper |  |
+`initialStartDate` | string | used to initialize the wrapper's internal state. Should be the same as your starting date field's initial value prop. | |
+`initialEndDate` | string | used to initialize the wrapper's internal state. Should be the same as your ending date field's initial value prop. | |
 
 ## Behavior override props
 Name | type | description | default | required
 --- | --- | --- | --- | ---
-`endValueGetter` | function(<...any>) | Used in the internal onChange handler to get a date value from the 'end' Datepicker. | `(value) => value` | 
-`startValueGetter` | function(param <...any>) | Similar to `endValueGetter`. Applied to the start date field. | `(value) => value` | 
-`endExcluder` | function(day <any>) | Used to substitute default excluder logic. Internally, `<DateRangeWrapper>` uses `moment.isBefore()` to exclude dates that come before its internal `startDate` so these will not be available in the picker. | | 
-`startExcluder` | function(day <any>) | Similar to `startExcluder`. Uses `moment.isAfter()` for its test. | | 
+`endValueGetter` | function(<...any>) | Used in the internal onChange handler to get a date value from the 'end' Datepicker. | `(value) => value` |
+`startValueGetter` | function(param <...any>) | Similar to `endValueGetter`. Applied to the start date field. | `(value) => value` |
+`endExcluder` | function(day <any>) | Used to substitute default excluder logic. Internally, `<DateRangeWrapper>` uses `moment.isBefore()` to exclude dates that come before its internal `startDate` so these will not be available in the picker. | |
+`startExcluder` | function(day <any>) | Similar to `startExcluder`. Uses `moment.isAfter()` for its test. | |
 
 ## Child function
 
@@ -81,9 +81,9 @@ The child function allows for its returned JSX to be of any shape to suite the r
 Prop-getter functions return an object of bundled props that can be easily applied to a component via spread attributes. For example: `<Component {...propGetter()}>`. `<DateRangeWrapper>`'s prop-getters accept a `props` object. The keys of that object are composed in with the internally supplied props/handlers. If you pass an `onChange` handler to the prop-getter function, it will be called **before** the `<DateRangeWrapper>`'s internal onChange handler.
 
 ### Render-props for the child function
-Name | type | description 
---- | --- | --- 
-`endDateExclude` | function(day) | function for determining whether a day rendered by the calendar should be excluded or not. If the function returns `true`, the day will be excluded from picking (un-clickable, with appropriate styles assigned). This uses a default function, but can be overridden by using the `endExcluder` prop 
+Name | type | description
+--- | --- | ---
+`endDateExclude` | function(day) | function for determining whether a day rendered by the calendar should be excluded or not. If the function returns `true`, the day will be excluded from picking (un-clickable, with appropriate styles assigned). This uses a default function, but can be overridden by using the `endExcluder` prop
 `startDateExclude` | function(day) | similar to `endDateExclude`, but applied to the start date DatePicker.
 `getEndInputProps` | function(props: <object>) | Prop-getter function. Applies the Wrapper's internal 'onChange' handler, as well as any `onChange` handler passed by the application via the `props` argument.
 `getStartInputProps` | function(props: <object>) | Prop-getter function Similar to `getEndInputProps`.

lib/Datepicker/readme.md

@@ -2,7 +2,7 @@
 ### Usage
 
 ```js
-import Datepicker from '@folio/stripes-components/lib/Datepicker';
+import { Datepicker } from '@folio/stripes/components';
 //..
 <Datepicker />
 //or pass as component within a form...

lib/Dropdown/readme.md

@@ -8,7 +8,7 @@ Dropdown makes use of [react-tether](https://github.com/souporserious/react-teth
 This basic version sets up a dropdown with it's open/closed status controlled by state. Note that the `onToggle` handler is passed to both the `<Dropdown>` component and the `<DropdownMenu>` component. `<DropdownMenu>` sets up listeners so that the `onToggle` function will be called if the user clicks anywhere outside of the menu in the DOM.
 
 ```
-import { Dropdown } from '@folio/stripes-components/lib/Dropdown';
+import { Dropdown } from '@folio/stripes/components';
 
 //...
 
@@ -83,8 +83,7 @@ If the module is unable to keep track of the `<Dropdown>`'s open/closed status w
 Note :Adding `<MenuItem itemMeta={{metaData:'data' }}>` for the children in the `<DropdownMenu>` will have an ability to close the dropdown on clicking the menuItems element and be able to pass in any meta data specific to the items.
 
 ```
-import {UncontrolledDropdown} from '@folio/stripes-components/lib/Dropdown';
-import MenuItem from '@folio/stripes-components/lib/MenuItem';
+import { MenuItem, UncontrolledDropdown } from '@folio/stripes/components';
 
   <UncontrolledDropdown
       id="uniqueid"
@@ -135,11 +134,11 @@ Replace imports and make sure to update following props
 
 1) Change
 ```
-import {Dropdown} from 'react-bootstrap';
+import { Dropdown } from 'react-bootstrap';
 ```
 To
 ```
-import {Dropdown} from '@folio/stripes-components/lib/Dropdown';
+import { Dropdown } from '@folio/stripes/components';
 
 ```
 

lib/EmptyMessage/readme.md

@@ -3,7 +3,7 @@ A uniform way of rendering an empty state - e.g. no results found in a list.
 
 ## Basic Usage
 ```
-  import EmptyMessage from '@folio/stripes-components/lib/EmptyMessage';
+  import { EmptyMessage } from '@folio/stripes/components';
 
   <EmptyMessage>Sorry - no results were found</EmptyMessage>
 ```

lib/Headline/readme.md

@@ -3,7 +3,7 @@ Renders headlines in different sizes and with different tags, margins and styles
 
 ### Basic Usage
 ```
-  import Headline from '@folio/stripes-components/lib/Headline';
+  import { Headline } from '@folio/stripes/components';
 
   <Headline size="large" margin="medium" tag="h3">
     My headline

lib/HotKeys/readme.md

@@ -6,7 +6,7 @@
 
 
 ```js
-import { HotKeys } from '@folio/stripes-components/lib/HotKeys';
+import { HotKeys } from '@folio/stripes/components';
 //..
 const keys = {
   'delete' : ['delete','backspace'],
@@ -27,14 +27,14 @@ const handlers = {
 Components can be wrapped to give them the necessary props/functionality to respond to keyboard shortcuts.
 
 ```js
-import { HotKeysHOC } from '@folio/stripes-components/lib/HotKeys';
+import { HotKeys } from '@folio/stripes/components';
 
 class MyComponent extends React.Component {
   // typical component internals... constructor(), render(), etc.
 }
 
 // wrap component with HOC...
-export default HotKeysHOC(MyComponent);
+export default HotKeys(MyComponent);
 ```
 You can then use the component as normal, supplying appropriate `keyMap` and `handlers` props.
 

lib/Icon/readme.md

@@ -3,7 +3,7 @@ Component for rendering a variety of FOLIO icons.
 
 ## Basic Usage
 ```js
-import { Icon } from '@folio/stripes-components/lib/Icon';
+import { Icon } from '@folio/stripes/components';
 
 <Icon
   icon="bookmark"
@@ -13,7 +13,7 @@ import { Icon } from '@folio/stripes-components/lib/Icon';
 
 // With a label:
 
-<Icon 
+<Icon
   icon="trashBin"
   iconPosition="end"
 >
@@ -27,7 +27,7 @@ Name | type | description | default |
 icon | string | Sets icon to be rendered. See icon list for possible options | default
 size | string | Sets the icon size (small, medium, large) | medium
 title | string | Text that appears in a browser-native tooltip when icon is hovered |
-iconRootClass | string | Applies a custom css class to the component's internal div. This is useful for applying custom hover interaction. | 
+iconRootClass | string | Applies a custom css class to the component's internal div. This is useful for applying custom hover interaction. |
 iconClassName | string | Applies a custom css class name directly to icon | stripes__icon
 children | node, string | Adds content next to the icon. Useful for adding a label to an icon. | undefined
 iconPosition | string | Sets the the position of the icon. Can be set to "start" and "end". Note: This is only relevant when the "children"-prop is utilized. | start

lib/IconButton/readme.md

@@ -4,7 +4,7 @@ Renders a square button with a centered icon.
 
 ## Basic Usage
 ```
-  import IconButton from '@folio/stripes-components/lib/IconButton';
+  import { IconButton } from '@folio/stripes/components';
 
   <IconButton
     icon="comment"

lib/InfoPopover/readme.md

@@ -3,7 +3,7 @@ Display a small information icon which can be toggled by clicking on it.
 
 ## Basic Usage
 ```
-  import InfoPopover from '@folio/stripes-components/lib/InfoPopover';
+  import { InfoPopover } from '@folio/stripes/components';
 
   <InfoPopover
     content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."

lib/KeyValue/readme.md

@@ -5,7 +5,7 @@ Display key value with a label. Often used in combination with a grid to display
 ## Basic Usage
 
 ```
-import KeyValue from '@folio/stripes-components/lib/KeyValue';
+import { KeyValue } from '@folio/stripes/components';
 
 <KeyValue
   label="Some label"

lib/Layer/readme.md

@@ -1,9 +1,9 @@
 # Layer
-Creates a new layer of `<Pane>`s or other UI components for your module. Renders its content via a [React Portal](https://reactjs.org/docs/portals.html). 
+Creates a new layer of `<Pane>`s or other UI components for your module. Renders its content via a [React Portal](https://reactjs.org/docs/portals.html).
 
 ### Usage
 ```js
-import { Layer, Paneset } from '@folio/stripes-components';
+import { Layer, Paneset } from '@folio/stripes/components';
 
 // boolean to control the rendering of the layer...
 let showLayer = true;
@@ -21,13 +21,13 @@ let showLayer = true;
 ### Props
 Name | type | description | default | required
 --- | --- | --- | --- | ---
-`autoFocus` | bool | If no layer content is focused via other focus-management methods, the `<Layer>`'s container will be focused. | `true` | 
+`autoFocus` | bool | If no layer content is focused via other focus-management methods, the `<Layer>`'s container will be focused. | `true` |
 `isOpen` | bool | Control rendering of the layer's child components within a div with role "dialog" (A full-module modal). | | required
 `container` | node | DOM element or component where the rendered elements should reside. Appends content to the root of the ascendant `Paneset` by default. | |
-`contentLabel` | string | applied as the `aria-label` attribute on the `<Layer>`'s containing div. Warns if not applied. | | 
-`afterClose` | func | Callback for after the `<Layer>` has closed. Handle focus management for accessible code here! | `()=>{}` | 
-`afterOpen` | func | Callback for after the `<Layer>` has opened. | `()=>{}` | 
-`enforceFocus` | bool | Whether or not the modal should trap focus within itself (best for accessibility) | `true` | 
+`contentLabel` | string | applied as the `aria-label` attribute on the `<Layer>`'s containing div. Warns if not applied. | |
+`afterClose` | func | Callback for after the `<Layer>` has closed. Handle focus management for accessible code here! | `()=>{}` |
+`afterOpen` | func | Callback for after the `<Layer>` has opened. | `()=>{}` |
+`enforceFocus` | bool | Whether or not the modal should trap focus within itself (best for accessibility) | `true` |
 
 ### A11y practices
 The `<Layer>` is very similar to a modal dialog and focus management should be accounted for accordingly. When opened, focus will move to the rendered content div (unless a child element has already assumed focus via `autoFocus` or some other means.) Focus should be managed appropriately by the application when the `<Layer>` is closed. The `afterClose` prop can be used for this.
@@ -41,12 +41,12 @@ focusAfter() {
 <Paneset>
   // Base Paneset contents ...
   <Button buttonRef={this.layerToggle} onClick={this.toggleLayer}>Toggle Layer</Button>
-  <Layer 
+  <Layer
     isOpen={showLayer}
     afterClose={this.focusAfter}
     contentLabel="demonstration layer"
   >
     {/* Layer contents */}
   </Layer>
 </Paneset>
-```
+```

lib/Layout/readme.md

@@ -6,15 +6,15 @@ Helper component that allows for easily accessing a set of helper CSS classes. U
 ### JSX
 Apply any of the available class names to the `className` prop. Any additional custom class names will be combined with any matching helper classes. You can modify the root element by passing a string or a component to the "element"-prop.
 ```js
-  import Layout from '@folio/stripes-components/lib/Layout';
+  import { Layout } from '@folio/stripes/components';
 
   <Layout className="display-flex flex-align-items-start">
     <Layout element="span" className="padding-start-gutter">
       1st column
-    </Layout>  
+    </Layout>
     <Layout element="span" className=`padding-end-gutter ${css.myCustomClass}`>
       2nd column
-    </Layout>  
+    </Layout>
   </Layout>
 ```
 

lib/LayoutGrid/readme.md

@@ -34,6 +34,6 @@ import { Row, Col } from 'react-bootstrap';
 ```
 To
 ```
-import { Row, Col } from '@folio/stripes-components/lib/LayoutGrid';
+import { Row, Col } from '@folio/stripes/components';
 
 ```

lib/List/readme.md

@@ -7,7 +7,7 @@ Displays a list with an array of items or children
 The items-prop is your array of times and the itemFormatter is a function that determines how to format each item.
 
 ```
-  import List from '@folio/stripes-components/lib/List';
+  import { List } from '@folio/stripes/components';
 
   const items = ['Apples', 'Bananas', 'Strawberries', 'Oranges'];
   const itemFormatter = (item) => (<li>{item}</li>);

lib/MenuItem/readme.md

@@ -7,8 +7,7 @@ Example use case is when using UncontrolledDropdown.
 This basic usage is for UncontrolledDropdown sets up a dropdown closed status when selected  any items inside the DropdownMenu
 
 ```js
-import {UncontrolledDropdown} from '@folio/stripes-components/lib/Dropdown';
-import MenuItem from '@folio/stripes-components/lib/MenuItem';
+import { MenuItem, UncontrolledDropdown } from '@folio/stripes/components';
 
   <UncontrolledDropdown
       id="uniqueid"

lib/Modal/readme.md

@@ -3,8 +3,7 @@ Basic component for rendering a modal pop-up.
 ### Usage
 
 ```js
-import Modal from '@folio/stripes-components/lib/Modal';
-import Button from '@folio/stripes-components/lib/Button';
+import { Button, Modal } from '@folio/stripes/components';
 
 // Add a footer to the modal (optional)
 const footer = (

lib/ModalFooter/readme.md

@@ -3,8 +3,7 @@ The default modal footer for the Modal-component.
 
 ### Usage
 ```js
-import Modal from '@folio/stripes-components/lib/Modal';
-import ModalFooter from '@folio/stripes-components/lib/ModalFooter';
+import { Modal, ModalFooter } from '@folio/stripes/components';
 
 const footer = (
   <ModalFooter