0.0.5 sds update, fixes circular references, adds comments

components/system/components/CodeBlock.js

@@ -2,6 +2,9 @@ import * as React from "react";
 import * as Constants from "~/common/constants";
 
 import { css } from "@emotion/react";
+
+// TODO:
+// Refactor to https://github.com/FormidableLabs/prism-react-renderer
 import Prism from "prismjs";
 
 const STYLES_CODE_BLOCK = css`

components/system/modules/CreateFilecoinAddress.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
-import * as System from "~/components/system";
 
+import { Input, SelectMenu, CheckBox, ButtonPrimaryFull } from "~/components/system";
 import { css } from "@emotion/react";
 
 const SELECT_MENU_OPTIONS = [
@@ -51,14 +51,14 @@ export class CreateFilecoinAddress extends React.Component {
   render() {
     return (
       <div css={STYLES_CONTAINER}>
-        <System.Input
+        <Input
           label="Address name"
           name="name"
           value={this.state.name}
           onChange={this._handleChange}
         />
 
-        <System.SelectMenu
+        <SelectMenu
           full
           containerStyle={{ marginTop: 24 }}
           name="type"
@@ -67,25 +67,23 @@ export class CreateFilecoinAddress extends React.Component {
           category="type adresss"
           onChange={this._handleChange}
           options={SELECT_MENU_OPTIONS}
-        >
-          {SELECT_MENU_MAP[this.state.type]}
-        </System.SelectMenu>
+        />
 
-        <System.CheckBox
+        <CheckBox
           style={{ marginTop: 24 }}
           name="default"
           value={this.state.default}
           onChange={this._handleChange}
         >
           Make this wallet the default
-        </System.CheckBox>
+        </CheckBox>
 
-        <System.ButtonPrimaryFull
+        <ButtonPrimaryFull
           style={{ marginTop: 48 }}
           onClick={this._handleSubmit}
         >
           Create address
-        </System.ButtonPrimaryFull>
+        </ButtonPrimaryFull>
       </div>
     );
   }

components/system/modules/PeersList.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
-import * as System from "~/components/system";
+import { Table } from "~/components/system";
 
 import { css } from "@emotion/react";
 
@@ -17,7 +17,7 @@ const STYLES_CONTAINER = css`
 export const PeersList = (props) => {
   return (
     <div css={STYLES_CONTAINER}>
-      <System.Table
+      <Table
         data={{
           columns: [
             {

pages/api/hydrate.js

@@ -9,11 +9,6 @@ import path from "path";
 
 const initCORS = MW.init(MW.CORS);
 
-const TEXTILE_KEY_INFO = {
-  key: process.env.TEXTILE_HUB_KEY,
-  secret: process.env.TEXTILE_HUB_SECRET,
-};
-
 export default async (req, res) => {
   initCORS(req, res);
 

pages/system/index.js

@@ -7,7 +7,7 @@ export default class SystemPageRoot extends React.Component {
   render() {
     return (
       <SystemPage
-        title="SDS 1.2"
+        title="SDS 0.0.5"
         description="This is an early preview of the Slate Design System SDS)."
         url="https://fps.onrender.com/system"
       >
@@ -21,7 +21,7 @@ export default class SystemPageRoot extends React.Component {
             marginBottom: 48,
           }}
         />
-        <System.H1>SDS 1.2</System.H1>
+        <System.H1>SDS 0.0.5</System.H1>
         <br />
         <System.P>
           The <strong>Slate Design System</strong> is an open source resource