{"id":21638068,"url":"https://github.com/purecloudlabs/genesys-react-components","last_synced_at":"2025-04-11T16:42:21.933Z","repository":{"id":39795246,"uuid":"428291143","full_name":"purecloudlabs/genesys-react-components","owner":"purecloudlabs","description":"A React component library containing standardized form elements.","archived":false,"fork":false,"pushed_at":"2025-04-03T20:55:07.000Z","size":7903,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-03T20:55:15.170Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/purecloudlabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2021-11-15T14:13:26.000Z","updated_at":"2025-04-03T20:52:14.000Z","dependencies_parsed_at":"2023-12-13T20:46:38.537Z","dependency_job_id":"ff08feac-5a2c-4b3d-bb34-2c38494f5d70","html_url":"https://github.com/purecloudlabs/genesys-react-components","commit_stats":{"total_commits":90,"total_committers":5,"mean_commits":18.0,"dds":"0.43333333333333335","last_synced_commit":"27e886a99c807a59df420e81fe3ae0ca202b6769"},"previous_names":[],"tags_count":111,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purecloudlabs%2Fgenesys-react-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purecloudlabs%2Fgenesys-react-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purecloudlabs%2Fgenesys-react-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/purecloudlabs%2Fgenesys-react-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/purecloudlabs","download_url":"https://codeload.github.com/purecloudlabs/genesys-react-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248442305,"owners_count":21104154,"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-11-25T04:08:04.771Z","updated_at":"2025-04-11T16:42:21.910Z","avatar_url":"https://github.com/purecloudlabs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Genesys React Components\n\n![npm](https://img.shields.io/npm/v/genesys-react-components)\n\n![npm (tag)](https://img.shields.io/npm/v/genesys-react-components/preview)\n\nA React component library containing standardized form elements. Check out the live demo and full documenation at https://purecloudlabs.github.io/genesys-react-components/\n\n## Installation\n\n```sh\nnpm i genesys-react-components\n# install peer dependencies if necessary\nnpm i genesys-dev-icons uuid\n```\n\n## Usage\n\n```js\nimport React, { useRef } from 'react';\nimport { DxTextbox } from 'genesys-react-components';\nimport { GenesysDevIcons } from 'genesys-dev-icons';\n\nexport default function App() {\n\tconst inputRef = useRef \u003c HTMLInputElement \u003e null;\n\treturn (\n\t\t\u003cdiv className=\"app\"\u003e\n\t\t\t\u003cDxTextbox\n\t\t\t\tlabel=\"1000ms debounce (default 300), removes focus on value change via onChange callback\"\n\t\t\t\tplaceholder=\"Focus will clear 1 second after you stop typing\"\n\t\t\t\ticon={GenesysDevIcons.AppZoomZoomRight}\n\t\t\t\tclearButton={true}\n\t\t\t\tonChange={(value: string) =\u003e {\n\t\t\t\t\tconsole.log('1000ms debouncer triggered, clearing focus', value);\n\t\t\t\t\tinputRef.current?.blur();\n\t\t\t\t}}\n\t\t\t\tchangeDebounceMs={1000}\n\t\t\t\tinputRef={inputRef}\n\t\t\t\tonFocus={() =\u003e console.log('focus')}\n\t\t\t\tonBlur={() =\u003e console.log('blur')}\n\t\t\t/\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n## Building Locally\n\n### `genesys-react-components` package\n\nIn the root of the repo, run:\n\n```sh\nnpm i\nnpm run build\n```\n\nThis clears the build folder and rebuilds the package from source using the rollup configuration to produce single-file libraries.\n\nWhen validating the package locally, run `npm link` in the root of this repo to create a local symlink in npm for `genesys-react-components` that points to the locally built package. Take note of the _Error: Invalid hook call_ notice in the troubleshooting section below.\n\n### Deploy Component Package to NPM\n\n1. Ensure the version number has been incremented appropriately in `package/package.json` in the format `x.y.x` using semantic versioning rules\n2. Run the `devengage-publish-npm-package` Jenkins job for this package\n   1. Branch builds will have the branch name and build number appended to the package version\n\n### Demo app\n\nTo build and serve the demo app locally, run:\n\n```sh\ncd app\nnpm install\nnpm run start\n```\n\nTo validate the local instance of the `genesys-react-components` package, run:\n\n```sh\ncd app\n# This removes the published dependency and uses npm link to add the local version\nnpm run link\nnpm run start\n```\n\nAlternatively, run `npm run rebuildlibandstart` after `npm run link` to setup the localbuild of `genesys-react-components` and start the app\n\nRun `npm run unlink` to revert to using the latest published version of the package.\n\n#### Publishing the demo app\n\nMainline builds of the `devengage-publish-npm-package` Jenkins job publish the doc site.\n\n## Troubleshooting\n\n### Error: Invalid hook call\n\nThe following error may be encountered at runtime while running a React app locally when using `npm link genesys-react-components` to load the local package:\n\n```\nError: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.\n```\n\nThe cause of the issue is the first reason. The react-dom dependency is sourced from different locations for the component package and the React app that's using it. The package loads `\u003cthisrepo\u003e/node_modules/react_dom/` but the React app loads `\u003cthisrepo\u003e/app/node_modules/react-dom/` causing them to be different packages even though the loaded versions are identical.\n\nThe solution is to delete `\u003cthisrepo\u003e/node_modules/` when using `npm link` in a any local React app. It doesn't seem to matter the order of operations as long as the folder is gone before `npm run start` is run to build the React app.\n\n## Concepts and Best Practices\n\n### What SHOULD go in this package?\n\nThis package yields two conceptual things: React components and style information.\n\nComponents should be added to this package that provide _functionality_ beyond the base HTML elements and built-in JSX/React constructs. This functionality may be complex and interact with the user, like buttons and text boxes, but can also be simple and provide standardization with no user interaction, like the loading placeholder.\n\nStyle information can be added to the package in two primary ways.\n\nThe most straightforward is to apply styles to a component in the package. A component should have a file of the same name, but with the `.scss` file extension to contain its styles.\n\nThe package also provides general-purpose style information using selectors that apply to base HTML elements. These are broken out into a few individual files that can be consumed individually:\n\n- `src/theme/variables.scss` - The variables definition can be used by consuming applications to make any part of its own UI theme-aware. This is typically applied to the page's background, text colors, and custom components in the app.\n- `src/theme/typography.scss` - This file sets base theme style rules controlling the default colors and fonts. These rules apply to standard HTML elements, not components in the package.\n- `src/theme/roboto.scss` - The _Roboto_ font.\n- `src/theme/scrollbars.scss` - Styles for scrollbars\n\n### What SHOULD NOT go in this package?\n\nThis package is not a shim for base HTML elements. As such, it should not contain components that neither provide custom functionality nor extend/enhance/normalize base HTML elements.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpurecloudlabs%2Fgenesys-react-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpurecloudlabs%2Fgenesys-react-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpurecloudlabs%2Fgenesys-react-components/lists"}