https://github.com/mmalfertheiner/frontend-monorepo

Share design lib with multiple frontends
https://github.com/mmalfertheiner/frontend-monorepo

design-system monorepo nextjs reactjs storybook tailwindcss yarn-workspaces

Last synced: about 1 month ago
JSON representation

Share design lib with multiple frontends

• Host: GitHub
• URL: https://github.com/mmalfertheiner/frontend-monorepo
• Owner: mmalfertheiner
• License: mit
• Created: 2019-10-01T07:37:40.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T11:50:43.000Z (about 2 years ago)
• Last Synced: 2024-11-10T19:56:41.524Z (3 months ago)
• Topics: design-system, monorepo, nextjs, reactjs, storybook, tailwindcss, yarn-workspaces
• Language: JavaScript
• Size: 1.48 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Frontend monorepo

=================

## Motivation

This repository is an example on how to create a mono repository, with a shared design system library based on React and TailwindCSS.

In order to support fast development in the early stage of a new product, the design system is not published to npm, but only linked with yarn workspaces. To further support a fast development experience, the UI package is also watched during development of one of the frontends. The current example shows how it could work with 2 independent NextJS apps. As they are independent from each other it would be possible to have also a Gatsby based or CRA client app in the repo.

## How to run it?

```

yarn install

yarn dev:front-office

```

## Structure

```

packages

    |__ back-office

    |__ front-office

    |__ ui

```

### Back-office & Front-office

Back-office and front-office are two sample applications based on NextJS. They both make use of the shared components from the UI package.

They have a dependency on TailwindCSS and can influence the theme applied to the application. Using TailwindCSS also in the UI library it is easy to change colors, margins, font-sizes, ... per project, but still reuse the components.

The PurgeCSS configuration will make sure that unnecessary styles created by Tailwind will be removed in production.

### UI package

The UI package contains reusable React components, that are styled with TailwindCSS. It also supports the CSS-in-JS solution [styled-jsx](https://github.com/zeit/styled-jsx).

Examples:

This is an example of a button based on TailwindCSS only.

```

export default ({ children, classes = {}, ...props }) => {

  return (

    

      {children}

    

  );

};

```

For a more complex UI component such as a toggle check out the [ToggleWithText](https://github.com/mmalfertheiner/frontend-monorepo/blob/master/packages/ui/src/Toggle/ToggleWithText.js) component.

The UI package also includes a setup of storybook, which comes in handy for documentation,but also for development of new components. It can be started with `yarn storybook`.