@licklist/design 0.68.0-dev.1 → 0.68.1-dev.0

package/src/report/ReportRunnerModal/ReportRunnerModal.tsx

@@ -6,41 +6,41 @@ import {
   Report,
   ReportPeriodBy,
   ReportType,
-} from "@licklist/core/dist/DataMapper/Report";
-import { capitalize } from "lodash";
-import { Button, Form, Modal } from "react-bootstrap";
-import { useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { openOnlineViewer } from "@licklist/plugins/dist/utils/report";
-import { HttpQuery } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
-import { CachedHttpQueryResponse } from "@licklist/plugins/dist/hooks/Api/useCachedHttpQuery";
-import { BlockLoader } from "../../static/loader";
+} from '@licklist/core/dist/DataMapper/Report'
+import { capitalize } from 'lodash'
+import { Button, Form, Modal } from 'react-bootstrap'
+import { useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { openOnlineViewer } from '@licklist/plugins/dist/utils/report'
+import { HttpQuery } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
+import { CachedHttpQueryResponse } from '@licklist/plugins/dist/hooks/Api/useCachedHttpQuery'
+import { BlockLoader } from '../../static/loader'
 
 interface ReportField {
-  id: number;
-  key: string;
-  title: string;
+  id: number
+  key: string
+  title: string
 }
 
 export type ReportRunnerModalProps = {
-  reportId: Report["id"] | null;
-  show: boolean;
+  reportId: Report['id'] | null
+  show: boolean
   useShowReportFields: (
     reportType?: ReportType,
-  ) => CachedHttpQueryResponse<ReportField[], unknown>;
-  generate?: HttpQuery<Record<string, string>[] | null>;
-  download?: HttpQuery<Blob | null>;
-  onHide: () => void;
-  onEdit: () => void;
-  reports?: Report[] | null;
-};
+  ) => CachedHttpQueryResponse<ReportField[], unknown>
+  generate?: HttpQuery<Record<string, string>[] | null>
+  download?: HttpQuery<Blob | null>
+  onHide: () => void
+  onEdit: () => void
+  reports?: Report[] | null
+}
 
-type FormValues = Pick<GenerateReportBody, "dateFrom" | "dateTo" | "periodBy">;
+type FormValues = Pick<GenerateReportBody, 'dateFrom' | 'dateTo' | 'periodBy'>
 
 const labelByPeriodType: Record<ReportPeriodBy, string> = {
-  [PERIOD_BY_CREATION_DATE]: "Design:reportPeriodByCreationDate",
-  [PERIOD_BY_BOOKING_DATE]: "Design:reportPeriodByBookingDate",
-};
+  [PERIOD_BY_CREATION_DATE]: 'Design:reportPeriodByCreationDate',
+  [PERIOD_BY_BOOKING_DATE]: 'Design:reportPeriodByBookingDate',
+}
 
 export const ReportRunnerModal = ({
   reportId,
@@ -52,11 +52,11 @@ export const ReportRunnerModal = ({
   download,
   onEdit,
 }: ReportRunnerModalProps) => {
-  const { t } = useTranslation(["App", "Design"]);
-  const report = reports?.find((report) => report.id === reportId);
+  const { t } = useTranslation(['App', 'Design'])
+  const report = reports?.find((report) => report.id === reportId)
 
   const { data: reportFields = [], isLoading: isLoadingReportFields } =
-    useShowReportFields(report?.type);
+    useShowReportFields(report?.type)
 
   const {
     handleSubmit,
@@ -64,35 +64,35 @@ export const ReportRunnerModal = ({
     formState: { errors },
     reset,
     watch,
-  } = useForm<FormValues>({ mode: "onChange" });
-  const dateFrom = watch("dateFrom");
+  } = useForm<FormValues>({ mode: 'onChange' })
+  const dateFrom = watch('dateFrom')
 
   const onDownload = handleSubmit((values) => {
-    download.execute({ ...values, reportId, type: report?.type });
-  });
+    download.execute({ ...values, reportId, type: report?.type })
+  })
 
   const onViewOnline = handleSubmit(async (values) => {
     const data = await generate.execute({
       ...values,
       reportId,
-    });
-    if (!report || !data || generate.isError) return;
+    })
+    if (!report || !data || generate.isError) return
 
     openOnlineViewer({
       type: report.type,
       dateFrom: values.dateFrom,
       dateTo: values.dateTo,
       data,
-    });
-  });
+    })
+  })
 
   const onClose = () => {
-    reset();
-    onHide();
-  };
+    reset()
+    onHide()
+  }
 
   const isLoading =
