tycho-components 0.0.4 → 0.0.5-SNAPSHOT-1

package/src/AppModal/AppModal.tsx

@@ -1,93 +0,0 @@
-import { Box, Fade, Modal } from '@mui/material';
-import cx from 'classnames';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button, Icon } from 'tycho-storybook';
-import './style.scss';
-
-type Props = {
-  children: React.ReactNode;
-  title: string;
-  close: () => void;
-  confirm?: () => void;
-  cancel?: () => void;
-  subtitle?: string;
-  className?: string;
-  disableConfirm?: boolean;
-  hideFooter?: boolean;
-  disableCancel?: boolean;
-  disableClose?: boolean;
-  confirmLabel?: string;
-  closeLabel?: string;
-  onEntered?: () => void;
-};
-
-export default function AppModal({
-  children,
-  title,
-  subtitle,
-  className,
-  close,
-  confirm,
-  disableConfirm,
-  hideFooter,
-  disableClose,
-  disableCancel,
-  confirmLabel,
-  closeLabel,
-  cancel,
-  onEntered,
-}: Props) {
-  const { t } = useTranslation('common');
-
-  const getClassNames = cx('modal-container', className);
-
-  return (
-    <Modal open>
-      <Fade in onEntered={() => onEntered && onEntered()}>
-        <Box className={getClassNames} sx={style}>
-          <div className="header">
-            <div className="titles">
-              <span className="title">{title}</span>
-              {subtitle && <span className="subtitle">{subtitle}</span>}
-            </div>
-            {!disableClose && (
-              <Icon name="close" onClick={close} className="pointer" />
-            )}
-          </div>
-          <div className="body">{children}</div>
-          {!hideFooter ? (
-            <div className="footer">
-              {!disableCancel && (
-                <Button
-                  onClick={cancel || close}
-                  text={closeLabel || t('button.cancel')}
-                  color="danger"
-                />
-              )}
-              {confirm && (
-                <Button
-                  onClick={confirm}
-                  disabled={disableConfirm}
-                  text={confirmLabel || t('button.confirm')}
-                />
-              )}
-            </div>
-          ) : null}
-        </Box>
-      </Fade>
-    </Modal>
-  );
-}
-
-const style = {
-  position: 'absolute',
-  top: '40%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: '50%',
-  maxWidth: '1080px',
-  borderRadius: 'var(--radius-200)',
-  boxShadow: 24,
-  bgcolor: 'var(--background-default)',
-};

package/src/AppModal/AppModalConfirm.tsx

@@ -1,62 +0,0 @@
-import { Box, Modal } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { Button, Icon } from 'tycho-storybook';
-import './style.scss';
-
-type Props = {
-  title: string;
-  subtitle: string;
-  onClose: () => void;
-  onConfirm: () => void;
-  closeLabel?: string;
-  confirmLabel?: string;
-};
-
-export default function AppModalConfirm({
-  title,
-  subtitle,
-  onClose,
-  onConfirm,
-  closeLabel,
-  confirmLabel,
-}: Props) {
-  const { t } = useTranslation('header');
-
-  return (
-    <Modal open>
-      <Box className="modal-container modal-remove" sx={style}>
-        <div className="body">
-          <Icon name="warning" size="large" filled />
-          <div className="texts">
-            <span className="title">{title}</span>
-            <span className="subtitle">{subtitle}</span>
-          </div>
-        </div>
-
-        <div className="footer">
-          <Button
-            onClick={onClose}
-            text={closeLabel || t('modal.button.cancel')}
-            mode="tonal"
-          />
-          <Button
-            onClick={onConfirm}
-            text={confirmLabel || t('modal.button.confirm')}
-          />
-        </div>
-      </Box>
-    </Modal>
-  );
-}
-
-const style = {
-  position: 'absolute',
-  top: '40%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: '30%',
-  maxWidth: '580px',
-  borderRadius: 'var(--radius-200)',
-  boxShadow: 24,
-  bgcolor: 'var(--background-default)',
-};

package/src/AppModal/AppModalRemove.tsx

