fix: next-support. Export CSS separately, update Readme, check for ex…

…istence of "window" in os()

README.md

@@ -1,12 +1,11 @@
 # commandbar-launcher
 
-
 [![npm version](https://badge.fury.io/js/commandbar-launcher.svg)](https://badge.fury.io/js/commandbar-launcher)
 ![package size](https://img.shields.io/bundlephobia/min/commandbar-launcher/1.1.2)
 ![downloads](https://img.shields.io/npm/dm/commandbar-launcher)
 ![dependencies](https://img.shields.io/badge/dependencies-react-blue)
 
-This component is a launcher to open Command Bar. It looks like a search bar and can be slotted into any react app. On click, it'll open the Command Bar. 
+This component is a launcher to open Command Bar. It looks like a search bar and can be slotted into any react app. On click, it'll open the Command Bar.
 
 <p align="center">
   <img align="center" src="https://user-images.githubusercontent.com/1981738/95909815-f774b680-0d53-11eb-95e7-95b5a9d576d3.png">
@@ -18,27 +17,32 @@ This component is a launcher to open Command Bar. It looks like a search bar and
 
 ## API
 
-| Name  | Type | Description | Default |
-| ------------- | ------------- | ------------- | ------------- |
-| text  | string or HTMLElement  | The element to render in the launcher  | Find anything [ctrl+k]  | 
-| style  | CSSProperties  | Style overrides for the launcher  | {}  | 
+| Name  | Type                  | Description                           | Default                |
+| ----- | --------------------- | ------------------------------------- | ---------------------- |
+| text  | string or HTMLElement | The element to render in the launcher | Find anything [ctrl+k] |
+| style | CSSProperties         | Style overrides for the launcher      | {}                     |
 
 ## Examples
+
 Default usage:
+
 ```
 import Launcher from 'commandbar-launcher';
+import "commandbar-launcher/assets/index.css";
 
 export const MyLauncher = () => {
   return <Launcher />;
 }
 ```
 
 Example with changed styles:
+
 ```
 <Launcher style={{ fontWeight: 700, textAlign: "center", background: "black", color: "white" }} />
 ```
 
 Example with changed text:
+
 ```
 <Launcher text={<div style={{color:'purple'}}>Click to search in this app</div>} />
 ```

demo/src/index.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { render } from "react-dom";
 
 import Launcher from "../../src";
+import "../../assets/index.css";
 
 export default class Demo extends Component {
   render() {

package.json

@@ -8,7 +8,8 @@
     "css",
     "es",
     "lib",
-    "umd"
+    "umd",
+    "assets/*"
   ],
   "scripts": {
     "build": "nwb build-react-component --copy-files",

src/components/Launcher.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 import { osControlKey } from "./os.js";
 import { AiOutlineSearch } from "react-icons/ai";
 

src/components/os.js

@@ -1,26 +1,29 @@
 const os = () => {
-  const userAgent = window.navigator.userAgent;
-  const platform = window.navigator.platform;
-  const macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"];
-  const windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"];
-  const iosPlatforms = ["iPhone", "iPad", "iPod"];
+  if (typeof window !== "undefined") {
+    // check window for SSR
+    const userAgent = window.navigator.userAgent;
+    const platform = window.navigator.platform;
+    const macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"];
+    const windowsPlatforms = ["Win32", "Win64", "Windows", "WinCE"];
+    const iosPlatforms = ["iPhone", "iPad", "iPod"];
 
-  // default to Mac
-  let os = "MAC";
+    // default to Mac
+    let os = "MAC";
 
-  if (macosPlatforms.indexOf(platform) !== -1) {
-    os = "MAC";
-  } else if (iosPlatforms.indexOf(platform) !== -1) {
-    os = "IOS";
-  } else if (windowsPlatforms.indexOf(platform) !== -1) {
-    os = "WINDOWS";
-  } else if (/Android/.test(userAgent)) {
-    os = "ANDROID";
-  } else if (/Linux/.test(platform)) {
-    os = "LINUX";
-  }
+    if (macosPlatforms.indexOf(platform) !== -1) {
+      os = "MAC";
+    } else if (iosPlatforms.indexOf(platform) !== -1) {
+      os = "IOS";
+    } else if (windowsPlatforms.indexOf(platform) !== -1) {
+      os = "WINDOWS";
+    } else if (/Android/.test(userAgent)) {
+      os = "ANDROID";
+    } else if (/Linux/.test(platform)) {
+      os = "LINUX";
+    }
 
-  return os;
+    return os;
+  }
 };
 
 export const osControlKey = () => {

src/index.js

@@ -6,7 +6,6 @@
 // npm run build -- --copy-files
 // npm publish
 
-import "./index.css";
 import Launcher from "./components/Launcher.js";
 import { osControlKey } from "./components/os.js";
 export const getControlKey = osControlKey;