@sproutsocial/racine 11.8.0 → 11.9.0-typescript.0

package/__flow__/Numeral/index.stories.js

@@ -1,9 +1,22 @@
 import React from "react";
-import { number, select } from "@storybook/addon-knobs";
 import Numeral from "./index";
 
-const localeOptions = {
-  "": null,
+const localeOptions = [
+  "United States (en-US)",
+  "English (en)",
+  "Arabic (ar-EG)",
+  "Brazil (pt-BR)",
+  "India (en-IN)",
+  "French (fr-FR)",
+  "Spain (es-ES)",
+  "Mexico (es-MX)",
+  "Germany (de-DE)",
+  "German (de)",
+  "Japan (ja-JP)",
+  "Japanese (ja)",
+];
+
+const localeMapping = {
   "United States (en-US)": "en-US",
   "English (en)": "en",
   "Arabic (ar-EG)": "ar-EG",
@@ -18,8 +31,15 @@ const localeOptions = {
   "Japanese (ja)": "ja",
 };
 
-const currencyOptions = {
-  "": null,
+const currencyOptions = [
+  "Egyptian £",
+  "European €",
+  "Indian ₹",
+  "Japanese ¥",
+  "USA $",
+];
+
+const currencyMapping = {
   "Egyptian £": "EGP",
   "European €": "EUR",
   "Indian ₹": "INR",
@@ -27,15 +47,24 @@ const currencyOptions = {
   "USA $": "USD",
 };
 
-const formatOptions = {
-  "": null,
+const formatOptions = ["decimal", "currency", "percent"];
+
+const formatMapping = {
   decimal: "decimal",
   currency: "currency",
   percent: "percent",
 };
 
-const abbreviateOptions = {
-  "": null,
+const abbreviateOptions = [
+  "true",
+  "false",
+  " 500",
+  "1_000",
+  "10_000",
+  "100_000",
+];
+
+const abbreviateMapping = {
   true: true,
   false: false,
   " 500": 500,
@@ -44,79 +73,109 @@ const abbreviateOptions = {
   "100_000": 100000,
 };
 
-const precisionOptions = {
-  "": null,
-  " 0": 0,
-  " 1": 1,
-  " 2": 2,
-  " 3": 3,
-  " 6": 6,
+const precisionOptions = ["0", "1", "2", "3", "6", "none"];
+
+const precisionMapping = {
+  "0": 0,
+  "1": 1,
+  "2": 2,
+  "3": 3,
+  "6": 6,
   none: "none",
 };
 
 export default {
   title: "Numeral",
+  component: Numeral,
+  argTypes: {
+    locale: {
+      control: "select",
+      options: localeOptions,
+      mapping: localeMapping,
+    },
+    format: {
+      control: "select",
+      options: formatOptions,
+      mapping: formatMapping,
+    },
+    currency: {
+      control: "select",
+      options: currencyOptions,
+      mapping: currencyMapping,
+    },
+    abbreviate: {
+      control: "select",
+      options: abbreviateOptions,
+      mapping: abbreviateMapping,
+    },
+    precision: {
+      control: "select",
+      options: precisionOptions,
+      mapping: precisionMapping,
+    },
+  },
+  args: {
+    color: "text.headline",
+    number: 12.89,
+  },
 };
 
-// We wrap the knobs select function to properly create undefined values
-const _select = (...args) => {
-  const answer = select(...args);
-
-  return answer === null ? undefined : answer;
-};
-
-export const defaultStory = () => (
-  <Numeral
-    number={number("Number", 12.89)}
-    locale={_select("Locale", localeOptions)}
-    format={_select("Format", formatOptions)}
-    currency={_select("Currency", currencyOptions)}
-    abbreviate={_select("Abbreviate", abbreviateOptions)}
-    precision={_select("Precision", precisionOptions)}
-    color="text.headline"
-  />
-);
+export const defaultStory = (args) => <Numeral {...args} />;
 
 defaultStory.story = {
   name: "Default",
 };
 
-export const total = () => (
-  <Numeral
-    number={100}
-    fontWeight="semibold"
-    fontSize={500}
-    color="text.headline"
-  />
-);
+export const total = (args) => <Numeral {...args} />;
+
+total.args = {
+  number: 100,
+  fontWeight: "semibold",
+  fontSize: 500,
+};
 
 total.story = {
   name: "Total",
 };
 
-export const trend = () => <Numeral number={100} color="teal.500" />;
+export const trend = (args) => <Numeral {...args} />;
+
+trend.args = {
+  number: 100,
+  color: "teal.500",
+};
 
 trend.story = {
   name: "Trend",
 };
 
-export const noPrecision = () => (
-  <Numeral number={123.45678} precision="none" color="text.headline" />
-);
+export const noPrecision = (args) => <Numeral {...args} />;
+
+noPrecision.args = {
+  number: 123.45678,
+  precision: "none",
+};
 
 noPrecision.story = {
   name: "No Precision",
 };
 
-export const currencyPrecision = () => (
-  <Numeral number={123.4} format="currency" color="text.headline" />
-);
+export const currencyPrecision = (args) => <Numeral {...args} />;
+
+currencyPrecision.args = {
+  number: 123.4,
+  format: "currency",
+};
 
 currencyPrecision.story = {
   name: "Currency precision",
 };
 
-export const invalid = () => <Numeral number={null} />;
+export const invalid = (args) => <Numeral {...args} />;
+
+invalid.args = {
+  number: null,
+};
 
 invalid.story = {
   name: "Invalid",

package/__flow__/Radio/index.stories.js

@@ -1,58 +1,73 @@
 import React from "react";
-import { boolean } from "@storybook/addon-knobs";
-
 import Radio from "./";
 
 export default {
   title: "Radio",
+  component: Radio,
+};
+
+export const Unchecked = (args) => <Radio {...args} />;
+
+Unchecked.args = {
+  checked: false,
 };
 
-export const Unchecked = () => <Radio checked={boolean("checked", false)} />;
+export const Checked = (args) => <Radio {...args} />;
 
-export const Checked = () => <Radio checked={boolean("checked", true)} />;
+Checked.args = {
+  checked: true,
+};
+
+export const DisabledUnchecked = (args) => <Radio {...args} />;
 
-export const DisabledUnchecked = () => (
-  <Radio disabled={boolean("disabled", true)} />
-);
+DisabledUnchecked.args = {
+  disabled: true,
+};
 
 DisabledUnchecked.story = {
   name: "Disabled/Unchecked",
 };
 
-export const DisabledChecked = () => (
-  <Radio
-    checked={boolean("checked", true)}
-    disabled={boolean("disabled", true)}
-  />
-);
+export const DisabledChecked = (args) => <Radio {...args} />;
+
+DisabledChecked.args = {
+  checked: true,
+  disabled: true,
+};
 
 DisabledChecked.story = {
   name: "Disabled/Checked",
 };
 
-export const LabelledChecked = () => (
-  <Radio checked={boolean("checked", true)} label="Toggle Me" />
-);
+export const LabelledChecked = (args) => <Radio {...args} />;
+
+LabelledChecked.args = {
+  checked: true,
+  label: "Toggle Me",
+};
 
 LabelledChecked.story = {
   name: "Labelled/Checked",
 };
 
-export const LabelledUnchecked = () => (
-  <Radio checked={boolean("checked", false)} label="Toggle Me" />
-);
+export const LabelledUnchecked = (args) => <Radio {...args} />;
+
+LabelledUnchecked.args = {
+  checked: false,
+  label: "Toggle Me",
+};
 
 LabelledUnchecked.story = {
   name: "Labelled/Unchecked",
 };
 
-export const LabelledDisabled = () => (
-  <Radio
-    checked={boolean("checked", true)}
-    disabled={boolean("disabled", true)}
-    label="Toggle Me"
-  />
-);
+export const LabelledDisabled = (args) => <Radio {...args} />;
+
+LabelledDisabled.args = {
+  checked: false,
+  disabled: true,
+  label: "Toggle Me",
+};
 
 LabelledDisabled.story = {
   name: "Labelled/Disabled",

package/__flow__/SegmentedControl/index.js

@@ -17,8 +17,9 @@ type TypeSegmentedControlContext = {
   onChange: (e: SyntheticInputEvent<HTMLInputElement>) => void,
 };
 
-const SegmentedControlContext =
-  React.createContext<?TypeSegmentedControlContext>(null);
+const SegmentedControlContext = React.createContext<?TypeSegmentedControlContext>(
+  null
+);
 
 type TypeSegmentedControlItemProps = {
   /** The value of this item. Should be unique among sibling items. */

package/__flow__/Switch/index.stories.js

@@ -1,33 +1,41 @@
 import React from "react";
-import { boolean } from "@storybook/addon-knobs";
-
 import Switch from "./";
 
 export default {
   title: "Switch",
+  component: Switch,
 };
 
-export const Off = () => <Switch checked={boolean("checked", false)} />;
-export const On = () => <Switch checked={boolean("checked", true)} />;
+export const On = (args) => <Switch {...args} />;
 
-export const DisabledOff = () => (
-  <Switch
-    checked={boolean("checked", false)}
-    disabled={boolean("disabled", true)}
-  />
-);
+On.args = {
+  checked: true,
+};
 
-DisabledOff.story = {
-  name: "Disabled/Off",
+export const Off = (args) => <Switch {...args} />;
+
+Off.args = {
+  checked: false,
 };
 
-export const DisabledOn = () => (
-  <Switch
-    checked={boolean("checked", true)}
-    disabled={boolean("disabled", true)}
-  />
-);
+export const DisabledOn = (args) => <Switch {...args} />;
+
+DisabledOn.args = {
+  checked: true,
+  disabled: true,
+};
 
 DisabledOn.story = {
   name: "Disabled/On",
 };
+
+export const DisabledOff = (args) => <Switch {...args} />;
+
+DisabledOff.args = {
+  checked: false,
+  disabled: true,
+};
+
+DisabledOff.story = {
+  name: "Disabled/Off",
+};

package/__flow__/TableCell/index.js

@@ -22,8 +22,15 @@ export type TypeTableCell = {
  */
 export default class TableCell extends React.Component<TypeTableCell> {
   render() {
-    const { id, content, colSpan, width, align, children, ...rest } =
-      this.props;
+    const {
+      id,
+      content,
+      colSpan,
+      width,
+      align,
+      children,
+      ...rest
+    } = this.props;
 
     return (
       <Container

package/__flow__/ToggleHint/index.js

@@ -32,8 +32,15 @@ export default class ToggleHint extends React.Component<TypeProps> {
   };
 
   render() {
-    const { icon, isOpen, openString, closeString, qa, className, ...rest } =
-      this.props;
+    const {
+      icon,
+      isOpen,
+      openString,
+      closeString,
+      qa,
+      className,
+      ...rest
+    } = this.props;
 
     return (
       <Container

package/__flow__/systemProps/color.js

@@ -14,8 +14,7 @@ import type {
 
 // https://styled-system.com/table#color
 
-type TypeBackgroundColorSystemProp =
-  TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
+type TypeBackgroundColorSystemProp = TypeResponsiveBaseSystemProp<BackgroundColorProperty>;
 export type TypeColorSystemProps = $ReadOnly<{|
   backgroundColor?: TypeBackgroundColorSystemProp,
   bg?: TypeBackgroundColorSystemProp,

package/__flow__/utils/responsiveProps/index.test.js

@@ -19,13 +19,21 @@ describe("normalizeResponsiveProp", () => {
 
   it("should handle arrays with 4 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3])).toMatchObject([
-      0, 1, 2, 3, 3,
+      0,
+      1,
+      2,
+      3,
+      3,
     ]);
   });
 
   it("should handle arrays with 5 values", () => {
     expect(normalizeResponsiveProp([0, 1, 2, 3, 4])).toMatchObject([
-      0, 1, 2, 3, 4,
+      0,
+      1,
+      2,
+      3,
+      4,
     ]);
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.8.0",
+  "version": "11.9.0-typescript.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -66,6 +66,10 @@
   },
   "dependencies": {
     "@styled-system/theme-get": "^5.1.2",
+    "@types/jest": "^27.5.1",
+    "@types/node": "^17.0.38",
+    "@types/react": "^18.0.10",
+    "@types/react-dom": "^18.0.5",
     "classnames": "^2.2.6",
     "lodash.curry": "^4.1.1",
     "lodash.uniqueid": "^4.0.1",
@@ -81,6 +85,7 @@
     "react-virtualized": "9.18.5",
     "scroll-into-view-if-needed": "1.1.0",
     "styled-system": "^5.1.5",
+    "typescript": "^4.7.2",
     "use-measure": "^0.2.2"
   },
   "devDependencies": {

package/commonjs/Button/index.js

@@ -1,70 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _styles = _interopRequireDefault(require("./styles"));
-
-var _excluded = ["href", "appearance", "active", "disabled", "external", "children", "size", "innerRef", "onClick", "title", "qa", "as", "ariaLabel"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-var Button = function Button(_ref) {
-  var href = _ref.href,
-      _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? "unstyled" : _ref$appearance,
-      _ref$active = _ref.active,
-      active = _ref$active === void 0 ? false : _ref$active,
-      disabled = _ref.disabled,
-      external = _ref.external,
-      children = _ref.children,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "default" : _ref$size,
-      innerRef = _ref.innerRef,
-      onClick = _ref.onClick,
-      title = _ref.title,
-      _ref$qa = _ref.qa,
-      qa = _ref$qa === void 0 ? {} : _ref$qa,
-      as = _ref.as,
-      ariaLabel = _ref.ariaLabel,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  if (!href && external) {
-    console.warn("Warning: external prop cannot be set without a href declaration");
-  } // plans to properly deprecate captured in DS-1096
-
-
-  var appearanceCheck = appearance === "default" ? "unstyled" : appearance;
-  return /*#__PURE__*/React.createElement(_styles.default, _extends({
-    title: title,
-    active: active,
-    href: href,
-    target: external ? "_blank" : undefined,
-    rel: external ? "noopener noreferrer" : undefined,
-    as: as || (href ? "a" : "button"),
-    type: href ? undefined : "button",
-    "aria-disabled": disabled ? disabled : undefined,
-    disabled: disabled,
-    buttonSize: size,
-    appearance: appearanceCheck,
-    ref: innerRef,
-    onClick: onClick,
-    "data-qa-button": title || "",
-    "data-qa-button-isdisabled": disabled === true,
-    "aria-label": ariaLabel
-  }, qa, rest), children);
-};
-
-Button.displayName = "Button";
-var _default = Button;
-exports.default = _default;

package/commonjs/Button/styles.js

@@ -1,66 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _systemProps = require("../utils/system-props");
-
-var _mixins = require("../utils/mixins");
-
-var _styles = _interopRequireDefault(require("../Icon/styles"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var Container = _styledComponents.default.button.withConfig({
-  displayName: "styles__Container",
-  componentId: "sc-1juy94s-0"
-})(["display:inline-block;box-sizing:border-box;text-align:center;font-family:", ";border:1px solid ", ";border-radius:", ";border-style:", ";background:", ";color:", ";cursor:pointer;text-decoration:none;line-height:16px;white-space:nowrap;font-weight:", ";transition:all ", " linear;margin:0;padding:", ";font-size:", ";&:visited{color:", ";}&:hover{color:", ";background:", ";text-decoration:none;box-shadow:", ";}&:active{color:", ";background:", ";transform:translateY(1px);}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", "{vertical-align:text-bottom;}", " ", ""], function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.colors.button[props.appearance].border.base;
-}, function (props) {
-  return props.theme.radii[500];
-}, function (props) {
-  return props.appearance === "placeholder" ? "dashed" : "solid";
-}, function (props) {
-  return props.theme.colors.button[props.appearance].background.base;
-}, function (props) {
-  return props.theme.colors.button[props.appearance].text.base;
-}, function (props) {
-  return props.theme.fontWeights.bold;
-}, function (props) {
-  return props.theme.duration.fast;
-}, function (props) {
-  return props.buttonSize === "default" ? "" + props.theme.space[300] : "" + props.theme.space[350];
-}, function (props) {
-  return props.buttonSize === "default" ? props.theme.typography[200].fontSize : props.theme.typography[300].fontSize;
-}, function (props) {
-  return props.theme.colors.button[props.appearance].text.base;
-}, function (props) {
-  return props.theme.colors.button[props.appearance].text.hover;
-}, function (props) {
-  return props.theme.colors.button[props.appearance].background.hover;
-}, function (props) {
-  return props.appearance === "placeholder" ? props.theme.shadows.low : "none";
-}, function (props) {
-  return props.theme.colors.button[props.appearance].text.hover;
-}, function (props) {
-  return props.theme.colors.button[props.appearance].background.active;
-}, _mixins.focusRing, function (props) {
-  return props.active && (0, _styledComponents.css)(["color:", " !important;background:", " !important;"], props.theme.colors.button[props.appearance].text.hover, props.theme.colors.button[props.appearance].background.active);
-}, function (props) {
-  return props.disabled && _mixins.disabled;
-}, function (props) {
-  return props.appearance === "pill" && (0, _styledComponents.css)(["display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:", ";", ""], props.theme.mode === "dark" ? "screen" : "multiply", _mixins.pill);
-}, _styles.default, _systemProps.LAYOUT, _systemProps.COMMON);
-
-Container.displayName = "Button-Container";
-var _default = Container; //${props.theme.mode === "dark" ? "screen" : "multiply"}
-
-exports.default = _default;