This is about

  • TYPES
  • TOOLS
  • and DEPENDENCY MANAGEMENT

tahiti-booking

tsconfig.json
{
  "compilerOptions": {
	...
    "strict": true,
	...
},
<Input />
<CustomDatePicker />

tahiti-booking

package.json
{
  "name": "tahiti-booking",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
    "design-system": "git+ssh://git@github.com/blacklane/design-system.git#type-definition-rearrangement",
    ...
    }
}

react-phone-number-input

Disclamier

yarn resolutions

{
   ...
   
   "dependencies": {
     ...
   
     "design-system": "git+ssh://git@github.com/blacklane/design-system.git#type-definition-rearrangement",
   
     ...
   
    }
   
   ...

   "resolutions": {
    "react-phone-number-input": "2.3.14"
   }
 }

npm-force-resolutions

npm-shrinkwrap

react-day-picker

Design System

{
  "name": "design-system",
  "version": "0.0.1",
  "description": "Blacklane frontend design system 🎨",
  "dependencies": {
    ...
    "react": "^16.10.2",
    "react-click-outside": "github:tj/react-click-outside",
    "react-copy-to-clipboard": "^5.0.1",
    "react-day-picker": "git+https://github.com/Kjaer/react-day-picker.git#type-fix-LocaleUtils",
    "react-dom": "^16.10.2",
    ...
  }
}

Takeaways

Made with Slides.com