Skip to content

Commit

Permalink
docs: added docs generation script (#157)
Browse files Browse the repository at this point in the history 
* docs: added docs generation script

* docs: change readme doc layout

* 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]>

* docs: getting started and guides documentation (#170)

* docs: guidelines and getting started docs

* docs: fix links

* docs(datepicker): added docs for datepicker

* docs: fix accidental prop/compose generation in code-base-overview docs

* docs(readme): 📝  add docs for all the components (#171)

* docs(rename): 📝  files on the git

* docs: 📝  improve docs spellings and wordings

Co-authored-by: Navin Moorthy <[email protected]>

* docs(scripts): 📝  use scripts to generate docs

* refactor(docs): 📝  improve docs scripts

* docs: fixed docs gen multiple csblinks (#172)

* docs: fix csb multiple links generation

* docs: remove line ending on examples & added progress logs in gen script

Co-authored-by: Navin <[email protected]>
  • Loading branch information
@anuraghazra @navin-moorthy
anuraghazra and navin-moorthy authored Dec 2, 2020
1 parent d466475 commit 9487396
Show file tree
Hide file tree
Showing 69 changed files with 6,502 additions and 593 deletions.
224 changes: 22 additions & 202 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,208 +37,28 @@ yarn add renderless-components reakit

> Make sure `react react-dom` is installed.
## Usage

```jsx
import React from "react";
import {
Accordion,
AccordionPanel,
AccordionTrigger,
useAccordionState,
} from "renderless-components";

function App() {
const state = useAccordionState();

return (
<Accordion {...state}>
<h2>
<AccordionTrigger {...state}>Trigger 1</AccordionTrigger>
</h2>
<AccordionPanel {...state}>Panel 1</AccordionPanel>
<h2>
<AccordionTrigger {...state}>Trigger 2</AccordionTrigger>
</h2>
<AccordionPanel {...state}>Panel 2</AccordionPanel>
</Accordion>
);
}

ReactDOM.render(<App />, document.getElementById("root"));
```

Play with this on
[CodeSandbox](https://codesandbox.io/s/renderless-accordion-seywy) and read the
below documentation to learn more.

## Components

- [Accordion](#accordion)
- Breadcrumbs
- Calendar
- Date Picker
- Drawer
- Link
- Meter
- Number Input
- Pagination
- Progress
- Select
- Slider
- Time Picker
- Toast

## Accordion

Accessible Accordion component. It follows the
[WAI-ARIA Accordion Pattern](https://www.w3.org/TR/wai-aria-practices-1.2/#accordion).

### Usage

```js
import {
Accordion,
AccordionPanel,
AccordionTrigger,
useAccordionState,
} from "renderless-components";

function Example() {
const state = useAccordionState();

return (
<Accordion {...state}>
<h2>
<AccordionTrigger {...state}>Trigger 1</AccordionTrigger>
</h2>
<AccordionPanel {...state}>Panel 1</AccordionPanel>
<h2>
<AccordionTrigger {...state}>Trigger 2</AccordionTrigger>
</h2>
<AccordionPanel {...state}>Panel 2</AccordionPanel>
<h2>
<AccordionTrigger {...state}>Trigger 3</AccordionTrigger>
</h2>
<AccordionPanel {...state}>Panel 3</AccordionPanel>
<h2>
<AccordionTrigger {...state}>Trigger 4</AccordionTrigger>
</h2>
<AccordionPanel {...state}>Panel 4</AccordionPanel>
<h2>
<AccordionTrigger {...state}>Trigger 5</AccordionTrigger>
</h2>
<AccordionPanel {...state}>Panel 5</AccordionPanel>
</Accordion>
);
}
```

### Accessibility

- `Accordion` extends the accessibility features of
[Composite](https://github.com/reakit/reakit/blob/master/docs/composite/#accessibility).
- `AccordionTrigger` has role `button`.
- `AccordionTrigger` has `aria-controls` referring to its associated
`AccordionPanel`.
- `AccordionTrigger` has `aria-expanded` set to `true` when it's associated
`AccordionPanel` is expanded.
- Each `AccordionTrigger` should be wrapped in an element with role `heading`.
- `AccordionTrigger` extends the accessibility features of
[CompositeItem](https://github.com/reakit/reakit/blob/master/docs/composite/#accessibility).
- `AccordionPanel` has `aria-labelledby` referring to its associated
`AccordionTrigger`.
- `AccordionPanel` extends the accessibility features of
[DisclosureContent](https://github.com/reakit/reakit/blob/master/docs/disclosure).

### 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).

## Link

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).

### Usage

```js
import { Link } from "renderless-components";

function Example() {
return <Link href="#link">Link</Link>;
}
```

### Accessibilty

- `Link` has role `link`.

### Composition

- `Link` uses
[Clickable](https://github.com/reakit/reakit/blob/master/docs/clickable)

## Breadcrumb

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).

### Usage

```js
import { Breadcrumbs, BreadcrumbLink } from "renderless-components";

function Example() {
return (
<Breadcrumbs className="breadcrumb">
<ol>
<li>
<BreadcrumbLink href="https://www.w3.org/TR/wai-aria-practices-1.1/">
WAI-ARIA Authoring Practices 1.1
</BreadcrumbLink>
</li>
<li>
<BreadcrumbLink href="https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex">
Design Patterns
</BreadcrumbLink>
</li>
<li>
<BreadcrumbLink
isCurrent
href="https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb"
>
Breadcrumb Pattern
</BreadcrumbLink>
</li>
<li>
<BreadcrumbLink href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html">
Breadcrumb Example
</BreadcrumbLink>
</li>
</ol>
</Breadcrumbs>
);
}
```

### Accessibilty

- `Breadcrumbs` should have `aria-label` or `aria-labelledby` attribute.
- `BreadcrumbLink` should have `aria-current` set to `page` if the currenct page
is loaded.
- `BreadcrumbLink` extends the accessibility features of [Link](#Link).

### Composition

- `BreadcrumbLink` uses [Link](#Link).
## Getting started

Check out our [getting started docs](/docs/getting-started.md)

## Component Docs

- [Accordion](docs/accordion.md)
- [Breadcrumbs](docs/breadcrumb.md)
- [Calendar](docs/calendar.md)
- [Date Picker](docs/datepicker.md)
- [Drawer](docs/drawer.md)
- [Link](docs/Link.md)
- [Meter](docs/meter.md)
- [Number Input](docs/number-input.md)
- [Pagination](docs/pagination.md)
- [Picker Base](docs/picker-base.md)
- [Progress](docs/progress.md)
- [Segment](docs/segment.md)
- [Select](docs/select.md)
- [Slider](docs/slider.md)
- [Time Picker](docs/timepicker.md)
- [Toast](docs/toast.md)

## Contributors ✨

Expand Down
42 changes: 42 additions & 0 deletions docs-templates/accordion.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
## Accordion

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
deps: [emotion]
-->

## Props

<!-- INJECT_PROPS src/accordion -->

## Accessibility

- `Accordion` extends the accessibility features of
[Composite](https://github.com/reakit/reakit/blob/master/docs/composite/#accessibility).
- `AccordionTrigger` has role `button`.
- `AccordionTrigger` has `aria-controls` referring to its associated
`AccordionPanel`.
- `AccordionTrigger` has `aria-expanded` set to `true` when it's associated
`AccordionPanel` is expanded.
- Each `AccordionTrigger` should be wrapped in an element with role `heading`.
- `AccordionTrigger` extends the accessibility features of
[CompositeItem](https://github.com/reakit/reakit/blob/master/docs/composite/#accessibility).
- `AccordionPanel` has `aria-labelledby` referring to its associated
`AccordionTrigger`.
- `AccordionPanel` extends the accessibility features of
[DisclosureContent](https://github.com/reakit/reakit/blob/master/docs/disclosure).

## Composition

<!-- INJECT_COMPOSITION src/accordion -->

## Example

```js
<!-- IMPORT_EXAMPLE src/accordion/stories/__js/AccordionBasic.component.jsx -->
```
26 changes: 26 additions & 0 deletions docs-templates/breadcrumb.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
## Breadcrumb

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.
- `BreadcrumbLink` should have `aria-current` set to `page` if the currenct page
is loaded.
- `BreadcrumbLink` extends the accessibility features of [Link](#Link).

## Composition

<!-- INJECT_COMPOSITION src/breadcrumbs -->

## Example

```js
<!-- IMPORT_EXAMPLE src/breadcrumbs/stories/__js/Breadcrumbs.component.jsx -->
```
37 changes: 37 additions & 0 deletions docs-templates/calendar.md
View file
Original file line number Diff line number Diff line change
@@ -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 -->
```
37 changes: 37 additions & 0 deletions docs-templates/datepicker.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
## DatePicker

Accessible `DatePicker` component.

<!-- 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
-->

## Props

<!-- INJECT_PROPS src/datepicker -->

## Composition

<!-- INJECT_COMPOSITION src/datepicker -->

## Example

### DatePicker

```js
<!-- IMPORT_EXAMPLE src/datepicker/stories/__js/DatePickerBase.component.jsx -->
```

### Range Date Picker

```js
<!-- IMPORT_EXAMPLE src/datepicker/stories/__js/DatePickerRange.component.jsx -->
```
22 changes: 22 additions & 0 deletions docs-templates/drawer.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
## Drawer

Accessible `Drawer` component.

<!-- CODESANDBOX
link_title: Drawer - Open On Sandbox
js: src/drawer/stories/__js/Drawer.component.jsx
-->

## Props

<!-- INJECT_PROPS src/drawer -->

## Composition

<!-- INJECT_COMPOSITION src/drawer -->

## Example

```js
<!-- IMPORT_EXAMPLE src/drawer/stories/__js/Drawer.component.jsx -->
```
Loading

0 comments on commit 9487396

Please sign in to comment.