bmdl-sdk 0.0.2

package/dist/viewOptions.json

@@ -0,0 +1,57 @@
+{
+  "data": [
+    {
+      "key": "General",
+      "label": {
+        "ru": "Заголовок",
+        "en": "Title"
+      },
+      "defaultOpen": true,
+      "children": [
+        {
+          "element": "checkbox",
+          "key": "Title",
+          "label": {
+            "ru": "Заголовок",
+            "en": "Title"
+          },
+          "defaultValue": true
+        },
+        {
+          "element": "select",
+          "key": "ColType",
+          "label": {
+            "ru": "Тип столбцов",
+            "en": "Column type"
+          },
+          "options": [
+            {
+              "label": {
+                "ru": "Стандартный",
+                "en": "Default"
+              },
+              "value": "default"
+            },
+            {
+              "label": {
+                "ru": "Стандартный 2",
+                "en": "Default 2"
+              },
+              "value": "default2"
+            }
+          ],
+          "defaultValue": "default"
+        }
+      ]
+    },
+    {
+      "element": "input",
+      "key": "ColorBy",
+      "label": {
+        "ru": "Цвет элемента",
+        "en": "Item color"
+      },
+      "defaultValue": "red"
+    }
+  ]
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "bmdl-sdk",
+  "private": false,
+  "version": "0.0.2",
+  "type": "module",
+  "bin": {
+    "bmdl-sdk": "./bin/cli.js"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "build:component": "vite build && tsx scripts/postbuild.js"
+  },
+  "dependencies": {
+    "adm-zip": "^0.5.16",
+    "echarts": "^6.0.0",
+    "echarts-for-react": "^3.0.5",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "teaser": "^0.1.1",
+    "tsx": "^4.22.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@types/terser": "^3.12.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

package/scripts/postbuild.js

@@ -0,0 +1,81 @@
+import AdmZip from 'adm-zip'
+import { readFileSync, rmSync, writeFileSync } from 'fs'
+import { basename, dirname, resolve } from 'path'
+import { fileURLToPath, pathToFileURL } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const projectRoot = resolve(__dirname, '..')
+const projectName = basename(projectRoot)
+const distlDir = resolve(projectRoot, 'dist')
+const zipOutputPath = resolve(distlDir, `${projectName}.zip`)
+
+async function buildComponent() {
+  try {
+    const configPath = resolve(projectRoot, 'src/config.ts')
+    const dataOptionsPath = resolve(projectRoot, 'src/dataOptions.ts')
+    const viewOptionsPath = resolve(projectRoot, 'src/viewOptions.ts')
+
+    const { config } = await import(pathToFileURL(configPath).href)
+    const { createDataOptions } = await import(
+      pathToFileURL(dataOptionsPath).href
+    )
+    const { createViewOptions } = await import(
+      pathToFileURL(viewOptionsPath).href
+    )
+
+    const configData = {
+      ...config,
+      dataOptions: createDataOptions(),
+    }
+
+    const viewOptionsData = createViewOptions()
+
+    ///////
+
+    // copyFileSync(
+    //   resolve(projectRoot, 'public/icon.svg'),
+    //   resolve(projectRoot, 'dist/assets/icon.svg'),
+    // )
+    // copyFileSync(
+    //   resolve(projectRoot, 'public/preview.webp'),
+    //   resolve(projectRoot, 'dist/assets/preview.webp'),
+    // )
+
+    ///////
+
+    writeFileSync(
+      resolve(distlDir, 'config.json'),
+      JSON.stringify(config, null, 2),
+    )
+    writeFileSync(
+      resolve(distlDir, 'viewOptions.json'),
+      JSON.stringify({ data: viewOptionsData }, null, 2),
+    )
+
+    ///////
+
+    const componentPath = resolve(distlDir, 'index.iife.js')
+    const componentCode = readFileSync(componentPath, 'utf-8')
+    //
+    const finalCode = componentCode.replace(
+      '}(React);',
+      '}\nexport default Component',
+    )
+
+    rmSync(resolve(distlDir, 'index.iife.js'))
+    writeFileSync(resolve(distlDir, 'index.js'), finalCode)
+
+    ///////
+
+    const zip = new AdmZip()
+    zip.addLocalFolder(distlDir)
+    zip.writeZip(zipOutputPath)
+
+    console.log('✅ Component built successfully!')
+  } catch (error) {
+    console.error('❌ Build failed:', error)
+    process.exit(1)
+  }
+}
+
+buildComponent()

package/src/app/App.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var echarts_for_react_1 = __importDefault(require("echarts-for-react"));
+var WidgetComponent = function (_a) {
+    var dataOptions = _a.dataOptions, viewOptions = _a.viewOptions;
+    console.log('dataOptions', dataOptions);
+    console.log('viewOptions', viewOptions);
+    console.log('render');
+    //
+    // const [settings, setSettings] = useState<any>({
+    //   yColumns: [],
+    //   xAxisData: [],
+    //   yAxisData: [],
+    // })
+    // useEffect(() => {
+    //   console.log('useEffect')
+    //   if (dataSettings?.columns) {
+    //     const { data, columns } = dataSettings
+    //     const xColumn = columns.find(col => col.zoneId === 'X')
+    //     const sColumn = columns.find(col => col.zoneId === 'S')
+    //     const yColumns = columns.filter(col => col.zoneId === 'Y')
+    //     //
+    //     if (xColumn && yColumns.length) {
+    //       const xPath = xColumn.path
+    //       const sPath = sColumn?.path || null
+    //       const yPaths = yColumns!.map(col => col.path)
+    //       //
+    //       const xAxisData = Array.from(new Set(data.map(row => row[xPath])))
+    //       const yAxisData = yPaths.map(yPath => {
+    //         return Object.values(
+    //           data.reduce((xAcc, row) => {
+    //             if (typeof xAcc[row[xPath]] === 'undefined') xAcc[row[xPath]] = 0
+    //             xAcc[row[xPath]] += row[yPath]
+    //             return xAcc
+    //           }, {}),
+    //         )
+    //       })
+    //       console.log('setSettings', {
+    //         yColumns,
+    //         xAxisData,
+    //         yAxisData,
+    //       })
+    //       setSettings((_: any) => {
+    //         return {
+    //           yColumns,
+    //           xAxisData,
+    //           yAxisData,
+    //         }
+    //       })
+    //     } else {
+    //       setSettings({
+    //         yColumns: [],
+    //         xAxisData: [],
+    //         yAxisData: [],
+    //       })
+    //     }
+    //   }
+    // }, [dataSettings, viewSettings])
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: "\n        html,\n        body,\n        #root {\n          width: 100%;\n          height: 100%;\n          margin: 0;\n        }\n      " }), (0, jsx_runtime_1.jsx)(echarts_for_react_1.default, { style: { width: '100%', height: '100%' }, notMerge: true, option: {
+                    xAxis: {
+                        type: 'category',
+                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                    },
+                    yAxis: {
+                        type: 'value',
+                    },
+                    series: [
+                        {
+                            data: [150, 230, 224, 218, 135, 147, 260],
+                            type: 'line',
+                        },
+                    ],
+                } })] }));
+};
+exports.default = WidgetComponent;