-    generate.isLoading || download.isLoading || isLoadingReportFields;
+    generate.isLoading || download.isLoading || isLoadingReportFields
 
   return (
     <Modal
@@ -102,9 +102,9 @@ export const ReportRunnerModal = ({
       centered
     >
       <header>
-        <h5>{t("generateReport")}</h5>
+        <h5>{t('generateReport')}</h5>
         <Button variant="" data-testid="cancel-button" onClick={onClose}>
-          {t("cancel")}
+          {t('cancel')}
         </Button>
       </header>
 
@@ -118,9 +118,9 @@ export const ReportRunnerModal = ({
             {report?.reportFieldValues.map((fieldValue) => {
               const field = reportFields?.find(
                 (field) => field.id === fieldValue.reportFieldId,
-              );
-              if (!field) return null;
-              return <span key={fieldValue.id}>{field.title}</span>;
+              )
+              if (!field) return null
+              return <span key={fieldValue.id}>{field.title}</span>
             })}
           </div>
 
@@ -131,13 +131,13 @@ export const ReportRunnerModal = ({
             data-testid="edit-button"
             onClick={onEdit}
           >
-            {t("Design:edit")}
+            {t('Design:edit')}
           </Button>
 
           <form noValidate>
             <div
               className={`pl-1 ${
-                errors.periodBy?.message && "border-danger border rounded"
+                errors.periodBy?.message && 'border-danger border rounded'
               }`}
             >
               <div className="period-by">
@@ -150,9 +150,9 @@ export const ReportRunnerModal = ({
                       id={type}
                       required
                       value={type}
-                      {...register("periodBy", {
-                        required: `${t("Validation:fieldRequired", {
-                          attribute: t("Design:period"),
+                      {...register('periodBy', {
+                        required: `${t('Validation:fieldRequired', {
+                          attribute: t('Design:period'),
                         })}`,
                       })}
                     />
@@ -168,16 +168,16 @@ export const ReportRunnerModal = ({
 
             <div className="controls mt-4">
               <Form.Group controlId="from-input">
-                <Form.Label>{t("Design:from")}</Form.Label>
+                <Form.Label>{t('Design:from')}</Form.Label>
                 <Form.Control
                   type="datetime-local"
                   data-testid="date-from-input"
                   isInvalid={!!errors.dateFrom}
-                  {...register("dateFrom", {
+                  {...register('dateFrom', {
                     required: {
                       value: true,
-                      message: `${t("Validation:fieldRequired", {
-                        attribute: t("Design:from"),
+                      message: `${t('Validation:fieldRequired', {
+                        attribute: t('Design:from'),
                       })}`,
                     },
                   })}
@@ -188,19 +188,19 @@ export const ReportRunnerModal = ({
               </Form.Group>
 
               <Form.Group controlId="to-input">
-                <Form.Label>{t("Design:to")}</Form.Label>
+                <Form.Label>{t('Design:to')}</Form.Label>
                 <Form.Control
                   type="datetime-local"
                   data-testid="date-to-input"
                   isInvalid={!!errors.dateTo}
-                  {...register("dateTo", {
-                    required: `${t("Validation:fieldRequired", {
-                      attribute: t("Design:to"),
+                  {...register('dateTo', {
+                    required: `${t('Validation:fieldRequired', {
+                      attribute: t('Design:to'),
                     })}`,
                     validate(value) {
-                      if (!dateFrom) return true;
-                      if (value > dateFrom) return true;
-                      return t("toDateAfterFrom") as string;
+                      if (!dateFrom) return true
+                      if (value > dateFrom) return true
+                      return t('toDateAfterFrom') as string
                     },
                   })}
                 />
@@ -212,16 +212,16 @@ export const ReportRunnerModal = ({
 
             <div className="controls">
               <Button data-testid="download-button" onClick={onDownload}>
-                {t("generateDownload")}
+                {t('generateDownload')}
               </Button>
 
               <Button data-testid="view-button" onClick={onViewOnline}>
-                {t("generateView")}
+                {t('generateView')}
               </Button>
             </div>
           </form>
         </div>
       )}
     </Modal>
-  );
-};
+  )
+}

package/src/report/ReportRunnerModal/index.ts

@@ -1 +1 @@
-export * from "./ReportRunnerModal";
+export * from './ReportRunnerModal'

package/src/report/ReportTypeSelect/ReportTypeSelect.tsx

@@ -1,40 +1,40 @@
-import { reportTypes } from "@licklist/core/dist/DataMapper/Report";
-import { capitalize } from "lodash";
-import { Row, Col, Form, OverlayTrigger, Popover } from "react-bootstrap";
-import { useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { ReactComponent as InfoIcon } from "../../assets/dashboard/info.svg";
+import { reportTypes } from '@licklist/core/dist/DataMapper/Report'
+import { capitalize } from 'lodash'
+import { Row, Col, Form, OverlayTrigger, Popover } from 'react-bootstrap'
+import { useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { ReactComponent as InfoIcon } from '../../assets/dashboard/info.svg'
 
 export const ReportTypeSelect = () => {
-  const { t } = useTranslation(["App", "Design"]);
+  const { t } = useTranslation(['App', 'Design'])
 
   const {
     register,
     formState: { errors },
     setValue,
-  } = useFormContext();
+  } = useFormContext()
 
   return (
     <Row>
       <Col lg={6} className="mt-4">
         <Form.Group controlId="typeSelect">
-          <Form.Label>{t("reportType")}</Form.Label>
+          <Form.Label>{t('reportType')}</Form.Label>
 
           <Form.Control
             as="select"
             data-testid="report-type-select"
             isInvalid={!!errors.type}
-            {...register("type", {
+            {...register('type', {
               required: {
                 value: true,
-                message: `${t("Validation:fieldRequired", {
-                  attribute: t("reportType"),
+                message: `${t('Validation:fieldRequired', {
+                  attribute: t('reportType'),
                 })}`,
               },
             })}
             onChange={(event) => {
-              register("type").onChange(event);
-              setValue("reportFieldValues", []);
+              register('type').onChange(event)
+              setValue('reportFieldValues', [])
             }}
           >
             {reportTypes.map((reportType) => (
@@ -53,7 +53,7 @@ export const ReportTypeSelect = () => {
             overlay={
               <Popover id="report-type-popover">
                 <Popover.Content className="reports-popover">
-                  {t("reportTypeSelectInfo")}
+                  {t('reportTypeSelectInfo')}
                 </Popover.Content>
               </Popover>
             }
@@ -63,5 +63,5 @@ export const ReportTypeSelect = () => {
         </Form.Group>
       </Col>
     </Row>
-  );
-};
+  )
+}

package/src/report/ReportTypeSelect/index.ts

@@ -1 +1 @@
-export * from "./ReportTypeSelect";
+export * from './ReportTypeSelect'

package/src/report/card/ReportCard.stories.tsx

@@ -1,20 +1,20 @@
-import { Meta, Story } from "@storybook/react";
+import { Meta, Story } from '@storybook/react'
 
-import { ReportCard, ReportCardProps } from "./ReportCard";
+import { ReportCard, ReportCardProps } from './ReportCard'
 
 export default {
-  title: "Report / Card",
+  title: 'Report / Card',
   component: ReportCard,
-} as Meta;
+} as Meta
 
 export const Default: Story<ReportCardProps> = (args) => (
   <ReportCard {...args} />
-);
+)
 
 Default.args = {
-  name: "Sales",
+  name: 'Sales',
   onPress: () => {
-    console.log("open modal view");
+    console.log('open modal view')
   },
   hasPermission: true,
-};
+}

package/src/report/card/ReportCard.tsx

@@ -1,19 +1,19 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
+import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
 
 export interface ReportCardProps extends HasPermissionProp {
-  name: string;
-  onPress: () => void;
-  className?: string;
+  name: string
+  onPress: () => void
+  className?: string
 }
 
 export function ReportCard({
   name,
   onPress,
-  className = "",
+  className = '',
   hasPermission = true,
 }: ReportCardProps) {
-  const reportCardClasses = `report-card ${className}`;
+  const reportCardClasses = `report-card ${className}`
 
   return (
     <div
@@ -28,5 +28,5 @@ export function ReportCard({
         </div>
       </div>
     </div>
-  );
+  )
 }

package/src/report/card/index.ts

@@ -1 +1 @@
-export * from "./ReportCard";
+export * from './ReportCard'

package/src/report/form/ReportForm.stories.tsx

@@ -1,17 +1,17 @@
-import { Meta, Story } from "@storybook/react";
-import { ReportForm, ReportFormProps } from "./ReportForm";
+import { Meta, Story } from '@storybook/react'
+import { ReportForm, ReportFormProps } from './ReportForm'
 
 export default {
-  title: "Report / Form",
+  title: 'Report / Form',
   component: ReportForm,
-} as Meta;
+} as Meta
 
 export const Default: Story<ReportFormProps> = (args) => {
-  return <ReportForm {...args} />;
-};
+  return <ReportForm {...args} />
+}
 
 Default.args = {
   onSubmit: (values) => console.log(values),
   hasPermission: true,
   onHide: () => {},
-};
+}

package/src/report/form/ReportForm.tsx

@@ -1,14 +1,14 @@
-import { useRef } from "react";
-import { Row, Col, Button, Form, Modal } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { useForm } from "react-hook-form";
-import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
+import { useRef } from 'react'
+import { Row, Col, Button, Form, Modal } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { useForm } from 'react-hook-form'
+import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
 
-import HTMLInputDateElement from "../../types/static/HTMLInputDateElement";
+import HTMLInputDateElement from '../../types/static/HTMLInputDateElement'
 
 export interface ReportFormProps extends HasPermissionProp {
-  onHide: () => void;
-  onSubmit: (data) => void;
+  onHide: () => void
+  onSubmit: (data) => void
 }
 
 export function ReportForm({
@@ -16,19 +16,19 @@ export function ReportForm({
   onHide,
   hasPermission,
 }: ReportFormProps) {
-  const { t } = useTranslation(["App"]);
-  const fromDateInput = useRef<HTMLInputDateElement | null>(null);
-  const toDateInput = useRef<HTMLInputDateElement | null>(null);
+  const { t } = useTranslation(['App'])
+  const fromDateInput = useRef<HTMLInputDateElement | null>(null)
+  const toDateInput = useRef<HTMLInputDateElement | null>(null)
 
   const {
     watch,
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm();
+  } = useForm()
 
-  const dateFromValue = watch("date_from");
-  const dateToValue = watch("date_to");
+  const dateFromValue = watch('date_from')
+  const dateToValue = watch('date_to')
 
   return (
     <Form onSubmit={handleSubmit(onSubmit)} noValidate>
@@ -42,20 +42,20 @@ export function ReportForm({
           lg={10}
           xl={12}
         >
-          <Form.Label>{t("Design:from")}</Form.Label>
+          <Form.Label>{t('Design:from')}</Form.Label>
           <Form.Control
             required
             type="date"
-            {...register("date_from", {
-              required: t("Validation:fieldRequired", {
-                attribute: t("from"),
+            {...register('date_from', {
+              required: t('Validation:fieldRequired', {
+                attribute: t('from'),
               }) as string,
             })}
-            className={dateFromValue && "date-input-with-value"}
+            className={dateFromValue && 'date-input-with-value'}
             ref={fromDateInput}
             onClick={() => fromDateInput?.current?.showPicker()}
             isInvalid={Boolean(errors.date_from)}
-            placeholder={t("Design:from")}
+            placeholder={t('Design:from')}
           />
           <Form.Control.Feedback type="invalid">
             {errors.date_from?.message}
@@ -70,20 +70,20 @@ export function ReportForm({
           lg={10}
           xl={12}
         >
-          <Form.Label>{t("Design:to")}</Form.Label>
+          <Form.Label>{t('Design:to')}</Form.Label>
           <Form.Control
             required
             type="date"
-            {...register("date_to", {
-              required: t("Validation:fieldRequired", {
-                attribute: t("to"),
+            {...register('date_to', {
+              required: t('Validation:fieldRequired', {
+                attribute: t('to'),
               }) as string,
             })}
-            className={dateToValue && "date-input-with-value"}
+            className={dateToValue && 'date-input-with-value'}
             ref={toDateInput}
             onClick={() => toDateInput?.current?.showPicker()}
             isInvalid={Boolean(errors.date_to)}
-            placeholder={t("Design:to")}
+            placeholder={t('Design:to')}
           />
           <Form.Control.Feedback type="invalid">
             {errors.date_to?.message}
@@ -93,11 +93,11 @@ export function ReportForm({
       {hasPermission && (
         <Modal.Footer className="border-0 p-0">
           <Button onClick={onHide} variant="danger">
-            {t("Design:cancel")}
+            {t('Design:cancel')}
           </Button>
-          <Button type="submit">{t("Design:download")}</Button>
+          <Button type="submit">{t('Design:download')}</Button>
         </Modal.Footer>
       )}
     </Form>
-  );
+  )
 }

package/src/report/form/index.ts

@@ -1 +1 @@
-export * from "./ReportForm";
+export * from './ReportForm'

package/src/report/index.ts

@@ -1,5 +1,5 @@
-export * from "./card";
-export * from "./form";
-export * from "./ReportTypeSelect";
-export * from "./DataFieldsSelector";
-export * from "./ReportRunnerModal";
+export * from './card'
+export * from './form'
+export * from './ReportTypeSelect'
+export * from './DataFieldsSelector'
+export * from './ReportRunnerModal'

package/src/resource/card/ResourceCard.stories.tsx

@@ -1,16 +1,16 @@
-import { Meta, Story } from "@storybook/react";
-import { ResourceCard, ResourceCardProps } from "./ResourceCard";
+import { Meta, Story } from '@storybook/react'
+import { ResourceCard, ResourceCardProps } from './ResourceCard'
 
 export default {
-  title: "Resource/Card",
+  title: 'Resource/Card',
   component: ResourceCard,
-} as Meta;
+} as Meta
 
 export const Default: Story<ResourceCardProps> = (args) => (
   <ResourceCard {...args} />
-);
+)
 
 Default.args = {
-  name: "Resource 1",
+  name: 'Resource 1',
   hasPermission: true,
-};
+}

package/src/resource/card/ResourceCard.tsx

@@ -1,13 +1,13 @@
-import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
-import { ZoneCard } from "../../zone/card";
+import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
+import { ZoneCard } from '../../zone/card'
 
 export interface ResourceCardProps extends HasPermissionProp {
-  name: string;
-  href: string;
-  onRemove: () => void;
-  className?: string;
+  name: string
+  href: string
+  onRemove: () => void
+  className?: string
 }
 
-export const ResourceCard = (props: ResourceCardProps) => {
-  return <ZoneCard {...props} />;
-};
+export const ResourceCard = (props: ResourceCardProps) => (
+  <ZoneCard {...props} />
+)

package/src/resource/card/index.ts

@@ -1,2 +1,2 @@
-export { ResourceCard } from "./ResourceCard";
-export type { ResourceCardProps } from "./ResourceCard";
+export { ResourceCard } from './ResourceCard'
+export type { ResourceCardProps } from './ResourceCard'

package/src/resource/form/ResourceForm.stories.tsx

@@ -1,24 +1,24 @@
-import { Meta, Story } from "@storybook/react";
-import { boolean } from "@storybook/addon-knobs";
-import { ResourceForm, ResourceFormProps } from "./ResourceForm";
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
+import { Meta, Story } from '@storybook/react'
+import { boolean } from '@storybook/addon-knobs'
+import { ResourceForm, ResourceFormProps } from './ResourceForm'
+import { Zone } from '@licklist/core/dist/DataMapper/Provider/ZoneDataMapper'
 
 export default {
-  title: "Resource/Form",
+  title: 'Resource/Form',
   component: ResourceForm,
-} as Meta;
+} as Meta
 
 export const Default: Story<ResourceFormProps> = (args) => {
-  const isLoading = boolean("isLoading", false);
-  return <ResourceForm {...args} isLoading={isLoading} />;
-};
+  const isLoading = boolean('isLoading', false)
+  return <ResourceForm {...args} isLoading={isLoading} />
+}
 
 Default.args = {
   defaultValues: {
-    name: "Resource",
+    name: 'Resource',
     zoneId: 12,
     capacity: 10,
     sort: 100,
   },
-  zones: [{ id: 12, name: "Zone Test" } as Zone] as Zone[],
-};
+  zones: [{ id: 12, name: 'Zone Test' } as Zone] as Zone[],
+}