tycho-components 0.0.2 → 0.0.3

package/.storybook/preview.tsx

@@ -1,11 +1,11 @@
 import type { Preview } from '@storybook/react';
 import { CommonProvider } from '../src/configs/CommonContext';
-import configLocalization from '../src/configs/Localization';
+import commonLocalization from '../src/configs/Localization';
 import '../src/styles/bootstrap.min.css';
 import '../src/styles/main.scss';
 import './preview.css';
 
-configLocalization();
+commonLocalization();
 
 const preview: Preview = {
   parameters: {

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "src/index.ts",
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/icons-material": "6.1.5",
+    "@mui/material": "6.1.5",
     "axios": "^1.7.7"
   },
   "peerDependencies": {
-    "react": ">=17 <19",
-    "react-dom": ">=17 <19",
     "@hookform/resolvers": "^3.1.1",
     "bootstrap": "^5.3.1",
     "classnames": "^2.5.1",
@@ -22,23 +22,19 @@
     "date-fns-tz": "^1.3.6",
     "i18next-browser-languagedetector": "^7.1.0",
     "js-cookie": "^3.0.5",
+    "react": ">=17 <19",
     "react-bootstrap": "^2.8.0",
     "react-colorful": "^5.6.1",
+    "react-dom": ">=17 <19",
     "react-easy-edit": "^2.0.0",
+    "react-hook-form": "^7.45.2",
     "react-i18next": "^13.0.2",
     "react-loading": "^2.0.3",
-    "react-toastify": "^9.1.3",
     "react-switch": "^7.1.0",
-    "tycho-storybook": "^0.0.33",
+    "react-toastify": "^9.1.3",
     "yup": "^1.2.0"
   },
   "devDependencies": {
-    "vite-plugin-checker": "^0.6.1",
-    "vite-plugin-svgr": "^3.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
     "@storybook/addon-essentials": "^7.5.3",
     "@storybook/addon-interactions": "^7.5.3",
     "@storybook/addon-links": "^7.5.3",
@@ -49,6 +45,8 @@
     "@storybook/react-vite": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
     "@types/js-cookie": "^3.0.6",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.1.1",
@@ -56,9 +54,13 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.1",
     "eslint-plugin-storybook": "^0.11.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "storybook": "^7.5.3",
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
+    "vite-plugin-checker": "^0.6.1",
+    "vite-plugin-svgr": "^3.2.0",
     "vitest": "^0.33.0"
   },
   "scripts": {

package/src/AppModal/AppModal.tsx

@@ -2,8 +2,10 @@ 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';
+import { Button } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
 type Props = {
   children: React.ReactNode;
@@ -52,25 +54,25 @@ export default function AppModal({
               {subtitle && <span className="subtitle">{subtitle}</span>}
             </div>
             {!disableClose && (
-              <Icon name="close" onClick={close} className="pointer" />
+              <FontAwesomeIcon
+                onClick={close}
+                className="ms-auto pointer"
+                icon={faTimes}
+              />
             )}
           </div>
           <div className="body">{children}</div>
           {!hideFooter ? (
             <div className="footer">
               {!disableCancel && (
-                <Button
-                  onClick={cancel || close}
-                  text={closeLabel || t('button.cancel')}
-                  color="danger"
-                />
+                <Button onClick={cancel || close} variant="danger">
+                  {closeLabel || t('button.cancel')}
+                </Button>
               )}
               {confirm && (
-                <Button
-                  onClick={confirm}
-                  disabled={disableConfirm}
-                  text={confirmLabel || t('button.confirm')}
-                />
+                <Button onClick={confirm} disabled={disableConfirm}>
+                  {confirmLabel || t('button.confirm')}
+                </Button>
               )}
             </div>
           ) : null}

package/src/AppModal/AppModalConfirm.tsx

@@ -1,7 +1,9 @@
 import { Box, Modal } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Button, Icon } from 'tycho-storybook';
 import './style.scss';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faWarning } from '@fortawesome/free-solid-svg-icons';
+import { Button } from 'react-bootstrap';
 
 type Props = {
   title: string;
@@ -26,7 +28,7 @@ export default function AppModalConfirm({
     <Modal open>
       <Box className="modal-container modal-remove" sx={style}>
         <div className="body">
-          <Icon name="warning" size="large" filled />
+          <FontAwesomeIcon icon={faWarning} />
           <div className="texts">
             <span className="title">{title}</span>
             <span className="subtitle">{subtitle}</span>
@@ -34,15 +36,12 @@ export default function AppModalConfirm({
         </div>
 
         <div className="footer">
-          <Button
-            onClick={onClose}
-            text={closeLabel || t('modal.button.cancel')}
-            mode="tonal"
-          />
-          <Button
-            onClick={onConfirm}
-            text={confirmLabel || t('modal.button.confirm')}
-          />
+          <Button onClick={onClose} variant="secondary">
+            {closeLabel || t('modal.button.cancel')}
+          </Button>
+          <Button onClick={onConfirm}>
+            {confirmLabel || t('modal.button.confirm')}
+          </Button>
         </div>
       </Box>
     </Modal>

package/src/AppModal/AppModalRemove.tsx

@@ -1,7 +1,9 @@
 import { Box, Modal } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Button, Icon } from 'tycho-storybook';
 import './style.scss';
+import { Button } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faWarning } from '@fortawesome/free-solid-svg-icons';
 
 type Props = {
   title: string;
@@ -22,7 +24,7 @@ export default function AppModalRemove({
     <Modal open>
       <Box className="modal-container modal-remove" sx={style}>
         <div className="body">
-          <Icon name="warning" size="large" filled />
+          <FontAwesomeIcon icon={faWarning} />
           <div className="texts">
             <span className="title">{title}</span>
             <span className="subtitle">{subtitle}</span>
@@ -30,8 +32,11 @@ export default function AppModalRemove({
         </div>
 
         <div className="footer">
-          <Button onClick={onClose} text={t('button.cancel')} mode="tonal" />
-          <Button onClick={onConfirm} text={t('button.confirm')} />
+          <Button onClick={onClose} variant="secondary">
+            {t('button.cancel')}
+          </Button>
+
+          <Button onClick={onConfirm}>{t('button.confirm')}</Button>
         </div>
       </Box>
     </Modal>

package/src/AppModal/style.scss

@@ -1,4 +1,4 @@
-@use 'tycho-storybook/src/styles/main' as *;
+@use '../new-styles/main' as *;
 
 .modal-container {
   .header {

package/src/Participants/ParticipantCreate/ParticipantCreate.tsx

@@ -3,7 +3,6 @@ import { TFunction } from 'i18next';
 import { useContext } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { TextField } from 'tycho-storybook';
 import * as yup from 'yup';
 import AppModal from '../../AppModal';
 import CommonContext from '../../configs/CommonContext';
@@ -11,6 +10,7 @@ import { toastLoading } from '../../configs/store/actions';
 import Participant, { ParticipantCreateRequest } from '../types/Participant';
 import ParticipantService from '../types/ParticipantService';
 import './style.scss';
+import TextField from '../../TextField';
 
 type Props = {
   document: string;

package/src/Participants/Participants.tsx

@@ -1,4 +1,4 @@
-import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons';
+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';
@@ -25,7 +25,7 @@ export default function Participants({
   onChange,
 }: Props) {
   const { t } = useTranslation('participants');
-  const { dispatch, state } = useContext(CommonContext);
+  const { dispatch } = useContext(CommonContext);
 
   const [participant, setParticipant] = useState<Participant>();
   const [openRemove, setOpenRemove] = useState(false);
@@ -69,7 +69,7 @@ export default function Participants({
             onClick={() => setOpenCreate(true)}
           >
             <FontAwesomeIcon icon={faPlus} title={t('button.label.add')} />
-            <span className="ms-2">add new participant</span>
+            <span className="ms-2">{t('button.label.add')}</span>
           </button>
         </div>
       </div>
@@ -104,8 +104,8 @@ export default function Participants({
                   setOpenRemove(true);
                 }}
               >
-                <FontAwesomeIcon icon={faTimes} />
-                <span className="ms-1">Remove</span>
+                <FontAwesomeIcon icon={faTrash} />
+                <span className="ms-1">{t('common:button.remove')}</span>
               </Button>
             </div>
           </>

package/src/TextField/TextField.stories.tsx

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

@@ -0,0 +1,172 @@
+/* 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

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

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

package/src/TextField/inputRefManager.ts

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

@@ -0,0 +1,36 @@
+@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/Localization.ts

@@ -4,7 +4,7 @@ import { initReactI18next } from 'react-i18next';
 import { ParticipantsTexts } from './localization/ParticipantsTexts';
 import { CommonTexts } from './localization/CommonTexts';
 
-export default function configLocalization() {
+export default function commonLocalization() {
   i18n
     .use(initReactI18next)
     .use(languageDetector)

package/src/configs/localization/CommonTexts.ts

@@ -2,6 +2,7 @@ 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',

package/src/configs/localization/ParticipantsTexts.ts

@@ -1,7 +1,7 @@
 export const ParticipantsTexts = {
   en: {
     'label.title': 'Participants',
-    'button.label.add': 'Add participant',
+    'button.label.add': 'add new participant',
     'participant.field.order': 'Order',
     'participant.field.code': 'Code',
     'participant.field.name': 'Name',

package/src/index.ts

@@ -5,3 +5,4 @@ export { default as Participants } from './Participants';
 export { default as AppModal } from './AppModal';
 export { default as AppModalConfirm } from './AppModal/AppModalConfirm';
 export { default as AppModalRemove } from './AppModal/AppModalRemove';
+export { default as commonLocalization } from './configs/Localization';