final audit

components/core/Profile.js

@@ -22,6 +22,7 @@ const STYLES_PROFILE = css`
   white-space: pre-wrap;
   flex-shrink: 0;
   display: block;
+
   @media (max-width: ${Constants.sizes.mobile}px) {
     padding: 80px 24px 0px 24px;
   }
@@ -33,6 +34,7 @@ const STYLES_PROFILE_INFO = css`
   width: 50%;
   overflow-wrap: break-word;
   white-space: pre-wrap;
+
   @media (max-width: ${Constants.sizes.tablet}px) {
     width: 100%;
   }
@@ -54,6 +56,7 @@ const STYLES_INFO_INTERNAL = css`
   margin-bottom: 48px;
   overflow-wrap: break-word;
   white-space: pre-wrap;
+
   @media (max-width: ${Constants.sizes.mobile}px) {
     max-width: calc(100% - 64px);
   }
@@ -67,6 +70,7 @@ const STYLES_INFO = css`
   margin-bottom: 48px;
   overflow-wrap: break-word;
   white-space: pre-wrap;
+
   @media (max-width: ${Constants.sizes.mobile}px) {
     max-width: calc(100% - 80px);
   }
@@ -81,6 +85,7 @@ const STYLES_PROFILE_IMAGE = css`
   flex-shrink: 0;
   border-radius: 4px;
   margin-right: 24px;
+
   @media (max-width: ${Constants.sizes.mobile}px) {
     width: 64px;
     height: 64px;
@@ -93,11 +98,11 @@ const STYLES_NAME = css`
   font-family: ${Constants.font.medium};
   max-width: 100%;
   font-weight: 400;
-  align-item: left;
   margin-top: 8px;
   margin-right: 24px;
   overflow-wrap: break-word;
   white-space: pre-wrap;
+
   @media (max-width: ${Constants.sizes.mobile}px) {
     margin-bottom: 8px;
     margin-right: 0;
@@ -109,7 +114,6 @@ const STYLES_NAME_INTERNAL = css`
   font-family: ${Constants.font.medium};
   font-weight: 400;
   max-width: 100%;
-  align-item: left;
   margin-top: 8px;
   overflow-wrap: break-word;
   white-space: pre-wrap;
@@ -153,6 +157,7 @@ const STYLES_BUTTON = css`
   border-radius: 4px;
   color: ${Constants.system.white};
   background-color: ${Constants.system.brand};
+
   :visited {
     color: ${Constants.system.white};
   }
@@ -164,6 +169,7 @@ const STYLES_FLEX = css`
   align-items: baseline;
   justify-content: space-between;
   flex-wrap: wrap;
+
   @media (max-width: ${Constants.sizes.tablet}px) {
     display: block;
   }
@@ -177,7 +183,6 @@ export default class Profile extends React.Component {
     for (let slate of data.slates) {
       total += slate.data.objects.length;
     }
-    console.log(this.props.buttons);
 
     return (
       <div>
@@ -201,10 +206,6 @@ export default class Profile extends React.Component {
                   <div style={{ color: `${Constants.system.darkGray}` }}>Public slates</div>
                   <div style={{ fontFamily: `${Constants.font.medium}` }}>{data.slates.length}</div>
                 </div>
-                {/* <div css={STYLES_STAT}>
-                <div style={{ color: `${Constants.system.grayBlack}` }}>Following slates</div>
-                <div style={{ fontFamily: `${Constants.font.semiBold}` }}>0</div>
-              </div> */}
               </div>
 
               {data.data.body ? (
@@ -241,10 +242,6 @@ export default class Profile extends React.Component {
                       {data.slates.length}
                     </div>
                   </div>
-                  {/* <div css={STYLES_STAT}>
-                <div style={{ color: `${Constants.system.grayBlack}` }}>Following slates</div>
-                <div style={{ fontFamily: `${Constants.font.semiBold}` }}>0</div>
-              </div> */}
                 </div>
                 {data.data.body ? (
                   <div css={STYLES_DESCRIPTION} style={{ marginBottom: 16 }}>
@@ -255,6 +252,7 @@ export default class Profile extends React.Component {
             </div>
           </div>
         )}
+
         {this.props.onAction ? (
           <div css={STYLES_PROFILE_INTERNAL} style={{ paddingTop: 0 }}>
             {data.slates && data.slates.length ? (
@@ -279,40 +277,6 @@ export default class Profile extends React.Component {
             ) : null}
           </div>
         )}
-        {/* <div>
-            {data.slates.map((slate) => {
-              if (this.props.onAction) {
-                return (
-                  <div
-                    key={slate.id}
-                    onClick={() =>
-                      this.props.onAction({
-                        type: "NAVIGATE",
-                        value: this.props.sceneId,
-                        scene: "PUBLIC_SLATE",
-                        data: slate,
-                      })
-                    }
-                  >
-                    <SlatePreviewBlock
-                      slate={slate}
-                      username={data.username}
-                      isOwner={this.props.isOwner}
-                    />
-                  </div>
-                );
-              }
-              return (
-                <a
-                  key={slate.id}
-                  href={`/${data.username}/${slate.slatename}`}
-                  css={STYLES_LINK}
-                >
-                  <SlatePreviewBlock external slate={slate} />
-                </a>
-              );
-            })}
-          </div> */}
       </div>
     );
   }

pages/_/system/line-chart.js

@@ -5,7 +5,6 @@ import Group from "~/components/system/Group";
 import SystemPage from "~/components/system/SystemPage";
 import ViewSourceLink from "~/components/system/ViewSourceLink";
 import CodeBlock from "~/components/system/CodeBlock";
-
 import Chart from "~/components/stats/Chart";
 
 const data = [
@@ -49,8 +48,7 @@ export default class SystemPageLineCharts extends React.Component {
         <br />
 
         <System.P>
-          The Line Chart component displays categories of data points on a line
-          chart.
+          The Line Chart component displays categories of data points on a line chart.
         </System.P>
         <br />
         <br />
@@ -102,12 +100,7 @@ const xWall = 500;`}</CodeBlock>
         <br />
         <System.H2>Output</System.H2>
         <hr />
