tycho-components 0.0.1

package/src/Participants/types/Participant.ts

@@ -0,0 +1,43 @@
+import FormField from '@/AppEditable/FormField';
+
+type Participant = {
+  order: number;
+  code: string;
+  name: string;
+  color?: string;
+  role?: string;
+  ses?: string;
+  education?: string;
+  gender?: string;
+  custom?: string;
+  corpus?: string;
+  language?: string;
+  age?: string;
+  group?: string;
+};
+
+export type ParticipantCreateRequest = {
+  code: string;
+  name: string;
+};
+
+export const EMPTY_PARTICIPANT = {
+  order: 1,
+  code: '',
+  name: '',
+};
+
+export const PARTICIPANT_FIELDS: FormField[] = [
+  { name: 'order', type: 'text', required: true },
+  { name: 'code', type: 'text', required: true },
+  { name: 'name', type: 'text', required: false },
+  { name: 'separator', type: 'text', required: false },
+  {
+    name: 'color',
+    type: 'color',
+    required: false,
+    tooltip: 'field.color.tooltip',
+  },
+];
+
+export default Participant;

package/src/Participants/types/ParticipantService.ts

@@ -0,0 +1,18 @@
+import AppEditableField from '@/AppEditable/AppEditableField';
+import api from '@/configs/api';
+import Participant, { ParticipantCreateRequest } from './Participant';
+
+function add(uid: string, request: ParticipantCreateRequest) {
+  return api.post<Participant>(`/participant/${uid}`, request);
+}
+
+function update(field: AppEditableField) {
+  return api.patch('/participant/update', field);
+}
+
+function remove(document: string, code: string) {
+  return api.delete(`/participant/${document}/${code}`);
+}
+
+const ParticipantService = { add, update, remove };
+export default ParticipantService;

package/src/configs/CommonContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, useReducer } from 'react';
+import reducer from './store/reducer';
+import store from './store/store';
+import { StoreAction, UserStore } from './store/types';
+
+type ContextType = {
+  state: UserStore;
+  dispatch: React.Dispatch<StoreAction>;
+};
+
+const CommonContext = createContext<ContextType>({} as ContextType);
+
+export function CommonProvider({ children }: { children: React.ReactNode }) {
+  const [state, dispatch] = useReducer(reducer, store);
+
+  return (
+    <CommonContext.Provider value={{ state, dispatch }}>
+      {children}
+    </CommonContext.Provider>
+  );
+}
+
+export default CommonContext;

package/src/configs/CookieStorage.ts

@@ -0,0 +1,36 @@
+import Cookies from 'js-cookie';
+
+const REDIRECT_URI = 'redirect_uri_tycho';
+const JWT_TOKEN = 'jwt_token_tycho';
+const expireDays = 7;
+
+const setJwtToken = (jwtToken: string) => {
+  Cookies.set(JWT_TOKEN, jwtToken, { expires: expireDays });
+};
+
+const getJwtToken = () => {
+  const cookie = Cookies.get(JWT_TOKEN);
+  return cookie === 'undefined' ? '' : cookie;
+};
+
+const removeJwtToken = () => {
+  return Cookies.remove(JWT_TOKEN);
+};
+
+function setRedirectUri(uri: string) {
+  Cookies.set(REDIRECT_URI, uri);
+}
+
+function removeRedirectUri() {
+  Cookies.remove(REDIRECT_URI);
+}
+
+const CookieStorage = {
+  setJwtToken,
+  getJwtToken,
+  removeJwtToken,
+  setRedirectUri,
+  removeRedirectUri,
+};
+
+export default CookieStorage;

package/src/configs/Localization.ts

@@ -0,0 +1,28 @@
+import i18n from 'i18next';
+import languageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+import { ParticipantsTexts } from './localization/ParticipantsTexts';
+import { CommonTexts } from './localization/CommonTexts';
+
+export default function configLocalization() {
+  i18n
+    .use(initReactI18next)
+    .use(languageDetector)
+    .init({
+      resources: {
+        en: {
+          common: CommonTexts.en,
+          participants: ParticipantsTexts.en,
+        },
+        'pt-BR': {
+          common: CommonTexts['pt-BR'],
+          participants: ParticipantsTexts['pt-BR'],
+        },
+      },
+      fallbackLng: 'en',
+      defaultNS: 'message',
+      interpolation: {
+        escapeValue: false,
+      },
+    });
+}

