Terra offers a set of configurable React components designed to help build scalable and modular application UIs. This UI library was created to solve real-world issues in projects we work on day to day.
Home Page: http://terra-ui.com
License: Apache License 2.0
Update
'../../../packages/terra-site/src/PropsTable';
to
'terra-site/src/PropsTable';
This will help ensure our packages will work outside the monorepo.
Any relative paths can be replaced by adding the package as a devDependency and referencing it directly.
Linting/Testing is starting to take a bit of time. We should investigate only testing packages that have impacted tests.
Only lint/test packages that have modified code.
CI runs lint/tests for all packages.
The README inside of packages/terra-component/docs/ and the README in packages/terra-component/, there are references to the old repos.
These files include the following lines:
- [Download the latest version](https://github.com/cerner/terra-arrange/archive/master.zip)
- Clone the repo: `git clone https://github.com/cerner/terra-arrange.git`
These need to be updated to the following:
- [Download the latest version](https://github.com/cerner/terra-ui/archive/master.zip)
- Clone the repo: `git clone https://github.com/cerner/terra-ui.git`
TODO:
Add other repos we need to do this for to checklist.
I don't think this file is currently being used: https://github.com/cerner/terra-ui/blob/master/jestconfig.json.
Can we remove it?
Snapshot Summary
› 36 obsolete snapshots found, run with `npm test -- -u` to remove them.
To remove obsolete snapshots, the script above must be executed in each package. It would be convenient to have the option of removing all obsolete snapshots in the repository.
https://github.com/cerner/terra-ui/tree/master/packages/terra-button/src
/src/
Button.jsx
Button.scss
https://github.com/cerner/terra-ui/tree/master/packages/terra-arrange/src
/src/
Arrange.jsx
Arrange.scss
When viewing the grid demos in storybook and prior to storybook, a horizontal scrollbar displays on the window.
The current implementation adds "grid gutters" via padding on both the left and right of columns. The outer padding on the first and last column should be canceled out by a negative left and right margin on the grid row. This is a popular approach taken by other frameworks. All of the other frameworks that use this approach are impacted by this issue as far as I could tell.
This issue is usually hidden by a container element which adds padding equal to or greater than the amount of the grid gutter. The container essentially consumes the space of the negative margins, eliminating the need for a horizontal scrollbar.
In legacy terra, we apply grid gutter spacing by applying it as left padding on columns. The left padding on the first column is then canceled out by a negative left margin on the row. This approach seems to achieve the same visual without triggering a horizontal scrollbar. This link describes some of the logic behind the legacy terra grid styling around this behavior: https://csswizardry.com/2011/08/building-better-grid-systems/
No horizontal bar appears on window when using grid
Horizontal bar appears on window when using grid when there is no margin/padding on the html or body element.
In the multi-repos, we had a LICENSE and NOTICE file. As we migrated some of the components to the monorepo, we removed these files as the thought was that they could live in the root directory of terra-ui. Thinking on this more, we need these files in the individual package directories so they are included in the distributed npm packages.
To Do
Cache node_modules to speed up testing
https://blog.travis-ci.com/2013-12-05-speed-up-your-builds-cache-your-dependencies
We have several packages that have documentation that states yarn install terra-*. The correct syntax is yarn add terra-*.
https://github.com/cerner/terra-ui/blob/master/packages/terra-button/docs/README.md#getting-started
Based on the spike we did on versioning, we came to the conclusion to pin terra components referenced as dependencies, devDependencies, and/or peerDependencies to singular versions rather than allowing ^ or ~ usage on version numbers which would allow versions to be updated the most recent major or minor version. This is to prevent duplicate versions being compiled in the webpack bundle.
Currently, terra-button has a devDependency on terra-site. terra-site also has a devDependency on terra-button. We should move the PropsTable and Markdown components currently in terra-site into their own package so there is not a circular dependency.
Currently, for each package we have
"compile": "npm run compile:clean && npm run compile:build",
"compile:clean": "rm -rf lib",
"compile:build": "$(cd ..; npm bin)/babel src --out-dir lib --copy-files",
"lint": "npm run lint:js && npm run lint:scss",
"lint:js": "$(cd ..; npm bin)/eslint --ext .js,.jsx . --ignore-path ../../.eslintignore",
"lint:scss": "$(cd ..; npm bin)/stylelint src/**/*.scss",
"release:major": "npm test && node ../../scripts/release/release.js major",
"release:minor": "npm test && node ../../scripts/release/release.js minor",
"release:patch": "npm test && node ../../scripts/release/release.js patch",
"test": "npm run test:spec && npm run test:nightwatch-default",
"test:spec": "$(cd ..; npm bin)/jest --config ../../jestconfig.json",
"test:all": "npm run test:nightwatch-default && npm run test:nightwatch-chrome && npm run test:nightwatch-firefox && npm run test:nightwatch-safari",
"test:nightwatch-default": "node ../../scripts/nightwatch/nightwatch.js",
"test:nightwatch-chrome": "node ../../scripts/nightwatch/nightwatch.js chrome",
"test:nightwatch-firefox": "node ../../scripts/nightwatch/nightwatch.js firefox",
"test:nightwatch-safari": "npm run test:nightwatch-safari-tiny && npm run test:nightwatch-safari-small && npm run test:nightwatch-safari-medium && npm run test:nightwatch-safari-large && npm run test:nightwatch-safari-huge && npm run test:nightwatch-safari-enormous",
"test:nightwatch-safari-tiny": "$(cd ..; npm bin)/nightwatch --config tests/nightwatch.conf.js -e safari-tiny",
"test:nightwatch-safari-small": "$(cd ..; npm bin)/nightwatch --config tests/nightwatch.conf.js -e safari-small",
"test:nightwatch-safari-medium": "$(cd ..; npm bin)/nightwatch --config tests/nightwatch.conf.js -e safari-medium",
"test:nightwatch-safari-large": "$(cd ..; npm bin)/nightwatch --config tests/nightwatch.conf.js -e safari-large",
"test:nightwatch-safari-huge": "$(cd ..; npm bin)/nightwatch --config tests/nightwatch.conf.js -e safari-huge",
"test:nightwatch-safari-enormous": "$(cd ..; npm bin)/nightwatch --config tests/nightwatch.conf.js -e safari-enormous"
If we need to change a script, we need to go update it in every single package. Instead, we should have the script in a single location and have all of the packages reference it. For example,
"compile": "npm run compile:clean && npm run compile:build",
to
"compile": "node ../../scripts/compile/index.js"
When running npm run lint in an individual package, the .eslitignore file is not honored.
Update
"lint:js": "../../node_modules/.bin/eslint **/*.js, **/*.jsx",
to
"lint:js": "../../node_modules/.bin/eslint **/*.js, **/*.jsx --ignore-path ../../.eslintignore",
The documentation site currently has dependencies on terra-application, terra-legacy-theme, and terra-react-svg-loader. These dependencies cannot be bootstrapped if they live in the root directory. We need to move the documentation site into it's own package to keep these dependencies up to date.
From PR for uplifting component to react component, there is a need for a responsive block button. This would be a button that displays as a block button at a set screen width and a normal button at another screen width. More details are needed on the specific requirements for this feature.
A button that displays as a block button at a set screen width and a normal button at another screen width.
N/A
When merging branches to master, we have to manually deploy the changes. This is something that could be automated with Travis CI.
When merging branches to master, I would like to automate deploying to gh-pages.
Need to manually deploy changes to master to gh-pages.
The instructions in RELEASE.md have grown out of date with the changes to a monorepo and addition of our release scripts.
We should just document what process we go through when we release the next component and update this file with those instructions.
Add existing contributors to contributors.md
A common pattern for npm modules is to add the lib(es5) directory to the .gitignore and add the src(es6) directory to the .npmignore. Babel is an example of this pattern that also uses lerna.
More information can be found in this article:
http://jamesknelson.com/writing-npm-packages-with-es6-using-the-babel-6-cli/
We have a bunch of phase 1 components which just have .scss and html. We need to migrate these over to the open source repo so we can iterate on them. Below is a list of issue to migrate over these type of components.
Contributing and Supported Browsers will live in the root directory. We don't need it in every package.
I would like to automate testing, linting, and compiling before any git pushes.
We had created a webpack react-svg-loader when we initially worked on terra-icon, however we pulled it as we ran into various issues with testing it. This issue is for re-evaluating the loader and migrating that work into terra-core.
Ability to import an SVG icon and convert it to a react component on the fly via webpack loader.
N/A
Create pagination component.
Needs expected behavior defined
N/A
npm run compile will transpile our js and copy files into the lib directory. Old files will persist unless we remove them. Before compiling, we should clean out the lib directory.
Prepush script that involves testing doesn't succeed with SourceTree
Prepush script that involves testing succeeds with SourceTree
SourceTree is not able this run this script successfully. git push is successful from the command line but pushing from SourceTree results in the following error:
git -c diff.mnemonicprefix=false -c core.quotepath=false -c credential.helper=sourcetree push -v origin refs/heads/ResponsiveElement:refs/heads/ResponsiveElement
Pushing to [email protected]:cerner/terra-ui.git
error: failed to push some refs to '[email protected]:cerner/terra-ui.git'
> husky - npm run -s prepush
> husky - pre-push hook failed (add --no-verify to bypass)
> husky - to debug, use 'npm run precommit'
Completed with errors, see aboveUntil we are ready to publish, set private: true in each package. This will prevent accidental publishing.
https://docs.npmjs.com/files/package.json
There are duplicate npm-scripts used across all terra-core packages. @ryanthemanuel had some ideas on ways we could reduce this duplication. Some options to look into are having all the scripts point to a .js file in the root directory for each script and using shelljs to run tasks. Another option is to investigate https://www.npmjs.com/package/npm-run to run tasks.
Duplicate npm-scripts are reduced
Duplicate npm-scripts are in every package.json
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.