{"id":17817885,"url":"https://github.com/0xtheprodev/ui-components","last_synced_at":"2025-07-16T12:36:19.040Z","repository":{"id":136028344,"uuid":"151918675","full_name":"0xTheProDev/ui-components","owner":"0xTheProDev","description":"Reusable React components for SendGrid's applications","archived":false,"fork":false,"pushed_at":"2019-08-02T20:00:17.000Z","size":102643,"stargazers_count":0,"open_issues_count":0,"forks_count":12,"subscribers_count":0,"default_branch":"master","last_synced_at":"2024-10-27T17:48:20.670Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://styleguide.sendgrid.com/","language":"TypeScript","has_issues":false,"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/0xTheProDev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-07T07:58:36.000Z","updated_at":"2019-08-15T20:14:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"bfc02723-4e30-4282-9541-37d60f3b44cc","html_url":"https://github.com/0xTheProDev/ui-components","commit_stats":null,"previous_names":[],"tags_count":85,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xTheProDev%2Fui-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xTheProDev%2Fui-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xTheProDev%2Fui-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xTheProDev%2Fui-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0xTheProDev","download_url":"https://codeload.github.com/0xTheProDev/ui-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229772349,"owners_count":18121892,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-10-27T16:46:35.078Z","updated_at":"2024-12-15T01:28:11.135Z","avatar_url":"https://github.com/0xTheProDev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![SendGrid Logo](https://uiux.s3.amazonaws.com/2016-logos/email-logo%402x.png)\n\n# SendGrid UI Components\n\n[![Twitter Follow](https://img.shields.io/twitter/follow/sendgrid.svg?style=social\u0026label=Follow)](https://twitter.com/sendgrid)\n[![GitHub contributors](https://img.shields.io/github/contributors/sendgrid/docs.svg)](https://github.com/sendgrid/ui-components/graphs/contributors)\n[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)\n\nRe-useable React components based on the SendGrid Style Guide. [See them in action here](https://sendgrid.github.io/ui-components).\n\n## Getting Started with UI Components in your project\n\nMake sure your project has all required dependencies and development dependencies installed.\n\n```\nnpm install\n```\n\n### Using your local UI Components in your project\n\n```bash\ncd ~/ui-components/packages/ui-components\nnpm link\n\u003e info You can now run `npm link \"@sendgrid/ui-components\"` in the projects where you want to use this package and it will be used instead.\ncd ~/ui-components/\nnpx tsc --newline lf --watch\n```\n\n```bash\ncd ~/myCoolProject/\nnpm link \"@sendgrid/ui-components\"\n```\n\nList of available components in [Available Components](#available-components) section.\n\n### Importing a Particular Component\n\nYou can import just the components that you need.\n\n```js\nimport Badge from '@sendgrid/ui-components/badge';\n```\n\n### Importing UI Components into Your Project\n\nImporting all of UI Components is discouraged and will be deprecated in a a future version of UI Components.\n\n```ts\nimport { Badge } from '@sendgrid/ui-components';\n```\n\n\n### Getting Styles to Work\n\nUI-Components uses a mix of module styles and global styles to insert style guide. To use module styles for each individual component, you'll need to update your webpack config to parse module styles from files with the naming convention `.module.scss`.\n\n```js\nconfig.module.rules.push({\n  test: /\\.module.scss$/,\n  use: [\n    require.resolve('style-loader'),\n    {\n      loader: require.resolve('css-loader'),\n      options: {\n        sourceMap: true,\n        importLoaders: 1,\n        modules: true,\n        localIdentName: '[name]__[local]___[hash:base64:5]',\n      },\n    },\n    {\n      loader: require.resolve('sass-loader'),\n      options: {\n        sourceMap: true,\n        modules: true,\n        importLoaders: 1,\n        localIdentName: '[name]__[local]___[hash:base64:5]',\n      },\n    },\n  ],\n});\n```\n\nTo use the global application styles included with styleguide (such as typography, reset, tables, and more), you'll need to include the following in your root component:\n\n```js\nimport '../path_to_uicomponents/packages/styles/global/main.scss';\n```\n\n### Starting Storybook\n\nAfter running `npm install` and ensuring that style-guide is pulled properly just run `npm run storybook` and you should be good to go!\n\n### Adding Test Hooks\n\nFor many components, it's useful for testing to have attributes that make them easy to query for and select.\n\nFor this, use `attributes={{'data-test':\"some-test-id}}\"` as an attribute that describes the component. If it's possible, you can and should include the `data-test` attribute to create a unique identifier.\n\n### What are these Stateful Components?\n\n**Nota bene**: Stateful components are deprecated and should *not* be used in production projects.\n\nState is hard and all of the UI components should be purely presentational. But, that makes them hard to test out in Storybook. The stateful components (e.g. `StatefulTextInput`) are solely for working with Storybook and are not supported or endorsed in any way. Think of them as a private API. They can be removed at any time. You've been warned.\n\n## Contributing to UI Components\n\nSee [CONTRIBUTING.md](https://github.com/sendgrid/ui-components/blob/master/CONTRIBUTING.md)\n\nInstall project dependencies with:\n\n```\nnpm ci\n```\n\n## Semantic Versioning\n\nWhen making a pull request, make sure the title has a [semantic version](https://semver.org/) bump level defined (**#major**, **#minor**, or **#patch**).\n\nSemantic versioning bumps are used to know when to update the [@sendgrid/ui-components npm package](https://www.npmjs.com/package/@sendgrid/ui-components). Patches and minor changes will be updated automatically, but major changes will update if you update your npm package version manually.\n\nMore information: https://semver.org/\n\n## Available Commands\n\n- `npm run start`: This is an alias for `npm run storybook`\n- `npm run storybook`: Start Storybook on port 6006.\n- `npm run build`: Builds the assets for deployment.\n- `npm run lint`: Runs the linter.\n- `npm run lint-fix`: Runs the linter and auto-fixes the errors it can auto-fix.\n- `npm run test`: Run the unit tests.\n- `npm run snapshot`: Update snapshot tests. Make sure you run the tests first and you're not overwriting snapshots by accident.\n- `npm run lint-snapshot`: A combination of `npm run lint` and `npm run snapshot`.\n- `npm run ci-test`: Test used for the CI build (doesn't use interactive mode).\n- `npm run build-storybook`: Build a deployable version of the Storybook.\n- `npm run prepare`: Used by npm to build the assets before publishing.\n- `npm run image-snapshots`: Builds a static index.html file and runs image snapshot tests.\n- `npm run update-icon-types`: Pull latest styleguide css and update the types of icon to match all found instances of sg-icon-${type}\n\n## Updating Icons\n\nTo update icons with the latest from StyleGuide follow these steps to change the font files and update necessary classes and variables.\n\n1. Download `eot`, `ttf`, `woff`, `woff2` files from [StyleGuide Icons](https://github.com/sendgrid/style-guide/tree/master/packages/style-guide/fonts/icons)\n2. Replace files in the [icons](src/styles/fonts/icons) directory with those that were downloaded\n3. Add new variable to the [variables](src/styles/global/variables.scss) file with the unicode value found in the [StyleGuide SVG](https://raw.githubusercontent.com/sendgrid/style-guide/master/packages/style-guide/fonts/icons/style-guide-icons.svg) file\n4. Add new style class for the icon in [icon.module.scss](src/styles/icon.module.scss) prepended with `.sg-icon-` and use the variables that were created in step 3\n5. Run `npm run update-icon-types` to add the new icon as a type in [icons.ts](src/types/icons.ts)\n\n## Testing\n\nTo make sure your additions don't break UI Components, run `npm run test`, which will test all of your changed `*.test.*` files and show a coverage report. To check image snapshots run `npm run image-snapshots` updating and other commands can be passed through to jest like `npm run image-snapshots -- -u`.\n\n**Image Snapshots \u0026 Docker**:\n\n- Since we run image snapshots in Buildkite with docker we need to run them locally with docker as well because different OSs render fonts and other things differently. We don't publish our docker image so you'll have to build and re-build the image any time our dependencies change in `package.json`. To do so just run the command `docker-compose build build`. This should build the container and be ready to run.\n\n**Image Snapshots \u0026 Animations**:\n\n- We add a css rule in storybook when we detect the `file://` pattern that disables all animations on the page so we can get consistent image snapshots with animations.\n\n## Deploying\n\nVisit the [Buildkite Master Branch](https://buildkite.com/sendgrid/ui-components/builds?branch=master) and select the semantic version appropriate to your deployment and you should be off and away. Make sure to post in `eng-guild-frontend` that a new version is going out.\n\n\u003ca name=\"license\"\u003e\u003c/a\u003e\n\n# License\n\n[The MIT License (MIT)](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xtheprodev%2Fui-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0xtheprodev%2Fui-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xtheprodev%2Fui-components/lists"}