tycho-components 0.0.1 → 0.0.3

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/MessageUtils.ts

@@ -1,5 +1,5 @@
-import { message } from '@/configs/store/actions';
-import { StoreAction } from '@/configs/store/types';
+import { message } from '../configs/store/actions';
+import { StoreAction } from '../configs/store/types';
 import { TFunction } from 'i18next';
 
 type MessageDispatcher = {

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/configs/store/actions.ts

@@ -1,4 +1,4 @@
-import ToastMessage from '@/AppToast/ToastMessage';
+import ToastMessage from '../../AppToast/ToastMessage';
 import { StoreAction, types } from './types';
 
 export const message = (data: ToastMessage): StoreAction => ({

package/src/configs/store/store.ts

@@ -1,4 +1,4 @@
-import { EMPTY_TOAST } from '@/AppToast/ToastMessage';
+import { EMPTY_TOAST } from '../../AppToast/ToastMessage';
 import { UserStore } from './types';
 
 const store: UserStore = {

package/src/configs/store/types.ts

@@ -1,4 +1,4 @@
-import ToastMessage from '@/AppToast/ToastMessage';
+import ToastMessage from '../../AppToast/ToastMessage';
 
 export type UserStore = {
   message: ToastMessage;

package/src/index.ts

@@ -2,3 +2,7 @@ export { default as AppEditable } from './AppEditable';
 export { default as AppToast } from './AppToast';
 export { default as AppColorpicker } from './AppColorpicker';
 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';

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

package/src/new-styles/base/_margins.css

@@ -0,0 +1,174 @@
+/* Margin for all sides */
+.m-0 {
+  margin: 0 !important;
+}
+.m-1 {
+  margin: 0.25rem !important;
+}
+.m-2 {
+  margin: 0.5rem !important;
+}
+.m-3 {
+  margin: 1rem !important;
+}
+.m-4 {
+  margin: 1.5rem !important;
+}
+.m-5 {
+  margin: 3rem !important;
+}
+.m-auto {
+  margin: auto !important;
+}
+
+/* Margin-top */
+.mt-0 {
+  margin-top: 0 !important;
+}
+.mt-1 {
+  margin-top: 0.25rem !important;
+}
+.mt-2 {
+  margin-top: 0.5rem !important;
+}
+.mt-3 {
+  margin-top: 1rem !important;
+}
+.mt-4 {
+  margin-top: 1.5rem !important;
+}
+.mt-5 {
+  margin-top: 3rem !important;
+}
+.mt-auto {
+  margin-top: auto !important;
+}
+
+/* Margin-right */
+.me-0 {
+  margin-right: 0 !important;
+}
+.me-1 {
+  margin-right: 0.25rem !important;
+}
+.me-2 {
+  margin-right: 0.5rem !important;
+}
+.me-3 {
+  margin-right: 1rem !important;
+}
+.me-4 {
+  margin-right: 1.5rem !important;
+}
+.me-5 {
+  margin-right: 3rem !important;
+}
+.me-auto {
+  margin-right: auto !important;
+}
+
+/* Margin-bottom */
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+.mb-1 {
+  margin-bottom: 0.25rem !important;
+}
+.mb-2 {
+  margin-bottom: 0.5rem !important;
+}
+.mb-3 {
+  margin-bottom: 1rem !important;
+}
+.mb-4 {
+  margin-bottom: 1.5rem !important;
+}
+.mb-5 {
+  margin-bottom: 3rem !important;
+}
+.mb-auto {
+  margin-bottom: auto !important;
+}
+
+/* Margin-left */
+.ms-0 {
+  margin-left: 0 !important;
+}
+.ms-1 {
+  margin-left: 0.25rem !important;
+}
+.ms-2 {
+  margin-left: 0.5rem !important;
+}
+.ms-3 {
+  margin-left: 1rem !important;
+}
+.ms-4 {
+  margin-left: 1.5rem !important;
+}
+.ms-5 {
+  margin-left: 3rem !important;
+}
+.ms-auto {
+  margin-left: auto !important;
+}
+
+/* Horizontal (left + right) margin */
+.mx-0 {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+.mx-1 {
+  margin-left: 0.25rem !important;
+  margin-right: 0.25rem !important;
+}
+.mx-2 {
+  margin-left: 0.5rem !important;
+  margin-right: 0.5rem !important;
+}
+.mx-3 {
+  margin-left: 1rem !important;
+  margin-right: 1rem !important;
+}
+.mx-4 {
+  margin-left: 1.5rem !important;
+  margin-right: 1.5rem !important;
+}
+.mx-5 {
+  margin-left: 3rem !important;
+  margin-right: 3rem !important;
+}
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+/* Vertical (top + bottom) margin */
+.my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+.my-1 {
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+}
+.my-2 {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+}
+.my-3 {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+.my-4 {
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
+}
+.my-5 {
+  margin-top: 3rem !important;
+  margin-bottom: 3rem !important;
+}
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}

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

@@ -0,0 +1,26 @@
+// spaces
+
+:root {
+  --spacing-0: 0px;
+  --spacing-050: 4px;
+  --spacing-075: 6px;
+  --spacing-100: 8px;
+  --spacing-125: 10px;
+  --spacing-150: 12px;
+  --spacing-200: 16px;
+  --spacing-250: 20px;
+  --spacing-300: 24px;
+  --spacing-350: 28px;
+  --spacing-400: 32px;
+  --spacing-500: 40px;
+  --spacing-600: 48px;
+  --spacing-700: 56px;
+  --spacing-800: 64px;
+  --spacing-900: 72px;
+  --spacing-1000: 80px;
+  --spacing-1100: 88px;
+  --spacing-1200: 96px;
+  --spacing-1300: 104px;
+  --spacing-1400: 112px;
+  --spacing-1500: 120px;
+}