package/src/app/App.tsx

@@ -0,0 +1,124 @@
+import React from 'react'
+
+import ReactECharts from 'echarts-for-react'
+import { DataOptions, ViewOptions } from '../types'
+
+export interface DataSettings {
+  data: any[]
+  columns: any[]
+  apiKey?: string
+  refreshInterval?: number
+}
+
+export interface ViewSettings {
+  theme: 'light' | 'dark'
+  showHeader: boolean
+  showFooter: boolean
+  language: string
+  [key: string]: any
+}
+
+interface WidgetProps {
+  dataOptions?: DataOptions
+  viewOptions?: ViewOptions
+}
+
+const WidgetComponent: React.FC<WidgetProps> = ({
+  dataOptions,
+  viewOptions,
+}) => {
+  console.log('dataOptions', dataOptions)
+  console.log('viewOptions', viewOptions)
+  console.log('render')
+  //
+  // const [settings, setSettings] = useState<any>({
+  //   yColumns: [],
+  //   xAxisData: [],
+  //   yAxisData: [],
+  // })
+
+  // useEffect(() => {
+  //   console.log('useEffect')
+
+  //   if (dataSettings?.columns) {
+  //     const { data, columns } = dataSettings
+
+  //     const xColumn = columns.find(col => col.zoneId === 'X')
+  //     const sColumn = columns.find(col => col.zoneId === 'S')
+  //     const yColumns = columns.filter(col => col.zoneId === 'Y')
+  //     //
+  //     if (xColumn && yColumns.length) {
+  //       const xPath = xColumn.path
+  //       const sPath = sColumn?.path || null
+  //       const yPaths = yColumns!.map(col => col.path)
+  //       //
+  //       const xAxisData = Array.from(new Set(data.map(row => row[xPath])))
+  //       const yAxisData = yPaths.map(yPath => {
+  //         return Object.values(
+  //           data.reduce((xAcc, row) => {
+  //             if (typeof xAcc[row[xPath]] === 'undefined') xAcc[row[xPath]] = 0
+  //             xAcc[row[xPath]] += row[yPath]
+
+  //             return xAcc
+  //           }, {}),
+  //         )
+  //       })
+
+  //       console.log('setSettings', {
+  //         yColumns,
+  //         xAxisData,
+  //         yAxisData,
+  //       })
+
+  //       setSettings((_: any) => {
+  //         return {
+  //           yColumns,
+  //           xAxisData,
+  //           yAxisData,
+  //         }
+  //       })
+  //     } else {
+  //       setSettings({
+  //         yColumns: [],
+  //         xAxisData: [],
+  //         yAxisData: [],
+  //       })
+  //     }
+  //   }
+  // }, [dataSettings, viewSettings])
+
+  return (
+    <>
+      <style>{`
+        html,
+        body,
+        #root {
+          width: 100%;
+          height: 100%;
+          margin: 0;
+        }
+      `}</style>
+      <ReactECharts
+        style={{ width: '100%', height: '100%' }}
+        notMerge={true}
+        option={{
+          xAxis: {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          },
+          yAxis: {
+            type: 'value',
+          },
+          series: [
+            {
+              data: [150, 230, 224, 218, 135, 147, 260],
+              type: 'line',
+            },
+          ],
+        }}
+      />
+    </>
+  )
+}
+
+export default WidgetComponent

