feat: sleek syntax

bottable · Jun 12, 2020 · f9debe3 · f9debe3
1 parent 43b92a3
commit f9debe3
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 62 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -48,7 +48,8 @@ module.exports = {
     'react-hooks/exhaustive-deps': 'warn',
     'react/jsx-curly-newline': 'off',
     'no-unused-vars': 'off',
-    '@typescript-eslint/no-unused-vars': 'error'
+    '@typescript-eslint/no-unused-vars': 'error',
+    'func-call-spacing': 'off'
   },
   settings: {
     react: {

diff --git a/docs/component/dropdown.mdx b/docs/component/dropdown.mdx
@@ -4,58 +4,57 @@ route: /component/dropdown
 menu: Component
 ---
 
-import { Menu, MenuItem, Dropdown, Text } from 'fiber'
+import { Menu, Dropdown, Text } from 'fiber'
 import { Playground } from 'docz'
 
 # Dropdown
 
 ## Hover
 
 <Playground>
- {() => {
-   const menu = (
-     <Menu>
-      <MenuItem>
-        <Text> Item 1 </Text>
-      </MenuItem>
-      <MenuItem>
-        <Text> Item 2 </Text>
-      </MenuItem>
-      <MenuItem>
-        <Text> Item 3 </Text>
-      </MenuItem>
-     </Menu>
-   )
+  {() => {
+    const menu = (
+      <Menu>
+        <Menu.Item>
+          <Text> Item 1 </Text>
+        </Menu.Item>
+        <Menu.Item>
+          <Text> Item 2 </Text>
+        </Menu.Item>
+        <Menu.Item>
+          <Text> Item 3 </Text>
+        </Menu.Item>
+      </Menu>
+    )
     return (
-        <Dropdown menu={menu} trigger={"hover"} >
-          <Text> Hover Me </Text>
-        </Dropdown>
+      <Dropdown menu={menu} trigger={'hover'}>
+        <Text> Hover Me </Text>
+      </Dropdown>
     )
   }}
 </Playground>
 
 ## Click
 
 <Playground>
- {() => {
-   const menu = (
-     <Menu>
-      <MenuItem>
-        <Text> Item 1  </Text>
-      </MenuItem>
-      <MenuItem>
-        <Text> Item 2 </Text>
-      </MenuItem>
-      <MenuItem>
-        <Text> Item 3 </Text>
-      </MenuItem>
-     </Menu>
-   )
+  {() => {
+    const menu = (
+      <Menu>
+        <MenuItem>
+          <Text> Item 1 </Text>
+        </MenuItem>
+        <MenuItem>
+          <Text> Item 2 </Text>
+        </MenuItem>
+        <MenuItem>
+          <Text> Item 3 </Text>
+        </MenuItem>
+      </Menu>
+    )
     return (
-        <Dropdown menu={menu} trigger={"click"} >
-          <button> Click Me </button>
-        </Dropdown>
+      <Dropdown menu={menu} trigger={'click'}>
+        <button> Click Me </button>
+      </Dropdown>
     )
   }}
 </Playground>
-
diff --git a/src/Dropdown/Dropdown.tsx b/src/Dropdown/Dropdown.tsx
@@ -15,7 +15,7 @@ const Wrapper = styled.div<any>`
 `
 
 const Dropdown: FC<DropdownProps> = ({ menu, trigger, children, ...props }) => {
-  const node = useRef<{ contains:(e: EventTarget) => Boolean }>(null)
+  const node = useRef<{ contains: (e: EventTarget) => Boolean }>(null)
   const [expand, setExpand] = useState(false)
 
   const handleClick = (e: Event) => {

diff --git a/src/Dropdown/__tests__/Dropdown.spec.tsx b/src/Dropdown/__tests__/Dropdown.spec.tsx
@@ -1,4 +1,4 @@
-import { Dropdown, Menu, MenuItem, Text } from '../../'
+import { Dropdown, Menu, Text } from '../../'
 
 import React from 'react'
 import { render } from 'test/utils'
@@ -7,22 +7,22 @@ describe('Menu & Menu Items', () => {
   it('renders correctly', () => {
     const menu = (
       <Menu>
-        <MenuItem>
+        <Menu.Item>
           <Text> Item 1 </Text>
-        </MenuItem>
-        <MenuItem>
+        </Menu.Item>
+        <Menu.Item>
           <Text> Item 2 </Text>
-        </MenuItem>
-        <MenuItem>
+        </Menu.Item>
+        <Menu.Item>
           <Text> Item 3 </Text>
-        </MenuItem>
+        </Menu.Item>
       </Menu>
     )
 
     const dropdown = render(
       <Dropdown menu={menu} trigger='hover'>
         <Text> Hover Me </Text>
-      </Dropdown >
+      </Dropdown>
     )
 
     expect(dropdown).toMatchSnapshot()

diff --git a/src/Menu/Menu.tsx b/src/Menu/Menu.tsx
@@ -1,18 +1,22 @@
-
 import { StyleProps, styleComposition } from '../utils/styles'
+import { withProperties } from '../utils'
+
+import { MenuItem } from './MenuItem'
 
 import styled from 'styled-components'
 
-export interface MenuProps extends StyleProps { }
+export interface MenuProps extends StyleProps {}
 
-const Menu = styled.div<MenuProps>`
+const MenuWrapper = styled.div<MenuProps>`
   ${styleComposition}
 
   position: absolute;
   z-index: 999;
   min-width: 160px;
   background-color: #f9f9f9;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 `
 
+const Menu = withProperties(MenuWrapper, { Item: MenuItem })
+
 export { Menu }
diff --git a/src/Menu/__tests__/Menu.spec.tsx b/src/Menu/__tests__/Menu.spec.tsx
@@ -1,4 +1,4 @@
-import { Menu, MenuItem, Text } from '../../'
+import { Menu, Text } from '../../'
 
 import React from 'react'
 import { render } from 'test/utils'
@@ -7,15 +7,15 @@ describe('Menu & Menu Items', () => {
   it('renders correctly', () => {
     const menu = render(
       <Menu>
-        <MenuItem>
+        <Menu.Item>
           <Text> Item 1 </Text>
-        </MenuItem>
-        <MenuItem>
+        </Menu.Item>
+        <Menu.Item>
           <Text> Item 2 </Text>
-        </MenuItem>
-        <MenuItem>
+        </Menu.Item>
+        <Menu.Item>
           <Text> Item 3 </Text>
-        </MenuItem>
+        </Menu.Item>
       </Menu>
     )
 

diff --git a/src/Menu/__tests__/__snapshots__/Menu.spec.tsx.snap b/src/Menu/__tests__/__snapshots__/Menu.spec.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`Menu & Menu Items renders correctly 1`] = `
 <div
-  className="sc-AxheI eXThOJ"
+  className="sc-Axmtr AYONq"
 >
   <a
-    className="sc-Axmtr cHRaGC"
+    className="sc-AxheI cFvGuJ"
   >
     <span
       className="sc-AxiKw fhcQjA"
@@ -15,7 +15,7 @@ exports[`Menu & Menu Items renders correctly 1`] = `
     </span>
   </a>
   <a
-    className="sc-Axmtr cHRaGC"
+    className="sc-AxheI cFvGuJ"
   >
     <span
       className="sc-AxiKw fhcQjA"
@@ -25,7 +25,7 @@ exports[`Menu & Menu Items renders correctly 1`] = `
     </span>
   </a>
   <a
-    className="sc-Axmtr cHRaGC"
+    className="sc-AxheI cFvGuJ"
   >
     <span
       className="sc-AxiKw fhcQjA"

diff --git a/src/Menu/index.ts b/src/Menu/index.ts
@@ -1,2 +1 @@
 export * from './Menu'
-export * from './MenuItem'
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -0,0 +1 @@
+export * from './typeHelper'
diff --git a/src/utils/typeHelper.ts b/src/utils/typeHelper.ts
@@ -0,0 +1,6 @@
+export function withProperties<A, B>(component: A, properties: B): A & B {
+  Object.keys(properties).forEach((key) => {
+    component[key] = properties[key]
+  })
+  return component as A & B
+}
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export * from './Menu'
		export * from './MenuItem'