docs(readme): 📝 update readme & check new deployment (#175)

* docs(readme): 📝  update readme & check new deployment

* chore(fixes): 🚸  improving the styles & code that was pending small

* docs(select): 📝  re order select docs layout

* docs(readme): 📝  release note

README.md

@@ -3,26 +3,25 @@
 <p align="center">
   Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by <a href="https://reakit.io/">Reakit</a>
 System.
-<a href="https://renderless-components.netlify.app/"><strong>Explore all components »</strong></a>
+<a href="https://renderlesskit-react.vercel.app/"><strong>Explore all components »</strong></a>
 </p>
 
 <p align="center">
   <a href="https://npmjs.org/package/@renderlesskit/react"><img alt="NPM version" src="https://img.shields.io/npm/v/@renderlesskit/react.svg" /></a>
   <a href="https://npmjs.org/package/@renderlesskit/react"><img alt="NPM downloads" src="https://img.shields.io/npm/dm/@renderlesskit/react.svg"></a>
-  <a href="https://github.com/timelessco/renderlesskit-react/actions"><img alt="Build Status" src="https://github.com/timelessco/renderlesskit-react/workflows/Test/badge.svg?event=push&branch=master" /></a>
-  <a href="https://app.netlify.com/sites/renderlesskit-react/deploys"><img alt="Netlify Status" src="https://api.netlify.com/api/v1/badges/42b9b82f-b8e7-441e-a6c3-9f301addd7ff/deploy-status" /></a><br/>
+  <a href="https://github.com/timelessco/renderlesskit-react/actions"><img alt="Build Status" src="https://github.com/timelessco/renderlesskit-react/workflows/Test/badge.svg?event=push&branch=master" /></a><br/>
   <a href="https://github.com/timelessco/renderlesskit-react/blob/master/LICENSE"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License"></a>
 </p>
 
-## Features
+## :rocket: Features
 
 - Accessible :wheelchair:
 - Composable :toolbox:
 - WAI-ARIA Compatible :spiral_notepad:
 - React Hooks Based :anchor:
 - Easy To Customize, Style & Extend :nail_care:
 
-## :rocket: Installation
+## ⚓ Installation
 
 ```sh
 # npm
@@ -34,11 +33,11 @@ yarn add @renderlesskit/react reakit
 
 > Make sure `react react-dom` is installed.
 
-## Getting started
+## :beginner: Getting started
 
 Check out our [getting started docs](/docs/getting-started.md)
 
-## Component Docs
+## 📑 Component Docs
 
 - [Accordion](docs/accordion.md)
 - [Breadcrumbs](docs/breadcrumb.md)
@@ -57,7 +56,11 @@ Check out our [getting started docs](/docs/getting-started.md)
 - [Time Picker](docs/timepicker.md)
 - [Toast](docs/toast.md)
 
-## Contributors ✨
+> **Note:** As the 0.#.# version number suggests we are still very much work in
+> progress, so semantic versioning will not be followed until a v1 release.
+> Expect breaking changes to occur on minor version jumps.
+
+## ✨ Contributors
 
 Thanks goes to these wonderful people
 ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
@@ -82,6 +85,6 @@ This project follows the
 [all-contributors](https://github.com/all-contributors/all-contributors)
 specification. Contributions of any kind welcome!
 
-## License
+## 📋 License
 
 MIT © [Timeless](https://timeless.co/)

docs-templates/accordion.md

@@ -15,14 +15,14 @@ for
 <!-- IMPORT_EXAMPLE src/accordion/stories/__js/AccordionBasic.component.jsx -->
 
 <!-- CODESANDBOX
-link_title: Accordion Styled - Open on Sandbox
-js: src/accordion/stories/__js/AccordionStyled.component.jsx
-css: src/accordion/stories/AccordionStyled.css
+link_title: Accordion Basic - Open on Sandbox
+js: src/accordion/stories/__js/AccordionBasic.component.jsx
 -->
 
 <!-- CODESANDBOX
-link_title: Accordion Basic - Open on Sandbox
-js: src/accordion/stories/__js/AccordionBasic.component.jsx
+link_title: Accordion Styled - Open on Sandbox
+js: src/accordion/stories/__js/AccordionStyled.component.jsx
+css: src/accordion/stories/AccordionStyled.css
 -->
 
 ## Accessibility Requirements

docs-templates/calendar.md

@@ -18,18 +18,18 @@ keyboard navigaiton & focus management.
 
 <!-- IMPORT_EXAMPLE src/calendar/stories/__js/CalendarRange.component.jsx -->
 
-<!-- CODESANDBOX
-link_title: RangeCalendar - Open On Sandbox
-js: src/calendar/stories/__js/CalendarRange.component.jsx
-css: src/calendar/stories/CalendarRange.css
--->
-
 <!-- CODESANDBOX
 link_title: Calendar - Open On Sandbox
 js: src/calendar/stories/__js/CalendarBase.component.jsx
 css: src/calendar/stories/CalendarBase.css
 -->
 
+<!-- CODESANDBOX
+link_title: RangeCalendar - Open On Sandbox
+js: src/calendar/stories/__js/CalendarRange.component.jsx
+css: src/calendar/stories/CalendarRange.css
+-->
+
 <!-- INJECT_COMPOSITION src/calendar -->
 
 <!-- INJECT_PROPS src/calendar -->

docs-templates/datepicker.md

@@ -17,18 +17,18 @@ for the keyboard navigation & accessibility features.
 
 <!-- IMPORT_EXAMPLE src/datepicker/stories/__js/DatePickerRange.component.jsx -->
 
-<!-- CODESANDBOX
-link_title: RangeDatePicker - Open On Sandbox
-js: src/datepicker/stories/__js/DateRangePicker.component.jsx
-css: src/datepicker/stories/DatePickerRange.css
--->
-
 <!-- CODESANDBOX
 link_title: DatePicker - Open On Sandbox
 js: src/datepicker/stories/__js/DatePicker.component.jsx
 css: src/datepicker/stories/DatePickerBase.css
 -->
 
+<!-- CODESANDBOX
+link_title: RangeDatePicker - Open On Sandbox
+js: src/datepicker/stories/__js/DateRangePicker.component.jsx
+css: src/datepicker/stories/DatePickerRange.css
+-->
+
 <!-- INJECT_COMPOSITION src/datepicker -->
 
 <!-- INJECT_PROPS src/datepicker -->

docs-templates/progress.md

@@ -11,14 +11,14 @@ of time to load. It follows
 <!-- IMPORT_EXAMPLE src/progress/stories/__js/LinearProgress.component.jsx -->
 
 <!-- CODESANDBOX
-link_title: Progress Circular - Open On Sandbox
-js: src/progress/stories/__js/CircularProgress.component.jsx
+link_title: Progress Linear- Open On Sandbox
+js: src/progress/stories/__js/LinearProgress.component.jsx
 deps: ['@emotion/css']
 -->
 
 <!-- CODESANDBOX
-link_title: Progress Linear- Open On Sandbox
-js: src/progress/stories/__js/LinearProgress.component.jsx
+link_title: Progress Circular - Open On Sandbox
+js: src/progress/stories/__js/CircularProgress.component.jsx
 deps: ['@emotion/css']
 -->
 

docs-templates/select.md

@@ -18,6 +18,6 @@ js: src/select/stories/__js/Select.component.jsx
 css: src/select/stories/Select.css
 -->
 
-<!-- INJECT_PROPS src/select -->
-
 <!-- INJECT_COMPOSITION src/select -->
+
+<!-- INJECT_PROPS src/select -->

docs/accordion.md

@@ -65,9 +65,9 @@ export function App(props) {
 export default App;
 ```
 
-[Accordion Styled - Open on Sandbox](https://codesandbox.io/s/69twh)
+[Accordion Basic - Open on Sandbox](https://codesandbox.io/s/scil2)
 
-[Accordion Basic - Open on Sandbox](https://codesandbox.io/s/dso90)
+[Accordion Styled - Open on Sandbox](https://codesandbox.io/s/lonmk)
 
 ## Accessibility Requirements
 

docs/breadcrumb.md

@@ -57,7 +57,7 @@ export const App = props => {
 export default App;
 ```
 
-[Breadcrumbs Basic - Open on Sandbox](https://codesandbox.io/s/we32g)
+[Breadcrumbs Basic - Open on Sandbox](https://codesandbox.io/s/t3ygx)
 
 ## Accessibility Requirement
 

docs/calendar.md

@@ -265,9 +265,9 @@ const DoubleChevronRight = props => (
 );
 ```
 
-[RangeCalendar - Open On Sandbox](https://codesandbox.io/s/myy3o)
+[Calendar - Open On Sandbox](https://codesandbox.io/s/u3w1h)
 
-[Calendar - Open On Sandbox](https://codesandbox.io/s/nr4o9)
+[RangeCalendar - Open On Sandbox](https://codesandbox.io/s/hy4ow)
 
 ## Composition
 

docs/datepicker.md

@@ -366,9 +366,9 @@ const DoubleChevronRight = props => (
 );
 ```
 
-[RangeDatePicker - Open On Sandbox](https://codesandbox.io/s/94npf)
+[DatePicker - Open On Sandbox](https://codesandbox.io/s/l56y1)
 
-[DatePicker - Open On Sandbox](https://codesandbox.io/s/dkrqk)
+[RangeDatePicker - Open On Sandbox](https://codesandbox.io/s/8oyx5)
 
 ## Composition
 

docs/drawer.md

@@ -95,7 +95,7 @@ const cssTransforms = {
 };
 ```
 
-[Drawer - Open On Sandbox](https://codesandbox.io/s/q9njc)
+[Drawer - Open On Sandbox](https://codesandbox.io/s/ostxr)
 
 ## Composition
 

docs/link.md

@@ -28,7 +28,7 @@ export const App = props => {
 export default App;
 ```
 
-[Link - Open on Sandbox](https://codesandbox.io/s/seki2)
+[Link - Open on Sandbox](https://codesandbox.io/s/5gwlm)
 
 ## Composition
 

docs/meter.md

@@ -110,7 +110,7 @@ function meterBarStyle(meter, props) {
 }
 ```
 
-[Meter - Open On Sandbox](https://codesandbox.io/s/6b6s7)
+[Meter - Open On Sandbox](https://codesandbox.io/s/8mxwv)
 
 ## Accessibility Requirement
 
@@ -131,21 +131,21 @@ function meterBarStyle(meter, props) {
 
 - **`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`
 
@@ -154,7 +154,7 @@ Defaults to `max`.
 
 - **`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

docs/number-input.md

@@ -52,7 +52,7 @@ export const App = props => {
 export default App;
 ```
 
-[NumberInput - Open On Sandbox](https://codesandbox.io/s/0twyb)
+[NumberInput - Open On Sandbox](https://codesandbox.io/s/j0wly)
 
 ## Accessibility Requirement
 
@@ -71,23 +71,25 @@ export default App;
 - **`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 `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 `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`
@@ -117,14 +119,15 @@ 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 `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 `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
@@ -158,10 +161,11 @@ 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 `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 `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`
@@ -184,10 +188,11 @@ 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 `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 `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

@@ -77,7 +77,7 @@ export const App = props => {
 export default App;
 ```
 
-[Pagination - Open On Sandbox](https://codesandbox.io/s/p92pq)
+[Pagination - Open On Sandbox](https://codesandbox.io/s/cwuhv)
 
 ## Accessibility Requirement
 

docs/picker-base.md

@@ -41,7 +41,7 @@ export const App = props => {
 export default App;
 ```
 
-[PickerBase - Open On Sandbox](https://codesandbox.io/s/ocnie)
+[PickerBase - Open On Sandbox](https://codesandbox.io/s/h7pxf)
 
 ## Composition