@wis-soft/ui

A lightweight UI component library for React applications, providing reusable components and icons for rapid development.

Installation

Install the package via npm:

npm install @wis-soft/ui

This library requires the following peer dependencies, ensure these dependencies are installed in your project:

• React: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
• React DOM: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0

Storybook

Explore the full list of components with live examples in our Storybook:

🔗 Storybook – @wis-soft/ui

Usage

Importing Components

Import components and icons directly from the package. Available components include:

• Button: A customizable button with primary and secondary variants.
• Bage: A badge component for displaying notifications or labels.
• Input: A text input field with customizable placeholders and styles.
• SearchBar: A search input with integrated functionality.
• ToasterProvider: A provider for displaying toast notifications.
• useToast: A hook for triggering toast notifications.

Available icons include:

• CloseIcon
• EyeHideIcon
• EyeIcon
• LoaderIcon
• NotificationIcon
• SearchIcon
• UserIcon

Example

import React from 'react';
import { Button, Input, SearchBar, ToasterProvider, useToast } from '@wis-soft/ui';
import { CloseIcon } from '@wis-soft/ui';

import '@wis-soft/ui/styles.css';

const App = () => {
    const { addToast } = useToast();

    const handleClick = () => {
        addToast({ title: 'Hello, this is a toast!' });
    };

    return (
        <ToasterProvider>
            <div>
                <Button onClick={handleClick}>Click Me</Button>
                <Input placeholder="Enter text" />
                <SearchBar />
                <CloseIcon />
            </div>
        </ToasterProvider>
    );
};

export default App;

Importing Styles

The library is designed to work out of the box with minimal styling setup.

• If you are only using the design tokens (e.g., color palette, spacing, CSS variables) without any UI components, import variables.css:

import '@wis-soft/ui/variables.css';

• If you are using UI components from the library, styles are already included automatically, and you do not need to import any CSS manually.

TypeScript Support

The library includes TypeScript type declarations for all components and icons, located in the dist/types directory. For example, the Button component has the following type definition:

import { IButtonProps } from '@wis-soft/ui';

interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    children: React.ReactNode;
    className?: string;
    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    disabled?: boolean;
    type?: 'button' | 'submit' | 'reset';
    style?: React.CSSProperties;
    'data-testid'?: string;
    variant?: 'primary' | 'secondary';
    fullWidth?: boolean;
    isLoading?: boolean;
}

Refer to the type declarations for detailed prop types for other components and icons.

License

This project is licensed under the MIT License.