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>;
yarn storybook
then open your browser on port 9001
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
.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:
Author: glints-dev
Demo: http://aries.glints.design/?path=/story/introduction--getting-started
Source Code: https://github.com/glints-dev/glints-aries
#reactjs #react #javascript