Merge pull request #223 from cratebind/fix/pseudobox-cleanup

fix: remove extra uses of pseudobox, remove pseudobox examples, remov…
cratebind · Jan 4, 2022 · 5fcf517 · 5fcf517 · vercel · Jan 4, 2022
2 parents df9fee6 + e43d4c3
commit 5fcf517
Show file tree

Hide file tree

Showing 17 changed files with 164 additions and 110 deletions.
diff --git a/docs/components/theme-builder/LayoutEditor.tsx b/docs/components/theme-builder/LayoutEditor.tsx
@@ -79,7 +79,6 @@ export default function LayoutEditor({
   handleChange,
   values,
 }: LayoutEditorProps) {
-  // console.log({ values });
   const outerEditorSize = 300;
   const innerEditorSize = 185;
 

diff --git a/docs/components/theme-builder/examples.tsx b/docs/components/theme-builder/examples.tsx
@@ -20,6 +20,7 @@ import {
   TabList,
   TabPanel,
   TabPanels,
+  Box,
 } from 'minerva-ui';
 
 export const ModalExample = props => {
@@ -175,7 +176,7 @@ export const FormExamples = () => {
 
   return (
     <Flex>
-      <PseudoBox as="form" bg="#fff" width="100%" maxWidth="20rem">
+      <Box as="form" bg="#fff" width="100%" maxWidth="20rem">
         <InputField label="Username" errorText={usernameError}>
           <Input
             placeholder="Username"
@@ -212,7 +213,7 @@ export const FormExamples = () => {
           <Button onClick={e => e.preventDefault()}>Sign In</Button>
           <Link href="#">Forgot Password?</Link>
         </Flex>
-      </PseudoBox>
+      </Box>
     </Flex>
   );
 };

diff --git a/docs/package.json b/docs/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "global": "^4.4.0",
     "markdown-to-jsx": "^7.0.0",
-    "minerva-ui": "^7.2.0",
+    "minerva-ui": "^7.2.1",
     "next": "^10.0.0",
     "nextra": "^0.2.4",
     "nextra-theme-docs": "^0.1.5",

diff --git a/docs/pages/components/Box.mdx b/docs/pages/components/Box.mdx
@@ -29,7 +29,7 @@ Pseudo selectors (prefaced by `_`) can also be used to style the component.
   borderWidth="2px"
   rounded="md"
   outline="none"
-  _focus={{ background: '#fff', borderColor: 'purple' }}
+  _focus={{ bg: 'purple.300', border: '1px solid purple' }}
 />
 ```
 

diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -4983,10 +4983,10 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-minerva-ui@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/minerva-ui/-/minerva-ui-7.2.0.tgz#8388fc05c29d1869d28114081856014442ac42d9"
-  integrity sha512-+tGs5w4UeGFkLobvJQEbaKawH2S8fEegXiLRDRoGfJ3gAxBVZg4IQH5Z1DyrFP0LqMQ9Pdk2tNZqz2C4vzS98A==
+minerva-ui@^7.2.1:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/minerva-ui/-/minerva-ui-7.2.1.tgz#af8d0e9d8c2eb0d68b4996a5195d5057c4bde32e"
+  integrity sha512-aNhC6Uhfc7fAfjb44vbjwj8lg4dh/aiEk/CiCRuzalobfRtewLjN+D7d4Ya6nPPojU/LGkQq9uXX/sypM+tQ6A==
   dependencies:
     "@mdx-js/react" "^1.5.1"
     "@reach/accordion" "^0.11.2"

diff --git a/src/Box.stories.tsx b/src/Box.stories.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Box, BoxProps, Stack } from '.';
+
+const meta: Meta = {
+  title: 'Box',
+  component: Box,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<BoxProps> = (args: Omit<BoxProps, 'as'>) => (
+  <Box {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Basic Box',
+};
+
+export const PseudoProps = () => (
+  <Stack horizontal>
+    <Box _hover={{ bg: 'red.500' }}>Hover Box</Box>
+    <Box as="button" _focus={{ bg: 'red.500' }}>
+      Focus Button
+    </Box>
+  </Stack>
+);
+
+// export const Variants = () => (
+//   <Stack horizontal>
+//     <Button variant="primary">Primary Button</Button>
+//     <Button variant="secondary">Secondary Button</Button>
+//     <Button variant="tertiary">Tertiary Button</Button>
+//   </Stack>
+// );
+
+// export const LoadingButton = Template.bind({});
+// LoadingButton.args = {
+//   children: 'Basic Button',
+//   isLoading: true,
+// };
+
+// export const DisabledButton = Template.bind({});
+// DisabledButton.args = {
+//   children: 'Basic Button',
+//   disabled: true,
+// };
diff --git a/src/Button/index.tsx b/src/Button/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import warning from 'tiny-warning';
 import Spinner from '../Spinner';
-import PseudoBox, { PseudoBoxProps } from '../PseudoBox';
+import { PseudoBoxProps } from '../PseudoBox';
 import { useComponentStyles, useTheme } from '../theme';
-import { MinervaProps } from '../layout';
+import { Box, MinervaProps } from '../layout';
 import { forwardRefWithAs } from '../type-utilities';
 
 export const buttonVariants = {
@@ -110,7 +110,7 @@ export const Button = forwardRefWithAs<ButtonProps, 'button'>(function Button(
   const componentStyles = useComponentStyles('Button');
 
   return (
-    <PseudoBox
+    <Box
       ref={forwardedRef}
       as={Comp}
       disabled={disabled || isLoading}
@@ -143,7 +143,7 @@ export const Button = forwardRefWithAs<ButtonProps, 'button'>(function Button(
       {...props}
     >
       {isLoading ? <Spinner /> : children}
-    </PseudoBox>
+    </Box>
   );
 });
 

diff --git a/src/Checkbox/index.tsx b/src/Checkbox/index.tsx
@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 import { CustomCheckboxContainer, CustomCheckboxInput } from '@reach/checkbox';
 import { MinervaProps, Box } from '../layout';
-import PseudoBox from '../PseudoBox';
 import { useComponentStyles } from '../theme';
 
 type BaseProps = MinervaProps & React.InputHTMLAttributes<HTMLInputElement>;
@@ -37,7 +36,7 @@ export const Checkbox = forwardRef(function Checkbox(
         disabled={disabled}
         defaultChecked={defaultChecked}
       >
-        <PseudoBox
+        <Box
           as={CustomCheckboxInput}
           backgroundImage={`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23000000' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='${checkColor.replace(
             '#',

diff --git a/src/Input/index.tsx b/src/Input/index.tsx
@@ -2,8 +2,7 @@ import React from 'react';
 import warning from 'tiny-warning';
 // import { forwardRefWithAs } from '../type-utilities';
 // import PropTypes from 'prop-types';
-import { MinervaProps } from '../layout';
-import PseudoBox from '../PseudoBox';
+import { Box, MinervaProps } from '../layout';
 import { useComponentStyles } from '../theme';
 
 type BaseProps = React.InputHTMLAttributes<HTMLInputElement> & MinervaProps;
@@ -28,7 +27,7 @@ export const Input = React.forwardRef(function Input(
   );
 
   return (
-    <PseudoBox
+    <Box
       as="input"
       ref={ref}
       {...componentStyles}

diff --git a/src/Link/index.tsx b/src/Link/index.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 // import styled from 'styled-components';
 // import PropTypes from 'prop-types';
 // import { systemProps } from '../layout';
-import PseudoBox from '../PseudoBox';
+// import PseudoBox from '../PseudoBox';
 import { useComponentStyles } from '../theme';
-import { MinervaProps } from '../layout';
+import { Box, MinervaProps } from '../layout';
 // import { forwardRefWithAs } from '../type-utilities';
 
 type BaseProps = MinervaProps & React.LinkHTMLAttributes<HTMLAnchorElement>;
@@ -31,7 +31,7 @@ export const Link = React.forwardRef(function Link(
     : null;
 
   return (
-    <PseudoBox
+    <Box
       as="a"
       href={href}
       ref={ref}
@@ -41,7 +41,7 @@ export const Link = React.forwardRef(function Link(
       {...props}
     >
       {children}
-    </PseudoBox>
+    </Box>
   );
 });
 

diff --git a/src/Menu/index.tsx b/src/Menu/index.tsx
@@ -17,7 +17,6 @@ import { Box, MinervaProps } from '../layout';
 // import { useTheme } from '../theme';
 
 // import '@reach/menu-button/styles.css';
-import PseudoBox from '../PseudoBox';
 
 export type MenuContainerProps = MenuProps;
 
@@ -36,7 +35,7 @@ export interface MenuListProps extends MinervaProps {
 }
 
 export const OverlayBox = props => (
-  <PseudoBox
+  <Box
     py={1}
     mt="8px"
     bg="white"

diff --git a/src/Radio/index.tsx b/src/Radio/index.tsx
@@ -4,7 +4,6 @@ import React, { useContext } from 'react';
 import { MinervaProps } from '../layout';
 import { Box } from '../layout';
 import { useComponentStyles } from '../theme';
-import { PseudoBox } from '..';
 
 export interface RadioGroupProps {
   children?: React.ReactNode;
@@ -59,7 +58,7 @@ export const Radio = React.forwardRef(function Radio(
 
   return (
     <Box as="label" display="flex" alignItems="center">
-      <PseudoBox
+      <Box
         ref={ref}
         as="input"
         type="radio"

diff --git a/src/Tabs/index.tsx b/src/Tabs/index.tsx
@@ -11,7 +11,7 @@ import {
 
 import { MinervaProps, Box, Flex } from '../layout';
 import { useComponentStyles } from '../theme';
-import PseudoBox, { PseudoBoxProps } from '../PseudoBox';
+import { PseudoBoxProps } from '../PseudoBox';
 import { forwardRefWithAs } from '../type-utilities';
 
 // export interface TabsProps extends MinervaProps, PseudoBoxProps, ReachTabsProps { }
@@ -49,7 +49,7 @@ export const Tab = forwardRefWithAs<TabsProps, 'div'>(function Tab(
 ) {
   const componentStyles = useComponentStyles('Tab');
   return (
-    <PseudoBox
+    <Box
       as={ReachTab}
       ref={ref}
       display="flex"
@@ -81,7 +81,7 @@ export const Tab = forwardRefWithAs<TabsProps, 'div'>(function Tab(
       {...props}
     >
       {children}
-    </PseudoBox>
+    </Box>
   );
 });
 

diff --git a/test/__snapshots__/button.test.tsx.snap b/test/__snapshots__/button.test.tsx.snap
@@ -134,31 +134,6 @@ exports[`<Button /> should contain spinner with \`isLoading\` prop 1`] = `
   color: #777;
 }
 
-.c3 {
-  display: block;
-  height: 20px;
-  border-width: 2px;
-  width: 20px;
-  color: #777;
-}
-
-.c4 {
-  display: inline-block;
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  border-right-color: currentColor;
-  border-top-color: currentColor;
-  border-radius: 9999px;
-  color: currentColor;
-  border-style: solid;
-  height: 20px;
-  width: 20px;
-  border-width: 2px;
-  margin: 2px;
-  -webkit-animation: cilQsd 0.45s linear infinite;
-  animation: cilQsd 0.45s linear infinite;
-}
-
 .c1:hover {
   background-color: #f9fafb;
 }
@@ -186,6 +161,31 @@ exports[`<Button /> should contain spinner with \`isLoading\` prop 1`] = `
   cursor: not-allowed;
 }
 
+.c3 {
+  display: block;
+  height: 20px;
+  border-width: 2px;
+  width: 20px;
+  color: #777;
+}
+
+.c4 {
+  display: inline-block;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  border-right-color: currentColor;
+  border-top-color: currentColor;
+  border-radius: 9999px;
+  color: currentColor;
+  border-style: solid;
+  height: 20px;
+  width: 20px;
+  border-width: 2px;
+  margin: 2px;
+  -webkit-animation: cilQsd 0.45s linear infinite;
+  animation: cilQsd 0.45s linear infinite;
+}
+
 <div>
   <button
     aria-busy="true"

diff --git a/test/__snapshots__/checkbox.test.tsx.snap b/test/__snapshots__/checkbox.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Checkbox can have checked state changed by theme: Checked Checkbox 1`] = `
 <input
   aria-checked="true"
-  class="sc-bdnxRM sc-jSFjdj hNpHox dRkgPV"
+  class="sc-bdnxRM sc-gtsrHT hNpHox hGtDqg"
   data-reach-custom-checkbox-input=""
   type="checkbox"
 />
@@ -66,7 +66,7 @@ exports[`Checkbox can have checked state changed by theme: Unchecked Checkbox 1`
 exports[`Checkbox shows checkbox when checked: Checked Checkbox 1`] = `
 <input
   aria-checked="true"
-  class="sc-bdnxRM sc-jSFjdj hvnVQY ibNROD"
+  class="sc-bdnxRM sc-gtsrHT hvnVQY kbXORC"
   data-reach-custom-checkbox-input=""
   type="checkbox"
 />

diff --git a/test/__snapshots__/menu.test.tsx.snap b/test/__snapshots__/menu.test.tsx.snap
@@ -93,7 +93,7 @@ exports[`<Menu /> should render when positioned to Right: Open Menu 1`] = `
     aria-busy="false"
     aria-controls="menu--7"
     aria-haspopup="true"
-    class="sc-bdnxRM sc-jSFjdj eJeGwH hsaKCn"
+    class="sc-bdnxRM sc-gtsrHT eJeGwH ksncAa"
     data-reach-menu-button=""
     data-testid="menu-button"
     id="menu-button--menu--7"
@@ -198,7 +198,7 @@ exports[`<Menu /> should render: Open Menu 1`] = `
     aria-busy="false"
     aria-controls="menu--1"
     aria-haspopup="true"
-    class="sc-bdnxRM sc-jSFjdj eJeGwH hsaKCn"
+    class="sc-bdnxRM sc-gtsrHT eJeGwH ksncAa"
     data-reach-menu-button=""
     data-testid="menu-button"
     id="menu-button--menu--1"