@autobusal/common 0.0.40 → 1.0.0

package/Viewer/Items/DatePicker.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
+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';
+
+interface Props {
+  item: ViewData
+  t: TFunction<'common'>
+  refs: UseFormRegister<any>
+  onUpdate: UseFormSetValue<any>
+}
+
+const DatePicker = ({ item, t, refs, onUpdate }: Props): JSX.Element => {
+  const value = item.value !== null && item.value !== undefined && item.value !== '' ? String(item.value) : undefined;
+
+  const [ choose, setChoose ] = useState<boolean>(value !== undefined);
+
+  if (!choose) {
+    return (
+      <Picker>
+        <Button
+          type="button"
+          subtype="secondary"
+          size="small"
+          text={
+            <>
+              <FaCalendar />
+              { t('table.date-picker', { ns: 'common' }) }
+            </>
+          }
+          onClick={ () => setChoose(true) }
+          noMargin
+        />
+      </Picker>
+    );
+  }
+
+  const name = item.name ?? '';
+
+  const onCancel = (): void => {
+    setChoose(false);
+
+    onUpdate(name, undefined);
+  };
+
+  return (
+    <ContainerPicker>
+      <Calendar
+        type="date"
+        name={ name }
+        defaultValue={ value }
+        t={ t }
+        validation={ item.rules }
+        refs={ refs }
+        onUpdate={ onUpdate }
+      />
+
+      <PickerClose type="button" onClick={ onCancel }>
+        <RiCloseCircleFill />
+      </PickerClose>
+    </ContainerPicker>
+  );
+};
+
+export default DatePicker;

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 {
@@ -14,23 +14,25 @@ const Dropdown = ({ item, refs, t }: Props): (JSX.Element | null) => {
     return null;
   }
 
+  if (typeof item.value !== 'string' && typeof item.value !== 'number' && typeof item.value !== 'undefined') {
+    return null;
+  }
+
+  const rules = Validate(String(item.rules), t);
+
+  // we listen for the change
+  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>
   ));
-
-//   // 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)) }>
+    <select defaultValue={ item?.value } { ...refs(item.name, rules) }>
       { values }
     </select>
   );

package/Viewer/Items/Linked.tsx

@@ -0,0 +1,27 @@
+import { ContainerLink, LinkMore } from './styles';
+
+interface Props {
+  id: number
+  value?: JSX.Element | string | number
+  url?: string
+}
+
+const Linked = ({ id, value, url }: Props): JSX.Element => {
+  if (id === 0) {
+    return (
+      <div className="row-data">
+        <ContainerLink>-</ContainerLink>
+      </div>
+    );
+  }
+
+  return (
+    <div className="row-data">
+      <ContainerLink>
+        <LinkMore to={ url ?? '' }>{ value }</LinkMore>
+      </ContainerLink>
+    </div>
+  );
+};
+
+export default Linked;

package/Viewer/Items/TextareaHtml.tsx

@@ -1,29 +1,56 @@
-// 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';
+import { useRef } from 'react';
+import { TFunction } from 'i18next';
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import { Editor } from '@tinymce/tinymce-react';
+import { Editor as TinyMceEditor } from 'tinymce';
+import { Validate } from '@autobusal/utilities/form';
+import { Textarea } from './styles';
 
-// function TextareaHtml({ data, onUpdate, refs }) {
-//   const [ value, setValue ] = useState('');
+interface Props {
+  name: string
+  value?: string
+  validation?: string
+  t: TFunction<'common'>
+  refs: UseFormRegister<any>
+  onUpdate: UseFormSetValue<any>
+}
 
