chore: experiments

toptal · Mar 30, 2020 · 39a48ec · 39a48ec
1 parent ac06087
commit 39a48ec
Show file tree

Hide file tree

Showing 9 changed files with 590 additions and 141 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['react-app']
+}
diff --git a/jest.config.js b/jest.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   transform: {
-    '^.+\\.(ts|tsx)$': 'ts-jest'
+    '^.+\\.(ts|tsx)$': 'babel-jest'
   },
   setupFiles: ['jest-canvas-mock', './jest-setup-dom.js'],
   testMatch: ['**/(test).(js|jsx|ts|tsx)'],

diff --git a/package.json b/package.json
@@ -35,9 +35,12 @@
   },
   "homepage": "https://github.com/toptal/picasso#readme",
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/polyfill": "^7.4.4",
-    "@babel/standalone": "^7.4.4",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/polyfill": "^7.8.7",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-typescript": "^7.9.0",
+    "@babel/standalone": "^7.9.4",
     "@storybook/addon-viewport": "^5.1.11",
     "@storybook/react": "^5.0.11",
     "@storybook/theming": "^5.3.11",
@@ -53,6 +56,7 @@
     "@types/react-truncate": "^2.3.3",
     "@types/storybook__react": "^4.0.0",
     "@types/styled-components": "4.1.19",
+    "babel-jest": "^25.2.4",
     "babel-loader": "^8.0.6",
     "brace": "^0.11.1",
     "cache-loader": "^4.1.0",

diff --git a/packages/picasso/src/MenuItem/MenuItem.tsx b/packages/picasso/src/MenuItem/MenuItem.tsx
@@ -60,7 +60,7 @@ const generateKey = (() => {
   return () => String(++count)
 })()
 
