{"id":18694381,"url":"https://github.com/csev/tsugi-react-base","last_synced_at":"2025-11-08T11:30:46.054Z","repository":{"id":142740031,"uuid":"390470132","full_name":"csev/tsugi-react-base","owner":"csev","description":"My patternfly seed playground","archived":false,"fork":false,"pushed_at":"2021-08-11T12:57:29.000Z","size":3648,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-28T03:14:27.092Z","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/csev.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-07-28T18:59:28.000Z","updated_at":"2021-08-11T12:57:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"3009337d-21ac-4531-b075-ba3a1c2437ab","html_url":"https://github.com/csev/tsugi-react-base","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/csev%2Ftsugi-react-base","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csev%2Ftsugi-react-base/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csev%2Ftsugi-react-base/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csev%2Ftsugi-react-base/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csev","download_url":"https://codeload.github.com/csev/tsugi-react-base/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239552450,"owners_count":19657914,"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-07T11:10:32.504Z","updated_at":"2025-11-08T11:30:45.984Z","avatar_url":"https://github.com/csev.png","language":"TypeScript","readme":"Tsugi React Base Tool\n=====================\n\n## Quick-start\n\n```bash\n# Get into your Tsugi mod folder\ncd ... /mod\ngit clone https://github.com/csev/tsugi-react-base\ncd tsugi-react-base\nnpm install \u0026\u0026 npm run start:dev\n```\n## Development scripts\n```sh\n# Install development/build dependencies\nnpm install\n\n# Start the development server\nnpm run start:dev\n\n# Before you run the `tsugi` build process, you must edit the `webpack.prod.js`\n# file and edit the `publicPath` and `replace` field to reflect\n# the actual path on your web server where the folder will be available\n# TODO: Automate this :)\n\n# Run a tsugi build (outputs to \"dist\" dir)\nnpm run build\n```\n\n## Other Scripts\n\n```sh\n# Run the test suite\nnpm run test\n\n# Run the test suite with coverage\nnpm run test:coverage\n\n# Run the linter\nnpm run lint\n\n# Run the code formatter\nnpm run format\n\n# Launch a tool to inspect the bundle size\nnpm run bundle-profile:analyze\n\n# Start the express server (run a production build first)\nnpm run start\n\n# Start storybook component explorer\nnpm run storybook\n\n# Build storybook component explorer as standalone app (outputs to \"storybook-static\" dir)\nnpm run build:storybook\n```\n\n## Configurations\n* [TypeScript Config](./tsconfig.json)\n* [Webpack Config](./webpack.common.js)\n* [Jest Config](./jest.config.js)\n* [Editor Config](./.editorconfig)\n\n## Raster image support\n\nTo use an image asset that's shipped with PatternFly core, you'll prefix the paths with \"@assets\". `@assets` is an alias for the PatternFly assets directory in node_modules.\n\nFor example:\n```js\nimport imgSrc from '@assets/images/g_sizing.png';\n\u003cimg src={imgSrc} alt=\"Some image\" /\u003e\n```\n\nYou can use a similar technique to import assets from your local app, just prefix the paths with \"@app\". `@app` is an alias for the main src/app directory.\n\n```js\nimport loader from '@app/assets/images/loader.gif';\n\u003cimg src={loader} alt=\"Content loading /\u003e\n```\n\n## Vector image support\nInlining SVG in the app's markup is also possible.\n\n```js\nimport logo from '@app/assets/images/logo.svg';\n\u003cspan dangerouslySetInnerHTML={{__html: logo}} /\u003e\n```\n\nYou can also use SVG when applying background images with CSS. To do this, your SVG's must live under a `bgimages` directory (this directory name is configurable in [webpack.common.js](./webpack.common.js#L5)). This is necessary because you may need to use SVG's in several other context (inline images, fonts, icons, etc.) and so we need to be able to differentiate between these usages so the appropriate loader is invoked.\n```css\nbody {\n  background: url(./assets/bgimages/img_avatar.svg);\n}\n```\n\n## Adding custom CSS\nWhen importing CSS from a third-party package for the first time, you may encounter the error `Module parse failed: Unexpected token... You may need an appropriate loader to handle this file typ...`. You need to register the path to the stylesheet directory in [stylePaths.js](./stylePaths.js). We specify these explicity for performance reasons to avoid webpack needing to crawl through the entire node_modules directory when parsing CSS modules.\n\n## Code quality tools\n* For accessibility compliance, we use [react-axe](https://github.com/dequelabs/react-axe)\n* To keep our bundle size in check, we use [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)\n* To keep our code formatting in check, we use [prettier](https://github.com/prettier/prettier)\n* To keep our code logic and test coverage in check, we use [jest](https://github.com/facebook/jest)\n* To ensure code styles remain consistent, we use [eslint](https://eslint.org/)\n* To provide a place to showcase custom components, we integrate with [storybook](https://storybook.js.org/)\n\n## Multi environment configuration\nThis project uses [dotenv-webpack](https://www.npmjs.com/package/dotenv-webpack) for exposing environment variables to your code. Either export them at the system level like `export MY_ENV_VAR=http://dev.myendpoint.com \u0026\u0026 npm run start:dev` or simply drop a `.env` file in the root that contains your key-value pairs like below:\n\n```sh\nENV_1=http://1.myendpoint.com\nENV_2=http://2.myendpoint.com\n```\n\nWith that in place, you can use the values in your code like `console.log(process.env.ENV_1);`\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsev%2Ftsugi-react-base","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsev%2Ftsugi-react-base","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsev%2Ftsugi-react-base/lists"}