@sproutsocial/racine 11.2.4-linkupdate.0 → 11.2.5-sproutTheme-beta.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 11.2.5
+
+### Patch Changes
+
+- a73cdfb: remove weird characters from props descriptions
+
 ## 11.2.4
 
 ### Patch Changes

package/__flow__/Button/index.stories.js

@@ -3,6 +3,11 @@ import { boolean, text, number } from "@storybook/addon-knobs";
 import Button from "./index";
 import Icon from "../Icon";
 import Box from "../Box";
+import ThemeProvider from "../ThemeProvider";
+import {
+  sproutLightTheme,
+  sproutDarkTheme,
+} from "../themes/extendedThemes/sproutTheme";
 
 export default {
   title: "Button",
@@ -22,12 +27,22 @@ defaultStory.story = {
 };
 
 export const primary = () => (
-  <Button
-    appearance={text("appearance", "primary")}
-    onClick={() => alert("Testing...")}
-  >
-    Primary Button
-  </Button>
+  <>
+    <Button
+      appearance={text("appearance", "primary")}
+      onClick={() => alert("Testing...")}
+    >
+      Primary Button
+    </Button>
+    <ThemeProvider theme={(theme) => sproutLightTheme(theme)}>
+      <Button
+        appearance={text("appearance", "primary")}
+        onClick={() => alert("Testing...")}
+      >
+        Primary Button
+      </Button>
+    </ThemeProvider>
+  </>
 );
 
 primary.story = {

package/__flow__/ThemeProvider/index.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { ThemeProvider as BaseThemeProvider } from "styled-components";
 import theme from "../themes/light/theme";
 
-import typeof { default as TypeTheme } from "../themes/light/theme";
+import type { TypeTheme } from "../types/theme.flow";
 
 type TypeProps = $ReadOnly<{|
   theme?: TypeTheme,

package/__flow__/index.js

@@ -6,6 +6,10 @@ export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
 export { default as theme } from "./themes/light/theme";
 export { default as darkTheme } from "./themes/dark/theme";
+export {
+  sproutLightTheme,
+  sproutDarkTheme,
+} from "./themes/extendedThemes/sproutTheme";
 export { default as Icon } from "./Icon";
 // DEPRECATED: Alert has been renamed to Banner
 export { default as Alert } from "./Banner";

package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -0,0 +1,43 @@
+// @flow strict-local
+import clone from "just-clone";
+import type { TypeTheme } from "../../../../types/theme.flow.js";
+
+const darkTheme = (theme: TypeTheme) => {
+  const sproutDarkTheme = clone(theme);
+
+  sproutDarkTheme.colors = {
+    ...sproutDarkTheme.colors,
+    navigation: {
+      main: {
+        background: {
+          base: theme.colors.neutral[1000],
+          gradient: theme.colors.neutral[1100],
+        },
+      },
+      secondary: {
+        background: {
+          base: theme.colors.neutral[900],
+        },
+      },
+      text: {
+        base: theme.colors.neutral[0],
+        hover: theme.colors.neutral[0],
+      },
+      icon: {
+        base: theme.colors.neutral[0],
+        hover: theme.colors.neutral[0],
+      },
+      item: {
+        background: {
+          base: theme.colors.neutral[1000],
+          hover: theme.colors.neutral[1100],
+          active: theme.colors.neutral[700],
+        },
+      },
+    },
+  };
+
+  return sproutDarkTheme;
+};
+
+export default darkTheme;

package/__flow__/themes/extendedThemes/sproutTheme/index.js

@@ -0,0 +1,2 @@
+export { default as sproutLightTheme } from "./light/theme";
+export { default as sproutDarkTheme } from "./dark/theme";

package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js

@@ -0,0 +1,53 @@
+// @flow strict-local
+import clone from "just-clone";
+import type { TypeTheme } from "../../../../types/theme.flow.js";
+
+const lightTheme = (theme: TypeTheme) => {
+  const sproutLightTheme = clone(theme);
+  // copy theme that's passed in
+  // get all non color theme values
+  // get light theme changes
+
+  sproutLightTheme.colors = {
+    ...sproutLightTheme.colors,
+    navigation: {
+      main: {
+        background: {
+          base: theme.colors.neutral[900],
+          overflowGradient: theme.colors.neutral[1000],
+        },
+      },
+      secondary: {
+        background: {
+          base: theme.colors.neutral[800],
+        },
+      },
+      text: {
+        base: theme.colors.neutral[0],
+        hover: theme.colors.neutral[0],
+      },
+      icon: {
+        base: theme.colors.neutral[0],
+        hover: theme.colors.neutral[0],
+      },
+      listItem: {
+        background: {
+          base: theme.colors.neutral[800],
+          hover: theme.colors.neutral[1000],
+          selected: theme.colors.neutral[700],
+        },
+      },
+    },
+    icon: {
+      sentiment: {
+        positive_sentiment: theme.colors.blue[500],
+        negative_sentiment: theme.colors.red[500],
+        neutral_sentiment: theme.colors.neutral[300],
+      },
+    },
+  };
+
+  return sproutLightTheme;
+};
+
+export default lightTheme;

package/__flow__/themes/extendedThemes/sproutTheme/otherVals/theme.js

@@ -0,0 +1,6 @@
+// @flow strict-local
+import clone from 'just-clone';
+
+const nonColorThemeValues = (theme) => {
+  const sproutTheme = clone(theme);
+}

package/__flow__/types/theme.flow.js

@@ -14,6 +14,7 @@ import {
 import type { TypeColors } from "./theme.colors.flow.js";
 import type { TypeFontFamilyString } from "../themes/light/theme";
 
+export type TypeThemeMode = "light" | "dark";
 export type TypeBreakpoint = typeof breakpoints;
 export type TypeTypography = typeof typography;
 export type TypeFontWeight = typeof fontWeights;
@@ -28,6 +29,7 @@ export type TypeEasing = typeof easing;
 export type TypeDuration = typeof duration;
 
 export type TypeTheme = {
+  mode: TypeThemeMode,
   breakpoints: TypeBreakpoint,
   colors: TypeColor,
   typography: TypeTypography,

package/commonjs/index.js

@@ -61,6 +61,8 @@ var _exportNames = {
   Menu: true,
   Listbox: true,
   OverflowList: true,
+  sproutLightTheme: true,
+  sproutDarkTheme: true,
   toast: true,
   MenuButton: true,
   MenuButtonContext: true,
@@ -70,7 +72,7 @@ var _exportNames = {
   DateRangePicker: true,
   VisuallyHidden: true
 };
-exports.VisuallyHidden = exports.DateRangePicker = exports.SingleDatePicker = exports.ListboxButton = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.toast = exports.OverflowList = exports.Listbox = exports.Menu = exports.ToastContainer = exports.Skeleton = exports.Breadcrumb = exports.Avatar = exports.Stack = exports.Message = exports.Fieldset = exports.FormField = exports.EmptyState = exports.SegmentedControl = exports.Collapsible = exports.Numeral = exports.LoaderButton = exports.Drawer = exports.Tooltip = exports.ThemeProvider = exports.Popout = exports.Modal = exports.Tabs = exports.TokenInput = exports.Token = exports.Switch = exports.Link = exports.Button = exports.Select = exports.Input = exports.Label = exports.Box = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.ChartLegend = exports.KeyboardKey = exports.Image = exports.Text = exports.Loader = exports.ToggleHint = exports.Textarea = exports.Radio = exports.Checkbox = exports.CharacterCounter = exports.Card = exports.Indicator = exports.Badge = exports.Banner = exports.Alert = exports.Icon = exports.darkTheme = exports.theme = exports.useTextContent = exports.useMultiselect = exports.useSelect = exports.disabled = exports.focusRing = exports.visuallyHidden = void 0;
+exports.VisuallyHidden = exports.DateRangePicker = exports.SingleDatePicker = exports.ListboxButton = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.toast = exports.sproutDarkTheme = exports.sproutLightTheme = exports.OverflowList = exports.Listbox = exports.Menu = exports.ToastContainer = exports.Skeleton = exports.Breadcrumb = exports.Avatar = exports.Stack = exports.Message = exports.Fieldset = exports.FormField = exports.EmptyState = exports.SegmentedControl = exports.Collapsible = exports.Numeral = exports.LoaderButton = exports.Drawer = exports.Tooltip = exports.ThemeProvider = exports.Popout = exports.Modal = exports.Tabs = exports.TokenInput = exports.Token = exports.Switch = exports.Link = exports.Button = exports.Select = exports.Input = exports.Label = exports.Box = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.ChartLegend = exports.KeyboardKey = exports.Image = exports.Text = exports.Loader = exports.ToggleHint = exports.Textarea = exports.Radio = exports.Checkbox = exports.CharacterCounter = exports.Card = exports.Indicator = exports.Badge = exports.Banner = exports.Alert = exports.Icon = exports.darkTheme = exports.theme = exports.useTextContent = exports.useMultiselect = exports.useSelect = exports.disabled = exports.focusRing = exports.visuallyHidden = void 0;
 
 var _systemProps = require("./systemProps");
 
@@ -101,6 +103,11 @@ var _theme2 = _interopRequireDefault(require("./themes/dark/theme"));
 
 exports.darkTheme = _theme2.default;
 
+var _sproutTheme = require("./themes/extendedThemes/sproutTheme");
+
+exports.sproutLightTheme = _sproutTheme.sproutLightTheme;
+exports.sproutDarkTheme = _sproutTheme.sproutDarkTheme;
+
 var _Icon = _interopRequireDefault(require("./Icon"));
 
 exports.Icon = _Icon.default;

package/commonjs/themes/extendedThemes/sproutTheme/dark/colors.js

@@ -0,0 +1 @@
+"use strict";

package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -0,0 +1,48 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _justClone = _interopRequireDefault(require("just-clone"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+var darkTheme = function darkTheme(theme) {
+  var sproutDarkTheme = (0, _justClone.default)(theme);
+  sproutDarkTheme.colors = _extends({}, sproutDarkTheme.colors, {
+    navigation: {
+      main: {
+        background: {
+          base: theme.colors.neutral[1000],
+          gradient: theme.colors.neutral[1100]
+        }
+      },
+      secondary: {
+        background: {
+          base: theme.colors.neutral[900]
+        }
+      },
+      text: {
+        base: theme.colors.neutral[0],
+        hover: theme.colors.neutral[0]
+      },
+      icon: {
+        base: theme.colors.neutral[0],
+        hover: theme.colors.neutral[0]
+      },
+      item: {
+        background: {
+          base: theme.colors.neutral[1000],
+          hover: theme.colors.neutral[1100],
+          active: theme.colors.neutral[700]
+        }
+      }
+    }
+  });
+  return sproutDarkTheme;
+};
+
+var _default = darkTheme;
+exports.default = _default;

package/commonjs/themes/extendedThemes/sproutTheme/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports.sproutDarkTheme = exports.sproutLightTheme = void 0;
+
+var _theme = _interopRequireDefault(require("./light/theme"));
+
+exports.sproutLightTheme = _theme.default;
+
+var _theme2 = _interopRequireDefault(require("./dark/theme"));
+
+exports.sproutDarkTheme = _theme2.default;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/commonjs/themes/extendedThemes/sproutTheme/light/colors.js

@@ -0,0 +1 @@
+"use strict";

package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js

@@ -0,0 +1,58 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _justClone = _interopRequireDefault(require("just-clone"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+var lightTheme = function lightTheme(theme) {
+  var sproutLightTheme = (0, _justClone.default)(theme); // copy theme that's passed in
+  // get all non color theme values
+  // get light theme changes
+
+  sproutLightTheme.colors = _extends({}, sproutLightTheme.colors, {
+    navigation: {
+      main: {
+        background: {
+          base: theme.colors.neutral[900],
+          overflowGradient: theme.colors.neutral[1000]
+        }
+      },
+      secondary: {
+        background: {
+          base: theme.colors.neutral[800]
+        }
+      },
+      text: {
+        base: theme.colors.neutral[0],
+        hover: theme.colors.neutral[0]
+      },
+      icon: {
+        base: theme.colors.neutral[0],
+        hover: theme.colors.neutral[0]
+      },
+      listItem: {
+        background: {
+          base: theme.colors.neutral[800],
+          hover: theme.colors.neutral[1000],
+          selected: theme.colors.neutral[700]
+        }
+      }
+    },
+    icon: {
+      sentiment: {
+        positive_sentiment: theme.colors.blue[500],
+        negative_sentiment: theme.colors.red[500],
+        neutral_sentiment: theme.colors.neutral[300]
+      }
+    }
+  });
+  return sproutLightTheme;
+};
+
+var _default = lightTheme;
+exports.default = _default;

package/commonjs/themes/extendedThemes/sproutTheme/otherVals/theme.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _justClone = _interopRequireDefault(require("just-clone"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var nonColorThemeValues = function nonColorThemeValues(theme) {
+  var sproutTheme = (0, _justClone.default)(theme);
+};

package/lib/index.js

@@ -3,6 +3,7 @@ export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
 export { default as theme } from "./themes/light/theme";
 export { default as darkTheme } from "./themes/dark/theme";
+export { sproutLightTheme, sproutDarkTheme } from "./themes/extendedThemes/sproutTheme";
 export { default as Icon } from "./Icon"; // DEPRECATED: Alert has been renamed to Banner
 
 export { default as Alert } from "./Banner";

package/lib/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -0,0 +1,40 @@
+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); }
+
+import clone from "just-clone";
+
+var darkTheme = function darkTheme(theme) {
+  var sproutDarkTheme = clone(theme);
+  sproutDarkTheme.colors = _extends({}, sproutDarkTheme.colors, {
+    navigation: {
+      main: {
+        background: {
+          base: theme.colors.neutral[1000],
+          gradient: theme.colors.neutral[1100]
+        }
+      },
+      secondary: {
+        background: {
+          base: theme.colors.neutral[900]
+        }
+      },
+      text: {
+        base: theme.colors.neutral[0],
+        hover: theme.colors.neutral[0]
+      },
+      icon: {
+        base: theme.colors.neutral[0],
+        hover: theme.colors.neutral[0]
+      },
+      item: {
+        background: {
+          base: theme.colors.neutral[1000],
+          hover: theme.colors.neutral[1100],
+          active: theme.colors.neutral[700]
+        }
+      }
+    }
+  });
+  return sproutDarkTheme;
+};
+
+export default darkTheme;

package/lib/themes/extendedThemes/sproutTheme/index.js

@@ -0,0 +1,2 @@
+export { default as sproutLightTheme } from "./light/theme";
+export { default as sproutDarkTheme } from "./dark/theme";

package/lib/themes/extendedThemes/sproutTheme/light/theme.js

@@ -0,0 +1,50 @@
+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); }
+
+import clone from "just-clone";
+
+var lightTheme = function lightTheme(theme) {
+  var sproutLightTheme = clone(theme); // copy theme that's passed in
+  // get all non color theme values
+  // get light theme changes
+
+  sproutLightTheme.colors = _extends({}, sproutLightTheme.colors, {
+    navigation: {
+      main: {
+        background: {
+          base: theme.colors.neutral[900],
+          overflowGradient: theme.colors.neutral[1000]
+        }
+      },
+      secondary: {
+        background: {
+          base: theme.colors.neutral[800]
+        }
+      },
+      text: {
+        base: theme.colors.neutral[0],
+        hover: theme.colors.neutral[0]
+      },
+      icon: {
+        base: theme.colors.neutral[0],
+        hover: theme.colors.neutral[0]
+      },
+      listItem: {
+        background: {
+          base: theme.colors.neutral[800],
+          hover: theme.colors.neutral[1000],
+          selected: theme.colors.neutral[700]
+        }
+      }
+    },
+    icon: {
+      sentiment: {
+        positive_sentiment: theme.colors.blue[500],
+        negative_sentiment: theme.colors.red[500],
+        neutral_sentiment: theme.colors.neutral[300]
+      }
+    }
+  });
+  return sproutLightTheme;
+};
+
+export default lightTheme;

package/lib/themes/extendedThemes/sproutTheme/otherVals/theme.js

@@ -0,0 +1,5 @@
+import clone from 'just-clone';
+
+var nonColorThemeValues = function nonColorThemeValues(theme) {
+  var sproutTheme = clone(theme);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.2.4-linkupdate.0",
+  "version": "11.2.5-sproutTheme-beta.1",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -66,6 +66,7 @@
   "dependencies": {
     "@styled-system/theme-get": "^5.1.2",
     "classnames": "^2.2.6",
+    "just-clone": "^5.0.1",
     "lodash.curry": "^4.1.1",
     "lodash.uniqueid": "^4.0.1",
     "lru-memoize": "^1.1.0",

package/bin/buildNpm.js

@@ -1,58 +0,0 @@
-/**
- * This file handles the generation of an .npmrc with Jfrog credentials during the CI process.
- * It replicates the local configuration requirements of a developer running `yarn` on their machine
- * If run locally please do not commit your auth credentials
- */
-const fs = require("fs");
-const https = require("https");
-const { exit } = require("process");
-
-const { ARTIFACTORY_KEY, CI } = process.env;
-
-// Check if we're in CI context, otherwise skip the process
-if (!CI) {
-  exit();
-}
-
-const options = {
-  hostname: "sproutsocial.jfrog.io",
-  path: "/artifactory/api/npm/auth",
-  method: "GET",
-  headers: {
-    "X-JFrog-Art-Api": ARTIFACTORY_KEY,
-  },
-};
-
-const req = https.request(options, (res) => {
-  console.log(`statusCode: ${res.statusCode}`);
-
-  // Call our auth endpoint with environment credentials
-  res.on("data", (data) => {
-    // Writes out an .npmrc file with the response
-    fs.writeFile(".npmrc", data, (err) => {
-      if (err) console.log(err);
-      else {
-        console.log(".npmrc generated successfully!");
-      }
-    });
-
-    // Once the file is created we append the registry info
-    fs.appendFile(
-      ".npmrc",
-      "registry=https://sproutsocial.jfrog.io/artifactory/api/npm/npm_virtual",
-      function (err) {
-        if (err) throw err;
-        console.log("Registry Config Added!");
-      }
-    );
-
-    // Finally, we set permissions for the file so that netlify recognizes it
-    fs.chmodSync(".npmrc", "0600");
-  });
-});
-
-req.on("error", (error) => {
-  console.error(error);
-});
-
-req.end();