@mulai-id/ui-kit v0.0.31

Raiden UIKIT

CONTRIBUTING

Please read carefully for for the contributing guidelines

Design Principles

Understanding these concepts will help you better contribute

• Style Props

All component styles can be overridden or extended via style props to reduce the use of css prop or styled()

• Naming Props

We all know naming is the hardest thing in this industry. Generally, ensure a prop name is indicative of what it does. Boolean props should be named using auxiliary verbs such as does, has, is and should. For example, Button uses isDisabled, isLoading, etc.

• Simplicity

Strive to keep the component API fairly simple and show real world scenarios of using the component.

• Composition

Break down components into smaller parts with minimal props to keep complexity low, and compose them together. This will ensure that the styles and functionality are flexible and extensible.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: ["./tsconfig.json", "./tsconfig.node.json"],
    tsconfigRootDir: __dirname,
  },
};

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

Setting Up Custom Themes

1. Wrap your application with RaidenProvider

Ensure RaidenProvider wraps your main application component to provide the theme configuration context.

import React from "react";
import { RaidenProvider } from "raiden"; // Replace 'raiden' with your actual context provider

const App = () => {
  return (
    <RaidenProvider theme={customTheme}>
      {/* Your application components */}
    </RaidenProvider>
  );
};

2. Use the createTheme function

To simplify creating or customizing a theme configuration, use the createTheme function provided:

import { createTheme } from "src/utils";

const defaultTheme = createTheme();

// Example of creating a custom theme configuration
const customTheme = createTheme({
  colors: {
    light: {
      primary: "#FF5722", // Example primary color override
      background: {
        default: "#F5F5F5", // Example background color override
      },
    },
  },
});