tycho-components 0.0.1

package/src/AppModal/style.scss

@@ -0,0 +1,65 @@
+@use 'tycho-storybook/src/styles/main' as *;
+
+.modal-container {
+  .header {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--border-subtle-1);
+    padding: var(--spacing-300) var(--spacing-200) var(--spacing-150);
+
+    .titles {
+      .title {
+        @include label-large-2;
+        display: block;
+      }
+
+      .subtitle {
+        display: block;
+        @include body-medium-1;
+        color: var(--text-secondary);
+      }
+    }
+
+    .ds-icon {
+      margin-left: auto;
+      margin-bottom: auto;
+    }
+  }
+
+  .body {
+    padding: var(--spacing-300) var(--spacing-200) var(--spacing-150);
+  }
+
+  .footer {
+    display: flex;
+    justify-content: end;
+    gap: 10px;
+    padding: var(--spacing-200) var(--spacing-200) var(--spacing-150);
+  }
+
+  &.modal-remove {
+    .body {
+      display: flex;
+      gap: 16px;
+
+      > .ds-icon {
+        color: var(--icon-warning);
+      }
+
+      .texts {
+        display: flex;
+        flex-direction: column;
+
+        > .title {
+          @include subtitle-medium-2;
+          color: var(--text-primary);
+        }
+
+        > .subtitle {
+          @include body-medium-1;
+          color: var(--text-secondary);
+        }
+      }
+    }
+  }
+}

package/src/AppToast/AppToast.tsx

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

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

package/src/AppToast/index.tsx

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

package/src/Dummy/Dummy.stories.tsx

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

@@ -0,0 +1,16 @@
+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/Dummy/index.tsx

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

package/src/Dummy/styles.scss

@@ -0,0 +1,6 @@
+@use '../styles/main' as *;
+
+.ds-dummy {
+  display: flex;
+  align-items: center;
+}

package/src/Participants/ParticipantCreate/ParticipantCreate.tsx

@@ -0,0 +1,86 @@
+import AppModal from '@/AppModal';
+import CommonContext from '@/configs/CommonContext';
+import { toastLoading } from '@/configs/store/actions';
+import { useContext, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Participant, {
+  EMPTY_PARTICIPANT,
+  ParticipantCreateRequest,
+} from '../types/Participant';
+import ParticipantService from '../types/ParticipantService';
+import { useForm } from 'react-hook-form';
+import { TFunction } from 'i18next';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+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/ParticipantCreate/index.tsx

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

package/src/Participants/ParticipantCreate/style.scss

@@ -0,0 +1,32 @@
+.participants-container {
+  .header {
+    display: flex;
+    background-color: var(--color-secondary);
+    padding: 8px 16px;
+
+    .actions {
+      margin-left: auto;
+      margin-top: auto;
+      margin-bottom: auto;
+
+      .action {
+        border: var(--border-default);
+        padding: 0px 16px;
+      }
+    }
+  }
+
+  .body {
+    height: 90vh;
+    overflow-y: auto;
+    padding: var(--spacing-small);
+  }
+
+  .footer {
+    margin-top: 16px;
+    padding-top: 16px;
+    display: flex;
+    justify-content: right;
+    border-top: var(--border-default);
+  }
+}

package/src/Participants/ParticipantRemove/ParticipantRemove.tsx

@@ -0,0 +1,51 @@
+import AppModalRemove from '@/AppModal/AppModalRemove';
+import CommonContext from '@/configs/CommonContext';
+import { toastLoading } from '@/configs/store/actions';
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+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/ParticipantRemove/index.tsx

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

package/src/Participants/ParticipantRemove/style.scss

@@ -0,0 +1,32 @@
+.participants-container {
+  .header {
+    display: flex;
+    background-color: var(--color-secondary);
+    padding: 8px 16px;
+
+    .actions {
+      margin-left: auto;
+      margin-top: auto;
+      margin-bottom: auto;
+
+      .action {
+        border: var(--border-default);
+        padding: 0px 16px;
+      }
+    }
+  }
+
+  .body {
+    height: 90vh;
+    overflow-y: auto;
+    padding: var(--spacing-small);
+  }
+
+  .footer {
+    margin-top: 16px;
+    padding-top: 16px;
+    display: flex;
+    justify-content: right;
+    border-top: var(--border-default);
+  }
+}

package/src/Participants/Participants.stories.tsx

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

@@ -0,0 +1,145 @@
+import AppEditable from '@/AppEditable';
+import AppEditableField from '@/AppEditable/AppEditableField';
+import CommonContext from '@/configs/CommonContext';
+import { dispatchMessage } from '@/configs/MessageUtils';
+import { faPlus, faTimes } 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 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, state } = 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">add new participant</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={faTimes} />
+                <span className="ms-1">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>
+  );
+}

package/src/Participants/index.tsx

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

package/src/Participants/style.scss

@@ -0,0 +1,44 @@
+.participants-container {
+  .header {
+    display: flex;
+    background-color: var(--color-secondary);
+    padding: 8px 16px;
+
+    .actions {
+      margin-left: auto;
+      margin-top: auto;
+      margin-bottom: auto;
+
+      .action {
+        border: var(--border-default);
+        padding: 0px 16px;
+      }
+    }
+  }
+
+  .body {
+    height: 90vh;
+    overflow-y: auto;
+    padding: var(--spacing-small);
+  }
+
+  .footer {
+    margin-top: 16px;
+    padding-top: 16px;
+    display: flex;
+    justify-content: right;
+    border-top: var(--border-default);
+  }
+}
+
+.modal-participant {
+  width: 20vw;
+  max-width: 20vw;
+
+  .body {
+    .participant-container {
+      display: flex;
+      gap: 8px;
+    }
+  }
+}