package/src/configs/MessageUtils.ts

@@ -0,0 +1,60 @@
+import { message } from '@/configs/store/actions';
+import { StoreAction } from '@/configs/store/types';
+import { TFunction } from 'i18next';
+
+type MessageDispatcher = {
+  key: string;
+  ns?: string;
+  dispatch: React.Dispatch<StoreAction>;
+  t: TFunction;
+};
+
+type ErrorDispatcher = {
+  err: any;
+  dispatch: React.Dispatch<StoreAction>;
+  t: TFunction;
+};
+
+// TODO: improve
+export const dispatchError = ({ err, dispatch, t }: ErrorDispatcher) => {
+  if (!err.response) {
+    dispatch(message({ value: t(err), type: 'error' }));
+    return;
+  }
+
+  if (err.response.status && err.response.status === 403) {
+    dispatch(
+      message({
+        value: t('error.access.authorization'),
+        type: 'error',
+      })
+    );
+    return;
+  }
+
+  let errorKey = 'generic.error.message';
+  if (err.response.data && err.response.data.description)
+    errorKey = err.response.data.description;
+
+  if (err.response.data.errors && err.response.data.errors.length > 0)
+    errorKey = err.response.data.errors[0].description;
+
+  dispatch(message({ value: t(`message:${errorKey}`), type: 'error' }));
+};
+
+export const dispatchMessage = ({
+  key,
+  ns,
+  dispatch,
+  t,
+}: MessageDispatcher) => {
+  const entry = ns ? `${ns}:${key}` : `message:${key}`;
+  dispatch(message({ value: t(entry), type: 'success' }));
+};
+
+const MessageUtils = {
+  dispatchError,
+  dispatchMessage,
+};
+
+export default MessageUtils;

package/src/configs/Storage.ts

@@ -0,0 +1,21 @@
+const ACTIVE_CORPUS = '@Tycho:corpus';
+
+function getActiveCorpus() {
+  return localStorage.getItem(ACTIVE_CORPUS);
+}
+
+function setActiveCorpus(corpus: string) {
+  localStorage.setItem(ACTIVE_CORPUS, corpus);
+}
+
+function removeActiveCorpus() {
+  localStorage.removeItem(ACTIVE_CORPUS);
+}
+
+const Storage = {
+  getActiveCorpus,
+  setActiveCorpus,
+  removeActiveCorpus,
+};
+
+export default Storage;

package/src/configs/api.ts

@@ -0,0 +1,49 @@
+import axios, { AxiosError } from 'axios';
+import CookieStorage from './CookieStorage';
+
+const api = axios.create({
+  headers: {
+    'Cache-Control': 'no-cache, no-store, must-revalidate',
+    Pragma: 'no-cache',
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+  },
+
+  baseURL: import.meta.env.VITE_APP_URL_API,
+});
+
+api.interceptors.response.use(
+  (response) => response,
+  async (error: AxiosError) => {
+    if (error.response?.status === 401) {
+      CookieStorage.removeJwtToken();
+      sessionStorage.clear();
+      localStorage.clear();
+      window.location.replace(import.meta.env.VITE_APP_AUTH_URL as string);
+    } else if (error.response?.status === 403) {
+      window.location.href = `${
+        import.meta.env.VITE_APP_PUBLIC_URL
+      }/unauthorized`;
+    } else if (error.status === null) {
+      console.log(JSON.stringify(error));
+    }
+
+    return Promise.reject(error);
+  }
+);
+
+api.interceptors.request.use((config) => {
+  if (!config?.headers) {
+    throw new Error('no header available');
+  }
+
+  const token = CookieStorage.getJwtToken();
+  if (!token) return config;
+
+  // eslint-disable-next-line no-param-reassign
+  config.headers.Authorization = `Bearer ${token}`;
+
+  return config;
+});
+
+export default api;

