fix: update all Storybook packages to v8.45.0 (#796)

* fix: prevent ChakraUI library from being linked in storybook seems to have CORS errors, also is wrong version. * fix: update all storybook packages to 8.45.0 * feat: update styling and prevent chakraui library storybook linkage * fix: correctly set dependabot to ignore storybook updates * fix: broken stories due to v8.45.0 upgrade * fix: update tsconfig target and lib to es2019
opengovsg · Nov 25, 2024 · e693ca2 · e693ca2
1 parent aed4950
commit e693ca2
Show file tree

Hide file tree

Showing 10 changed files with 2,992 additions and 10,290 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -16,7 +16,7 @@ updates:
       prefix-development: "chore"
       include: "scope"
   - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/react" # Location of package manifests
+    directory: "/packages/camp" # Location of package manifests
     schedule:
       interval: "weekly"
       time: "01:00"

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/camp/.storybook/main.ts b/packages/camp/.storybook/main.ts
@@ -33,6 +33,12 @@ export default {
       },
     })
   },
+  refs: {
+    // Prevent Chakra-UI's design systems from being linked
+    '@chakra-ui/react': {
+      disable: true,
+    },
+  },
   docs: {
     autodocs: 'tag',
   },

diff --git a/packages/camp/.storybook/manager-head.html b/packages/camp/.storybook/manager-head.html
@@ -60,13 +60,12 @@
     color: #445072;
   }
 
