Simpler slider component

.eslintignore

@@ -0,0 +1,4 @@
+node_modules/
+
+/packages/*/index.js
+/packages/*/es/

.eslintrc

@@ -2,5 +2,16 @@
   "extends": "react-app",
   "globals": {
     "__DEV__": "readonly"
+  },
+  "rules": {
+    "no-unused-vars": [
+      1,
+      {
+        "args": "after-used",
+        "ignoreRestSiblings": true,
+        "argsIgnorePattern": "^(event|_)$"
+      }
+    ],
+    "import/first": 0
   }
 }

.github/FUNDING 2.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: reach-ui
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: reach-ui
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.gitignore

@@ -2,8 +2,15 @@ node_modules/
 npm-debug.log*
 yarn-error.log*
 lerna-debug.log*
+.cache
+
 /packages/*/es/
 /packages/*/umd/
 /packages/*/index.js
 /doc.json
+
 .vscode
+
+/website-deploy-key
+/website-deploy-key.pub
+/website/public/

.storybook/webpack.config.js

@@ -1,34 +1,18 @@
+const fs = require("fs");
 const path = require("path");
 
+const packagesDir = path.resolve(__dirname, "../packages");
+const packages = fs.readdirSync(packagesDir);
+
+const alias = packages.reduce((memo, pkg) => {
+  memo[`@reach/${pkg}`] = path.join(packagesDir, pkg);
+  return memo;
+}, {});
+
 module.exports = ({ config }) => {
-  const packagesPath = path.resolve(__dirname, "../packages");
   config.resolve = {
     ...config.resolve,
-    alias: {
-      "@reach/alert": path.join(packagesPath, "/alert/src/"),
-      "@reach/alert-dailog": path.join(packagesPath, "/alert-dailog/src/"),
-      "@reach/auto-id": path.join(packagesPath, "/auto-id/src/"),
-      "@reach/combobox": path.join(packagesPath, "/combobox/src/"),
-      "@reach/component-component": path.join(
-        packagesPath,
-        "/component-component/src/"
-      ),
-      "@reach/dailog": path.join(packagesPath, "/dailog/src/"),
-      "@reach/menu-button": path.join(packagesPath, "/menu-button/src/"),
-      "@reach/popover": path.join(packagesPath, "/popover/src/"),
-      "@reach/portal": path.join(packagesPath, "/portal/src/"),
-      "@reach/rect": path.join(packagesPath, "/rect/src/"),
-      "@reach/skip-nav": path.join(packagesPath, "/skip-nav/src/"),
-      "@reach/slider": path.join(packagesPath, "/slider/src/"),
-      "@reach/tabs": path.join(packagesPath, "/tabs/src/"),
-      "@reach/tooltip": path.join(packagesPath, "/tooltip/src/"),
-      "@reach/utils": path.join(packagesPath, "/utils/src/"),
-      "@reach/visually-hidden": path.join(
-        packagesPath,
-        "/visually-hidden/src/"
-      ),
-      "@reach/window-size": path.join(packagesPath, "/window-size/src/")
-    },
+    alias: alias,
     extensions: [".js"]
   };
   return config;

.travis.yml

@@ -17,3 +17,19 @@ jobs:
       script: lerna publish from-git --yes --pre-dist-tag next
       on:
         tags: true
+  - stage: Deploy Website
+    if: branch = website
+    before_script: yarn build
+    script: echo "Deploying website to https://reacttraining.com/reach-ui/"
+    before_deploy:
+    - openssl aes-256-cbc -K $encrypted_e12d3fc86b46_key -iv $encrypted_e12d3fc86b46_iv
+      -in website-deploy-key.enc -out website-deploy-key -d
+    - chmod 600 website-deploy-key
+    - eval $(ssh-agent -s)
+    - ssh-add website-deploy-key
+    deploy:
+      provider: script
+      script: bash scripts/deploy-website.sh
+      skip_cleanup: true
+      on:
+        branch: website

README.md

@@ -4,7 +4,7 @@ Thanks for getting involved with Reach UI development!
 
 ## Looking for the documentation?
 
-https://ui.reach.tech
+https://reacttraining.com/reach-ui/
 
 ## Getting Started
 
@@ -23,26 +23,8 @@ yarn build
 
 ```sh
 yarn build        # builds all packages
-
 yarn start        # starts storybook server
-
 yarn test         # runs tests in all packages
-
-yarn release      # publishes changed packages
-```
-
-## `www` directory scripts
-
-The website uses [Gatsby](https://gatsbyjs.org) v2 with [Gatsby MDX](https://github.com/ChristopherBiscardi/gatsby-mdx) powering most of the pages. It is deployed with [now](https://now.sh)
-
-```
-yarn build        # builds the production site to "public/"
-
-yarn start        # starts the website
-
-yarn stage        # deploys the site with now.sh
-
-yarn deploy       # alias the latest deploy to production
 ```
 
 ## Running / Writing Examples
@@ -128,3 +110,56 @@ The components to be built come from the the [Aria Practices Design Patterns and
 | 🛠      | Tree View            |
 | ❓     | Treegrid             |
 | ❓     | Window Splitter      |
+
+## Releases
+
+This is our current release process. It's not perfect, but it has almost the right balance of manual + automation for me. We might be able to put some of this in a script...
+
+```sh
+# First, run the build locally and make sure there are no problems
+# and that all the tests pass:
+$ yarn build
+$ yarn test
+
+# Then create a new version and git tag locally. Don't push yet!
+$ lerna version [version] --no-push
+
+# Take a look around and make sure everything is as you'd expect.
+# You can inspect everything from the commit that lerna made with:
+$ git log -p
+
+# If something needs to be changed, you can undo the commit and
+# delete the tag that lerna created and try again.
+
+# If everything looks good, push to GitHub along with the new tag:
+$ git push origin master --follow-tags
+
+# Open up travis-ci.com/reach/reach-ui and watch the build. There will
+# be 2 builds, one for the push to the master branch and one for the
+# new tag. The tag build will run the build and all the tests and then
+# automatically publish to npm if everything passes. If there's a
+# problem, we have to figure out how to fix manually.
+
+# Now generate the changelog and edit the release on GitHub for the tag.
+# You can get the changelog with:
+$ lerna-changelog
+
+# Then copy the output and paste it into the release on GitHub.
+```
+
+You need to be careful when publishing a new package because the `lerna publish` on Travis CI will fail for new packages. To get around this, you should publish a `0.0.0` version of the package manually ahead of time. Then the release from CI will be ok. This is really janky but AFAICT the only workaround.
+
+Stuff I'd like to improve:
+
+- Automate changelog generation and GitHub release from CI
+- Document how we're using GitHub PRs to generate the changelog somewhere
+
+## Website
+
+The website is a Gatsby app in the `website` directory. It automatically deploys to https://reacttraining.com/reach-ui/ when the `website` branch is updated.
+
+## Contributors
+
+This project exists thanks to our contributors and financial backers.
+
+<a href="https://github.com/reach/reach-ui/graphs/contributors"><img alt="graph of Reach UI GitHub contributors" src="https://opencollective.com/reach-ui/contributors.svg?width=1260&button=false%22" /></a>

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   transform: {
-    "^.+\\.jsx?$": "./jestTransformer.js"
+    "^.+\\.jsx?$": "./jest-transformer.js"
   },
   globals: {
     __DEV__: true

package.json

@@ -10,8 +10,8 @@
     "build:changed": "lerna run build --parallel --since origin/master",
     "build": "lerna run build --parallel",
     "changes": "lerna-changelog",
-    "clean": "git clean -fdX .",
-    "lint": "lerna run lint",
+    "clean": "git clean -e '!/.env' -e '!/website-deploy-key' -e '!/website-deploy-key.pub' -fdX .",
+    "lint": "eslint .",
     "doc": "react-docgen packages/*/src/* --out www/docs/source.json --resolver findAllComponentDefinitions --pretty"
   },
   "dependencies": {

packages/alert-dialog/examples/basic.example.js

@@ -1,16 +1,15 @@
-import React from "react";
-import "@reach/dialog/styles.css";
+import React, { useRef, useState } from "react";
 import {
   AlertDialog,
   AlertDialogLabel,
   AlertDialogDescription
-} from "../src/index";
+} from "@reach/alert-dialog";
 
 export let name = "Basic";
 
 export let Example = () => {
-  const close = React.useRef(null);
-  const [showDialog, setShowDialog] = React.useState(false);
+  const close = useRef(null);
+  const [showDialog, setShowDialog] = useState(false);
   return (
     <div>
       <button onClick={() => setShowDialog(true)}>Show Dialog</button>

packages/alert-dialog/package.json

@@ -7,8 +7,7 @@
   "main": "index.js",
   "module": "es/index.js",
   "scripts": {
-    "build": "node ../../shared/build-package",
-    "lint": "eslint . --max-warnings=0"
+    "build": "node ../../shared/build-package"
   },
   "dependencies": {
     "@reach/auto-id": "^0.4.0-beta.0",

packages/alert-dialog/src/index.js

@@ -112,5 +112,5 @@ if (__DEV__) {
 
 // TODO: Move to @reach/utils
 function makeId(id, index) {
-  return `${id}:${index}`;
+  return `${id}--${index}`;
 }

packages/alert/examples/basic.example.js

@@ -1,7 +1,8 @@
 import React from "react";
 import Alert from "@reach/alert";
 import VisuallyHidden from "@reach/visually-hidden";
-import LoremIpsum from "./LoremIpsum";
+
+import LoremIpsum from "./LoremIpsum.js";
 
 export let name = "Basic";
 

packages/alert/package.json

@@ -5,8 +5,7 @@
   "main": "index.js",
   "module": "es/index.js",
   "scripts": {
-    "build": "node ../../shared/build-package",
-    "lint": "eslint . --max-warnings=0"
+    "build": "node ../../shared/build-package"
   },
   "dependencies": {
     "@reach/visually-hidden": "^0.4.0-beta.0",

packages/auto-id/package.json

@@ -5,8 +5,7 @@
   "main": "index.js",
   "module": "es/index.js",
   "scripts": {
-    "build": "node ../../shared/build-package",
-    "lint": "eslint . --max-warnings=0"
+    "build": "node ../../shared/build-package"
   },
   "peerDependencies": {
     "react": "^16.8.0",

packages/combobox/examples/basic.example.js

@@ -1,4 +1,5 @@
-import "../styles.css";
+import "@reach/combobox/styles.css";
+
 import React, { useState, useMemo } from "react";
 import {
   Combobox,
@@ -9,7 +10,8 @@ import {
 } from "@reach/combobox";
 import matchSorter from "match-sorter";
 import { useThrottle } from "use-throttle";
-import cities from "./cities";
+
+import cities from "./cities.js";
 
 export let name = "Basic";
 

packages/combobox/examples/controlled.example.js

@@ -1,4 +1,5 @@
-import "../styles.css";
+import "@reach/combobox/styles.css";
+
 import React, { useState, useMemo, useRef } from "react";
 import {
   Combobox,
@@ -9,7 +10,8 @@ import {
 } from "@reach/combobox";
 import matchSorter from "match-sorter";
 import { useThrottle } from "use-throttle";
-import cities from "./cities";
+
+import cities from "./cities.js";
 
 export let name = "Controlled";
 

packages/combobox/examples/lots-of-elements.example.js

@@ -1,4 +1,5 @@
-import "../styles.css";
+import "@reach/combobox/styles.css";
+
 import React, { useState, useMemo } from "react";
 import {
   Combobox,
@@ -9,7 +10,8 @@ import {
 } from "@reach/combobox";
 import matchSorter from "match-sorter";
 import { useThrottle } from "use-throttle";
-import cities from "./cities";
+
+import cities from "./cities.js";
 
 export let name = "Lots of Elements";
 

packages/combobox/examples/no-popover.example.js

@@ -1,4 +1,5 @@
-import "../styles.css";
+import "@reach/combobox/styles.css";
+
 import React, { useState, useMemo } from "react";
 import {
   Combobox,
@@ -9,7 +10,8 @@ import {
 } from "@reach/combobox";
 import matchSorter from "match-sorter";
 import { useThrottle } from "use-throttle";
-import cities from "./cities";
+
+import cities from "./cities.js";
 
 export let name = "No Popover";