Merge pull request #351 from dabapps/upgrade-everything

Upgrade everything

.eslintignore

@@ -0,0 +1,7 @@
+/node_modules/*
+/coverage/*
+/.nyc_output/*
+/dist/*
+/docs/build/*
+/styleguide/*
+.vscode/*

.eslintrc.json

@@ -1,6 +1,13 @@
 {
-  "extends": ["dabapps/base", "dabapps/commonjs"],
+  "extends": ["dabapps"],
   "rules": {
-    "prettier/prettier": 0
+    "dabapps/no-relative-parent-import": 0
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
   }
 }

.gitignore

@@ -8,3 +8,4 @@
 
 .DS_Store
 npm-debug.log*
+.vsls.json

.nvmrc

@@ -1 +1 @@
-10.5.0
+12.13.0

@types/hljs.d.ts

@@ -0,0 +1,7 @@
+interface HighlightJS {
+  highlightBlock: (element: HTMLElement) => void;
+}
+
+interface Window {
+  hljs?: HighlightJS;
+}

README.md

@@ -13,6 +13,50 @@ It is a collection of React components, styles, mixins, and atomic CSS classes t
 
 Full documentation, examples, and installation / contribution instructions can be found [here](http://dabapps.github.io/roe).
 
+## Contributing
+
+Make sure you are using the correct version of node (12) and npm (7):
+
+```
+nvm use
+npm i npm -g
+
+# To install a specific version of npm
+# npm i npm@7 -g
+```
+
+Install dependencies:
+
+```
+npm ci
+```
+
+Run the docs:
+
+```
+npm start
+```
+
+Run an examples page (for testing components):
+
+```
+npm run examples
+```
+
+Run all our tests, linting, etc:
+
+```
+npm test
+```
+
+Note: the above script will install several different versions of React types, so run `npm ci` once they're done to get back to the correct types.
+
+Format all relevant files using prettier:
+
+```
+npm run prettier
+```
+
 ## Code of conduct
 
 For guidelines regarding the code of conduct when contributing to this repository please review [https://www.dabapps.com/open-source/code-of-conduct/](https://www.dabapps.com/open-source/code-of-conduct/)

docs/components/logo.js

@@ -1,7 +1,8 @@
-'use strict';
+/* eslint-disable @typescript-eslint/no-var-requires */
 