package/src/configs/localization/CommonTexts.ts

@@ -0,0 +1,26 @@
+export const CommonTexts = {
+  en: {
+    'button.confirm': 'Confirm',
+    'button.cancel': 'Cancel',
+    'pagination.label.showing': 'Showing',
+    'pagination.label.results': 'results per page',
+    'pagination.label.total': 'Total',
+    'generic.placeholder': 'Type here',
+    'generic.placeholder.select': 'Select one here',
+    'validation.required': 'Required field.',
+    'placeholder.check': 'click to choose',
+    'placeholder.input': 'click to add',
+  },
+  'pt-BR': {
+    'button.confirm': 'Confirmar',
+    'button.cancel': 'Cancelar',
+    'pagination.label.showing': 'Exibindo',
+    'pagination.label.results': 'resultados por página',
+    'pagination.label.total': 'Total',
+    'generic.placeholder': 'Digite aqui',
+    'generic.placeholder.select': 'Selecione um aqui',
+    'validation.required': 'Campo obrigatório.',
+    'placeholder.check': 'clique para selecionar',
+    'placeholder.input': 'clique para adicionar',
+  },
+};

package/src/configs/localization/ParticipantsTexts.ts

@@ -0,0 +1,40 @@
+export const ParticipantsTexts = {
+  en: {
+    'label.title': 'Participants',
+    'button.label.add': 'Add participant',
+    'participant.field.order': 'Order',
+    'participant.field.code': 'Code',
+    'participant.field.name': 'Name',
+    'participant.field.color': 'Color',
+    'participant.field.separator': 'Separator',
+    'participant.field.color.tooltip':
+      'A color for transcription visual identifier',
+    'modal.remove.title': 'Remove participant',
+    'modal.remove.description':
+      'Are you sure you want to delete this participant? This action is irreversible, but the sentences are not deleted.',
+    'modal.remove.participant':
+      'You can choose a participant to transfer sentences related to ',
+    'modal.add.title': 'Add new participant',
+    'modal.input.code': 'ID',
+    'modal.input.name': 'Name',
+  },
+  'pt-BR': {
+    'label.title': 'Participantes',
+    'button.label.add': 'Adicionar participante',
+    'participant.field.order': 'Ordem',
+    'participant.field.code': 'Código',
+    'participant.field.name': 'Nome',
+    'participant.field.color': 'Cor',
+    'participant.field.separator': 'Separador',
+    'participant.field.color.tooltip':
+      'Cor para identificação visual da sentença na transcrição',
+    'modal.remove.title': 'Remover participante',
+    'modal.remove.description':
+      'Você tem certeza que deseja remover este participante? Esta ação é irreversível, porém as sentenças não serão excluídas.',
+    'modal.remove.participant':
+      'Você pode escolher um participante para transferir frases relacionadas a ',
+    'modal.add.title': 'Adicionar novo participante',
+    'modal.input.code': 'ID',
+    'modal.input.name': 'Nome',
+  },
+};

package/src/configs/store/actions.ts

@@ -0,0 +1,12 @@
+import ToastMessage from '@/AppToast/ToastMessage';
+import { StoreAction, types } from './types';
+
+export const message = (data: ToastMessage): StoreAction => ({
+  type: types.MESSAGE,
+  payload: data,
+});
+
+export const toastLoading = (data: boolean): StoreAction => ({
+  type: types.TOAST_LOADING,
+  payload: data,
+});

package/src/configs/store/reducer.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import { types, UserStore } from './types';
+
+function reducer(state: UserStore, action: any): UserStore {
+  switch (action.type) {
+    case types.MESSAGE:
+      return {
+        ...state,
+        message: action.payload,
+      };
+    case types.TOAST_LOADING:
+      return {
+        ...state,
+        toastLoading: action.payload,
+      };
+
+    default:
+      return state;
+  }
+}
+
+export default reducer;

package/src/configs/store/store.ts

