fix: remove extra uses of pseudobox, remove pseudobox examples, remov…

…e from stories
cratebind · Dec 30, 2021 · bda453e · bda453e
1 parent df9fee6
commit bda453e
Show file tree

Hide file tree

Showing 12 changed files with 82 additions and 24 deletions.
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
@@ -37,7 +37,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
@@ -36,7 +36,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
@@ -59,7 +59,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
@@ -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>
   );
 });