tc-ui-toolkit
Version:
React components used to develop tools for the desktop app translationCore
177 lines (141 loc) • 6.55 kB
Markdown
# tc-ui-toolkit
[](https://travis-ci.org/unfoldingWord/tc-ui-toolkit) 
[](https://www.npmjs.com/package/tc-ui-toolkit)
React components used to develop tools for the desktop app [translationCore](https://github.com/unfoldingWord-dev/translationCore).
## Usage
First, install the package using npm:
```js
npm install tc-ui-toolkit --save
```
Then, require the package and use it like so:
```js
import { CheckInfoCard } from 'tc-ui-toolkit';
class App extends Component {
render() {
return (
<CheckInfoCard />
)
;
}
}
```
## Contributing
### Environment setup
- Run `npm run setup`
or
- `npm i`
- `npm run build`
- `npm link` or `sudo npm link`
- `cd tc-ui-toolkit-test`
- `npm i`
- `npm link tc-ui-toolkit`
## Git Branch Management
Note:
- I am using the feature branch named `my-feature-branch` which is a branch you would have created on the `unfoldingWord/tc-ui-toolkit` repo for your feature implementation.
- You do not have to do anything different if your changes are reflected in a translationCore tool. Because the tool will get its `node_modules` from translationCore during runtime.
1. Checkout the master branch for `tc-ui-toolkit`(pull latest), create/checkout your branch called `my-feature-branch`.
2. Implement your feature on `my-feature-branch` and test it in the `tc-ui-toolkit-test` app (That workflow is outlined below)
3. Push your changes from `my-feature-branch` to the `tc-ui-toolkit` origin
4. Once you are ready to test your app on the translationCore repo run `npm i unfoldingWord/tc-ui-toolkit#my-feature-branch` in your translationCore root directory
- This will give you the changes you made on `tc-ui-toolkit/my-feature-branch` without having to do a premature `npm publish`
5. Ensure all changes work as expected on translationCore branch.
- Note the workflow to make more changes from your `my-feature-branch` and test them on translationCore is to simply repeat step 3, and then run `rm -rf node_modules/tc-ui-toolkit; npm i tc-ui-toolkit;` in the translationCore root directory. This will give you the pushed changes without having to re-install all the `node_modules`
6. When the feature you implemented is ready and all tests are passing then you are ready for PRs.
7. **run `npm uninstall tc-ui-toolkit; npm i tc-ui-toolkit;`** in the translationCore root directory
- This will ensure that you do not have the tc-ui-toolkit branch as a npm version. That was merely for testing, not production.
8. Make a PR on the `unfoldingWord/tc-ui-toolkit` repo with your feature implementation `my-feature-branch`
9. After the feature branch on tc-ui-toolkit gets merged make a PR on the `translationCore` repo with a new branch that includes the latest `tc-ui-toolkit` version
- Note: up until now you did not have to push any changes to a branch for the `tc-ui-toolkit` feature implementation. At this point you will have to do so in order to see changes you made in `my-feature-branch`, reflected in translationCore.
10. Once the PR has been merged, verify the fix from `my-feature-branch` is still working.
## Publish Workflow
1. Review and test PR
2. If requirements are met merge it
3. Checkout to `master` branch
4. run `git pull`
5. Bump package version number
- Usually will usually be a minor version check for me https://docs.npmjs.com/cli/version
6. `npm i`
7. `npm publish`
8. `git push`
## Component Development
`tc-ui-toolkit` components should be developed inside their own folder in the `src` folder.
Use the `CheckInfoCard` component as a guide to develop your own `tc-ui-toolkit` components.
#### Commands to get your development rolling
- Terminal 1
- In the root directory of `tc-ui-toolkit`
- `npm start` so that webpack watches your changes and reloads (Live hot reloading).
or
- `npm build src` to build your components code without watching for changes.
- Terminal 2
- In the `tc-ui-toolkit-test` directory (To render the component in the browser)
- cd to `tc-ui-toolkit-test`
- run `npm start`
- Then the `tc-ui-toolkit-test` app should open in your default browser.
#### Directory & file structure (Root directory of components within `tc-ui-toolkit`)
```js
src
│ index.js
│ index.test.js
│
└───CheckInforCard
│ │ CheckInfoCard.js
│ │ CheckInfoCard.test.js
│ │ CheckInfoCard.styles.css
│ │ index.js
│ │ ...
│
└───ComponentName
│ │ ComponentName.js
│ │ ComponentName.test.js
│ │ ComponentName.styles.css
│ │ index.js
│ │ ...
│ └───SubComponentName
│ │ │ ComponentName.test.js
│ │ │ ComponentName.styles.css
│ │ │ index.js
│ │ │ ...
│ └───SubComponentName
│ │ ComponentName.test.js
│ │ ComponentName.styles.css
│ │ index.js
│ │ ...
│
└───ComponentName
│ ComponentName.js
│ ComponentName.test.js
│ ComponentName.styles.css
│ index.js
│ ...
```
#### Rendering your Component UI in the browser
- To render your Component UI in the browser edit the `App.js` file inside the `src` folder in `tc-ui-toolkit-test` by including/importing the component as follow:
```js
import { CheckInfoCard } from 'tc-ui-toolkit';
```
If you want to add additional components then import them as follow:
```js
import { CheckInfoCard, OtherComponentName } from 'tc-ui-toolkit';
```
Then use the UI component as follow:
```js
class App extends Component {
render() {
return (
<div style={{ padding: '10px' }}>
<CheckInfoCard
title="save, saves, saved, safe, salvation"
phrase='The term "save" refers to keeping someone from experiencing something bad or harmful. To "be safe" means to be protected from harm or danger.'
seeMoreLabel="See More"
showSeeMoreButton={false}
onSeeMoreClick={() => console.log('clicked')}
/>
</div>
);
}
}
```
References:
- <https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce>
- <https://codeburst.io/how-to-create-and-publish-your-first-node-js-module-444e7585b738>
For `material-ui-next` related questions go to the [material-ui-next website](https://material-ui-next.com/)