react application deconstructed to Bit components, to be a shared-library https://bitsrc.io/bit/movie-app
Switch branches/tags
Nothing to show
Clone or download
GiladShoham Update README.md
update output for correct version of karma-mocha tester
Latest commit cc2a439 Jun 11, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config styled components Sep 4, 2017
public init Aug 7, 2017
scripts styled components Sep 4, 2017
src Revert "remove render annotations" Mar 21, 2018
.gitignore .gitignore - .vscode Mar 21, 2018
LICENSE new bit version Jan 21, 2018
README.md Update README.md Jun 11, 2018
package-lock.json update envs Mar 12, 2018
package.json update to react 16 Mar 7, 2018
yarn.lock styled components Sep 4, 2017

README.md

Tracking Bit Components - Movie App Example

This repository was exported as Bit components.

This is how we did it:

$ bit init
successfully initialized a bit workspace.
$ npm install

The bit init command has initialized a local Bit scope and created a bit.json file.

Next, we want to track the project's components as Bit components, and let Bit know which files are the test files.

$ bit add src/components/* -t 'src/components/{PARENT}/*.spec.js'
tracking 8 new components

After tracking, checking the status will prompt the following result:

$ bit status
new components
(use "bit tag --all [version]" to lock a version with all your changes)

     > components/hero ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/hero/Hero.js -> src/global.css

     > components/hero-button ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/hero-button/HeroButton.js -> src/global.css

     > components/item ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/item/Item.js -> src/global.css

     > components/list-toggle ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/list-toggle/ListToggle.js -> src/global.css

     > components/logo ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/logo/index.js -> src/global.css

     > components/navigation ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/navigation/Navigation.js -> src/global.css

     > components/title-list ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/title-list/TitleList.js -> src/global.css

     > components/user-profile ...  missing dependencies
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          src/components/user-profile/UserProfile.js -> src/global.css

Bit warns us that all the components has an untracked file dependency - this means that the component requires another file that is not tracked by Bit. We can either track the file as part of the existing component, or decide to track a new component, which is what we would do:

$ bit add src/global.css --id style/global
tracking component style/global:
added src/global.css

If we check the status, we can see all is well:

$ bit status
new components
(use "bit tag --all [version]" to lock a version with all your changes)

     > components/hero ... ok
     > components/hero-button ... ok
     > components/item ... ok
     > components/list-toggle ... ok
     > components/logo ... ok
     > components/navigation ... ok
     > components/title-list ... ok
     > components/user-profile ... ok
     > style/global ... ok

Next, we'll import a build environment and a test environment, so the components will be built and tested properly:

$ bit import bit.envs/bundlers/webpack-css-modules --compiler
the following component environments were installed
- bit.envs/bundlers/webpack-css-modules@0.0.7

$ bit import bit.envs/testers/karma-mocha --tester
the following component environments were installed
- bit.envs/testers/testers/karma-mocha@0.0.9

Now let's test the components!

$ bit test

We can see all the tests are ‘passed’. Sounds like a good time to tag and export the components to your scope on bitsrc.io.

$ bit tag --all 1.0.0
...9 components tagged | 9 added, 0 changed, 0 auto-tagged
added components:  style/global@1.0.0, components/hero-button@1.0.0, components/hero@1.0.0, components/list-toggle@1.0.0, components/item@1.0.0, components/logo@1.0.0, components/navigation@1.0.0, components/title-list@1.0.0, components/user-profile@1.0.0

$ bit export <UserName>.movie-app-example
exported 9 components to scope bit.movie-app-example

That's it, it's now possible to consume the components from any other project as individual components! Check out your scope on bitsrc.io.