Redesign calendar frontend

.github/workflows/lint-frontend.yml

@@ -0,0 +1,30 @@
+name: Static Analysis (Linting)
+
+# This workflow is triggered on pushes to trunk, and any PRs.
+on:
+  push:
+    branches: [master]
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  check:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Install NodeJS
+      uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+        cache: 'npm'
+
+    - name: npm install and build
+      run: |
+        npm ci
+        npm run build
+
+    - name: Lint Styles
+      run: |
+        npm run lint:css

package.json

@@ -32,6 +32,7 @@
   "homepage": "https://github.com/Automattic/meeting-calendar#readme",
   "devDependencies": {
     "@wordpress/env": "9.7.0",
-    "@wordpress/scripts": "27.9.0"
+    "@wordpress/scripts": "27.9.0",
+    "@wordpress/stylelint-config": "21.34.0"
   }
 }

plugin.php

@@ -92,7 +92,7 @@ function register_assets() {
 
 		wp_register_style(
 			'wporg-calendar-style',
-			plugin_dir_url( __FILE__ ) . 'build/calendar.css',
+			plugin_dir_url( __FILE__ ) . 'build/style-calendar.css',
 			array( 'wp-components' ),
 			$frontend_info['version']
 		);

src/frontend/calendar/cell.js

@@ -10,119 +10,115 @@ import { format } from '@wordpress/date';
  */
 import { getTeamClass, isToday, isCancelled } from './utils';
 
-function CalendarCell( {
+function CalendarCell({
 	blank = false,
 	year,
 	month,
 	day,
 	events,
 	onEventClick,
-} ) {
+}) {
 	const MAX_EVENTS = 7;
-	if ( blank ) {
+	if (blank) {
 		return <td className="wporg-meeting-calendar__cell" aria-hidden />;
 	}
 
-	const date = new Date( year, month, day );
-	const key = format( 'Y-m-d', date );
-	const dayEvents = events[ key ] || [];
-	const restOfEvents = dayEvents.slice( MAX_EVENTS );
+	const date = new Date(year, month, day);
+	const key = format('Y-m-d', date);
+	const dayEvents = events[key] || [];
+	const restOfEvents = dayEvents.slice(MAX_EVENTS);
 
 	return (
 		<td
-			className={ `wporg-meeting-calendar__cell ${
-				isToday( date ) ? 'is-today' : ''
-			}` }
+			className={`wporg-meeting-calendar__cell ${
+				isToday(date) ? 'is-today' : ''
+			}`}
 		>
 			<strong>
 				<span className="screen-reader-text">
-					{ format( 'F j', date ) }{ ' ' }
-					{ // translators: %d: Count of all events, ie: 4.
-					sprintf(
+					{format('F j', date)}{' '}
+					{sprintf(
+						// translators: %d: Count of all events, ie: 4.
 						_n(
 							'%d event',
 							'%d events',
 							dayEvents.length,
-							'wporg'
+							'wporg-meeting-calendar'
 						),
 						dayEvents.length
-					) }
+					)}
 				</span>
-				<span aria-hidden>{ day }</span>
+				<span aria-hidden>{day}</span>
 			</strong>
-			{ dayEvents.slice( 0, MAX_EVENTS ).map( ( event ) => {
+			{dayEvents.slice(0, MAX_EVENTS).map((event) => {
 				return (
 					<Button
-						key={ event.instance_id }
+						key={event.instance_id}
 						isLink
-						onClick={ () => void onEventClick( event ) }
+						onClick={() => void onEventClick(event)}
 						className={
 							'wporg-meeting-calendar__cell-event ' +
-							getTeamClass( event.team ) +
-							( isCancelled( event.status )
-								? ' is-cancelled'
-								: '' )
+							getTeamClass(event.team) +
+							(isCancelled(event.status) ? ' is-cancelled' : '')
 						}
 					>
 						<div className="wporg-meeting-calendar__cell-event-time">
-							{ format( 'g:i a: ', event.datetime ) }
+							{format('g:i a ', event.datetime)}
 						</div>
 						<div className="wporg-meeting-calendar__cell-event-title">
-							{ event.title }
+							{event.title}
 						</div>
 					</Button>
 				);
-			} ) }
+			})}
 
-			{ !! restOfEvents.length && (
+			{!!restOfEvents.length && (
 				<Dropdown
 					className="wporg-meeting-calendar__dropdown"
 					position="bottom center"
-					renderToggle={ ( { isOpen, onToggle } ) => (
+					renderToggle={({ isOpen, onToggle }) => (
 						<Button
 							isLink
-							onClick={ onToggle }
-							aria-expanded={ isOpen }
+							onClick={onToggle}
+							aria-expanded={isOpen}
 						>
-							{ // translators: %d: Count of hidden events, ie: 4.
-							sprintf(
+							{sprintf(
+								// translators: %d: Count of hidden events, ie: 4.
 								_n(
 									'%d more',
 									'%d more',
 									restOfEvents.length,
-									'wporg'
+									'wporg-meeting-calendar'
 								),
 								restOfEvents.length
-							) }
+							)}
 						</Button>
-					) }
-					renderContent={ () => (
+					)}
+					renderContent={() => (
 						<MenuGroup>
-							{ restOfEvents.map( ( event ) => {
+							{restOfEvents.map((event) => {
 								return (
 									<MenuItem
-										key={ event.instance_id }
+										key={event.instance_id}
 										isLink
-										onClick={ () =>
-											void onEventClick( event )
-										}
+										onClick={() => void onEventClick(event)}
 										className={
 											'wporg-meeting-calendar__cell-event ' +
-											getTeamClass( event.team ) +
-											( isCancelled( event.status )
+											getTeamClass(event.team) +
+											(isCancelled(event.status)
 												? ' is-cancelled'
-												: '' )
+												: '')
 										}
 									>
-										{ format( 'g:i a: ', event.datetime ) }
-										{ event.title }
+										{format('g:i a: ', event.datetime)}
+										{event.title}
 									</MenuItem>
 								);
-							} ) }
+							})}
 						</MenuGroup>
-					) }
+					)}
 				/>
-			) }
+			)}
 		</td>
 	);
 }