fix(documentation): Remove react-styleguidist and install @rollup-umd…

…/[email protected] that inclu

react-styleguidist v9 have a context per code mirror, this required to imports things in demos

docs/configuration.md

@@ -3,7 +3,7 @@ You can import individual components, it will work.
 To get all the bootstrap class utilities and use a different theme, you must install `@bootstrap-styled/provider` package.
 
 ```bash
-$ npm install --save @bootstrap-styled/provider
+npm install --save @bootstrap-styled/provider
 ```
 
 Wrap your react application into it.

docs/introduction.md

@@ -27,6 +27,18 @@ This is example is a counter made with React and Bootstrap Styled with a custom
 - Use a few bootstrap components such `<Alert />`, `<Code />`, `<A />`, `<Strong />`, `<Small />`
 
 ```js
+import {
+  Card,
+  CardBlock,
+  H3,
+  Small,
+  A,
+  Strong,
+  Badge,
+  Code,
+  Button,
+  Alert,
+} from '@bootstrap-styled/v4';
 initialState = {
   counter: 1336
 };

docs/prerequisite.md

@@ -1,5 +1,5 @@
 If you don't have them, install the required `peerDependencies` in your project:
 
 ```bash
-$ $PACKAGE_PEERS
+$PACKAGE_PEERS
 ```

package.json

@@ -36,7 +36,6 @@
     "jsdoc": "jsdoc-documentation --file",
     "prestyleguide": "npm run jsdoc",
     "styleguide": "styleguidist server",
-    "prestyleguide:build": "npm run jsdoc && ./styleguide/prepare.sh",
     "styleguide:build": "styleguidist build"
   },
   "repository": {
@@ -76,9 +75,9 @@
     "@babel/plugin-transform-react-inline-elements": "^7.2.0",
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
-    "@bootstrap-styled/documentation": "^1.2.4",
+    "@bootstrap-styled/documentation": "^2.0.0",
     "@bootstrap-styled/provider": "^1.4.2",
-    "@rollup-umd/documentation": "^1.3.20",
+    "@rollup-umd/documentation": "^2.0.0",
     "@rollup-umd/rollup": "^1.0.7",
     "@semantic-release/changelog": "^3.0.2",
     "@semantic-release/git": "^7.0.8",
@@ -112,7 +111,6 @@
     "raf": "^3.4.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
-    "react-styleguidist": "^8.0.6",
     "react-test-renderer": "^16.8.4",
     "rimraf": "^2.6.3",
     "rollup": "^1.6.0",

src/A/index.md

@@ -1,6 +1,7 @@
 `<A />` component example:
 
 ```js
+import { A, P } from '$PACKAGE_NAME';
 <div>
   <A href="javascript:;">Visit Bootstrap Styled</A>!
   <P>
@@ -13,6 +14,7 @@ Or as a `<Button />`:
 
 
 ```js
+import { Button } from '$PACKAGE_NAME';
 <Button tag={A} color="danger" href="javascript:;">Visit Bootstrap Styled !</Button>
 ```
 

src/Abbr/index.md

@@ -1,5 +1,7 @@
 `<Abbr />` component example:
 
 ```js
+import { Abbr, P } from '$PACKAGE_NAME';
+
 <P>This is an abbreviation example: <Abbr title="World Wide Web Consortium">W3C</Abbr></P>
 ```

src/Accordions/Accordion.md

@@ -1,11 +1,13 @@
 `<Accordion />` component example:
 
 ```js static
+import { Accordion, CardBlock } from '$PACKAGE_NAME';
+
 <Accordion heading="Collapsible Group Item #1" name="Accordion1">
  <CardBlock>
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
  </CardBlock>
 </Accordion>
 ```
 
-> > In order to work, this component must wrapped inside a `<AccordionGroup />` component, if you want to use only one accordion, you might use `<Collapse />` component.
+> In order to work, this component must wrapped inside a `<AccordionGroup />` component, if you want to use only one accordion, you might use `<Collapse />` component.

src/Accordions/AccordionGroup.md

