Skip to content

Commit

Permalink
docs: use prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@jigsawye
jigsawye committed Apr 12, 2021
1 parent 609db5a commit 94a62dd
Show file tree
Hide file tree
Showing 32 changed files with 289 additions and 304 deletions.
2 changes: 1 addition & 1 deletion .lintstagedrc
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"*.{js,ts,tsx}": ["eslint --ext=ts,tsx --fix", "stylelint"],
"*.json": ["prettier --write"],
"*.{md,json}": ["prettier --write"],
"package.json": ["prettier-package-json --write", "prettier --write"],
".*rc": ["prettier --parser json --write"]
}
16 changes: 7 additions & 9 deletions website/docs/Badge.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,15 +73,14 @@ import { Badge } from 'tailor-ui';
return (
<div>
<Badge count={count}>
<Button variant={count === 0 ? undefined: 'normal'} icon={MdNotifications} />
<Button
variant={count === 0 ? undefined : 'normal'}
icon={MdNotifications}
/>
</Badge>
<br />
<br />
<Button
width="36px"
size="sm"
onClick={() => setCount(count + 1)}
>
<Button width="36px" size="sm" onClick={() => setCount(count + 1)}>
+
</Button>
<Button
Expand All @@ -98,14 +97,13 @@ import { Badge } from 'tailor-ui';
</Button>
</div>
);
}
};
```


## API

| Property | Description | Type | Default |
|-----------------|------------------------------------------|-----------|---------|
| --------------- | ---------------------------------------- | --------- | ------- |
| `count` | Number to show in badge | `number` | |
| `overflowCount` | Max count to show | `number` | 99 |
| `showZero` | Whether to show badge when count is zero | `boolean` | `false` |
Expand Down
52 changes: 26 additions & 26 deletions website/docs/Breadcrumb.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,42 +54,42 @@ import { Breadcrumb } from 'tailor-ui';
### Overflow

```jsx live
<Breadcrumb
items={[
{
key: '1',
name: 'Page 1 is too too long long long long long long long long',
onClick: () => {},
},
{
key: '2',
name: 'Page 2 is too too long long long long long long long long',
onClick: () => {},
},
{
key: '3',
name: 'Page 3 is too too long long long long long long long long',
onClick: () => {},
},
{
key: '4',
name: 'Page 4 is too too long long long long long long long long',
onClick: () => {},
},
]}
/>
<Breadcrumb
items={[
{
key: '1',
name: 'Page 1 is too too long long long long long long long long',
onClick: () => {},
},
{
key: '2',
name: 'Page 2 is too too long long long long long long long long',
onClick: () => {},
},
{
key: '3',
name: 'Page 3 is too too long long long long long long long long',
onClick: () => {},
},
{
key: '4',
name: 'Page 4 is too too long long long long long long long long',
onClick: () => {},
},
]}
/>
```

## API

| Property | Description | Type | Default |
|----------|--------------------------|------------|---------|
| -------- | ------------------------ | ---------- | ------- |
| `items` | Breadcrumb configuration | Breadcrumb | `[]` |

### Breadcrumb item

| Property | Description | Type | Default |
|-----------|-----------------------------------------|-------------------------------|---------|
| --------- | --------------------------------------- | ----------------------------- | ------- |
| `key` | key | `string` | |
| `name` | display name | `ReactNode` | |
| `onClick` | set the handler to handle `click` event | `(event: MouseEvent) => void` | |
4 changes: 2 additions & 2 deletions website/docs/Button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ import { MdCheck } from 'react-icons/md';
Click me!
</Button>
);
}
};
```

### Sizes
Expand All @@ -229,7 +229,7 @@ import { MdCheck } from 'react-icons/md';
## API

| Property | Description | Type | Default |
|------------|---------------------------------------------------------|------------------------------------------------------------------------------------|---------|
| ---------- | ------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------- |
| `variant` | set different variant to display other colors of button | `'primary'` `'primary-invert'` `'danger'` `'danger-invert'` `'regular'` `'normal'` | |
| `size` | the size of button | `'sm'` \| `'md'` \| `'lg'` | `'md'` |
| `loading` | set the loading status of button | `boolean` | `false` |
Expand Down
16 changes: 7 additions & 9 deletions website/docs/Checkbox.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import { Checkbox, CheckboxGroup } from 'tailor-ui';
</Checkbox>
</>
);
}
};
```

#### Use with FormField
Expand All @@ -42,9 +42,7 @@ import { Checkbox, CheckboxGroup } from 'tailor-ui';
<FormField
required
label="Checked Required"
validator={boolean()
.oneOf([true])
.required()}
validator={boolean().oneOf([true]).required()}
>
<Checkbox>Click Me</Checkbox>
</FormField>
Expand Down Expand Up @@ -94,7 +92,7 @@ import { Checkbox, CheckboxGroup } from 'tailor-ui';
/>
</>
);
}
};
```

