fix peer dependencies

export QuizView component from package
fix readme

.dockerignore

@@ -1,4 +1,5 @@
 /dist
+/dist-package
 /widget
 Makefile
 README.md

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+dist-package
 dist-ssr
 widget
 *.local
@@ -22,4 +23,4 @@ widget
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.sw?

README.md

@@ -1,24 +1,49 @@
-# Виджет
+## Виджет
+### Сборка
 ```bash
 yarn build:widget
 ```
-# Npm-пакет
+### Использование
-## Перед использованием и публикацией
+```html
-```bash
+<script type="module">
-# заменить TOKEN на актуальный токен
+    import widget from "https://s.hbpn.link/export/pub.js";
-npm config set //penahub.gitlab.yandexcloud.net/api/v4/packages/npm/:_authToken=TOKEN
+
-npm config set //penahub.gitlab.yandexcloud.net/api/v4/projects/43/packages/npm/:_authToken=TOKEN
+    widget.create({
+        selector: "widget-container",
+        quizId: "...",
+    })
+</script>
 ```
-## Публикация
+## Npm-пакет
+### Перед использованием и публикацией
+```bash
+npm config set //penahub.gitlab.yandexcloud.net/api/v4/packages/npm/:_authToken=INSTANCE_TOKEN
+npm config set //penahub.gitlab.yandexcloud.net/api/v4/projects/43/packages/npm/:_authToken=PROJECT_TOKEN
+```
+### Публикация
 ```bash
 yarn publish
 ```
-## Использование
+### Установка
 Добавить в корень проекта файл .yarnrc с содержимым
 ```
 "@frontend:registry" "https://penahub.gitlab.yandexcloud.net/api/v4/packages/npm/"
 ```
-Установка
 ```bash
 yarn add @frontend/squzanswerer
 ```
+Peer dependencies:
+```bash
+yarn add @emoji-mart/data @emoji-mart/react @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/x-date-pickers axios emoji-mart immer moment nanoid notistack react-dom react-error-boundary react-router-dom react swr use-debounce zustand
+```
+### Использование
+```ts
+import { QuizView } from "@frontend/squzanswerer";
+
+export default function Component() {
+    // ...
+    return (
+        <QuizView quizId={quizId} />
+    }
+}
+```

lib/components/QuizView.tsx

@@ -2,14 +2,14 @@ import { Box } from "@mui/material";
 import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { QuizIdContext } from "@contexts/QuizIdContext";
 import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
-import QuizAnswerer from "../lib/components/QuizAnswerer";
+import QuizAnswerer from "./QuizAnswerer";
 
 
 interface Props {
     quizId: string;
 }
 
-export default function WidgetApp({ quizId }: Props) {
+export default function QuizView({ quizId }: Props) {
     const [rootContainerSize, setRootContainerSize] = useState<number>(() => window.innerWidth);
     const rootContainerRef = useRef<HTMLDivElement>(null);
 

lib/index.ts

@@ -0,0 +1,3 @@
+import QuizView from "./components/QuizView";
+
+export { QuizView };

package.json

@@ -1,11 +1,11 @@
 {
-    "name": "squzanswerer",
+    "name": "@frontend/squzanswerer",
-    "version": "0.0.0",
+    "version": "0.0.3",
-    "private": true,
     "type": "module",
     "main": "./dist-package/index.js",
     "module": "./dist-package/index.js",
     "types": "./dist-package/index.d.ts",
+    "license": "MIT",
     "files": [
         "dist-package"
     ],
@@ -27,42 +27,61 @@
         "cypress:open": "cypress open",
         "prepublishOnly": "npm run build:package"
     },
-    "dependencies": {
+    "devDependencies": {
+        "@emoji-mart/data": "^1.1.2",
+        "@emoji-mart/react": "^1.1.1",
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
         "@mui/icons-material": "^5.10.14",
         "@mui/material": "^5.10.14",
         "@mui/x-date-pickers": "^6.16.1",
         "@types/node": "^16.7.13",
+        "@types/react-dom": "^18.2.17",
+        "@types/react": "^18.2.43",
+        "@typescript-eslint/eslint-plugin": "^6.14.0",
+        "@typescript-eslint/parser": "^6.14.0",
+        "@vitejs/plugin-react": "^4.2.1",
+        "axios": "^1.5.1",
+        "cypress": "^13.6.1",
+        "emoji-mart": "^5.5.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.5",
+        "eslint": "^8.55.0",
+        "immer": "^10.0.3",
+        "moment": "^2.30.1",
+        "nanoid": "^5.0.3",
+        "notistack": "^3.0.1",
+        "react-dom": "^18.2.0",
+        "react-error-boundary": "^4.0.12",
+        "react-router-dom": "^6.21.3",
+        "react": "^18.2.0",
+        "swr": "^2.2.4",
+        "typescript": "^5.2.2",
+        "use-debounce": "^9.0.4",
+        "vite-plugin-dts": "^3.7.2",
+        "vite": "^5.0.8",
+        "zustand": "^4.3.8"
+    },
+    "peerDependencies": {
+        "@emoji-mart/data": "^1.1.2",
+        "@emoji-mart/react": "^1.1.1",
+        "@emotion/react": "^11.10.5",
+        "@emotion/styled": "^11.10.5",
+        "@mui/icons-material": "^5.10.14",
+        "@mui/material": "^5.10.14",
+        "@mui/x-date-pickers": "^6.16.1",
         "axios": "^1.5.1",
         "emoji-mart": "^5.5.2",
         "immer": "^10.0.3",
         "moment": "^2.30.1",
         "nanoid": "^5.0.3",
         "notistack": "^3.0.1",
-        "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-error-boundary": "^4.0.12",
         "react-router-dom": "^6.21.3",
+        "react": "^18.2.0",
         "swr": "^2.2.4",
-        "typescript": "^5.2.2",
         "use-debounce": "^9.0.4",
-        "vite-plugin-dts": "^3.7.2",
         "zustand": "^4.3.8"
-    },
-    "devDependencies": {
-        "@emoji-mart/data": "^1.1.2",
-        "@emoji-mart/react": "^1.1.1",
-        "@types/react": "^18.2.43",
-        "@types/react-dom": "^18.2.17",
-        "@typescript-eslint/eslint-plugin": "^6.14.0",
-        "@typescript-eslint/parser": "^6.14.0",
-        "@vitejs/plugin-react": "^4.2.1",
-        "cypress": "^13.6.1",
-        "eslint": "^8.55.0",
-        "eslint-plugin-react-hooks": "^4.6.0",
-        "eslint-plugin-react-refresh": "^0.4.5",
-        "typescript": "^5.2.2",
-        "vite": "^5.0.8"
     }
 }

src/widget.tsx

@@ -1,5 +1,5 @@
-import WidgetApp from "./WidgetApp";
 import { Root, createRoot } from "react-dom/client";
+import { QuizView } from "../lib";
 
 
 let root: Root | undefined = undefined;
@@ -14,7 +14,7 @@ const widget = {
 
         root = createRoot(element);
 
-        root.render(<WidgetApp quizId={quizId} />);
+        root.render(<QuizView quizId={quizId} />);
     },
     unmount() {
         if (root) root.unmount();
@@ -22,14 +22,3 @@ const widget = {
 };
 
 export default widget;
-
-/*
-<script type="module">
-    import widget from ".../widget.js";
-
-    widget.create({
-        selector: "widget-container",
-        quizId: "...",
-    })
-</script>
-*/

vite.config.package.ts

@@ -2,10 +2,14 @@ import react from "@vitejs/plugin-react";
 import { resolve } from "path";
 import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
+import { alias } from "./vite.config";
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [react(), dts({ include: ["lib"] })],
+    resolve: {
+        alias,
+    },
     build: {
         lib: {
             entry: resolve(__dirname, "lib/index.ts"),
@@ -16,15 +20,30 @@ export default defineConfig({
         copyPublicDir: false,
         rollupOptions: {
             external: [
+                "@emoji-mart/data",
+                "@emoji-mart/react",
                 "@emotion/react",
                 "@emotion/styled",
                 "@mui/icons-material",
                 "@mui/material",
+                "@mui/x-date-pickers",
                 "axios",
+                "emoji-mart",
+                "immer",
+                "moment",
+                "nanoid",
+                "notistack",
+                "react-dom",
+                "react-error-boundary",
                 "react-router-dom",
                 "react",
+                "swr",
+                "use-debounce",
                 "zustand",
             ],
         },
-    }
+    },
+    define: {
+        "process.env": process.env,
+    },
 });