We proudly present to you Glints Aries created by the front-end engineers of Glints. It is a front-end framework to simplify and speed up your development. This project is built with React and Styled Components. We are still actively developing this project day by day and there are still a ton of amazing components to be built.
npm install -S glints-aries
Before you start implementing the component, it's always a good idea to wrap your root component with <GlintsContainer />
.
We created that Container to adapt with every screen size, so users will always have the best experience regardless of the device they use.
For more details, you can read this at Utilities, then GlintsContainer section.
import { GlintsContainer } from 'glints-aries';
<GlintsContainer>
<Component />
</GlintsContainer>;
Before that, make sure you already have git, node (version >= 14), and yarn installed.
git clone git@github.com:glints-dev/glints-aries.git
yarn
yarn build
yarn storybook
Note: For Windows user, please use WSL2 Linux to execute all the commands above. Make sure that the repository is cloned on the linux folder, not on your C drive.
install yalc globally
yarn global add yalc
in your local glints-aries
directory:
yarn build
yalc publish
in your dependent project:
yalc add glints-aries
yarn start:dev
unlink local glints-aries
in dependent project:
yalc remove glints-aries
yarn install
glints-aries
.yarn link
.yarn link glints-aries
.yarn build
in glints-aries
when finish changes and want to test locally in your project.Run yarn unlink glints-aries
and re-install glints-aries
when you want to stop using local glints-aries
Currently there is an issue where the above leads to react complaining about multiple instances of react being found. The error message says Uncaught Invariant Violation: Invalid hook call [...]
. If you encounter this, you can link your project's react into your local Glints Aries:
cd node_modules/react
.yarn link
.glints-aries
.yarn link react
.We use playwright visual comparison test for components to check for regressions, since images in every browser and machine can be rendered differently we'll use docker image to generate and compare the screenshots.
All visual test and screenshots can be found in test/e2e
directory
To generate new screenshots locally:
Create docker image with docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.29.0-focal /bin/bash
Run following commands in that image:
yarn install
or npm install
yarn storybook
npx playwright test --update-snapshots
import * as React from 'react'; // React
import classNames from 'classnames'; // Third-party
import PropTypes from 'prop-types'; // Third-party
import Modal from '../../Display/Modal'; // Glints Aries component
import { escEvent } from '../../Utils/DomUtils'; // Glints Aries utilities
import { Container, ModalBackground, ModalArea } from '../../Style/ModalStyle'; // Styling
Always give line break between different section when importing.
const { type, children, className, ...defaultProps } = this.props;
background-color: #EC272B; // Wrong
background-color: ${PrimaryColor.glintsred}; // Right
@media (min-width: 640px) { ... } // Wrong
@media (min-width: ${ScreenSize.mobileL}px) { ... } //Right
Use the component name followed by the role of that style.
CheckboxContainer
1. Name: Checkbox
2. Role: Container
JobcardImageWrapper
1. Name: Jobcard
2. Role: ImageWrapper
<Collapsible onHoverColor="#FAFAFA" /> // Wrong
// Wrong
<div className="container">
<div className="wrapper">
<div>
<h1>This is Heading</h1>
</div>
</div>
</div>
A standalone piece of software that has a clear boundary that is accessible via an API and contains all of the application dependencies.
Creating and maintaining a consistent UI and UX across every part of our product. It helps users intuitively navigate and successfully interact with different sections of your applications without confusion. It also creates sense of branding.
If you design a component, you should pay attention to
Find out more about the following topics in our wiki: