ncore-context/stories/quick-start.mdx

import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Docs/Getting Started/Quick Start" />

# Getting Started

## Installing

You can install NCore Context (ncore-context) with [NPM](https://www.npmjs.com/package/ncore-context) or Yarn.

-   NPM: `npm install ncore-context`
-   YARN: `yarn add ncore-context`

## Configuration

You must wrap with NCoreProvider your outermost component. This is important for tools such as theme and localization to be active.
NCoreProvider allows with a prop named "configs" you to make changes to themes and language packs and select initial theme and initial language.

```tsx
import {
    type ReactNode
} from "react";
import {
    type NCoreUIKitConfig
} from "../types";

class CoreContext {
    NCoreUIKitDialog: NCoreUIKitDialog;

    constructor() {
        this.NCoreUIKitDialog = new NCoreUIKitDialog({
            data: []
        });
    }

    Provider = ({
        children
    }: {
        children: ReactNode
    }) => {
        const DialogContext = this.NCoreUIKitDialog;

        return <DialogContext.Provider>
            <DialogContext.Render>
                {children}
            </DialogContext.Render>
        </DialogContext.Provider>
    };
};
export default CoreContext;
```

```tsx
import {
    type ReactNode,
    Fragment
} from "react";
import {
    type DialogContextType,
    type DialogDataType
} from "../types/dialog";
import NCoreContext, {
    type ConfigType
} from "ncore-context";
import Dialog from "../components/dialog";
import {
    uuid
} from "../utils";

class NCoreUIKitDialog extends NCoreContext<DialogContextType, ConfigType<DialogContextType>> {
    constructor({
        data = []
    }: {
        data?: Array<DialogDataType>
    }) {
        super({
            close: () => {},
            open: () => "",
            data: data
        }, {
            key: "NCoreUIKit-DialogContext"
        });
    };

    open = (dialogData: DialogDataType) => {
        const currentData = this.state.data;

        const dialogID = dialogData.id ? dialogData.id : uuid();

        currentData.push({
            ...dialogData,
            id: dialogID
        });

        this.setState({
            data: currentData
        });

        return dialogID;
    };

    close = (props?: {
        index?: number;
        id?: string;
    }) => {
        const currentData = this.state.data;

        if (props && props.id) {
            const keyIndex = currentData.findIndex((dialog) => dialog.id === props.id);

            if (keyIndex !== -1) {
                currentData.splice(keyIndex, 1);

                this.setState({
                    data: currentData
                });
            }

            return;
        }

        if (props && props.index !== undefined) {
            currentData.splice(props.index, 1);

            this.setState({
                data: currentData
            });

            return;
        }

        currentData.pop();

        this.setState({
            data: currentData
        });
    };

    Render = ({
        children
    }: {
        children: ReactNode;
    }) => {
        const {
            data
        } = this.useContext();

        return <Fragment>
            {children}
            {data.map((item: DialogDataType) => {
                return <Dialog
                    key={`NCoreUIKit-Dialog-${item.id}`}
                    id={item.id as string}
                    onClosed={() => {
                        if(item.onClosed) {
                            item.onClosed({
                                id: item.id as string
                            });
                        }

                        if(item.isAutoClosed === undefined || item.isAutoClosed === true) {
                            this.close({
                                id: item.id
                            });
                        }
                    }}
                    {...item}
                />;
            })}
        </Fragment>;
    };
}
export default NCoreUIKitDialog;
```

If you want to set config, please look at Configs and Schemes Pages.