Installation

Wanda is a complete design system wich provides all the tools you need to design and develop digital products, from Figma libraries to shared configurations and components.

While some of the developing tools like PostCSS are mandatory to work with Wanda's UI components, others are strongly recommended to ensure consistency and elevetad code quality across projects.

Installation

Wanda's core elements are formed by tokens, react-components and the shared configurations.

npm i @wonderflow/react-components @wonderflow/themes @wonderflow/icons
npm i -D @wonderflow/config

Configuration

Wanda's components relies on PostCSS to provide the best DX while writing CSS.

To being able to use tokens and custom utilities like custom media queries provided by the design system there are a couple of steps to follow.

Assuming you have already installed PostCSS on your current stack, the first thing to do is passing Wanda's required plugins to it, you can do so by importing postcssConfig from @wonderflow/config inside your local postcss.config.js file.

const { postcssConfig } = require("@wonderflow/config");
module.exports = postcssConfig;

Usage with other plugins

If you're already using other PostCSS plugins you can combine them with the ones required by Wanda. If you declare a plugin which is already used by Wanda you'll overwrite it.

const { postcssConfig } = require("@wonderflow/config");

module.exports = {
  plugins: {
    ...postcssConfig.plugins,
    tailwindcss: {},
  },
};

Importing themes

Then inside your app entry javascript point you have to import two required css files, one is the core styles and the other one includes themes with all the theme keys used by components and that you can also use inside your custom css.

import "@wonderflow/react-components/core.css";
import "@wonderflow/themes";

Recommended tools

To ensure elvetated code standards and consistency Wanda provides also a set of sharable configurations for eslint and stylelint.

Stylelint

The stylelint sharable configuration provides a set of rules and plugin useful to write and validate your css code. For example, you can get an alert if you miswrite a token or a theme variable.

npm install -D stylelint @wonderflow/stylelint-config

Then add the following code inside your .stylelintrc.json configuration file.

{
  "extends": "@wonderflow/stylelint-config",
  "rules": {
    "designtokens/check": [
      true,
      "./node_modules/@wonderflow/tokens/platforms/web/tokens.json"
    ]
  },
  "ignoreFiles": [
    "!**/*.css",
    "**/*.jsx",
    "**/*.tsx",
    "**/*.ts",
    "node_modules"
  ]
}

Eslint

The eslint sharable configuration provides a set of rules and plugin useful to write and validate your javascript and jsx code. For example, you can get an alert if you write unaccessible html or if you miss an attribute to improve performances.

npm install -D eslint @wonderflow/eslint-config

Then add the following code inside your .eslintrc.json configuration file.

{
  "extends": "@wonderflow/eslint-config"
}

Typescript

To add typescript support to eslint you can extend the configuration by installing the parser and the plugin.

npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

Once installed all the packages, create a .eslintrc file and add the following code inside it.

{
  "extends": "@wonderflow/eslint-config",
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "project": "./tsconfig.eslint.json"
  }
}

Then create a tsconfig.eslint.json at the project root to configure typescript:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "baseUrl": "./",
  },
  "exclude": ["node_modules"],
}