{"id":15763278,"url":"https://github.com/srmagura/iti-react","last_synced_at":"2026-04-18T02:02:41.014Z","repository":{"id":57118910,"uuid":"357726843","full_name":"srmagura/iti-react","owner":"srmagura","description":"Opinionated React library covering form validation, data loading, and Bootstrap components.","archived":false,"fork":false,"pushed_at":"2022-04-19T19:52:34.000Z","size":14610,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T01:40:07.084Z","etag":null,"topics":["bootstrap","eslint","react","typescript"],"latest_commit_sha":null,"homepage":"https://srmagura.github.io/iti-react/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/srmagura.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-14T00:36:40.000Z","updated_at":"2021-12-06T15:35:37.000Z","dependencies_parsed_at":"2022-08-22T22:41:18.040Z","dependency_job_id":null,"html_url":"https://github.com/srmagura/iti-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srmagura%2Fiti-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srmagura%2Fiti-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srmagura%2Fiti-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srmagura%2Fiti-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/srmagura","download_url":"https://codeload.github.com/srmagura/iti-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246450474,"owners_count":20779421,"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":["bootstrap","eslint","react","typescript"],"created_at":"2024-10-04T11:41:21.102Z","updated_at":"2026-04-18T02:02:40.918Z","avatar_url":"https://github.com/srmagura.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WARNING: Not intended for the general public\n\n`iti-react` is MIT licensed and you may use it however you wish! _However_,\n`iti-react` is intended for internal use in Interface Technologies projects and\nmay not be suitable for your project. In particular:\n\n-   We don't follow semver and make a lot of breaking changes. Review\n    `CHANGELOG.md` before updating.\n-   The TypeScript source is published directly to npm. We don't transpile to\n    normal JavaScript before publishing.\n-   The library assumes you are using Bootstrap 5, Moment.js, Tippy.js, and\n    FontAwesome 5.\n-   `permissions` relies on your backend supporting a very specific \"get\n    permissions\" API method.\n-   `check-for-js-bundle-update-saga` depends on Redux Saga and requires a\n    hidden element to be in your `index.html`.\n\nIf you'd still like to use `iti-react`, feel free to contact me at\nsrmagura@gmail.com.\n\nIn the future, parts of the project may be broken out into standalone packages\nthat are intended for the general public.\n\n# @interface-technologies/iti-react-core\n\nHooks and utilities that work in both React DOM and React Native projects.\n\nFeatures:\n\n-   Form validation\n-   Hooks for querying data (switching to react-query for new projects)\n\n# @interface-technologies/iti-react\n\nHooks, utilities, and components for React DOM projects. Exports everything from\n`iti-react-core`. This means that every function/type/variable in the\n`iti-react-core` API documentation is also in the `iti-react` documentation.\n\nFeatures:\n\n-   Form inputs for selects, time, date, phone number, time zone, files\n-   Commonly-used components: Bootstrap modal dialog, confirmation dialog,\n    pager, submit button with loading indicator\n\n## Usage\n\n1.  `yarn add --exact @interface-technologies/iti-react`\n2.  Install the required peer dependencies: `yarn add react-datepicker @popperjs/core bootstrap react react-dom react-router-dom`\n3.  Add `@import '~@interface-technologies/iti-react/dist/iti-react.scss';` to your top-level\n    SCSS file.\n\n# @interface-technologies/permissions\n\n**This is a legacy package not to be used in new projects.**\n\nExports a `convenientGetFactory` for making an API method that retrieves\npermissions and a `usePermissions` hook for accessing those permissions in a\ncomponent.\n\n# @interface-technologies/check-for-js-bundle-update-saga\n\nChecks `index.html` every few minutes to see if a new JavaScript bundle has been\npublished, then prompts the user to refresh the page if necessary.\n\n# @interface-technologies/eslint-config\n\nAn ESLint config that extends `eslint-config-airbnb-typescript` and disables\nsome annoying rules.\n\nInstall the package and its peer dependencies with\n\n```\nyarn add --dev @interface-technologies/eslint-config @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-config-airbnb eslint-config-airbnb-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-promise eslint-import-resolver-typescript eslint-plugin-jest eslint-plugin-testing-library\n```\n\nThen set your `.eslintrc.js` to\n\n```\nmodule.exports = {\n    extends: \"@interface-technologies\"\n}\n```\n\n## Recommmended Plugins\n\n`eslint-plugin-redux-saga`: if your project uses `redux-saga`. Make these\nchanges to `.eslintrc.js`:\n\n`extends`: Add `'plugin:redux-saga/recommended'`  \n`plugins`: Add `'redux-saga'`  \n`rules`: Add `'redux-saga/no-unhandled-errors': 'off'`\n\n# @interface-technologies/prettier-config\n\nA Prettier config. Use it by installing the package and adding this to your\n`package.json`:\n\n```json\n    \"prettier\": \"@interface-technologies/prettier-config\",\n```\n\n# @interface-technologies/tsconfig\n\nA TypeScript config. Use it by installing the package and setting your\n`tsconfig.json` to\n\n```json\n{\n    \"extends\": \"@interface-technologies/tsconfig\",\n    \"compilerOptions\": {\n        \"noEmit\": true\n    }\n}\n```\n\nIf using absolute imports:\n\n```json\n{\n    \"extends\": \"@interface-technologies/tsconfig\",\n    \"compilerOptions\": {\n        \"baseUrl\": \"./src\",\n        \"noEmit\": true\n    }\n}\n```\n\n`noEmit` is explicitly stated so that your project doesn't get cluttered with\n`.js` files if the base `tsconfig` can't be resolved for some reason.\n\n# @interface-technologies/lint-staged-config\n\nA config for `lint-staged` that lints your TypeScript files and prettifies\neverything.\n\n1. Install the package as well as `lint-staged`.\n2. **Add a `package.json` script: `\"lint-staged\": \"lint-staged --no-stash\"`.\n   `lint-staged` stashing is stupid and will cause you to lose your work.**\n3. Create a `lint-staged.config.js` file:\n\n```js\nconst getLintStagedConfig = require('@interface-technologies/lint-staged-config')\n\nmodule.exports = getLintStagedConfig()\n\n// **OR**\n\nmodule.exports = getLintStagedConfig({ lintIgnorePatterns: ['**/Models/Generated/**/*'] })\n```\n\n# @interface-technologies/webpack-config\n\n**This is a legacy package not to be used in new projects.** I may resurrect it at some point.\n\nExports a `getWebpackConfig` function that returns a Webpack configuration\nobject, except the `entry` key which you need to set yourself.\n\n1. Install the package and its peer dependencies:\n\n```bash\nyarn add --dev @interface-technologies/webpack-config autoprefixer css-loader postcss postcss-loader sass-loader style-loader ts-loader typescript webpack webpack-cli webpack-dev-server\n```\n\n2. Create a Webpack config file similar to this:\n\n```js\nconst path = require('path')\nconst getWebpackConfig = require('@interface-technologies/webpack-config')\n\nmodule.exports = (env, argv) =\u003e {\n    return {\n        ...getWebpackConfig({\n            mode: argv.mode,\n            workspacePackageJsonPath: path.resolve(__dirname, '../../package.json'),\n            outputPath: path.resolve(__dirname, '../Website/wwwroot/dist'),\n\n            enableBugsnagUpload: !!env.enableBugsnagUpload,\n            bugsnagApiKey: 'API KEY HERE',\n\n            devServerPort: 12345,\n            enableBundleAnalyzer: false,\n        }),\n        entry: {\n            app: path.resolve(__dirname, './src/App.tsx'),\n        },\n    }\n}\n```\n\n# @interface-technologies/jest-config\n\nA Jest configuration. It enables fake timers and automatically resets mocks\nbefore each test.\n\n1. `yarn add --dev @interface-technologies/jest-config`\n2. Add `jest.config.js`:\n\n```js\nmodule.exports = {\n    ...require('@interface-technologies/jest-config'),\n\n    // other config here\n}\n```\n\n# Developer Documentation\n\nSee `CONTRIBUTING.md`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrmagura%2Fiti-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrmagura%2Fiti-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrmagura%2Fiti-react/lists"}