package/src/config.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.config = void 0;
+var package_json_1 = __importDefault(require("../package.json"));
+exports.config = {
+    label: {
+        ru: 'Комбинированная диаграмма: Cтолбчатая и Линейная (UX)',
+        en: 'Combo Chart: Bar and Line (UX)',
+    },
+    categories: ['compare', 'distribution'],
+    icon: 'icon.svg',
+    preview: 'preview.webp',
+    version: package_json_1.default.version,
+};

package/src/config.ts

@@ -0,0 +1,13 @@
+import packageJson from '../package.json'
+import { Config } from './types'
+
+export const config: Config = {
+  label: {
+    ru: 'Комбинированная диаграмма: Cтолбчатая и Линейная (UX)',
+    en: 'Combo Chart: Bar and Line (UX)',
+  },
+  categories: ['compare', 'distribution'],
+  icon: 'icon.svg',
+  preview: 'preview.webp',
+  version: packageJson.version,
+}

package/src/dataOptions.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDataOptions = void 0;
+var types_1 = require("./types");
+var custom_1 = require("./types/custom");
+var block = function (props) { return props; };
+var createDataOptions = function () {
+    return [
+        block({
+            key: custom_1.EBlockKey.X,
+            queryFn: types_1.DataQueryFunction.Group,
+            label: {
+                ru: 'Ось X',
+                en: 'X axis',
+            },
+            icon: types_1.BlockIcon.AxisX,
+            columnTypes: [types_1.ColumnType.String, types_1.ColumnType.Date],
+            limit: 1,
+        }),
+        block({
+            key: custom_1.EBlockKey.S,
+            queryFn: types_1.DataQueryFunction.Group,
+            label: {
+                ru: 'Серия',
+                en: 'Series',
+            },
+            columnTypes: [types_1.ColumnType.String, types_1.ColumnType.Date],
+            limit: 1,
+        }),
+        block({
+            key: custom_1.EBlockKey.Y,
+            queryFn: types_1.DataQueryFunction.Sum,
+            label: {
+                ru: 'Ось Y',
+                en: 'Y axis',
+            },
+            icon: types_1.BlockIcon.AxisY,
+            columnTypes: [types_1.ColumnType.Number],
+        }),
+    ];
+};
+exports.createDataOptions = createDataOptions;

