tycho-components 0.0.3 → 0.0.5-SNAPSHOT

package/src/Participants/types/Participant.ts

@@ -1,43 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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/TextField/TextField.stories.tsx

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useForm } from 'react-hook-form';
-import TextField from './TextField';
-
-const meta = {
-  title: 'Components/TextField',
-  component: TextField,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    label: { control: 'text' },
-    attr: { control: 'text' },
-    createdForm: { control: false },
-    className: { control: 'text' },
-    title: { control: 'text' },
-    placeholder: { control: 'text' },
-    disabled: { control: 'boolean' },
-    multiline: { control: 'boolean' },
-    maxChars: { control: 'text' },
-    showEndAdornment: { control: 'boolean' },
-    onChange: { action: 'changed' },
-  },
-} satisfies Meta<typeof TextField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const template = (args: any) => {
-  const createdForm = useForm({
-    defaultValues: {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      [args.attr]: '',
-    },
-  });
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleChange = (attr: string, value: any) => {
-    console.log(`Attribute: ${attr}, Value: ${String(value)}`);
-  };
-
-  return (
-    <TextField {...args} createdForm={createdForm} onChange={handleChange} />
-  );
-};
-
-export const Default = template.bind({});
-// @ts-expect-error: Suppress error for args property assignment
-Default.args = {
-  attr: 'title',
-  label: 'Title',
-};

package/src/TextField/TextField.tsx

@@ -1,172 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
-import { InputAdornment, TextField as MuiTextField } from '@mui/material';
-import { ThemeProvider, useTheme } from '@mui/material/styles';
-import cx from 'classnames';
-import { useEffect, useState } from 'react';
-import { Controller, UseFormReturn } from 'react-hook-form';
-import { textFieldTheme } from './TextFieldTheme';
-import { setCurrentInput } from './inputRefManager';
-import './styles.scss';
-
-type Props = {
-  attr: string;
-  label: string;
-  createdForm: UseFormReturn<any, any, any>;
-  className?: string;
-  disabled?: boolean;
-  multiline?: boolean;
-  title?: string;
-  placeholder?: string;
-  maxChars?: number;
-  required?: boolean;
-  showEndAdornment?: boolean;
-  startAdornment?: React.ReactNode;
-  onChange?: (attr: string, value: any) => void;
-  onFocus?: (
-    e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>
-  ) => void;
-  onRemove?: () => void;
-  password?: boolean;
-  rows?: number;
-  hideInfoIcon?: boolean;
-};
-
-export default function TextField({
-  className,
-  attr,
-  label,
-  createdForm,
-  disabled,
-  title,
-  placeholder,
-  multiline,
-  maxChars,
-  required,
-  startAdornment,
-  showEndAdornment = true,
-  onChange,
-  onFocus,
-  onRemove,
-  password,
-  rows = 4,
-  hideInfoIcon,
-}: Props) {
-  const outerTheme = useTheme();
-  const [showPassword, setShowPassword] = useState(false);
-  const [active, setActive] = useState(false);
-  const [focus, setFocus] = useState(false);
-  const [mouseOver, setMouseOver] = useState(false);
-
-  const hasError = () => createdForm.formState.errors[attr];
-
-  const getClassNames = cx('ds-input-text', className, {
-    disabled: disabled,
-  });
-
-  useEffect(() => {
-    if (focus || mouseOver) {
-      setActive(true);
-    } else {
-      setActive(false);
-    }
-  }, [focus, mouseOver]);
-
-  return (
-    <div className={getClassNames}>
-      <Controller
-        name={attr}
-        control={createdForm.control}
-        render={({ field }) => (
-          <ThemeProvider theme={textFieldTheme(outerTheme)}>
-            <MuiTextField
-              {...field}
-              label={label}
-              value={field.value || ''}
-              type={
-                password === undefined
-                  ? 'text'
-                  : showPassword
-                    ? 'text'
-                    : 'password'
-              }
-              fullWidth
-              required={required}
-              disabled={disabled}
-              variant="filled"
-              placeholder={!focus ? placeholder : ''}
-              color="error"
-              multiline={multiline}
-              minRows={rows}
-              slotProps={{
-                inputLabel: {
-                  shrink: true,
-                },
-              }}
-              onFocus={(e) => {
-                setCurrentInput(e.target, (e: any) => {
-                  field.onChange(e);
-                  onChange && onChange(attr, e.target.value);
-                });
-                setFocus(true);
-                onFocus && onFocus(e);
-              }}
-              onBlur={() => setFocus(false)}
-              onMouseOver={() => setMouseOver(true)}
-              onMouseOut={() => setMouseOver(false)}
-              onChange={(event) => {
-                field.onChange(event);
-                onChange && onChange(attr, event.target.value);
-              }}
-              sx={{
-                borderColor: disabled
-                  ? '#BEBFC1'
-                  : hasError()
-                    ? '#C6080A'
-                    : active
-                      ? '#1C83F4'
-                      : '#BEBFC1',
-                '.MuiInputLabel-root': {
-                  color: disabled
-                    ? '#BEBFC1'
-                    : hasError()
-                      ? '#C6080A'
-                      : active
-                        ? '#1C83F4'
-                        : '#000000',
-                },
-                '.MuiInputBase-root': {
-                  paddingTop: multiline ? '12px' : '4px',
-                  height: multiline ? 'auto' : '48px',
-                },
-                '& .MuiInputBase-inputMultiline': {
-                  paddingTop: '24px',
-                  paddingBottom: '16px',
-                },
-                '& .MuiInputBase-input': {
-                  paddingTop: multiline ? 'none' : '16px',
-                },
-                '& .MuiInputAdornment-positionEnd': {
-                  paddingTop: multiline ? '12px' : '0px',
-                },
-              }}
-            />
-
-            {maxChars && (
-              <div className="character-counter">
-                {field.value?.length || 0}/{maxChars}
-              </div>
-            )}
-
-            {title && !hasError() && <div className="helper">{title}</div>}
-
-            {hasError() && (
-              <div className="helper error">
-                {String(createdForm.formState.errors[attr]?.message)}
-              </div>
-            )}
-          </ThemeProvider>
-        )}
-      />
-    </div>
-  );
-}

