@codecademy/styleguide 79.2.1-alpha.9135d1.0 → 79.2.1-alpha.aaebbc.0

package/.storybook/components/Elements/ImageGallery.tsx

@@ -3,7 +3,7 @@ import { GamutIconProps } from '@codecademy/gamut-icons';
 import { IllustrationProps } from '@codecademy/gamut-illustrations';
 import { PatternProps } from '@codecademy/gamut-patterns';
 import { css, timingValues } from '@codecademy/gamut-styles';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence } from 'motion/react';
 import * as React from 'react';
 import { useState } from 'react';
 import styled from '@emotion/styled';

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [79.2.1-alpha.9135d1.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.0...@codecademy/styleguide@79.2.1-alpha.9135d1.0) (2026-03-12)
+### [79.2.1-alpha.aaebbc.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.0...@codecademy/styleguide@79.2.1-alpha.aaebbc.0) (2026-03-16)
 
 **Note:** Version bump only for package @codecademy/styleguide
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.2.1-alpha.9135d1.0",
+  "version": "79.2.1-alpha.aaebbc.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "e523ddaf3dad8a0af4e022007aaca3a2fd5930e4"
+  "gitHead": "6aa67ee39900bd188a2877c1d393605ee8995e83"
 }

package/src/lib/Atoms/Animations/ExpandInCollapseOut/ExpandInCollapseOut.stories.tsx

