@vodafoneziggo/sandwich v4.12.0
VFZ Sandwich Component Library
Background
This library contains all shared React Components shared accross multiple VodafoneZiggo modules.
Start the module
This module uses node.js
version 10. Run npm install
to install the module, next run npm start
to start the module.
See src/intro.stories.mdx
(or the Intro page inside Storybook after you ran npm start
) for more in depth info.
Developing
You can create an experimental release
via the pipeline or use npm link
to test your changes locally. To use npm link
you should do the following:
- go to the dist folder after building Sandwich (
npm run build && cd dist
) - run
npm link
- go to the root folder of the project you want to link Sandwich in
- run
npm link @vodafoneziggo/sandwich
- you're all set!
Deployment
After a build has finished on the master branch, Netlify will automatically deploy the storybook to https://sandwich-vfz.netlify.app/
Branch Strategy
All work should be done on a feature branch, branched from master
. The only way to merge back to master
is via a Pull Request in BitBucket, it should never be worked on directly.
When your feature branch is merged to master
, a changelog and release is automatically published to npm. More on this in the Publishing a new version section.
Creating a component
Most of the time you'll be working on creating new components. We create all our components in Typescript, and use Styled Components for the styling, and write our unit tests in Jest.
Some guidelines while building the component are:
- File names are kebab-case. Unit test files end with
.spec.tsx
, styled component files with.styles.ts
and documentation files (storybook stories) end with.stories.mdx
. - We use named exports for all exports, no defaults.
- We create documentation for all components we build, in Storybook Docs. As an example you can see the
loader.stories.mdx
file. The Storybook Docs is pretty new, especially the MDX Syntax. So a few resources on how this works are Storybook Docs website, Technical preview guide, Addon Docs Github Readme (next branch)- In short you wrap all your stories in a
<Story>
component, and if you want to show the story also in the 'docs' part you also wrap it in a<Preview>
component. - A small note: If you get a weird error during the rendering of the MDX page, this is sometimes caused due to some empty lines in your mdx file inside the
<Preview>
or<Story>
component. Just delete these lines.
- In short you wrap all your stories in a
Testing your changes
When developing locally
The preferred method to install Sandwich into your module locally is by using npm link
.
Note that the usage of npm link
has changed since npm 5, and that change is not properly documented on npm's website. The correct way to use it is by first navigating to the module you want to include Sandwich in, and then run npm link {relative_path_to_sandwich}
. For instance: npm link ../sandwich
. This will create a temporary symlink to the sandwich package, and make it immediately available. Please note that as the symlink is temporary in nature, running npm install
again will destroy the symlink.
Publish a test package eg. for QA
Publishing packages is done automatically for the master branch. Sometimes it can however be neccessary to publish a 'alpha' version of your current branch (eg. for QA'ing of your work). We do this by creating experimental releases based on a current commit. You can create an experimental release by doing the following:
- Navigate to the Commits page of Sandwich.
- Click on the link of your commit hash.
- On the right side of the page you find a link
Run pipeline
. - Choose the pipeline with the name
publish_experimental_release_of_current_commit_to_npm
and clickRun
. - When this command has run it will create a custom release for you on NPM.
Committing your changes
We use Conventional Commit to create commit messages that can be automatically generated into a changelog, and decide versions based on your commit messages. For this to work properly it's essential that every commit message follows this standard. Valid commit messages are enforced via commitlint
, so if your commit message is not following Conventional Commit standards your commit will be rejected.
In order help you with your commit messages, we recommend you use npm run commit
which will give you a small GUI wizard during your commit.
Publishing a new version
When you merge your feature branch to master
, a new MAJOR, MINOR or PATCH version of Sandwich will be published based on the commits you made in your feature branch.
- If you used
fix
in one of your commit messages, a PATCH version will be published (e.g. 0.0.1) - If you used
feat
in one of your commit messages, a MINOR version will be published (e.g. 0.1.0) - If you used
BREAKING CHANGE
in one of your commit messages, a MAJOR version will be published (e.g. 1.0.0)
More resources regarding automatic releases can be found here.
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago