change the way that month names are displayed

apps/schedulely-docs/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "dev-docs": "docusaurus start",
-    "build": "docusaurus build --no-minify",
+    "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",

packages/Schedulely/__tests__/dateAdapters/dateAdapter.spec.ts

@@ -116,7 +116,7 @@ describe('Date Adapter', () => {
     });
 
     describe('getDaysOfWeek', () => {
-      it.each<{ format: ComponentSize; expected: string[] }>(
+      it.each<{ format: 'long' | 'short' | 'narrow'; expected: string[] }>(
         getDaysOfWeekTestCases()
       )('with format "$format" returns $expected', ({ format, expected }) => {
         const result = adapter.getDaysOfWeek(format);
@@ -128,7 +128,7 @@ describe('Date Adapter', () => {
       it.each<{ date: Date; expected: string }>(
         getMonthNameFromDateTestCases()
       )('$date returns $expected', ({ date, expected }) => {
-        const result = adapter.getMonthName(date);
+        const result = adapter.getMonthName(date, 'long');
         expect(result).toBe(expected);
       });
     });

packages/Schedulely/__tests__/testHelpers/dateAdapter.testHelper.ts

@@ -204,7 +204,7 @@ export const getMonthNameFromDateTestCases = () => [
 
 export const getDaysOfWeekTestCases = () => [
   {
-    format: 'large' as ComponentSize,
+    format: 'long' as 'long' | 'short' | 'narrow',
     expected: [
       'Sunday',
       'Monday',
@@ -216,11 +216,11 @@ export const getDaysOfWeekTestCases = () => [
     ],
   },
   {
-    format: 'medium' as ComponentSize,
+    format: 'short' as 'long' | 'short' | 'narrow',
     expected: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
   },
   {
-    format: 'small' as ComponentSize,
+    format: 'narrow' as 'long' | 'short' | 'narrow',
     expected: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
   },
 ];

packages/Schedulely/src/components/defaultHeader/DefaultHeader.scss

@@ -24,21 +24,7 @@
     > .header-text {
       margin-top: auto;
       margin-bottom: auto;
-      font-size: 1.3em;
-
-      //small size
-      @container schedulely-container (width < 640px) {
-        font-size: 1.1em;
-      }
-
-      @container schedulely-container (width > 641px) and (width < 1024px) {
-        font-size: 1.3em;
-      }
-
-      //large size
-      @container schedulely-container (width > 1025px) {
-        font-size: 1.5em;
-      }
+      font-size: 1.5em;
     }
 
     > .current-month-indicator {

packages/Schedulely/src/dateAdapters/date.ts

@@ -7,16 +7,9 @@ import { DateTimeAdapter } from '@/types';
  * @returns DateTimeAdapter
  */
 export const createDefaultAdapter = (locale = 'en'): DateTimeAdapter => {
-  /** Map used to translate ComponentSize in to Intl day name format */
-  const map = new Map<ComponentSize, 'long' | 'narrow' | 'short'>([
-    ['large', 'long'],
-    ['medium', 'short'],
-    ['small', 'narrow'],
-  ]);
-
-  const getDaysOfWeek = (componentSize?: ComponentSize) => {
+  const getDaysOfWeek = (format?: 'long' | 'short' | 'narrow') => {
     const formatter = new Intl.DateTimeFormat(locale, {
-      weekday: map.get(componentSize || 'large'),
+      weekday: format,
     });
     return [0, 1, 2, 3, 4, 5, 6].map((x) =>
       formatter.format(new Date(2012, 0, x + 1))
@@ -80,9 +73,9 @@ export const createDefaultAdapter = (locale = 'en'): DateTimeAdapter => {
     );
   };
 
-  const getMonthName = (date: Date) => {
+  const getMonthName = (date: Date, format?: 'long' | 'short') => {
     const formatter = new Intl.DateTimeFormat(locale, {
-      month: 'long',
+      month: format,
     });
     return formatter.format(date);
   };

packages/Schedulely/src/providers/CalendarProvider.tsx

@@ -43,10 +43,11 @@ export const CalendarProvider = ({
     dateAdapter.convertIsoToDate(initialDate)
   );
 
-  const currentMonth = useMemo(
-    () => dateAdapter.getMonthName(currentDate),
-    [currentDate]
-  );
+  const currentMonth = useMemo(() => {
+    let format: 'long' | 'short' = 'long';
+    if (breakpoint === 'small') format = 'short';
+    return dateAdapter.getMonthName(currentDate, format);
+  }, [currentDate, breakpoint]);
 
   const currentYear = useMemo(
     () => dateAdapter.getYear(currentDate),
@@ -59,10 +60,12 @@ export const CalendarProvider = ({
   );
 
   // Does this need memo?
-  const daysOfWeek = useMemo(
-    () => dateAdapter.getDaysOfWeek(breakpoint),
-    [breakpoint]
-  );
+  const daysOfWeek = useMemo(() => {
+    let format: 'long' | 'short' | 'narrow' = 'long';
+    if (breakpoint === 'medium') format = 'short';
+    if (breakpoint === 'small') format = 'narrow';
+    return dateAdapter.getDaysOfWeek(format);
+  }, [breakpoint]);
 
   const calendarView = useMemo(
     () => dateAdapter.getCalendarView(currentDate),

packages/Schedulely/src/themes/default.scss

@@ -4,7 +4,6 @@
   margin: 0.5em;
   font-size: medium;
   line-height: normal;
-  container: schedulely-container / inline-size;
 
   /* Custom font must be made available via link tag, etc. */
   font-family: 'Roboto', sans-serif;

packages/Schedulely/src/types/DateAdapter.ts

@@ -10,11 +10,20 @@ export interface DateTimeAdapter {
   /** Returns all days in the month, split apart by week. Includes leading/trailing days. */
   getCalendarView: (date: Date) => Date[][];
 
-  /** Get full names of all days of the week */
-  getDaysOfWeek: (componentSize?: ComponentSize) => string[];
-
-  /** Get the full name of the month for a given date */
-  getMonthName: (date: Date) => string;
+  /**
+   * Get names of all days of the week in the format specified
+   * @param format The format of the name that will be returned
+   * @returns Array of strings that contain the names of the days of the week
+   */
+  getDaysOfWeek: (format?: 'long' | 'short' | 'narrow') => string[];
+
+  /**
+   * Get the full name of the month for a given date
+   * @param date The date to get the name of the month for
+   * @param format The format of the name that will be returned
+   * @returns Name of the month in the specified format
+   */
+  getMonthName: (date: Date, format: 'long' | 'short') => string;
 
   /** Get the year component for a given date */
   getYear: (date: Date) => number;