-  .search-field > input {
+  .search-field {
     border-radius: 4px;
-    border: 1px solid #c9cccf;
     background: white;
   }
 
-  .search-field > input:focus {
-    background: white;
+  .search-field:has(input:focus) {
+    background: white !important;
   }
 </style>
diff --git a/packages/camp/package.json b/packages/camp/package.json
@@ -67,16 +67,16 @@
     "@chakra-ui/react": "2.8.2",
     "@storybook/addon-a11y": "8.4.5",
     "@storybook/addon-essentials": "8.4.5",
-    "@storybook/addon-interactions": "8.0.0",
-    "@storybook/addon-links": "8.0.0",
+    "@storybook/addon-interactions": "8.4.5",
+    "@storybook/addon-links": "8.4.5",
     "@storybook/addon-mdx-gfm": "8.4.5",
     "@storybook/addon-themes": "8.4.5",
-    "@storybook/manager-api": "8.0.0",
+    "@storybook/manager-api": "8.4.5",
     "@storybook/preview-api": "8.4.5",
-    "@storybook/react": "8.0.0",
+    "@storybook/react": "8.4.5",
     "@storybook/react-vite": "8.4.5",
-    "@storybook/test": "8.0.0",
-    "@storybook/theming": "8.0.0",
+    "@storybook/test": "8.4.5",
+    "@storybook/theming": "8.4.5",
     "@types/country-flag-icons": "^1.2.0",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
@@ -101,7 +101,7 @@
     "react-dom": "^18.2.0",
     "rimraf": "^6.0.1",
     "rollup-plugin-copy": "^3.4.0",
-    "storybook": "8.0.0",
+    "storybook": "8.4.5",
     "tsc-alias": "^1.8.2",
     "typescript": "^5.0.4",
     "vite": "^5.4.11",

diff --git a/packages/camp/src/Calendar/Calendar.stories.tsx b/packages/camp/src/Calendar/Calendar.stories.tsx
@@ -1,24 +1,13 @@
 import { useControllableState } from '@chakra-ui/react'
-import { Meta, StoryFn } from '@storybook/react'
-import { userEvent, within } from '@storybook/test'
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import { userEvent } from '@storybook/test'
 import { isWeekend } from 'date-fns'
 
 import { mockDateDecorator } from '~/utils/storybook'
 
 import { Calendar, CalendarProps } from './Calendar'
 
-export default {
-  title: 'Components/Calendar',
-  component: Calendar,
-  tags: ['autodocs'],
-  decorators: [mockDateDecorator],
-  parameters: {
-    layout: 'fullscreen',
-    mockdate: new Date('2021-12-25T06:22:27.219Z'),
-  },
-} as Meta<CalendarProps>
-
-const CalendarOnlyTemplate: StoryFn<CalendarProps> = ({
+const StatefulCalendar: StoryFn<CalendarProps> = ({
   value,
   onChange,
   ...args
@@ -33,64 +22,86 @@ const CalendarOnlyTemplate: StoryFn<CalendarProps> = ({
   )
 }
 
-export const Default = CalendarOnlyTemplate.bind({})
+export default {
+  title: 'Components/Calendar',
+  component: Calendar,
+  tags: ['autodocs'],
+  decorators: [mockDateDecorator],
+  parameters: {
+    layout: 'fullscreen',
+    mockdate: new Date('2021-12-25T06:22:27.219Z'),
+  },
+  render: (args) => {
+    return <StatefulCalendar {...args} />
+  },
+} as Meta<CalendarProps>
+
+type Story = StoryObj<CalendarProps>
 
-export const CalendarWithValue = CalendarOnlyTemplate.bind({})
-CalendarWithValue.args = {
-  value: new Date('2001-01-01'),
-}
+export const Default: Story = {}
 
-export const SelectTodayWhenTodayButtonClicked = CalendarOnlyTemplate.bind({})
-SelectTodayWhenTodayButtonClicked.args = {
-  shouldSetDateOnTodayButtonClick: true,
+export const CalendarWithValue: Story = {
+  args: {
+    value: new Date('2001-01-01'),
+  },
 }
-SelectTodayWhenTodayButtonClicked.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement)
-  const todayButton = canvas.getByText('Today')
-  userEvent.click(todayButton)
+
+export const SelectTodayWhenTodayButtonClicked: Story = {
+  args: {
+    shouldSetDateOnTodayButtonClick: true,
+  },
+  play: async ({ canvas }) => {
+    const todayButton = canvas.getByText('Today')
+    userEvent.click(todayButton)
+  },
 }
 
-export const HideOutsideDays = CalendarOnlyTemplate.bind({})
-HideOutsideDays.args = {
-  showOutsideDays: false,
+export const HideOutsideDays: Story = {
+  args: {
+    showOutsideDays: false,
+  },
 }
 
-export const HideTodayButton = CalendarOnlyTemplate.bind({})
-HideTodayButton.args = {
-  showTodayButton: false,
+export const HideTodayButton: Story = {
+  args: {
+    showTodayButton: false,
+  },
 }
 
-export const CalendarWeekdayOnly = CalendarOnlyTemplate.bind({})
-CalendarWeekdayOnly.args = {
-  isDateUnavailable: (d) => isWeekend(d),
+export const CalendarWeekdayOnly: Story = {
+  args: {
+    isDateUnavailable: (d) => isWeekend(d),
+  },
 }
 
-export const SizeSmall = CalendarOnlyTemplate.bind({})
-SizeSmall.args = {
-  size: 'sm',
+export const SizeSmall: Story = {
+  args: {
+    size: 'sm',
+  },
 }
 
-export const CalendarWithDefaultFocusedDate = CalendarOnlyTemplate.bind({})
-CalendarWithDefaultFocusedDate.args = {
-  defaultFocusedDate: new Date('2010-01-01'),
+export const CalendarWithDefaultFocusedDate: Story = {
+  args: {
+    defaultFocusedDate: new Date('2010-01-01'),
+  },
 }
 
-export const CalendarWithDefaultFocusedDateOverriddenByDefaultValue =
-  CalendarOnlyTemplate.bind({})
-CalendarWithDefaultFocusedDateOverriddenByDefaultValue.args = {
-  defaultFocusedDate: new Date('2010-05-01'),
-  defaultValue: new Date('2001-01-01'),
+export const CalendarWithDefaultFocusedDateOverriddenByDefaultValue: Story = {
+  args: {
+    defaultFocusedDate: new Date('2010-05-01'),
+    defaultValue: new Date('2001-01-01'),
+  },
 }
 
-export const CalendarWithOnMonthYearChangeCallback = CalendarOnlyTemplate.bind(
-  {},
-)
-CalendarWithOnMonthYearChangeCallback.args = {
-  onMonthChange: (month) => alert(`month changed to: ${month}`),
-  onYearChange: (year) => alert(`year changed to: ${year}`),
+export const CalendarWithOnMonthYearChangeCallback: Story = {
+  args: {
+    onMonthChange: (month) => alert(`month changed to: ${month}`),
+    onYearChange: (year) => alert(`year changed to: ${year}`),
+  },
 }
 
-export const Loading = CalendarOnlyTemplate.bind({})
-Loading.args = {
-  isLoading: true,
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
 }
diff --git a/packages/camp/src/Calendar/RangeCalendar.stories.tsx b/packages/camp/src/Calendar/RangeCalendar.stories.tsx
@@ -1,24 +1,13 @@
 import { useControllableState } from '@chakra-ui/react'
-import { Meta, StoryFn } from '@storybook/react'
-import { userEvent, within } from '@storybook/test'
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import { userEvent } from '@storybook/test'
 import { isWeekend } from 'date-fns'
 
 import { mockDateDecorator } from '~/utils/storybook'
 
 import { RangeCalendar, RangeCalendarProps } from './RangeCalendar'
 
-export default {
-  title: 'Components/RangeCalendar',
-  component: RangeCalendar,
-  tags: ['autodocs'],
-  decorators: [mockDateDecorator],
-  parameters: {
-    layout: 'fullscreen',
-    mockdate: new Date('2021-12-25T06:22:27.219Z'),
-  },
-} as Meta<RangeCalendarProps>
-
-const RangeCalendarOnlyTemplate: StoryFn<RangeCalendarProps> = ({
+const StatefulRangeCalendar: StoryFn<RangeCalendarProps> = ({
   value,
   onChange,
   ...args
@@ -37,66 +26,85 @@ const RangeCalendarOnlyTemplate: StoryFn<RangeCalendarProps> = ({
   )
 }
 
-export const Default = RangeCalendarOnlyTemplate.bind({})
+export default {
+  title: 'Components/RangeCalendar',
+  component: RangeCalendar,
+  tags: ['autodocs'],
+  decorators: [mockDateDecorator],
+  parameters: {
+    layout: 'fullscreen',
+    mockdate: new Date('2021-12-25T06:22:27.219Z'),
+  },
+  render: (args) => <StatefulRangeCalendar {...args} />,
+} as Meta<RangeCalendarProps>
+
+type Story = StoryObj<RangeCalendarProps>
 
-export const RangeCalendarWithValue = RangeCalendarOnlyTemplate.bind({})
-RangeCalendarWithValue.args = {
-  value: [new Date('2001-01-01'), null],
-}
+export const Default: Story = {}
 
-export const SelectTodayWhenTodayButtonClicked = RangeCalendarOnlyTemplate.bind(
-  {},
-)
-SelectTodayWhenTodayButtonClicked.args = {
-  shouldSetDateOnTodayButtonClick: true,
-}
-SelectTodayWhenTodayButtonClicked.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement)
-  const todayButton = canvas.getByText('Today')
-  userEvent.click(todayButton)
+export const RangeCalendarWithValue: Story = {
+  args: {
+    value: [new Date('2001-01-01'), null],
+  },
 }
 
-export const RangeCalendarWithRange = RangeCalendarOnlyTemplate.bind({})
-RangeCalendarWithRange.args = {
-  value: [new Date('2001-01-01'), new Date('2001-02-02')],
+export const SelectTodayWhenTodayButtonClicked: Story = {
+  args: {
+    shouldSetDateOnTodayButtonClick: true,
+  },
+  play: async ({ canvas }) => {
+    const todayButton = canvas.getByText('Today')
+    userEvent.click(todayButton)
+  },
 }
 
-export const RangeCalendarWeekdayOnly = RangeCalendarOnlyTemplate.bind({})
-RangeCalendarWeekdayOnly.args = {
-  isDateUnavailable: (d) => isWeekend(d),
+export const RangeCalendarWithRange: Story = {
+  args: {
+    value: [new Date('2001-01-01'), new Date('2001-02-02')],
+  },
 }
 
-export const HideTodayButton = RangeCalendarOnlyTemplate.bind({})
-HideTodayButton.args = {
-  showTodayButton: false,
+export const RangeCalendarWeekdayOnly: Story = {
+  args: {
+    isDateUnavailable: (d) => isWeekend(d),
+  },
 }
 
-export const SizeSmall = RangeCalendarOnlyTemplate.bind({})
-SizeSmall.args = {
-  size: 'sm',
+export const HideTodayButton: Story = {
+  args: {
+    showTodayButton: false,
+  },
 }
 
-export const RangeCalendarWithDefaultFocusedDate =
-  RangeCalendarOnlyTemplate.bind({})
-RangeCalendarWithDefaultFocusedDate.args = {
-  defaultFocusedDate: new Date('2010-01-01'),
+export const SizeSmall: Story = {
+  args: {
+    size: 'sm',
+  },
 }
 
-export const RangeCalendarWithDefaultFocusedDateOverriddenByDefaultValue =
-  RangeCalendarOnlyTemplate.bind({})
-RangeCalendarWithDefaultFocusedDateOverriddenByDefaultValue.args = {
-  defaultFocusedDate: new Date('2010-01-01'),
-  defaultValue: [new Date('2001-01-01'), null],
+export const RangeCalendarWithDefaultFocusedDate: Story = {
+  args: {
+    defaultFocusedDate: new Date('2010-01-01'),
+  },
 }
 
-export const RangeCalendarWithOnMonthYearChangeCallback =
-  RangeCalendarOnlyTemplate.bind({})
-RangeCalendarWithOnMonthYearChangeCallback.args = {
-  onMonthChange: (month) => alert(`month changed to: ${month}`),
-  onYearChange: (year) => alert(`year changed to: ${year}`),
+export const RangeCalendarWithDefaultFocusedDateOverriddenByDefaultValue: Story =
+  {
+    args: {
+      defaultFocusedDate: new Date('2010-01-01'),
+      defaultValue: [new Date('2001-01-01'), null],
+    },
+  }
+
+export const RangeCalendarWithOnMonthYearChangeCallback: Story = {
+  args: {
+    onMonthChange: (month) => alert(`month changed to: ${month}`),
+    onYearChange: (year) => alert(`year changed to: ${year}`),
+  },
 }
 
-export const Loading = RangeCalendarOnlyTemplate.bind({})
-Loading.args = {
-  isLoading: true,
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
 }