@@ -1,51 +0,0 @@
-import { Box, Modal } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { Button, Icon } from 'tycho-storybook';
-import './style.scss';
-
-type Props = {
-  title: string;
-  subtitle: string;
-  onClose: () => void;
-  onConfirm: () => void;
-};
-
-export default function AppModalRemove({
-  title,
-  subtitle,
-  onClose,
-  onConfirm,
-}: Props) {
-  const { t } = useTranslation('common');
-
-  return (
-    <Modal open>
-      <Box className="modal-container modal-remove" sx={style}>
-        <div className="body">
-          <Icon name="warning" size="large" filled />
-          <div className="texts">
-            <span className="title">{title}</span>
-            <span className="subtitle">{subtitle}</span>
-          </div>
-        </div>
-
-        <div className="footer">
-          <Button onClick={onClose} text={t('button.cancel')} mode="tonal" />
-          <Button onClick={onConfirm} text={t('button.confirm')} />
-        </div>
-      </Box>
-    </Modal>
-  );
-}
-
-const style = {
-  position: 'absolute',
-  top: '40%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  width: '30%',
-  maxWidth: '580px',
-  borderRadius: 'var(--radius-200)',
-  boxShadow: 24,
-  bgcolor: 'var(--background-default)',
-};

package/src/AppToast/AppToast.tsx

@@ -1,94 +0,0 @@
-import CommonContext from '../configs/CommonContext';
-import { message } from '../configs/store/actions';
-import { useContext, useEffect } from 'react';
-import ReactLoading from 'react-loading';
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import { EMPTY_TOAST } from './ToastMessage';
-
-export default function AppToast() {
-  const { dispatch, state } = useContext(CommonContext);
-
-  const handleClose = () => {
-    toast.dismiss();
-    dispatch(message(EMPTY_TOAST));
-  };
-
-  const handleClipboard = () => {
-    navigator.clipboard.writeText(state.message.value);
-  };
-
-  const getLoading = () => (
-    <div className="d-flex">
-      <ReactLoading
-        type="spinningBubbles"
-        color="blue"
-        height={24}
-        width={24}
-      />
-      <span className="ms-3">Loading...</span>
-    </div>
-  );
-
-  const attachCloseToEscape = () => {
-    const closeOnEscape = (e: any) => {
-      if (e.keyCode === 27) handleClose();
-    };
-
-    window.addEventListener('keydown', closeOnEscape);
-    return () => window.removeEventListener('keydown', closeOnEscape);
-  };
-
-  useEffect(() => {
-    attachCloseToEscape();
-  }, []);
-
-  useEffect(() => {
-    if (state.toastLoading) {
-      toast(getLoading(), {
-        position: 'top-right',
-        autoClose: false,
-        hideProgressBar: false,
-        closeOnClick: false,
-        pauseOnHover: true,
-        draggable: false,
-        progress: undefined,
-        theme: 'light',
-      });
-    } else {
-      toast.dismiss();
-    }
-  }, [state.toastLoading]);
-
-  useEffect(() => {
-    if (state.message && state.message.value !== '') {
-      switch (state.message.type) {
-        case 'error':
-          toast.error(state.message.value, {
-            onClose: () => handleClose(),
-            onClick: () => handleClipboard(),
-          });
-          break;
-        case 'warning':
-          toast.warning(state.message.value, {
-            onClose: () => handleClose(),
-          });
-          break;
-        case 'success':
-          toast.success(state.message.value, {
-            onClose: () => handleClose(),
-          });
-          break;
-        default:
-          toast(state.message.value, {
-            onClose: () => handleClose(),
-          });
-          break;
-      }
-    } else {
-      dispatch(message(EMPTY_TOAST));
-    }
-  }, [state.message]);
-
-  return <ToastContainer closeOnClick />;
-}

package/src/AppToast/ToastMessage.ts

@@ -1,9 +0,0 @@
-export default interface ToastMessage {
-  value: string;
-  type: string;
-}
-
-export const EMPTY_TOAST = {
-  value: '',
-  type: '',
-};

package/src/Dummy/Dummy.stories.tsx

@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Dummy, { DummyModes } from './Dummy';
-
-const meta = {
-  title: 'Components/Dummy',
-  component: Dummy,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    mode: { control: 'select', options: DummyModes },
-  },
-} satisfies Meta<typeof Dummy>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {},
-};

package/src/Dummy/Dummy.tsx

@@ -1,16 +0,0 @@
-import cx from 'classnames';
-import './styles.scss';
-
-export const DummyModes = ['white', 'blue'] as const;
-type DummyModes = (typeof DummyModes)[number];
-
-export type Props = {
-  className?: string;
-  mode?: DummyModes;
-};
-
-export default function Dummy({ className, mode = 'blue' }: Props) {
-  const getClassNames = cx('ds-dummy', className, mode);
-
-  return <div className={getClassNames}>aaaa</div>;
-}

package/src/Participants/ParticipantCreate/ParticipantCreate.tsx

