From 01cfc0a8ee5ef6e96ae00cf400f03a260b168d90 Mon Sep 17 00:00:00 2001 From: David Khourshid Date: Sat, 18 May 2024 23:42:06 -0400 Subject: [PATCH] Formatting example --- examples/7guis-flight-booker-react/README.md | 2 +- .../7guis-flight-booker-react/src/App.tsx | 26 ++--- .../src/components/BookButton.tsx | 4 +- .../src/components/DateInput.tsx | 2 +- .../src/components/index.ts | 8 +- .../src/machines/flightMachine.ts | 96 +++++++++---------- .../7guis-flight-booker-react/src/main.tsx | 14 +-- .../src/styles/reset.css | 2 +- .../src/styles/styles.css | 2 +- .../src/utils/index.ts | 4 +- examples/7guis-flight-booker-react/types.d.ts | 7 +- 11 files changed, 84 insertions(+), 83 deletions(-) diff --git a/examples/7guis-flight-booker-react/README.md b/examples/7guis-flight-booker-react/README.md index 4ce848b2f5..5f03d9ccaf 100644 --- a/examples/7guis-flight-booker-react/README.md +++ b/examples/7guis-flight-booker-react/README.md @@ -7,7 +7,7 @@ The 7GUIs Fligt Booker App built with: - Typescript - Vite -Visit the [7GUIs project](https://eugenkiss.github.io/7guis/tasks#flight/ "Flight Booker") for more info. +Visit the [7GUIs project](https://eugenkiss.github.io/7guis/tasks#flight/ 'Flight Booker') for more info. ## Screenshots diff --git a/examples/7guis-flight-booker-react/src/App.tsx b/examples/7guis-flight-booker-react/src/App.tsx index 83b93f531e..ea69b0270c 100644 --- a/examples/7guis-flight-booker-react/src/App.tsx +++ b/examples/7guis-flight-booker-react/src/App.tsx @@ -1,15 +1,15 @@ -import FlightContext from "./machines/flightMachine"; -import { BookButton, Header } from "./components"; -import { DateSelector, TripSelector } from "./components"; -import { TODAY } from "./utils"; +import FlightContext from './machines/flightMachine'; +import { BookButton, Header } from './components'; +import { DateSelector, TripSelector } from './components'; +import { TODAY } from './utils'; export default function App() { const { send } = FlightContext.useActorRef(); const state = FlightContext.useSelector((state) => state); const { departDate, returnDate } = state.context; - const isRoundTrip = state.matches({ scheduling: "roundTrip" }); - const isBooking = state.matches("booking"); - const isBooked = state.matches("booked"); + const isRoundTrip = state.matches({ scheduling: 'roundTrip' }); + const isBooking = state.matches('booking'); + const isBooked = state.matches('booked'); const isValidDepartDate = departDate >= TODAY; const isValidReturnDate = returnDate >= departDate; @@ -21,7 +21,7 @@ export default function App() { id="Trip Type" isBooking={isBooking} isBooked={isBooked} - tripType={isRoundTrip ? "roundTrip" : "oneWay"} + tripType={isRoundTrip ? 'roundTrip' : 'oneWay'} /> ) => send({ - type: "CHANGE_DEPART_DATE", - value: e.currentTarget.value, + type: 'CHANGE_DEPART_DATE', + value: e.currentTarget.value }) } /> @@ -42,13 +42,13 @@ export default function App() { disabled={!isRoundTrip} onChange={(e: React.ChangeEvent) => send({ - type: "CHANGE_RETURN_DATE", - value: e.currentTarget.value, + type: 'CHANGE_RETURN_DATE', + value: e.currentTarget.value }) } /> diff --git a/examples/7guis-flight-booker-react/src/components/BookButton.tsx b/examples/7guis-flight-booker-react/src/components/BookButton.tsx index b77805526a..9b58883073 100644 --- a/examples/7guis-flight-booker-react/src/components/BookButton.tsx +++ b/examples/7guis-flight-booker-react/src/components/BookButton.tsx @@ -1,4 +1,4 @@ -import FlightContext from "../machines/flightMachine"; +import FlightContext from '../machines/flightMachine'; type Props = { isBooking: boolean; @@ -32,7 +32,7 @@ export default function BookButton({ eventType, isBooking, isBooked }: Props) { {isBooking ?

Booking...

: successMessage} ); diff --git a/examples/7guis-flight-booker-react/src/components/DateInput.tsx b/examples/7guis-flight-booker-react/src/components/DateInput.tsx index b5d58f1d35..58c56b3cff 100644 --- a/examples/7guis-flight-booker-react/src/components/DateInput.tsx +++ b/examples/7guis-flight-booker-react/src/components/DateInput.tsx @@ -6,7 +6,7 @@ function DateInput({ isValidDate, ...props }: Props) { return ( ); } diff --git a/examples/7guis-flight-booker-react/src/components/index.ts b/examples/7guis-flight-booker-react/src/components/index.ts index e58f05e36c..049cff2df6 100644 --- a/examples/7guis-flight-booker-react/src/components/index.ts +++ b/examples/7guis-flight-booker-react/src/components/index.ts @@ -1,6 +1,6 @@ -import Header from "./Header"; -import BookButton from "./BookButton"; -import DateSelector from "./DateInput"; -import TripSelector from "./TripSelector"; +import Header from './Header'; +import BookButton from './BookButton'; +import DateSelector from './DateInput'; +import TripSelector from './TripSelector'; export { Header, BookButton, DateSelector, TripSelector }; diff --git a/examples/7guis-flight-booker-react/src/machines/flightMachine.ts b/examples/7guis-flight-booker-react/src/machines/flightMachine.ts index 27af7bbf66..aa3ea12c06 100644 --- a/examples/7guis-flight-booker-react/src/machines/flightMachine.ts +++ b/examples/7guis-flight-booker-react/src/machines/flightMachine.ts @@ -1,107 +1,107 @@ -import { setup, assign, assertEvent, fromPromise } from "xstate"; -import { createActorContext } from "@xstate/react"; -import { TODAY, TOMORROW } from "../utils"; -import { sleep } from "../utils"; +import { setup, assign, assertEvent, fromPromise } from 'xstate'; +import { createActorContext } from '@xstate/react'; +import { TODAY, TOMORROW } from '../utils'; +import { sleep } from '../utils'; export const flightBookerMachine = setup({ types: { context: {} as FlightData, events: {} as - | { type: "BOOK_DEPART" } - | { type: "BOOK_RETURN" } - | { type: "CHANGE_TRIP_TYPE" } - | { type: "CHANGE_DEPART_DATE"; value: string } - | { type: "CHANGE_RETURN_DATE"; value: string }, + | { type: 'BOOK_DEPART' } + | { type: 'BOOK_RETURN' } + | { type: 'CHANGE_TRIP_TYPE' } + | { type: 'CHANGE_DEPART_DATE'; value: string } + | { type: 'CHANGE_RETURN_DATE'; value: string } }, actions: { setDepartDate: assign(({ event }) => { - assertEvent(event, "CHANGE_DEPART_DATE"); + assertEvent(event, 'CHANGE_DEPART_DATE'); return { departDate: event.value }; }), setReturnDate: assign(({ event }) => { - assertEvent(event, "CHANGE_RETURN_DATE"); + assertEvent(event, 'CHANGE_RETURN_DATE'); return { returnDate: event.value }; - }), + }) }, actors: { Booker: fromPromise(() => { return sleep(2000); - }), + }) }, guards: { - "isValidDepartDate?": ({ context: { departDate } }) => { + 'isValidDepartDate?': ({ context: { departDate } }) => { return departDate >= TODAY; }, - "isValidReturnDate?": ({ context: { departDate, returnDate } }) => { + 'isValidReturnDate?': ({ context: { departDate, returnDate } }) => { return departDate >= TODAY && returnDate > departDate; - }, - }, + } + } }).createMachine({ - id: "flightBookerMachine", + id: 'flightBookerMachine', context: { departDate: TODAY, - returnDate: TOMORROW, + returnDate: TOMORROW }, - initial: "scheduling", + initial: 'scheduling', states: { scheduling: { - initial: "oneWay", + initial: 'oneWay', on: { CHANGE_DEPART_DATE: { actions: { - type: "setDepartDate", - }, - }, + type: 'setDepartDate' + } + } }, states: { oneWay: { on: { CHANGE_TRIP_TYPE: { - target: "roundTrip", + target: 'roundTrip' }, BOOK_DEPART: { - target: "#flightBookerMachine.booking", + target: '#flightBookerMachine.booking', guard: { - type: "isValidDepartDate?", - }, - }, - }, + type: 'isValidDepartDate?' + } + } + } }, roundTrip: { on: { CHANGE_TRIP_TYPE: { - target: "oneWay", + target: 'oneWay' }, CHANGE_RETURN_DATE: { actions: { - type: "setReturnDate", - }, + type: 'setReturnDate' + } }, BOOK_RETURN: { - target: "#flightBookerMachine.booking", + target: '#flightBookerMachine.booking', guard: { - type: "isValidReturnDate?", - }, - }, - }, - }, - }, + type: 'isValidReturnDate?' + } + } + } + } + } }, booking: { invoke: { - src: "Booker", + src: 'Booker', onDone: { - target: "booked", + target: 'booked' }, onError: { - target: "scheduling", - }, - }, + target: 'scheduling' + } + } }, booked: { - type: "final", - }, - }, + type: 'final' + } + } }); export default createActorContext(flightBookerMachine); diff --git a/examples/7guis-flight-booker-react/src/main.tsx b/examples/7guis-flight-booker-react/src/main.tsx index 6e821ac917..aecc63e7d9 100644 --- a/examples/7guis-flight-booker-react/src/main.tsx +++ b/examples/7guis-flight-booker-react/src/main.tsx @@ -1,12 +1,12 @@ -import "./styles/reset.css"; -import "./styles/styles.css"; +import './styles/reset.css'; +import './styles/styles.css'; -import React from "react"; -import ReactDOM from "react-dom/client"; -import FlightContext from "./machines/flightMachine.ts"; -import App from "./App.tsx"; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import FlightContext from './machines/flightMachine.ts'; +import App from './App.tsx'; -ReactDOM.createRoot(document.getElementById("root")!).render( +ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/examples/7guis-flight-booker-react/src/styles/reset.css b/examples/7guis-flight-booker-react/src/styles/reset.css index 691da330e1..5bd00d4707 100644 --- a/examples/7guis-flight-booker-react/src/styles/reset.css +++ b/examples/7guis-flight-booker-react/src/styles/reset.css @@ -120,7 +120,7 @@ blockquote:before, blockquote:after, q:before, q:after { - content: ""; + content: ''; content: none; } table { diff --git a/examples/7guis-flight-booker-react/src/styles/styles.css b/examples/7guis-flight-booker-react/src/styles/styles.css index d3ccf47631..c943de5e2e 100644 --- a/examples/7guis-flight-booker-react/src/styles/styles.css +++ b/examples/7guis-flight-booker-react/src/styles/styles.css @@ -91,7 +91,7 @@ dialog { } } -input[type="date"] { +input[type='date'] { cursor: pointer; box-shadow: var(--inner-shadow); color: var(--black); diff --git a/examples/7guis-flight-booker-react/src/utils/index.ts b/examples/7guis-flight-booker-react/src/utils/index.ts index 3cccd39d84..223fbfea6e 100644 --- a/examples/7guis-flight-booker-react/src/utils/index.ts +++ b/examples/7guis-flight-booker-react/src/utils/index.ts @@ -1,9 +1,9 @@ // CONSTANTS -export const TODAY = new Date().toISOString().split("T")[0]; +export const TODAY = new Date().toISOString().split('T')[0]; export const TOMORROW = new Date(Date.now() + 86400000) .toISOString() - .split("T")[0]; + .split('T')[0]; // Emulate async operation export function sleep(ms: number) { diff --git a/examples/7guis-flight-booker-react/types.d.ts b/examples/7guis-flight-booker-react/types.d.ts index 3766666baf..defc30c096 100644 --- a/examples/7guis-flight-booker-react/types.d.ts +++ b/examples/7guis-flight-booker-react/types.d.ts @@ -1,10 +1,10 @@ -import React from "react"; +import React from 'react'; declare global { type Input = React.InputHTMLAttributes; type Select = React.SelectHTMLAttributes; - type EventType = "BOOK_DEPART" | "BOOK_RETURN"; + type EventType = 'BOOK_DEPART' | 'BOOK_RETURN'; type FlightData = { departDate: string; @@ -12,7 +12,8 @@ declare global { }; type TripSelectorProps = { + isBooking: boolean; isBooked: boolean; - tripType: "oneWay" | "roundTrip"; + tripType: 'oneWay' | 'roundTrip'; } & React.InputHTMLAttributes; }