Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Added components DateTimeRangePicker and TimeInput #54

Merged
Merged
16 changes: 16 additions & 0 deletions apps/docs/components/ExampleDateTimeRangePicker.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { DateTimeRangePicker } from '@enterwell/react-ui';
import { useState } from 'react';

export function ExampleDateTimeRangePicker() {
const [start, setStart] = useState<Date>(new Date(new Date().getTime() - 1000 * 60 * 60 * 24));
const [end, setEnd] = useState<Date>(new Date());

return (
// @highlight-start
<DateTimeRangePicker
start={start}
end={end}
onChange={(start, end) => { setStart(start); setEnd(end); }} />
// @highlight-end
)
}
14 changes: 14 additions & 0 deletions apps/docs/components/ExampleTimeInput.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { TimeInput } from '@enterwell/react-ui';
import { useState } from 'react';

export function ExampleTimeInput() {
const [value, setValue] = useState('12:00');

return (
// @highlight-start
<TimeInput
value={value}
onTimeChange={(setValue)} />
// @highlight-end
)
}
2 changes: 1 addition & 1 deletion apps/docs/components/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export const theme = createTheme({
palette: {
mode: 'dark',
primary: {
main: '#ffffff',
main: '#eeeeee',
},
secondary: {
main: '#b5b5b5',
Expand Down
33 changes: 33 additions & 0 deletions apps/docs/pages/react-ui/components/date-time-range-picker.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
title: DateTimeRangePicker
---

import { DateTimeRangePicker } from '@enterwell/react-ui';
import { ComponentWithSource } from '../../../components/docs/ComponentWithSource.tsx';
import { ExampleDateTimeRangePicker } from '../../../components/ExampleDateTimeRangePicker.tsx';
import { ComponentDescription, ComponentParameters, ComponentSource } from '../../../components/docs/ComponentDocs';

# DateTimeRangePicker

## Description

<ComponentDescription name="DateTimeRangePicker" />

### Parameters

<ComponentParameters name="DateTimeRangePicker" />

## Example

<ComponentWithSource component={ ExampleDateTimeRangePicker } centered />

## Inspect

<details>
<summary>Source code</summary>
<ComponentSource
package="@enterwell/react-ui"
directory="DateTimeRangePicker"
name="DateTimeRangePicker"
/>
</details>
33 changes: 33 additions & 0 deletions apps/docs/pages/react-ui/components/time-input.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
title: TimeInput
---

import { TimeInput } from '@enterwell/react-ui';
import { ComponentWithSource } from '../../../components/docs/ComponentWithSource.tsx';
import { ExampleTimeInput } from '../../../components/ExampleTimeInput.tsx';
import { ComponentDescription, ComponentParameters, ComponentSource } from '../../../components/docs/ComponentDocs';

# TimeInput

## Description

<ComponentDescription name="TimeInput" />

### Parameters

<ComponentParameters name="TimeInput" />

## Example

<ComponentWithSource component={ ExampleTimeInput } centered />

## Inspect

<details>
<summary>Source code</summary>
<ComponentSource
package="@enterwell/react-ui"
directory="TimeInput"
name="TimeInput"
/>
</details>
Loading