Blue-react NPM

Blue React

Checkout the docs to find out how to use Blue React.

Breaking changes between v9 and v10

Exported JS files are now ES modules

Previously JS files were in type CommonJS, now they are in ESM. For projects with Webpack or CRA, take a look at this: https://stackoverflow.com/questions/70964723/webpack-5-in-ceate-react-app-cant-resolve-not-fully-specified-routes

Enable ESM in Webpack

Add this to the webpack.config.js inside the module.rules:

{
    test: /\.m?js/,
    resolve: {
        fullySpecified: false
    }
}

Enable ESM in CRA (react-scripts)

Install craco: npm i -D @craco/craco
Update the scripts inside package.json:

"scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",

Add a file called craco.config.js with this content:

module.exports = {
    webpack: {
        configure: {
            module: {
                rules: [
                    {
                        test: /\.m?js$/,
                        resolve: {
                            fullySpecified: false
                        }
                    }
                ]
            }
        }
    }
}

Removed hash router from Layout

The new Layout no longer has a hash router. So there is no pages prop anymore. The router moved to its own component HashRouter for legacy reasons. But it's recommended to use other solutions like React Router or TanStack Router.

Move side content to `side` prop

It should look like this:

<Layout
    side={
        <SidebarMenu>
            <MenuItem href="." label="Home" />
        </SidebarMenu>
    }
>
    Your page content
</Layout>

Removed HTML elements for status

If you use util functions for status like showSuccess() or setAlertMessage() you need to embed the Status React component like this:

<Status
    dangerIcon={<XCircleFill />}
    infoIcon={<InfoCircleFill />}
    successIcon={<CheckCircleFill />}
    warningIcon={<ExclamationCircleFill />}
/>

Developing

This project is built with CRA. To start developing, just and install everything with npm i and run:

npm start

Create a new release

This is how to manually create a release:\ By running

npm publish

the missing files in ./dist will be created, the docs will be generated and the NPM package will be released.

To publish changes on the documentary, run:

npm run deploy

To run both of them:

npm run release

@popperjs/core blue-web bootstrap clsx

@everything-registry/sub-chunk-1247

6 months ago

6 months ago

6 months ago

7 months ago

9 months ago

9 months ago

11 months ago

11 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

Blue React

Breaking changes between v9 and v10

Exported JS files are now ES modules

Enable ESM in Webpack

Enable ESM in CRA (react-scripts)

Removed hash router from Layout

Move side content to side prop

Removed HTML elements for status

Developing

Create a new release

Move side content to `side` prop