React components used to develop tools for the desktop app translationCore
npm install tc-ui-toolkit !npm

React components used to develop tools for the desktop app translationCore.
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 (
)
;
}
}
`
- Run npm run setup
or
- npm inpm run build
- npm link
- or sudo npm linkcd tc-ui-toolkit-test
- npm i
- npm link tc-ui-toolkit
-
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.node_modules
- You do not have to do anything different if your changes are reflected in a translationCore tool. Because the tool will get its from translationCore during runtime.
1. Checkout the master branch for tc-ui-toolkit(pull latest), create/checkout your branch called my-feature-branch.my-feature-branch
2. Implement your feature on and test it in the tc-ui-toolkit-test app (That workflow is outlined below)my-feature-branch
3. Push your changes from to the tc-ui-toolkit originnpm i unfoldingWord/tc-ui-toolkit#my-feature-branch
4. Once you are ready to test your app on the translationCore repo run in your translationCore root directorytc-ui-toolkit/my-feature-branch
- This will give you the changes you made on without having to do a premature npm publishmy-feature-branch
5. Ensure all changes work as expected on translationCore branch.
- Note the workflow to make more changes from your 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_modulesnpm uninstall tc-ui-toolkit; npm i tc-ui-toolkit;
6. When the feature you implemented is ready and all tests are passing then you are ready for PRs.
7. run in the translationCore root directoryunfoldingWord/tc-ui-toolkit
- 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 repo with your feature implementation my-feature-branchtranslationCore
9. After the feature branch on tc-ui-toolkit gets merged make a PR on the repo with a new branch that includes the latest tc-ui-toolkit versiontc-ui-toolkit
- Note: up until now you did not have to push any changes to a branch for the 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.my-feature-branch
10. Once the PR has been merged, verify the fix from is still working.
1. Review and test PR
2. If requirements are met merge it
3. Checkout to master branchgit pull
4. run npm i
5. Bump package version number
- Usually will usually be a minor version check for me https://docs.npmjs.com/cli/version
6. npm publish
7. git push
8.
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-toolkitnpm start
- so that webpack watches your changes and reloads (Live hot reloading).npm build src
or
- to build your components code without watching for changes.tc-ui-toolkit-test
- Terminal 2
- In the directory (To render the component in the browser)tc-ui-toolkit-test
- cd to npm start
- run tc-ui-toolkit-test
- Then the 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 (
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')}
/>
);
}
}
References:
-
-
For material-ui-next` related questions go to the material-ui-next website