Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
glints-aries
Advanced tools
Readme
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:
FAQs
Glints ui-kit for frontend
The npm package glints-aries receives a total of 229 weekly downloads. As such, glints-aries popularity was classified as not popular.
We found that glints-aries demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.