[test] Lint framer workspace (#22002)

mui · Jul 30, 2020 · e0e9b42 · e0e9b42
1 parent bee49be
commit e0e9b42
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 14 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -16,7 +16,6 @@
 /packages/material-ui-icons/legacy
 /packages/material-ui-icons/src
 /packages/material-ui-icons/templateSvgIcon.js
-/framer/
 # Ignore fixtures
 /packages/typescript-to-proptypes/test/*/*
 /tmp

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -87,6 +87,17 @@ module.exports = {
 
     'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }],
     'react-hooks/rules-of-hooks': 'error',
+
+    'react/default-props-match-prop-types': [
+      'error',
+      {
+        // Otherwise the rule thinks inner props = outer props
+        // But in TypeScript we want to know that a certain prop is defined during render
+        // while it can be ommitted from the callsite.
+        // Then defaultProps (or default values) will make sure the the prop is defined during render
+        allowRequiredDefaults: true,
+      },
+    ],
     // Can add verbosity to small functions making them harder to grok.
     // Though we have to manually enforce it for function components with default values.
     'react/destructuring-assignment': 'off',
@@ -234,6 +245,13 @@ module.exports = {
         'react/static-property-placement': 'off',
       },
     },
+    {
+      files: ['framer/Material-UI.framerfx/code/**/*.tsx'],
+      rules: {
+        // framer requires named exports
+        'import/prefer-default-export': 'off',
+      },
+    },
     {
       files: ['packages/typescript-to-proptypes/src/**/*.ts'],
       rules: {

diff --git a/framer/Material-UI.framerfx/code/BottomNavigation.tsx b/framer/Material-UI.framerfx/code/BottomNavigation.tsx
@@ -17,8 +17,8 @@ export function BottomNavigation(props: Props): JSX.Element {
 
   const [value, setValue] = React.useState(0);
 
-  const handleChange = (event: React.SyntheticEvent, value: any) => {
-    setValue(value);
+  const handleChange = (event: React.SyntheticEvent, newValue: any) => {
+    setValue(newValue);
   };
 
   const items = icons.length > labels.length ? icons : labels;

diff --git a/framer/Material-UI.framerfx/code/Icon.tsx b/framer/Material-UI.framerfx/code/Icon.tsx
@@ -17,9 +17,9 @@ export function Icon(props: Props): JSX.Element | null {
   const iconName = `${iconProp && pascalCase(iconProp)}${
     theme === 'Filled' ? '' : theme
   }` as keyof typeof Icons;
-  const Icon = Object.keys(Icons).indexOf(iconName) !== -1 ? Icons[iconName] : undefined;
+  const MuiIcon = Object.keys(Icons).indexOf(iconName) !== -1 ? Icons[iconName] : undefined;
 
-  return Icon ? <Icon style={{ width, height }} {...other} /> : null;
+  return MuiIcon ? <MuiIcon style={{ width, height }} {...other} /> : null;
 }
 
 Icon.defaultProps = {

diff --git a/framer/Material-UI.framerfx/code/ListItem.tsx b/framer/Material-UI.framerfx/code/ListItem.tsx
@@ -5,9 +5,9 @@ import MuiListItemIcon from '@material-ui/core/ListItemIcon';
 import MuiListItemAvatar from '@material-ui/core/ListItemAvatar';
 // import MuiListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import MuiListItemText from '@material-ui/core/ListItemText';
-import { Avatar } from './Avatar';
 import MuiCheckbox from '@material-ui/core/Checkbox';
 import MuiSwitch from '@material-ui/core/Switch';
+import { Avatar } from './Avatar';
 import { Icon } from './Icon';
 import { IconButton } from './IconButton';
 
@@ -75,6 +75,9 @@ export function ListItem(props: Props): JSX.Element {
         </MuiListItemIcon>
       );
       break;
+    default:
+      primary = null;
+      break;
   }
 
   switch (secondaryAction) {
@@ -87,6 +90,9 @@ export function ListItem(props: Props): JSX.Element {
     case 'switch':
       secondary = <MuiSwitch edge="end" />;
       break;
+    default:
+      secondary = null;
+      break;
   }
 
   return (
@@ -95,7 +101,7 @@ export function ListItem(props: Props): JSX.Element {
       <MuiListItemText
         inset={inset}
         primary={label}
-        secondary={secondaryLabel ? secondaryLabel : undefined}
+        secondary={secondaryLabel.length > 0 ? secondaryLabel : undefined}
       />
       {/* MuiListItemSecondaryAction causes the text to have a bullet. No idea why! */}
       {/* <MuiListItemSecondaryAction> */}

diff --git a/framer/scripts/buildFramer.js b/framer/scripts/buildFramer.js
@@ -5,7 +5,7 @@ import path from 'path';
 import { defaultHandlers, parse as docgenParse } from 'react-docgen';
 import muiDefaultPropsHandler from 'docs/src/modules/utils/defaultPropsHandler';
 import Mustache from 'mustache';
-import Case, { type } from 'case';
+import Case from 'case';
 import deepmerge from 'deepmerge';
 import { findComponents } from 'docs/src/modules/utils/find';
 import { componentSettings, ignoredControls } from './framerConfig';

diff --git a/framer/scripts/templates/bottom_navigation.txt b/framer/scripts/templates/bottom_navigation.txt
@@ -14,8 +14,8 @@ export function «componentName»(props: Props): JSX.Element {
 
   const [value, setValue] =React.useState(0)
 
-  const handleChange = (event: React.SyntheticEvent, value: any) => {
-    setValue(value);
+  const handleChange = (event: React.SyntheticEvent, newValue: any) => {
+    setValue(newValue);
   };
 
   const items = icons.length > labels.length ? icons : labels;

diff --git a/framer/scripts/templates/icon.txt b/framer/scripts/templates/icon.txt
@@ -14,9 +14,9 @@ export function «componentName»(props: Props): JSX.Element | null {
   const iconName = `${iconProp && pascalCase(iconProp)}${
     theme === 'Filled' ? '' : theme
   }` as keyof typeof Icons;
-  const Icon = Object.keys(Icons).indexOf(iconName) !== -1 ? Icons[iconName] : undefined;
+  const MuiIcon = Object.keys(Icons).indexOf(iconName) !== -1 ? Icons[iconName] : undefined;
 
-  return Icon ? <Icon style={{ width, height}} {...other} /> : null;
+  return MuiIcon ? <MuiIcon style={{ width, height}} {...other} /> : null;
 };
 
 «componentName».defaultProps = {

diff --git a/framer/scripts/templates/list_item.txt b/framer/scripts/templates/list_item.txt
@@ -6,9 +6,9 @@ import MuiListItemIcon from '@material-ui/core/ListItemIcon';
 import MuiListItemAvatar from '@material-ui/core/ListItemAvatar';
 // import MuiListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import MuiListItemText from '@material-ui/core/ListItemText';
-import { Avatar } from './Avatar';
 import MuiCheckbox from '@material-ui/core/Checkbox';
 import MuiSwitch from '@material-ui/core/Switch';
+import { Avatar } from './Avatar';
 import { Icon } from './Icon';
 import { IconButton } from './IconButton';
 
@@ -58,6 +58,9 @@ export function «componentName»(props: Props): JSX.Element {
         </MuiListItemIcon>
       );
       break;
+    default:
+      primary = null;
+      break;
   }
 
   switch (secondaryAction) {
@@ -70,6 +73,9 @@ export function «componentName»(props: Props): JSX.Element {
     case 'switch':
       secondary = <MuiSwitch edge="end" />;
       break;
+    default:
+      secondary = null;
+      break;
   }
 
   return (
@@ -78,7 +84,7 @@ export function «componentName»(props: Props): JSX.Element {
       <MuiListItemText
         inset={inset}
         primary={label}
-        secondary={secondaryLabel ? secondaryLabel : undefined}
+        secondary={secondaryLabel.length > 0 ? secondaryLabel : undefined}
       />
       {/* MuiListItemSecondaryAction causes the text to have a bullet. No idea why! */}
       {/* <MuiListItemSecondaryAction> */}