docs: fixed docs gen multiple csblinks

docs-templates/toast.md

@@ -9,6 +9,13 @@ utils: src/toast/stories/__js/Utils.component.jsx
 css: src/toast/stories/ToastBasic.css
 -->
 
+<!-- CODESANDBOX
+link_title: Toast CSS Animated - Open On Sandbox
+js: src/toast/stories/__js/ToastCSSAnimated.component.jsx
+utils: src/toast/stories/__js/Utils.component.jsx
+css: src/toast/stories/ToastBasic.css
+-->
+
 ## Example
 
 ```js

docs/accordion.md

@@ -3,7 +3,7 @@
 Accessible Accordion component. It follows the
 [WAI-ARIA Accordion Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#accordion).
 
-[Accordion Example Live Demo](https://codesandbox.io/s/h7wdn)
+[Accordion Example Live Demo](https://codesandbox.io/s/qvgg2)
 
 ## Props
 

docs/calendar.md

@@ -2,13 +2,9 @@
 
 Accessible `Calendar` component.
 
-[Calendar - Open On Sandbox](https://codesandbox.io/s/qte2l)
+[RangeCalendar - Open On Sandbox](https://codesandbox.io/s/khdp2)
 
-<!-- CODESANDBOX
-link_title: RangeCalendar - Open On Sandbox
-js: src/calendar/stories/__js/CalendarRange.component.jsx
-css: src/calendar/stories/CalendarRange.css
--->
+[Calendar - Open On Sandbox](https://codesandbox.io/s/pmtcs)
 
 ## Props
 
@@ -439,7 +435,3 @@ const DoubleChevronRight = props => (
   <DoubleChevronLeft style={{ transform: "rotate(180deg)" }} {...props} />
 );
 ```
-
-```
-
-```

docs/datepicker.md

@@ -2,13 +2,9 @@
 
 Accessible `DatePicker` component.
 