-//   useEffect(() => {
-//     let html = data.value ?? '';
-//     const content = htmlToDraft(html);
+const TextareaHtml = ({ name, value, validation, t, refs, onUpdate }: Props): JSX.Element => {
+  const editorRef = useRef<TinyMceEditor | null>(null);
 
-//     const contentHtml = ContentState.createFromBlockArray(content);
-//     setValue(EditorState.createWithContent(contentHtml));
-//   }, []);
+  const onChange = (content: string): void => {
+    onUpdate(name, content);
+  };
 
-//   const onEditorChange = (state) => {
-//     setValue(state);
-//     onUpdate(data.name, draftToHtml(convertToRaw(value.getCurrentContent())));
-//   };
+  return (
+    <div className="row-data">
+      <Editor
+        onInit={ (_event, editor) => editorRef.current = editor }
+        onEditorChange={ onChange }
+        initialValue={ value ?? '' }
+        tinymceScriptSrc="/tinymce/tinymce.min.js"
+        init={{
+          height: 350,
+          menubar: false,
+          license_key: 'gpl',
+          plugins: [
+            'autolink', 'link', 'image', 'media', 'table', 'help', 'lists', 'charmap', 'advlist'
+          ],
+          toolbar: (
+            'bold italic backcolor | alignleft aligncenter ' +
+            'alignright alignjustify | bullist numlist outdent indent | ' +
+            'image media table | ' +
+            'removeformat | help'
+          ),
+          content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 14px; }',
+          promotion: false,
+          highlight_on_focus: false
+        }}
+      />
 
-//   return (
-//     <>
-//       <Editor editorState={ value } onEditorStateChange={ onEditorChange } />
-//       <textarea defaultValue={ data.value } { ...refs(data.name, data.validation) } style={{ display: 'none' }}></textarea>
-//     </>
-//   );
-// }
+      <Textarea defaultValue={ value ?? '' } { ...refs(name, Validate(String(validation), t)) }></Textarea>
+    </div>
+  );
+};
+
+export default TextareaHtml;

package/Viewer/Items/styles.ts

@@ -0,0 +1,73 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+export const ContainerCheckboxList = styled.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 3px;
+  min-height: 38px;
+`;
+
+export const ListLabel = styled.label`
+  display: flex;
+  gap: 2px;
+  padding: 2px 6px 2px 4px;
+  font-size: ${ props => props.theme.size.xs };
+  background: ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const ContainerLink = styled.div`
+  display: flex;
+  align-items: center;
+  min-height: 38px;
+`;
+
+export const LinkMore = styled(Link)`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 10px;
+  font-weight: 700;
+  font-size: calc(${ props => props.theme.size.xs } + 1px);
+  background: ${ props => props.theme.background.neutral };
+  border-radius: 100px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    text-decoration: none;
+    box-shadow: 0 4px 15px ${ props => props.theme.background.neutral };
+  }
+`;
+
+export const Textarea = styled.textarea`
+  display: none;
+`;
+
+export const Picker = styled.div`
+  display: flex;
+  height: 38px;
+  align-items: center;
+`;
+
+export const ContainerPicker = styled.div`
+  position: relative;
+`;
+
+export const PickerClose = styled.button`
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  width: 38px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: ${ props => props.theme.size.xl };
+  background: ${ props => props.theme.inputs.background };
+  border-left: 1px solid ${ props => props.theme.inputs.border };
+  border-top-right-radius: ${ props => props.theme.borderRadius };
+  border-bottom-right-radius: ${ props => props.theme.borderRadius };
+`;

package/Viewer/Viewer.tsx

