diff --git a/apps/storybook/stories/Review5303Noon.stories.tsx b/apps/storybook/stories/Review5303Noon.stories.tsx new file mode 100644 index 00000000000..5fb38c9f655 --- /dev/null +++ b/apps/storybook/stories/Review5303Noon.stories.tsx @@ -0,0 +1,103 @@ +// Copyright (c) Meta Platforms, Inc. and affiliates. + +/** + * @file DateLocaleConsistency.stories.tsx + * @input InternationalizationProvider locale plus a fixed Gregorian date + * @output Side-by-side French and Thai date-formatting evidence + * @position Storybook verification story for shared date semantics + */ + +import {useState} from 'react'; +import type {Meta, StoryObj} from '@storybook/react'; +import * as stylex from '@stylexjs/stylex'; +import {Calendar, type ISODateString} from '@astryxdesign/core/Calendar'; +import {DateInput} from '@astryxdesign/core/DateInput'; +import { + InternationalizationProvider, + type Locale, +} from '@astryxdesign/core/i18n'; +import {Heading, Text} from '@astryxdesign/core/Text'; +import {Timestamp} from '@astryxdesign/core/Timestamp'; +import {spacingVars} from '@astryxdesign/core/theme/tokens.stylex'; +import {plainDateFormat} from '@astryxdesign/core/utils'; + +const meta = { + title: 'Review/PR 5303 noon', + parameters: { + layout: 'padded', + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +const DATE = '2026-08-22' as ISODateString; + +function LocaleDateExamples({locale}: {locale: Locale}) { + const [value, setValue] = useState(DATE); + + return ( + +
+ {locale} + + + Timestamp:{' '} + + + + Explicit Buddhist helper:{' '} + {plainDateFormat( + {year: 2026, month: 8, day: 22}, + {year: 'numeric', calendar: 'buddhist'}, + 'en-US', + )} + + +
+
+ ); +} + +export const FrenchAndThaiGregorian: Story = { + render: () => ( +
+ + +
+ ), + parameters: { + docs: { + description: { + story: + 'Calendar, DateInput, and Timestamp all follow the provider locale while preserving Gregorian year 2026. Thai must not render Buddhist year 2569.', + }, + }, + }, +}; + +const styles = stylex.create({ + comparison: { + display: 'grid', + gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', + gap: spacingVars['--spacing-8'], + }, + panel: { + display: 'flex', + flexDirection: 'column', + gap: spacingVars['--spacing-4'], + minWidth: 0, + }, +});