-export const MenuItem = forwardRef<HTMLElement, Props>(function MenuItem(
+const MenuItem = forwardRef<HTMLElement, Props>(function MenuItem(
   {
     as,
     children,

diff --git a/packages/picasso/src/MenuItem/test.tsx b/packages/picasso/src/MenuItem/test.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react'
 import { render } from '@toptal/picasso/test-utils'
 import { OmitInternalProps } from '@toptal/picasso-shared'
 
-import MenuItem, { Props } from '../MenuItem'
+import MenuItem, { Props } from './MenuItem'
 
 const TestMenuItem: FunctionComponent<OmitInternalProps<Props>> = ({
   children,

diff --git a/packages/picasso/src/SidebarItem/SidebarItem.tsx b/packages/picasso/src/SidebarItem/SidebarItem.tsx
@@ -37,145 +37,148 @@ const useStyles = makeStyles<Theme, Props>(styles, {
   name: 'PicassoSidebarItem'
 })
 
-export const SidebarItem: OverridableComponent<Props> = forwardRef<
-  HTMLElement,
-  Props
->(function SidebarItem(props, ref) {
-  const classes = useStyles(props)
-  const {
-    children,
-    icon,
-    selected,
-    collapsible,
-    menu,
-    disabled,
-    className,
-    style,
-    onClick,
-    as,
-    ...rest
-  } = props
-
-  const hasIcon = Boolean(icon)
-  const hasMenu = Boolean(menu)
-
-  const {
-    variant,
-    isExpanded,
-    isNothingExpanded: isNothingExpandedOnSidebar,
-    expand
-  } = useSidebar()
-
-  const handleMenuItemClick = (
-    event: React.MouseEvent<HTMLElement, MouseEvent>
-  ) => {
-    if (!hasMenu) {
-      onClick!(event)
+const SidebarItem: OverridableComponent<Props> = forwardRef<HTMLElement, Props>(
+  function SidebarItem(props, ref) {
+    const classes = useStyles(props)
+    const {
+      children,
+      icon,
+      selected,
+      collapsible,
+      menu,
+      disabled,
+      className,
+      style,
+      onClick,
+      as,
+      ...rest
+    } = props
+
+    const hasIcon = Boolean(icon)
+    const hasMenu = Boolean(menu)
+
+    const {
+      variant,
+      isExpanded,
+      isNothingExpanded: isNothingExpandedOnSidebar,
+      expand
+    } = useSidebar()
+
+    const handleMenuItemClick = (
+      event: React.MouseEvent<HTMLElement, MouseEvent>
+    ) => {
+      if (!hasMenu) {
+        onClick!(event)
+      }
     }
-  }
 
-  const handleAccordionChange = (
-    event: ChangeEvent<{}>,
-    expansion: boolean
-  ) => {
-    event.stopPropagation()
-    if (expansion) {
-      expand()
+    const handleAccordionChange = (
+      event: ChangeEvent<{}>,
+      expansion: boolean
+    ) => {
+      event.stopPropagation()
+      if (expansion) {
+        expand()
+      }
     }
-  }
 
-  const resolvedChildren =
-    typeof children === 'string' ? (
-      <Typography
-        className={classes.labelContent}
-        color='inherit'
-        size='medium'
-        noWrap
+    const resolvedChildren =
+      typeof children === 'string' ? (
+        <Typography
+          className={classes.labelContent}
+          color='inherit'
+          size='medium'
+          noWrap
+        >
+          {children}
+        </Typography>
+      ) : (
+        children
+      )
+
+    const menuItem = (
+      <MenuItem
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...rest}
+        as={as}
+        ref={ref}
+        style={style}
+        className={cx(
+          classes.root,
+          classes.noWrap,
+          classes[variant!],
+          { [classes.selected]: !hasMenu && selected },
+          className
+        )}
+        onClick={handleMenuItemClick}
+        selected={!hasMenu && selected}
+        disabled={disabled}
+        variant={variant}
       >
-        {children}
-      </Typography>
-    ) : (
-      children
+        <Container className={classes.noWrap} inline flex alignItems='center'>
+          {icon}
+          <Container
+            className={cx(classes.label, classes.noWrap, {
+              [classes.withIcon]: hasIcon
+            })}
+            flex
+            alignItems='center'
+          >
+            {resolvedChildren}
+          </Container>
+        </Container>
+      </MenuItem>
     )
 
-  const menuItem = (
-    <MenuItem
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...rest}
-      as={as}
-      ref={ref}
-      style={style}
-      className={cx(
-        classes.root,
-        classes.noWrap,
-        classes[variant!],
-        { [classes.selected]: !hasMenu && selected },
-        className
-      )}
-      onClick={handleMenuItemClick}
-      selected={!hasMenu && selected}
-      disabled={disabled}
-      variant={variant}
-    >
-      <Container className={classes.noWrap} inline flex alignItems='center'>
-        {icon}
-        <Container
-          className={cx(classes.label, classes.noWrap, {
-            [classes.withIcon]: hasIcon
-          })}
-          flex
-          alignItems='center'
+    if (hasMenu && collapsible) {
+      const menuChildren = React.Children.toArray(menu!.props.children)
+
+      const isExpandedableByDefault =
+        menuChildren.find(
+          (menuChild: ReactElement) => menuChild.props.selected
+        ) !== undefined
+
+      if (isNothingExpandedOnSidebar && isExpandedableByDefault) {
+        expand()
+      }
+
+      return (
+        <Accordion
+          onChange={handleAccordionChange}
+          classes={{
+            summary: classes.summary,
+            details: classes.details,
+            content: classes.content
+          }}
+          content={menu}
+          bordered={false}
+          disabled={disabled}
+          expanded={isExpanded}
+          expandIcon={
+            <ArrowDropDown16
+              className={cx(
+                classes.expandIcon,
+                classes[`${variant}ExpandIcon`],
+                {
+                  [classes.expandIconDisabled]: disabled
+                }
+              )}
+            />
+          }
         >
-          {resolvedChildren}
-        </Container>
-      </Container>
-    </MenuItem>
-  )
-
-  if (hasMenu && collapsible) {
-    const menuChildren = React.Children.toArray(menu!.props.children)
-
-    const isExpandedableByDefault =
-      menuChildren.find(
-        (menuChild: ReactElement) => menuChild.props.selected
-      ) !== undefined
-
-    if (isNothingExpandedOnSidebar && isExpandedableByDefault) {
-      expand()
+          {menuItem}
+        </Accordion>
+      )
     }
 
     return (
-      <Accordion
-        onChange={handleAccordionChange}
-        classes={{
-          summary: classes.summary,
-          details: classes.details,
-          content: classes.content
-        }}
-        content={menu}
-        bordered={false}
-        disabled={disabled}
-        expanded={isExpanded}
-        expandIcon={
-          <ArrowDropDown16
-            className={cx(classes.expandIcon, classes[`${variant}ExpandIcon`], {
-              [classes.expandIconDisabled]: disabled
-            })}
-          />
-        }
-      >
+      <Fragment>
         {menuItem}
-      </Accordion>
+        {hasMenu && <div className={classes.nonCollapsibleMenu}>{menu}</div>}
+      </Fragment>
     )
   }
-
-  return (
-    <Fragment>
-      {menuItem}
-      {hasMenu && <div className={classes.nonCollapsibleMenu}>{menu}</div>}
-    </Fragment>
-  )
-})
+)
 
 SidebarItem.defaultProps = {
   collapsible: false,

diff --git a/packages/picasso/src/SidebarItem/test.tsx b/packages/picasso/src/SidebarItem/test.tsx
@@ -3,8 +3,8 @@ import { render } from '@toptal/picasso/test-utils'
 import { OmitInternalProps } from '@toptal/picasso-shared'
 
 import { Candidates16 } from '../Icon'
-import SidebarMenu from '../SidebarMenu'
-import Sidebar from '../Sidebar'
+import SidebarMenu from '../SidebarMenu/SidebarMenu'
+import Sidebar from '../Sidebar/Sidebar'
 import SidebarItem, { Props } from './SidebarItem'
 
 const TestSidebarItem: FunctionComponent<OmitInternalProps<Props>> = ({

diff --git a/puppeteer/puppeteer.jest.config.js b/puppeteer/puppeteer.jest.config.js
@@ -5,7 +5,7 @@ module.exports = {
   testPathIgnorePatterns: ['/node_modules/', '/build'],
   setupFilesAfterEnv: ['<rootDir>/puppeteer/setup.ts'],
   transform: {
-    '.(ts|tsx)': 'ts-jest'
+    '.(ts|tsx)': 'babel-jest'
   },
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
   reporters: ['default', '<rootDir>/puppeteer/reporter.js']