-
Notifications
You must be signed in to change notification settings - Fork 119
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
29348ec
commit cc3af00
Showing
22 changed files
with
534 additions
and
403 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
82 changes: 82 additions & 0 deletions
82
app/docs/components/datePicker/variant/CircleDatePicker.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| 'use client' | ||
| import { format } from 'date-fns' | ||
| import { Calendar } from 'phosphor-react' | ||
| import { useState } from 'react' | ||
| import { Button, DatePicker, Popover, PopoverAction, PopoverContent } from '../../../../src' | ||
|
|
||
| const CircleDatePicker = () => { | ||
| const [date, setDate] = useState<Date>() | ||
| return ( | ||
| <Popover> | ||
| <PopoverAction asChild> | ||
| <Button | ||
| color="secondary" | ||
| size="lg" | ||
| className="w-[280px] justify-start gap-2.5 border border-metal-100 text-body-4" | ||
| variant="outline"> | ||
| <Calendar size={20} className="text-metal-400 dark:text-white" /> | ||
| {date ? format(date ?? new Date(), 'PPP') : <span>Select Your Date</span>} | ||
| </Button> | ||
| </PopoverAction> | ||
| <PopoverContent align="start" className="max-w-min border-0"> | ||
| <DatePicker dayShape="circle" mode="single" selected={date} onSelect={setDate} showOutsideDays={true} /> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ) | ||
| } | ||
|
|
||
| const CircleDatePickerCode = { | ||
| 'DatePickerComponent.jsx': ` | ||
| 'use client' | ||
| import { format } from 'date-fns' | ||
| import { useState } from 'react' | ||
| import { Calendar } from 'phosphor-react' | ||
| import { Button, DatePicker, Popover, PopoverContent, PopoverAction } from 'keep-react' | ||
| export const DatePickerComponent = () => { | ||
| const [date, setDate] = useState(null) | ||
| return ( | ||
| <Popover> | ||
| <PopoverAction asChild> | ||
| <Button color="secondary" size="lg" className="w-[286px] justify-start gap-2 border border-metal-100" variant="outline"> | ||
| <Calendar size={20} className="text-metal-400 dark:text-white" /> | ||
| {date ? format(date ?? new Date(), 'PPP') : <span>Select Your Date</span>} | ||
| </Button> | ||
| </PopoverAction> | ||
| <PopoverContent align="start" className="max-w-min border-0"> | ||
| <DatePicker dayShape="circle" mode="single" selected={date} onSelect={setDate} showOutsideDays={true} /> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ) | ||
| } | ||
| `, | ||
| 'DatePickerComponent.tsx': ` | ||
| 'use client' | ||
| import { useState } from 'react' | ||
| import { format } from 'date-fns' | ||
| import { Calendar } from 'phosphor-react' | ||
| import { Button, DatePicker, Popover, PopoverAction, PopoverContent } from 'keep-react' | ||
| export const DatePickerComponent = () => { | ||
| const [date, setDate] = useState<Date>() | ||
| return ( | ||
| <Popover> | ||
| <PopoverAction asChild> | ||
| <Button | ||
| color="secondary" | ||
| size="lg" | ||
| className="w-[286px] justify-start gap-2.5 border border-metal-100 text-body-4" | ||
| variant="outline"> | ||
| <Calendar size={20} className="text-metal-400 dark:text-white" /> | ||
| {date ? format(date ?? new Date(), 'PPP') : <span>Select Your Date</span>} | ||
| </Button> | ||
| </PopoverAction> | ||
| <PopoverContent align="start" className="max-w-min border-0"> | ||
| <DatePicker mode="single" selected={date} onSelect={setDate} showOutsideDays={true} /> | ||
| </PopoverContent> | ||
| </Popover> | ||
| ) | ||
| } | ||
| `, | ||
| } | ||
| export { CircleDatePicker, CircleDatePickerCode } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,41 @@ | ||
| import { DefaultStep, DefaultStepCode } from './variant/DefaultStep' | ||
| import { DefaultSteps, DefaultStepsCode } from './variant/DefaultSteps' | ||
| import { StepWithIcon, StepWithIconCode } from './variant/StepWithIcon' | ||
| import { StepWithBorder, StepWithBorderCode } from './variant/StepWithBorder' | ||
|
|
||
| import { StepPointAPI, StepLineAPI } from './StepApi' | ||
| import { StepsWithNumber, StepsWithNumberCode } from './variant/StepsWithNumber' | ||
| import { StepPointAPI } from './StepApi' | ||
| import CodeHighlightPreview from '../../../components/CodeHighlightPreview' | ||
|
|
||
| import ComponentApi from '../../../components/ComponentApi' | ||
|
|
||
| ## Table of Contents | ||
|
|
||
| The Steps Component is a user interface element used to guide users through a multi-step process or workflow. It presents a visual representation of the various stages or steps a user needs to complete in sequential order. | ||
| The Steps Component is a UI element that guides users through a multi-step process or workflow. It visually represents the different stages a user needs to complete in sequence. | ||
|
|
||
| ## Default Step | ||
| ## Default Steps | ||
|
|
||
| The Default Step refers to the fundamental and default configuration of a Steps Component within a user interface. It provides a clear visual representation of each step in a multi-step process. | ||
| The Default Steps configuration showcases the basic setup of the Steps Component within the UI. | ||
|
|
||
| <CodeHighlightPreview github="Steps" code={DefaultStepCode}> | ||
| <DefaultStep /> | ||
| <CodeHighlightPreview github="Steps" code={DefaultStepsCode}> | ||
| <DefaultSteps /> | ||
| </CodeHighlightPreview> | ||
|
|
||
| ## Step With Border | ||
| ## Steps Number Point | ||
|
|
||
| The `border` variant of the Step Point adds a border around the step indicator, making it more prominent and visually distinct. | ||
| You can display numbers as step indicators by passing them as children to the `<StepsPoint>` component. | ||
|
|
||
| <CodeHighlightPreview github="Steps" code={StepWithBorderCode}> | ||
| <StepWithBorder /> | ||
| <CodeHighlightPreview github="Steps" code={StepsWithNumberCode}> | ||
| <StepsWithNumber /> | ||
| </CodeHighlightPreview> | ||
|
|
||
| ## Step With Icon | ||
| ## Steps With Icon | ||
|
|
||
| The `icon` variant of the Step Point includes an icon within the step indicator, providing an additional visual cue. | ||
| To use icons as step indicators, pass the desired icon as children to the `<StepsPoint>` component. | ||
|
|
||
| <CodeHighlightPreview github="Steps" code={StepWithIconCode}> | ||
| <StepWithIcon /> | ||
| </CodeHighlightPreview> | ||
|
|
||
| ## Step Point API Reference | ||
| ## Steps Point API Reference | ||
|
|
||
| Explore the available props for the `<StepPoint/>` component | ||
| Below are the available props for the `<StepsPoint>` component: | ||
|
|
||
| <ComponentApi data={StepPointAPI} /> | ||
|
|
||
| ## Step Line API Reference | ||
|
|
||
| Explore the available props for the `<StepLine/>` component | ||
|
|
||
| <ComponentApi data={StepLineAPI} /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,30 @@ | ||
| export const StepPointAPI = [ | ||
| { | ||
| id: 1, | ||
| propsName: 'completed', | ||
| propsName: 'isComplete', | ||
| propsType: 'boolean', | ||
| propsDescription: 'Indicates if the step is completed.', | ||
| default: 'false', | ||
| }, | ||
| { | ||
| id: 2, | ||
| propsName: 'variant', | ||
| propsType: ['default', 'border', 'icon'], | ||
| propsDescription: 'Variant of the step point.', | ||
| default: 'default', | ||
| propsName: 'className', | ||
| propsType: 'string', | ||
| propsDescription: 'The className of the step point.', | ||
| default: '', | ||
| }, | ||
| ] | ||
|
|
||
| export const StepLineAPI = [ | ||
| { | ||
| id: 1, | ||
| propsName: 'completed', | ||
| propsType: 'boolean', | ||
| propsDescription: 'Indicates if the step line is completed.', | ||
| default: 'false', | ||
| id: 3, | ||
| propsName: 'rootClassName', | ||
| propsType: 'string', | ||
| propsDescription: 'The className of the step container.', | ||
| default: '', | ||
| }, | ||
| { | ||
| id: 4, | ||
| propsName: 'lineClassName', | ||
| propsType: 'string', | ||
| propsDescription: 'The className of the step line.', | ||
| default: '', | ||
| }, | ||
| ] |
Oops, something went wrong.