@@ -1,32 +1,38 @@
 `<AccordionGroup />` component example:
 
 ```js
+import { 
+  A,
+  Accordion,
+  AccordionGroup,
+  CardBlock,
+  Strong,
+} from '$PACKAGE_NAME';
+
 initialState = {
-  activeAccordionName: '',
+  activeAccordionName: 'Accordion1',
 };
 
-const handleAccordionChange = function(name) {
-  setState({
-    activeAccordionName: name,
-  });
-};
 <div>
- <AccordionGroup activeAccordionName={state.activeAccordionName} onChange={handleAccordionChange}>
-   <Accordion heading="Collapsible Group Item #1" name="Accordion1">
+  <AccordionGroup 
+    activeAccordionName={state.activeAccordionName} 
+    onChange={(activeAccordionName) => setState({ activeAccordionName })}
+  >
+    <Accordion heading="Collapsible Group Item #1" name="Accordion1">
      <CardBlock>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </CardBlock>
-   </Accordion>
-   <Accordion heading={<A>Collapsible Group Item #2</A>} name="Accordion2">
+    </Accordion>
+    <Accordion heading={<A>Collapsible Group Item #2</A>} name="Accordion2">
      <CardBlock>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </CardBlock>
-   </Accordion>
-   <Accordion heading={<Strong>Collapsible Group Item #3</Strong>} name="Accordion3">
+    </Accordion>
+    <Accordion heading={<Strong>Collapsible Group Item #3</Strong>} name="Accordion3">
      <CardBlock>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </CardBlock>
-   </Accordion>
- </AccordionGroup>
+    </Accordion>
+  </AccordionGroup>
 </div>
 ```

src/Address/index.md

