@autobusal/common 0.0.41 → 1.0.1

package/Meta.tsx

@@ -4,7 +4,7 @@ interface Props {
   title: string
   keywords?: string
   description?: string
-  children: JSX.Element | JSX.Element[] | string | null | false | boolean
+  children: any
 }
 
 const Meta = ({ title, keywords, description, children }: Props): JSX.Element => (

package/Modal/Modal.tsx

@@ -1,6 +1,6 @@
 import { AiOutlineClose } from 'react-icons/ai';
 import { useOverflow } from '@autobusal/hooks';
-import { Paragraph } from '../Loading/Loading';
+import Paragraph from '../Loading/Paragraph';
 import { Background, Container, Title, ButtonClose } from './styles';
 
 interface Props {
@@ -28,8 +28,7 @@ const Modal = ({ loading, width, title, content, onClose }: Props): JSX.Element
           </ButtonClose>
         </Title>
 
-        {/* { loading ? <Paragraph /> : content } */}
-        <Paragraph />
+        { loading ? <Paragraph /> : content }
       </Container>
     </>
   );

package/Pagination/Pagination.tsx

@@ -1,6 +1,6 @@
 import { TFunction } from 'i18next';
 import { Container, Left, Right, PageText, PageLink } from './styles';
-import { PaginationData } from '@modules/Providers/types/pagination';
+import { PaginationData } from '@autobusal/providers/types/pagination';
 
 interface Props {
   pages: PaginationData<unknown>

package/Passengers/Passengers.tsx

@@ -2,8 +2,8 @@ import { useState, useEffect, useRef } from 'react';
 import { TFunction } from 'i18next';
 import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
 import { useOutside } from '@autobusal/hooks';
-import getText from './utilities/getText';
 import Persons from './Persons';
+import { getText } from './utilities';
 import { Container } from './styles';
 
 interface Props {
@@ -28,8 +28,9 @@ const Passengers = ({ defaultAdults, defaultChildren, defaultBabies, t, refs, on
 
   useEffect(() => {
     const text = getText(adults, children, babies, t);
+
     setDisplay(text);
-  }, [adults, children, babies]);
+  }, [adults, children, babies, t]);
 
   useOutside(ref, () => setShow(false));
 
@@ -57,9 +58,9 @@ const Passengers = ({ defaultAdults, defaultChildren, defaultBabies, t, refs, on
 
       { show &&
         <Persons
-          adults={ adults }
-          children={ children }
-          babies={ babies }
+          adultsNo={ adults }
+          childrenNo={ children }
+          babiesNo={ babies }
           t={ t }
           onChange={ onChange }
         /> }

package/Passengers/Persons.tsx

@@ -3,20 +3,20 @@ import Person from './Person';
 import { Passengers } from './styles';
 
 interface Props {
-  adults: number
-  children: number
-  babies: number
+  adultsNo: number
+  childrenNo: number
+  babiesNo: number
   t: TFunction<'common'>
   onChange: (name: ('adults' | 'children' | 'babies'), amount: number) => void
 }
 
-const Persons = ({ adults, children, babies, t, onChange }: Props): JSX.Element => (
+const Persons = ({ adultsNo, childrenNo, babiesNo, t, onChange }: Props): JSX.Element => (
   <Passengers>
     <Person
       name="adults"
       title={ t('data.persons.adult.plural', { ns: 'common' }) }
       description={ t('data.persons.adult.description', { ns: 'common' }) }
-      amount={ adults }
+      amount={ adultsNo }
       onChange={ onChange }
     />
 
@@ -24,7 +24,7 @@ const Persons = ({ adults, children, babies, t, onChange }: Props): JSX.Element
       name="children"
       title={ t('data.persons.child.plural', { ns: 'common' }) }
       description={ t('data.persons.child.description', { ns: 'common' }) }
-      amount={ children }
+      amount={ childrenNo }
       onChange={ onChange }
     />
 
@@ -32,7 +32,7 @@ const Persons = ({ adults, children, babies, t, onChange }: Props): JSX.Element
       name="babies"
       title={ t('data.persons.baby.plural', { ns: 'common' }) }
       description={ t('data.persons.baby.description', { ns: 'common' }) }
-      amount={ babies }
+      amount={ babiesNo }
       onChange={ onChange }
     />
   </Passengers>

package/Passengers/{utilities/getText.ts → utilities.ts}

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 
-const getText = (adults: number, children: number, babies: number, t: TFunction<'common'>): string => {
-  let final = [];
+export const getText = (adults: number, children: number, babies: number, t: TFunction<'common'>): string => {
+  const final = [];
 
   if (adults > 0) {
     final.push(`${ t('data.persons.adult.plural', { ns: 'common' }) }: ${ adults }`);
@@ -16,6 +16,4 @@ const getText = (adults: number, children: number, babies: number, t: TFunction<
   }
 
   return final.join(', ');
-};
-
-export default getText;
+};

package/Password/Password.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { TFunction } from 'i18next';
 import { UseFormRegister } from 'react-hook-form';
 import { AiFillEye, AiFillEyeInvisible } from 'react-icons/ai';
-import { validate } from '@autobusal/utilities';
+import { Validate } from '@autobusal/utilities';
 import { Container } from './styles';
 
 interface Props {
@@ -22,7 +22,7 @@ const Password = ({ name, tabIndex, validation, t, refs }: Props): JSX.Element =
   
   return (
     <Container>
-      <input type={ show ? 'text' : 'password' } tabIndex={ tabIndex } { ...refs(name, validate(validation ?? '', t)) } />
+      <input type={ show ? 'text' : 'password' } tabIndex={ tabIndex } { ...refs(name, Validate(validation ?? '', t)) } />
 
       { show
         ? <AiFillEye onClick={ toggle } />

package/Password/styles.ts

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const Container = styled.div`
   position: relative;

package/Policy/services.ts

@@ -8,9 +8,7 @@ export const GetPolicy = (id: number): UseQueryResult<PolicyData> => (
     queryFn: async () => (
       await apiClient
         .get('/api/routes/policy', {
-          params: {
-            id
-          }
+          params: { id }
         })
         .then(response => (
           response.data

package/Report/Send.tsx

@@ -1,9 +1,10 @@
 import { TFunction } from 'i18next';
 import { useForm } from 'react-hook-form';
-import { Button } from '@autobusal/common';
 import { RiCheckFill } from 'react-icons/ri';
-import { validate, display } from '@autobusal/utilities/form';
+import { Button } from '../index';
+import { Validate, Display } from '@autobusal/utilities';
 import { Success } from './styles';
+import { ReportForm } from './types';
 import { PostReport } from './services';
 
 interface Props {
@@ -11,10 +12,6 @@ interface Props {
   t: TFunction<'common'> 
 }
 
-interface ReportForm {
-  about: string
-}
-
 const Send = ({ type, t }: Props): JSX.Element => {
   const { register, handleSubmit, formState: { errors } } = useForm<ReportForm>();
 
@@ -38,9 +35,9 @@ const Send = ({ type, t }: Props): JSX.Element => {
       <div className="row">
         { t('report.explain', { ns: 'common' }) }
 
-        <textarea { ...register('about', validate('required|min_length:3', t)) } />
+        <textarea { ...register('about', Validate('required|min_length:3', t)) } />
 
-        { display(errors.about) }
+        { Display(errors.about) }
       </div>
 
       <Button

package/Report/services.ts

@@ -1,10 +1,11 @@
 import { UseMutationResult, useMutation } from '@tanstack/react-query';
 import { apiClient } from '@autobusal/providers';
+import { ReportForm } from './types';
 
-export const PostReport = (type: string): UseMutationResult<void> => (
+export const PostReport = (type: string): UseMutationResult<void, Error, ReportForm, unknown> => (
   useMutation({
     mutationKey: ['operator-locations-move', { type }],
-    mutationFn: async (data: any) => (
+    mutationFn: async (data: ReportForm) => (
       await apiClient
         .post('/api/reporting/send', {
           ...data,

package/Report/types.ts

@@ -0,0 +1,3 @@
+export interface ReportForm {
+  about: string
+}

package/RouteItem/styles.ts

@@ -1,6 +1,5 @@
 import styled, { css } from 'styled-components';
 import { Link } from 'react-router-dom';
-// import { Box } from '@layouts/styles';
 
 export const Container = styled.div`
   padding: 10px;

package/Seats/ChooseSeat.tsx

@@ -3,7 +3,7 @@ import { UseFormRegister } from 'react-hook-form';
 import { TFunction } from 'i18next';
 import { FaCheck } from 'react-icons/fa';
 import { MdEventSeat } from 'react-icons/md';
-import { validate } from '@autobusal/utilities';
+import { Validate } from '@autobusal/utilities';
 import Unavailable from './Unavailable';
 import Preview from './Preview';
 import { ButtonSeat } from './styles';
@@ -61,7 +61,7 @@ const ChooseSeat = ({ name, type, defaultValue, bus, picked, validation, t, refs
         />
       ) }
 
-      <input type="hidden" defaultValue={ selected } { ...refs(name, validate(validation, t)) } />
+      <input type="hidden" defaultValue={ selected } { ...refs(name, Validate(validation, t)) } />
     </div>
   );
 };

package/Seats/Preview.tsx

@@ -1,6 +1,6 @@
 import { TFunction } from 'i18next';
 import { MdEventSeat } from 'react-icons/md';
-import { Modal } from '@autobusal/common';
+import { Modal } from '../index';
 import { Seats, SeatsInner, ButtonOccupy } from './styles';
 import { BusData } from '@autobusal/providers/types/buses';
 

package/Table/Header/Header.tsx

@@ -1,8 +1,8 @@
 import { TFunction } from 'i18next';
 import Sort from './Sort';
+import { getUrl } from '../browseUrl';
 import { Container, Td, Column, Text } from './styles';
 import { ColumnData, SortingData } from '../types';
-import { getUrl } from '../browseUrl';
 
 interface Props {
   url: string

package/Table/Header/Sort.tsx

@@ -1,7 +1,7 @@
+import { BiSortDown, BiSortUp } from 'react-icons/bi';
+import { parseUrl } from '../browseUrl';
 import { LinkHeader } from './styles';
 import { ColumnData, SortingData } from '../types';
-import { parseUrl } from '../browseUrl';
-import { BiSortDown, BiSortUp } from 'react-icons/bi';
 
 interface Props {
   item: ColumnData

package/Table/Paginate.tsx

@@ -1,10 +1,10 @@
 import { TFunction } from 'i18next';
 import Pagination from '../Pagination/Pagination';
 import { ContainerPaginate } from './styles';
-import { PaginationData } from '@modules/Providers/types/pagination';
+import { PaginationData } from '@autobusal/providers/types/pagination';
 
 interface Props {
-  data?: PaginationData<any>
+  data?: PaginationData<unknown>
   colLength: number
   t: TFunction<'common'>
 }

package/Table/Row.tsx

@@ -1,13 +1,15 @@
 import { Td } from './styles';
 
 interface Props {
-  id: number
+  id?: number
   data: any[]
-  withoutView?: boolean
 }
 
-// @todo: de scos id-ul din toate row-urile
 const Row = ({ id, data }: Props): JSX.Element[] => {
+  if (id === undefined) {
+    return [];
+  }
+
   const columns = data.map((item, index) => (
     <Td key={ index }>
       { item }

package/Table/Rows/Loading.tsx

@@ -1,5 +1,5 @@
 import { TFunction } from 'i18next';
-import { Inline } from '@autobusal/common';
+import { Inline } from '../../Loading/Loading';
 import { ContainerLoading } from './styles';
 
 interface Props {

package/Table/Rows/Rows.tsx

@@ -3,13 +3,14 @@ import { NavigateFunction } from 'react-router-dom';
 import Loading from './Loading';
 import NotFound from './NotFound';
 import Actions from '../Actions/Actions';
-import { Tr } from './styles';
+import { Tbody, Tr } from './styles';
 
 interface Props {
   url: string
   urlWith?: string
   data?: JSX.Element[]
   loading: boolean
+  fetching: boolean
   colLength: number
   t: TFunction<'common'>
   actions?: string[]
@@ -17,7 +18,7 @@ interface Props {
   navigate: NavigateFunction
 }
 
-const Rows = ({ url, urlWith, data, loading, colLength, t, actions, handlers, navigate }: Props): JSX.Element => {
+const Rows = ({ url, urlWith, data, loading, fetching, colLength, t, actions, handlers, navigate }: Props): JSX.Element => {
   if (loading) {
     return <Loading length={ colLength } t={ t } />;
   }
@@ -53,9 +54,9 @@ const Rows = ({ url, urlWith, data, loading, colLength, t, actions, handlers, na
   ));
 
   return (
-    <tbody>
+    <Tbody $fetching={ fetching }>
       { columns }
-    </tbody>
+    </Tbody>
   );
 };
 

package/Table/Rows/styles.ts

@@ -13,6 +13,12 @@ export const ContainerNotFound = styled(ContainerLoading)`
   color: ${ props => props.theme.font.faded };
 `;
 
+export const Tbody = styled.tbody<{ $fetching: boolean }>`
+  ${ props => props.$fetching && css`
+    opacity: .5;
+  ` }
+`;
+
 export const Tr = styled.tr<{ $viewable?: boolean }>`
   ${ props => props.$viewable && css`
     cursor: pointer;

package/Table/Table.tsx

@@ -1,12 +1,12 @@
 import { TFunction } from 'i18next';
+import { useNavigate } from 'react-router-dom';
 import Top from './Top/Top';
 import Header from './Header/Header';
 import Rows from './Rows/Rows';
 import Paginate from './Paginate';
 import { Container, Content, Inner, ContainerTable } from './styles';
+import { PaginationData } from '@autobusal/providers/types/pagination';
 import { ColumnData, SortingData } from './types';
-import { useNavigate } from 'react-router-dom';
-import { PaginationData } from '@modules/Providers/types/pagination';
 
 interface Props {
   url: string
@@ -17,13 +17,14 @@ interface Props {
   sorting?: SortingData
   search?: string | null
   loading: boolean
+  fetching: boolean
   t: TFunction<'common'>
   actions?: string[]
   extra?: JSX.Element
   handlers?: any
 }
 
-const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, t, actions, extra, handlers }: Props): JSX.Element => {
+const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, fetching, t, actions, extra, handlers }: Props): JSX.Element => {
   const navigate = useNavigate();
 
   const colLength = columns.length + 1;
@@ -56,6 +57,7 @@ const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, t
               urlWith={ urlWith }
               data={ rows }
               loading={ loading }
+              fetching={ fetching }
               colLength={ colLength }
               t={ t }
               actions={ actions }

package/Table/browseUrl.ts

@@ -1,4 +1,4 @@
-import queryString from 'query-string';
+import queryString, { ParsedQuery } from 'query-string';
 
 export const parseUrl = (replace: any): string => {
   const query = queryString.parse(location.search);
@@ -16,6 +16,6 @@ export const parseUrl = (replace: any): string => {
   return `?${ url }`
 };
 
-export const getUrl = (): any => (
+export const getUrl = (): ParsedQuery<string> => (
   queryString.parse(location.search)
 );

package/Viewer/Actions.tsx

@@ -2,19 +2,19 @@ import { TFunction } from 'i18next';
 import { BiEditAlt, BiTrash, BiSend } from 'react-icons/bi';
 import { RiSave2Line, RiCheckFill, RiSearchLine } from 'react-icons/ri';
 import { BsPlusCircleFill } from 'react-icons/bs';
+import Button from '../Button/Button';
 import { ContainerActions } from './styles';
 import { ActionData } from './types';
-import { Button } from '@autobusal/common';
 
 interface Props {
   id: number
   available: string[]
-  loading?: boolean
+  pending?: boolean
   t: TFunction<'common'>
   onDelete?: () => void
 }
 
-const Actions = ({ id, available, loading, t, onDelete }: Props): JSX.Element => {
+const Actions = ({ id, available, pending, t, onDelete }: Props): JSX.Element => {
   const options: ActionData[] = [];
 
   const onAskDelete = (): void => {
@@ -90,7 +90,7 @@ const Actions = ({ id, available, loading, t, onDelete }: Props): JSX.Element =>
       text={
         <>{ item.icon } { item.label }</>
       }
-      loading={ loading }
+      loading={ pending }
       noMargin
       onClick={ item.handler }
     />

package/Viewer/Data.tsx

@@ -1,16 +1,16 @@
 import { TFunction } from 'i18next';
 import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import { Validate } from '@autobusal/utilities';
+import Password from '../Password/Password';
+import Calendar from '../Calendar/Calendar';
+import File from '../File/File';
 import CheckboxList from './Items/CheckboxList';
 import Linked from './Items/Linked';
 import TextareaHtml from './Items/TextareaHtml';
-import Password from '../Password/Password';
 import Dropdown from './Items/Dropdown';
 import DatePicker from './Items/DatePicker';
-import { ViewData } from './types';
-import Calendar from '../Calendar/Calendar';
-import File from '../File/File';
-import { validate } from '@autobusal/utilities';
 import { Display } from './styles';
+import { ViewData } from './types';
 
 interface Props {
   id: number
@@ -27,7 +27,7 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
 
   switch (item.type) {
     case 'checkbox':
-      return <input type="checkbox" value={ 1 } defaultChecked={ Number(item.value) == 1 } { ...refs(item.name, validate(String(item.rules), t)) } />;
+      return <input type="checkbox" value={ 1 } defaultChecked={ Number(item.value) == 1 } { ...refs(item.name, Validate(String(item.rules), t)) } />;
 
     case 'checkbox-list':
     case 'checkbox-list-all':
@@ -50,8 +50,8 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
 
     case 'date':
     case 'dob':
-    case 'picker':
-      const value = item.value !== null && item.value !== undefined ? String(item.value) : undefined;
+    case 'picker': {
+      const value = (item.value !== null && item.value !== undefined) ? String(item.value) : undefined;
 
       return (
         <Calendar
@@ -64,19 +64,20 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
           onUpdate={ onUpdate }
         />
       );
+    }
 
     case 'date-picker':
       return <DatePicker item={ item } t={ t } refs={ refs } onUpdate={ onUpdate } />;
 
     case 'email':
-      return <input type="email" defaultValue={ item.value ? String(item.value) : undefined } { ...refs(item.name, validate(String(item.rules), t)) } />;
+      return <input type="email" defaultValue={ item.value !== undefined ? String(item.value) : undefined } { ...refs(item.name, Validate(String(item.rules), t)) } />;
 
     case 'file':
     case 'files':
       return (
         <File
           name={ item.name }
-          value={ item.value ? String(item.value) : undefined }
+          value={ item.value !== undefined ? String(item.value) : undefined }
           validation={ item.rules }
           multiple={ item.type === 'files' }
           t={ t }
@@ -85,13 +86,13 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
       );
 
     case 'float':
-      return <input type="number" defaultValue={ item.value ? Number(item.value) : undefined } { ...refs(item.name, validate(String(item.rules), t)) } step="0.01" />;
+      return <input type="number" defaultValue={ item.value !== undefined ? Number(item.value) : undefined } { ...refs(item.name, Validate(String(item.rules), t)) } step="0.01" />;
 
     case 'link':
       return <Linked id={ id } value={ item.value } url={ item.url } />;
 
     case 'number':
-      return <input type="number" defaultValue={ item.value ? Number(item?.value) : undefined } { ...refs(item.name, validate(String(item.rules), t)) } />
+      return <input type="number" defaultValue={ item.value !== undefined ? Number(item?.value) : undefined } { ...refs(item.name, Validate(String(item.rules), t)) } />
 
     case 'password':
       return <Password name={ item.name } validation={ item.rules } t={ t } refs={ refs } />;
@@ -100,10 +101,10 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
       return <Dropdown item={ item } refs={ refs } t={ t } />;
 
     case 'text':
-      return <input type="text" defaultValue={ item.value ? String(item.value) : undefined } { ...refs(item.name, validate(String(item.rules), t)) } />;
+      return <input type="text" defaultValue={ item.value !== undefined ? String(item.value) : undefined } { ...refs(item.name, Validate(String(item.rules), t)) } />;
 
     case 'textarea':
-      return <textarea defaultValue={ item.value ? String(item.value) : undefined } { ...refs(item.name, validate(String(item.rules), t)) }></textarea>;
+      return <textarea defaultValue={ item.value !== undefined ? String(item.value) : undefined } { ...refs(item.name, Validate(String(item.rules), t)) }></textarea>;
 
     case 'textarea-html':
       return (

package/Viewer/Item.tsx

@@ -1,5 +1,5 @@
 import { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
-import { display } from '@autobusal/utilities';
+import { Display } from '@autobusal/utilities';
 import Data from './Data';
 import { Notice } from './styles';
 import { ViewData } from './types';
@@ -26,7 +26,7 @@ const Item = ({ id, data, refs, t, errors, onUpdate }: Props): JSX.Element => (
       onUpdate={ onUpdate }
     />
 
-    { data.name && display(errors[data.name]) }
+    { data.name && Display(errors[data.name]) }
 
     { data.notice && <Notice>* { data.notice }</Notice> }
   </div>

package/Viewer/Items/CheckboxList.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { TFunction } from 'i18next';
 import { UseFormRegister } from 'react-hook-form';
 import { ContainerCheckboxList, ListLabel } from './styles';
-import { DropdownData } from '@modules/Providers/types/other';
+import { DropdownData } from '@autobusal/providers/types/other';
 
 interface Props {
   name: string

package/Viewer/Items/DatePicker.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { TFunction } from 'i18next';
 import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
-import { Button } from '@autobusal/common';
 import { FaCalendar } from 'react-icons/fa';
+import { RiCloseCircleFill } from 'react-icons/ri';
+import Button from '../../Button/Button';
 import Calendar from '../../Calendar/Calendar';
 import { Picker, ContainerPicker, PickerClose } from './styles';
 import { ViewData } from '../types';
-import { RiCloseCircleFill } from 'react-icons/ri';
 
 interface Props {
   item: ViewData

package/Viewer/Items/Dropdown.tsx

@@ -1,6 +1,6 @@
 import { TFunction } from 'i18next';
 import { UseFormRegister } from 'react-hook-form';
-import { validate } from '@autobusal/utilities';
+import { Validate } from '@autobusal/utilities';
 import { ViewData } from '../types';
 
 interface Props {
@@ -18,19 +18,15 @@ const Dropdown = ({ item, refs, t }: Props): (JSX.Element | null) => {
     return null;
   }
 
-  const rules = validate(String(item.rules), t);
+  const rules = Validate(String(item.rules), t);
 
   // we listen for the change
-  if (item.onChange !== undefined) {
-    rules.onChange = (event: React.EventHandler<any>) => item.onChange(event.target.value);
+  if (item.onChange !== undefined && item.onChange !== null) {
+    rules.onChange = (event: any) => item.onChange!(event.target.value);
   }
 
   const values = item.values?.map((item, index) => (
-    <option
-      key={ index }
-      value={ item.id }
-      // disabled={ item.disabled === true }
-    >
+    <option key={ index } value={ item.id }>
       { item.name }
     </option>
   ));