package/src/dataOptions.ts

@@ -0,0 +1,45 @@
+import {
+  BlockIcon,
+  ColumnType,
+  CreateDataOptions,
+  DataQueryFunction,
+} from './types'
+import { EBlockKey } from './types/custom'
+
+const block = (props: any) => props
+
+export const createDataOptions: CreateDataOptions = () => {
+  return [
+    block({
+      key: EBlockKey.X,
+      queryFn: DataQueryFunction.Group,
+      label: {
+        ru: 'Ось X',
+        en: 'X axis',
+      },
+      icon: BlockIcon.AxisX,
+      columnTypes: [ColumnType.String, ColumnType.Date],
+      limit: 1,
+    }),
+    block({
+      key: EBlockKey.S,
+      queryFn: DataQueryFunction.Group,
+      label: {
+        ru: 'Серия',
+        en: 'Series',
+      },
+      columnTypes: [ColumnType.String, ColumnType.Date],
+      limit: 1,
+    }),
+    block({
+      key: EBlockKey.Y,
+      queryFn: DataQueryFunction.Sum,
+      label: {
+        ru: 'Ось Y',
+        en: 'Y axis',
+      },
+      icon: BlockIcon.AxisY,
+      columnTypes: [ColumnType.Number],
+    }),
+  ]
+}

package/src/index.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactSDK = void 0;
+exports.cli = cli;
+var child_process_1 = require("child_process");
+var fs_1 = __importDefault(require("fs"));
+var path_1 = __importDefault(require("path"));
+var url_1 = require("url");
+var __filename = (0, url_1.fileURLToPath)(import.meta.url);
+var __dirname = path_1.default.dirname(__filename);
+var ReactSDK = /** @class */ (function () {
+    function ReactSDK() {
+    }
+    /**
+     * Инициализация нового проекта
+     */
+    ReactSDK.init = function (options) {
+        var projectName = options.projectName, _a = options.template, template = _a === void 0 ? 'default' : _a, _b = options.packageManager, packageManager = _b === void 0 ? 'npm' : _b;
+        console.log("\uD83D\uDCE6 Creating new React app: ".concat(projectName));
+        // Создаем папку проекта
+        var projectPath = path_1.default.join(process.cwd(), projectName);
+        if (fs_1.default.existsSync(projectPath)) {
+            throw new Error("Directory ".concat(projectName, " already exists!"));
+        }
+        // // Копируем шаблон
+        // const templatePath = path.join(__dirname, '../templates/app-template')
+        // this.copyTemplate(templatePath, projectPath)
+        // // Обновляем package.json
+        // const pkgPath = path.join(projectPath, 'package.json')
+        // const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
+        // pkg.name = projectName
+        // fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2))
+        // Устанавливаем зависимости
+        console.log("\uD83D\uDCE6 Installing dependencies using ".concat(packageManager, "..."));
+        (0, child_process_1.execSync)("cd ".concat(projectName, " && ").concat(packageManager, " install"), {
+            stdio: 'inherit',
+        });
+        console.log("\u2705 Project ".concat(projectName, " created successfully!"));
+        console.log("\n    \uD83D\uDE80 To get started:\n      cd ".concat(projectName, "\n      ").concat(packageManager, " run dev\n    "));
+    };
+    ReactSDK.copyTemplate = function (src, dest) {
+        if (!fs_1.default.existsSync(dest)) {
+            fs_1.default.mkdirSync(dest, { recursive: true });
+        }
+        var entries = fs_1.default.readdirSync(src, { withFileTypes: true });
+        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+            var entry = entries_1[_i];
+            var srcPath = path_1.default.join(src, entry.name);
+            var destPath = path_1.default.join(dest, entry.name);
+            if (entry.isDirectory()) {
+                this.copyTemplate(srcPath, destPath);
+            }
+            else {
+                fs_1.default.copyFileSync(srcPath, destPath);
+            }
+        }
+    };
+    return ReactSDK;
+}());
+exports.ReactSDK = ReactSDK;
+// CLI интерфейс
+function cli() {
+    var args = process.argv.slice(2);
+    var command = args[0];
+    if (command === 'init') {
+        var projectName = args[1] || 'my-app';
+        ReactSDK.init({ projectName: projectName });
+    }
+    else {
+        console.log("\n    Usage:\n      npx my-react-sdk init <project-name>\n      \n    Examples:\n      npx my-react-sdk init my-new-app\n    ");
+    }
+}
+// Если запускается как CLI
+if (import.meta.url === "file://".concat(process.argv[1])) {
+    cli();
+}

