POC of Guild Mortgage's React UI Component library:

Folder Structure

• RootDir:
  • src (folder that contains human readable es6 components; this is where styleguidist reads from in order to serve the docs to the browser)
  • lib (folder which does not exist by default; but is transpiled into cross-browser readable code via babel. This folder contains the last version of the library)
  • webpack.config.js contains webpack config settings
  • .babelrc contains babel presets
  • .npmignore contains files and folders which will not be packaged up. This should be everything except the lib folder, package.json, package-lock.json, and README.md

To edit existing components:

• In src//index.js edit the component directly
• Edit the docs for your component to adjust for this change in src//.md
• If you need to install a library install it at the root level to the poc-guild-ui rootDir

To create a new component:

• In src/component create a folder with that component name in PascalCase (for instance, BasicCard)
• In src/component/ create an index.js file which will host the component, a .md file which will host the example code for the styleist docs
• If you need to install a library install it at the root level to the poc-guild-ui rootDir
• In src/components/index.js import your component and export it.

To create a new package version:

• After editing an existing component or creating a new component, run js npm run transpile
• mv lib/ lib-/ (this is so we can test specific versions). For instance: mv lib/ lib-v0.0.7
• After testing and documenting the component, push it to gitlab
• Increase the version number in package.json.
  • For official & stable releases: update the version number + 1.0.0
  • For unstable & unofficial releases: update the version number + 0.0.1
• NPM publish