Merge branch 'main' into video-controls

* main:
  Add the catalog site  (#137)
  Delete dependabot.yml
  Only direct dependencies
  Create dependabot.yml (#296)
  Update Travis bad
  Update devDependencies (#294)

.eslintignore

@@ -1,11 +1,9 @@
-node_modules
 *.log
-dist
 coverage
 .DS_Store
-**/_batfish*
-src/docs/data
-src/components/*/index.js
-packages/**/package-lock.json
+_batfish*
 pkg
 src/test-cases-app/component-index.js
+dist
+docs/src/data/components.js
+_site*

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,14 +4,14 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,3 @@
-
 <!-- list what changes this PR introduces -->
 
 ## How to test

.gitignore

@@ -4,4 +4,7 @@ node_modules
 dist
 pkg
 src/test-cases-app/component-index.js
-src/components/syntax-highlighting/index.js
+docs/src/pages/files/
+docs/src/data/components.js
+docs/src/prism.css
+_site*

.lintstagedrc.json

@@ -1,4 +1,7 @@
 {
-  "*.js": ["eslint", "prettier --write", "git add"],
-  "*.css": ["prettier --write", "git add"]
+  "*.js": ["eslint", "prettier --write"],
+  "*.css": ["prettier --write"],
+  "*.md": ["prettier --write"],
+  "*.json": ["prettier --write"],
+  "*.yml": ["prettier --write"]
 }

.travis.yml

@@ -4,8 +4,7 @@ node_js:
 sudo: false
 notifications:
   email: false
-cache:
-  directories:
-    - node_modules
-git:
-  depth: 3
+
+scripts:
+  - npm run build-docs
+  - npm test

CONTRIBUTING.md

@@ -0,0 +1,73 @@
+# Contributing
+
+This repo has two sites:
+
+- **The [catalog site](https://mapbox.github.io/dr-ui/) built with Batfish.**
+  - The catalog contains examples of most common uses for each component and lists all available properties.
+  - To make sure all our components are production ready with Batfish, CI runs the `npm run build-docs`.
+  - Every catalog example must have a test case.
+- **The test cases app available locally.**
+  - The test cases app builds a local development site and snapshot tests for each component. The test cases app also includes less common use cases.
+
+## Commands
+
+To run the catalog site at https://mapbox.github.io/dr-ui/:
+
+```
+npm run start-docs
+```
+
+To build the test cases app:
+
+```bash
+npm start
+```
+
+To run the tests:
+
+```
+npm test
+```
+
+## Tests
+
+Every component should have a `__tests__` directory with the following files:
+
+- `/[component-name]-test-cases.js`. The `*test-cases.js` file includes variations of the component to demonstrate different capabilities and properties for the component. Every catalog example must have a test case.
+- `/[component-name].test.js`. The `*.test.js` file should create a unit test for each test case found in `*test-cases.js`.
+
+## Add a new component
+
+Run the `new` command to generate all the files and starter code to create a new component. The command accepts an argument with the name of the component:
+
+```
+node scripts/new.js Button
+node scripts/new.js responsive button
+```
+
+The command will create the following folder structure:
+
+```
+src/components/[component-name]/
+  index.js
+  [component-name].js
+  examples/
+    basic.js
+  __tests__/
+    [component-name]-test-cases.js
+    [component-name].test.js
+```
+
+## Publish a new dr-ui version
+
+The `build` command creates a `pkg/` directory that contains the code we want to publish, organized the way we want it. So `pkg/` is the directory that we publish. `pkg/package.json` is a clone of `package.json` but with `private: true` removed.
+
+1. Document changes in the CHANGELOG.
+1. Increment the version key in package.json and package-lock.json.
+1. Make sure all this is committed, typically with a commit message like `Prepare 0.0.11`.
+1. Create a tag. No message is necessary, since the changelog includes explanations of changes. For example: `git tag -a 0.0.11 -m ""`.
+1. Push the tag: `git push --tags`.
+1. Push your commit.
+1. Build the `pkg/` directory: `npm run build`.
+1. `cd` into the `pkg/` directory and publish the new version on npm.
+1. `cd` back to the root directory and run `npm run deploy-docs` to deploy the catalog site.

README.md

@@ -1,6 +1,6 @@
 # @mapbox/dr-ui
 
-[![Build Status](https://travis-ci.com/mapbox/dr-ui.svg?branch=master)](https://travis-ci.com/mapbox/dr-ui)
+[![Build Status](https://travis-ci.com/mapbox/dr-ui.svg?branch=main)](https://travis-ci.com/mapbox/dr-ui)
 
 Pronounced "Doctor UI". **D**ocumentation **R**eact **UI** components. See [@mapbox/mr-ui](https://github.com/mapbox/mr-ui).
 
@@ -27,46 +27,8 @@ import Card from '@mapbox/dr-ui/card';
 import BackToTopButton from '@mapbox/dr-ui/back-to-top-button';
 ```
 
-Only the component itself and whatever *it* depends on will be drawn into your bundle.
+Only the component itself and whatever _it_ depends on will be drawn into your bundle.
 
 ## Development
 
-Here are some commands you'll probably want to use:
-
-```bash
-# Start the test-cases app.
-npm start
-```
-
-Docs build process and automated testing coming soon.
-
-When making changes to the build script, test that the module builds correctly by running `npm run build` and then linking the local package with another local repo. Make sure you are able to run the local repo without errors from dr-ui.
-
-## Tests
-
-Each component should have a `__tests__` folder with a `component-name-test-cases.js` and `component-name.test.js`. The `*test-cases.js` file should include variations of the component in use to demonstrate the different capabilities and properites for the component. The `*.test.js` file should create a unit test for each test case found in `*test-cases.js`.
-
-Run the tests:
-
-```
-npm test
-```
-
-Update snapshots (run when making changes to `*.test.js`):
-
-```
-npm test -- -u
-```
-
-### Publishing
-
-The `build` command creates a `pkg/` directory that contains the code we want to publish, organized the way we want it. So `pkg/` is the directory that we publish. `pkg/package.json` is a clone of `package.json` but with `private: true` removed.
-
-1. Document changes in the CHANGELOG.
-1. Increment the version key in package.json and package-lock.json.
-1. Make sure all this is committed, typically with a commit message like `Prepare 0.0.11`.
-1. Create a tag. No message is necessary, since the changelog includes explanations of changes. For example: `git tag -a 0.0.11 -m ""`.
-1. Push the tag: `git push --tags`.
-1. Push your commit.
-1. Build the `pkg/` directory: `npm run build`.
-1. `cd` into the `pkg/` directory and publish the new version on npm.
+See [CONTRIBUTING.md](CONTRIBUTING.md).

docs/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["../conf/eslint-config-base.json", "@mapbox/eslint-config-docs"],
+  "rules": {
+    "es/no-object-assign": "off",
+    "react/prop-types": "off"
+  }
+}

docs/batfish.config.js

@@ -0,0 +1,15 @@
+const path = require('path');
+
+module.exports = () => {
+  return {
+    siteBasePath: '/dr-ui',
+    outputDirectory: path.join(__dirname, '_site/'),
+    temporaryDirectory: path.join(__dirname, '_site_tmp/'),
+    stylesheets: [
+      require.resolve('@mapbox/mbx-assembly/dist/assembly.css'),
+      require.resolve('../src/css/docs-prose.css'),
+      require.resolve('../src/css/prism.css'),
+      require.resolve('./src/css/site.css')
+    ]
+  };
+};

docs/src/app.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import components from './data/components'; // eslint-disable-line
+import ComponentSection from './components/component-section';
+import Sidebar from './components/sidebar';
+import Topbar from '../../src/components/topbar';
+import ProductMenu from '../../src/components/product-menu';
+import OverviewHeader from '../../src/components/overview-header';
+import Note from '../../src/components/note';
+import PageLayout from '../../src/components/page-layout';
+import categories from './categories.json';
+
+const version = require('../../package.json').version;
+
+export default class App extends React.Component {
+  componentDidMount() {
+    // override SectionedNavigation scroll
+    const sideBar = document.getElementById('dr-ui--page-layout-sidebar');
+    if (!sideBar) return;
+    sideBar.scrollTop = 0;
+  }
+  render() {
+    const componentEls = Object.keys(categories).map((category) => {
+      return (
+        <div key={category}>
+          <h2 className="txt-fancy txt-h3" id={category.toLowerCase()}>
+            {category}
+          </h2>
+          {categories[category].sort().map((comp) => {
+            const component = components.filter((f) => f.name === comp)[0];
+            return (
+              <div
+                key={component.name}
+                className="pt30 mb30 border-t border--darken10"
+              >
+                <ComponentSection data={component} />
+              </div>
+            );
+          })}
+        </div>
+      );
+    });
+    return (
+      <div>
+        <Topbar>
+          <div className="limiter">
+            <div className="grid">
+              <div className="col col--4-mm col--12">
+                <div className="ml18-mm pt12" style={{ height: 52 }}>
+                  <ProductMenu productName="Dr. UI" homePage="/dr-ui/" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </Topbar>
+        <div className="limiter">
+          <PageLayout
+            sideBarColSize={3}
+            sidebarContentStickyTop={0}
+            sidebarContentStickyTopNarrow={0}
+            sidebarContent={<Sidebar />}
+          >
+            <div className="prose">
+              <OverviewHeader
+                features={[
+                  'React components',
+                  'Support for IE11 and all modern browsers'
+                ]}
+                image={<div />}
+                title="Dr. UI"
+                version={version}
+                changelogLink="https://github.com/mapbox/dr-ui/blob/master/CHANGELOG.md"
+                installLink="https://github.com/mapbox/dr-ui/blob/master/README.md"
+                ghLink="https://github.com/mapbox/dr-ui"
+              />
+
+              <p>
+                Pronounced "Doctor UI". <strong>D</strong>ocumentation{' '}
+                <strong>R</strong>eact <strong>UI</strong> components.{' '}
+                <a href="https://mapbox.github.io/mr-ui/">See @mapbox/mr-ui</a>.
+              </p>
+
+              <p>UI components for Mapbox documentation projects.</p>
+
+              <Note>
+                <p>
+                  This project is for internal Mapbox usage. The code is open
+                  source and we appreciate bug reports; but we will only
+                  consider feature requests and pull requests from Mapbox
+                  developers.
+                </p>
+              </Note>
+            </div>
+            {componentEls}
+          </PageLayout>
+        </div>
+      </div>
+    );
+  }
+}