@autobusal/common 0.0.39 → 0.0.40

package/Autocomplete/Autocomplete.tsx

@@ -27,7 +27,7 @@ const Autocomplete = ({ name, defaultValue, data, validation, t, refs, onUpdate
   const [ selected, setSelected ] = useState<number>(-1);
   const [ value, setValue ] = useState<string>(defaultValue);
 
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement>(null);
 
   useOutside(ref, () => setShow(false));
 

package/Calendar/Calendar.tsx

@@ -21,7 +21,7 @@ const Calendar = ({ type, name, defaultValue, t, validation, refs, onUpdate }: P
   const [ prepared, setPrepared ] = useState<string>(defaultValue ?? prepareDate(new Date()));
   const [ selected, setSelected ] = useState<string>(prepared);
 
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement>(null);
 
   useOutside(ref, () => setShow(false));
 

package/File/File.tsx

@@ -0,0 +1,84 @@
+import { TFunction } from 'i18next';
+import { useState, useRef } from 'react';
+import { UseFormRegister } from 'react-hook-form';
+import { HiOutlineCloudUpload, HiCheck } from 'react-icons/hi';
+import { Modal } from '@autobusal/common';
+import { validate } from '@autobusal/utilities';
+import { Button } from '../Button/Button';
+import { Container, ImgView, ImgPreview } from './styles';
+
+interface Props {
+  name: string
+  value?: string
+  validation?: string
+  t: TFunction<'comon'>
+  refs: UseFormRegister<any>
+}
+
+const File = ({ name, value, validation, t, refs }: Props): JSX.Element => {
+  const [ uploaded, setUploaded ] = useState<boolean>(false);
+  const [ preview, setPreview ] = useState<boolean>(false);
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const rules = validate(String(validation), t);
+
+  const onChange = (): void => {
+    setUploaded(true);
+  };
+
+  // we listen for the change
+  rules.onChange = onChange;
+
+  const { ref, ...rest } = refs(name, rules);
+
+  const onClick = (): void => {
+    if (inputRef.current !== null) {
+      inputRef.current.click();
+    }
+  };
+
+  return (
+    <>
+      <Container>
+        <input
+          { ...rest }
+          type="file"
+          name={ name }
+          style={{ display: 'none' }}
+          ref={ (e) => {
+            ref(e);
+            inputRef.current = e;
+          } }
+        />
+
+        <Button
+          type="button"
+          size="small"
+          text={
+            uploaded
+              ? <><HiCheck /> { t('file.done', { ns: 'common' }) }</>
+              : <><HiOutlineCloudUpload /> { t('file.ready', { ns: 'common' }) }</>
+          }
+          noMargin
+          onClick={ onClick }
+        />
+
+        { value && <ImgView src={ value } onClick={ () => setPreview(true) } /> }
+      </Container>
+
+      { preview && (
+        <Modal
+          width={ 500 }
+          title={ t('file.preview', { ns: 'common' }) }
+          content={ (
+            <ImgPreview src={ value } />
+          ) }
+          onClose={ () => setPreview(false) }
+        />
+      ) }
+    </>
+  );
+};
+
+export default File;

package/File/styles.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  height: 38px;
+`;
+
+export const ImgView = styled.img`
+  display: block;
+  height: 38px;
+  padding: 4px;
+  border: 1px solid ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+  cursor: pointer;
+`;
+
+export const ImgPreview = styled.img`
+  display: block;
+  width: 100%;
+`;

package/Passengers/Passengers.tsx

@@ -24,7 +24,7 @@ const Passengers = ({ defaultAdults, defaultChildren, defaultBabies, t, refs, on
     getText(adults, children, babies, t)
   );
 
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const text = getText(adults, children, babies, t);

package/Password/Password.tsx

@@ -7,11 +7,12 @@ import { Container } from './styles';
 
 interface Props {
   name: string
+  tabIndex?: number
   t: TFunction<'common'>
   refs: UseFormRegister<any>
 }
 
-const Password = ({ name, refs, t }: Props): JSX.Element => {
+const Password = ({ name, tabIndex, t, refs }: Props): JSX.Element => {
   const [ show, setShow ] = useState<boolean>(false);
 
   const toggle = (): void => {
@@ -20,7 +21,7 @@ const Password = ({ name, refs, t }: Props): JSX.Element => {
   
   return (
     <Container>
-      <input type={ show ? 'text' : 'password' } { ...refs(name, validate('required|min_length:6|max_length:20', t)) } />
+      <input type={ show ? 'text' : 'password' } tabIndex={ tabIndex } { ...refs(name, validate('required|min_length:6|max_length:20', t)) } />
 
       { show
         ? <AiFillEye onClick={ toggle } />

package/Viewer/Actions.tsx

@@ -0,0 +1,98 @@
+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 { ContainerActions } from './styles';
+import { ActionData } from './types';
+import { Button } from '@autobusal/common';
+
+interface Props {
+  available: string[]
+  loading?: boolean
+  t: TFunction<'common'>
+}
+
+const Actions = ({ available, loading, t }: Props): JSX.Element => {
+
+// function Actions({ id, actions, status, t, deleter }) {
+  let options: ActionData[] = [];
+
+//   const askDeletion = () => {
+//     if (window.confirm(t('general:table.confirm'))) {
+//       deleter();
+//     }
+//   };
+
+//   if (actions.includes('add')) {
+//     options.push({
+//       label: t('general:table.action.add'),
+//       icon: <BsPlusCircleFill />
+//     });
+//   }
+
+//   if (actions.includes('save')) {
+//     options.push({
+//       label: t('general:table.action.save'),
+//       icon: <RiSave2Line />
+//     });
+//   }
+
+//   if (actions.includes('send')) {
+//     options.push({
+//       label: t('general:table.action.send'),
+//       icon: <BiSend />
+//     });
+//   }
+
+  if (available.includes('update')) {
+    options.push({
+      label: t('table.actions.update', { ns: 'common' }),
+      icon: <BiEditAlt />,
+      type: 'submit'
+    });
+  }
+
+//   if (actions.includes('approve')) {
+//     options.push({
+//       label: t('general:table.action.approve'),
+//       icon: <RiCheckFill />
+//     });
+//   }
+
+//   if (actions.includes('delete') && id > 0) {
+//     options.push({
+//       label: t('general:table.action.delete'),
+//       icon: <BiTrash />,
+//       type: 'button',
+//       className: "delete",
+//       handler: askDeletion
+//     });
+//   }
+
+//   if (actions.includes('search')) {
+//     options.push({
+//       label: t('general:table.action.search'),
+//       icon: <RiSearchLine />
+//     });
+//   }
+
+  const items = options.map((item, index) => (
+    <Button
+      key={ index }
+      type={ item.type === 'submit' ? 'submit' : 'button' }
+      text={
+        <>{ item.icon } { item.label }</>
+      }
+      loading={ loading }
+      noMargin
+    />
+  ));
+
+  return (
+    <ContainerActions>
+      { items }
+    </ContainerActions>
+  );
+};
+
+export default Actions;

package/Viewer/Data.tsx

@@ -0,0 +1,59 @@
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import Dropdown from './Items/Dropdown';
+import { ViewData } from './types';
+import Calendar from '../Calendar/Calendar';
+import File from '../File/File';
+import { validate } from '@autobusal/utilities';
+import { TFunction } from 'i18next';
+
+interface Props {
+  item: ViewData
+  refs: UseFormRegister<any>
+  t: TFunction<'common'>
+  onUpdate: UseFormSetValue<any>
+}
+
+const Data = ({ item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
+  if (item.name === undefined) {
+    return null;
+  }
+
+  switch (item.type) {
+    case 'dob':
+      return (
+        <Calendar
+          type={ item.type }
+          name={ item.name }
+          defaultValue={ item.value !== null ? String(item.value) : undefined }
+          t={ t }
+          validation={ item.rules }
+          refs={ refs }
+          onUpdate={ onUpdate }
+        />
+      );
+
+    case 'file':
+      return (
+        <File
+          name={ item.name }
+          value={ item.value !== undefined ? String(item.value) : undefined }
+          validation={ item.rules }
+          t={ t }
+          refs={ refs }
+        />
+      );
+
+    case 'select':
+      return <Dropdown item={ item } refs={ refs } t={ t } />;
+
+    case 'text':
+      return <input type="text" defaultValue={ item.value } { ...refs(item.name, validate(String(item.rules), t)) } />;
+
+    case 'textarea':
+      return <textarea defaultValue={ item.value } { ...refs(item.name, validate(String(item.rules), t)) }></textarea>;
+  }
+
+  return null;
+};
+
+export default Data;

package/Viewer/Item.tsx

@@ -0,0 +1,106 @@
+import { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import { display } from '@autobusal/utilities';
+import Data from './Data';
+import { ViewData } from './types';
+import { TFunction } from 'i18next';
+
+interface Props {
+  data: ViewData
+  refs: UseFormRegister<any>
+  t: TFunction<'common'>
+  errors: FieldErrors<any>
+  onUpdate: UseFormSetValue<any>
+}
+
+const Item = ({ data, refs, t, errors, onUpdate }: Props): JSX.Element => (
+  <div className={ `row ${ data.label === undefined && 'spacer' }` }>
+    { data.label }
+
+    <Data
+      item={ data }
+      refs={ refs }
+      t={ t }
+      onUpdate={ onUpdate }
+    />
+
+    { data.name && display(errors[data.name]) }
+  </div>
+);
+
+export default Item;
+
+// function Input({ data, refs, onUpdate, errors, t }) {
+//   let input;
+  
+//   switch (data.type) {
+//     case 'display':
+//       input = <div className="display">{ data.value }</div>;
+//     break;
+
+//     case 'email':
+//       input = <input type="email" defaultValue={ data.value } { ...refs(data.name, data.validation) } />;
+//     break;
+
+//     case 'number':
+//       input = <input type="number" defaultValue={ data.value } { ...refs(data.name, data.validation) } />
+//     break;
+
+//     case 'float':
+//       input = <input type="number" defaultValue={ data.value } { ...refs(data.name, data.validation) } step="0.01" />
+//     break;
+
+//     case 'checkbox':
+//       input = <input type="checkbox" value="1" defaultChecked={ data.value == 1 } { ...refs(data.name, data.validation) } />;
+//     break;
+
+//     case 'checkbox-list':
+//       input = <CheckboxList name={ data.name } values={ data.values } selected={ data.selected } hasAll={ data?.hasAll ?? true } refs={ refs } t={ t } />;
+//     break;
+
+//     case 'textarea-html':
+//       input = <TextareaHtml data={ data } onUpdate={ onUpdate } refs={ refs } />;
+//     break;
+
+//     case 'password':
+//       input = <Password refs={ refs(data.name, data.validation) } />
+//     break;
+
+//     case 'picker':
+//     
+//     case 'date':
+//       input = (
+//         <div className="display">
+//           <Calendar type={ data.type } name={ data.name } value={ data.value } refs={ refs } validation={ data.validation } t={ t } onUpdate={ onUpdate } />
+//         </div>
+//       );
+//     break;
+
+//     case 'extra':
+//       input = data.value;
+//     break;
+//   }
+
+//   let extra;
+
+//   switch (data.type) {
+//     case 'password':
+//       extra = ' item-password';
+//     break;
+
+//     case 'textarea-html':
+//       extra = ' full';
+//     break;
+//   }
+
+//   if (data.extra) {
+//     extra = ' ' + data.extra;
+//   }
+  
+//   return (
+//     <div className={ `item${ extra ?? '' }` }>
+//       { input }
+      
+//       { data.notice ? <div className="notice">* { data.notice }</div> : null }
+//     </div>
+//   );
+// }

package/Viewer/Items/CheckboxList.tsx

@@ -0,0 +1,30 @@
+// function CheckboxList({ name, values, selected, hasAll, refs, t }) {
+//   const [ all, setAll ] = useState(selected?.includes('all') ?? true);
+
+//   const checkboxes = values.map((item, index) => {
+//     if (all) {
+//       return null;
+//     }
+
+//     return (
+//       <label key={ index }>
+//         <input type="checkbox" value={ item.value } defaultChecked={ selected?.includes(item.value + '') } { ...refs(name + '[' + (index + 1) + ']') } /> { item.name }
+//       </label>
+//     );
+//   });
+  
+//   const onAll = () => {
+//     setAll(all ? false : true);
+//   };
+
+//   return (
+//     <div className="display list">
+//       { hasAll ? <label key={ -1 }><input type="checkbox" value="all" defaultChecked={ all } onClick={ () => onAll() } { ...refs(name + '[' + 0 + ']') } /> { t('general:table.checkbox.all') }</label> : null }
+
+//       { checkboxes }
+
+//       <div className="clear"></div>
+//     </div>
+//   );
+// }
+// }

package/Viewer/Items/Dropdown.tsx

@@ -0,0 +1,39 @@
+import { TFunction } from 'i18next';
+import { UseFormRegister } from 'react-hook-form';
+import { validate } from '@autobusal/utilities';
+import { ViewData } from '../types';
+
+interface Props {
+  item: ViewData
+  refs: UseFormRegister<any>
+  t: TFunction<'common'>
+}
+
+const Dropdown = ({ item, refs, t }: Props): (JSX.Element | null) => {
+  if (item.name === undefined) {
+    return null;
+  }
+
+  const values = item.values?.map((item, index) => (
+    <option
+      key={ index }
+      value={ item.id }
+      // disabled={ item.disabled === true }
+    >
+      { item.name }
+    </option>
+  ));
+
+//   // add a custom onchange listener
+//   if (item.onChange) {
+//     item.validation.onChange = (e) => data.onChange(e.target.value);
+//   }
+  
+  return (
+    <select defaultValue={ item.value } { ...refs(item.name, validate(String(item.rules), t)) }>
+      { values }
+    </select>
+  );
+};
+
+export default Dropdown;

package/Viewer/Items/TextareaHtml.tsx

@@ -0,0 +1,29 @@
+// import { EditorState, ContentState, convertToRaw } from 'draft-js';
+// import { Editor } from 'react-draft-wysiwyg';
+// import htmlToDraft from 'html-to-draftjs';
+// import draftToHtml from 'draftjs-to-html';
+// import '../../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+
+// function TextareaHtml({ data, onUpdate, refs }) {
+//   const [ value, setValue ] = useState('');
+
+//   useEffect(() => {
+//     let html = data.value ?? '';
+//     const content = htmlToDraft(html);
+
+//     const contentHtml = ContentState.createFromBlockArray(content);
+//     setValue(EditorState.createWithContent(contentHtml));
+//   }, []);
+
+//   const onEditorChange = (state) => {
+//     setValue(state);
+//     onUpdate(data.name, draftToHtml(convertToRaw(value.getCurrentContent())));
+//   };
+
+//   return (
+//     <>
+//       <Editor editorState={ value } onEditorStateChange={ onEditorChange } />
+//       <textarea defaultValue={ data.value } { ...refs(data.name, data.validation) } style={{ display: 'none' }}></textarea>
+//     </>
+//   );
+// }

package/Viewer/Viewer.tsx

@@ -0,0 +1,64 @@
+import { useForm } from 'react-hook-form';
+import { TFunction } from 'i18next';
+import Item from './Item';
+import Actions from './Actions';
+import { Container } from './styles';
+import { ViewData } from './types';
+
+interface Props {
+  data: ViewData[]
+  loading?: boolean
+  actions?: string[]
+  t: TFunction<'common'>
+  onSave: (data: any) => void
+}
+
+const Viewer = ({ data, loading, actions, t, onSave }: Props): JSX.Element => {
+  const { register, handleSubmit, formState: { errors }, setValue, reset } = useForm<any>();
+
+  // reset on id change
+//   useEffect(() => {
+//     reset();
+//   }, [id]);
+
+  const items = data.map((item, index) => (
+    <Item
+      key={ index }
+      data={ item }
+      refs={ register }
+      t={ t }
+      errors={ errors }
+      onUpdate={ setValue }
+    />
+  ));
+
+  const onSubmit = (data: any): void => {
+    onSave(data);
+  };
+  
+//   return (
+//     <div className="box">
+//       { actions.length > 0 ? <form className="form form-viewer" onSubmit={ handleSubmit(onSubmit) }>{ display }</form> : <div className="form form-viewer">{ display }</div> }
+//     </div>
+//   );
+
+  return (
+    <div className="box">
+      <form onSubmit={ handleSubmit(onSubmit) }>
+        <Container>
+          { items }
+        </Container>
+
+        { (actions !== undefined && actions.length > 0) && (
+          <Actions
+            available={ actions }
+            loading={ loading }
+            t={ t }
+          />
+        ) }
+      </form>
+    </div>
+  );
+};
+
+export default Viewer;

package/Viewer/styles.ts

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  @media (min-width: 480px) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+
+    & > div.row {
+      margin-bottom: 0;
+    }
+
+    & > div {
+      flex-basis: calc(50% - 10px);
+    }
+
+    & > div.spacer {
+      flex-basis: 100%;
+      height: 1px;
+      background: ${ props => props.theme.background.neutral };
+    }
+  }
+
+  @media (min-width: 1300px) {
+    & > div {
+      flex-basis: calc(33.33333% - 14px);
+    }
+  }
+`;
+
+export const ContainerActions = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 25px;
+  padding: 15px 10px;
+  background: ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+`;

package/Viewer/types.ts

@@ -0,0 +1,19 @@
+export interface ViewData {
+  label?: string
+  name?: string
+  type?: 'text' | 'select' | 'dob' | 'textarea' | 'file'
+  value?: string | number
+  values?: ValuesData[]
+  rules?: string
+}
+
+export interface ValuesData {
+  id: number
+  name: string
+}
+
+export interface ActionData {
+  label: string
+  icon: any
+  type?: 'submit'
+}

package/index.ts

@@ -17,6 +17,7 @@ import Password from './Password/Password';
 import Policy from './Policy/Policy';
 import RouteFeature from './RouteFeature/RouteFeature';
 import RouteItem from './RouteItem/RouteItem';
+import Viewer from './Viewer/Viewer';
 
 export {
   Autocomplete,
@@ -39,5 +40,6 @@ export {
   Password,
   Policy,
   RouteFeature,
-  RouteItem
+  RouteItem,
+  Viewer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "type": "module",
   "main": "index.ts"
 }