@mohamed-karawia/react-storybook 0.1.1

package/dist/stories/Agora/Preview/PreviewCamera.js

@@ -0,0 +1,247 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewCamera = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _agoraRtcReact = require("agora-rtc-react");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var rtc = {
+  localVideoTrack: null,
+  localAudioTrack: null
+};
+var options = {
+  appid: '3f54ddbde65d4f0ab9a9f5a46baa4310',
+  channel: 'bcd',
+  uid: '123',
+  token: '0063f54ddbde65d4f0ab9a9f5a46baa4310IAALsgGjVTL2Av/GANIuUU61cNObFj9T7krqkn2UG1uXeHlbHbAAAAAAEAAw9+/yVoJUYQEAAQBWglRh',
+  audienceLatency: 2
+};
+var createCameraTrack = (0, _agoraRtcReact.createCameraVideoTrack)();
+var createAudioTrack = (0, _agoraRtcReact.createMicrophoneAudioTrack)();
+var useuplinkClient = (0, _agoraRtcReact.createClient)();
+var usedownlinkClient = (0, _agoraRtcReact.createClient)();
+
+var PreviewCamera = function PreviewCamera(_ref) {
+  var getDeviceIds = _ref.getDeviceIds,
+      token = _ref.token,
+      uid = _ref.uid,
+      uid2 = _ref.uid2,
+      token2 = _ref.token2;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      audioDevices = _useState2[0],
+      setAudioDevices = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      videoDevices = _useState4[0],
+      setVideoDevices = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      selectedAudioDevice = _useState6[0],
+      setSelectedAudioDevice = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      selectedVideoDevice = _useState8[0],
+      setSelectedVideoDevice = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      muted = _useState10[0],
+      setMuted = _useState10[1];
+
+  var uplinkClient = useuplinkClient();
+  var downlinkClient = usedownlinkClient();
+  var localVideo = createCameraTrack();
+  var localAudio = createAudioTrack();
+  rtc.localAudioTrack = localAudio.track;
+  rtc.localVideoTrack = localVideo.track;
+  var localPlayerContainer = document.createElement('div');
+  localPlayerContainer.id = 'player';
+
+  if (localPlayerContainer && rtc.localVideoTrack) {
+    localPlayerContainer.style.width = '450px';
+    localPlayerContainer.style.height = '360px';
+    localPlayerContainer.style.borderRadius = '10px';
+    var container = document.getElementById('playerContainer');
+    container.appendChild(localPlayerContainer);
+    rtc.localVideoTrack.play(localPlayerContainer);
+  }
+
+  (0, _react.useEffect)(function () {
+    (0, _agoraRtcReact.getDevices)().then(function (devices) {
+      var _audioDeviceList$, _videoDeviceList$;
+
+      var audioDeviceList = devices.filter(function (device) {
+        return device.kind === 'audioinput';
+      });
+      var videoDeviceList = devices.filter(function (device) {
+        return device.kind === 'videoinput';
+      });
+      setSelectedAudioDevice((_audioDeviceList$ = audioDeviceList[0]) === null || _audioDeviceList$ === void 0 ? void 0 : _audioDeviceList$.deviceId);
+      setAudioDevices(audioDeviceList);
+      setSelectedVideoDevice((_videoDeviceList$ = videoDeviceList[0]) === null || _videoDeviceList$ === void 0 ? void 0 : _videoDeviceList$.deviceId);
+      setVideoDevices(videoDeviceList);
+    });
+    return function () {
+      rtc.localVideoTrack.stop();
+      rtc.localVideoTrack.close();
+      rtc.localAudioTrack.stop();
+      rtc.localAudioTrack.close();
+      uplinkClient.leave();
+      downlinkClient.leave();
+      uplinkClient.removeAllListeners();
+      downlinkClient.removeAllListeners();
+      var player = document.getElementById('player');
+      player.remove();
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    var init = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                downlinkClient.on('user-published', function (user, mediaType) {
+                  downlinkClient.subscribe(user, mediaType);
+                });
+                downlinkClient.on('network-quality', function (quality) {
+                  var networkQuality = quality.downlinkNetworkQuality;
+                  var networkAdapters = document.getElementsByClassName('networkAdapter');
+                  networkAdapters.forEach(function (networkAdapter) {
+                    if (networkQuality === 1) {
+                      networkAdapter.style.backgroundColor = 'green';
+                    }
+
+                    if (networkQuality === 3) {
+                      networkAdapter.style.backgroundColor = 'yellow';
+                    }
+
+                    if (networkQuality === 5) {
+                      networkAdapter.style.backgroundColor = 'red';
+                    }
+                  });
+                });
+                uplinkClient.on('network-quality', function (quality) {
+                  var networkQuality = quality.uplinkNetworkQuality;
+                  var networkAdapters = document.getElementsByClassName('networkAdapter');
+                  networkAdapters.forEach(function (networkAdapter) {
+                    if (networkQuality === 1) {
+                      networkAdapter.style.backgroundColor = 'green';
+                    }
+
+                    if (networkQuality === 3) {
+                      networkAdapter.style.backgroundColor = 'yellow';
+                    }
+
+                    if (networkQuality === 5) {
+                      networkAdapter.style.backgroundColor = 'red';
+                    }
+                  });
+                });
+                _context.next = 5;
+                return uplinkClient.join(options.appid, options.channel, token || null, uid);
+
+              case 5:
+                _context.next = 7;
+                return downlinkClient.join(options.appid, options.channel, token2 || null, uid2);
+
+              case 7:
+                uplinkClient.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
+
+              case 8:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function init() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    if (rtc.localAudioTrack && rtc.localVideoTrack) {
+      init();
+    }
+  }, [rtc.localAudioTrack, rtc.localVideoTrack]);
+  getDeviceIds({
+    selectedAudioDevice: selectedAudioDevice,
+    selectedVideoDevice: selectedVideoDevice
+  }); // Get the uplink statistics
+
+  var uplinkVideoStats = uplinkClient.getLocalVideoStats();
+  return /*#__PURE__*/_react.default.createElement(Container, null, /*#__PURE__*/_react.default.createElement("h1", null, "handsome preview"), /*#__PURE__*/_react.default.createElement(OptionContainer, null, /*#__PURE__*/_react.default.createElement(TextContainer, null, /*#__PURE__*/_react.default.createElement("h3", null, "Audio Device")), /*#__PURE__*/_react.default.createElement(DropDownContainer, null, /*#__PURE__*/_react.default.createElement("select", null, audioDevices === null || audioDevices === void 0 ? void 0 : audioDevices.map(function (audioDevice, i) {
+    return /*#__PURE__*/_react.default.createElement("option", {
+      onClick: function onClick() {
+        setSelectedAudioDevice(audioDevice.id);
+      },
+      key: i
+    }, audioDevice.label);
+  })))), /*#__PURE__*/_react.default.createElement(OptionContainer, null, /*#__PURE__*/_react.default.createElement(TextContainer, null, /*#__PURE__*/_react.default.createElement("h3", null, "Video device")), /*#__PURE__*/_react.default.createElement(DropDownContainer, null, /*#__PURE__*/_react.default.createElement("select", null, videoDevices === null || videoDevices === void 0 ? void 0 : videoDevices.map(function (videoDevice, i) {
+    return /*#__PURE__*/_react.default.createElement("option", {
+      onClick: function onClick() {
+        setSelectedVideoDevice(videoDevice.id);
+        rtc.localVideoTrack.setDevice(videoDevice.id).then(function () {});
+      },
+      key: i
+    }, videoDevice.label);
+  })))), /*#__PURE__*/_react.default.createElement(OptionContainer, null, /*#__PURE__*/_react.default.createElement(NetworkContainer, null, /*#__PURE__*/_react.default.createElement(TextContainer, null, /*#__PURE__*/_react.default.createElement("h3", null, "Network Quality")), /*#__PURE__*/_react.default.createElement(NetworkAdapterContainer, null, /*#__PURE__*/_react.default.createElement(NetworkAdapter, {
+    className: "networkAdapter"
+  }), /*#__PURE__*/_react.default.createElement(NetworkAdapter, {
+    className: "networkAdapter"
+  }), /*#__PURE__*/_react.default.createElement(NetworkAdapter, {
+    className: "networkAdapter"
+  }), /*#__PURE__*/_react.default.createElement(NetworkAdapter, {
+    className: "networkAdapter"
+  }), /*#__PURE__*/_react.default.createElement(NetworkAdapter, {
+    className: "networkAdapter"
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    id: "playerContainer"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "player"
+  })));
+};
+
+exports.PreviewCamera = PreviewCamera;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n"])));
+
+var OptionContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  width: 50%;\n  justify-content: space-between;\n  border-bottom: 1px solid grey;\n"])));
+
+var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  /* margin-right: 20px; */\n"])));
+
+var DropDownContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: 20px;\n  width: 40%;\n  margin-bottom: 5px;\n"])));
+
+var NetworkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
+
+var NetworkAdapterContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid black;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 57px;\n"])));
+
+var NetworkAdapter = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 10px;\n  height: 10px;\n"])));

package/dist/stories/Agora/Preview/ShareScreen.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _agoraRtcReact = require("agora-rtc-react");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var rtc = {
+  localVideoTrack: null
+};
+var config = {
+  mode: 'rtc',
+  codec: 'vp8'
+};
+
+var createScreenTrack = function createScreenTrack() {
+  return (0, _agoraRtcReact.createScreenVideoTrack)({
+    encoderConfig: '480p_1',
+    optimizationMode: 'detail'
+  });
+};
+
+var options = {
+  appid: '3f54ddbde65d4f0ab9a9f5a46baa4310',
+  channel: 'bcd',
+  uid: '123',
+  token: '0063f54ddbde65d4f0ab9a9f5a46baa4310IABfwrauypm943Sff/0EgA8ZZgYszFEd918opDbcDyTQMnlbHbAAAAAAEAApikciJ9RVYQEAAQAn1FVh',
+  audienceLatency: 2
+};
+var useClient = (0, _agoraRtcReact.createClient)(config);
+
+var ShareScreen = function ShareScreen() {
+  var client = useClient();
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      uid = _useState2[0],
+      setUid = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      token = _useState4[0],
+      setToken = _useState4[1];
+
+  var useLocalScreenTrack = createScreenTrack();
+  rtc.localVideoTrack = useLocalScreenTrack().tracks;
+  (0, _react.useEffect)(function () {
+    var _uid = Math.floor(Math.random() * 1000);
+
+    setUid(_uid);
+
+    _axios.default.get("/getToken/".concat(_uid)).then(function (res) {
+      return setToken(res.data.token);
+    });
+  }, []);
+  (0, _react.useEffect)(function () {
+    var init = /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return client.join(options.appid, options.channel, token, uid);
+
+              case 2:
+                _context.next = 4;
+                return client.publish(rtc.localVideoTrack);
+
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function init() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    if (rtc.localVideoTrack && uid && token) {
+      init();
+    }
+  }, [client, rtc.localVideoTrack, uid, token]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      rtc.localVideoTrack.stop();
+      rtc.localVideoTrack.close();
+      client.leave();
+      client.removeAllListeners();
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", null);
+};
+
+var _default = ShareScreen;
+exports.default = _default;

package/dist/stories/Agora/Room/Room.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _PreviewCamera = require("../Preview/PreviewCamera");
+
+var _Call = _interopRequireDefault(require("../Call/Call"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// import VideoCall from '../VideoCall/VideoCall';
+var Room = function Room() {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      source = _useState2[0],
+      setSource = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      join = _useState4[0],
+      setJoin = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      token = _useState6[0],
+      setToken = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      token2 = _useState8[0],
+      setToken2 = _useState8[1];
+
+  var videoDeviceId = (0, _react.useRef)();
+  var audioDeviceId = (0, _react.useRef)();
+
+  var _useState9 = (0, _react.useState)(),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      uid = _useState10[0],
+      setUid = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      uid2 = _useState12[0],
+      setUid2 = _useState12[1];
+
+  (0, _react.useEffect)(function () {
+    var _uid = Math.floor(Math.random() * 1000);
+
+    setUid(_uid);
+
+    var _uid2 = Math.floor(Math.random() * 1000);
+
+    setUid2(_uid2);
+
+    _axios.default.get("/getToken/".concat(_uid)).then(function (response) {
+      return setToken(response.data.token);
+    });
+
+    _axios.default.get("/getToken/".concat(_uid2)).then(function (response) {
+      return setToken2(response.data.token);
+    });
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Room"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      return setSource(0);
+    }
+  }, "Preview"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      setJoin(true);
+    }
+  }, "Join Video Call"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: function onClick() {
+      setJoin(false);
+    }
+  }, "Leave video call"), !join && source === 0 && token.length > 0 && uid && /*#__PURE__*/_react.default.createElement(_PreviewCamera.PreviewCamera, {
+    token: token,
+    token2: token2,
+    uid: uid,
+    uid2: uid2,
+    getDeviceIds: function getDeviceIds(_ref) {
+      var selectedAudioDevice = _ref.selectedAudioDevice,
+          selectedVideoDevice = _ref.selectedVideoDevice;
+
+      if (selectedAudioDevice) {
+        audioDeviceId.current = selectedAudioDevice;
+      }
+
+      if (selectedVideoDevice) {
+        videoDeviceId.current = selectedVideoDevice;
+      }
+    }
+  }), join && token.length > 0 && uid && /*#__PURE__*/_react.default.createElement(_Call.default, {
+    videoDeviceId: videoDeviceId.current,
+    audioDeviceId: audioDeviceId.current,
+    token: token,
+    uid: uid
+  }));
+};
+
+var _default = Room;
+exports.default = _default;

package/dist/stories/Agora/Room/Room.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Room = _interopRequireDefault(require("./Room"));
+
+var _default = {
+  title: 'Agora/Room/Item',
+  component: _Room.default
+};
+exports.default = _default;
+
+var Default = function Default(args) {
+  return /*#__PURE__*/_react.default.createElement(_Room.default, args);
+};
+
+exports.Default = Default;

package/dist/stories/Buttons/Buttons/Buttons.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var _excluded = ["variant", "size", "label", "type"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Buttons = function Buttons(_ref) {
+  var variant = _ref.variant,
+      size = _ref.size,
+      label = _ref.label,
+      type = _ref.type,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(StyledButton, {
+    onClick: function onClick() {
+      return props.buttonClicked();
+    },
+    variant: variant,
+    size: size,
+    type: type
+  }, label);
+};
+
+var StyledButton = _styledComponents.default.button.attrs(function (props) {
+  return {
+    type: props.type
+  };
+})(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-family: Helvetica, Arial, sans-serif;\n    font-weight: 400;\n    letter-spacing: .1cm;\n    border: 0;\n    cursor: pointer;\n    display: inline-block;\n    line-height: 1;\n    color: #fff;\n    ", "\n    ", "\n    ", "\n    ", "\n    \n    ", "\n"])), function (props) {
+  return props.variant === 'primary' && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        background-color: #2e2e2e;\n        &:hover{\n            background-color: #5e5e5e;\n        }\n    "])));
+}, function (props) {
+  return props.variant === 'secondary' && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        background-color: #888;\n        &:hover{\n            background-color: #555;\n        }\n    "])));
+}, function (props) {
+  return props.size === 'sm' && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n        padding: 10px 16px;\n        font-size: 12px;\n    "])));
+}, function (props) {
+  return props.size === 'md' && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n        padding: 11px 20px; \n        font-size: 14px;\n    "])));
+}, function (props) {
+  return props.size === 'lg' && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n        padding: 12px 3rem; \n        font-size: 16px;\n    "])));
+});
+
+var _default = Buttons;
+exports.default = _default;

package/dist/stories/Buttons/Buttons/Buttons.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Secondary = exports.Primary = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Buttons = _interopRequireDefault(require("./Buttons"));
+
+var _default = {
+  title: 'Buttons/Primary',
+  component: _Buttons.default
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_Buttons.default, args);
+};
+
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = {
+  variant: 'primary',
+  label: 'Submit',
+  size: 'md',
+  type: 'submit'
+};
+var Secondary = Template.bind({});
+exports.Secondary = Secondary;
+Secondary.args = {
+  variant: 'secondary',
+  label: 'Submit',
+  size: 'md',
+  type: 'submit'
+};