package/src/index.ts

@@ -0,0 +1,101 @@
+import { execSync } from 'child_process'
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+export interface InitOptions {
+  projectName: string
+  template?: 'default' | 'minimal'
+  packageManager?: 'npm' | 'yarn' | 'pnpm'
+}
+
+export class ReactSDK {
+  /**
+   * Инициализация нового проекта
+   */
+  static init(options: InitOptions) {
+    const {
+      projectName,
+      template = 'default',
+      packageManager = 'npm',
+    } = options
+
+    console.log(`📦 Creating new React app: ${projectName}`)
+
+    // Создаем папку проекта
+    const projectPath = path.join(process.cwd(), projectName)
+
+    if (fs.existsSync(projectPath)) {
+      throw new Error(`Directory ${projectName} already exists!`)
+    }
+
+    // // Копируем шаблон
+    // const templatePath = path.join(__dirname, '../templates/app-template')
+    // this.copyTemplate(templatePath, projectPath)
+
+    // // Обновляем package.json
+    // const pkgPath = path.join(projectPath, 'package.json')
+    // const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
+    // pkg.name = projectName
+    // fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2))
+
+    // Устанавливаем зависимости
+    console.log(`📦 Installing dependencies using ${packageManager}...`)
+    execSync(`cd ${projectName} && ${packageManager} install`, {
+      stdio: 'inherit',
+    })
+
+    console.log(`✅ Project ${projectName} created successfully!`)
+    console.log(`
+    🚀 To get started:
+      cd ${projectName}
+      ${packageManager} run dev
+    `)
+  }
+
+  private static copyTemplate(src: string, dest: string) {
+    if (!fs.existsSync(dest)) {
+      fs.mkdirSync(dest, { recursive: true })
+    }
+
+    const entries = fs.readdirSync(src, { withFileTypes: true })
+
+    for (const entry of entries) {
+      const srcPath = path.join(src, entry.name)
+      const destPath = path.join(dest, entry.name)
+
+      if (entry.isDirectory()) {
+        this.copyTemplate(srcPath, destPath)
+      } else {
+        fs.copyFileSync(srcPath, destPath)
+      }
+    }
+  }
+}
+
+// CLI интерфейс
+export function cli() {
+  const args = process.argv.slice(2)
+  const command = args[0]
+
+  if (command === 'init') {
+    const projectName = args[1] || 'my-app'
+    ReactSDK.init({ projectName })
+  } else {
+    console.log(`
+    Usage:
+      npx my-react-sdk init <project-name>
+      
+    Examples:
+      npx my-react-sdk init my-new-app
+    `)
+  }
+}
+
+// Если запускается как CLI
+if (import.meta.url === `file://${process.argv[1]}`) {
+  cli()
+}