@sproutsocial/racine 11.0.2 → 11.1.0

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

@@ -0,0 +1,38 @@
+// @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 { customSystemProps, type TypeCustomSystemProps } from "../custom";
+
+describe("custom system props", () => {
+  const Component = styled<TypeCustomSystemProps, TypeTheme, "div">("div")`
+    ${customSystemProps}
+  `;
+
+  test("cursor", () => {
+    const { container } = render(
+      <>
+        <Component cursor="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("whiteSpace", () => {
+    const { container } = render(
+      <>
+        <Component whiteSpace="nowrap" />
+        <Component
+          // $FlowExpectedError
+          whiteSpace="string"
+        />
+        <Component
+          // not sure why is this not erroring
+          whiteSpace={["string"]}
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,150 @@
+// @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 { flexboxSystemProps, type TypeFlexboxSystemProps } from "../flexbox";
+
+describe("flexbox system props", () => {
+  const Component = styled<TypeFlexboxSystemProps, TypeTheme, "div">("div")`
+    ${flexboxSystemProps}
+  `;
+
+  test("alignItems", () => {
+    const { container } = render(
+      <>
+        <Component alignItems="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("alignContent", () => {
+    const { container } = render(
+      <>
+        <Component alignContent="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("justifyItems", () => {
+    const { container } = render(
+      <>
+        <Component justifyItems="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("justifyContent", () => {
+    const { container } = render(
+      <>
+        <Component justifyContent="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("flexWrap", () => {
+    const { container } = render(
+      <>
+        <Component flexWrap="wrap" />
+        <Component
+          // $FlowExpectedError
+          flexWrap="string"
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("flexDirection", () => {
+    const { container } = render(
+      <>
+        <Component flexDirection="column" />
+        <Component
+          // $FlowExpectedError
+          flexDirection="string"
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("flex", () => {
+    const { container } = render(
+      <>
+        <Component flex="string" />
+        <Component flex={1} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("flexGrow", () => {
+    const { container } = render(
+      <>
+        <Component flexGrow={1} />
+        <Component
+          // $FlowExpectedError
+          flexGrow="string"
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("flexShrink", () => {
+    const { container } = render(
+      <>
+        <Component flexShrink={1} />
+        <Component
+          // $FlowExpectedError
+          flexShrink="string"
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("flexBasis", () => {
+    const { container } = render(
+      <>
+        <Component flexBasis="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("justifySelf", () => {
+    const { container } = render(
+      <>
+        <Component justifySelf="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("alignSelf", () => {
+    const { container } = render(
+      <>
+        <Component alignSelf="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("order", () => {
+    const { container } = render(
+      <>
+        <Component order={1} />
+        <Component
+          // $FlowExpectedError
+          order="string"
+        />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,123 @@
+// @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 { gridSystemProps, type TypeGridSystemProps } from "../grid";
+
+describe("grid system props", () => {
+  const Component = styled<TypeGridSystemProps, TypeTheme, "div">("div")`
+    ${gridSystemProps}
+  `;
+
+  test("gridArea", () => {
+    const { container } = render(
+      <>
+        <Component gridArea="string" />
+        <Component gridArea={1} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("gridAutoColumns", () => {
+    const { container } = render(
+      <>
+        <Component gridAutoColumns="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("gridAutoFlow", () => {
+    const { container } = render(
+      <>
+        <Component gridAutoFlow="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("gridAutoRows", () => {
+    const { container } = render(
+      <>
+        <Component gridAutoRows="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("gridColumn", () => {
+    const { container } = render(
+      <>
+        <Component gridColumn="string" />
+        <Component gridColumn={1} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("gridColumnGap", () => {
+    const { container } = render(
+      <>
+        <Component gridColumnGap="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("gridGap", () => {
+    const { container } = render(
+      <>
+        <Component gridGap="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("gridRow", () => {
+    const { container } = render(
+      <>
+        <Component gridRow="string" />
+        <Component gridRow={1} />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("gridRowGap", () => {
+    const { container } = render(
+      <>
+        <Component gridRowGap="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("gridTemplateAreas", () => {
+    const { container } = render(
+      <>
+        <Component gridTemplateAreas="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("gridTemplateColumns", () => {
+    const { container } = render(
+      <>
+        <Component gridTemplateColumns="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test("gridTemplateRows", () => {
+    const { container } = render(
+      <>
+        <Component gridTemplateRows="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,135 @@
+// @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("display", () => {
+    const { container } = render(
+      <>
+        <Component display="string" />
+      </>
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  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

@@ -0,0 +1,78 @@
+// @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

@@ -0,0 +1,30 @@
+// @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

@@ -0,0 +1,32 @@
+// @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/types.flow.js

@@ -0,0 +1,55 @@
+// @flow strict
+
+import type {
+  TypeResponsiveSystemProp,
+  TypeBaseSystemProp,
+  TypeResponsiveBaseSystemProp,
+} from "../types.flow.js";
+
+/**
+ * All system props should be responsive but accepting a tuple of length 1-5.
+ */
+type TypeTestResponsiveSystemProp = TypeResponsiveSystemProp<"a">;
+("a": TypeTestResponsiveSystemProp);
+(["a"]: TypeTestResponsiveSystemProp);
+(["a", "a"]: TypeTestResponsiveSystemProp);
+(["a", "a", "a"]: TypeTestResponsiveSystemProp);
+(["a", "a", "a", "a"]: TypeTestResponsiveSystemProp);
+(["a", "a", "a", "a", "a"]: TypeTestResponsiveSystemProp);
+// $FlowExpectedError
+(["a", "a", "a", "a", "a", "a"]: TypeTestResponsiveSystemProp);
+// $FlowExpectedError
+(["b"]: TypeTestResponsiveSystemProp);
+// $FlowExpectedError
+([null]: TypeTestResponsiveSystemProp);
+
+/**
+ * All system props should accept "base" values: boolean, null, and undefined.
+ */
+type TypeTestBaseSystemProp = TypeBaseSystemProp<"a">;
+("a": TypeTestBaseSystemProp);
+(true: TypeTestBaseSystemProp);
+(false: TypeTestBaseSystemProp);
+(null: TypeTestBaseSystemProp);
+(undefined: TypeTestBaseSystemProp);
+
+/**
+ * All system props should be responsive and allow "base" values.
+ */
+type TypeTestResponsiveBaseSystemProp = TypeResponsiveBaseSystemProp<"a" | "b">;
+("a": TypeTestResponsiveBaseSystemProp);
+("b": TypeTestResponsiveBaseSystemProp);
+(true: TypeTestResponsiveBaseSystemProp);
+(false: TypeTestResponsiveBaseSystemProp);
+(null: TypeTestResponsiveBaseSystemProp);
+(undefined: TypeTestResponsiveBaseSystemProp);
+(["a", null, undefined, false, "b"]: TypeTestResponsiveBaseSystemProp);
+(["a"]: TypeTestResponsiveBaseSystemProp);
+// $FlowExpectedError
+("c": TypeTestResponsiveBaseSystemProp);
+// $FlowExpectedError
+(1: TypeTestResponsiveBaseSystemProp);
+// $FlowExpectedError
+({}: TypeTestResponsiveBaseSystemProp);
+// $FlowExpectedError
+([]: TypeTestResponsiveBaseSystemProp);