-[DatePicker - Open On Sandbox](https://codesandbox.io/s/4j912)
+[DatePicker - Open On Sandbox](https://codesandbox.io/s/ixpqy)
 
-<!-- CODESANDBOX
-link_title: RangeDatePicker - Open On Sandbox
-js: src/datepicker/stories/__js/DateRangePicker.component.jsx
-css: src/datepicker/stories/DatePickerRange.css
--->
+[RangeDatePicker - Open On Sandbox](https://codesandbox.io/s/wlu79)
 
 ## Props
 
@@ -537,7 +533,3 @@ const DoubleChevronRight = props => (
   <DoubleChevronLeft style={{ transform: "rotate(180deg)" }} {...props} />
 );
 ```
-
-```
-
-```

docs/drawer.md

@@ -2,7 +2,7 @@
 
 Accessible `Drawer` component.
 
-[Drawer - Open On Sandbox](https://codesandbox.io/s/c13ec)
+[Drawer - Open On Sandbox](https://codesandbox.io/s/96zk3)
 
 ## Props
 
@@ -69,7 +69,7 @@ Accessible `Drawer` component.
 
 ```js
 import React from "react";
-import { css } from "emotion";
+import { css } from "@emotion/css";
 
 import {
   Drawer,

docs/meter.md

@@ -2,7 +2,7 @@
 
 Accessible `Meter` component.
 
-[Meter - Open On Sandbox](https://codesandbox.io/s/n9f9q)
+[Meter - Open On Sandbox](https://codesandbox.io/s/vyipe)
 
 ## Props
 
@@ -12,21 +12,21 @@ Accessible `Meter` component.
 
 - **`value`** <code>number</code> The `value` of the meter indicator.
 
-  If `undefined`/`not valid` the meter bar will be equal to `min`
+If `undefined`/`not valid` the meter bar will be equal to `min`
 
 - **`min`** <code>number</code> The minimum value of the meter
 - **`max`** <code>number</code> The maximum value of the meter
 - **`low`** <code>number</code> The higher limit of min range.
 
-  Defaults to `min`.
+Defaults to `min`.
 
 - **`optimum`** <code>number</code> The lower limit of max range.
 
-  Defaults to `median of low & high`.
+Defaults to `median of low & high`.
 
 - **`high`** <code>number</code> The lower limit of max range.
 
-  Defaults to `max`.
+Defaults to `max`.
 
 ### `Meter`
 
@@ -35,7 +35,7 @@ Accessible `Meter` component.
 
 - **`value`** <code>number</code> The `value` of the meter indicator.
 
-  If `undefined`/`not valid` the meter bar will be equal to `min`
+If `undefined`/`not valid` the meter bar will be equal to `min`
 
 - **`min`** <code>number</code> The minimum value of the meter
 - **`max`** <code>number</code> The maximum value of the meter
@@ -52,7 +52,7 @@ Accessible `Meter` component.
 
 ```js
 import * as React from "react";
-import { css, keyframes } from "emotion";
+import { css, keyframes } from "@emotion/css";
 
 import { Meter, useMeterState } from "renderless-components";
 

docs/number-input.md

@@ -2,7 +2,7 @@
 
 Accessible `NumberInput` component.
 
-[NumberInput - Open On Sandbox](https://codesandbox.io/s/ybuxv)
+[NumberInput - Open On Sandbox](https://codesandbox.io/s/siflz)
 
 ## Props
 
@@ -13,25 +13,23 @@ Accessible `NumberInput` component.
 - **`value`** <code>string | number</code> The value of the counter. Should be
   less than `max` and greater than `min`
 
-  If no value, initial value is set to `""`
+If no value, initial value is set to `""`
 
 - **`keepWithinRange`** <code>boolean</code> This controls the value update
   behavior in general.
 
-  - If `true` and you use the stepper or up/down arrow keys, the value will not
-    exceed the `max` or go lower than `min`
-
-  - If `false`, the value will be allowed to go out of range.
+- If `true` and you use the stepper or up/down arrow keys, the value will not
+  exceed the `max` or go lower than `min`
 
+- If `false`, the value will be allowed to go out of range.
 - **`min`** <code>number</code> The minimum value of the counter
 - **`max`** <code>number</code> The maximum value of the counter
 - **`step`** <code>number</code> The step used to increment or decrement the
   value
 - **`precision`** <code>number</code> The number of decimal points used to round
   the value
 
-  If no precision, initial value is from the decimal places from value/step -
-  `0`
+If no precision, initial value is from the decimal places from value/step - `0`
 
 - **`defaultValue`** <code>string | number | undefined</code> The initial value
   of the counter. Should be less than `max` and greater than `min`
@@ -61,15 +59,14 @@ value will change based on mouse wheel
 - **`keepWithinRange`** <code>boolean</code> This controls the value update
   behavior in general.
 
-  - If `true` and you use the stepper or up/down arrow keys, the value will not
-    exceed the `max` or go lower than `min`
-
-  - If `false`, the value will be allowed to go out of range.
+- If `true` and you use the stepper or up/down arrow keys, the value will not
+  exceed the `max` or go lower than `min`
 
+- If `false`, the value will be allowed to go out of range.
 - **`value`** <code>string | number</code> The value of the counter. Should be
   less than `max` and greater than `min`
 
-  If no value, initial value is set to `""`
+If no value, initial value is set to `""`
 
 - **`min`** <code>number</code> The minimum value of the counter
 - **`max`** <code>number</code> The maximum value of the counter
@@ -103,11 +100,10 @@ form elements. In this case, only `aria-disabled` will be set.
 - **`keepWithinRange`** <code>boolean</code> This controls the value update
   behavior in general.
 
-  - If `true` and you use the stepper or up/down arrow keys, the value will not
-    exceed the `max` or go lower than `min`
-
-  - If `false`, the value will be allowed to go out of range.
+- If `true` and you use the stepper or up/down arrow keys, the value will not
+  exceed the `max` or go lower than `min`
 
+- If `false`, the value will be allowed to go out of range.
 - **`isAtMin`** <code>boolean</code> Truw, if value is equal to min.
 - **`focusInput`** <code>() =&#62; void</code> Focus input if focus input on
   value change is `true`
@@ -130,11 +126,10 @@ form elements. In this case, only `aria-disabled` will be set.
 - **`keepWithinRange`** <code>boolean</code> This controls the value update
   behavior in general.
 
-  - If `true` and you use the stepper or up/down arrow keys, the value will not
-    exceed the `max` or go lower than `min`
-
-  - If `false`, the value will be allowed to go out of range.
+- If `true` and you use the stepper or up/down arrow keys, the value will not
+  exceed the `max` or go lower than `min`
 
+- If `false`, the value will be allowed to go out of range.
 - **`isAtMax`** <code>boolean</code> True, if value is equal to max.
 - **`focusInput`** <code>() =&#62; void</code> Focus input if focus input on
   value change is `true`

docs/pagination.md

@@ -2,7 +2,7 @@
 
 Accessible `Pagination` component.
 
-[Pagination - Open On Sandbox](https://codesandbox.io/s/jp1fn)
+[Pagination - Open On Sandbox](https://codesandbox.io/s/ugo4e)
 
 ## Props
 

docs/picker-base.md

@@ -2,7 +2,7 @@
 
 Accessible `PickerBase` component.
 
-[PickerBase - Open On Sandbox](https://codesandbox.io/s/rsuxm)
+[PickerBase - Open On Sandbox](https://codesandbox.io/s/neryg)
 
 ## Props
 

docs/progress.md

@@ -12,7 +12,7 @@ Accessible `Progress` component.
 
 - **`value`** <code>number | null</code> The `value` of the progress indicator.
 
-  If `null` the progress bar will be in `indeterminate` state
+If `null` the progress bar will be in `indeterminate` state
 
 - **`min`** <code>number</code> The minimum value of the progress
 - **`max`** <code>number</code> The maximum value of the
@@ -24,7 +24,7 @@ Accessible `Progress` component.
 
 - **`value`** <code>number | null</code> The `value` of the progress indicator.
 
-  If `null` the progress bar will be in `indeterminate` state
+If `null` the progress bar will be in `indeterminate` state
 
 - **`min`** <code>number</code> The minimum value of the progress
 - **`max`** <code>number</code> The maximum value of the
@@ -41,7 +41,7 @@ Accessible `Progress` component.
 ```js
 import * as React from "react";
 import { Button } from "reakit";
-import { css, keyframes } from "emotion";
+import { css, keyframes } from "@emotion/css";
 
 import { cx, isNull, Progress, useProgressState } from "renderless-components";
 

docs/segment.md

@@ -2,7 +2,7 @@
 
 Accessible `Segment` component.
 
-[Segment - Open On Sandbox](https://codesandbox.io/s/pddby)
+[Segment - Open On Sandbox](https://codesandbox.io/s/xiccb)
 
 ## Props
 

docs/select.md

@@ -2,7 +2,7 @@
 
 Accessible `Select` component.
 
-[Select - Open On Sandbox](https://codesandbox.io/s/hrtki)
+[Select - Open On Sandbox](https://codesandbox.io/s/tcnxl)
 
 ## Props
 

docs/slider.md

@@ -2,7 +2,7 @@
 
 Accessible `Slider` component.
 
-[Slider - Open On Sandbox](https://codesandbox.io/s/s20jt)
+[Slider - Open On Sandbox](https://codesandbox.io/s/d0mp9)
 
 ## Props
 
@@ -12,7 +12,7 @@ Accessible `Slider` component.
 
 - **`values`** <code>number[]</code> The `value` of the slider indicator.
 
-  If `undefined`/`not valid` the slider bar will be the optimum of min & max
+If `undefined`/`not valid` the slider bar will be the optimum of min & max
 
 - **`min`** <code>number</code> The minimum value of the slider
 - **`max`** <code>number</code> The maximum value of the slider
@@ -111,7 +111,7 @@ Accessible `Slider` component.
 
 - **`values`** <code>number[]</code> The `value` of the slider indicator.
 
-  If `undefined`/`not valid` the slider bar will be the optimum of min & max
+If `undefined`/`not valid` the slider bar will be the optimum of min & max
 
 - **`isDisabled`** <code>boolean</code> If `true`, the slider will be disabled
 - **`orientation`** <code>&#34;horizontal&#34; | &#34;vertical&#34;</code>

docs/timepicker.md

@@ -2,7 +2,7 @@
 
 Accessible `TimePicker` component.
 
-[TimePicker - Open On Sandbox](https://codesandbox.io/s/5k3uo)
+[TimePicker - Open On Sandbox](https://codesandbox.io/s/mdhu9)
 
 ## Props
 

docs/toast.md

@@ -2,7 +2,9 @@
 
 Accessible `Toast` component.
 
-[Toast - Open On Sandbox](https://codesandbox.io/s/fkpd6)
+[Toast CSS Animated - Open On Sandbox](https://codesandbox.io/s/ze954)
+
+[Toast - Open On Sandbox](https://codesandbox.io/s/clz0m)
 
 ## Example
 

scripts/builds/docs.js

@@ -11,21 +11,29 @@ const injectComposition = require("../utils/inject-composition");
 
 const docsFolder = path.resolve(process.cwd(), "docs");
 
-const injections = templateFilePath => {
+const injections = async templateFilePath => {
   const fileName = path.basename(templateFilePath);
   const template = fs.readFileSync(templateFilePath, "utf-8");
+  const logProgress = (msg, fileName) => {
+    console.log(chalk.red.yellow(`${msg}:`, chalk.red.greenBright(fileName)));
+  };
+
   const injectedExamplesTemplate = injectExamples(template);
+  logProgress(`Injected examples`, fileName);
+
   const injectedCompositionTemplate = injectComposition(
     injectedExamplesTemplate,
   );
+  logProgress(`Injected composition`, fileName);
+
   const injectedPropsTemplate = injectProps(injectedCompositionTemplate);
+  logProgress(`Injected props`, fileName);
 
-  // createFile(path.join(docsFolder, fileName), mdPrettify(injectedPropsTemplate));
-  // console.log(
-  //   chalk.red.yellow(`Docs generated:`, chalk.red.greenBright(fileName)),
-  // );
+  const finalReadme = await injectCsbLinks(injectedPropsTemplate);
+  logProgress(`Injected sandbox`, fileName);
 
-  injectCsbLinks(fileName, docsFolder, mdPrettify(injectedPropsTemplate));
+  createFile(path.join(docsFolder, fileName), mdPrettify(finalReadme));
+  logProgress(`Docs generated`, fileName);
 };
 
 if (process.argv[2]) {