-var React = require('react');
-var Styled = require('rsg-components/Styled').default;
+const React = require('react');
+const Styled = require('react-styleguidist/lib/client/rsg-components/Styled')
+  .default;
 
 function styles(settings) {
   return {

docs/introduction/getting-started.md

@@ -4,7 +4,7 @@
 
 Include Roe in your main `index.less` file. Do not use `./` or `../` in the path.
 
-```less
+```css
 @import 'node_modules/@dabapps/roe/src/less/index.less';
 ```
 

examples/app.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { PureComponent, ReactElement } from 'react';
+
 import {
   AppRoot,
   Button,
+  Collapse,
   Column,
   Container,
   ContentBox,
@@ -16,6 +17,7 @@ import {
   InputGroupAddon,
   ModalRenderer,
   NavBar,
+  Pagination,
   Row,
   Section,
   SideBar,
@@ -27,25 +29,35 @@ import NavItems from './nav-items';
 
 const X_CHAR = String.fromCharCode(215);
 const MENU_CHAR = String.fromCharCode(9776);
+const PAGINATION_PROPS = {
+  pageSize: 10,
+  itemCount: 123,
+};
+
+type UnknownProps = Record<string, unknown>;
 
 interface AppState {
   sidebarOpen: boolean;
   highlightActive: boolean;
-  modals: ReadonlyArray<ReactElement<{}>>;
+  modals: ReadonlyArray<React.ReactElement<UnknownProps>>;
+  collapseOpen: boolean;
+  currentPageNumber: number;
 }
 
-class App extends PureComponent<{}, AppState> {
-  public constructor(props: {}) {
+class App extends React.PureComponent<UnknownProps, AppState> {
+  public constructor(props: UnknownProps) {
     super(props);
 
     this.state = {
       sidebarOpen: false,
       highlightActive: false,
       modals: [],
+      collapseOpen: false,
+      currentPageNumber: 1,
     };
   }
 
-  public render() {
+  public render(): React.ReactElement {
     return (
       <AppRoot>
         <NavBar shy>
@@ -56,7 +68,7 @@ class App extends PureComponent<{}, AppState> {
 
             <Button
               className="primary float-right display-block md-display-none"
-              onClick={this.showSidebar}
+              onClick={this.onClickShowSideBar}
             >
               {MENU_CHAR}
             </Button>
@@ -65,12 +77,12 @@ class App extends PureComponent<{}, AppState> {
 
         <SideBar
           open={this.state.sidebarOpen}
-          onClickOutside={this.hideSidebar}
+          onClickOutside={this.onClickHideSideBar}
           position="right"
           className="display-block md-display-none"
         >
           <div className="margin-vertical-base">
-            <Button className="primary" onClick={this.hideSidebar}>
+            <Button className="primary" onClick={this.onClickHideSideBar}>
               {X_CHAR}
             </Button>
           </div>
@@ -316,6 +328,25 @@ class App extends PureComponent<{}, AppState> {
               <ModalRenderer modals={this.state.modals} />
             </ContentBox>
           </Highlight>
+
+          <ContentBox>
+            <Collapse open={this.state.collapseOpen} minHeight={100} fadeOut>
+              <p className="text-align-right">
+                <a onClick={this.onClickToggleCollapse}>
+                  {this.state.collapseOpen ? 'Collapse' : 'Expand'}
+                </a>
+              </p>
+              <DabIpsum count={5} />
+            </Collapse>
+          </ContentBox>
+
+          <ContentBox>
+            <Pagination
+              {...PAGINATION_PROPS}
+              currentPageNumber={this.state.currentPageNumber}
+              changePage={this.changePage}
+            />
+          </ContentBox>
         </Container>
 
         <Footer fixed>
@@ -331,13 +362,19 @@ class App extends PureComponent<{}, AppState> {
     );
   }
 
-  private showSidebar = () => {
+  private onClickToggleCollapse = () => {
+    this.setState(({ collapseOpen }) => ({
+      collapseOpen: !collapseOpen,
+    }));
+  };
+
+  private onClickShowSideBar = () => {
     this.setState({
       sidebarOpen: true,
     });
   };
 
-  private hideSidebar = () => {
+  private onClickHideSideBar = () => {
     this.setState({
       sidebarOpen: false,
     });
@@ -374,6 +411,12 @@ class App extends PureComponent<{}, AppState> {
       };
     });
   };
+
+  private changePage = (page: number) => {
+    this.setState({
+      currentPageNumber: page,
+    });
+  };
 }
 
 export default App;

examples/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+
 import App from './app';
 
 const app = document.createElement('div');

examples/modal.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { PureComponent } from 'react';
 
 import {
   Button,
@@ -15,8 +14,10 @@ interface ExampleModalProps {
   onClickClose: () => void;
 }
 
-export default class ExampleModal extends PureComponent<ExampleModalProps> {
-  public render() {
+export default class ExampleModal extends React.PureComponent<
+  ExampleModalProps
+> {
+  public render(): React.ReactElement {
     return (
       <Modal onClickOutside={this.props.onClickClose}>
         <ModalHeader>

examples/nav-items.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react';
-import { Nav, NavItem } from '../src/ts/';
 
-const NavItems = ({ className }: { className?: string }) => (
+import { Nav, NavItem } from '../src/ts';
+
+const NavItems = ({
+  className,
+}: {
+  className?: string;
+}): React.ReactElement => (
   <Nav className={className}>
     <NavItem active>
       <a href="#">One</a>

jest.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  preset: 'ts-jest',
+  testURL: 'http://localhost/',
+  collectCoverageFrom: ['src/ts/**/*.(js|jsx|ts|tsx)'],
+  setupFiles: ['<rootDir>/tests/helpers/setup.ts'],
+  coverageThreshold: {
+    global: {
+      branches: 100,
+      functions: 100,
+      lines: 100,
+      statements: 100,
+    },
+  },
+  testRegex: 'tests/.+\\.(ts|tsx|js|jsx)$',
+  testPathIgnorePatterns: [
+    '<rootDir>/tests/__mocks__/',
+    '<rootDir>/tests/helpers/',
+  ],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+};