/react-tut

Primary LanguageCSS

Stamp logo

@stamp/react v1.0

Generic React components to use as building blocks for your PostNL UI

Stamp logo Click dgbrnrtnrtnrtnrtnrt

Report bug (GitHub) · Request feature (GitHub)

Table of contents

Installation

Stamp/react is available as an NPM package.

Install with NPM:

npm install @stamp/react

Install with Yarn:

yarn add @stamp/react

Getting started

Components

Here is an example of a basic app using Stamp/react Button component:

import { Button, ThemeProvider } from '@stamp/react';

function App() {
  return (
  	<ThemeProvider>
  		<Button variant="secondary">Hello World</Button>;
  	</ThemeProvider>
  )
}

For more options and other components, read the React documentation.

[Edit Button](link zero height)

CSS

CSS is provided through a global stylesheet. An example of it's usage could be to import it in your JS application so styles are applied to the used components:

import '@stamp/react/style.css';

To apply global styling, wrap your application in the ThemeProvider component:

import { ThemeProvider } from '@stamp/react';

Fonts

The ThemeProvider applies the PostNL font family to it's wrapping element. That font family needs to be made available to make those styles work. These fonts are located in the package at dist/fonts, and in the situation where you can link to assets from npm packages (e.g. webpack), it can be set up like this:

@font-face {
    font-family: PostNL;
    src: url(@stamp/react/fonts/PostNL-Bold-Italic.woff2) format('woff2');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: PostNL;
    src: url(@stamp/react/fonts/PostNL-Bold.woff2) format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: PostNL;
    src: url(@stamp/react/fonts/PostNL-Medium-Italic.woff2) format('woff2');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: PostNL;
    src: url(@stamp/react/fonts/PostNL-Medium.woff2) format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: PostNL;
    src: url(@stamp/react/fonts/PostNL-Light-Italic.woff2) format('woff2');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: PostNL;
    src: url(@stamp/react/fonts/PostNL-Light.woff2) format('woff2');
    font-weight: 300;
    font-style: normal;
}

Examples

Naar zero height verwijzen waar per component voorbeeld staat?

[Examples Button](link zero height)

Documentation

Naar zero height verwijzen ?

[Docs Button](link zero height)

Tools

Vite

To distribute this component library, it needs to be bundled properly. Vite bundles the library into the desired formats: esm & umd. This serves both modern and legacy usages.

To bundle the application using Vite, run the following command:

npm run build

Storybook

Storybook is used to preview isolated components

To run it using a development server, run the following command:

npm run storybook:start

To build a static version of it, run the following command:

npm run storybook:build

Plop

Creating and adjusting files for new components can be painful. We've made this easier for you by using Plop. To generate files for a new component, run the following command:

npm run generate

This prompts you to enter the name of the component and goes through the following steps:

  • Scaffolds a component directory containing the following files:
    • Component file
    • Barrel file where everything can be exported
    • Style declarations
    • Storybook story
  • Updates all barrel files in the package so the component is exported correctly

Jest

For unit testing Jest is used. To execute the tests, run the following command:

npm run test

Contributing

Help improve Stamp!

Bug
If you find a bug, please let us know via the ... GitHub

Feature request
If want to request a new feature, please let us know via the ... GitHub

Versioning

?

<style> .stamp-button, .stamp-button { display: inline-flex; gap: 8px; align-items: center; justify-content: center; max-inline-size: 100%; inline-size: auto; cursor: pointer; padding-block: 8px; padding-inline: 24px; border-style: solid; border-width: 1px; font-family: PostNL; font-weight: 500; line-height: 1.5; font-size: 16px; -webkit-text-decoration: none; text-decoration: none; } .stamp-button:hover { -webkit-text-decoration: underline; text-decoration: underline; } .stamp-button--variant-primary, a.stamp-button--variant-primary { background-color: #3440b6; border-color: #ffffff00; border-radius: 24px; color: #ffffff } .stamp-icon--size-s { inline-size: 16px; block-size: 16px; } .stamp-icon { display: flex; } </style>