Experimental port to Firebase hosting

modules/client/autoIndex/App.css

@@ -1,23 +0,0 @@
-.app {
-  max-width: 900px;
-  margin: 0 auto;
-}
-
-.app-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.app-version-selector {
-  line-height: 2.25em;
-  float: right;
-}
-.app-version-selector select {
-  font-size: 1em;
-}
-
-.app-address {
-  text-align: right;
-}

modules/client/autoIndex/App.js

@@ -1,10 +1,43 @@
-require('./App.css');
+import React from 'react';
+import PropTypes from 'prop-types';
 
-const React = require('react');
+import DirectoryListing from './DirectoryListing';
 
-const DirectoryListing = require('./DirectoryListing');
+const styles = {
+  wrapper: {
+    maxWidth: 900,
+    margin: '0 auto'
+  },
+  header: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  versionSelector: {
+    float: 'right',
+    lineHeight: '2.25em'
+  },
+  versionDropdown: {
+    fontSize: '1em'
+  },
+  address: {
+    textAlign: 'right'
+  }
+};
+
+const entryType = PropTypes.object;
+
+export default class App extends React.Component {
+  static propTypes = {
+    packageName: PropTypes.string.isRequired,
+    packageVersion: PropTypes.string.isRequired,
+    availableVersions: PropTypes.arrayOf(PropTypes.string),
+    filename: PropTypes.string.isRequired,
+    entry: entryType.isRequired,
+    entries: PropTypes.objectOf(entryType).isRequired
+  };
 
-class App extends React.Component {
   static defaultProps = {
     availableVersions: []
   };
@@ -18,19 +51,20 @@ class App extends React.Component {
 
   render() {
     return (
-      <div className="app">
-        <header className="app-header">
+      <div style={styles.wrapper}>
+        <header style={styles.header}>
           <h1>
             Index of /{this.props.packageName}@{this.props.packageVersion}
             {this.props.filename}
           </h1>
 
-          <div className="app-version-selector">
+          <div style={styles.versionSelector}>
             Version:{' '}
             <select
               id="version"
               defaultValue={this.props.packageVersion}
               onChange={this.handleChange}
+              style={styles.versionDropdown}
             >
               {this.props.availableVersions.map(v => (
                 <option key={v} value={v}>
@@ -51,27 +85,10 @@ class App extends React.Component {
 
         <hr />
 
-        <address className="app-address">
+        <address style={styles.address}>
           {this.props.packageName}@{this.props.packageVersion}
         </address>
       </div>
     );
   }
 }
-
-if (process.env.NODE_ENV === 'development') {
-  const PropTypes = require('prop-types');
-
-  const entryType = PropTypes.object;
-
-  App.propTypes = {
-    packageName: PropTypes.string.isRequired,
-    packageVersion: PropTypes.string.isRequired,
-    availableVersions: PropTypes.arrayOf(PropTypes.string),
-    filename: PropTypes.string.isRequired,
-    entry: entryType.isRequired,
-    entries: PropTypes.objectOf(entryType).isRequired
-  };
-}
-
-module.exports = App;

modules/client/autoIndex/DirectoryListing.css

@@ -1,17 +0,0 @@
-.directory-listing table {
-  width: 100%;
-  border-collapse: collapse;
-  font: 0.85em Monaco, monospace;
-}
-
-.directory-listing tr.even {
-  background-color: #eee;
-}
-
-.directory-listing th {
-  text-align: left;
-}
-.directory-listing th,
-.directory-listing td {
-  padding: 0.5em 1em;
-}

modules/client/autoIndex/DirectoryListing.js

@@ -1,8 +1,7 @@
-require('./DirectoryListing.css');
-
-const React = require('react');
-const formatBytes = require('pretty-bytes');
-const sortBy = require('sort-by');
+import React from 'react';
+import PropTypes from 'prop-types';
+import formatBytes from 'pretty-bytes';
+import sortBy from 'sort-by';
 
 function getDirname(name) {
   return (
@@ -25,20 +24,38 @@ function getRelativeName(base, name) {
   return base.length ? name.substr(base.length + 1) : name;
 }
 
-function DirectoryListing({ filename, entry, entries }) {
+const styles = {
+  table: {
+    width: '100%',
+    borderCollapse: 'collapse',
+    font: '0.85em Monaco, monospace'
+  },
+  evenRow: {
+    backgroundColor: '#eee'
+  },
+  tableHead: {
+    textAlign: 'left',
+    padding: '0.5em 1em'
+  },
+  tableCell: {
+    padding: '0.5em 1em'
+  }
+};
+
+export default function DirectoryListing({ filename, entry, entries }) {
   const rows = [];
 
   if (filename !== '/') {
     rows.push(
       <tr key="..">
-        <td>
+        <td style={styles.tableCell}>
           <a title="Parent directory" href="../">
             ..
           </a>
         </td>
-        <td>-</td>
-        <td>-</td>
-        <td>-</td>
+        <td style={styles.tableCell}>-</td>
+        <td style={styles.tableCell}>-</td>
+        <td style={styles.tableCell}>-</td>
       </tr>
     );
   }
@@ -54,14 +71,14 @@ function DirectoryListing({ filename, entry, entries }) {
 
       rows.push(
         <tr key={name}>
-          <td>
+          <td style={styles.tableCell}>
             <a title={relName} href={href}>
               {href}
             </a>
           </td>
-          <td>-</td>
-          <td>-</td>
-          <td>-</td>
+          <td style={styles.tableCell}>-</td>
+          <td style={styles.tableCell}>-</td>
+          <td style={styles.tableCell}>-</td>
         </tr>
       );
     });
@@ -74,33 +91,33 @@ function DirectoryListing({ filename, entry, entries }) {
 
       rows.push(
         <tr key={name}>
-          <td>
+          <td style={styles.tableCell}>
             <a title={relName} href={relName}>
               {relName}
             </a>
           </td>
-          <td>{contentType}</td>
-          <td>{formatBytes(size)}</td>
-          <td>{lastModified}</td>
+          <td style={styles.tableCell}>{contentType}</td>
+          <td style={styles.tableCell}>{formatBytes(size)}</td>
+          <td style={styles.tableCell}>{lastModified}</td>
         </tr>
       );
     });
 
   return (
-    <div className="directory-listing">
-      <table>
+    <div>
+      <table style={styles.table}>
         <thead>
           <tr>
-            <th>Name</th>
-            <th>Type</th>
-            <th>Size</th>
-            <th>Last Modified</th>
+            <th style={styles.tableHead}>Name</th>
+            <th style={styles.tableHead}>Type</th>
+            <th style={styles.tableHead}>Size</th>
+            <th style={styles.tableHead}>Last Modified</th>
           </tr>
         </thead>
         <tbody>
           {rows.map((row, index) =>
             React.cloneElement(row, {
-              className: index % 2 ? 'odd' : 'even'
+              style: index % 2 ? undefined : styles.evenRow
             })
           )}
         </tbody>
@@ -109,18 +126,12 @@ function DirectoryListing({ filename, entry, entries }) {
   );
 }
 
-if (process.env.NODE_ENV === 'development') {
-  const PropTypes = require('prop-types');
+const entryType = PropTypes.shape({
+  name: PropTypes.string.isRequired
+});
 
-  const entryType = PropTypes.shape({
-    name: PropTypes.string.isRequired
-  });
-
-  DirectoryListing.propTypes = {
-    filename: PropTypes.string.isRequired,
-    entry: entryType.isRequired,
-    entries: PropTypes.objectOf(entryType).isRequired
-  };
-}
-
-module.exports = DirectoryListing;
+DirectoryListing.propTypes = {
+  filename: PropTypes.string.isRequired,
+  entry: entryType.isRequired,
+  entries: PropTypes.objectOf(entryType).isRequired
+};