update

Author: dzencot

README.md

@@ -12,11 +12,13 @@
     ```
 3. Импортировать и запустить бота:
     ```javascript
-    import app from 'chatbot-v2';
+    import App from '@hexlet/chatbot-v2';
+    import steps from '@hexlet/chatbot-v2/example-steps';
+    import '@hexlet/chatbot-v2/styles';
 
     const container = document.getElementById('root');
-    const steps = [];
-    app(container, steps);
+    ReactDOM.createRoot(container)
+      .render(App(steps));
     ```
 
 Функция принимает первым параметром контейнер, в котором нужно отрисовать бота и вторым параметром шаги для работы чат-бота.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexlet/chatbot-v2",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "type": "module",
   "homepage": "https://hexlet.github.io/react-flowbot-ui-kit/",
   "files": [
@@ -15,7 +15,10 @@
       "require": "./dist/hexlet-flowbot.umd.cjs"
     },
     "./styles": {
-      "import": "./dist/style.css"
+      "import": "./dist/init.css"
+    },
+    "./example-steps": {
+      "import": "./src/steps.ts"
     }
   },
   "scripts": {
@@ -32,7 +35,8 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.0",
     "react-dom": "^18.2.0",
-    "vite-plugin-dts": "^3.7.3"
+    "vite-plugin-dts": "^3.7.3",
+    "vite-plugin-lib-inject-css": "^2.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.11.4",

package.json

@@ -1,5 +1,6 @@
 import { AppProps } from '../interfaces/Step';
 import WidgetModal from './WidgetModal';
+import '../scss/styles.scss';
 
 
 const App = ({ steps }: AppProps): JSX.Element => {

src/Components/App.tsx

@@ -2,12 +2,13 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
 import dts from 'vite-plugin-dts';
+import { libInjectCss } from 'vite-plugin-lib-inject-css';
 
 // for publishing as npm package
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), dts()],
+  plugins: [react(), dts(), libInjectCss()],
   build: {
     lib: {
       // Could also be a dictionary or array of multiple entry points
@@ -25,6 +26,6 @@ export default defineConfig({
         },
       },
     },
-    sourcemap: 'inline',
+    // sourcemap: 'inline',
   },
 });