{"id":19637084,"url":"https://github.com/timothymiller/bottom-sheet-click-bug","last_synced_at":"2026-01-30T06:08:37.300Z","repository":{"id":111391619,"uuid":"459966254","full_name":"timothymiller/bottom-sheet-click-bug","owner":"timothymiller","description":null,"archived":false,"fork":false,"pushed_at":"2022-02-16T10:59:42.000Z","size":5956,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-26T21:46:15.842Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/timothymiller.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":"2022-02-16T10:59:40.000Z","updated_at":"2022-02-16T11:01:15.000Z","dependencies_parsed_at":"2023-03-08T12:15:33.204Z","dependency_job_id":null,"html_url":"https://github.com/timothymiller/bottom-sheet-click-bug","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/timothymiller%2Fbottom-sheet-click-bug","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timothymiller%2Fbottom-sheet-click-bug/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timothymiller%2Fbottom-sheet-click-bug/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timothymiller%2Fbottom-sheet-click-bug/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timothymiller","download_url":"https://codeload.github.com/timothymiller/bottom-sheet-click-bug/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timothymiller%2Fbottom-sheet-click-bug/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259093885,"owners_count":22804252,"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-11T12:33:08.777Z","updated_at":"2026-01-30T06:08:37.272Z","avatar_url":"https://github.com/timothymiller.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# NextJS - Sample integration with Porsche Design System\n\n## Introduction\n\nThis is project shows the example usage of the Porsche Design System Components in NextJS. See also the [project documentation](https://designsystem.porsche.com/v1/#/start-coding/nextjs) and the [deployed project](https://porscheui.github.io/sample-integration-nextjs).\n\nFor further documentation regarding designing websites and the correct usage of the components, you can visit our website https://designsystem.porsche.com/.\n\n---\n\n## Get the project up and running\n\n### yarn\n\n- Install dependencies via `yarn install`\n- Build the application via `yarn build`\n- Run tests via `yarn test`\n- Run the application via `yarn start`\n\n---\n\n## Setup\n\n### Requirements\n\n- [Node.js](https://nodejs.org)\n- [Yarn](https://yarnpkg.com)\n- [Docker](https://www.docker.com) ([see below](#docker-installation-steps))\n\n### Getting started\n\n1. Clone [`sample-integration-nextjs` repository](https://github.com/porscheui/sample-integration-nextjs)\n1. Switch to **project root directory**\n1. Execute command `npm login --registry=https://porscheui.jfrog.io/porscheui/api/npm/npm/`\n1. Enter username, password (Artifactory API Key, **not** Artifactory password!) and e-mail address when asked in terminal\n1. Execute `cat ~/.npmrc`, find following line `//porscheui.jfrog.io/porscheui/api/npm/npm/:_authToken=` and copy the generated _npm registry token_ from the file to your clipboard\n1. Create an `.env` file within **project root directory** (never push this file to Git because it will contain secrets – by default it's ignored by `.gitignore`)\n1. Add _npm registry token_ in following format `PORSCHE_NPM_REGISTRY_TOKEN=YOUR_TOKEN_GOES_HERE`\n1. Make sure that Docker app is running\n1. Run `./docker.sh run-install` - this may take up to several minutes at first start depending on your internet connection\n\n_Note: `./docker.sh run-install` should be executed after every pull._\n\n### Setup prettier\n\n1. Go to Webstorm `Preferences`\n1. Click on the Plugins tab and search for `prettier`\n1. Install prettier\n1. In `Preferences` go to `Languages and Frameworks` -\u003e `Javascript` -\u003e `Prettier`\n1. Set `Prettier Package` to `{PATH_TO_YOUR_DIRECTORY}/node_modules/prettier`\n1. Change `Run for files` to `{**/*,*}.{js,ts,jsx,tsx,vue,scss,json,css,html}`\n1. Click checkbox `on save` and apply\n1. You should be good to go.\n\n### Docker installation steps\n\n1. Register your Docker account on [Hub-Docker](https://hub.docker.com)\n1. Download Docker app locally on your machine and login\n1. Start Docker\n\n### Start\n\n1. Switch to **project root directory**\n1. Run `./docker.sh run-start` (starts test server for sample-integration-nextjs itself)\n\n### Build\n\n1. Switch to **project root directory**\n1. Run `./docker.sh run-build` (builds releasable sample-integration-nextjs npm package)\n\n### Test\n\n1. Switch to **project root directory**\n1. Run `./docker.sh run-test` (executes test for sample-integration-nextjs)\n\n## Test the application\n\nIt is yet not possible to render our web components in **jsdom**.\n\nTo ensure your tests don't fail, we provide mocks for every Porsche Design System component. They are distributed in the `@porsche-design-system/components-react` npm package.\n\nWe consume the Mocks in the **setupTest.js** file in the root folder.\n\n```\n// setupTest.js\n\njest.mock('@porsche-design-system/components-react', () =\u003e {\n    return require('@porsche-design-system/components-react/mocks');\n});\n```\n\nYou have to access the mocks in the Mock-Factory of the `jest.mock()` function. We have to use `require` because the mock factory doesn't allow otherwise.\n\nUse this solution until there is an upgrades to a newer **jsdom** version which provides support for **Web Components**. In the meantime we keep providing mocks.\n\nYou find detailed information on how to use mock functions in **Jest** [here](https://jestjs.io/docs/en/mock-functions.html).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimothymiller%2Fbottom-sheet-click-bug","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimothymiller%2Fbottom-sheet-click-bug","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimothymiller%2Fbottom-sheet-click-bug/lists"}