bys-container-ui2 v0.0.7

BYS-CONTAINER

Bu uygulamada BYS projesi için gerekli olan tüm bileşenlerin bir arada bulunduğu bir yapı oluşturulmuş ve gerekli araçlar kullanılarak modüllere aktarılmaları için konfigürasyonları yapılmıştır.

Node & NPM Versiyonları

• minimum node version: 16.0.0 (iyi çalışan versiyon: 18.10.0)
• minimum npm version: 7.0.0 npm i -g npm
• minimum typescript version: 4.5.2 npm i -g typescript
• minimum eslint version: 7.32.0 (for eslint-config-airbnb-typescript) npm i -g eslint
• minimum prettier version: 2.4.1 npm i -g prettier

VSCODE'a Eklenmesi Gereken Eklentiler

• ESLint (Zorunlu)
• Prettier (Zorunlu)
• Tailwind CSS IntelliSense (Zorunlu)
• headwind (Zorunlu)
• Sort Imports (Zorunlu Değil)
• Auto Rename Tag (Zorunlu Değil)
• Error Lens (optioZorunlu Değilnal)
• ES7+ React/Redux/GraphQL/React-Native snippets (Zorunlu Değil)
• Github Copilot (Zorunlu Değil)

Projenin Çalıştırılması

1. Clone the repo

  git clone https://gitlab.com/idvlabs/bys/bys-container.git

2. Install NPM packages

  cd bys-container
  npm install

3. Set .env.development file for development environment

  REACT_APP_BASE_SERVICE_URL = YOUR_SERVICE_URL
  REACT_APP_ACCESS_TOKEN_KEY = YOUR_ACCESS_TOKEN_KEY

4. Set .env.production file for production environment (Production Build) (Optional)

  REACT_APP_BASE_SERVICE_URL = YOUR_SERVICE_URL
  REACT_APP_ACCESS_TOKEN_KEY = YOUR_ACCESS_TOKEN_KEY

5. Hot Refresh (Development) React

  npm run start:react

6. Webpack Development with Module Federation

  npm run start

7. Build (Production) with Webpack

  npm run build:prod

Storybook Kullanımı

İlk olarak yeni eklenen komponentlerin /stories dizinine eklenmesi gerekmektedir. Oluşturulmuş Örnek bir komponent için  /stories/Button.stories.tsx dosyasına bakabilirsiniz. Daha sonra npm run storybook komutu ile çalıştırılıp herhangi bir hata alınılmaması gerekmektedir. Detaylar için Storybook sitesine bakabilirsiniz.

1. Storybook

  npm run storybook

2. Build Storybook

  npm run build-storybook

Şunlar ile Build Edildi

• Redux Toolkit
• React Native Maps
• Typescript
• Axios
• React Router Dom
• Material UI
• Storybook
• Tailwind CSS
• React Hook Form
• Zod
• @tanstack/react-table
• JWT Decode

UI kütüphanesini NPM paket olarak yayınlama

tsconfig.ts dosyası içerisinde "declaration": true, "declarationDir": "dist/" ve "include": ["index.ts"] alanları aktif edilir. Sonrasında ise package.json root dizinde "type": "module" alanı aktif edilir. npm run create komutu ile dist dizini içerisinde src/, index.d.ts , index.js ve index.js.map dosyaları oluşturulmalıdır. index.css dosyası dist/ dizini içerisine olmalıdır ve tailwind css style'ları içermelidir. src/ dosyası geliştirme yapılan componentleri içermelidir. package.json dosyası içerisinde "versin": 0.0.0 alanı bir üst versiyona çıkarılmalıdır. npm publish komutu ile npm paketi yayınlanır. npm run release komutu ile version otomatik olarak yükseltilir, build alınır ve otomatik npm paketi yeni versiyona güncellenir.

## **Type Çıkarımı için

https://www.npmjs.com/package/@cloudbeds/webpack-module-federation-types-plugin paketi kullanılmıştır. tsconfig'e aşağıdakileri ekle :

{
  "compilerOptions": {
    "downlevelIteration": true,
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@pages/*": ["src/pages/*"],
      "@styles/*": ["src/styles/*"],
      "@utils/*": ["src/common/utils/*"],
      "@hooks/*": ["src/common/hooks/*"],
      "@constants/*": ["src/common/constants/*"]
    },
    "baseUrl": "src",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

 federation.config.json dosyasına aşağıdakileri ekle :

Dosya adı : federation.config.json

{
  "name": "bysContainer",
  "exposes": {
    "./store/features/inquireReceipt/inquireReceiptSlice": "./src/store/features/inquireReceipt/inquireReceiptSlice.ts"
  }
}

Son olarak npx make-federated-types komutu ile type çıkarımı yapılır. dist/@types dizini içerisinde index.d.ts dosyası oluşacaktır.

Eğer ekteki gibi hata alırsanız : ilgili slice içerisindeki CounterState type'nızı export etmeyi unutmuş olabilirsiniz.

TS Error 4023 : Exported variable 'store' has or is using name 'PopupState' from external module "src/store/features/popup/popupSlice" but cannot be named.
         at src/store/index.ts:12