Overview:

The @gemeente-denhaag/components-react library is a collection of React components specifically designed for the municipality of The Hague. The goal of this library is to provide reusable components that can be easily customized to fit the branding and identity of other government organizations. The components have been used in various projects within The Hague, including the corporate website, satellite websites, open-source eForms, and the portal.

Features:

• Reusability: The components in this library are designed to be easily reused by other government organizations with minimal effort.
• Customization: Through the use of Design Tokens, it is possible to customize the components to match the corporate identity of the organization.
• Categorized Structure: The components are organized into categories, each with its own parent folder, making it easy to find and use the desired components.
• Storybook Integration: The library utilizes Storybook for testing components, allowing for easier development and testing.
• Lerna Package Management: Each component and category is its own package, managed with Lerna, to ensure modularity and maintainability.
• Cooperation with NL Design System: Some components in this library may become part of the NL Design System component library, allowing for broader adoption and collaboration.

Installation:

To get started with the @gemeente-denhaag/components-react library, follow these steps:

1. Clone the repository.
2. Install Node.js and npm. Make sure to have version 16.13.0 or higher of Node.js and version 1.22.17 or higher of npm.
3. Install yarn by following the instructions provided in the documentation.
4. In the repository folder, run the command to install all development dependencies.
5. Set up your IDE by installing plugins for ESlint, Prettier, JSONLint, and Stylelint if available.
6. Explore the folder structure of the project, where the src folder contains the components and storybook stories.
7. Use Storybook to test the components. Start Storybook locally using the command provided.
8. To create a new component, create a package.json file in its folder and add the necessary dependencies.
9. For new categories or components, add them to the respective package.json files in the meta-package.

Summary:

The @gemeente-denhaag/components-react library is a collection of reusable React components specifically designed for the municipality of The Hague. These components can be easily customized to fit the branding and identity of other government organizations. The library follows a categorized structure, utilizes Storybook for testing, and employs Lerna package management for modularity. With its cooperation with the NL Design System, this library aims to facilitate collaboration and wider adoption of its components. To get started, simply clone the repository and follow the installation steps provided.