dce-reactkit 1.0.20 → 2.0.2

package/src/helpers/padZerosLeft.tsx

@@ -0,0 +1,21 @@
+/**
+ * Pad a number with zeros on the left (e.g. 5 becomes 05 with 2 digit padding)
+ * @author Gabe Abrams
+ * @param num the number to pad
+ * @param numDigits the minimum number of digits before the decimal
+ * @returns padded number
+ */
+const padZerosLeft = (num: number, numDigits: number): string => {
+  // Convert to string
+  let out = String(num);
+
+  // Add zeros
+  while (out.split('.')[0].length < numDigits) {
+    out = `0${out}`;
+  }
+
+  // Return
+  return out;
+};
+
+export default padZerosLeft;

package/src/helpers/roundToNumDecimals.tsx

@@ -0,0 +1,13 @@
+/**
+ * Round a number to a certain number of decimals
+ * @author Gabe Abrams
+ * @param num the number to round
+ * @param numDecimals the number of decimals to round to
+ * @returns rounded number
+ */
+const roundToNumDecimals = (num: number, numDecimals: number): number => {
+  const rounder = 10 ** numDecimals;
+  return (Math.round(num * rounder) / rounder);
+};
+
+export default roundToNumDecimals;

package/src/helpers/sum.tsx

@@ -0,0 +1,16 @@
+/**
+ * Sum the numbers in an array
+ * @author Gabe Abrams
+ * @param nums the numbers to sum
+ * @returns the sum of the numbers
+ */
+const sum = (nums: number[]): number => {
+  return nums.reduce(
+    (a: number, b: number) => {
+      return (a + b);
+    },
+    0,
+  );
+};
+
+export default sum;

package/src/helpers/visitServerEndpoint.tsx

@@ -0,0 +1,59 @@
+// Initialize caccl
+import { sendRequest } from 'caccl/client';
+
+// Import custom error
+import ErrorWithCode from '../errors/ErrorWithCode';
+import ReactKitErrorCode from '../types/ReactKitErrorCode';
+
+/**
+ * Visit an endpoint on the server
+ * @author Gabe Abrams
+ * @param opts object containing all arguments
+ * @param opts.path - the path of the server endpoint
+ * @param [opts.method=GET] - the method of the endpoint
+ * @param [opts.params] - query/body parameters to include
+ * @returns response from server
+ */
+const visitServerEndpoint = async (
+  opts: {
+    path: string,
+    method?: ('GET' | 'POST' | 'DELETE' | 'PUT'),
+    params?: { [key in string]: any },
+  },
+): Promise<any> => {
+  // Send the request
+  const response = await sendRequest({
+    path: opts.path,
+    method: opts.method,
+    params: opts.params,
+  });
+
+  // Check for failure
+  if (!response || !response.body) {
+    throw new ErrorWithCode(
+      'We didn\'t get a response from the server. Please check your internet connection.',
+      ReactKitErrorCode.NoResponse,
+    );
+  }
+  if (!response.body.success) {
+    // Other errors
+    throw new ErrorWithCode(
+      (
+        response.body.message
+        || 'An unknown error occurred. Please contact an admin.'
+      ),
+      (
+        response.body.code
+        || ReactKitErrorCode.NoCode
+      ),
+    );
+  }
+
+  // Success! Extract the body
+  const { body } = response.body;
+
+  // Return
+  return body;
+};
+
+export default visitServerEndpoint;

package/src/helpers/waitMs.tsx

@@ -0,0 +1,12 @@
+/**
+ * Wait for a certain number of ms
+ * @author Gabe Abrams
+ * @param ms number of ms to wait
+ */
+const waitMs = async (ms = 0) => {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+};
+
+export default waitMs;

package/src/types/ReactKitErrorCode.tsx

@@ -0,0 +1,12 @@
+// Highest error code = DRK2
+
+/**
+ * List of error codes built into the react kit
+ * @author Gabe Abrams
+ */
+enum ReactKitErrorCode {
+  NoResponse = 'DRK1',
+  NoCode = 'DRK2',
+}
+
+export default ReactKitErrorCode;

