Glue Design System

A design system for Moebel.de products. Check our Confluence Page for more information and our playground on glue-ds.moebel.de.

🚀 How to use this library

Install the library

Either using yarn or npm will work. We recommend using an alias. For that, in your package.json add the following dependency:

"glue-ds": "npm:@moebel.de/glue-ds@latest",

Add the styles to your library

We recommend doing it in your main entry file, as it's minified already. We don't support (yet) on demand styles for each component or exporting the Tailwind configuration

import 'glue-ds/styles';

Import Component

All our components are located in our entry file, so you should be able to use directly. You can also import each component by itself.

import { Button } from 'glue-ds';
// Or
import { Button } from 'glue-ds/components/Button';

Define Theme

To define a theme for your components, you need to define a CSS class that matches the name of the theme you want to use. For example, portal or kitchen.

<div className="portal">
  <Button intent="primary" onClick={handleClick}>
    I'm an example
  </Button>
</div>

📚 Concepts

• Atom: Minimal unit of a Design System, usually a Design Token
• Components: An independent and reusable bits of code that represents an element of a Design System
• Layouts: A consumer of components in charge of providing position and sizing for components
• Theme: A collection of styles that affect all components in a project. An example would be: "portal" or "kitchen or "portal-halloween"
• Modes: Light & Dark. For our DS, each theme has two modes. Default is always Light. A theme nor a component is not required to have definitions for both modes.

🖌️ Themes

Themes are a combination of CSS Variables and Tailwindcss. Under the hood is using PostCSS. To add/build/update to a theme, you need first to have design tokens. You can declare those in the file called themes.css. Check the confluence page for information on how to name variables and what kind of token you should add. It (should) looks like this:

// src/styles/themes.css
:root {
  --base: #fff;
  --black: #000;

  &.theme-A {
    --glue-primary: var(--base);
  }
  &.theme-B {
    --glue-primary: var(--black);
  }
}

Once added, you can extend the Tailwind configuration using these tokens, and later consume in the components in the same way you would do with Tailwind:

  // {DS}/tailwind.config.js
  theme: {
    extend: {
      colors: {
        primary: 'var(--glue-primary)',
      },
    },
  },

Use Glue-DS Tailwind config in your app

After adding Glue DS to your dependencies, simply add this preset to your own Tailwind configuration. Important: You need to add our styles for this to work, else the variables imported won't have any effect.

  // {YOUR_APP}/tailwind.config.js
  presets: [require('@moebel.de/glue-ds/config/tailwind')],

🔠 Fonts

Inside of src/assets/fonts you can find the existing font files. Those are compressed and only holding Latin subsets of the following fonts:

• Roboto: @moebel.de/glue-ds/fonts/roboto/<FontFile>
• Roboto Slab: @moebel.de/glue-ds/fonts/roboto/slab/<FontFile>
• Roboto Mono: @moebel.de/glue-ds/fonts/roboto/mono/<FontFile>

You can use it directly as a face-font (like we do inside of .storybook/style.css). Or with Next.js utilizing next/font/local, like this:

export const robotoFont = localFont({
  src: [
    {
      path: '@moebel.de/glue-ds/fonts/roboto/Roboto-Light.woff2',
      weight: '300',
      style: 'normal',
    },
    ...
  ],
  variable: '--font-roboto',
});

The important part is to set a variable and assign it for example on the html or body element. More about this in Next.js fonts and optimization.

💣 Icons

To add a new icon, add the svg file to assets/icons folder and then run npm run build to generate the component. The rest is done by the scripts. If failing, it's very likely that the SVG has an invalid attribute.

To view available icons check the Storybook page dedicated to them.

🧱 Tech Stack

• React @Typescript
• Tailwind (v3) extended with Animated Tailwindcss
• Storybook (With a11y, dark mode and a theme picker)
• CVA
• Jest & React Testing Library
• Commitlint, husky, ESLint Rules & Prettier for ease of formatting and ensuring proper versioning
• Semantic-Release for versioning
• AWS S3 for Deployment

💡 Contribution

Instead of listing what could be a very large list of advices, refer to this very interesting read. It may take some time, so grab yourself a coffee. ☕️

IMPORTANT

• Do not forget to add Documentation
• Do not forget to add Tests
• Do not forget to make it Dev-Friendly (meaning: write simple code)
• When creating a component, do not forget to add it to src/index.ts
• We use conventional commits messages. Do not forget to add a prefix to your merge request.

🏁 Development

npm install
npm run storybook

⛓️ Testing your changes locally

We use yalc to be able to consume the package in other repositories without publishing to a remote registry first. This is useful for testing small changes. Run npm run push:local to make your changes available.

🦄 And that's it. 🦄