@@ -5,7 +5,7 @@ import {
   FlexBox,
 } from '@codecademy/gamut';
 import type { Meta } from '@storybook/react';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import { PropsWithChildren, useState } from 'react';
 
 const meta: Meta<typeof ExpandInCollapseOut> = {

package/src/lib/Atoms/Animations/FadeInSlideOut/FadeInSlideOut.stories.tsx

@@ -1,6 +1,6 @@
 import { Box, FadeInSlideOut, FillButton, FlexBox } from '@codecademy/gamut';
 import type { Meta } from '@storybook/react';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 import { useState } from 'react';
 
 const meta: Meta<typeof FadeInSlideOut> = {

package/src/lib/Meta/ESLint rules.mdx

@@ -79,7 +79,7 @@ const ExpandableContainer = styled.Box(
 
 #### Disabling the rule
 
-For third-party components or edge cases where inline styles are necessary (e.g., framer-motion animations), you can disable the rule:
+For third-party components or edge cases where inline styles are necessary (e.g., motion animations), you can disable the rule:
 
 ```tsx
 // eslint-disable-next-line gamut/no-inline-style

package/src/lib/Meta/Installation.mdx

@@ -39,21 +39,44 @@ yarn add @codecademy/gamut-kit @emotion/react @emotion/styled
 
 3. Wrap your application root with `GamutProvider` and give it the theme you would like to use for your app.
 
+**React 19:**
+
 ```tsx
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { GamutProvider, theme } from '@codecademy/gamut-styles';
 
 import { App } from './App';
 
 const rootElement = document.getElementById('root');
+if (rootElement) {
+  const root = createRoot(rootElement);
+  root.render(
+    <GamutProvider>
+      <App />
+    </GamutProvider>
+  );
+}
+```
 
-render(
-  <GamutProvider>
-    <App />
-  </GamutProvider>,
-  rootElement
-);
+**React 18:**
+
+```tsx
+import React from 'react';
+import { render } from 'react-dom';
+import { GamutProvider, theme } from '@codecademy/gamut-styles';
+
+import { App } from './App';
+
+const rootElement = document.getElementById('root');
+if (rootElement) {
+  render(
+    <GamutProvider>
+      <App />
+    </GamutProvider>,
+    rootElement
+  );
+}
 ```
 
 GamutProvider handles a few critical tasks that need to happen in order for components to work.

package/src/lib/Molecules/DatePicker/Calendar.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
-
-import { ComponentHeader } from '~styleguide/blocks';
-
-import * as CalendarStories from './Calendar.stories';
-
-export const parameters = {
-  title: 'DatePicker/Calendar',
-  subtitle: `Calendar grid with header (month/year + prev/next), body (day grid), and footer (Clear, Today, quick actions). Used inside DatePickerCalendar.`,
-  status: 'current',
-  source: {
-    repo: 'gamut',
-    githubLink:
-      'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/DatePicker/Calendar',
-  },
-};
-
-<Meta of={CalendarStories} />
-
-<ComponentHeader {...parameters} />
-
-## Playground
-
-<Canvas sourceState="shown" of={CalendarStories.Default} />
-
-<Controls />

package/src/lib/Molecules/DatePicker/Calendar.stories.tsx

@@ -1,53 +0,0 @@
-import {
-  Calendar,
-  CalendarBody,
-  CalendarFooter,
-  CalendarHeader,
-} from '@codecademy/gamut';
-import type { Meta, StoryObj } from '@storybook/react';
-import { useId, useState } from 'react';
-
-const meta: Meta<typeof Calendar> = {
-  component: Calendar,
-  title: 'Molecules/DatePicker/Calendar',
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Calendar>;
-
-export const Default: Story = {
-  render: function CalendarStory() {
-    const headingId = useId();
-    const [visibleDate, setVisibleDate] = useState(() => new Date());
-    const [selectedDate, setSelectedDate] = useState<Date | null>(null);
-    const [focusedDate, setFocusedDate] = useState<Date | null>(
-      () => new Date()
-    );
-
-    return (
-      <Calendar>
-        <CalendarHeader
-          currentMonthYear={visibleDate}
-          headingId={headingId}
-          locale="en-US"
-          onCurrentMonthYearChange={setVisibleDate}
-        />
-        <CalendarBody
-          focusedDate={focusedDate}
-          labelledById={headingId}
-          locale="en-US"
-          selectedDate={selectedDate}
-          visibleDate={visibleDate}
-          onDateSelect={setSelectedDate}
-          onFocusedDateChange={setFocusedDate}
-          onVisibleDateChange={setVisibleDate}
-        />
-        <CalendarFooter
-          onCurrentMonthYearChange={setVisibleDate}
-          onSelectedDateChange={setSelectedDate}
-        />
-      </Calendar>
-    );
-  },
-};

package/src/lib/Molecules/DatePicker/DatePicker.stories.tsx

@@ -1,124 +0,0 @@
-import {
-  Box,
-  DatePicker,
-  DatePickerCalendar,
-  DatePickerInput,
-  PopoverContainer,
-  useDatePicker,
-} from '@codecademy/gamut';
-import type { Meta, StoryObj } from '@storybook/react';
-import { useRef, useState } from 'react';
-
-const meta: Meta<typeof DatePicker> = {
-  component: DatePicker,
-  title: 'Molecules/DatePicker/DatePicker',
-};
-
-export default meta;
-
-type Story = StoryObj<typeof DatePicker>;
-
-export const Default: Story = {
-  render: function DatePickerStory() {
-    const [selectedDate, setSelectedDate] = useState<Date | null>(null);
-    return (
-      <Box p={32}>
-        <DatePicker
-          label="Date"
-          locale="de-DE"
-          placeholder="MM/DD/YYYY"
-          selectedDate={selectedDate}
-          setSelectedDate={setSelectedDate}
-        />
-      </Box>
-    );
-  },
-};
-
-export const WithInitialDate: Story = {
-  render: function DatePickerStory() {
-    const [selectedDate, setSelectedDate] = useState<Date | null>(
-      () => new Date(2026, 1, 15)
-    );
-    return (
-      <DatePicker
-        label="Date"
-        placeholder="MM/DD/YYYY"
-        selectedDate={selectedDate}
-        setSelectedDate={setSelectedDate}
-      />
-    );
-  },
-};
-
-/** Range mode: two inputs for start and end date. First calendar click sets start, second sets end. */
-export const Range: Story = {
-  render: function DatePickerStory() {
-    const [startDate, setStartDate] = useState<Date | null>(null);
-    const [endDate, setEndDate] = useState<Date | null>(null);
-    return (
-      <Box p={32}>
-        <DatePicker
-          endDate={endDate}
-          endLabel="End date"
-          mode="range"
-          setEndDate={setEndDate}
-          setStartDate={setStartDate}
-          startDate={startDate}
-          startLabel="Start date"
-        />
-      </Box>
-    );
-  },
-};
-
-/**
- * Composed usage: DatePicker with children provides shared state via context.
- * The child uses useDatePicker() to get open/close and inputRef, then composes
- * DatePickerInput and DatePickerCalendar with a custom PopoverContainer layout.
- */
-export const ComposedWithContext: Story = {
-  render: function DatePickerStory() {
-    const [selectedDate, setSelectedDate] = useState<Date | null>(null);
-    return (
-      <Box p={32}>
-        <DatePicker
-          label="Start date"
-          placeholder="MM/DD/YYYY"
-          selectedDate={selectedDate}
-          setSelectedDate={setSelectedDate}
-        >
-          <ComposedDatePickerLayout />
-        </DatePicker>
-      </Box>
-    );
-  },
-};
-
-function ComposedDatePickerLayout() {
-  const { isCalendarOpen, openCalendar, closeCalendar, calendarDialogId } =
-    useDatePicker();
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  return (
-    <>
-      <Box width="fit-content" onClick={openCalendar}>
-        <DatePickerInput ref={inputRef} />
-      </Box>
-      <PopoverContainer
-        alignment="bottom-left"
-        allowPageInteraction
-        focusOnProps={{ autoFocus: false, focusLock: false }}
-        invertAxis="x"
-        isOpen={isCalendarOpen}
-        offset={10}
-        targetRef={inputRef}
-        onRequestClose={closeCalendar}
-      >
-        <div aria-label="Choose date" id={calendarDialogId} role="dialog">
-          <DatePickerCalendar dialogId={calendarDialogId} />
-        </div>
-      </PopoverContainer>
-    </>
-  );
-}