-        <Chart
-          data={data}
-          maxTicks={tickNumber}
-          yCeiling={yCeiling}
-          xWall={xWall}
-        />
+        <Chart data={data} maxTicks={tickNumber} yCeiling={yCeiling} xWall={xWall} />
         <hr />
         <br />
         <br />
@@ -115,7 +108,7 @@ const xWall = 500;`}</CodeBlock>
         <System.H2>Props</System.H2>
         <hr />
         <br />
-        <Group title="StatCard">
+        <Group title="LineChart">
           <System.Table
             data={{
               columns: [
@@ -130,7 +123,7 @@ const xWall = 500;`}</CodeBlock>
                   a: "data",
                   b: "array",
                   c: "null",
-                  d: "The value listed in the header of the StatCard",
+                  d: "The value listed in the header of the LineChart",
                 },
                 {
                   id: 2,

vendor/react-chartkick.js

@@ -1,84 +0,0 @@
-import * as React from "react";
-
-import Chartkick from "chartkick";
-
-let chartId = 1;
-
-class ChartComponent extends React.Component {
-  newChartType(props) {
-    const data = props.data;
-    const options = {};
-    for (const prop in props) {
-      if (
-        props.hasOwnProperty(prop) &&
-        prop !== "data" &&
-        prop !== "id" &&
-        prop !== "height" &&
-        prop !== "width"
-      ) {
-        options[prop] = props[prop];
-      }
-    }
-    if (this.element) {
-      if (this.chart) {
-        this.chart.updateData(data, options);
-      } else {
-        this.chart = new props.chartType(this.element, data, options);
-      }
-    }
-  }
-
-  componentDidMount() {
-    this.newChartType(this.props);
-  }
-
-  componentDidUpdate() {
-    this.newChartType(this.props);
-  }
-
-  render() {
-    const props = this.props;
-    const style = {
-      height: props.height || "300px",
-      lineHeight: props.height || "300px",
-      width: props.width || "100%",
-      textAlign: "center",
-      color: "#999",
-      fontSize: "14px",
-      fontFamily:
-        "'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif",
-    };
-    this.chartId = props.id || this.chartId || "chart-" + chartId++;
-    return React.createElement(
-      "div",
-      {
-        id: this.chartId,
-        style: style,
-        ref: (element) => (this.element = element),
-      },
-      "Loading..."
-    );
-  }
-}
-
-const createComponent = (chartType) => {
-  const ChartkickComponent = ({ innerRef, ...props }) => {
-    // props cloned when split from innerRef, so we can modify directly
-    props.chartType = chartType;
-    props.ref = innerRef;
-    return React.createElement(ChartComponent, props);
-  };
-  ChartkickComponent.displayName = chartType.name;
-  return ChartkickComponent;
-};
-
-export const LineChart = createComponent(Chartkick.LineChart);
-export const PieChart = createComponent(Chartkick.PieChart);
-export const ColumnChart = createComponent(Chartkick.ColumnChart);
-export const BarChart = createComponent(Chartkick.BarChart);
-export const AreaChart = createComponent(Chartkick.AreaChart);
-export const ScatterChart = createComponent(Chartkick.ScatterChart);
-export const GeoChart = createComponent(Chartkick.GeoChart);
-export const Timeline = createComponent(Chartkick.Timeline);
-
-export default Chartkick;