A Design System for Moebel.de
npm install @moebel.de/glue-dsA design system for Moebel.de products. Check our Confluence Page for more information and our playground on glue-ds.moebel.de.
Either using yarn or npm will work. We recommend using an alias. For that, in your package.json add the following dependency:
``json`
"glue-ds": "npm:@moebel.de/glue-ds@latest",
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
`ts`
import 'glue-ds/styles';
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.
`js`
import { Button } from 'glue-ds';
// Or
import { Button } from 'glue-ds/components/Button';
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.
`js`
- 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 are a combination of CSS Variables and Tailwindcss. Under the hood is using PostCSS.themes.css
To add/build/update to a theme, you need first to have design tokens. You can declare those in the file called . Check the confluence page for information on how to name variables and what kind of token you should add. It (should) looks like this:
`css
// 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:
`js`
// {DS}/tailwind.config.js
theme: {
extend: {
colors: {
primary: 'var(--glue-primary)',
},
},
},
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.
`js`
// {YOUR_APP}/tailwind.config.js
presets: [require('@moebel.de/glue-ds/config/tailwind')],
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/
- Roboto Slab:
- Roboto Mono:
You can use it directly as a face-font (like we do inside of .storybook/style.css).next/font/local
Or with Next.js utilizing , like this:
`js`
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.
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.
- 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 versioningSemantic-Release
- for versioningAWS S3
- for Deployment
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. āļø
- 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.
`sh`
npm install
npm run storybook
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. š¦