#### Controlled
Expand Down Expand Up @@ -124,7 +122,7 @@ import { Checkbox, CheckboxGroup } from 'tailor-ui';
</Button>
</>
);
}
};
```

#### Composition render
Expand Down Expand Up @@ -166,7 +164,7 @@ import { Checkbox, CheckboxGroup } from 'tailor-ui';
</CheckboxGroup>
</>
);
}
};
```

#### Direction
Expand All @@ -188,7 +186,7 @@ import { Checkbox, CheckboxGroup } from 'tailor-ui';
onChange={set}
/>
);
}
};
```

#### Use with FormField
Expand All @@ -197,7 +195,7 @@ import { Checkbox, CheckboxGroup } from 'tailor-ui';
<FormField
required
label="All Checked Required"
validator={value =>
validator={(value) =>
value && value.length !== 4 ? 'Should checked all check box' : null
}
>
Expand Down
19 changes: 9 additions & 10 deletions website/docs/Container.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,29 +21,28 @@ import { Container, Box } from 'tailor-ui';
<Box p="24px" bg="surface2">
<Container title="Title">
<Container.Section title="Section Title #1">
Section titles are text derived from either a transcript or screenplay of the
dialog or commentary in films.
Section titles are text derived from either a transcript or screenplay of
the dialog or commentary in films.
</Container.Section>
<Container.Section title="Section Title #2">
Section titles are text derived from either a transcript or screenplay of the
dialog or commentary in films.
Section titles are text derived from either a transcript or screenplay of
the dialog or commentary in films.
</Container.Section>
</Container>

<Container title="Title" subTitle="SubTitle">
<Container.Section title="Section Title #1">
Section titles are text derived from either a transcript or screenplay of the
dialog or commentary in films.
Section titles are text derived from either a transcript or screenplay of
the dialog or commentary in films.
</Container.Section>
<Container.Section title="Section Title #2">
Section titles are text derived from either a transcript or screenplay of the
dialog or commentary in films.
Section titles are text derived from either a transcript or screenplay of
the dialog or commentary in films.
</Container.Section>
</Container>
</Box>
```


### With Table

```jsx live
Expand All @@ -60,7 +59,7 @@ import { Container, Box } from 'tailor-ui';
<Table.HeadColumn>Action</Table.HeadColumn>
</Table.Head>
<Table.Body>
{range(1, 4).map(value => (
{range(1, 4).map((value) => (
<Table.Row key={value}>
<Table.Column>Name {value}</Table.Column>
<Table.Column>Platform {value}</Table.Column>
Expand Down
41 changes: 20 additions & 21 deletions website/docs/DatePicker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import { DatePicker, RangeDatePicker } from 'tailor-ui';
</Button>
</>
);
}
};
```

#### allowClear
Expand All @@ -56,7 +56,7 @@ import { DatePicker, RangeDatePicker } from 'tailor-ui';
<DatePicker defaultValue={new Date()} onChange={console.log} allowClear />
</>
);
}
};
```

#### Choose Time
Expand All @@ -66,7 +66,7 @@ import { DatePicker, RangeDatePicker } from 'tailor-ui';
onChange={console.log}
placeholder="Please Select Date & Time"
showTime={{
showSecond: true
showSecond: true,
}}
/>
```
Expand All @@ -88,7 +88,7 @@ import { DatePicker, RangeDatePicker } from 'tailor-ui';

```jsx live
<DatePicker
disabledDate={current => {
disabledDate={(current) => {
const date = new Date();
return DateFns.isBefore(current, date);
}}
Expand All @@ -111,8 +111,8 @@ import { DatePicker, RangeDatePicker } from 'tailor-ui';
<br />
<DateRangePicker value={value} onChange={setValue} />
</>
)
}
);
};
```

