X2-9892 | Cannot Close the Customer's Reservation Window when Selecte…

…d in the Dashboard on The Xola Tablet (#331)

* X2-9892 | Cannot Close the Customer's Reservation Window when Selected in the Dashboard on The Xola Tablet

* lint and pretty

* lint

src/components/Breakdown.jsx

@@ -1,7 +1,7 @@
+import clsx from "clsx";
+import { isNumber } from "lodash";
 import PropTypes from "prop-types";
 import React, { createContext, useContext, useMemo } from "react";
-import { isNumber } from "lodash";
-import clsx from "clsx";
 import { Currency } from "./Utilities/Currency";
 
 const colors = {

src/components/Buttons/SubmitButton.jsx

@@ -1,9 +1,9 @@
 import { Transition } from "@headlessui/react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React, { useState, useEffect } from "react";
-import { Spinner } from "../Spinner";
+import React, { useEffect, useState } from "react";
 import { CheckIcon } from "../../icons";
+import { Spinner } from "../Spinner";
 import { Button, colors } from "./Button";
 
 const loadingColors = {

src/components/DatePicker/DatePicker.css

@@ -29,7 +29,7 @@
   * This does not include the today button
   */
 .DayPicker-Month {
-    @apply my-0 mx-0 p-0 pt-0.5 ring-0 focus:outline-none focus:ring-0;
+    @apply mx-0 my-0 p-0 pt-0.5 ring-0 focus:outline-none focus:ring-0;
     min-width: 400px; /* Odd width given from Figma */
     border-collapse: inherit;
     border-spacing: 0 8px; /* 8px between each week (row) */
@@ -52,7 +52,7 @@
 /* The "Today" button.
     A lot of specific vaules which I normally wouldn't use. But this is a third party lib where I cannot change the markup */
 .DayPicker-TodayButton {
-    @apply absolute top-0 right-24 h-10 px-3.5 py-2.5 leading-4;
+    @apply absolute right-24 top-0 h-10 px-3.5 py-2.5 leading-4;
     @apply rounded border border-solid border-gray bg-white text-base font-semibold tracking-tightest text-black hover:border-blue hover:bg-blue-lighter;
 }
 

src/components/DatePicker/RangeDatePicker.jsx

@@ -1,13 +1,13 @@
-import React from "react";
-import PropTypes from "prop-types";
-import DayPicker from "react-day-picker";
 import clsx from "clsx";
 import { isArray, isFunction } from "lodash";
-import { Tooltip } from "../Tooltip";
+import PropTypes from "prop-types";
+import React from "react";
+import DayPicker from "react-day-picker";
 import { now } from "../../helpers/date";
-import { NavbarElement } from "./NavbarElement";
-import { MonthYearSelector } from "./MonthYearSelector";
+import { Tooltip } from "../Tooltip";
 import { Day } from "./Day";
+import { MonthYearSelector } from "./MonthYearSelector";
+import { NavbarElement } from "./NavbarElement";
 
 const RangeDatePicker = ({
     getTooltip,

src/components/DatePicker/RelativeDateRange.jsx

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import React from "react";
-import { now, toDate } from "../../helpers/date";
 import { Button, Select } from "../..";
+import { now, toDate } from "../../helpers/date";
 
 const options = {
     YESTERDAY: "P1D,yesterday",

src/components/DatePicker/UpcomingDatePicker.jsx

@@ -1,7 +1,7 @@
-import React from "react";
-import dayjs from "dayjs";
 import clsx from "clsx";
+import dayjs from "dayjs";
 import PropTypes from "prop-types";
+import React from "react";
 
 export const UpcomingDatePicker = ({ value, upcomingDates, onChange, onMonthChange }) => {
     return (

src/components/Drawer.jsx

@@ -1,7 +1,7 @@
 import { Dialog, Transition } from "@headlessui/react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React, { Fragment, forwardRef } from "react";
+import React, { forwardRef, Fragment } from "react";
 import { CloseIcon } from "../icons";
 import { Button } from "./Buttons/Button";
 
@@ -92,8 +92,7 @@ const CloseButton = ({ onClose }) => {
             size="small"
             variant="link"
             className={clsx(
-                "m-2.5 inline-flex !h-10 !w-10 items-center justify-center !rounded-full bg-white !px-1.5",
-                "!text-black focus:hidden",
+                "m-2.5 inline-flex !h-10 !w-10 items-center justify-center !rounded-full bg-white !px-1.5 !text-black",
             )}
             onClick={onClose}
         >

src/components/Forms/BaseInput.jsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
+import { isEmpty, isString } from "lodash";
 import PropTypes from "prop-types";
 import React, { forwardRef } from "react";
-import { isEmpty, isString } from "lodash";
 import { Dot } from "../Dot/Dot";
 
 const sizes = {

src/components/Forms/Label.jsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 
 export const Label = ({ isDisabled = false, isError = false, className, ...rest }) => {
     return (

src/components/Forms/RangeSlider.jsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
-import React from "react";
-import PropTypes from "prop-types";
 import Nouislider from "nouislider-react";
+import PropTypes from "prop-types";
+import React from "react";
 import "nouislider/distribute/nouislider.css";
 import "./RangeSlider.css";
 

src/components/Forms/ValuePopoverText.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { WarningDiamondIcon, Tooltip } from "../..";
+import { Tooltip, WarningDiamondIcon } from "../..";
 
 export const ValuePopoverText = ({ value, error }) => {
     return (

src/components/HeaderToolbar.jsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 import { Breadcrumb, Search } from "..";
 
 export const HeaderToolbar = ({ classNames, children }) => {

src/components/Key.jsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 import { isOSX } from "../helpers/browser";
 
 export const Key = ({ char, className, ...rest }) => {

src/components/Logo.jsx

@@ -1,6 +1,6 @@
-import React from "react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
+import React from "react";
 
 const sizes = {
     small: "w-10 h-10",

src/components/Sidebar/Sidebar.Heading.jsx

@@ -1,5 +1,5 @@
-import PropTypes from "prop-types";
 import clsx from "clsx";
+import PropTypes from "prop-types";
 import React from "react";
 
 export const SidebarHeading = ({ icon: Icon, label, className }) => {

src/components/Spinner.jsx

@@ -1,6 +1,6 @@
-import React from "react";
 import clsx from "clsx";
 import PropTypes from "prop-types";
+import React from "react";
 import { CircleNotch } from "../icons";
 
 const colors = {

src/components/Tooltip.jsx

@@ -1,6 +1,6 @@
-import React from "react";
 import Tippy from "@tippyjs/react";
 import PropTypes from "prop-types";
+import React from "react";
 import { followCursor } from "tippy.js"; // Dont remove this even if unused. It is required for one prop
 import "tippy.js/dist/tippy.css"; // If we customize the style, the change this and import our own style
 

src/components/Utilities/Number.jsx

@@ -1,6 +1,6 @@
 import getUserLocale from "get-user-locale";
-import React from "react";
 import PropTypes from "prop-types";
+import React from "react";
 import { numberFormat } from "../../helpers/numbers";
 
 const userLocale = getUserLocale();

src/helpers/date.js

@@ -1,9 +1,9 @@
 import dayjs, { isDayjs } from "dayjs";
-import LocalizedFormat from "dayjs/plugin/localizedFormat";
 import customParseFormat from "dayjs/plugin/customParseFormat";
+import LocalizedFormat from "dayjs/plugin/localizedFormat";
 import quarterOfYear from "dayjs/plugin/quarterOfYear";
-import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
 
 dayjs.extend(customParseFormat);
 dayjs.extend(LocalizedFormat);

src/icons/src/Tutorials/TutorialsButtonIcon.jsx

@@ -1,5 +1,5 @@
-import React from "react";
 import clsx from "clsx";
+import React from "react";
 
 export const TutorialsButtonIcon = (props) => {
     const className = clsx("relative -top-0.25 inline-block", props.className);

src/stories/DataDisplay/DateRangePicker.stories.js

@@ -38,7 +38,7 @@ const DateRangePickerStories = {
 const today = dayjs.tz("2022-10-10").toDate();
 const handleSubmitDateRange = (e) => {
     console.log("handleSubmitDateRange", { event: e });
-}
+};
 
 export const Default = () => {
     const [value, setValue] = useState({ from: new Date("2022-02-03"), to: new Date("2022-03-08") });

src/stories/Forms/ComboBox.stories.js

@@ -1,5 +1,5 @@
-import React from "react";
 import clsx from "clsx";
+import React from "react";
 import { ComboBox, Currency, FormGroup, Label } from "../..";
 
 const ComboBoxStories = {

src/stories/Forms/Switch.stories.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-
 import { Switch } from "../..";
 
 const SwitchStories = {

src/stories/Forms/Textarea.stories.js

@@ -74,7 +74,7 @@ export const AutoSize = () => {
     return (
         <FormGroup>
             <Label>Text</Label>
-            <Textarea shouldAutoSize={true} rows={6}/>
+            <Textarea shouldAutoSize={true} rows={6} />
         </FormGroup>
     );
 };

src/stories/Installation.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Description } from "@storybook/addon-docs";
+import { Description, Meta } from "@storybook/addon-docs";
 import Readme from "../../README.md";
 
 <Meta title="Installation" />

src/stories/Media/Icons.stories.js

@@ -1,8 +1,8 @@
 import { map, omitBy } from "lodash";
 import React, { useState } from "react";
 import { Toaster } from "react-hot-toast";
-import * as all from "../../icons/";
 import { flash, Input } from "../..";
+import * as all from "../../icons/";
 
 const iconNames = omitBy(all, (Icon, name) => !name.endsWith("Icon"));
 const icons = map(iconNames, (Icon, name) => ({ Icon, name }));