{"id":35394872,"url":"https://github.com/glints-dev/glints-aries","last_synced_at":"2026-04-21T08:08:40.826Z","repository":{"id":33264921,"uuid":"137865730","full_name":"glints-dev/glints-aries","owner":"glints-dev","description":"React UI Framework built with React and Styled-components","archived":false,"fork":false,"pushed_at":"2026-04-14T04:08:34.000Z","size":70332,"stargazers_count":31,"open_issues_count":25,"forks_count":21,"subscribers_count":6,"default_branch":"v4","last_synced_at":"2026-04-14T06:02:53.635Z","etag":null,"topics":["reactjs","storybook","styled-components","webpack4"],"latest_commit_sha":null,"homepage":"http://aries.glints.design/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/glints-dev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-06-19T08:55:23.000Z","updated_at":"2026-04-14T04:08:37.000Z","dependencies_parsed_at":"2023-12-22T07:35:51.528Z","dependency_job_id":"a0216894-529f-479d-b6d9-25d9efeade9d","html_url":"https://github.com/glints-dev/glints-aries","commit_stats":null,"previous_names":[],"tags_count":665,"template":false,"template_full_name":null,"purl":"pkg:github/glints-dev/glints-aries","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glints-dev%2Fglints-aries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glints-dev%2Fglints-aries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glints-dev%2Fglints-aries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glints-dev%2Fglints-aries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glints-dev","download_url":"https://codeload.github.com/glints-dev/glints-aries/tar.gz/refs/heads/v4","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glints-dev%2Fglints-aries/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32082809,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T06:27:27.065Z","status":"ssl_error","status_checked_at":"2026-04-21T06:27:21.250Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["reactjs","storybook","styled-components","webpack4"],"created_at":"2026-01-02T09:29:07.210Z","updated_at":"2026-04-21T08:08:40.795Z","avatar_url":"https://github.com/glints-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introduction\n\nWe 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.\n\n### Installation\n\n```bash\nnpm install -S glints-aries\n```\n\n### Basic usage\n\nBefore you start implementing the component, it's always a good idea to wrap your root component with `\u003cGlintsContainer /\u003e`.\nWe created that Container to adapt with every screen size, so users will always have the best experience regardless of the device they use.\nFor more details, you can read this at Utilities, then GlintsContainer section.\n\n```js\nimport { GlintsContainer } from 'glints-aries';\n\n\u003cGlintsContainer\u003e\n  \u003cComponent /\u003e\n\u003c/GlintsContainer\u003e;\n```\n\n### Demo\n\n[http://aries.glints.design/](http://aries.glints.design/)\n\n### Development\n\nBefore that, make sure you already have git, node (version \u003e= 14), and yarn(version \u003e= 1.22.0) installed.\n\n1. Clone the repository\n\n```bash\ngit clone git@github.com:glints-dev/glints-aries.git\n```\n\n2. Install the project dependencies (preferably use yarn here), then build the project\n\n```bash\nyarn\nyarn build\n```\n\n3. Start the application\n\n```bash\nyarn storybook\n```\n\n4. Open your browser on (port 6006)[http://localhost:6006].\n\nNote: For Windows user, please use [WSL2 Linux](https://learn.microsoft.com/en-us/windows/wsl/install) to execute all the commands above. Make sure that the repository is cloned on the linux folder, not on your C drive.\n\n### How to test local changes in glints-aries in your project\n\n#### yalc\n\ninstall [yalc](https://github.com/whitecolor/yalc) globally\n\n```bash\nyarn global add yalc\n```\n\nin your local `glints-aries` directory:\n\n```bash\nyarn build\nyalc publish\n```\n\nin your dependent project:\n\n```bash\nyalc add glints-aries\nyarn start:dev\n```\n\nunlink local `glints-aries` in dependent project:\n\n```bash\nyalc remove glints-aries\nyarn install\n```\n\n#### yarn link (might not work)\n\n1. Open terminal in `glints-aries`.\n2. Run `yarn link`.\n3. Open terminal in your project.\n4. Run `yarn link glints-aries`.\n5. Run `yarn build` in `glints-aries` when finish changes and want to test locally in your project.\n\nRun `yarn unlink glints-aries` and re-install `glints-aries` when you want to stop using local `glints-aries`\n\nCurrently 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:\n\n1. Open terminal in your project.\n2. Run `cd node_modules/react`.\n3. Run `yarn link`.\n4. Open terminal in `glints-aries`.\n5. Run `yarn link react`.\n\n### Adding visual test\n\nWe use [playwright](https://playwright.dev/docs/test-snapshots) 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.\n\nAll visual test and screenshots can be found in `test/e2e` directory\n\nTo generate new screenshots locally:\n\nCreate docker image with `docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.29.0-focal /bin/bash`\n\nRun following commands in that image:\n\n1. Install the dependencies `yarn install` or `npm install`\n2. Run storybook `yarn storybook`\n3. Generate screenshot of your tests with `npx playwright test --update-snapshots`\n4. Commit and push your test screenshots\n\n### Code structure in glints-aries\n\n1. Always do alphabetically when importing file.\n2. Put file on proper folder based on each respective uses.\n3. Use 2 Indent Spaces and Tab on the code.\n4. Follow this import structure for your code\n   - First: always import **React** library at first.\n   - Second: third-party.\n   - Third: glints-aries component.\n   - Fourth: glints-aries utilities.\n   - Fifth: styling.\n\n```js\nimport * as React from 'react'; // React\n\nimport classNames from 'classnames'; // Third-party\nimport PropTypes from 'prop-types'; // Third-party\n\nimport Modal from '../../Display/Modal'; // Glints Aries component\n\nimport { escEvent } from '../../Utils/DomUtils'; // Glints Aries utilities\n\nimport { Container, ModalBackground, ModalArea } from '../../Style/ModalStyle'; // Styling\n```\n\nAlways give line break between different section when importing.\n\n5. Follow this code structure for your code\n   - First: Constructor / State\n   - Second: Local Function\n   - Third: React life cycle\n   - Forth: Render\n6. Always do line break whenever your import or variable is so long.\n   You can do it like this but you can do it in another format as long as it can be legible and not long.\n\n```js\nconst { type, children, className, ...defaultProps } = this.props;\n```\n\n### Code Procedure\n\n1. Use Color library instead of writing hex codes.\n\n```js\nbackground-color: #EC272B; // Wrong\nbackground-color: ${PrimaryColor.glintsred}; // Right\n```\n\n2. Use ScreenSize instead of writing pixel size number.\n\n```js\n@media (min-width: 640px) { ... } // Wrong\n@media (min-width: ${ScreenSize.mobileL}px) { ... } //Right\n```\n\n3. Naming convention for styled-components.\n\nUse the component name followed by the role of that style.\n\n```bash\nCheckboxContainer\n1. Name: Checkbox\n2. Role: Container\n\nJobcardImageWrapper\n1. Name: Jobcard\n2. Role: ImageWrapper\n```\n\n4. Avoid offering styling props on a component.\n\n```js\n\u003cCollapsible onHoverColor=\"#FAFAFA\" /\u003e // Wrong\n```\n\n5. Minimize the number of elements inside a Component\n\n```js\n// Wrong\n\u003cdiv className=\"container\"\u003e\n  \u003cdiv className=\"wrapper\"\u003e\n    \u003cdiv\u003e\n      \u003ch1\u003eThis is Heading\u003c/h1\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n6. Fix eslint/react warnings before pushing your code.\n\n# What is Component?\n\nA standalone piece of software that has a clear boundary that is accessible via an API and contains all of the application dependencies.\n\n### Why we need a component-based design system?\n\n1. Create consistent experience throughout our UI.\n2. Component accelerates development.\n\n### What we need to prepare for constructing a design system?\n\n1. Identify company culture/ mission\n2. Base Color\n3. Type scale\n4. Border radius (rounding corner or sharp corner)\n5. Spacing scale (line-height)\n6. Letter spacing\n7. Shadow (how our shadow look like on every component)\n\n**Creating and maintaining a consistent UI and UX across every part of our product.**\nIt helps users intuitively navigate and successfully interact with different sections of your applications without confusion. It also creates sense of branding.\n\nIf you design a component, you should pay attention to\n\n1. Functional Consistency\n2. Visual Consistency\n\n### What defines a great component?\n\n1. Interface defines the component so component should respect the context. It means that Interface should be able to work in any possible context.\n2. Interface should have clear usability.\n3. Component should be flexible but still consistent.\n4. Only support functional interaction, not style.\n5. Great component supports accessibility.\n\n### How can we improve glints-aries?\n\n1. Always leave room for component to be flexible but still consistent.\n2. Component size should be flexible in every environment.\n3. Glints Aries’s interface should be able handle any possibilities.\n4. The name of the component must be easy to understand and clear based on the usage.\n5. Differentiate between component that should have children and self-closing tag.\n6. Improve accessibility.\n7. Always checking your code whether it's having clash with existing code.\n   - Do manual test.\n   - Remove all warnings and errors before push it to Github.\n\n# More about Glints Aries\n\nFind out more about the following topics in our wiki :\n\n- [Contributing](https://github.com/glints-dev/glints-aries/wiki/Contributing)\n- [Roadmap](https://github.com/glints-dev/glints-aries/wiki/Roadmap)\n- [Testing](https://github.com/glints-dev/glints-aries/wiki/Testing)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglints-dev%2Fglints-aries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglints-dev%2Fglints-aries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglints-dev%2Fglints-aries/lists"}