Welcome to happy_component_library

happy_component_library is the central repository to manage our UI components. This should lead to a straight forward separation of concerns, so that UI logic keeps within the component library and business logic will be added in the actual application. This way we can guarantee a specific degree of consistency across all our applications, rapidly speed up our development process of frontend applications and even achieve a high degree of customization by overwriting the theme object.

Note: This project was bootstrapped with Create React App.

Installation

Clone the GitHub Repo locally, then run

yarn install

Development

In Order to work with the Component Library locally, run npm link for the peer dependencies found in the package.json. Run the following commands in the component_library-directory and link the packages from your external repo via: (Info: the external repo and the component_library should be in the same parent folder )

npm link ../happy_frontend/node_modules/react

npm link ../happy_frontend/node_modules/styled-components

npm link ../happy_frontend/node_modules/react-router-dom

yarn build

In the other project-directory, you add the local path of the component-library

yarn add ../component_library

You can now import Components from the Library via

import { Component } from 'component-library'

Testing

In the project directory, you can run:

Run this to start the storybook application

yarn run storybook

Run this to ensure it is correctly packaged

yarn start

Run this to start the Test Suite

yarn test

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

Production

You can build the app for production with

yarn build

You can find the build in the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

See the section about production for more information.

Learn More

You can learn more in the Parcel documentation.

To learn React, check out the React documentation.