tc-ui-toolkit

npm

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 (
      
    )
    ;
  }
}

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.

Checkout the master branch for tc-ui-toolkit(pull latest), create/checkout your branch called my-feature-branch.
Implement your feature on my-feature-branch and test it in the tc-ui-toolkit-test app (That workflow is outlined below)
Push your changes from my-feature-branch to the tc-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 premature npm publish
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
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 implementation my-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 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.
Once the PR has been merged, verify the fix from my-feature-branch is still working.

Publish Workflow

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`)

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:

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="{{">
         console.log('clicked')}
        /&gt;
      </div>
    );
  }
}

References:

For material-ui-next related questions go to the material-ui-next website

Most popular functions for tc-ui-toolkit

To help you get started, we’ve selected a few tc-ui-toolkit examples, based on popular ways it is used in public projects.

tc-ui-toolkit.getAlignedText