Merge pull request #21 from cratebind/feature/system-builder

Feature/system builder
cratebind · Mar 9, 2020 · 43b723e · 43b723e
2 parents b0790ab + 247522f
commit 43b723e
Show file tree

Hide file tree

Showing 44 changed files with 13,989 additions and 167 deletions.
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,2 @@
+system-builder
+example
diff --git a/package.json b/package.json
@@ -9,8 +9,7 @@
   "module": "dist/minerva-ui.esm.js",
   "typings": "dist/index.d.ts",
   "files": [
-    "dist",
-    "checkbox.css"
+    "dist"
   ],
   "scripts": {
     "start": "tsdx watch",

diff --git a/register.js b/register.js
@@ -9,7 +9,6 @@ const PANEL_ID = `${ADDON_ID}/panel`;
 
 const MyPanel = () => {
   const value = useParameter(PARAM_KEY, null);
-  console.log({ value });
 
   return <div>{value}</div>;
 };

diff --git a/src/Button/index.tsx b/src/Button/index.tsx
@@ -15,32 +15,37 @@ import {
 // import { MinervaProps } from 'layout';
 import Spinner from '../Spinner';
 // import { MinervaProps } from '../layout';
-import { MinervaProps, Box } from '../layout';
+import { MinervaProps } from '../layout';
+import PseudoBox from '../PseudoBox';
 
-const StyledButton = styled(Box)(
+export const buttonThemeProps = {
+  backgroundColor: '#fff',
+  borderWidth: '1px',
+  color: '#374151',
+  fontWeight: '500',
+  display: 'inline-flex',
+  WebkitAppearance: 'none',
+  WebkitBoxAlign: 'center',
+  alignItems: 'center',
+  WebkitBoxPack: 'center',
+  justifyContent: 'center',
+  userSelect: 'none',
+  position: 'relative',
+  whiteSpace: 'nowrap',
+  verticalAlign: 'middle',
+  fontSize: '14px',
+  lineHeight: '20px',
+  paddingTop: '8px',
+  paddingBottom: '8px',
+  paddingLeft: '16px',
+  paddingRight: '16px',
+  borderRadius: '5px',
+};
+
+const StyledButton = styled(PseudoBox)(
   props => ({
     // backgroundColor: '#525252',
-    backgroundColor: '#fff',
-    borderWidth: '1px',
-    color: '#374151',
-    fontWeight: '500',
-    display: 'inline-flex',
-    WebkitAppearance: 'none',
-    WebkitBoxAlign: 'center',
-    alignItems: 'center',
-    WebkitBoxPack: 'center',
-    justifyContent: 'center',
-    userSelect: 'none',
-    position: 'relative',
-    whiteSpace: 'nowrap',
-    verticalAlign: 'middle',
-    fontSize: '14px',
-    lineHeight: '20px',
-    paddingTop: '8px',
-    paddingBottom: '8px',
-    paddingLeft: '16px',
-    paddingRight: '16px',
-    borderRadius: '5px',
+    // ...buttonThemeProps,
     transition: 'all 150ms ease 0s',
     outline: 'none',
     ':hover': {
@@ -56,9 +61,10 @@ const StyledButton = styled(Box)(
       // color: '#8F8F8F',
       cursor: 'not-allowed',
     },
+    ...props.theme.Button,
     // backgroundColor: props.theme.colors.primary || 'rgb(56, 161, 105)',
-    ...props.theme.Button.container,
-    ...props.theme.Button.text,
+    // ...props.theme.Button.container,
+    // ...props.theme.Button.text,
   }),
   color,
   space,

diff --git a/src/Link/Link.stories.mdx b/src/Link/Link.stories.mdx
@@ -22,9 +22,4 @@ import { Link } from 'minerva-ui'
 <Link href="https://www.google.com" isExternal>Google</Link>
 ```
 
-### Disabled Link
-```jsx
-<Link href="https://www.instagram.com" isDisabled >Twitter</Link>
-```
-
 <Props of={Link} />
diff --git a/src/Link/index.tsx b/src/Link/index.tsx
@@ -38,28 +38,21 @@ const StyledLink = styled('a')<any>(
 export interface LinkProps {
   children?: React.ReactNode;
   href?: string;
-  isDisabled?: boolean;
   isExternal?: boolean;
-  onClick?: Function;
+  // isDisabled?: boolean;
 }
 
-const Link = ({
-  children,
-  href,
-  isDisabled = false,
-  isExternal,
-  onClick,
-  ...props
-}: LinkProps) => {
+const Link = ({ children, href, isExternal, ...props }: LinkProps) => {
   const externalProps = isExternal
     ? { target: '_blank', rel: 'noopener noreferrer' }
     : null;
 
   return (
     <StyledLink
       href={href}
-      isDisabled={isDisabled}
-      onClick={isDisabled ? event => event.preventDefault() : onClick}
+      // @TODO: Rethink this due to possible accessibility issues
+      // isDisabled={isDisabled}
+      // onClick={isDisabled ? event => event.preventDefault() : onClick}
       {...externalProps}
       {...props}
     >

diff --git a/src/PseudoBox/PseudoBox.stories.mdx b/src/PseudoBox/PseudoBox.stories.mdx
@@ -0,0 +1,26 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import PseudoBox from '../PseudoBox';
+
+<Meta title="Elements|PseudoBox" />
+
+# PseudoBox
+
+Basic `div` component with additional props for CSS pseudo selectors.
+
+```jsx
+<PseudoBox
+  as="input"
+  placeholder="Focus me"
+  py={2}
+  px={4}
+  bg="gray.200"
+  color="gray.900"
+  borderColor="transparent"
+  borderWidth="2px"
+  rounded="md"
+  outline="none"
+  _focus={{ backgroundColor: '#fff', borderColor: 'purple' }}
+/>
+```
+
+<Props of={PseudoBox} />