#### With time picker
Expand All @@ -135,7 +135,7 @@ import { DatePicker, RangeDatePicker } from 'tailor-ui';
<DateRangePicker defaultValue={[]} onChange={console.log} allowClear />
</>
);
}
};
```

### Calendar usage
Expand Down Expand Up @@ -164,7 +164,7 @@ import { DatePicker, RangeDatePicker } from 'tailor-ui';
### Common API

| Property | Description | Type | Default |
|----------------|---------------------------------------------|------------------------------------------------------|---------|
| -------------- | ------------------------------------------- | ---------------------------------------------------- | ------- |
| `allowClear` | Whether to show clear button | `boolean` | `false` |
| `showTime` | to provide an additional time selection | `boolean \| ShowTime Options` | `false` |
| `disabledDate` | specify the date that cannot be selected | `(current: Date) => boolean` | |
Expand All @@ -174,7 +174,7 @@ import { DatePicker, RangeDatePicker } from 'tailor-ui';
#### ShowTime Options

| Property | Description | Type | Default |
|-----------------------|------------------------------------|-----------|---------|
| --------------------- | ---------------------------------- | --------- | ------- |
| `showHour` | whether show hour | `Boolean` | `true` |
| `showMinute` | whether show minute | `Boolean` | `true` |
| `showSecond` | whether show second | `Boolean` | `true` |
Expand All @@ -184,20 +184,19 @@ import { DatePicker, RangeDatePicker } from 'tailor-ui';
| `secondStep` | interval between seconds in picker | `Number` | 1 |
| `hideDisabledOptions` | whether hide disabled options | `Boolean` | false |


### DatePicker

| Property | Description | Type | Default |
|----------------|---------------------------------------------|------------------------------------------------------|---------|
| `value` | to set date | `Date`
| `defaultValue` | to set default date, if start time or end time is null or undefined, the date range will be an open interval | `Date` | |
| `onChange` | a callback function, can be executed when the selected time is changing | `(date: Date \| null, dateStrings: [string, string]) => void` | |
| Property | Description | Type | Default |
| -------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- | ------- |
| `value` | to set date | `Date` |
| `defaultValue` | to set default date, if start time or end time is null or undefined, the date range will be an open interval | `Date` | |
| `onChange` | a callback function, can be executed when the selected time is changing | `(date: Date \| null, dateStrings: [string, string]) => void` | |

### RangeDatePicker

| Property | Description | Type | Default |
|----------------|---------------------------------------------|------------------------------------------------------|---------|
| `value` | to set date | `[Date, Date]`
| `defaultValue` | to set default date, if start time or end time is null or undefined, the date range will be an open interval | `[Date, Date]` | |
| `onChange` | a callback function, can be executed when the selected time is changing | `(date: [Date, Date] \| null) => void` | |
| `ranges` | preseted ranges for quick selection | `{ String \| [range: string]: [Date, Date] } \| { [range: string]: () => [Date, Date] }` | |
| Property | Description | Type | Default |
| -------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | ------- |
| `value` | to set date | `[Date, Date]` |
| `defaultValue` | to set default date, if start time or end time is null or undefined, the date range will be an open interval | `[Date, Date]` | |
| `onChange` | a callback function, can be executed when the selected time is changing | `(date: [Date, Date] \| null) => void` | |
| `ranges` | preseted ranges for quick selection | `{ String \| [range: string]: [Date, Date] } \| { [range: string]: () => [Date, Date] }` | |
8 changes: 4 additions & 4 deletions website/docs/Drawer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import { Drawer } from 'tailor-ui';
</Drawer>
</>
);
}
};
```

### Custom Placement
Expand Down Expand Up @@ -75,7 +75,7 @@ import { Drawer } from 'tailor-ui';
</Drawer>
</>
);
}
};
```

### Add Custom Footer
Expand Down Expand Up @@ -105,7 +105,7 @@ import { Drawer } from 'tailor-ui';
</Drawer>
</>
);
}
};
```

### hidden close button and prevent mask clicked close
Expand Down Expand Up @@ -137,7 +137,7 @@ import { Drawer } from 'tailor-ui';
</Drawer>
</>
);
}
};
```

## API
Expand Down
Loading

0 comments on commit 94a62dd

Please sign in to comment.