@spiffcommerce/corporate-ui

Spiff Commerce corporate UI components library built with React.

Installation

npm install @spiffcommerce/corporate-ui
# or
yarn add @spiffcommerce/corporate-ui

Usage

Configuration Provider

Wrap your application with the CorporateUIConfigurationProvider to provide theme configuration:

import { CorporateUIConfigurationProvider } from "@spiffcommerce/corporate-ui";

function App() {
    const config = {
        branding: {
            primaryColor: "#007bff",
            textColor: "#ffffff",
        },
    };

    return (
        <CorporateUIConfigurationProvider value={config}>{/* Your app components */}</CorporateUIConfigurationProvider>
    );
}

Navidots Component

A pagination component with interactive dot navigation:

import { Navidots } from "@spiffcommerce/corporate-ui";

function MyComponent() {
    const [currentPage, setCurrentPage] = useState(0);
    const totalPages = 10;

    return <Navidots current={currentPage} total={totalPages} onClick={(index) => setCurrentPage(index)} />;
}

Box Component

A flexible layout component with typestyle CSS properties:

import { Box } from "@spiffcommerce/corporate-ui";

function MyComponent() {
    return (
        <Box display="flex" flexDirection="column" gap="16px" padding="20px" backgroundColor="#f5f5f5">
            {/* Your content */}
        </Box>
    );
}

Typography Component

A typography component with predefined text styles:

import { Typography } from "@spiffcommerce/corporate-ui";

function MyComponent() {
    return (
        <>
            <Typography variant="heading" size="3xl">
                Main Heading
            </Typography>
            <Typography variant="body" size="base">
                Body text content
            </Typography>
            <Typography variant="label" size="link">
                Link text
            </Typography>
        </>
    );
}

Components

• Navidots: Pagination dots with ellipsis for large page counts
• Box: Flexible container with CSS-in-JS styling via typestyle
• Typography: Text component with heading, body, and label variants

License

MIT