@pradnyak/new-lib

Typescript + storybook +webpack(already included in storybook lib)

1.Cannot read property 'createSnapshot' of undefined Error -> its due to mismatch of webpack dependncies 2.Cannot read property 'get' of undefined -> added "dotenv-webpack": "^7.0.2", plugin -> below plugins for eslint config "@typescript-eslint/eslint-plugin": "^4.22.0", "@typescript-eslint/parser": "^4.22.0", "eslint": "^7.25.0", "eslint-plugin-react": " 3.ESlint Setting.json: => "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.tslint": true },

##Developer Guidelines

• Naming Conventions:

  • Variables Interface: I[Name] or I[Name]Props. E.g.: IBoxProps, IButtonProps, etc Types: t[Name]. E.g.: tDisplay, tColor, tBgColor, etc.

  • Files Components: index.tsx Stories: xxx.stories.tsx Unit Tests: xxx.test.tsx

• Before Raising Merge Requests:

  • Make sure all your components are exported as part of the library in index.tsx

  • Storybook

    • Component should be listed appropriately in atoms, molecules or organisms folder.
    • Component should have knobs.
    • Component should have actions if User Interaction is possible.
    • Component source code should be visible in Story source tab.
    • Props details should be shown appropriately in Docs section.

  • Testing

    • Component should have .test.tsx files
    • Use npm run test or npm run test:watch to ensure no existing tests are failing.

External References

- Image Import
   - https://www.pluralsight.com/guides/how-to-load-svg-with-react-and-webpack