Studio-library NPM

Next.js Project Documentation :rocket:

Introduction

This is a Next.js project bootstrapped with create-next-app.

Installation

To get started with the development server, run one of the following commands:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Usage

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Importing and Using Components

To use components in a Next.js application, follow these steps:

Import the Component:

import MyComponent from '@/components/MyComponent';

Use the Component:

const HomePage = () => {
    return (
        <div>
            <MyComponent prop1="value1" prop2="value2" />
        </div>
    );
};

export default HomePage;

Example Component Usage

Widget Component

Props:

description (string): The description text for the widget.
dropdownMenuConfig (DropdownMenuConfigType): Configuration for the dropdown menu.
totalConversationsCount (number): Total count of conversations.
suggestedActions (string[]): Array of suggested actions.
pieChart (PieChartType): Data for the pie chart.

Usage Example:

import Widget from '@/components/Widget';

const ExamplePage = () => {
    return (
        <Widget
            description="Quantum physics, also known as quantum mechanics, is a fundamental theory in physics that describes the behavior of matter and energy at very small scales."
            dropdownMenuConfig={{
                labelId: 'select-label',
                id: 'select',
                label: 'Select',
                IconComponent: (props) => (
                    <ArrowDownIcon sx={{ fill: '#9F9F9F' }} {...props} />
                ),
                dropdownMenuOptions: [
                    { value: 'Day', label: 'Day' },
                    { value: 'Week', label: 'Week' },
                    { value: 'Month', label: 'Month' },
                ],
            }}
            totalConversationsCount={321}
            suggestedActions={[
                '📌 Pin at the top',
                '✅ "What are the main areas where customers seem most satisfied"',
                '👨‍💻 “Do Nothing”',
                'ℹ️ “Provide more information”',
            ]}
            pieChart={{
                config: {
                    width: 200,
                    height: 200,
                    innerRadius: 50,
                    outerRadius: 90,
                },
                data: [
                    { value: 60, color: '#57AE7B', label: 'Happy' },
                    { value: 25, color: '#F4F4F4', label: 'Neutral' },
                    { value: 15, color: '#E27474', label: 'Dissatisfied' },
                ],
            }}
        />
    );
};

export default ExamplePage;

Components

Available Components

Atoms

Button

Molecules

Form

Organisms

Header

Detailed Documentation

Widget

Props:

description (string): The description text for the widget.
dropdownMenuConfig (DropdownMenuConfigType): Configuration for the dropdown menu.
totalConversationsCount (number): Total count of conversations.
suggestedActions (string[]): Array of suggested actions.
pieChart (PieChartType): Data for the pie chart.

Usage Examples:

Basic Usage:

<Widget
    description="Basic description here."
    dropdownMenuConfig={...}
    totalConversationsCount={100}
    suggestedActions={['Action 1', 'Action 2']}
    pieChart={...}
/>

With Detailed Configuration:

<Widget
    description="Detailed description with more complex configurations."
    dropdownMenuConfig={{
        labelId: 'select-label',
        id: 'select',
        label: 'Select',
        IconComponent: (props) => (
            <ArrowDownIcon sx={{ fill: '#9F9F9F' }} {...props} />
        ),
        dropdownMenuOptions: [
            { value: 'Day', label: 'Day' },
            { value: 'Week', label: 'Week' },
            { value: 'Month', label: 'Month' },
        ],
    }}
    totalConversationsCount={500}
    suggestedActions={[
        '📌 Pin at the top',
        '✅ "What are the main areas where customers seem most satisfied"',
        '👨‍💻 “Do Nothing”',
        'ℹ️ “Provide more information”',
    ]}
    pieChart={{
        config: {
            width: 200,
            height: 200,
            innerRadius: 50,
            outerRadius: 90,
        },
        data: [
            { value: 60, color: '#57AE7B', label: 'Happy' },
            { value: 25, color: '#F4F4F4', label: 'Neutral' },
            { value: 15, color: '#E27474', label: 'Dissatisfied' },
        ],
    }}
/>