4.12.0 • Published 2 years ago

@vodafoneziggo/sandwich v4.12.0

Weekly downloads
143
License
MIT
Repository
bitbucket
Last release
2 years ago

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:

  1. go to the dist folder after building Sandwich (npm run build && cd dist)
  2. run npm link
  3. go to the root folder of the project you want to link Sandwich in
  4. run npm link @vodafoneziggo/sandwich
  5. 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.

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 click Run.
  • 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.

4.4.0

2 years ago

4.10.1

2 years ago

4.10.0

2 years ago

4.3.0

2 years ago

4.12.0

2 years ago

4.11.0

2 years ago

4.9.0

2 years ago

4.9.1

2 years ago

4.8.0

2 years ago

4.7.0

2 years ago

4.6.0

2 years ago

4.5.0

2 years ago

4.0.1

3 years ago

4.0.0

3 years ago

4.2.0

2 years ago

4.1.0

3 years ago

3.10.1

3 years ago

3.10.2

3 years ago

3.10.0

3 years ago

3.9.0

3 years ago

3.8.0

3 years ago

3.8.1

3 years ago

3.7.0

3 years ago

3.6.0

3 years ago

3.5.0

3 years ago

3.4.0

3 years ago

3.3.0

3 years ago

3.2.1

3 years ago

3.2.0

3 years ago

3.1.1

3 years ago

3.1.0

3 years ago

2.19.2

3 years ago

2.19.3

3 years ago

2.19.0

3 years ago

2.19.1

3 years ago

3.0.0

3 years ago

2.18.0

3 years ago

2.17.0

3 years ago

2.17.1

3 years ago

2.16.0

3 years ago

2.15.1

3 years ago

2.15.0

3 years ago

2.14.0

3 years ago

2.13.0

3 years ago

2.13.1

3 years ago

2.12.0

3 years ago

2.11.1

3 years ago

2.11.0

3 years ago

2.10.0

3 years ago

2.9.0

3 years ago

2.8.0

3 years ago

2.7.0

3 years ago

2.6.0

3 years ago

2.5.2

3 years ago

2.5.0

3 years ago

2.5.1

3 years ago

2.4.0

3 years ago

2.3.1

3 years ago

2.3.0

3 years ago

2.2.0

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

2.0.0

3 years ago

1.15.0

3 years ago

1.13.0

3 years ago

1.14.0

3 years ago

1.12.0

4 years ago

1.11.1

4 years ago

1.11.0

4 years ago

1.10.0

4 years ago

1.9.1

4 years ago

1.9.0

4 years ago

1.8.0

4 years ago

1.7.3

4 years ago

1.7.2

4 years ago

1.7.1

4 years ago

1.7.0

4 years ago

1.6.2

4 years ago

1.6.1

4 years ago

1.6.0

4 years ago

1.5.9

4 years ago

1.5.8

4 years ago

1.5.7

4 years ago

1.5.6

4 years ago

1.5.5

4 years ago

1.5.4

4 years ago

1.5.3

4 years ago

1.5.2

4 years ago

1.5.1

4 years ago

1.5.0

4 years ago

1.4.0

4 years ago

1.3.0

4 years ago

1.2.0

4 years ago

1.1.0

4 years ago

1.0.2-dev.7

5 years ago

1.0.2-dev.6

5 years ago

1.0.2-dev.5

5 years ago

1.0.2-dev.4

5 years ago

1.0.2-dev.3

5 years ago

1.0.2-dev.2

5 years ago

1.0.2-dev.1

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.0-dev.8

5 years ago

1.0.0-dev.7

5 years ago

1.0.0-dev.6

5 years ago

1.0.0-dev.5

5 years ago

1.0.0-dev.4

5 years ago

1.0.0-dev.3

5 years ago

1.0.0-dev.2

5 years ago

1.0.0-dev.1

5 years ago