@@ -1,83 +0,0 @@
-import { yupResolver } from '@hookform/resolvers/yup';
-import { TFunction } from 'i18next';
-import { useContext } from 'react';
-import { useForm } from 'react-hook-form';
-import { useTranslation } from 'react-i18next';
-import * as yup from 'yup';
-import AppModal from '../../AppModal';
-import CommonContext from '../../configs/CommonContext';
-import { toastLoading } from '../../configs/store/actions';
-import Participant, { ParticipantCreateRequest } from '../types/Participant';
-import ParticipantService from '../types/ParticipantService';
-import './style.scss';
-import { TextField } from 'tycho-storybook';
-
-type Props = {
-  document: string;
-  order: number;
-  onClose: () => void;
-  onCreate: (p: Participant) => void;
-};
-
-export default function ParticipantCreate({
-  document,
-  order,
-  onClose,
-  onCreate,
-}: Props) {
-  const { t } = useTranslation('participants');
-  const { dispatch, state } = useContext(CommonContext);
-
-  const createdForm = useForm<ParticipantCreateRequest>({
-    resolver: yupResolver(getFormSchema(t)),
-    mode: 'onChange',
-  });
-
-  const handleAdd = () => {
-    if (state.toastLoading) return;
-    dispatch(toastLoading(true));
-    ParticipantService.add(document, createdForm.getValues())
-      .then((r) => {
-        onCreate(r.data);
-      })
-      .finally(() => {
-        dispatch(toastLoading(false));
-      });
-  };
-
-  return (
-    <AppModal
-      title={t('modal.add.title')}
-      className="modal-participant"
-      close={onClose}
-      confirm={handleAdd}
-      disableConfirm={!createdForm.formState.isValid}
-    >
-      <div className="participant-container">
-        <TextField
-          label={t('modal.input.code')}
-          attr="code"
-          createdForm={createdForm}
-          showEndAdornment={false}
-          placeholder={t('common:generic.placeholder')}
-          required
-        />
-        <TextField
-          label={t('modal.input.name')}
-          attr="name"
-          createdForm={createdForm}
-          showEndAdornment={false}
-          placeholder={t('common:generic.placeholder')}
-        />
-      </div>
-    </AppModal>
-  );
-}
-
-const getFormSchema = (
-  t: TFunction
-): yup.ObjectSchema<ParticipantCreateRequest> =>
-  yup.object().shape({
-    code: yup.string().required(t('common:validation.required')),
-    name: yup.string().required(t('common:validation.required')),
-  });

package/src/Participants/ParticipantRemove/ParticipantRemove.tsx

@@ -1,51 +0,0 @@
-import { useContext } from 'react';
-import { useTranslation } from 'react-i18next';
-import AppModalRemove from '../../AppModal/AppModalRemove';
-import CommonContext from '../../configs/CommonContext';
-import { toastLoading } from '../../configs/store/actions';
-import Participant from '../types/Participant';
-import ParticipantService from '../types/ParticipantService';
-import './style.scss';
-
-type Props = {
-  participant: Participant;
-  participants: Participant[];
-  document: string;
-  onClose: () => void;
-  onChange: (p: Participant[]) => void;
-};
-
-export default function ParticipantRemove({
-  participant,
-  participants,
-  document,
-  onClose,
-  onChange,
-}: Props) {
-  const { t } = useTranslation('participants');
-  const { dispatch, state } = useContext(CommonContext);
-
-  const handleRemove = () => {
-    if (state.toastLoading || !participant) return;
-    dispatch(toastLoading(true));
-    ParticipantService.remove(document, participant.code)
-      .then(() => {
-        const list =
-          participants?.filter((p) => p.code !== participant.code) || [];
-
-        onChange(list);
-      })
-      .finally(() => {
-        dispatch(toastLoading(false));
-      });
-  };
-
-  return (
-    <AppModalRemove
-      title={t('modal.remove.title')}
-      subtitle={t('modal.remove.description')}
-      onClose={onClose}
-      onConfirm={handleRemove}
-    />
-  );
-}

package/src/Participants/Participants.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Participants from './Participants';
-import type Participant from './types/Participant';
-import { action } from '@storybook/addon-actions';
-
-const meta: Meta<typeof Participants> = {
-  title: 'Components/Participants',
-  component: Participants,
-  tags: ['autodocs'],
-  argTypes: {
-    document: { control: 'text' },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Participants>;
-
-// Mock data for stories
-const mockParticipants: Participant[] = [
-  {
-    code: 'P001',
-    name: 'Alice Johnson',
-    age: '29',
-    gender: 'F',
-    role: 'Interviewer',
-    order: 1,
-  },
-  {
-    code: 'P002',
-    name: 'Bob Smith',
-    age: '35',
-    gender: 'M',
-    role: 'Interviewee',
-    order: 2,
-  },
-];
-
-export const Primary: Story = {
-  args: {
-    document: 'doc-001',
-    participants: mockParticipants,
-    onChange: action('Participants list changed'),
-  },
-};

package/src/Participants/Participants.tsx

@@ -1,145 +0,0 @@
-import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useContext, useEffect, useState } from 'react';
-import { Button, Form } from 'react-bootstrap';
-import { useTranslation } from 'react-i18next';
-import AppEditable from '../AppEditable';
-import AppEditableField from '../AppEditable/AppEditableField';
-import CommonContext from '../configs/CommonContext';
-import { dispatchMessage } from '../configs/MessageUtils';
-import ParticipantCreate from './ParticipantCreate';
-import ParticipantRemove from './ParticipantRemove';
-import './style.scss';
-import Participant, { PARTICIPANT_FIELDS } from './types/Participant';
-import ParticipantService from './types/ParticipantService';
-
-type Props = {
-  document: string;
-  onChange: (p: Participant[]) => void;
-  participants: Participant[];
-};
-
-export default function Participants({
-  document,
-  participants,
-  onChange,
-}: Props) {
-  const { t } = useTranslation('participants');
-  const { dispatch } = useContext(CommonContext);
-
-  const [participant, setParticipant] = useState<Participant>();
-  const [openRemove, setOpenRemove] = useState(false);
-  const [openCreate, setOpenCreate] = useState(false);
-
-  const handleSave = (field: AppEditableField) => {
-    if (!field.ref) return;
-
-    ParticipantService.update(field)
-      .then(() => {
-        dispatchMessage({ key: 'update.success', dispatch, t });
-        const { name, value } = field;
-
-        const thisParticipants = participants;
-        const idx = participants.findIndex((p) => p.code === field.ref);
-
-        // updates the participant
-        const thisParticipant = { ...thisParticipants[idx], [name]: value };
-        thisParticipants[idx] = { ...thisParticipant };
-        setParticipant(thisParticipant);
-
-        onChange(thisParticipants);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
-
-  useEffect(() => {
-    if (participants.length > 0) setParticipant(participants[0]);
-  }, []);
-
-  return (
-    <div className="participants-container">
-      <div className="header">
-        <h3>{t('label.title')}</h3>
-        <div className="actions">
-          <button
-            type="button"
-            className="action"
-            onClick={() => setOpenCreate(true)}
-          >
-            <FontAwesomeIcon icon={faPlus} title={t('button.label.add')} />
-            <span className="ms-2">{t('button.label.add')}</span>
-          </button>
-        </div>
-      </div>
-      <div className="body">
-        {participant && (
-          <>
-            <Form.Select
-              onChange={(e) =>
-                setParticipant(participants[Number(e.target.value)])
-              }
-            >
-              {participants.map((el, idx) => (
-                <option value={idx} key={idx}>
-                  {`${el.code} - ${el.name}`}
-                </option>
-              ))}
-            </Form.Select>
-            <AppEditable
-              translation="participants"
-              group="participant"
-              save={handleSave}
-              item={{ ...participant, uid: document }}
-              fields={PARTICIPANT_FIELDS}
-              className="fields"
-              reference="code"
-            />
-            <div className="footer">
-              <Button
-                variant="danger"
-                onClick={() => {
-                  setParticipant(participant);
-                  setOpenRemove(true);
-                }}
-              >
-                <FontAwesomeIcon icon={faTrash} />
-                <span className="ms-1">{t('common:button.remove')}</span>
-              </Button>
-            </div>
-          </>
-        )}
-      </div>
-      {participant && openRemove && (
-        <ParticipantRemove
-          document={document}
-          onChange={(list) => {
-            onChange(list);
-            setParticipant(
-              participants.length > 0 ? participants[0] : undefined
-            );
-            setOpenRemove(false);
-          }}
-          participant={participant}
-          participants={participants}
-          onClose={() => setOpenRemove(false)}
-        />
-      )}
-
-      {openCreate && (
-        <ParticipantCreate
-          document={document}
-          order={participants.length || 1}
-          onCreate={(p) => {
-            const thisParticipants = participants ? [...participants, p] : [p];
-            onChange(thisParticipants);
-            setParticipant(p);
-            setOpenCreate(false);
-          }}
-          onClose={() => setOpenCreate(false)}
-        />
-      )}
-    </div>
-  );
-}