@sproutsocial/racine 12.24.0 → 13.1.1

package/__flow__/systemProps/tests/layout.test.js

@@ -1,126 +0,0 @@
-// @flow strict-local
-import React from 'react';
-import styled from 'styled-components';
-import {render} from '../../utils/react-testing-library';
-import type {TypeTheme} from '../../types/theme.flow';
-import {layoutSystemProps, type TypeLayoutSystemProps} from '../layout';
-
-describe('layout system props', () => {
-  const Component = styled<TypeLayoutSystemProps, TypeTheme, 'div'>('div')`
-    ${layoutSystemProps}
-  `;
-
-  test('height', () => {
-    const {container} = render(
-      <>
-        <Component height="string" />
-        <Component height={1} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('maxHeight', () => {
-    const {container} = render(
-      <>
-        <Component maxHeight="string" />
-        <Component maxHeight={1} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('maxWidth', () => {
-    const {container} = render(
-      <>
-        <Component maxWidth="string" />
-        <Component maxWidth={1} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('minHeight', () => {
-    const {container} = render(
-      <>
-        <Component minHeight="string" />
-        <Component minHeight={1} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('minWidth', () => {
-    const {container} = render(
-      <>
-        <Component minWidth="string" />
-        <Component minWidth={1} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('overflow', () => {
-    const {container} = render(
-      <>
-        <Component overflow="string" />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('overflowX', () => {
-    const {container} = render(
-      <>
-        <Component overflowX="hidden" />
-        <Component
-          // $FlowExpectedError
-          overflowX="string"
-        />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('overflowY', () => {
-    const {container} = render(
-      <>
-        <Component overflowY="scroll" />
-        <Component
-          // $FlowExpectedError
-          overflowY="string"
-        />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('size', () => {
-    const {container} = render(
-      <>
-        <Component size="string" />
-        <Component size={1} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('verticalAlign', () => {
-    const {container} = render(
-      <>
-        <Component verticalAlign="string" />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('width', () => {
-    const {container} = render(
-      <>
-        <Component width="string" />
-        <Component width={1} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-});

package/__flow__/systemProps/tests/position.test.js

@@ -1,78 +0,0 @@
-// @flow strict-local
-import React from 'react';
-import styled from 'styled-components';
-import {render} from '../../utils/react-testing-library';
-import type {TypeTheme} from '../../types/theme.flow';
-import {positionSystemProps, type TypePositionSystemProps} from '../position';
-
-describe('position system props', () => {
-  const Component = styled<TypePositionSystemProps, TypeTheme, 'div'>('div')`
-    ${positionSystemProps}
-  `;
-
-  test('position', () => {
-    const {container} = render(
-      <>
-        <Component position="absolute" />
-        <Component
-          // $FlowExpectedError
-          position="string"
-        />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('bottom', () => {
-    const {container} = render(
-      <>
-        <Component bottom="string" />
-        <Component bottom={1} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('left', () => {
-    const {container} = render(
-      <>
-        <Component left="string" />
-        <Component left={1} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('right', () => {
-    const {container} = render(
-      <>
-        <Component right="string" />
-        <Component right={1} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('top', () => {
-    const {container} = render(
-      <>
-        <Component top="string" />
-        <Component top={1} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('zIndex', () => {
-    const {container} = render(
-      <>
-        <Component zIndex={1} />
-        <Component
-          // $FlowExpectedError
-          zIndex="string"
-        />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-});

package/__flow__/systemProps/tests/shadow.test.js

@@ -1,30 +0,0 @@
-// @flow strict-local
-import React from 'react';
-import styled from 'styled-components';
-import {render} from '../../utils/react-testing-library';
-import type {TypeTheme} from '../../types/theme.flow';
-import {shadowSystemProps, type TypeShadowSystemProps} from '../shadow';
-
-describe('shadow system props', () => {
-  const Component = styled<TypeShadowSystemProps, TypeTheme, 'div'>('div')`
-    ${shadowSystemProps}
-  `;
-
-  test('boxShadow', () => {
-    const {container} = render(
-      <>
-        <Component boxShadow="string" />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('textShadow', () => {
-    const {container} = render(
-      <>
-        <Component textShadow="string" />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-});

package/__flow__/systemProps/tests/space.test.js

@@ -1,32 +0,0 @@
-// @flow strict-local
-import React from 'react';
-import styled from 'styled-components';
-import {render} from '../../utils/react-testing-library';
-import type {TypeTheme} from '../../types/theme.flow';
-import {spaceSystemProps, type TypeSpaceSystemProps} from '../space';
-
-describe('space system props', () => {
-  const Component = styled<TypeSpaceSystemProps, TypeTheme, 'div'>('div')`
-    ${spaceSystemProps}
-  `;
-
-  test('margin', () => {
-    const {container} = render(
-      <>
-        <Component margin="string" />
-        <Component margin={1} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('padding', () => {
-    const {container} = render(
-      <>
-        <Component padding="string" />
-        <Component padding={1} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-});

package/__flow__/systemProps/tests/typography.test.js

@@ -1,93 +0,0 @@
-// @flow strict-local
-import React from 'react';
-import styled from 'styled-components';
-import {render} from '../../utils/react-testing-library';
-import type {TypeTheme} from '../../types/theme.flow';
-import {
-  typographySystemProps,
-  type TypeTypographySystemProps,
-} from '../typography';
-
-describe('typography system props', () => {
-  const Component = styled<TypeTypographySystemProps, TypeTheme, 'div'>('div')`
-    ${typographySystemProps}
-  `;
-
-  test('fontFamily', () => {
-    const {container} = render(
-      <>
-        <Component fontFamily="string" />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('fontSize', () => {
-    const {container} = render(
-      <>
-        <Component fontSize="string" />
-        <Component fontSize={100} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('fontStyle', () => {
-    const {container} = render(
-      <>
-        <Component fontStyle="string" />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('fontWeight', () => {
-    const {container} = render(
-      <>
-        <Component fontWeight="normal" />
-        <Component fontWeight="semibold" />
-        <Component fontWeight="bold" />
-        <Component fontWeight="extrabold" />
-        <Component fontWeight={100} />
-        <Component
-          // $FlowExpectedError
-          fontWeight="string"
-        />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('letterSpacing', () => {
-    const {container} = render(
-      <>
-        <Component letterSpacing="string" />
-        <Component letterSpacing={1} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('lineHeight', () => {
-    const {container} = render(
-      <>
-        <Component lineHeight="string" />
-        <Component lineHeight={1} />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test('textAlign', () => {
-    const {container} = render(
-      <>
-        <Component textAlign="center" />
-        <Component
-          // $FlowExpectedError
-          textAlign="string"
-        />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-});

package/__flow__/systemProps/tests/variant.test.js

@@ -1,25 +0,0 @@
-// @flow strict-local
-import React from 'react';
-import styled from 'styled-components';
-import {render} from '../../utils/react-testing-library';
-import type {TypeTheme} from '../../types/theme.flow';
-import {variantSystemProps, type TypeVariantSystemProps} from '../variant';
-
-describe('variant system props', () => {
-  const Component = styled<TypeVariantSystemProps, TypeTheme, 'div'>('div')`
-    ${variantSystemProps}
-  `;
-
-  test('typeScale', () => {
-    const {container} = render(
-      <>
-        <Component typeScale="100" />
-        <Component
-          // $FlowExpectedError
-          typeScale={100}
-        />
-      </>
-    );
-    expect(container).toMatchSnapshot();
-  });
-});

package/__flow__/themes/extendedThemes/README.md

@@ -1,6 +0,0 @@
-## Extended Theme Directory
-
-This directory serves as a shared environment for all extended themes. Each unique theme should have its own folder and theme.js file.
-`src/themes/extendedThemes/customTheme/theme.js`
-
-Check out our documentation for [How to extend the theme](https://seeds.sproutsocial.com/components/theme#extending-the-theme) on Seeds.

package/__flow__/themes/utils/_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;
-}

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

@@ -1,31 +0,0 @@
-import {normalizeResponsiveProp} from './index';
-
-describe('normalizeResponsiveProp', () => {
-  it('should handle single, literal values', () => {
-    expect(normalizeResponsiveProp(0)).toMatchObject([0, 0, 0, 0, 0]);
-  });
-
-  it('should handle arrays with 1 value', () => {
-    expect(normalizeResponsiveProp([0])).toMatchObject([0, 0, 0, 0, 0]);
-  });
-
-  it('should handle arrays with 2 values', () => {
-    expect(normalizeResponsiveProp([0, 1])).toMatchObject([0, 1, 1, 1, 1]);
-  });
-
-  it('should handle arrays with 3 values', () => {
-    expect(normalizeResponsiveProp([0, 1, 2])).toMatchObject([0, 1, 2, 2, 2]);
-  });
-
-  it('should handle arrays with 4 values', () => {
-    expect(normalizeResponsiveProp([0, 1, 2, 3])).toMatchObject([
-      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,
-    ]);
-  });
-});

package/__flow__/writing-good-stories.stories.mdx

@@ -1,3 +0,0 @@
-<Meta title="Welcome/Writing good stories" />
-
-# Coming soon...