react-select-media-devices-modal 0.0.6 → 0.0.8

package/README.md

@@ -1,7 +1,10 @@
 # react-select-media-devices-modal
 
 [![npm version](https://badge.fury.io/js/react-select-media-devices-modal.svg)](https://badge.fury.io/js/react-select-media-devices-modal)
+[![Test](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/test.yaml/badge.svg?branch=master)](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/test.yaml)
+[![E2E Test](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/e2e-test.yaml/badge.svg)](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/e2e-test.yaml)
 [![Release](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/release.yaml/badge.svg)](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/release.yaml)
+[![Deploy to GitHub Pages](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/deploy.yaml/badge.svg?branch=master)](https://github.com/kadoshita/react-select-media-devices-modal/actions/workflows/deploy.yaml)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 A React component library for select media devices.
@@ -22,7 +25,7 @@ npm install --save react-select-media-devices-modal
 
 ## Usage
 
-```tsx
+```jsx
 import { useState } from 'react';
 import { SelectMediaDevicesModal } from 'react-select-media-devices-modal';
 
@@ -49,8 +52,8 @@ function App() {
                 audioInputDeviceLabel="Audio input device"
                 audioOutputDeviceLabel="Audio output device"
                 videoInputDeviceLabel="Video input device"
-                ConfirmButtonText="Confirm"
-                CancelButtonText="Cancel"
+                confirmButtonText="Confirm"
+                cancelButtonText="Cancel"
                 allowOutsideClick={false}
                 onDeviceSelected={handleDeviceSelected}
                 onDeviceSelectCanceled={handleDeviceSelectCanceled}
@@ -75,8 +78,8 @@ export default App;
 | audioInputDeviceLabel | `string` | `'audio input device'` | Label for list of audio input devices. |
 | audioOutputDeviceLabel | `string` | `'audio output device'` | Label for list of audio output devices. |
 | videoInputDeviceLabel | `string` | `'video input device'` | Label for list of video input devices. |
-| ConfirmButtonText | `string` | `'Confirm'` | Label for the confirm button. |
-| CancelButtonText | `string` | `'Cancel'` | Label for the cancel button. |
+| confirmButtonText | `string` | `'Confirm'` | Label for the confirm button. |
+| cancelButtonText | `string` | `'Cancel'` | Label for the cancel button. |
 | allowOutsideClick | `boolean` | `true` | Flag that cancel selection when clicking outside of the modal. |
 | onDeviceSelected | `function` | `(devices: { audioInput?: MediaDeviceInfo; audioOutput?: MediaDeviceInfo; videoInput?: MediaDeviceInfo; }) => void` | Handler function called when devices are selected. |
 | onDeviceSelectCanceled | `function` | `() => void` | Handler function called when selection canceled. |

package/dist/react-select-media-devices-modal.mjs

@@ -1,94 +1,99 @@
-import e, { useState as l, useEffect as w } from "react";
-const G = "_background_a8nxk_1", P = "_modal_a8nxk_13", R = "_deviceLists_a8nxk_19", S = "_buttons_a8nxk_23", T = "_chancelButton_a8nxk_30", U = "_confirmButton_a8nxk_32", o = {
-  background: G,
-  modal: P,
-  deviceLists: R,
-  buttons: S,
-  chancelButton: T,
-  confirmButton: U
-}, q = () => {
+import e, { useState as l, useEffect as j } from "react";
+const x = "_background_2h4vl_1", G = "_modal_2h4vl_13", P = "_deviceLists_2h4vl_19", R = "_buttons_2h4vl_23", S = "_chancelButton_2h4vl_30", T = "_confirmButton_2h4vl_32", a = {
+  background: x,
+  modal: G,
+  deviceLists: P,
+  buttons: R,
+  chancelButton: S,
+  confirmButton: T
+}, U = () => {
   const [n, c] = l([]);
   return [n, () => {
     (async () => {
-      const s = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), i = await navigator.mediaDevices.enumerateDevices();
-      c(i), s.getTracks().forEach((u) => u.stop());
+      const u = await navigator.mediaDevices.getUserMedia({ audio: !0, video: !0 }), s = await navigator.mediaDevices.enumerateDevices();
+      c(s), u.getTracks().forEach((i) => i.stop());
     })();
   }];
-}, z = ({ name: n, value: c }) => /* @__PURE__ */ e.createElement("option", { value: c }, n), g = ({ devices: n, label: c, onChange: a }) => {
+}, z = ({ name: n, value: c }) => /* @__PURE__ */ e.createElement("option", { value: c }, n), H = "_deviceList_1bfq1_1", J = "_select_1bfq1_5", C = {
+  deviceList: H,
+  select: J
+}, h = ({ devices: n, label: c, onChange: o }) => {
   if (n === void 0)
     return /* @__PURE__ */ e.createElement(e.Fragment, null);
-  const s = (i) => {
-    a(i.target.value);
-  };
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("label", { htmlFor: "device-select" }, c), /* @__PURE__ */ e.createElement("select", { name: "device-select", onChange: s }, n.map((i, u) => /* @__PURE__ */ e.createElement(z, { value: i.deviceId, name: i.label, key: u }))));
-}, _ = ({ className: n, children: c, onClick: a }) => /* @__PURE__ */ e.createElement("button", { onClick: a, className: [n].filter(Boolean).join(" ") }, c), J = ({
+  const u = (i) => {
+    o(i.target.value);
+  }, s = `device-select-${c.toLowerCase().replace(/\s/g, "-")}`;
+  return /* @__PURE__ */ e.createElement("div", { className: C.deviceList }, /* @__PURE__ */ e.createElement("label", { htmlFor: s }, c), /* @__PURE__ */ e.createElement("select", { className: C.select, id: s, onChange: u }, n.map((i, v) => /* @__PURE__ */ e.createElement(z, { value: i.deviceId, name: i.label, key: v }))));
+}, K = "_button_keu24_1", Q = {
+  button: K
+}, k = ({ className: n, children: c, onClick: o }) => /* @__PURE__ */ e.createElement("button", { onClick: o, className: [Q.button, n].filter(Boolean).join(" ") }, c), X = ({
   isSelectAudioInput: n = !0,
   isSelectAudioOutput: c = !0,
-  isSelectVideoInput: a = !0,
-  open: s,
-  audioInputDeviceLabel: i = "audio input device",
-  audioOutputDeviceLabel: u = "audio output device",
-  videoInputDeviceLabel: C = "video input device",
-  ConfirmButtonText: I = "Confirm",
-  CancelButtonText: b = "Cancel",
-  allowOutsideClick: D = !0,
+  isSelectVideoInput: o = !0,
+  open: u,
+  audioInputDeviceLabel: s = "audio input device",
+  audioOutputDeviceLabel: i = "audio output device",
+  videoInputDeviceLabel: v = "video input device",
+  confirmButtonText: I = "Confirm",
+  cancelButtonText: L = "Cancel",
+  allowOutsideClick: g = !0,
   onDeviceSelected: B,
-  onDeviceSelectCanceled: k
+  onDeviceSelectCanceled: D
 }) => {
-  const [r, x] = q(), [h, N] = l(), [E, L] = l(), [f, O] = l(), v = r.filter((t) => t.kind === "audioinput"), m = r.filter((t) => t.kind === "audiooutput"), p = r.filter((t) => t.kind === "videoinput");
-  w(() => {
-    x();
+  const [r, N] = U(), [f, O] = l(), [b, A] = l(), [E, F] = l(), m = r.filter((t) => t.kind === "audioinput"), p = r.filter((t) => t.kind === "audiooutput"), _ = r.filter((t) => t.kind === "videoinput");
+  j(() => {
+    N();
   }, []);
-  const A = () => {
+  const M = () => {
     B({
-      audioInput: h !== void 0 ? h : v[0],
-      audioOutput: E !== void 0 ? E : m[0],
-      videoInput: f !== void 0 ? f : p[0]
+      audioInput: f !== void 0 ? f : m[0],
+      audioOutput: b !== void 0 ? b : p[0],
+      videoInput: E !== void 0 ? E : _[0]
     });
-  }, F = () => {
-    k();
-  }, M = (t) => {
-    N(v.find((d) => d.deviceId === t));
+  }, $ = () => {
+    D();
+  }, q = (t) => {
+    O(m.find((d) => d.deviceId === t));
+  }, w = (t) => {
+    A(p.find((d) => d.deviceId === t));
   }, y = (t) => {
-    L(m.find((d) => d.deviceId === t));
-  }, V = (t) => {
-    O(p.find((d) => d.deviceId === t));
-  }, j = () => {
-    k();
+    F(_.find((d) => d.deviceId === t));
+  }, V = () => {
+    D();
   };
-  return s ? /* @__PURE__ */ e.createElement("div", { className: o.background, ...D ? { onClick: j } : {} }, /* @__PURE__ */ e.createElement(
+  return u ? /* @__PURE__ */ e.createElement("div", { className: a.background, ...g ? { onClick: V } : {} }, /* @__PURE__ */ e.createElement(
     "div",
     {
-      className: o.modal,
-      ...D ? {
+      className: a.modal,
+      ...g ? {
         onClick: (t) => t.stopPropagation()
       } : {}
     },
-    /* @__PURE__ */ e.createElement("div", { className: o.deviceLists }, n && /* @__PURE__ */ e.createElement(
-      g,
+    /* @__PURE__ */ e.createElement("div", { className: a.deviceLists }, n && /* @__PURE__ */ e.createElement(
+      h,
       {
-        label: i,
-        devices: v,
-        onChange: M
+        label: s,
+        devices: m,
+        onChange: q
       }
     ), c && /* @__PURE__ */ e.createElement(
-      g,
+      h,
       {
-        label: u,
-        devices: m,
-        onChange: y
+        label: i,
+        devices: p,
+        onChange: w
       }
-    ), a && /* @__PURE__ */ e.createElement(
-      g,
+    ), o && /* @__PURE__ */ e.createElement(
+      h,
       {
-        label: C,
-        devices: p,
-        onChange: V
+        label: v,
+        devices: _,
+        onChange: y
       }
     )),
-    /* @__PURE__ */ e.createElement("div", { className: o.buttons }, /* @__PURE__ */ e.createElement(_, { className: o.cancelButton, onClick: F }, b), /* @__PURE__ */ e.createElement(_, { className: o.confirmButton, onClick: A }, I))
+    /* @__PURE__ */ e.createElement("div", { className: a.buttons }, /* @__PURE__ */ e.createElement(k, { className: a.cancelButton, onClick: $ }, L), /* @__PURE__ */ e.createElement(k, { className: a.confirmButton, onClick: M }, I))
   )) : /* @__PURE__ */ e.createElement(e.Fragment, null);
 };
 export {
-  J as SelectMediaDevicesModal
+  X as SelectMediaDevicesModal
 };

package/dist/react-select-media-devices-modal.umd.js

@@ -1 +1 @@
-(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.ReactSelectMediaDevicesModal={},c.React))})(this,function(c,e){"use strict";const s={background:"_background_a8nxk_1",modal:"_modal_a8nxk_13",deviceLists:"_deviceLists_a8nxk_19",buttons:"_buttons_a8nxk_23",chancelButton:"_chancelButton_a8nxk_30",confirmButton:"_confirmButton_a8nxk_32"},_=()=>{const[n,i]=e.useState([]);return[n,()=>{(async()=>{const u=await navigator.mediaDevices.getUserMedia({audio:!0,video:!0}),o=await navigator.mediaDevices.enumerateDevices();i(o),u.getTracks().forEach(d=>d.stop())})()}]},C=({name:n,value:i})=>e.createElement("option",{value:i},n),r=({devices:n,label:i,onChange:a})=>{if(n===void 0)return e.createElement(e.Fragment,null);const u=o=>{a(o.target.value)};return e.createElement(e.Fragment,null,e.createElement("label",{htmlFor:"device-select"},i),e.createElement("select",{name:"device-select",onChange:u},n.map((o,d)=>e.createElement(C,{value:o.deviceId,name:o.label,key:d}))))},g=({className:n,children:i,onClick:a})=>e.createElement("button",{onClick:a,className:[n].filter(Boolean).join(" ")},i),I=({isSelectAudioInput:n=!0,isSelectAudioOutput:i=!0,isSelectVideoInput:a=!0,open:u,audioInputDeviceLabel:o="audio input device",audioOutputDeviceLabel:d="audio output device",videoInputDeviceLabel:B="video input device",ConfirmButtonText:x="Confirm",CancelButtonText:M="Cancel",allowOutsideClick:h=!0,onDeviceSelected:S,onDeviceSelectCanceled:D})=>{const[v,L]=_(),[k,N]=e.useState(),[E,y]=e.useState(),[b,O]=e.useState(),m=v.filter(t=>t.kind==="audioinput"),p=v.filter(t=>t.kind==="audiooutput"),f=v.filter(t=>t.kind==="videoinput");e.useEffect(()=>{L()},[]);const A=()=>{S({audioInput:k!==void 0?k:m[0],audioOutput:E!==void 0?E:p[0],videoInput:b!==void 0?b:f[0]})},F=()=>{D()},T=t=>{N(m.find(l=>l.deviceId===t))},j=t=>{y(p.find(l=>l.deviceId===t))},P=t=>{O(f.find(l=>l.deviceId===t))},V=()=>{D()};return u?e.createElement("div",{className:s.background,...h?{onClick:V}:{}},e.createElement("div",{className:s.modal,...h?{onClick:t=>t.stopPropagation()}:{}},e.createElement("div",{className:s.deviceLists},n&&e.createElement(r,{label:o,devices:m,onChange:T}),i&&e.createElement(r,{label:d,devices:p,onChange:j}),a&&e.createElement(r,{label:B,devices:f,onChange:P})),e.createElement("div",{className:s.buttons},e.createElement(g,{className:s.cancelButton,onClick:F},M),e.createElement(g,{className:s.confirmButton,onClick:A},x)))):e.createElement(e.Fragment,null)};c.SelectMediaDevicesModal=I,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.ReactSelectMediaDevicesModal={},c.React))})(this,function(c,e){"use strict";const s={background:"_background_2h4vl_1",modal:"_modal_2h4vl_13",deviceLists:"_deviceLists_2h4vl_19",buttons:"_buttons_2h4vl_23",chancelButton:"_chancelButton_2h4vl_30",confirmButton:"_confirmButton_2h4vl_32"},I=()=>{const[n,i]=e.useState([]);return[n,()=>{(async()=>{const a=await navigator.mediaDevices.getUserMedia({audio:!0,video:!0}),d=await navigator.mediaDevices.enumerateDevices();i(d),a.getTracks().forEach(o=>o.stop())})()}]},L=({name:n,value:i})=>e.createElement("option",{value:i},n),_={deviceList:"_deviceList_1bfq1_1",select:"_select_1bfq1_5"},r=({devices:n,label:i,onChange:u})=>{if(n===void 0)return e.createElement(e.Fragment,null);const a=o=>{u(o.target.value)},d=`device-select-${i.toLowerCase().replace(/\s/g,"-")}`;return e.createElement("div",{className:_.deviceList},e.createElement("label",{htmlFor:d},i),e.createElement("select",{className:_.select,id:d,onChange:a},n.map((o,v)=>e.createElement(L,{value:o.deviceId,name:o.label,key:v}))))},B={button:"_button_keu24_1"},g=({className:n,children:i,onClick:u})=>e.createElement("button",{onClick:u,className:[B.button,n].filter(Boolean).join(" ")},i),N=({isSelectAudioInput:n=!0,isSelectAudioOutput:i=!0,isSelectVideoInput:u=!0,open:a,audioInputDeviceLabel:d="audio input device",audioOutputDeviceLabel:o="audio output device",videoInputDeviceLabel:v="video input device",confirmButtonText:M="Confirm",cancelButtonText:S="Cancel",allowOutsideClick:b=!0,onDeviceSelected:y,onDeviceSelectCanceled:D})=>{const[m,O]=I(),[E,A]=e.useState(),[C,T]=e.useState(),[k,j]=e.useState(),p=m.filter(t=>t.kind==="audioinput"),f=m.filter(t=>t.kind==="audiooutput"),h=m.filter(t=>t.kind==="videoinput");e.useEffect(()=>{O()},[]);const q=()=>{y({audioInput:E!==void 0?E:p[0],audioOutput:C!==void 0?C:f[0],videoInput:k!==void 0?k:h[0]})},F=()=>{D()},$=t=>{A(p.find(l=>l.deviceId===t))},w=t=>{T(f.find(l=>l.deviceId===t))},x=t=>{j(h.find(l=>l.deviceId===t))},P=()=>{D()};return a?e.createElement("div",{className:s.background,...b?{onClick:P}:{}},e.createElement("div",{className:s.modal,...b?{onClick:t=>t.stopPropagation()}:{}},e.createElement("div",{className:s.deviceLists},n&&e.createElement(r,{label:d,devices:p,onChange:$}),i&&e.createElement(r,{label:o,devices:f,onChange:w}),u&&e.createElement(r,{label:v,devices:h,onChange:x})),e.createElement("div",{className:s.buttons},e.createElement(g,{className:s.cancelButton,onClick:F},S),e.createElement(g,{className:s.confirmButton,onClick:q},M)))):e.createElement(e.Fragment,null)};c.SelectMediaDevicesModal=N,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -1 +1 @@
-._background_a8nxk_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;display:flex;align-items:center;justify-content:center}._modal_a8nxk_13{background:white;padding:16px;border-radius:8px}._deviceLists_a8nxk_19{display:grid}._buttons_a8nxk_23{padding-top:8px;display:flex;align-items:center;justify-content:right}._confirmButton_a8nxk_32{margin-left:4px}
+._background_2h4vl_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0000004d;display:flex;align-items:center;justify-content:center}._modal_2h4vl_13{background:white;padding:16px;border-radius:8px}._deviceLists_2h4vl_19{display:grid}._buttons_2h4vl_23{padding-top:16px;display:flex;align-items:center;justify-content:right}._confirmButton_2h4vl_32{margin-left:4px}._deviceList_1bfq1_1{padding-top:8px}._select_1bfq1_5{margin-top:4px;border-radius:4px;height:32px;display:flex;align-items:center;justify-content:right;width:100%}._button_keu24_1{border-radius:4px;height:32px;padding-left:16px;padding-right:16px;background-color:#fff;border-width:1px}

package/dist/types/SelectMediaDevicesModal/components/button/index.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 interface ButtonProps {
-    className: string;
+    className?: string;
     children: ReactNode;
     onClick: () => void;
 }

package/dist/types/SelectMediaDevicesModal/index.d.ts

@@ -7,8 +7,8 @@ interface SelectMediaDevicesModalProps {
     audioInputDeviceLabel: string;
     audioOutputDeviceLabel: string;
     videoInputDeviceLabel: string;
-    ConfirmButtonText: string;
-    CancelButtonText: string;
+    confirmButtonText: string;
+    cancelButtonText: string;
     allowOutsideClick: boolean;
     onDeviceSelected: (devices: {
         audioInput?: MediaDeviceInfo;
@@ -17,5 +17,5 @@ interface SelectMediaDevicesModalProps {
     }) => void;
     onDeviceSelectCanceled: () => void;
 }
-declare const SelectMediaDevicesModal: ({ isSelectAudioInput, isSelectAudioOutput, isSelectVideoInput, open, audioInputDeviceLabel, audioOutputDeviceLabel, videoInputDeviceLabel, ConfirmButtonText, CancelButtonText, allowOutsideClick, onDeviceSelected, onDeviceSelectCanceled, }: SelectMediaDevicesModalProps) => JSX.Element;
+declare const SelectMediaDevicesModal: ({ isSelectAudioInput, isSelectAudioOutput, isSelectVideoInput, open, audioInputDeviceLabel, audioOutputDeviceLabel, videoInputDeviceLabel, confirmButtonText, cancelButtonText, allowOutsideClick, onDeviceSelected, onDeviceSelectCanceled, }: SelectMediaDevicesModalProps) => JSX.Element;
 export default SelectMediaDevicesModal;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-select-media-devices-modal",
     "description": "A React component library for select media devices",
-    "version": "0.0.6",
+    "version": "0.0.8",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -32,7 +32,10 @@
     ],
     "scripts": {
         "dev": "vite serve example",
-        "build": "vite build"
+        "build": "vite build",
+        "test": "vitest",
+        "coverage": "vitest run --coverage",
+        "test:e2e": "vitest run -c vitest.e2e.config.ts"
     },
     "dependencies": {
         "react": "^18.2.0",
@@ -41,14 +44,23 @@
     },
     "devDependencies": {
         "@mdx-js/react": "^2.3.0",
+        "@playwright/test": "^1.33.0",
         "@rollup/plugin-typescript": "^11.1.0",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^14.0.0",
+        "@testing-library/user-event": "^14.4.3",
         "@types/node": "^18.15.11",
         "@types/react": "^18.0.33",
         "@vitejs/plugin-react": "^3.1.0",
+        "@vitest/coverage-c8": "^0.30.1",
+        "@vitest/ui": "^0.30.1",
+        "jsdom": "^21.1.1",
+        "playwright": "^1.33.0",
         "rimraf": "^4.4.1",
         "serve": "^14.2.0",
         "vite": "^4.2.1",
         "vite-pages-theme-doc": "^4.0.0",
-        "vite-plugin-react-pages": "^4.0.0"
+        "vite-plugin-react-pages": "^4.0.0",
+        "vitest": "^0.30.1"
     }
 }