package/src/TextField/TextFieldTheme.ts

@@ -1,70 +0,0 @@
-import { createTheme, Theme } from '@mui/material/styles';
-
-export const textFieldTheme = (outerTheme: Theme) =>
-  createTheme({
-    ...outerTheme,
-    components: {
-      MuiTextField: {
-        styleOverrides: {
-          root: {
-            backgroundColor: 'white',
-            padding: '0px',
-            border: '1px solid #EAEAEB',
-            borderRadius: '4px',
-            '& .MuiInputBase-root': {
-              padding: '0px!important',
-              backgroundColor: 'white',
-              borderBottomLeftRadius: '4px',
-              borderBottomRightRadius: '4px',
-            },
-            '& .MuiFilledInput-root::before': {
-              content: 'none',
-            },
-            '& .MuiFilledInput-root::after': {
-              content: 'none',
-            },
-            '& .MuiInputLabel-root': {
-              paddingLeft: '4px',
-              color: '#000000',
-              textTransform: 'uppercase',
-              // helper-medium-1
-              fontSize: '12px',
-              fontWeight: '400',
-              lineHeight: '100%',
-              letterSpacing: '0.16px',
-              fontFamily: 'Work Sans, sans-serif',
-            },
-            '& .MuiInputAdornment-root': {
-              height: '100%',
-              maxHeight: '100%',
-            },
-            '& .MuiInputAdornment-positionStart': {
-              margin: '0px!important',
-              padding: '0px!important',
-            },
-            '& .MuiInputAdornment-positionEnd': {
-              margin: '0px 16px auto!important',
-            },
-            '& .MuiInputBase-input': {
-              padding: '0px 16px',
-              height: '48px',
-              // label-medium-1
-              fontSize: '16px',
-              fontWeight: '400',
-              lineHeight: '120%',
-              letterSpacing: '0px',
-              fontFamily: 'Work Sans, sans-serif',
-              '&::placeholder': {
-                color: '#707276',
-              },
-              '&:-webkit-autofill': {
-                WebkitBoxShadow: '0 0 0px 1000px transparent inset !important',
-                WebkitTextFillColor: '#000 !important',
-                transition: 'background-color 5000s ease-in-out 0s', // Prevents flashing
-              },
-            },
-          },
-        },
-      },
-    },
-  });

package/src/TextField/index.tsx

@@ -1,3 +0,0 @@
-import TextField from './TextField';
-
-export default TextField;

package/src/TextField/inputRefManager.ts

@@ -1,24 +0,0 @@
-let currentInput: HTMLInputElement | HTMLTextAreaElement | null = null;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let currentOnChange: ((e: any) => void) | null = null;
-
-export function removeCurrentInput() {
-  currentInput = null;
-}
-
-export function setCurrentInput(
-  input: HTMLInputElement | HTMLTextAreaElement | null,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onChange: (e: any) => void
-) {
-  currentInput = input;
-  currentOnChange = onChange;
-}
-
-export function getCurrentInput() {
-  return currentInput;
-}
-
-export function getCurrentOnChange() {
-  return currentOnChange;
-}

package/src/TextField/styles.scss

@@ -1,36 +0,0 @@
-@use '../new-styles/main' as *;
-
-.ds-input-text {
-  width: 100%;
-  position: relative;
-
-  > .helper {
-    @include helper-small-1;
-    margin-top: 4px;
-
-    &.error {
-      color: var(--text-error);
-    }
-  }
-
-  .icon-info {
-    color: var(--icon-tertiary);
-  }
-
-  &.disabled {
-    color: var(--text-on-disabled);
-    cursor: not-allowed;
-
-    input {
-      cursor: not-allowed;
-    }
-  }
-
-  .character-counter {
-    @include helper-small-1;
-    color: var(--text-placeholder);
-    position: absolute;
-    bottom: 12px;
-    left: 16px;
-  }
-}

package/src/configs/CommonContext.tsx

@@ -1,23 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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 commonLocalization() {
-  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

@@ -1,60 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,27 +0,0 @@
-export const CommonTexts = {
-  en: {
-    'button.confirm': 'Confirm',
-    'button.cancel': 'Cancel',
-    'button.remove': 'Remove',
-    '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',
-  },
-};