tycho-components 0.0.2 → 0.0.4

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,44 +1,42 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.4",
   "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",
     "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",
     "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",
+    "tycho-storybook": "0.0.33",
     "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 +47,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 +56,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/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 'tycho-storybook';
 
 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/configs/Localization.ts

@@ -4,21 +4,23 @@ import { initReactI18next } from 'react-i18next';
 import { ParticipantsTexts } from './localization/ParticipantsTexts';
 import { CommonTexts } from './localization/CommonTexts';
 
-export default function configLocalization() {
+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/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,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 { commonResources } from './configs/Localization';
+export { CommonProvider } from './configs/CommonContext';

package/src/new-styles/base/_borders.scss

@@ -0,0 +1,30 @@
+// borders, dividers and border radius
+
+:root {
+  --border-0: 0px;
+  --border-050: 0.5px;
+  --border-100: 1px;
+  --border-150: 1.5px;
+  --border-200: 2px;
+  --border-250: 2.5px;
+  --border-300: 3px;
+  --border-400: 4px;
+  --border-500: 5px;
+  --border-600: 6px;
+  --border-700: 7px;
+  --border-800: 8px;
+
+  --radius-0: 0px;
+  --radius-050: 2px;
+  --radius-100: 4px;
+  --radius-200: 8px;
+  --radius-300: 12px;
+  --radius-400: 16px;
+  --radius-500: 20px;
+  --radius-600: 24px;
+  --radius-700: 28px;
+  --radius-800: 32px;
+  --radius-900: 36px;
+  --radius-1000: 40px;
+  --radius-full: 999px;
+}

package/src/new-styles/base/_colors.scss

@@ -0,0 +1,100 @@
+// colors, tonal scales for accent, neutral and semantic
+
+:root {
+  --accent-0: #000000;
+  --accent-10: #142e57;
+  --accent-100: #ffffff;
+  --accent-20: #194c8f;
+  --accent-30: #185abd;
+  --accent-40: #146ce1;
+  --accent-50: #1c83f4;
+  --accent-60: #32a2ff;
+  --accent-70: #59bfff;
+  --accent-80: #8ed8ff;
+  --accent-90: #bce6ff;
+  --accent-95: #d9f0ff;
+  --accent-99: #eef9ff;
+  --high-contrast-blue: #6bfdff;
+  --high-contrast-dark: #000000;
+  --high-contrast-green: #7bff57;
+  --high-contrast-light: #ffffff;
+  --high-contrast-yellow: #fff81f;
+  --neutral-dark-0: #ffffff;
+  --neutral-dark-10: #f6f7f9;
+  --neutral-dark-100: #000000;
+  --neutral-dark-20: #ebeef3;
+  --neutral-dark-30: #d3d9e4;
+  --neutral-dark-40: #acb9cd;
+  --neutral-dark-50: #7f94b1;
+  --neutral-dark-60: #5f7698;
+  --neutral-dark-70: #4b5f7e;
+  --neutral-dark-80: #42526e;
+  --neutral-dark-90: #364256;
+  --neutral-dark-95: #30394a;
+  --neutral-dark-99: #202531;
+  --neutral-light-0: #000000;
+  --neutral-light-10: #141415;
+  --neutral-light-100: #ffffff;
+  --neutral-light-20: #252627;
+  --neutral-light-30: #434447;
+  --neutral-light-40: #5c5e61;
+  --neutral-light-50: #707276;
+  --neutral-light-60: #9d9fa2;
+  --neutral-light-70: #bebfc1;
+  --neutral-light-80: #cbcccd;
+  --neutral-light-90: #eaeaeb;
+  --neutral-light-95: #f7f7f8;
+  --neutral-light-99: #f9fafb;
+  --semantic-danger-0: #000000;
+  --semantic-danger-10: #44060c;
+  --semantic-danger-100: #ffffff;
+  --semantic-danger-20: #7e1015;
+  --semantic-danger-30: #9d0f16;
+  --semantic-danger-40: #c6080a;
+  --semantic-danger-50: #ef1207;
+  --semantic-danger-60: #fe3820;
+  --semantic-danger-70: #ff5638;
+  --semantic-danger-80: #ff8f71;
+  --semantic-danger-90: #ffbda8;
+  --semantic-danger-95: #ffe0d4;
+  --semantic-danger-99: #fff2ed;
+  --semantic-info-0: #000000;
+  --semantic-info-10: #440055;
+  --semantic-info-100: #ffffff;
+  --semantic-info-20: #68127d;
+  --semantic-info-30: #7c0e9a;
+  --semantic-info-40: #950fbc;
+  --semantic-info-50: #b720e9;
+  --semantic-info-60: #c837fe;
+  --semantic-info-70: #dc6dff;
+  --semantic-info-80: #e8a4ff;
+  --semantic-info-90: #f1ccff;
+  --semantic-info-95: #f8e6ff;
+  --semantic-info-99: #f8e6ff;
+  --semantic-success-0: #000000;
+  --semantic-success-10: #182c07;
+  --semantic-success-100: #ffffff;
+  --semantic-success-20: #335017;
+  --semantic-success-30: #3b5e16;
+  --semantic-success-40: #477714;
+  --semantic-success-50: #5c9c14;
+  --semantic-success-60: #70b51c;
+  --semantic-success-70: #98de3d;
+  --semantic-success-80: #b5ec6a;
+  --semantic-success-90: #d3f5a1;
+  --semantic-success-95: #e9facd;
+  --semantic-success-99: #f6fde8;
+  --semantic-warning-0: #000000;
+  --semantic-warning-10: #461702;
+  --semantic-warning-100: #ffffff;
+  --semantic-warning-20: #7a310d;
+  --semantic-warning-30: #943a0c;
+  --semantic-warning-40: #b74c06;
+  --semantic-warning-50: #dd6f02;
+  --semantic-warning-60: #f99607;
+  --semantic-warning-70: #ffb920;
+  --semantic-warning-80: #ffc938;
+  --semantic-warning-90: #ffe388;
+  --semantic-warning-95: #fff2c6;
+  --semantic-warning-99: #fffaeb;
+}

package/src/new-styles/base/_displays.scss

@@ -0,0 +1,207 @@
+/* Display none */
+.d-none {
+  display: none !important;
+}
+
+/* Display block */
+.d-block {
+  display: block !important;
+}
+
+/* Display inline */
+.d-inline {
+  display: inline !important;
+}
+
+/* Display inline-block */
+.d-inline-block {
+  display: inline-block !important;
+}
+
+/* Display flex */
+.d-flex {
+  display: flex !important;
+}
+
+/* Display inline-flex */
+.d-inline-flex {
+  display: inline-flex !important;
+}
+
+/* Display grid */
+.d-grid {
+  display: grid !important;
+}
+
+/* Display inline-grid */
+.d-inline-grid {
+  display: inline-grid !important;
+}
+
+/* Responsive display classes */
+
+/* Extra small (xs) */
+.d-xs-none {
+  display: none !important;
+}
+.d-xs-block {
+  display: block !important;
+}
+.d-xs-inline {
+  display: inline !important;
+}
+.d-xs-inline-block {
+  display: inline-block !important;
+}
+.d-xs-flex {
+  display: flex !important;
+}
+.d-xs-inline-flex {
+  display: inline-flex !important;
+}
+.d-xs-grid {
+  display: grid !important;
+}
+.d-xs-inline-grid {
+  display: inline-grid !important;
+}
+
+/* Small (sm) */
+@media (min-width: 576px) {
+  .d-sm-none {
+    display: none !important;
+  }
+  .d-sm-block {
+    display: block !important;
+  }
+  .d-sm-inline {
+    display: inline !important;
+  }
+  .d-sm-inline-block {
+    display: inline-block !important;
+  }
+  .d-sm-flex {
+    display: flex !important;
+  }
+  .d-sm-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-sm-grid {
+    display: grid !important;
+  }
+  .d-sm-inline-grid {
+    display: inline-grid !important;
+  }
+}
+
+/* Medium (md) */
+@media (min-width: 768px) {
+  .d-md-none {
+    display: none !important;
+  }
+  .d-md-block {
+    display: block !important;
+  }
+  .d-md-inline {
+    display: inline !important;
+  }
+  .d-md-inline-block {
+    display: inline-block !important;
+  }
+  .d-md-flex {
+    display: flex !important;
+  }
+  .d-md-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-md-grid {
+    display: grid !important;
+  }
+  .d-md-inline-grid {
+    display: inline-grid !important;
+  }
+}
+
+/* Large (lg) */
+@media (min-width: 992px) {
+  .d-lg-none {
+    display: none !important;
+  }
+  .d-lg-block {
+    display: block !important;
+  }
+  .d-lg-inline {
+    display: inline !important;
+  }
+  .d-lg-inline-block {
+    display: inline-block !important;
+  }
+  .d-lg-flex {
+    display: flex !important;
+  }
+  .d-lg-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-lg-grid {
+    display: grid !important;
+  }
+  .d-lg-inline-grid {
+    display: inline-grid !important;
+  }
+}
+
+/* Extra Large (xl) */
+@media (min-width: 1200px) {
+  .d-xl-none {
+    display: none !important;
+  }
+  .d-xl-block {
+    display: block !important;
+  }
+  .d-xl-inline {
+    display: inline !important;
+  }
+  .d-xl-inline-block {
+    display: inline-block !important;
+  }
+  .d-xl-flex {
+    display: flex !important;
+  }
+  .d-xl-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-xl-grid {
+    display: grid !important;
+  }
+  .d-xl-inline-grid {
+    display: inline-grid !important;
+  }
+}
+
+/* Extra Extra Large (xxl) */
+@media (min-width: 1400px) {
+  .d-xxl-none {
+    display: none !important;
+  }
+  .d-xxl-block {
+    display: block !important;
+  }
+  .d-xxl-inline {
+    display: inline !important;
+  }
+  .d-xxl-inline-block {
+    display: inline-block !important;
+  }
+  .d-xxl-flex {
+    display: flex !important;
+  }
+  .d-xxl-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-xxl-grid {
+    display: grid !important;
+  }
+  .d-xxl-inline-grid {
+    display: inline-grid !important;
+  }
+}