vseth-canine-ui

"canine - creating a name is never easy"

The core idea of vseth-canine-ui is to provide React-beginners with an easy way to start developing web-applications for the VSETH while also keeping a consistent branding throughout all VSETH projects.

Core ideas

To reduce future maintenance cost and providing as much flexibility as possible, we want to follow the following few rules:

• Don't reinvent the wheel! (Use mantine wherever possible)
• Don't recreate mantine components just to re-export them unchanged.
• Don't force a specific solution/framework for things like routing or auth. Make them optional or replaceable if possible.
• Significant UI/UX changes should be discussed with the VSETH board (Kommunikation)

Updating the Doc

If you make changes to a current component, add a new component, or simply want to improve the current docs, look in the doc folder.

To add a new page, simply duplicate and rename an existing file. If you want to document a single component, using a .stories.tsx file is recommended, for text/wiki-pages, .stories.mdx is easier.

The order the pages appear in the docs is defined in .storybook/preview.js.

Run the storybook build on Teamcity to publish the docs.

Publishing a new version

(TEAMCITY PUBLISH WORKFLOW NOT YET SET UP)

• Bump the version number in the package.json
• Push the changes to GitLab
• Run the publish step on Teamcity.

TODO: Alternative publish steps

Testing it locally

If you want to test changes to vseth-canine-ui locally without publishing a new version (for example with one of the demo projects), remove the vseth-canine-ui dependency from the demo, and run npm link in the vseth-canine directory. Then run npm link vseth-canine-ui in the demo directory. Then run npm link ../demo-folder/node_modules/react in the vseth-canine directory.

If you just want to demo a single component locally, you can also simply use storybook by runniong the command npm run storybook.