@sproutsocial/racine 21.0.2 → 22.0.0

package/lib/utils/react-testing-library.js

@@ -10,7 +10,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { act, cleanup, createEvent, fireEvent, queries, render, screen as defaultScreen, waitFor, waitForElementToBeRemoved, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import ThemeProvider from "../ThemeProvider";
-import { a11yCheck } from "./a11yTest";
+import { a11yCheck } from "@sproutsocial/seeds-react-utilities";
 import { dataQaLabelQueries } from "./dataQaLabelQueries";
 var sproutQueries = _objectSpread(_objectSpread({}, queries), dataQaLabelQueries);
 

package/lib/utils/responsiveProps/index.js

@@ -5,7 +5,7 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-import theme from "../../themes/light/theme";
+import { theme } from "@sproutsocial/seeds-react-theme";
 var breakpoints = theme.breakpoints;
 var LENGTH = breakpoints.length + 1;
 export var normalizeResponsiveProp = function normalizeResponsiveProp(value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "21.0.2",
+  "version": "22.0.0",
   "license": "MIT",
   "engines": {
     "node": ">=18"
@@ -100,6 +100,13 @@
     "@sproutsocial/seeds-space": "*",
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-typography": "*",
+    "@sproutsocial/seeds-react-box": "*",
+    "@sproutsocial/seeds-react-hooks": "*",
+    "@sproutsocial/seeds-react-mixins": "*",
+    "@sproutsocial/seeds-react-system-props": "*",
+    "@sproutsocial/seeds-react-theme-provider": "*",
+    "@sproutsocial/seeds-react-theme": "*",
+    "@sproutsocial/seeds-react-utilities": "*",
     "@storybook/addon-a11y": "^7.0.0",
     "@storybook/addon-actions": "^7.0.0",
     "@storybook/addon-essentials": "^7.0.0",
@@ -155,6 +162,7 @@
     "jsdom": "^22.1.0",
     "json-to-scss": "^1.6.2",
     "moment": "^2.29.4",
+    "mkdirp": "1.0.4",
     "npm-run-all": "^4.1.2",
     "outdent": "^0.7.0",
     "pify": "^4.0.1",
@@ -186,6 +194,13 @@
     "@sproutsocial/seeds-typography": ">=2.0.0",
     "@sproutsocial/seeds-partner-logos": ">=1.5.0",
     "@sproutsocial/seeds-illustrations": ">=1.3.0",
+    "@sproutsocial/seeds-react-box": "^1.0.0",
+    "@sproutsocial/seeds-react-hooks": "^2.0.0",
+    "@sproutsocial/seeds-react-mixins": "^2.0.0",
+    "@sproutsocial/seeds-react-system-props": "^2.0.0",
+    "@sproutsocial/seeds-react-theme-provider": "^1.0.0",
+    "@sproutsocial/seeds-react-theme": "^1.0.0",
+    "@sproutsocial/seeds-react-utilities": "^2.0.0",
     "moment": "^2.29.4",
     "prop-types": "^15.0.0",
     "react": "^16.8.0 || ^17.0.0",

package/dist/themes/dark/_themed.scss

@@ -1,119 +0,0 @@
-// Inspired by https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
-// This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
-
-// SET-UP
-// theme.scss is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
-// _themed.scss will be copied to each theme folder in /dist, where the theme.scss file for that theme will be.
-@import "./theme.scss";
-
-// In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
-// so we need to map-get "default" to access it.
-$theme: map-get($theme, "default");
-
-// FUNCTIONS
-// This function will allow you to get any value from the theme.
-// @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
-@function t($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, $keys);
-}
-
-// The rest of the functions are convenience methods to get theme values for subsets of the theme.
-// @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
-@function colors($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("colors", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
-@function typography($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("typography", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
-@function fontWeights($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("fontWeights", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
-@function space($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("space", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
-@function radii($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("radii", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
-@function borders($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("borders", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
-@function borderWidths($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("borderWidths", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
-@function shadows($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("shadows", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
-@function easing($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("easing", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
-@function duration($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("duration", $keys));
-}
-
-// UTILITIES
-// Helper functions that power the functions above. Not relevant to the theme.
-// If you import this file with @use, these functions will be excluded because they are private.
-
-// Via https://stackoverflow.com/a/42295154
-// Used to split period-separated object keys, e.g. "colors.text.body" => ["colors", "text", "body"]
-// Only works with a single-character separator.
-@function _str-split($string, $separator) {
-  // empty array/list
-  $split-arr: ();
-  // first index of separator in string
-  $index: str-index($string, $separator);
-  // loop through string
-  @while $index != null {
-    // get the substring from the first character to the separator
-    $item: str-slice($string, 1, $index - 1);
-    // push item to array
-    $split-arr: append($split-arr, $item);
-    // remove item and separator from string
-    $string: str-slice($string, $index + 1);
-    // find new index of separator
-    $index: str-index($string, $separator);
-  }
-  // add the remaining string to list (the last item)
-  $split-arr: append($split-arr, $string);
-
-  @return $split-arr;
-}
-
-// Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
-// Iterates over a list of keys to read multi-level maps.
-// e.g., _map-deep-get((colors: (text: (body: "#364141"))), ["colors", "text", "body"]) => "#364141"
-@function _map-deep-get($map, $keys) {
-  @each $key in $keys {
-    $map: map-get($map, $key);
-  }
-  @return $map;
-}