first release

wintercounter · Aug 19, 2019 · 186f730 · 186f730
1 parent 009105c
commit 186f730
Show file tree

Hide file tree

Showing 28 changed files with 109,869 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,38 @@
+/dist
+/build
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pids
+*.pid
+*.seed
+*.pid.lock
+lib-cov
+coverage
+.nyc_output
+.grunt
+bower_components
+.lock-wscript
+build/Release
+jspm_packages
+typings
+.npm
+.eslintcache
+.node_repl_history
+*.tgz
+.yarn-integrity
+.env
+.next
+.idea
+.vscode
+node_modules
+.babelrc
+prettier.json
+.prettierrc
+jest.config.js
+.eslintrc
+tsconfig.json
+webpack.config.js
+*.tsbuildinfo
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,42 @@
+.circleci
+/docker
+/src
+/build
+/docs
+book.json
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pids
+*.pid
+*.seed
+*.pid.lock
+lib-cov
+coverage
+.nyc_output
+.grunt
+bower_components
+.lock-wscript
+build/Release
+jspm_packages
+typings
+.npm
+.eslintcache
+.node_repl_history
+*.tgz
+.yarn-integrity
+.env
+.next
+.idea
+.vscode
+node_modules
+.babelrc
+prettier.json
+.prettierrc
+jest.config.js
+.eslintrc
+tsconfig.json
+webpack.config.js
+.tsbuildinfo
diff --git a/README.md b/README.md
@@ -1,2 +1,103 @@
-# use-breakpoint
-React useBreakpoint hook to have different values for a variable based on a breakpoints.
+# Intro
+
+React `useBreakpoint` hook to have different values for a variable
+based on a breakpoints.
+
+# Setup
+
+By default you don't need to do anything. The following default values
+are being used.
+
+```js
+const breakpoints = {
+    micro: [0, 375],
+    mobile: [376, 639],
+    tablet: [640, 1023],
+    small: [1024, 1439],
+    medium: [1440, 1919],
+    large: [1920, 10000]
+}
+```
+
+## Override default settings
+
+```js
+import { setup, breakpoints } from '@w11r/use-breakpoint'
+
+setup({
+    breakpoints: {
+        // Extend default values
+        ...breakpoints,
+        alienDevice: [342, 43534] // from, to
+    }
+})
+```
+
+# Usage
+
+```js
+useBreakpoint(defaultValue, breakpointValues)
+
+// breakpointValues: array of breakpoint based values
+[
+  ['mobile', 300],
+  ['tablet', 400]
+]
+
+// In case you have a single breakpoint value, `['mobile', 300]`
+is enough instead of `[['mobile', 300]]`
+```
+
+Component example
+
+```jsx
+import useBreakpoint from '@w11r/use-breakpoint'
+
+const MyCmp = () => {
+    const columns = useBreakpoint([1,2], ['mobile', [2,1]])
+
+    return <Grid cols={columns} />
+}
+
+// Or using inline
+const MyCmp = () => {
+    return <Grid cols={useBreakpoint([1,2], ['mobile', [2,1]])} />
+}
+```
+
+> _Rules-of-Hooks_ are still true in this case as well. Make sure
+> your component will __ALWAYS__ run it without any condition!
+
+## Modifiers
+
+All breakpoint names coming with modifiers included.
+
+### Orientation prefix
+
+- `` (none): all
+- `-`: Landscape
+- `|`: Portrait
+
+### Range suffix
+
+You can also control your value to behave as `and up` and `and down`.
+
+- `` (none): all
+- `+`: `and up`
+- `-`: `and down`
+
+### Examples
+
+- `['|mobile', 300]`: on mobile, on portrait
+- `['|mobile+', 300]`: on mobile and up, on portrait
+- `['mobile+', 300]`: on mobile and up, both portrait and landscape
+- `['mobile', 300]`: on mobile, both portrait and landscape
+- `['tablet-', 300]`: on tablet and below, both portrait and landscape
+- `['mobile-', 300]`: on mobile and down, both portrait and landscape
+
+# FAQ
+
+## Which rule is being prioritized
+
+The hook uses _eager_ evaluation, so the first truthy breakpoint value
+gets returned.
diff --git a/docs/favicon.ico b/docs/favicon.ico
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Storybook</title>
+
+
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+
+    <base target="_parent">
+
+<style>
+  html, body{
+    width: 100%;
+    height: 100%;
+  }
+
+  :not(.sb-show-main) > .sb-main,
+  :not(.sb-show-nopreview) > .sb-nopreview,
+  :not(.sb-show-errordisplay) > .sb-errordisplay {
+    display: none;
+  }
+
+  .sb-wrapper {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20px;
+    font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .sb-heading {
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    margin: 10px 0;
+  }
+
+  .sb-nopreview {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+  }
+
+  .sb-nopreview_main {
+    margin: auto;
+    padding: 30px;
+    border-radius: 10px;
+    background: rgba(0,0,0,0.03);
+  }
+
+  .sb-nopreview_heading {
+    text-align: center;
+  }
+
+  .sb-errordisplay {
+    background-color: rgb(187, 49, 49);
+    color: #FFF;
+  }
+
+  .sb-errordisplay_code {
+    font-size: 14px;
+    width: 100vw;
+    overflow: auto;
+  }
+</style>
+
+<script>
+  /* globals window */
+  /* eslint-disable no-underscore-dangle */
+  try {
+    if (window.parent !== window) {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('unable to connect to parent frame for connecting dev tools');
+  }
+</script>
+
+
+
+
+
+</head>
+<body>
+
+
+  <div class="sb-nopreview sb-wrapper">
+  <div class="sb-nopreview_main">
+    <h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
+    <p>Sorry, but you either have no stories or none are selected somehow.</p>
+    <ul>
+      <li>Please check the Storybook config.</li>
+      <li>Try reloading the page.</li>
+    </ul>
+    <p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p>
+  </div>
+</div>
+
+<div class="sb-errordisplay sb-wrapper">
+  <div id="error-message" class="sb-heading"></div>
+  <pre class="sb-errordisplay_code"><code id="error-stack"></code></pre>
+</div>
+
+
+
+<div id="root"></div>
+
+
+
+
+
+
+  <script src="runtime~main.0950b1a3b0015a981362.bundle.js"></script>
+
+  <script src="vendors~main.0950b1a3b0015a981362.bundle.js"></script>
+
+  <script src="main.0950b1a3b0015a981362.bundle.js"></script>
+
+
+</body>
+</html>
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,19 @@
+<!doctype html><html><head><meta charset="utf-8"><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"><style>html, body {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }</style><script>/* globals window */
+  /* eslint-disable no-underscore-dangle */
+  try {
+    if (window.parent !== window) {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('unable to connect to parent frame for connecting dev tools');
+  }</script><style>.addon-notes-container {
+		margin: 0 !important;
+	}</style></head><body><div id="root"></div><script src="runtime~main.d6878bfc6f9b1805e480.bundle.js"></script><script src="vendors~main.554106d122f416d5d8c9.bundle.js"></script><script src="main.8041cb0ece104c7bd070.bundle.js"></script></body></html>