@strategies/ui NPM

Strategies' Design System UI Components

Installation

pnpm add @strategies/ui

Usage

There are two types of components in the system: interface components and portals.

The interface components specify the child elements to act as portals that you can declaratively pass your content into. Regardless of declaration order, these named portals will place their children inside of the elements specified by the interface component.

Example

import { Modal, Title, Body, Buttons, Button } from '@strategies/ui';

<Modal>
    <Title>My Modal</Title>

    <Body>
        <p>This is the body of my modal</p>
    </Body>

    <Buttons>
        <Button onClick={cancel}>
            Cancel
        </Button>

        <Button onClick={save}>
            Save
        </Button>
    </Buttons>
</Modal>

The interface components that are available are:

Build

pnpm run build

Design Tokens

Using the tokens in css or scss file

@use '~@strategies/tokens/color';
@use '~@strategies/tokens/font';

.YourComponent {
    color: color.$blue;
    font-size: font.$size-small;
}

Using the tokens in js/jsx/ts/tsx file

the `token function is for getting the value by passing in a path string
to use the token function, please install another package @strategeies/ui

pnpm add --save-dev @strategies/ui

usage example

import { ConfigProvider } from 'antd';
import { token } from '@strategeies/ui';

export const ButtonAntConfig = ({children}) => {
    return (
        <ConfigProvider
            theme={{
                token: {
                    /* token fn here */
                    colorPrimary: token('color.text.danger', '#ff0000'),
                }
        }}>
            {children}
        </ConfigProvider>
    )
}

export default ButtonAntConfig;