rvf-mobility-web-component

This project is a fork of the @geops/mobility-web-component project for RVF.

RVF uses the geops-mobility and the geops-mobility-notifications web components, not the geops-mobility-search web component.

RVF uses the npm package @geops/rvf-mobility-web-component, no iframe is used to display the map.

Design is done by bemerkt.de company, we received 2 Sketch files link to implement the design.

The Vercel app is the official documentation for the customer, make sure it is up to date and exhaustive.

In production RVF uses the latest NPM package @geops/rvf-mobility-web-component using the url : https://www.unpkg.com/@geops/rvf-mobility-web-component so to push something to production you have to publish a new version using:

yarn publish

Links

• Vercel app
• NPM package
• RVF design system
• Sketch file design system
• Sketch file design website
• Adobe web project for fonts (user account in vault)
• VAG colors
• Client test website
• Netzplan on client production website
• Tarifzone on client production website
• Carsharing on client production website
• Bikesharing on client production website
• MOCO export swagger doc

Development

Follow the guidelines from the forked repository @geops/mobility-web-component.

Faster development process.

corepack enable
yarn install
yarn start

Deployment

The Vercel app is the official documentation for the customer, make sure it is up to date and exhaustive. The deploy is automatic with every merge on main branch.

<<<<<<< HEAD In production RVF uses the latest NPM package @geops/rvf-mobility-web-component so to push something to production you have to publish a new version using:

yarn publish

======= The Vite build, used for development, is also deployed on https://main-mobility-web-component.vercel.app/.

For forked project, the static index.html file is enough as documentation for the client. No need to provide the NextJS documentation website. Just set it up properly in vercel. See RVF configuration for an example.

Guidelines

• every new components must have a new folder MyComponent with an index.tsx that contains only an export and a MyNewComponent.tsx file. The reason is too simplify the component override in forked project.

Client specific code

If a client, for example mycompany, needs a mobility-web-component with custom functionnalities. Never add custom client specific stuff in this repository, instead:

• create a fork from this repository, and call it mycompany-mobility-web-component.
• change the package name in package.json to @geops/mycompany-mobility-web-component.
• change the README and index.html titles.
• create a new MobilityMap component in src/ called MyCompanyMobilityMap. In this component you can copy the content of MobilityMap or just use the MobilityMap component with default values. It depends of your use case.
• change the MobilityMap import to MyCompanyMobilityMap in src/MobilityMap/index.tsx.
• create a new npm package on npmjs.com from this repository, and call it @geops/mycompany-mobility-web-component.
• publish a beta version to test the publishing with ỳarn publish:beta

At this point you're ready to create custom code, some rules must be followed to facilitate the merge of upstream mobility-web-component repository:

• always create new components using the client name as prefix, like MyCompanyRouteSchedule, or put them in a client specific folder src/mycompany/RoutSchedule.
• to use the overrided components just change the export in the index.tsx of the component to override.
• never modify the original components in the forked repository, do it in the upstream repository then merge it in the forked repository.
• never update dependencies in the forked repository, do it in the upstream repository then merge it in the forked repository.
• if you have a doubt, ask.

upstream/main

Merge upstream repository

When you use a fork you can merge the upstream repository using:

// Set up the upstream remote, to do only once
git remote add upstream [email protected]:geops/mobility-web-component.git

yarn upstream