Eehitus komponendid

Sisaldab EMTA-st saadud mta-react-common-visuals V 4.1.42 React komponente ja ehr-components paketist üle toodud eehitus komponente.

Komponentide kasutamine

Komponendid kasutavad välisid tõlkefaile. Tõlgete jaoks kasutatakse "react-intl" paketti. Komponendid peavad olema ümbritsetud "react-intl" funktiooniga IntlProvider. Näiteks:

import { IntlProvider } from "react-intl";

    (context) => {
      
      return (
        <IntlProvider locale={context?.globals?.locale} messages={reactIntl.messages[context?.globals?.locale]}>
          <Component />
        </IntlProvider>
      )
    }

Komponentide stiilifailid, mis tuleb komponentide kasutamisel ette anda on: - mta_visuaal.css - styles.css Ikoonifail: iconfont.svg Stiilifailide originaalid asuvad projektis e-ehitus visuaal. Stiilide muudatusteks tuleb muuta originaal stiiliprojektis asuvaid stiile ning seejärel genereerida uus stiilifail ning paigaldada see ehr UI raamprojekti, milles komponente kasutatakse.

Suurimad muudatused mis tehtud MTA komponentides võrreldes ehr-components paketis kasutuseloleva MTA komponentide versiooniga

• Flow >> Typescript
• Osad komponendid on viidud class >> function componentideks

Muudatused, mis on tehtud MTA komponentidesse käesolevas paketis

• Uuendatud React 16.12.0 >> 18.2.0
• Typescript 3.7.4 >> 4.9
• Lisatud komponentidele Storybook, mida näeb: eehitus-components
• Paketeerimiseks ja kopileerimiseks on kasutusel Vite
• komponendid viidud src/components folderisse

Muudatused mis tehtud eehitus komponentidesse käesolevas paketis

komponendid tõstetud src/components/eehitus_components komponentides on muudetud failidel jsx >> tsx parandatud vigu

Vite paketeerimine

kompileeritava paketi index.ts asub src\lib\index.ts

paketeerimisel ei lisata static folderis asuvaid varasid. Lisatakse varad, mis asuvad komponentide enda folderites

Storybook käivitamine arenduskeskkonnas

yarn run storybook

Vite käivitamine arenduskeskkonnas

yarn run vite Sel juhul käivitub ./index.html ja sellest viidatud fail.

Rollup ja Vite konfiguratsioon

vite.config.ts

Storybook konfiguratsioon

main.ts