tc-ui-toolkit v6.2.9
tc-ui-toolkit
React components used to develop tools for the desktop app translationCore.
Usage
First, install the package using npm:
npm install tc-ui-toolkit --save
Then, require the package and use it like so:
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
orsudo 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 theunfoldingWord/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.
- Checkout the master branch for
tc-ui-toolkit
(pull latest), create/checkout your branch calledmy-feature-branch
. - Implement your feature on
my-feature-branch
and test it in thetc-ui-toolkit-test
app (That workflow is outlined below) - Push your changes from
my-feature-branch
to thetc-ui-toolkit
origin - 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 prematurenpm publish
- This will give you the changes you made on
- 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 runrm -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 thenode_modules
- Note the workflow to make more changes from your
- When the feature you implemented is ready and all tests are passing then you are ready for PRs.
- 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.
- Make a PR on the
unfoldingWord/tc-ui-toolkit
repo with your feature implementationmy-feature-branch
- After the feature branch on tc-ui-toolkit gets merged make a PR on the
translationCore
repo with a new branch that includes the latesttc-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 inmy-feature-branch
, reflected in translationCore.
- Note: up until now you did not have to push any changes to a branch for the
- Once the PR has been merged, verify the fix from
my-feature-branch
is still working.
Publish Workflow
- Review and test PR
- If requirements are met merge it
- Checkout to
master
branch - run
git pull
- Bump package version number
- Usually will usually be a minor version check for me https://docs.npmjs.com/cli/version
npm i
npm publish
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). ornpm build src
to build your components code without watching for changes.
- In the root directory of
- 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.
- cd to
- In the
Directory & file structure (Root directory of components within tc-ui-toolkit
)
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 thesrc
folder intc-ui-toolkit-test
by including/importing the component as follow:
import { CheckInfoCard } from 'tc-ui-toolkit';
If you want to add additional components then import them as follow:
import { CheckInfoCard, OtherComponentName } from 'tc-ui-toolkit';
Then use the UI component as follow:
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
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
7 months ago
7 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago