0.0.6 - loaders, no circular dependencies, preview

components/system/modules/CreateFilecoinAddress.js

@@ -1,7 +1,14 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
 
-import { Input, SelectMenu, CheckBox, ButtonPrimaryFull } from "~/components/system";
+import { Input } from "~/components/system/components/Input";
+import {
+  SelectMenu,
+} from "~/components/system/components/SelectMenus";
+import { CheckBox } from "~/components/system/components/CheckBox";
+import {
+  ButtonPrimaryFull,
+} from "~/components/system/components/Buttons";
 import { css } from "@emotion/react";
 
 const SELECT_MENU_OPTIONS = [

components/system/modules/CreateFilecoinStorageDeal.js

@@ -1,6 +1,9 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
-import * as System from "~/components/system";
+import {
+  ButtonPrimaryFull,
+  ButtonSecondaryFull,
+} from "~/components/system/components/Buttons";
 
 import { css } from "@emotion/react";
 
@@ -93,16 +96,16 @@ export class CreateFilecoinStorageDeal extends React.Component {
             </div>
           </div>
         ) : null}
-        <System.ButtonSecondaryFull type="label" htmlFor="file">
+        <ButtonSecondaryFull type="label" htmlFor="file">
           Add file
-        </System.ButtonSecondaryFull>
+        </ButtonSecondaryFull>
         {this.state.file ? (
-          <System.ButtonPrimaryFull
+          <ButtonPrimaryFull
             style={{ marginTop: 24 }}
             onClick={this._handleSubmit}
           >
             Make storage deal
-          </System.ButtonPrimaryFull>
+          </ButtonPrimaryFull>
         ) : null}
       </div>
     );

components/system/modules/FilecoinBalancesList.js

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

components/system/modules/FilecoinDealsList.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
 import * as Strings from "~/common/strings";
-import * as System from "~/components/system";
 
 import { css } from "@emotion/react";
+import { Table } from "~/components/system/components/Table";
 
 import Group from "~/components/system/Group";
 
@@ -38,7 +38,7 @@ export class FilecoinStorageDealsList extends React.Component {
   render() {
     return (
       <Group title="Storage Deals">
-        <System.Table
+        <Table
           data={{
             columns: [
               {
@@ -95,7 +95,7 @@ export class FilecoinRetrievalDealsList extends React.Component {
   render() {
     return (
       <Group title="Retrieval Deals">
-        <System.Table
+        <Table
           data={{
             columns: [
               {

components/system/modules/PeersList.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
-import { Table } from "~/components/system";
 
+import { Table } from "~/components/system/components/Table";
 import { css } from "@emotion/react";
 
 const STYLES_CONTAINER = css`

components/system/modules/SendAddressFilecoin.js

@@ -1,7 +1,10 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
-import * as System from "~/components/system";
 
+import { Input } from "~/components/system/components/Input";
+import {
+  ButtonPrimaryFull,
+} from "~/components/system/components/Buttons";
 import { css } from "@emotion/react";
 
 const STYLES_CONTAINER = css`
@@ -40,14 +43,14 @@ export class SendAddressFilecoin extends React.Component {
   render() {
     return (
       <div css={STYLES_CONTAINER}>
-        <System.Input
+        <Input
           label="From"
           name="source"
           value={this.state.source}
           onChange={this._handleChange}
         />
 
-        <System.Input
+        <Input
           containerStyle={{ marginTop: 24 }}
           label="To"
           name="target"
@@ -55,7 +58,7 @@ export class SendAddressFilecoin extends React.Component {
           onChange={this._handleChange}
         />
 
-        <System.Input
+        <Input
           containerStyle={{ marginTop: 24 }}
           label="Amount (Filecoin)"
           name="amount"
@@ -64,12 +67,12 @@ export class SendAddressFilecoin extends React.Component {
           onChange={this._handleChange}
         />
 
-        <System.ButtonPrimaryFull
+        <ButtonPrimaryFull
           style={{ marginTop: 48 }}
           onClick={this._handleSubmit}
         >
           Send {this.state.amount} FIL
-        </System.ButtonPrimaryFull>
+        </ButtonPrimaryFull>
       </div>
     );
   }