@@ -5,6 +5,8 @@ This component has no props so you should use it only to let web crawler (google
 `<Address />` component example:
 
 ```js
+import { Address, Strong, P, A, Small } from '$PACKAGE_NAME';
+
 <Address>
   <Strong>YeuTech</Strong>
   <P className="mb-0">So 6, Duong 25, Phuong 10</P>

src/Alert/index.md

@@ -1,11 +1,16 @@
 Uncontrolled `<Alert />` component example using `uncontrolled` props:
 
 ```js
+import { Alert } from '$PACKAGE_NAME';
+
 <Alert color="danger" uncontrolled>Uncontrolled alert</Alert>
 ```
 
 `<Alert />` component example:
+
 ```js
+import { Button, Alert } from '$PACKAGE_NAME';
+
 initialState = {
   alertIsOpen: false,
 };
@@ -19,10 +24,12 @@ initialState = {
 
 Timed `<Alert />` component example using `autoHideDuration` and `uncontrolled` props:
 ```js
+import { Button, Alert } from '$PACKAGE_NAME';
+
 initialState = {
   alertIsOpen: false,
-}
-;
+};
+
 <div>
    <Button onClick={() => setState({ alertIsOpen: !state.alertIsOpen })}>Activate Alert</Button>
    <Alert color="info" isOpen={state.alertIsOpen} uncontrolled autoHideDuration="3000">

src/Area/index.md

@@ -5,6 +5,8 @@ This component have no props.
 `<Area />` component example:
 
 ```js
+import { P, Img, Area } from '$PACKAGE_NAME';
+
 <div>
   <P>Click on the sun or on one of the planets to watch it closer:</P>
   <Img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" useMap="#planetmap" />

src/Badge/index.md

@@ -3,6 +3,8 @@
 Badges scale to match the size of the immediate parent element by using relative font sizing and em units:
 
 ```js
+import { H4, H5, H6, Badge } from '$PACKAGE_NAME';
+
 <div>
   <H4>Heading <Badge>New</Badge></H4>
   <H5>Heading <Badge>New</Badge></H5>
@@ -13,6 +15,8 @@ Badges scale to match the size of the immediate parent element by using relative
 It could also be used in order to provide a counter:
 
 ```js
+import { P, Badge, Button } from '$PACKAGE_NAME';
+
 <div>
   <P>Messages <Badge color="primary">33</Badge></P>
   <Button>Messages <Badge color="danger">33</Badge></Button>

src/Blockquote/index.md

@@ -3,6 +3,8 @@
 Quoting blocks of content:
 
 ```js
+import { Blockquote, P } from '$PACKAGE_NAME';
+
 <Blockquote>
   <P>"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</P>
   <P className="blockquote-footer">Someone famous in something</P>
@@ -12,6 +14,8 @@ Quoting blocks of content:
 Also work using centering `className` like `text-center` (or even `mx-auto`):
 
 ```js
+import { Blockquote, P } from '$PACKAGE_NAME';
+
 <Blockquote className="text-center">
   <P>"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</P>
   <P className="blockquote-footer">Someone famous in something</P>
@@ -22,6 +26,8 @@ Also work using centering `className` like `text-center` (or even `mx-auto`):
 Or with `reverse` props:
 
 ```js
+import { Blockquote, P } from '$PACKAGE_NAME';
+
 <Blockquote reverse>
   <P>"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</P>
   <P className="blockquote-footer">Someone famous in something</P>

src/Breadcrumb/BreadcrumbItem.md

@@ -1,6 +1,8 @@
 `<BreadcrumbItem/>` component example:
 
 ```js
+import { Breadcrumb, BreadcrumbItem } from '$PACKAGE_NAME';
+
 <Breadcrumb>
   <BreadcrumbItem>Breadcrum item</BreadcrumbItem>
 </Breadcrumb>
@@ -9,16 +11,20 @@
 **Active** `<BreadcrumbItem/>` component example:
 
 ```js
+import { Breadcrumb, BreadcrumbItem } from '$PACKAGE_NAME';
+
 <Breadcrumb>
-  <BreadcrumbItem active>Active breadcrum item</BreadcrumbItem>
+  <BreadcrumbItem active>Active breadcrumb item</BreadcrumbItem>
 </Breadcrumb>
 ```
 
 `<BreadcrumbItem/>` component  with specific tag example:
 
 ```js
+import { A, Breadcrumb, BreadcrumbItem } from '$PACKAGE_NAME';
+
 <Breadcrumb>
-  <BreadcrumbItem tag={A} href="javascript:;">Breadcrum item with 'A' tag</BreadcrumbItem>
-  <BreadcrumbItem active tag="span">Breadcrum item with 'span' tag</BreadcrumbItem>
+  <BreadcrumbItem tag={A} href="javascript:;">Breadcrumb item with 'A' tag</BreadcrumbItem>
+  <BreadcrumbItem active tag="span">Breadcrumb item with 'span' tag</BreadcrumbItem>
 </Breadcrumb>
 ```

src/Breadcrumb/index.md

@@ -1,6 +1,12 @@
 `<Breadcrumb />` component example:
 
 ```js
+import {
+  A,
+  Breadcrumb,
+  BreadcrumbItem,
+} from '$PACKAGE_NAME';
+
 <div>
   <Breadcrumb>
     <BreadcrumbItem active>Home</BreadcrumbItem>

src/Button/ButtonDropdown.md

@@ -1,6 +1,13 @@
 `<ButtonDropdown />` component example:
 
 ```js
+import {
+  ButtonDropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+} from '$PACKAGE_NAME';
+
 initialState = {
   dropdownOpen: false,
 };

src/Button/index.md

@@ -1,6 +1,8 @@
 `<Button />` component example:
 
 ```js
+import { Button } from '$PACKAGE_NAME';
+
 <div>
   <Button color="primary">primary</Button>
   <Button color="secondary">secondary</Button>
@@ -15,6 +17,8 @@
 `<Button />` component example with specific tags:
 
 ```js
+import { Button, A, Input } from '$PACKAGE_NAME';
+
 <div>
   <Button tag={A} color="primary" href="javascript:;">Link</Button>
   <Button color="primary" type="submit">Button</Button>
@@ -27,6 +31,8 @@
 Outline `<Button />` component example with specific tags:
 
 ```js
+import { Button } from '$PACKAGE_NAME';
+
 <div>
   <Button outline color="primary">primary</Button>
   <Button outline color="secondary">secondary</Button>
@@ -40,6 +46,8 @@ Outline `<Button />` component example with specific tags:
 `<Button />` component example with specific sizes and display:
 
 ```js
+import { Button } from '$PACKAGE_NAME';
+
 <div>
   <Button color="primary" size="sm">Small Button</Button>
   <Button color="secondary" size="sm">Small Button</Button>
@@ -55,6 +63,8 @@ Outline `<Button />` component example with specific tags:
 `<Button />` component example with states:
 
 ```js
+import { Button, A } from '$PACKAGE_NAME';
+
 <div>
   <div>
     <Button tag={A} color="primary" size="lg" active>Active primary link</Button>
@@ -70,12 +80,13 @@ Outline `<Button />` component example with specific tags:
 Radio `<Button />` component example:
 
 ```js
+import { P, Button, ButtonGroup } from '$PACKAGE_NAME';
+
 initialState = {
   cSelected: [],
 };
-const onRadioBtnClick = function(rSelected) {
-  setState({ rSelected });
-};
+const onRadioBtnClick = (rSelected) => setState({ rSelected });
+
 <div>
   <div className="my-3">
     <ButtonGroup>
@@ -91,10 +102,13 @@ const onRadioBtnClick = function(rSelected) {
 Checkbox `<Button />` component example with:
 
 ```js
+import { Button, ButtonGroup, P } from '$PACKAGE_NAME';
+
 initialState = {
   cSelected: [],
 };
-const onCheckboxBtnClick = function(selected) {
+
+const onCheckboxBtnClick = (selected) => {
   const index = state.cSelected.indexOf(selected);
   if (index < 0) {
     state.cSelected.push(selected);
@@ -103,6 +117,7 @@ const onCheckboxBtnClick = function(selected) {
   }
   setState({ cSelected: [...state.cSelected] });
 };
+
 <div>
   <div className="my-3">
     <ButtonGroup>