@@ -6,24 +6,23 @@ import { Container } from './styles';
 import { ViewData } from './types';
 
 interface Props {
+  id: number
+  type?: 'simple'
   data: ViewData[]
-  loading?: boolean
+  pending?: boolean
   actions?: string[]
   t: TFunction<'common'>
-  onSave: (data: any) => void
+  onSave?: (data: any) => void
+  onDelete?: (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 Viewer = ({ id, type, data, pending, actions, t, onSave, onDelete }: Props): JSX.Element => {
+  const { register, handleSubmit, formState: { errors }, setValue } = useForm<any>();
 
   const items = data.map((item, index) => (
     <Item
       key={ index }
+      id={ id }
       data={ item }
       refs={ register }
       t={ t }
@@ -33,14 +32,20 @@ const Viewer = ({ data, loading, actions, t, onSave }: Props): JSX.Element => {
   ));
 
   const onSubmit = (data: any): void => {
-    onSave(data);
+    if (onSave !== undefined) {
+      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>
-//   );
+
+  if (type === 'simple') {
+    return (
+      <div className="box">
+        <Container>
+          { items }
+        </Container>
+      </div>
+    );
+  }
 
   return (
     <div className="box">
@@ -51,9 +56,11 @@ const Viewer = ({ data, loading, actions, t, onSave }: Props): JSX.Element => {
 
         { (actions !== undefined && actions.length > 0) && (
           <Actions
+            id={ id }
             available={ actions }
-            loading={ loading }
+            pending={ pending }
             t={ t }
+            onDelete={ onDelete }
           />
         ) }
       </form>

package/Viewer/styles.ts

@@ -1,7 +1,13 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-  @media (min-width: 480px) {
+  & > div.row-checkbox {
+    flex-direction: row-reverse;
+    justify-content: left;
+    height: 20px;
+  }
+
+  @media (min-width: 540px) {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
@@ -31,8 +37,22 @@ export const Container = styled.div`
 export const ContainerActions = styled.div`
   display: flex;
   justify-content: center;
+  gap: 10px;
   margin-top: 25px;
   padding: 15px 10px;
   background: ${ props => props.theme.background.neutral };
   border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const Display = styled.div`
+  min-height: 38px;
+  padding: 8px 10px;
+  background: ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const Notice = styled.div`
+  font-size: ${ props => props.theme.size.xxs };
+  color: ${ props => props.theme.font.info };
+  font-weight: 400;
 `;

package/Viewer/types.ts

@@ -1,19 +1,22 @@
+import { DropdownData } from '@autobusal/providers/types/other';
+
 export interface ViewData {
   label?: string
   name?: string
-  type?: 'text' | 'select' | 'dob' | 'textarea' | 'file'
-  value?: string | number
-  values?: ValuesData[]
+  type?: 'text' | 'select' | 'date' | 'dob' | 'picker' | 'textarea' | 'textarea-html' | 'file' | 'files' | 'email' | 'password' | 'display' | 'component' | 'checkbox' | 'checkbox-list' | 'checkbox-list-all' | 'link' | 'number' | 'float' | 'date-picker'
+  value?: string | number | JSX.Element
+  values?: DropdownData[]
+  selected?: any[]
   rules?: string
-}
-
-export interface ValuesData {
-  id: number
-  name: string
+  notice?: string
+  url?: string
+  onChange?: (id: 'string' | 'number') => void
 }
 
 export interface ActionData {
   label: string
   icon: any
   type?: 'submit'
+  subtype?: 'delete'
+  handler?: () => void
 }

package/index.ts

@@ -1,37 +1,56 @@
+import ApiDetails from './ApiDetails/ApiDetails';
 import Autocomplete from './Autocomplete/Autocomplete';
-import BackTo from './BackTo';
+import Avatar from './Avatar';
+import BackTo from './Back/BackTo';
+import BackWithTitle from './Back/BackWithTitle';
 import BlogItem from './BlogItem/BlogItem';
-import BrowseCompanyItem from './BrowseCompanyItem/BrowseCompanyItem';
+import Button from './Button/Button';
 import Calendar from './Calendar/Calendar';
-import CookieNotification from './CookieNotification/CookieNotification';
 import ChangeLanguage from './ChangeLanguage/ChangeLanguage';
 import ChooseSeat from './Seats/ChooseSeat';
-import { Button } from './Button/Button';
+import CompanyItem from './CompanyItem/CompanyItem';
+import ContactInfo from './ContactInfo/ContactInfo';
+import CookieNotification from './CookieNotification/CookieNotification';
+import File from './File/File';
 import Gender from './Gender';
-import { General, Inline, Paragraph } from './Loading/Loading';
-import Modal from './Modal/Modal';
+import { General, Inline, Box, BoxMiddle, GeneralFull } from './Loading/Loading';
+import IpLogs from './IpLogs/IpLogs';
 import Meta from './Meta';
+import Modal from './Modal/Modal';
 import Pagination from './Pagination/Pagination';
+import Paragraph from './Loading/Paragraph';
 import Passengers from './Passengers/Passengers';
 import Password from './Password/Password';
 import Policy from './Policy/Policy';
+import Report from './Report/Report';
 import RouteFeature from './RouteFeature/RouteFeature';
 import RouteItem from './RouteItem/RouteItem';
+import Row from './Table/Row';
+import Table from './Table/Table';
 import Viewer from './Viewer/Viewer';
 
 export {
+  ApiDetails,
   Autocomplete,
+  Avatar,
   BackTo,
+  BackWithTitle,
   BlogItem,
-  BrowseCompanyItem,
+  Box,
+  BoxMiddle,
   Button,
   Calendar,
-  CookieNotification,
   ChangeLanguage,
   ChooseSeat,
+  CompanyItem,
+  ContactInfo,
+  CookieNotification,
+  File,
   Gender,
   General,
+  GeneralFull,
   Inline,
+  IpLogs,
   Meta,
   Modal,
   Pagination,
@@ -39,7 +58,10 @@ export {
   Passengers,
   Password,
   Policy,
+  Report,
   RouteFeature,
   RouteItem,
+  Row,
+  Table,
   Viewer
 };

package/package.json

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

package/Pagination/types.ts

@@ -1,12 +0,0 @@
-export interface PaginationData<T> {
-  current_page: number
-  last_page: number
-  data: T[]
-  links: LinkData[]
-}
-
-export interface LinkData {
-  url: string | null
-  label: string
-  active: boolean
-}