@xelto.npm/xc2-lib

Biblioteka komponentów React dla aplikacji XC (XC-EFE, XC-FAK i pokrewne), zbudowana na MUI 5.

Paczka jest publikowana na npm jako @xelto.npm/xc2-lib.

Rozwijasz tę bibliotekę? Proces instalacji, testowania i wydawania wersji opisuje CONTRIBUTING.md.

Instalacja

npm i @xelto.npm/xc2-lib

Wymagane peer dependencies: react@^18.2.0 i react-dom@^18.2.0. MUI i emotion są wbudowane w paczkę — nie musisz ich instalować osobno.

Użycie

Wszystkie komponenty są eksportowane z korzenia paczki:

import { Button, DatePicker, TableMobile } from '@xelto.npm/xc2-lib'

Same komponenty nie wymagają importu CSS — stylują się przez emotion.

Paczka dostarcza natomiast opcjonalny arkusz globalny:

import '@xelto.npm/xc2-lib/dist/styles.global.css'

styles.global.css ustawia font Barlow (pobierany z Google Fonts), height: 100% na html/body/#root oraz zeruje margines body. Zaimportuj go, jeśli aplikacja nie zapewnia tego sama. XC-EFE tego nie robi — hostuje Barlow lokalnie z własnych plików .ttf (src/styles/fonts.css), co pozwala mu działać bez dostępu do Google Fonts. Komponenty biblioteki zakładają, że font Barlow jest dostępny, więc jedną z tych dróg trzeba wybrać.

W dist/ leży też styles.module.css — to niemal duplikat pliku globalnego, nieużywany ani przez bibliotekę, ani przez żadną aplikację. Nie importuj go.

Dostępne komponenty

AppTile, BottomBar, BottomInfoBar, Button, Checkbox, DatePicker, Icon, IconButton, Illustration, InfoBar, Logo, Modal, ModuleTile, MultiSelect, Radio, SearchBar, Select, Steps, Switch, Table, TableMobile, TextField, TimePicker, Tooltip, Topbar, Typography

Źródłem prawdy o propsach każdego komponentu jest Storybook — patrz CONTRIBUTING.md.

Lokalizacja DatePickera

To jedyne miejsce w bibliotece, które wymaga wyjaśnienia, bo MUI X ma dwie niezależne warstwy tłumaczeń i łatwo ustawić jedną, zapominając o drugiej.

| warstwa | co tłumaczy | skąd pochodzi | |---|---|---| | adapter daty | nazwy miesięcy i dni, pierwszy dzień tygodnia | date-fns/locale/* | | teksty UI | przyciski Anuluj / Zatwierdź / Wyczyść / Dzisiaj, aria-labels | @mui/x-date-pickers/locales |

DatePicker obsługuje obie warstwy przez jeden props locale:

<DatePicker
  locale="pl"
  inputFormat="dd.MM.yyyy"
  value={date}
  onChange={setDate}
  label="Data od"
/>

Obsługiwane wartości: pl, de, en-gb (domyślna), en-us, zh-cn.

Trzy rzeczy, o które łatwo się potknąć:

• locale trzeba przekazać jawnie. Domyślną wartością jest en-gb, więc komponent bez tego propsa będzie po angielsku, nawet jeśli cała aplikacja jest po polsku.
• inputFormat nie wynika z locale. Format wpisywanej daty ustawia się osobno; domyślny to dd/MM/yyyy.
• Przyciski Anuluj/Zatwierdź widać tylko w trybie mobilnym. Powyżej 1020 px szerokości okna picker działa w trybie desktop, gdzie tych przycisków w ogóle nie ma — datę zatwierdza się kliknięciem w dzień.

Jeśli aplikacja trzyma język w innym formacie niż klucze date-fns, trzeba go zmapować. Przykład z XC-EFE, gdzie JDE zwraca PL/EN:

const datePickerLocale = language === 'PL' ? 'pl' : 'en-gb'

TimePicker nie obsługuje jeszcze lokalizacji — jest zawsze po angielsku.