tycho-components 0.0.3 → 0.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "src/index.ts",
   "dependencies": {
     "@emotion/react": "^11.13.3",
@@ -20,6 +20,7 @@
     "classnames": "^2.5.1",
     "date-fns": "^2.29.1",
     "date-fns-tz": "^1.3.6",
+    "i18next": "^23.3.0",
     "i18next-browser-languagedetector": "^7.1.0",
     "js-cookie": "^3.0.5",
     "react": ">=17 <19",
@@ -32,6 +33,7 @@
     "react-loading": "^2.0.3",
     "react-switch": "^7.1.0",
     "react-toastify": "^9.1.3",
+    "tycho-storybook": "0.0.33",
     "yup": "^1.2.0"
   },
   "devDependencies": {

package/src/AppModal/AppModal.tsx

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

package/src/AppModal/AppModalConfirm.tsx

@@ -1,9 +1,7 @@
 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;
@@ -28,7 +26,7 @@ export default function AppModalConfirm({
     <Modal open>
       <Box className="modal-container modal-remove" sx={style}>
         <div className="body">
-          <FontAwesomeIcon icon={faWarning} />
+          <Icon name="warning" size="large" filled />
           <div className="texts">
             <span className="title">{title}</span>
             <span className="subtitle">{subtitle}</span>
@@ -36,12 +34,15 @@ export default function AppModalConfirm({
         </div>
 
         <div className="footer">
-          <Button onClick={onClose} variant="secondary">
-            {closeLabel || t('modal.button.cancel')}
-          </Button>
-          <Button onClick={onConfirm}>
-            {confirmLabel || t('modal.button.confirm')}
-          </Button>
+          <Button
+            onClick={onClose}
+            text={closeLabel || t('modal.button.cancel')}
+            mode="tonal"
+          />
+          <Button
+            onClick={onConfirm}
+            text={confirmLabel || t('modal.button.confirm')}
+          />
         </div>
       </Box>
     </Modal>

package/src/AppModal/AppModalRemove.tsx

@@ -1,9 +1,7 @@
 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;
@@ -24,7 +22,7 @@ export default function AppModalRemove({
     <Modal open>
       <Box className="modal-container modal-remove" sx={style}>
         <div className="body">
-          <FontAwesomeIcon icon={faWarning} />
+          <Icon name="warning" size="large" filled />
           <div className="texts">
             <span className="title">{title}</span>
             <span className="subtitle">{subtitle}</span>
@@ -32,11 +30,8 @@ export default function AppModalRemove({
         </div>
 
         <div className="footer">
-          <Button onClick={onClose} variant="secondary">
-            {t('button.cancel')}
-          </Button>
-
-          <Button onClick={onConfirm}>{t('button.confirm')}</Button>
+          <Button onClick={onClose} text={t('button.cancel')} mode="tonal" />
+          <Button onClick={onConfirm} text={t('button.confirm')} />
         </div>
       </Box>
     </Modal>

package/src/Participants/ParticipantCreate/ParticipantCreate.tsx

@@ -10,7 +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';
+import { TextField } from 'tycho-storybook';
 
 type Props = {
   document: string;

package/src/configs/Localization.ts

@@ -4,21 +4,23 @@ import { initReactI18next } from 'react-i18next';
 import { ParticipantsTexts } from './localization/ParticipantsTexts';
 import { CommonTexts } from './localization/CommonTexts';
 
+export const commonResources = {
+  en: {
+    common: CommonTexts.en,
+    participants: ParticipantsTexts.en,
+  },
+  'pt-BR': {
+    common: CommonTexts['pt-BR'],
+    participants: ParticipantsTexts['pt-BR'],
+  },
+};
+
 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'],
-        },
-      },
+      resources: commonResources,
       fallbackLng: 'en',
       defaultNS: 'message',
       interpolation: {

package/src/index.ts

@@ -5,4 +5,5 @@ 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';
+export { commonResources } from './configs/Localization';
+export { CommonProvider } from './configs/CommonContext';

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;
-  }
-}