@@ -0,0 +1,9 @@
+import { EMPTY_TOAST } from '@/AppToast/ToastMessage';
+import { UserStore } from './types';
+
+const store: UserStore = {
+  message: EMPTY_TOAST,
+  toastLoading: false,
+};
+
+export default store;

package/src/configs/store/types.ts

@@ -0,0 +1,16 @@
+import ToastMessage from '@/AppToast/ToastMessage';
+
+export type UserStore = {
+  message: ToastMessage;
+  toastLoading: boolean;
+};
+
+export type StoreAction = {
+  type: string;
+  payload?: ToastMessage | boolean;
+};
+
+export const types = {
+  MESSAGE: 'MESSAGE',
+  TOAST_LOADING: 'TOAST_LOADING',
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+export { default as AppEditable } from './AppEditable';
+export { default as AppToast } from './AppToast';
+export { default as AppColorpicker } from './AppColorpicker';
+export { default as Participants } from './Participants';

package/src/react-app-env.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png';
+declare module '*.svg';
+declare module '*.jpeg';
+declare module '*.jpg';
+declare module 'react-easy-edit';

package/src/styles/_variables.scss

@@ -0,0 +1,67 @@
+:root {
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-large: 700;
+
+  --font-size-xxsmall: 10px;
+  --font-size-xsmall: 12px;
+  --font-size-small: 14px;
+  --font-size-body: 16px;
+  --font-size-button: 16px;
+  --font-size-medium: 18px;
+  --font-size-regular: 20px;
+  --font-size-subtitle: 24px;
+  --font-size-large: 32px;
+  --font-size-xlarge: 40px;
+  --font-size-xxlarge: 48px;
+  --font-size-xxxlarge: 56px;
+  --font-size-jumbo: 96px;
+
+  --spacing-xxsmall: calc(var(--spacing-xsmall) / 2);
+  --spacing-xsmall: 8px;
+  --spacing-small: calc(var(--spacing-xsmall) * 2);
+  --spacing-medium: 24px;
+  --spacing-large: 32px;
+  --spacing-xlarge: 40px;
+  --spacing-xxlarge: 48px;
+  --spacing-xxxlarge: 64px;
+  --spacing-jumbo: 96px;
+
+  --color-primary: #185abd;
+  --color-primary-alternative: #7c7c80;
+  --color-secondary: #f3f2f1;
+  --color-complementary: #14cc80;
+  --color-complementary-light: #dafbed;
+  --color-complementary-dark: #031d12;
+  --color-background: #f9f9f9;
+  --color-surface: #ffffff;
+  --color-error: #e25c5a;
+  --color-warning: #ffb40d;
+  --color-confirmed: #14cc80;
+  --color-disabled: #c8c6c4;
+  --color-button-hover: #e1e0de;
+  --color-dark: #000000;
+  --color-highlight: #bca3c2;
+
+  --color-warning-20: rgba(255, 180, 13, 0.2);
+  --color-confirmed-20: rgba(20, 204, 128, 0.2);
+  --color-error-20: rgba(239, 99, 97, 0.2);
+
+  --opacity-black-62: rgba(18, 18, 18, 0.62);
+  --opacity-black-53: rgba(18, 18, 18, 0.53);
+  --opacity-black-32: rgba(18, 18, 18, 0.32);
+  --opacity-black-15: rgba(18, 18, 18, 0.15);
+  --opacity-black-08: rgba(18, 18, 18, 0.08);
+
+  --opacity-white-62: rgba(255, 255, 255, 0.62);
+  --opacity-white-53: rgba(255, 255, 255, 0.53);
+  --opacity-white-32: rgba(255, 255, 255, 0.32);
+  --opacity-white-15: rgba(255, 255, 255, 0.15);
+  --opacity-white-08: rgba(255, 255, 255, 0.08);
+
+  --shadow: 0 1px 12px rgba(0, 0, 0, 0.1);
+
+  --border-default: 1px solid var(--color-disabled);
+  --border-radius: var(--spacing-xsmall);
+  --border-radius-btn: calc(var(--spacing-xsmall) / 2);
+}