{"id":30926377,"url":"https://github.com/eduardo-vargas/webpack-react-spectrum","last_synced_at":"2025-09-10T06:36:04.021Z","repository":{"id":38426661,"uuid":"280213915","full_name":"eduardo-vargas/webpack-react-spectrum","owner":"eduardo-vargas","description":null,"archived":false,"fork":false,"pushed_at":"2023-03-18T19:11:34.000Z","size":4459,"stargazers_count":8,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-27T06:44:13.461Z","etag":null,"topics":["adobe","design-system","react","spectrum","webapp","webpack"],"latest_commit_sha":null,"homepage":"https://evargast.github.io/webpack-react-spectrum","language":"JavaScript","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/eduardo-vargas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.md","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,"zenodo":null}},"created_at":"2020-07-16T17:17:46.000Z","updated_at":"2023-03-16T21:07:42.000Z","dependencies_parsed_at":"2025-04-14T02:04:16.055Z","dependency_job_id":null,"html_url":"https://github.com/eduardo-vargas/webpack-react-spectrum","commit_stats":null,"previous_names":["eduardo-vargas/webpack-react-spectrum"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/eduardo-vargas/webpack-react-spectrum","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eduardo-vargas%2Fwebpack-react-spectrum","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eduardo-vargas%2Fwebpack-react-spectrum/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eduardo-vargas%2Fwebpack-react-spectrum/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eduardo-vargas%2Fwebpack-react-spectrum/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eduardo-vargas","download_url":"https://codeload.github.com/eduardo-vargas/webpack-react-spectrum/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eduardo-vargas%2Fwebpack-react-spectrum/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274422332,"owners_count":25282124,"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","status":"online","status_checked_at":"2025-09-10T02:00:12.551Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["adobe","design-system","react","spectrum","webapp","webpack"],"created_at":"2025-09-10T06:36:02.170Z","updated_at":"2025-09-10T06:36:04.004Z","avatar_url":"https://github.com/eduardo-vargas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Purpose\n\nThe purpose of this project is to provide a dev-ready starting point for modern React apps that utilize the [React Spectrum design system](https://spectrum.adobe.com/).\n\nIt includes support for [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) within the Webpack DevServer.\n\nIt also includes certain development best practices such as,\n\n-   Style guide enforcement with eslint and prettier\n-   Git hooks to lint, test, and format staged changes pre-commit and pre-push\n-   A number of helpful npm scripts to make development smooth\n\n## Getting Started\n\nRun `yarn install` to download all the required dependencies, then use any of the available scripts below.\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode.\u003cbr\u003e Open [http://localhost:1234](http://localhost:1234) to view it in the browser.\n\n### `yarn start:https`\n\nRuns the app in the development mode in a secure environment.\u003cbr\u003e Open [https://localhost:1234](https://localhost:1234) to view it in the browser.\n\nGiven that `localhost` wont have a valid certificate, Chrome might throw some errors when loading the page, visit [chrome://flags](chrome://flags/#allow-insecure-localhost) and **enable** `allow-insecure-localhost`\n\n### `yarn test`\n\nLaunches the test runner in the interactive watch mode.\u003cbr\u003e See the section about\n[running tests](https://jestjs.io/docs/en/webpack) for more\ninformation.\n\n### `yarn build`\n\nBuilds the app for production to the `build` folder.\u003cbr\u003e It correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr\u003e Your app is ready to be deployed!\n\nSee the section about [deployment](https://webpack.js.org/guides/production/) for\nmore information.\n\n### `yarn storybook`\n\nThis will start the [storybook](https://storybook.js.org/) server listening on port 6006. Using storybook to build components is encouraged as it offers more flexibility in the states you start your components with, enforces isolation between components, and makes a more testable set of components.\n\n---\n\n## Creating a component\n\n### `yarn generate` || `yarn g`\n\nLeverages [Plop](https://www.npmjs.com/package/plop) to generate a new component, in addition to generating a new component it will create a `.test.tsx`, `.story.tsx` and `index.tsx`. Using this command is encouraged to enforce best development practices by always creating tests and stories for each component.\n\n### Testing  🧪\n\n[Jest Testing Framework](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) are included in this repo; using these two tools for testing is strongly recommended but they can be replaced with any other of your choosing.\n\n### Stories  📚\n\nThis repo supports `.story.tsx` stories!\n\n-   `TSX` stories allows you to create stories for different states of your component.\n\n### Styling 🎨\n\n-   Ideally use Spectrum components for layouts if that's not possible, use [flex](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) or [grid](https://css-tricks.com/snippets/css/complete-guide-grid/) for layout.\n\n-   [Styled-Components](https://styled-components.com/) is included in this repo, ideal for minor component customizations.\n\n-   Avoid deep customization on default Spectrum styling as this can potentially break the built-in accessibility features each component has. If you find yourself customizing the components too much, it might be worth to revisit your design.\n\n## Contributing 🙏\n\n1.  **Fork** the repo on GitHub\n2.  **Clone** the project to your own machine\n3.  **Commit** changes to your own branch\n4.  **[Squash](https://git-scm.com/book/en/v2/Git-Tools-Rewriting-History#_squashing)** all your commits\n5.  **Push** your work back up to your fork\n6.  Submit a **Pull request** so that your changes can be reviewed!\n\n## Questions ❓\n\nFeel free to file an issue or send me an email\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feduardo-vargas%2Fwebpack-react-spectrum","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feduardo-vargas%2Fwebpack-react-spectrum","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feduardo-vargas%2Fwebpack-react-spectrum/lists"}