-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'release' into feat/35290-update-response-tab-ui
- Loading branch information
Showing
109 changed files
with
2,155 additions
and
907 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
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
File renamed without changes.
39 changes: 39 additions & 0 deletions
39
app/client/packages/design-system/widgets/src/components/Calendar/src/Calendar.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,39 @@ | ||
| import React from "react"; | ||
| import type { | ||
| DateValue, | ||
| CalendarProps as HeadlessCalendarProps, | ||
| } from "react-aria-components"; | ||
| import { | ||
| CalendarGrid as HeadlessCalendarGrid, | ||
| CalendarGridBody as HeadlessCalendarGridBody, | ||
| CalendarGridHeader as HeadlessCalendarGridHeader, | ||
| Calendar as HeadlessCalendar, | ||
| } from "react-aria-components"; | ||
| import { Flex, IconButton } from "@appsmith/wds"; | ||
|
|
||
| import styles from "./styles.module.css"; | ||
| import { CalendarCell } from "./CalendarCell"; | ||
| import { CalendarHeading } from "./CalendarHeading"; | ||
| import { CalendarHeaderCell } from "./CalendarHeaderCell"; | ||
|
|
||
| type CalendarProps<T extends DateValue> = HeadlessCalendarProps<T>; | ||
|
|
||
| export const Calendar = <T extends DateValue>(props: CalendarProps<T>) => { | ||
| return ( | ||
| <HeadlessCalendar {...props} className={styles.calendar}> | ||
| <Flex alignItems="center" justifyContent="space-between" width="100%"> | ||
| <IconButton icon="chevron-left" slot="previous" variant="ghost" /> | ||
| <CalendarHeading size="subtitle" /> | ||
| <IconButton icon="chevron-right" slot="next" variant="ghost" /> | ||
| </Flex> | ||
| <HeadlessCalendarGrid> | ||
| <HeadlessCalendarGridHeader> | ||
| {(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>} | ||
| </HeadlessCalendarGridHeader> | ||
| <HeadlessCalendarGridBody> | ||
| {(date) => <CalendarCell date={date} />} | ||
| </HeadlessCalendarGridBody> | ||
| </HeadlessCalendarGrid> | ||
| </HeadlessCalendar> | ||
| ); | ||
| }; |
23 changes: 23 additions & 0 deletions
23
app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarCell.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,23 @@ | ||
| import React from "react"; | ||
| import { Text } from "@appsmith/wds"; | ||
| import { | ||
| CalendarCell as HeadlessCalendarCell, | ||
| type CalendarCellProps as HeadlessCalendarCellProps, | ||
| } from "react-aria-components"; | ||
|
|
||
| import styles from "./styles.module.css"; | ||
|
|
||
| export type CalendarCellProps = HeadlessCalendarCellProps & | ||
| React.RefAttributes<HTMLTableCellElement>; | ||
|
|
||
| function CalendarCell(props: CalendarCellProps) { | ||
| const { date } = props; | ||
|
|
||
| return ( | ||
| <HeadlessCalendarCell {...props} className={styles["calendar-cell"]}> | ||
| <Text>{date.day}</Text> | ||
| </HeadlessCalendarCell> | ||
| ); | ||
| } | ||
|
|
||
| export { CalendarCell }; |
22 changes: 22 additions & 0 deletions
22
app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarHeaderCell.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,22 @@ | ||
| import React from "react"; | ||
| import { Text } from "@appsmith/wds"; | ||
| import { CalendarHeaderCell as HeadlessCalendarHeaderCell } from "react-aria-components"; | ||
|
|
||
| import { type CalendarHeaderCellProps as HeadlessCalendarHeaderCellProps } from "react-aria-components"; | ||
|
|
||
| export type CalendarHeaderCellProps = HeadlessCalendarHeaderCellProps & | ||
| React.RefAttributes<HTMLTableCellElement>; | ||
|
|
||
| function CalendarHeaderCell(props: CalendarHeaderCellProps) { | ||
| const { children } = props; | ||
|
|
||
| return ( | ||
| <HeadlessCalendarHeaderCell {...props}> | ||
| <Text color="neutral" fontWeight={700} textAlign="center"> | ||
| {children} | ||
| </Text> | ||
| </HeadlessCalendarHeaderCell> | ||
| ); | ||
| } | ||
|
|
||
| export { CalendarHeaderCell }; |
21 changes: 21 additions & 0 deletions
21
app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarHeading.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,21 @@ | ||
| import { Text, type TextProps } from "@appsmith/wds"; | ||
| import React, { forwardRef, type ForwardedRef } from "react"; | ||
| import { HeadingContext, useContextProps } from "react-aria-components"; | ||
|
|
||
| function CalendarHeading( | ||
| props: TextProps, | ||
| ref: ForwardedRef<HTMLHeadingElement>, | ||
| ) { | ||
| [props, ref] = useContextProps(props, ref, HeadingContext); | ||
| const { children, ...domProps } = props; | ||
|
|
||
| return ( | ||
| <Text {...domProps} color="neutral" ref={ref}> | ||
| {children} | ||
| </Text> | ||
| ); | ||
| } | ||
|
|
||
| const _CalendarHeading = forwardRef(CalendarHeading); | ||
|
|
||
| export { _CalendarHeading as CalendarHeading }; |
4 changes: 4 additions & 0 deletions
4
app/client/packages/design-system/widgets/src/components/Calendar/src/index.ts
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,4 @@ | ||
| export { Calendar } from "./Calendar"; | ||
| export { CalendarCell } from "./CalendarCell"; | ||
| export { CalendarHeading } from "./CalendarHeading"; | ||
| export { CalendarHeaderCell } from "./CalendarHeaderCell"; |
66 changes: 66 additions & 0 deletions
66
app/client/packages/design-system/widgets/src/components/Calendar/src/styles.module.css
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,66 @@ | ||
| .calendar { | ||
| padding: var(--outer-spacing-3); | ||
| } | ||
|
|
||
| .calendar table { | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .calendar thead tr { | ||
| display: flex; | ||
| justify-content: space-around; | ||
| padding-block-start: var(--inner-spacing-1); | ||
| } | ||
|
|
||
| .calendar tbody tr { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .calendar thead th { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| inline-size: var(--sizing-9); | ||
| block-size: var(--sizing-9); | ||
| } | ||
|
|
||
| .calendar tbody td { | ||
| padding: var(--inner-spacing-1); | ||
| } | ||
|
|
||
| .calendar tbody [role="button"] { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| inline-size: var(--sizing-9); | ||
| block-size: var(--sizing-9); | ||
| border-radius: var(--border-radius-elevation-3); | ||
| border: var(--border-width-2) solid transparent; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .calendar tbody [role="button"][data-disabled] { | ||
| opacity: var(--opacity-disabled); | ||
| } | ||
|
|
||
| .calendar tbody [role="button"][data-hovered] { | ||
| background-color: var(--color-bg-accent-subtle-hover); | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .calendar tbody [role="button"][data-pressed] { | ||
| background-color: var(--color-bg-accent-subtle-active); | ||
| } | ||
|
|
||
| .calendar tbody [role="button"][data-selected] { | ||
| background-color: var(--color-bg-accent); | ||
| color: var(--color-fg-on-accent); | ||
| } | ||
|
|
||
| .calendar tbody [role="button"][data-focus-visible] { | ||
| outline: var(--border-width-2) solid var(--color-bd-accent); | ||
| outline-offset: var(--border-width-2); | ||
| } |
52 changes: 52 additions & 0 deletions
52
...lient/packages/design-system/widgets/src/components/Calendar/stories/Calendar.stories.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,52 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { Calendar } from "../src"; | ||
| import { today, getLocalTimeZone } from "@internationalized/date"; | ||
|
|
||
| const meta: Meta<typeof Calendar> = { | ||
| component: Calendar, | ||
| title: "WDS/Widgets/Calendar", | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| component: "A calendar component for date selection and display.", | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof Calendar>; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| defaultValue: today(getLocalTimeZone()), | ||
| }, | ||
| }; | ||
|
|
||
| export const WithMinDate: Story = { | ||
| args: { | ||
| defaultValue: today(getLocalTimeZone()), | ||
| minValue: today(getLocalTimeZone()), | ||
| }, | ||
| }; | ||
|
|
||
| export const WithMaxDate: Story = { | ||
| args: { | ||
| defaultValue: today(getLocalTimeZone()), | ||
| maxValue: today(getLocalTimeZone()).add({ days: 10 }), | ||
| }, | ||
| }; | ||
|
|
||
| export const Disabled: Story = { | ||
| args: { | ||
| defaultValue: today(getLocalTimeZone()), | ||
| isDisabled: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const ReadOnly: Story = { | ||
| args: { | ||
| defaultValue: today(getLocalTimeZone()), | ||
| isReadOnly: true, | ||
| }, | ||
| }; |
1 change: 1 addition & 0 deletions
1
app/client/packages/design-system/widgets/src/components/Datepicker/index.ts
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 @@ | ||
| export * from "./src"; |
Oops, something went wrong.