initial commit

martynaskadisa · Jul 26, 2020 · c2bd4ed · c2bd4ed
1 parent f2c2887
commit c2bd4ed
Show file tree

Hide file tree

Showing 13 changed files with 544 additions and 60 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,26 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["react-hooks"],
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  },
+  "ignorePatterns": "dist/**/*"
+}
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,19 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.formatOnSave": false
+  },
+  "[javascriptreact]": {
+    "editor.formatOnSave": false
+  },
+  "[typescript]": {
+    "editor.formatOnSave": false
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": false
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}
diff --git a/example/.eslintrc b/example/.eslintrc
@@ -0,0 +1,20 @@
+{
+  "extends": ["plugin:react-hooks/recommended", "plugin:prettier/recommended"],
+  "plugins": ["react-hooks"],
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  }
+}
diff --git a/example/public/index.html b/example/public/index.html
@@ -1,11 +1,18 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#0c2427" />
 
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Recursive:[email protected]&display=swap"
+      rel="stylesheet"
+    />
 
     <title>use-media-session</title>
   </head>

diff --git a/example/src/App.js b/example/src/App.js
@@ -1,13 +1,37 @@
-import React from 'react'
-
-import { useMyHook } from 'use-media-session'
+import React from 'react';
+import { useMediaMeta } from 'use-media-session';
 
 const App = () => {
-  const example = useMyHook()
+  useMediaMeta({
+    title: 'React app',
+    album: 'React',
+    artist: 'React',
+  });
   return (
-    <div>
-      {example}
+    <div style={{ maxWidth: 800, margin: '2rem auto', padding: '1rem' }}>
+      <h1 style={{ textAlign: 'center' }}>use-media-session</h1>
+      <p style={{ textAlign: 'center', marginBottom: '5rem' }}>
+        Hooks for interacting with Media Session API
+      </p>
+      <div style={{ textAlign: 'center' }}>
+        <a
+          href="https://github.com/martynaskadisa/use-media-session"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="button"
+        >
+          Github
+        </a>
+      </div>
+      <h2 style={{ marginTop: '5rem' }}>Install</h2>
+      <pre>npm install use-media-session</pre>
+      <p>or</p>
+      <pre>yarn add use-media-session</pre>
+      <h2 style={{ marginTop: '5rem' }}>Examples</h2>
+      <p>// @TODO</p>
+      <h3>API reference</h3>
+      <p>// also @TODO</p>
     </div>
-  )
-}
-export default App
+  );
+};
+export default App;
diff --git a/example/src/index.css b/example/src/index.css
@@ -1,5 +1,63 @@
-/* body {
+:root {
+  --color-1: #ec93a2;
+  --color-2: #dbc1e1;
+  --color-3: #0c2427;
+  --color-4: #f8c296;
+
+  --text-color: var(--color-2);
+  --background: var(--color-3);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --text-color: var(--color-3);
+    --background: var(--color-4);
+  }
+}
+
+body {
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
-} */
+  background: var(--background);
+  color: var(--text-color);
+  font-size: 125%;
+  font-family: 'Recursive', monospace;
+}
+
+h1 {
+  font-size: 3rem;
+  font-variation-settings: 'wght' 800;
+}
+
+pre {
+  display: block;
+  padding: 1rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: currentcolor;
+  border-image: initial;
+  border-radius: 3px;
+}
+
+.button {
+  display: inline-block;
+  color: inherit;
+  text-decoration: none;
+  margin: 0;
+  padding: 1rem 1.2rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: currentcolor;
+  border-radius: 3px;
+}
+
+.button:hover {
+  background: var(--text-color);
+  color: var(--background)
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
diff --git a/example/src/index.js b/example/src/index.js
@@ -1,7 +1,7 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React from 'react';
+import ReactDOM from 'react-dom';
 
-import './index.css'
-import App from './App'
+import './index.css';
+import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "use-media-session",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "description": "React hooks for Media Session API",
   "author": "martynaskadisa",
   "license": "MIT",
@@ -15,6 +15,7 @@
   "scripts": {
     "test": "cross-env CI=1 react-scripts test --env=jsdom",
     "test:watch": "react-scripts test --env=jsdom",
+    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "build": "rollup -c",
     "start": "rollup -c -w",
     "prepare": "yarn run build",
@@ -31,8 +32,15 @@
     "@testing-library/react-hooks": "^3.2.1",
     "@types/jest": "^23.3.13",
     "@types/react": "^16.7.22",
+    "@typescript-eslint/eslint-plugin": "^3.7.0",
+    "@typescript-eslint/parser": "^3.7.0",
     "cross-env": "^5.2.0",
+    "eslint": "^7.5.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react-hooks": "^4.0.8",
     "gh-pages": "^2.0.1",
+    "prettier": "^2.0.5",
     "react": "^16.9.0",
     "react-scripts": "^3.4.0",
     "react-test-renderer": "^16.9.0",

diff --git a/src/index.test.ts b/src/index.test.ts
@@ -1,12 +1,16 @@
-import { useMyHook } from './'
-import { renderHook, act } from "@testing-library/react-hooks";
+import { useMediaMeta } from './';
+import { renderHook, act } from '@testing-library/react-hooks';
 
 // mock timer using jest
 jest.useFakeTimers();
 
 describe('useMyHook', () => {
   it('updates every second', () => {
-    const { result } = renderHook(() => useMyHook());
+    const { result } = renderHook(() =>
+      useMediaMeta({
+        title: 'Title',
+      })
+    );
 
     expect(result.current).toBe(0);
 
@@ -25,5 +29,5 @@ describe('useMyHook', () => {
 
     // Check after total 2 sec
     expect(result.current).toBe(2);
-  })
-})
+  });
+});