npm package: @storecraft/dashboard
Description: Storecraft Official Dashboard
Author: Tomer Shalev
Latest version: 1.3.0

# **Storecraft** Official Dashboard

<div style="text-align:center">
  <img src='https://storecraft.app/storecraft-color.svg' 
       width='90%' />
</div><hr/><br/>

<div style='text-align: center'>
  <img src='https://storecraft.app/landing/main.webp' 
      width='100%' />
</div><hr/><br/>

The Official `storecraft` Dashboard 🏆,

- Leveraging `static rendering` / `client side rendering` / `swr`
- Can be deployed into cost effective **CDN**
- Also available at **CDN** like `unpkg` for consuming as a component.

Effectively, **TWO** Build Targets
1. A `library` with
  - Dashboard as `react` functional component
  - a `mount` function, that you can wrap for any framework of pure DOM.
2. A website, with configurable backend endpoint.

Build is handled by `Vite`

```bash
npm i @storecraft/dashboard
```

## Development

First, run the development server:

```bash
npm run dashboard:dev
# or
npm start
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## Build / Export

Simply, run any of the following command

```bash
npm run dashboard:build
```

Artifacts are in the `dist` folder
```txt
dist
├── /lib
├───┼── /src
│   │   ├── index.js      // ES module
│   │   └── index.umd.cjs // UMD
├── /website
│   ├── index.html
│   └── assets

```

## Consuming via `React`

First,

```bash
npm i @storecraft/dashboard
```

Then, 

```tsx
import { Dashboard } from '@storecraft/dashboard'

export const Root = () => {

  return (
    <div className='w-screen h-screen'>
      <Dashboard is_backend_endpoint_editable={true} />
    </div>
  )
} 

```

## Consuming via `unpkg` as **UMD** (smaller bundle)

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" sizes="any" type="image/svg+xml" href="/api/dashboard/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Storecraft - Next Gen Commerce-As-Code</title>
  </head>
  <body style="background-color: black">
    <div id="root"></div>
    <script 
      type="application/javascript"
      src="https://www.unpkg.com/@storecraft/dashboard@latest/dist/lib/src/index.umd.cjs">
    </script>

    <script>
      console.log({StorecraftDashboard});

      const show_configurable_endpoint = true;

      StorecraftDashboard.mountStorecraftDashboard(
        document.getElementById('root'), 
        show_configurable_endpoint
      );
    </script>
  </body>
</html>
```

## Consuming via `unpkg` as **ESM** (bigger bundle)

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" sizes="any" type="image/svg+xml" href="/api/dashboard/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Storecraft - Next Gen Commerce-As-Code</title>
    <script type="module">
      import { mountStorecraftDashboard } from 'https://www.unpkg.com/@storecraft/dashboard@latest/dist/lib/src/index.js';

      const show_configurable_endpoint = true;

      mountStorecraftDashboard(
        document.getElementById('root'), 
        show_configurable_endpoint
      );
    </script>
  </head>
  <body style="background-color: black">
    <div id="root"></div>
  </body>
</html>
```


```txt
Author: Tomer Shalev
```