@digitalservice4germany/digital-service-library

digital-service-library

Component Library for and by DigitalService4Germany

Requirements

• React
• TailwindCSS

Installation

npm install --save @digitalservice4germany/digital-service-library

Configure TailwindCSS

The library expects an existing TailwindCSS setup in your project. Please change your tailwind.config.js in two places.

1. add the preset require("@digitalservice4germany/digital-service-library").TailwindConfig
2. add the path to the library's components "./node_modules/@digitalservice4germany/digital-service-library/dist/esm/index.js" to your array of content paths

Afterwards your config might look like this:

module.exports = {
  presets: [
    require("@digitalservice4germany/digital-service-library").TailwindConfig,
  ],
  content: [
    "./app/**/*.{ts,tsx}",
    "./node_modules/@digitalservice4germany/digital-service-library/dist/esm/index.js",
  ],
};

Usage

import { Button } from "@digitalservice4germany/digital-service-library";

<Button secondary small>Hello button!</Button>

Development

Icons

Icon components are semi-automatically created from .svg file in assets/icons. Put the svg file there and run npm run build-icons to create components in src/components/Icons. Adjust the names in src/components/Icons/index.tsx

Yeoman Generator

Basic scaffolding tool to create a component skeleton. Setup:

cd generator-storybook
npm install
sudo npm link

If neccessary install yo:

sudo npm install -g yo

Run the generator:

yo storybook:component ComponentName