package/src/types/Variant.tsx

@@ -0,0 +1,16 @@
+/**
+ * Bootstrap variants
+ * @author Gabe Abrams
+ */
+enum Variant {
+  Primary = 'primary',
+  Secondary = 'secondary',
+  Success = 'success',
+  Warning = 'warning',
+  Info = 'info',
+  Danger = 'danger',
+  Light = 'light',
+  Dark = 'dark',
+}
+
+export default Variant;

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "noImplicitAny": true,
+    "noEmitOnError": true,
+    "removeComments": false,
+    "declaration": true,
+    "sourceMap": true,
+    "target": "es5",
+    "jsx": "react-jsx",
+    "lib": [
+      "es2015",
+      "dom"
+    ],
+    "outDir": "./lib"
+  },
+  "include": [
+    "./src"
+  ],
+  "ts-node": {
+    "files": true
+  }
+}

package/index.js

@@ -1 +0,0 @@
-throw new Error('Do not import dce-reactkit directly. Import components individually. View the docs for more information: https://harvard-edtech.github.io/dce-reactkit/');

package/lib/Bar.js

@@ -1,169 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import rechart components
-import { ResponsiveContainer, BarChart as BarChartRechart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
-
-// Import other components
-import Holder from './common/chart/Holder';
-
-// Import default colors
-import colors from './common/chart/colors';
-
-// Import helpers
-import csvToString from './common/csvToString';
-
-/* Bar Chart Component */
-class BarChart extends Component {
-  render() {
-    // Deconstruct props (see propTypes below for detailed information)
-    const {
-      title,
-      color,
-      width,
-      height,
-      nameLabel,
-      nameUnit,
-      valueLabel,
-      valueUnit,
-      data,
-      horizontal,
-      noTooltipOnHover,
-      noDownload,
-      showLegend
-    } = this.props;
-
-    // Generate csv contents if they weren't included
-    let { csvContents } = this.props;
-    if (!noDownload && !csvContents) {
-      // Create the name column using the label and unit (if it's included)
-      const nameField = `${nameLabel}${nameUnit ? ' (' + nameUnit + ')' : ''}`;
-      // Create the value column using the label and unit (if it's included)
-      const valueField = `${valueLabel}${valueUnit ? ' (' + valueUnit + ')' : ''}`;
-      // Build the csv data object
-      const csv = {
-        fields: [nameField, valueField],
-        data: data.map(datum => {
-          return [datum.name, datum.value];
-        })
-      };
-      // Turn the csv object into a string
-      csvContents = csvToString(csv);
-    }
-
-    // Render the component
-    return React.createElement(
-      Holder,
-      {
-        title: title,
-        width: width,
-        height: height,
-        xLabel: horizontal ? valueLabel : nameLabel,
-        xUnit: horizontal ? valueUnit : nameUnit,
-        yLabel: horizontal ? nameLabel : valueLabel,
-        yUnit: horizontal ? nameUnit : valueUnit,
-        csvContents: csvContents
-      },
-      React.createElement(
-        ResponsiveContainer,
-        {
-          width: '100%',
-          height: '100%'
-        },
-        React.createElement(
-          BarChartRechart,
-          {
-            data: data.map(datum => {
-              return {
-                name: datum.name,
-                [valueLabel]: datum.value
-              };
-            }),
-            layout: horizontal ? 'vertical' : 'horizontal'
-          },
-          React.createElement(CartesianGrid, { strokeDasharray: '3 3' }),
-          React.createElement(XAxis, {
-            type: horizontal ? 'number' : 'category',
-            dataKey: horizontal ? null : 'name'
-          }),
-          React.createElement(YAxis, {
-            type: horizontal ? 'category' : 'number',
-            dataKey: horizontal ? 'name' : null
-          }),
-          !noTooltipOnHover && React.createElement(Tooltip, null),
-          showLegend && React.createElement(Legend, null),
-          React.createElement(Bar, { dataKey: valueLabel, fill: color })
-        )
-      )
-    );
-  }
-}
-
-BarChart.propTypes = {
-  // Title of the chart
-  title: PropTypes.string,
-  // Default CSS color (#123456 or 'white') for bars (can be overridden)
-  color: PropTypes.string,
-  // Width ('100%' or 50)
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  // Height ('100%' or 50)
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  // Label for the name axis
-  nameLabel: PropTypes.string,
-  // Unit for the name axis
-  nameUnit: PropTypes.string,
-  // Label for the value axis
-  valueLabel: PropTypes.string,
-  // Unit for the value axis
-  valueUnit: PropTypes.string,
-  // The data/bars
-  data: PropTypes.arrayOf(PropTypes.shape({
-    // Name of the bar
-    name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    // Value of the bar
-    value: PropTypes.number.isRequired,
-    // Color of the bar (overrides props.color)
-    color: PropTypes.string
-  })).isRequired,
-  // If true, bar chart is a horizontal bar chart
-  horizontal: PropTypes.bool,
-  // If true, no tooltip is shown on hover
-  noTooltipOnHover: PropTypes.bool,
-  // If true, legend is included
-  showLegend: PropTypes.bool,
-  // If true, no download button is shown
-  noDownload: PropTypes.bool,
-  // The contents of the csv file to download (auto-generated if not included)
-  csvContents: PropTypes.string
-};
-
-BarChart.defaultProps = {
-  // No title for chart by default
-  title: null,
-  // Bars are a neutral blue by default
-  color: colors.defaultBlue,
-  // Chart takes up whole parent width by default
-  width: '100%',
-  // Chart is 500 pixels tall by default
-  height: '500px',
-  // Name axis is labeled 'Name' by default
-  nameLabel: 'Name',
-  // Name axis has no label by default
-  nameUnit: null,
-  // Value axis is labeled 'Value' by default
-  valueLabel: 'Value',
-  // Value axis has no label by default
-  valueUnit: null,
-  // The bar chart is a vertical bar chart by default
-  horizontal: false,
-  // Tooltips are displayed by defaults
-  noTooltipOnHover: false,
-  // No legend is shown by default
-  showLegend: false,
-  // A download button is added by default
-  noDownload: false,
-  // We auto-generate the csv contents by default
-  csvContents: null
-};
-
-export default BarChart;

package/lib/Donut.js

@@ -1,145 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import genUUID from 'uuid/v1';
-
-// Import rechart components
-import { ResponsiveContainer, PieChart, Pie, Cell, Legend, Tooltip } from 'recharts';
-
-// Import other components
-import Holder from './common/chart/Holder';
-
-// Import default colors
-import colors from './common/chart/colors';
-
-// Import helpers
-import csvToString from './common/csvToString';
-
-/* Donut Chart Component */
-class DonutChart extends Component {
-  render() {
-    // Deconstruct props (see propTypes below for detailed information)
-    const {
-      title,
-      color,
-      width,
-      height,
-      data,
-      noTooltipOnHover,
-      noDownload,
-      showLegend
-    } = this.props;
-
-    // Generate csv contents for the download
-    let csvContents;
-    if (!noDownload) {
-      const csv = {
-        fields: ['Name', 'Value'],
-        data: data.map(datum => {
-          return [datum.name, datum.value];
-        })
-      };
-      csvContents = csvToString(csv);
-    }
-
-    return React.createElement(
-      Holder,
-      {
-        title: title,
-        width: width,
-        height: height,
-        csvContents: csvContents
-      },
-      React.createElement(
-        ResponsiveContainer,
-        {
-          width: '100%',
-          height: '100%'
-        },
-        React.createElement(
-          PieChart,
-          null,
-          showLegend && React.createElement(Legend, null),
-          React.createElement(
-            Pie,
-            {
-              data: data,
-              dataKey: 'value',
-              innerRadius: '60%',
-              outerRadius: '100%',
-              fill: color
-            },
-            data.map((item, index) => {
-              // Get the item's default color
-              let itemColor = item.color ? item.color : color;
-
-              // If individual item doesn't have an override color and we
-              // are using a color assortment, choose the next color
-              if (itemColor === 'assortment' && !item.color) {
-                itemColor = colors.assortment[index % colors.assortment.length];
-                // Don't let two adjacent slices have the same color
-                // (this math ensures that if the first and last slice are
-                // not the same color)
-                if ((data.length - 1) % colors.assortment.length === 0 && index === data.length - 1) {
-                  itemColor = colors.assortment[(index + Math.floor(colors.assortment.length / 2)) % colors.assortment.length];
-                }
-              }
-
-              // Return the cell corresponding to this donut slice
-              return React.createElement(Cell, {
-                key: genUUID(),
-                fill: itemColor
-              });
-            })
-          ),
-          !noTooltipOnHover && React.createElement(Tooltip, null)
-        )
-      )
-    );
-  }
-}
-
-DonutChart.propTypes = {
-  // Title of the chart
-  title: PropTypes.string,
-  // Default CSS color (#123456 or 'white') for slices (can be overridden)
-  // OR 'assortment' for random colors
-  color: PropTypes.string,
-  // Width ('100%' or 50)
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  // Height ('100%' or 50)
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  // The data/slices
-  data: PropTypes.arrayOf(PropTypes.shape({
-    // Name of the slice
-    name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    // Value of the slice (size)
-    value: PropTypes.number.isRequired,
-    // Color of the slice (overrides props.color)
-    color: PropTypes.string
-  })).isRequired,
-  // If true, no tooltip is shown on hover
-  noTooltipOnHover: PropTypes.bool,
-  // If true, legend is included
-  showLegend: PropTypes.bool,
-  // If true, no download button is shown
-  noDownload: PropTypes.bool
-};
-
-DonutChart.defaultProps = {
-  // Chart has no title by default
-  title: null,
-  // Donut slices get an assortment of colors by default
-  color: 'assortment',
-  // Chart takes up full parent width by default
-  width: '100%',
-  // Chart's height is 500px by default
-  height: '500px',
-  // Tooltips are displayed by default
-  noTooltipOnHover: false,
-  // No legend is included by default
-  showLegend: false,
-  // A download button is added by default
-  noDownload: false
-};
-
-export default DonutChart;

package/lib/DownloadButton.js

@@ -1,81 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import file download button
-import DownloadLink from 'react-download-link';
-
-// Import glyphs
-import Download from './glyph/Download';
-
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-/* Download Button Component */
-class DownloadButton extends Component {
-  // Deconstruct props (see propTypes below for detailed information)
-  render() {
-    const {
-      text,
-      filename,
-      contents,
-      large,
-      marginLeft,
-      marginRight,
-      marginTop,
-      marginBottom
-    } = this.props;
-
-    // Render the component
-    return React.createElement(DownloadLink, {
-      filename: filename,
-      exportFile: () => {
-        return contents;
-      },
-      label: React.createElement(
-        'span',
-        null,
-        React.createElement(Download, { className: 'mr-2' }),
-        text
-      ),
-      tagName: 'div',
-      className: `btn btn-dark text-white${large ? ' btn-lg' : ''}`,
-      style: {
-        textDecoration: 'none !important',
-        marginLeft,
-        marginRight,
-        marginTop,
-        marginBottom
-      }
-    });
-  }
-}
-
-DownloadButton.propTypes = {
-  // The title of the button
-  text: PropTypes.string,
-  // The filename of the download (the name the contents are downloaded as)
-  filename: PropTypes.string.isRequired,
-  // The contents of the file
-  contents: PropTypes.string.isRequired,
-  // If true, the button is a bootstrap large button
-  large: PropTypes.bool,
-  // Margins for the button
-  marginLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  marginRight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  marginTop: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  marginBottom: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
-
-DownloadButton.defaultProps = {
-  // Title of the button is 'Download' by default
-  text: 'Download',
-  // Button is a normal sized bootstrap button by default
-  large: false,
-  // Button has no margins by default
-  marginLeft: null,
-  marginRight: null,
-  marginTop: null,
-  marginBottom: null
-};
-
-export default DownloadButton;