-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(tailwind): 📝 add tailwind support & add examples (#186)
* docs(tailwind): 📝 add tailwind support for adding egs * test(aria): ✅ fix tests with role presentation https://dequeuniversity.com/rules/axe/4.1/presentation-role-conflict?application=axeAPI * docs(storybook): 📝 add global css for tailwind utilities support * chore: added datepicker tailwind examples * chore: scoped datepicker styles * chore: tailwind local styles * docs(storybook): 📝 fix tailwind scopify issue * chore: tailwind datepicker chevron fix Co-authored-by: Anurag <[email protected]>
- Loading branch information
1 parent
cb437f4
commit 8f5cbba
Showing
23 changed files
with
1,627 additions
and
1,875 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <style> | ||
| body { | ||
| font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, | ||
| "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, | ||
| "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", | ||
| "Noto Color Emoji"; | ||
| } | ||
| </style> |
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,5 @@ | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" /> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Inter&display=swap" | ||
| rel="stylesheet" | ||
| /> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import * as React from "react"; | ||
| import { Meta, Story } from "@storybook/react"; | ||
|
|
||
| import "../../../tailwind/index.css"; | ||
| import { DatePicker } from "./styled/DatePicker.component"; | ||
| import { RangeDatePicker } from "./styled/RangeDatePicker.component"; | ||
|
|
||
| export default { | ||
| component: DatePicker, | ||
| title: "DatePicker/Styled", | ||
| argTypes: { | ||
| value: { control: "date" }, | ||
| minValue: { control: "date" }, | ||
| maxValue: { control: "date" }, | ||
| defaultValue: { control: "date", defaultValue: new Date() }, | ||
| }, | ||
| decorators: [ | ||
| Story => { | ||
| document.body.id = "tailwind"; | ||
| return <Story />; | ||
| }, | ||
| ], | ||
| } as Meta; | ||
|
|
||
| const Base: Story = args => <DatePicker {...args} />; | ||
| const RangeBase: Story = args => <RangeDatePicker {...args} />; | ||
|
|
||
| export const Default = Base.bind({}); | ||
| Default.args = {}; | ||
|
|
||
| export const Range = RangeBase.bind({}); | ||
| Default.args = {}; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| import * as React from "react"; | ||
| import { | ||
| CalendarCell, | ||
| CalendarGrid, | ||
| CalendarHeader, | ||
| CalendarButton, | ||
| CalendarWeekTitle, | ||
| CalendarCellButton, | ||
| CalendarStateReturn, | ||
| Calendar as CalendarWrapper, | ||
| } from "@renderlesskit/react"; | ||
|
|
||
| import { | ||
| ChevronLeft, | ||
| ChevronRight, | ||
| DoubleChevronLeft, | ||
| DoubleChevronRight, | ||
| } from "../Utils.component"; | ||
|
|
||
| export const Calendar: React.FC<CalendarStateReturn> = state => { | ||
| return ( | ||
| <CalendarWrapper | ||
| {...state} | ||
| className="styled-datepicker calendar p-3 rounded-md bg-white shadow-lg w-max" | ||
| > | ||
| <div className="flex justify-between"> | ||
| <CalendarButton | ||
| {...state} | ||
| goto="previousYear" | ||
| className="text-gray-700 w-16px" | ||
| > | ||
| <DoubleChevronLeft /> | ||
| </CalendarButton> | ||
| <CalendarButton | ||
| {...state} | ||
| goto="previousMonth" | ||
| className="text-gray-700 w-16px" | ||
| > | ||
| <ChevronLeft /> | ||
| </CalendarButton> | ||
| <CalendarHeader | ||
| className="text-gray-700 font-bold text-sm" | ||
| {...state} | ||
| /> | ||
| <CalendarButton | ||
| {...state} | ||
| goto="nextMonth" | ||
| className="text-gray-700 w-16px" | ||
| > | ||
| <ChevronRight /> | ||
| </CalendarButton> | ||
| <CalendarButton | ||
| {...state} | ||
| goto="nextYear" | ||
| className="text-gray-700 w-16px" | ||
| > | ||
| <DoubleChevronRight /> | ||
| </CalendarButton> | ||
| </div> | ||
|
|
||
| <CalendarGrid {...state} as="table" className="p-4 mt-2"> | ||
| <thead> | ||
| <tr className="text-center"> | ||
| {state.weekDays.map((day, dayIndex) => { | ||
| return ( | ||
| <CalendarWeekTitle | ||
| {...state} | ||
| className="text-gray-500 font-light calendar__cell" | ||
| as="th" | ||
| scope="col" | ||
| key={dayIndex} | ||
| dayIndex={dayIndex} | ||
| > | ||
| <abbr title={day.title}>{day.abbr.slice(0, 2)}</abbr> | ||
| </CalendarWeekTitle> | ||
| ); | ||
| })} | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {state.daysInMonth.map((week, weekIndex) => ( | ||
| <tr key={weekIndex}> | ||
| {week.map((day, dayIndex) => ( | ||
| <CalendarCell | ||
| {...state} | ||
| className="calendar__cell" | ||
| as="td" | ||
| key={dayIndex} | ||
| date={day} | ||
| > | ||
| <CalendarCellButton className="p-2" {...state} date={day} /> | ||
| </CalendarCell> | ||
| ))} | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </CalendarGrid> | ||
| </CalendarWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export const CalendarIcon = () => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| focusable="false" | ||
| aria-hidden="true" | ||
| role="img" | ||
| className="w-5 stroke-current" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| strokeWidth={2} | ||
| d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" | ||
| /> | ||
| </svg> | ||
| ); |
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,56 @@ | ||
| import * as React from "react"; | ||
|
|
||
| import { | ||
| DatePickerSegment, | ||
| DatePickerContent, | ||
| DatePickerTrigger, | ||
| useDatePickerState, | ||
| DatePickerSegmentField, | ||
| DatePickerInitialState, | ||
| DatePicker as DatePickerWrapper, | ||
| } from "@renderlesskit/react"; | ||
| import { Calendar, CalendarIcon } from "./Calendar"; | ||
|
|
||
| export const DatePicker: React.FC<DatePickerInitialState> = props => { | ||
| const state = useDatePickerState({ | ||
| gutter: 0, | ||
| unstable_offset: [-19, 10], | ||
| formatOptions: { month: "2-digit", day: "2-digit", year: "numeric" }, | ||
| ...props, | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <DatePickerWrapper | ||
| className="styled-datepicker bg-white w-max rounded-md shadow-sm relative inline-block border border-gray-300" | ||
| {...state} | ||
| > | ||
| <div className="flex gap-4 justify-between p-2 pr-4 pl-4 rounded-md"> | ||
| <DatePickerSegmentField | ||
| {...state} | ||
| className="flex justify-between gap-1" | ||
| > | ||
| {state.segments.map((segment, i) => ( | ||
| <DatePickerSegment | ||
| key={i} | ||
| segment={segment} | ||
| {...state} | ||
| className="focus:text-blue-500 focus:outline-none font-mono" | ||
| /> | ||
| ))} | ||
| </DatePickerSegmentField> | ||
|
|
||
| <DatePickerTrigger | ||
| className="text-gray-700 focus:outline-none focus:text-blue-500 relative inline-block" | ||
| {...state} | ||
| > | ||
| <CalendarIcon /> | ||
| </DatePickerTrigger> | ||
| </div> | ||
| </DatePickerWrapper> | ||
| <DatePickerContent {...state}> | ||
| <Calendar {...state.calendar} /> | ||
| </DatePickerContent> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.
8f5cbbaThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs: