docs: added props,csblink,composition,example generation script (#160)

* chore(accordion): refactored & cleaned up accordion types (#153) * test(select): added select tests (#154) * test(select): added test for select component * test(select): added typeahead tests * chore: window.setTimeout -> setTimeout * chore: fix comment * test(select): added multi select tests * chore: moduleNameWrapper for renderless-component in jest * chore: try fix * chore: update import path * chore: wip prop generation * docs: fixed props types generator script * chore: removed redundant utils code * chore: outdent template strings * chore: unify getJsDocs function * chore: added inject-md-content script * docs: run docsgen:example & docsgen:props * build(props-docgen): 🐛 fix rangecalendar types * chore: accordion types reorder * chore: run prettier on markdown * chore: fixed perttier not working * docs: added composition generation script * docs: added prettify script and run once * refactor: refactored inject prop script * chore(accordion): 🏷️ update type declaration for prop generation (#163) * chore: regenerate docs * docs: added codesandbox link generation script * docs: improve sandbox script to add short sandbox url * docs: hardcode reakit dep & fixed extraDep * docs(calendar): 📝 update jsdocs for the calendar (#166) * docs(calendar): 📝 update jsdocs for the calendar * docs(calendar): 📝 update the examples with headings * docs: added calendar sandbox link * docs: added link_title support for csblinks generation * docs: added support for multiple csb links * chore: rename fsUtils to fs-utils * docs: added links in main readme * fix(docs): refactored & fixed multiple sandbox link generation * docs: fix csblinks path & regenerate docs * chore: renamed generate-docs to inject-examples & better chalk logs Co-authored-by: Navin <[email protected]>
adaptui · Nov 24, 2020 · 781b130 · 781b130
1 parent 2c007ce
commit 781b130
Show file tree

Hide file tree

Showing 40 changed files with 2,121 additions and 397 deletions.
diff --git a/README.md b/README.md
@@ -74,12 +74,12 @@ below documentation to learn more.
 
 ## Components
 
-- [Accordion](#accordion)
-- Breadcrumbs
-- Calendar
+- [Accordion](./docs/Accordion.md)
+- [Breadcrumbs](./docs/Breadcrumb.md)
+- [Calendar](./docs/Calendar.md)
 - Date Picker
 - Drawer
-- Link
+- [Link](./docs/Link.md)
 - Meter
 - Number Input
 - Pagination

diff --git a/docs-templates/Accordion.md b/docs-templates/Accordion.md
@@ -3,6 +3,16 @@
 Accessible Accordion component. It follows the
 [WAI-ARIA Accordion Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#accordion).
 
+<!-- CODESANDBOX
+link_title: Accordion Example Live Demo
+js: src/accordion/stories/__js/AccordionBasic.component.jsx
+css: src/accordion/stories/AccordionStyled.css
+-->
+
+# Props
+
+<!-- INJECT_PROPS src/accordion -->
+
 ### Accessibility
 
 - `Accordion` extends the accessibility features of
@@ -22,17 +32,10 @@ Accessible Accordion component. It follows the
 
 ### Composition
 
-- `Accordion` uses
-  [Composite](https://github.com/reakit/reakit/blob/master/docs/composite).
-- `AccordionTrigger` uses
-  [CompositeItem](https://github.com/reakit/reakit/blob/master/docs/composite).
-- `AccordionPanel` uses
-  [DisclosureContent](https://github.com/reakit/reakit/blob/master/docs/disclosure).
+<!-- INJECT_COMPOSITION src/accordion -->
 
 ### Example
 
 ```js
-
 <!-- IMPORT_EXAMPLE src/accordion/stories/__js/AccordionBasic.component.jsx -->
-
 ```
diff --git a/docs-templates/Breadcrumb.md b/docs-templates/Breadcrumb.md
@@ -4,6 +4,10 @@ Accessible `Breadcrumb` component that provides the required aria attributes for
 it's links. It follows the
 [WAI-ARIA Breadcrumb Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#breadcrumb).
 
+# Props
+
+<!-- INJECT_PROPS src/breadcrumbs -->
+
 ### Accessibilty
 
 - `Breadcrumbs` should have `aria-label` or `aria-labelledby` attribute.
@@ -13,12 +17,10 @@ it's links. It follows the
 
 ### Composition
 
-- `BreadcrumbLink` uses [Link](#Link).
+<!-- INJECT_COMPOSITION src/breadcrumbs -->
 
 ### Example
 
 ```js
-
 <!-- IMPORT_EXAMPLE src/breadcrumbs/stories/__js/Breadcrumbs.component.jsx -->
-
 ```
diff --git a/docs-templates/Calendar.md b/docs-templates/Calendar.md
@@ -0,0 +1,37 @@
+## Calendar
+
+Accessible `Calendar` component.
+
+<!-- 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
+-->
+
+# Props
+
+<!-- INJECT_PROPS src/calendar -->
+
+# Composition
+
+<!-- INJECT_COMPOSITION src/calendar -->
+
+### Example
+
+#### Base Calendar
+
+```js
+<!-- IMPORT_EXAMPLE src/calendar/stories/__js/CalendarBase.component.jsx -->
+```
+
+#### Range Calendar
+
+```js
+<!-- IMPORT_EXAMPLE src/calendar/stories/__js/CalendarRange.component.jsx -->
+```
diff --git a/docs-templates/Link.md b/docs-templates/Link.md
@@ -4,19 +4,20 @@ Accessible `Link` component that provides the required aria role when used under
 different compositions. It follows the
 [WAI-ARIA Link Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#link).
 
+# Props
+
+<!-- INJECT_PROPS src/link -->
+
 ### Accessibilty
 
 - `Link` has role `link`.
 
 ### Composition
 
-- `Link` uses
-  [Clickable](https://github.com/reakit/reakit/blob/master/docs/clickable)
+<!-- INJECT_COMPOSITION src/link -->
 
 ### Example
 
 ```js
-
 <!-- IMPORT_EXAMPLE src/link/stories/__js/Link.component.jsx -->
-
 ```