Add Framer X wrapper components

.gitignore

@@ -1,6 +1,5 @@
-# The best pattern people should follow is ignoring the editors' files in their
-# global .gitignore configuration file.
-# However, in order to prevent issues. We also ignore editors' files here.
+# The best pattern to follow is ignoring editor files in a global .gitignore configuration file.
+# However, in order to prevent issues, editor files are ignored here.
 .idea
 .vscode
 

docs/pages/api/checkbox.md

@@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">checkedIcon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;CheckBoxIcon /></span> | The icon to display when the component is checked. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'default'</span> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
-| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the switch will be disabled. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the switch will be disabled. |
 | <span class="prop-name">disableRipple</span> | <span class="prop-type">bool</span> |  | If `true`, the ripple effect will be disabled. |
 | <span class="prop-name">icon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;CheckBoxOutlineBlankIcon /></span> | The icon to display when the component is unchecked. |
 | <span class="prop-name">id</span> | <span class="prop-type">string</span> |  | The id of the `input` element. |

docs/pages/api/list-item.md

@@ -32,7 +32,7 @@ Uses an additional container component if `ListItemSecondaryAction` is the last
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> |  | The component used for the root node. Either a string to use a DOM element or a component. By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`. |
 | <span class="prop-name">ContainerComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'li'</span> | The container component used when a `ListItemSecondaryAction` is the last child. |
 | <span class="prop-name">ContainerProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the container component if used. |
-| <span class="prop-name">dense</span> | <span class="prop-type">bool</span> |  | If `true`, compact vertical padding designed for keyboard and mouse input will be used. |
+| <span class="prop-name">dense</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, compact vertical padding designed for keyboard and mouse input will be used. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the list item will be disabled. |
 | <span class="prop-name">disableGutters</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the left and right padding is removed. |
 | <span class="prop-name">divider</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, a 1px light border is added to the bottom of the list item. |

docs/pages/api/radio.md

@@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">checkedIcon</span> | <span class="prop-type">node</span> |  | The icon to display when the component is checked. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'default'</span> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
-| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the switch will be disabled. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the switch will be disabled. |
 | <span class="prop-name">disableRipple</span> | <span class="prop-type">bool</span> |  | If `true`, the ripple effect will be disabled. |
 | <span class="prop-name">icon</span> | <span class="prop-type">node</span> |  | The icon to display when the component is unchecked. |
 | <span class="prop-name">id</span> | <span class="prop-type">string</span> |  | The id of the `input` element. |

docs/pages/api/switch.md

@@ -28,7 +28,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">checkedIcon</span> | <span class="prop-type">node</span> |  | The icon to display when the component is checked. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'default'</span> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
-| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the switch will be disabled. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the switch will be disabled. |
 | <span class="prop-name">disableRipple</span> | <span class="prop-type">bool</span> |  | If `true`, the ripple effect will be disabled. |
 | <span class="prop-name">edge</span> | <span class="prop-type">'start'<br>&#124;&nbsp;'end'<br>&#124;&nbsp;false</span> | <span class="prop-default">false</span> | If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape). |
 | <span class="prop-name">icon</span> | <span class="prop-type">node</span> |  | The icon to display when the component is unchecked. |

docs/src/modules/utils/defaultPropsHandler.js

@@ -1,5 +1,5 @@
-import * as astTypes from 'ast-types';
-import { utils as docgenUtils } from 'react-docgen';
+const astTypes = require('ast-types');
+const { utils: docgenUtils } = require('react-docgen');
 
 const { getPropertyName, isReactForwardRefCall, printValue, resolveToValue } = docgenUtils;
 
@@ -81,10 +81,10 @@ function getPropsPath(functionBody) {
   return propsPath;
 }
 
-export default function defaultPropsHandler(documentation, componentDefinition) {
+module.exports = function defaultPropsHandler(documentation, componentDefinition) {
   const renderBody = getRenderBody(componentDefinition);
   const props = getPropsPath(renderBody);
   if (props !== undefined) {
     getDefaultValuesFromProps(props.get('properties'), documentation);
   }
-}
+};

framer/.prettierignore

@@ -0,0 +1,3 @@
+Material-UI.framerfx/design/*
+Material-UI.framerfx/build/*
+canvas.tsx

framer/Material-UI.framerfx/.gitignore

@@ -0,0 +1,8 @@
+build
+.backups
+.cache
+.project.log
+yarn-error.log
+.yarnrc
+.framer-lock
+canvas.tsx

framer/Material-UI.framerfx/.npmrc

@@ -0,0 +1,3 @@
+@framer:registry=https://registry.framer.com/
+always-auth=true
+//registry.framer.com/:_authToken=e0cd7d7d-18fc-4d18-87f2-0bbf2c56e6a7

framer/Material-UI.framerfx/.yarnignore

@@ -0,0 +1,5 @@
+.DS_Store
+Icon\r
+.cache
+.config.json
+.backups

framer/Material-UI.framerfx/README.md

@@ -0,0 +1,58 @@
+# Material-UI
+
+This is the official resource for Material-UI React components in Framer.
+
+## Supported components
+
+The following components are currently supported:
+
+- App bar
+- Avatar
+- Badge
+- Bottom navigation
+- Button
+- Checkbox
+- Chip
+- Circular progress
+- Floating action button (Fab)
+- Icon (all 1100+ Material Icons in 5 variants)
+- Icon button
+- Linear progress
+- List
+- List item (with some layout issues)
+- Media card
+- Paper
+- Radio
+- Radio group
+- Slider
+- Snackbar content
+- Switch
+- Tabs
+- Text field
+- Theme (to globally set primary, secondary and error colors)
+- Typography
+
+## Usage
+
+### Icons
+
+Icons can be specified using either snake_case (as documented on material.io),
+or PascalCase, as [documented in the Material-UI documentation](https://material-ui.com/components/material-icons/).
+Simply type the icon name in the appropriate property control.
+
+The icon theme can be chosen from the related select field.
+
+### Children
+
+Where a component accepts a variety of children (such as Avatar) these can be configured through Framer property controls.
+If multiple options are supplied, they take the following priority:
+
+- Local image
+- Image URL
+- Icon
+- Text
+
+## Resources
+
+- [Material-UI documentation](https://material-ui.com/)
+- [GitHub repo](https://github.com/mui-org/material-ui/tree/master/framer)

framer/Material-UI.framerfx/code/AppBar.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { PropertyControls, ControlType } from 'framer';
+// tslint:disable-next-line: ban-ts-ignore
+// @ts-ignore
+import MuiAppBar from '@material-ui/core/AppBar';
+// tslint:disable-next-line: ban-ts-ignore
+// @ts-ignore
+import Toolbar from '@material-ui/core/Toolbar';
+// tslint:disable-next-line: ban-ts-ignore
+// @ts-ignore
+import Typography from '@material-ui/core/Typography';
+// tslint:disable-next-line: ban-ts-ignore
+// @ts-ignore
+import Button from '@material-ui/core/Button';
+import { IconButton } from './IconButton';
+
+// Define type of property
+interface Props {
+  title?: string;
+  leftIcon?: string;
+  icon1?: string;
+  icon1Badge?: string;
+  icon2?: string;
+  icon2Badge?: string;
+  action1?: string;
+  action2?: string;
+}
+
+export class AppBar extends React.Component<Props> {
+  // Set default properties
+  static defaultProps = {
+    width: 300,
+    height: 56,
+    leftIcon: 'menu',
+    title: 'Material-UI',
+    action1: 'Login',
+    action2: '',
+    icon1: 'notifications',
+    icon1Badge: '8',
+    icon2: 'account_circle',
+    icon2Badge: '',
+  };
+
+  // Items shown in property panel
+  static propertyControls: PropertyControls = {
+    leftIcon: { type: ControlType.String, title: 'Left icon' },
+    title: { type: ControlType.String, title: 'Title' },
+    action1: { type: ControlType.String, title: 'Action 1' },
+    action2: {
+      type: ControlType.String,
+      title: 'Action 2',
+      hidden(props) {
+        return props.action1 === '' && props.action2 !== '';
+      },
+    },
+    icon1: { type: ControlType.String, title: 'Icon 1' },
+    icon1Badge: { type: ControlType.String, title: 'Icon 1 badge' },
+    icon2: {
+      type: ControlType.String,
+      title: 'Icon 2',
+      hidden(props) {
+        return props.icon1 === '' && props.icon2 !== '';
+      },
+    },
+    icon2Badge: { type: ControlType.String, title: 'Icon 2 badge' },
+  };
+
+  render() {
+    const { action1, action2, icon1, icon1Badge, icon2, icon2Badge, leftIcon, title } = this.props;
+    return (
+      <div style={{ flexGrow: 1 }}>
+        <MuiAppBar position="static">
+          <Toolbar>
+            {leftIcon && (
+              <IconButton
+                icon={leftIcon}
+                // tslint:disable-next-line: ban-ts-ignore
+                // @ts-ignore
+                style={{ marginLeft: -12, marginRight: 20 }}
+                color="inherit"
+              />
+            )}
+            <Typography variant="h6" color="inherit" style={{ flexGrow: 1 }}>
+              {title}
+            </Typography>
+            {action1 && <Button color="inherit">{action1}</Button>}
+            {action2 && <Button color="inherit">{action2}</Button>}
+            {icon1 && (
+              <IconButton
+                icon={icon1}
+                badgeColor="secondary"
+                badgeContent={icon1Badge}
+                // tslint:disable-next-line: ban-ts-ignore
+                // @ts-ignore
+                style={{ marginRight: 8 }}
+                color="inherit"
+              />
+            )}
+            {icon2 && (
+              <IconButton
+                icon={icon2}
+                badgeContent={icon2Badge}
+                // tslint:disable-next-line: ban-ts-ignore
+                // @ts-ignore
+                style={{ marginRight: 8 }}
+                color="inherit"
+              />
+            )}
+          </Toolbar>
+        </MuiAppBar>
+      </div>
+    );
+  }
+}

framer/Material-UI.framerfx/code/Avatar.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { addPropertyControls, ControlType } from 'framer';
+// tslint:disable-next-line: ban-ts-ignore
+// @ts-ignore
+import MuiAvatar from '@material-ui/core/Avatar';
+import { Icon } from './Icon';
+
+interface Props {
+  backgroundColor?: string;
+  textColor?: string;
+  icon?: string;
+  imageFile?: string;
+  imageUrl?: string;
+  label?: string;
+  width?: number;
+  height?: number;
+}
+
+const defaultProps: Props = {
+  backgroundColor: '#4154af',
+  textColor: undefined,
+  icon: 'face',
+  imageFile: '',
+  imageUrl: 'https://i.pravatar.cc/300',
+  label: 'MB',
+  width: 40,
+  height: 40,
+};
+
+export const Avatar: React.SFC<Props> = (props: Props) => {
+  const {
+    backgroundColor,
+    height,
+    icon,
+    imageFile,
+    imageUrl,
+    label,
+    textColor,
+    width,
+    ...other
+  } = props;
+
+  return imageFile || imageUrl ? (
+    <MuiAvatar src={imageFile || imageUrl} style={{ height, width }} {...other} />
+  ) : (
+    <MuiAvatar style={{ color: textColor, backgroundColor, height, width }} {...other}>
+      {icon === '' ? label : <Icon icon={icon} />}
+    </MuiAvatar>
+  );
+};
+
+Avatar.defaultProps = defaultProps;
+
+addPropertyControls(Avatar, {
+  backgroundColor: {
+    type: ControlType.Color,
+    title: 'Background color',
+  },
+  textColor: {
+    type: ControlType.Color,
+    title: 'Text color',
+  },
+  icon: {
+    type: ControlType.String,
+    title: 'Icon',
+  },
+  imageFile: {
+    type: ControlType.Image,
+    title: 'Image File',
+    hidden: function hidden(props) {
+      return props.primaryAction && props.primaryAction !== 'avatar';
+    },
+  },
+  imageUrl: {
+    type: ControlType.String,
+    title: 'Image URL',
+    hidden: function hidden(props) {
+      return props.imageFile !== '' || (props.primaryAction && props.primaryAction !== 'avatar');
+    },
+  },
+  label: {
+    type: ControlType.String,
+    title: 'Label',
+  },
+});