flipper-ui 0.24.11 → 0.25.1

package/core/TextField.d.ts

@@ -1,6 +1,6 @@
 import React, { ChangeEvent, KeyboardEvent, FC, FocusEvent, ReactNode, MouseEvent } from 'react';
-import { IDefault } from './Advertise';
-export interface IProps extends IDefault {
+import { DefaultProps } from './types';
+export interface TextFieldProps extends DefaultProps {
     autoComplete?: string;
     autoFocus?: boolean;
     defaultValue?: string | number;
@@ -32,12 +32,11 @@ export interface IProps extends IDefault {
     onKeyUp?: (event: KeyboardEvent) => void;
     onKeyDown?: (event: KeyboardEvent) => void;
 }
-declare type TProps = IProps;
-interface IHelperProps extends Pick<TProps, 'helperIcon'> {
+interface IHelperProps extends Pick<TextFieldProps, 'helperIcon'> {
     onHelperClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
 export declare const useStyles: (props?: any) => Record<"input" | "outlinedInput" | "outlinedLabel" | "outlinedMultiline" | "iconOutlined", string>;
 export declare const TextFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const HelperBox: (props: IHelperProps) => JSX.Element;
-declare const TextField: FC<TProps>;
+declare const TextField: FC<TextFieldProps>;
 export default TextField;

package/core/ThemeProvider.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme';
-interface IProps {
+interface ThemeProviderProps {
     options?: ThemeOptions;
 }
-declare const ThemeProvider: FC<IProps>;
+declare const ThemeProvider: FC<ThemeProviderProps>;
 export default ThemeProvider;

package/core/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactElement, CSSProperties } from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface TooltipProps extends DefaultProps {
     placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
     title: React.ReactNode;
     withWrapper?: boolean;
@@ -11,5 +11,5 @@ interface IProps extends IDefault {
     children: ReactElement<{}>;
     enterDelay?: number;
 }
-declare const Tooltip: ({ children, withWrapper, wrapperStyle, enterDelay, title, ...otherProps }: IProps) => JSX.Element;
+declare const Tooltip: ({ children, withWrapper, wrapperStyle, enterDelay, title, ...otherProps }: TooltipProps) => JSX.Element;
 export default Tooltip;

package/core/Tree.d.ts

@@ -4,10 +4,10 @@ interface INode {
     name: string;
     nodes?: INode[];
 }
-interface IProps {
+interface TreeProps {
     nodes?: INode[];
 }
-declare class Tree extends Component<IProps, {}> {
+declare class Tree extends Component<TreeProps, {}> {
     renderNode(node: any, index: any, root?: boolean): JSX.Element;
     render(): JSX.Element[];
 }

package/core/Typography.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { IDefault } from './Advertise';
+import { DefaultProps } from './types';
 import { TypographyProps } from '@material-ui/core/Typography';
-declare const Typography: FC<TypographyProps & IDefault>;
+declare const Typography: FC<TypographyProps & DefaultProps>;
 export default Typography;

package/core/Zoom.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { IDefault } from './Advertise';
-interface IProps extends IDefault {
+import { DefaultProps } from './types';
+interface ZoomProps extends DefaultProps {
     in: boolean;
     timeout?: number | {
         enter?: number;
@@ -8,5 +8,5 @@ interface IProps extends IDefault {
     };
     children?: React.ReactElement<{}>;
 }
-declare const Zoom: ({ children, padding, margin, style, ...otherProps }: IProps) => JSX.Element;
+declare const Zoom: ({ children, padding, margin, style, ...otherProps }: ZoomProps) => JSX.Element;
 export default Zoom;

package/core/types.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from 'react';
+export interface DefaultProps {
+    style?: CSSProperties;
+    className?: string;
+    margin?: number | string;
+    padding?: number | string;
+    name?: string;
+    id?: string;
+}

package/core/types.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -1,81 +1,86 @@
 {
-  "name": "flipper-ui",
-  "version": "0.24.11",
-  "description": "",
-  "main": "dist/index.js",
-  "homepage": "https://flipper-ui.vercel.app",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/nginformatica/flipper-ui.git"
-  },
-  "scripts": {
-    "test": "jest --coverage",
-    "start": "yarn docz dev",
-    "build": "yarn build:ts && yarn build:babel",
-    "build:ts": "tsc --emitDeclarationOnly",
-    "build:babel": "babel src --out-dir dist --extensions \".ts,.tsx\"",
-    "lint": "eslint -c .eslintrc.json 'src/**/*.{ts,tsx}'",
-    "lint:fix": "eslint -c .eslintrc.json --fix 'src/**/*.{ts,tsx}'",
-    "predeploy": "yarn build && docz build",
-    "docz:build": "docz build",
-    "type-check": "tsc --noEmit",
-    "deploy": "gh-pages -d docs",
-    "release": "yarn build && node pre-publish.js && npm publish dist --access public"
-  },
-  "author": "NG Informática",
-  "license": "MIT",
-  "dependencies": {
-    "@date-io/date-fns": "1.3.6",
-    "@material-ui/core": "4.11.0",
-    "@material-ui/icons": "4.9.1",
-    "@material-ui/lab": "4.0.0-alpha.54",
-    "@material-ui/pickers": "3.2.6",
-    "date-fns": "2.4.1",
-    "material-table": "1.69.3",
-    "material-ui-chip-input": "2.0.0-beta.2",
-    "ramda": "0.25.0",
-    "react-number-format": "4.4.1"
-  },
-  "devDependencies": {
-    "@babel/cli": "7.10.0",
-    "@babel/core": "7.9.0",
-    "@babel/plugin-transform-runtime": "7.9.0",
-    "@babel/preset-env": "7.9.0",
-    "@babel/preset-react": "7.9.0",
-    "@babel/preset-typescript": "7.9.0",
-    "@testing-library/react": "9.3.2",
-    "@types/jest": "24.0.22",
-    "@types/node": "10.9.4",
-    "@types/ramda": "0.25.36",
-    "@types/react": "16.8.18",
-    "@types/styled-components": "4.4.2",
-    "@typescript-eslint/eslint-plugin": "1.6.0",
-    "@typescript-eslint/parser": "1.6.0",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "babel-plugin-transform-imports": "2.0.0",
-    "docz": "1.3.2",
-    "docz-theme-default": "1.2.0",
-    "eslint": "5.16.0",
-    "eslint-config-prettier": "4.1.0",
-    "eslint-plugin-import": "2.16.0",
-    "eslint-plugin-prefer-arrow": "1.1.5",
-    "eslint-plugin-ramda": "2.5.1",
-    "eslint-plugin-react": "7.12.4",
-    "fs-extra": "7.0.0",
-    "gh-pages": "2.0.0",
-    "jest": "24.9.0",
-    "node-fetch": "2.6.1",
-    "prettier": "1.16.4",
-    "styled-components": "5.0.0",
-    "typescript": "3.9.5"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0",
-    "styled-components": "^5.0.0"
-  },
-  "jest": {
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/setupTests.js"
-    ]
-  }
+    "name": "flipper-ui",
+    "version": "0.25.1",
+    "description": "",
+    "main": "dist/index.js",
+    "homepage": "https://flipper-ui.vercel.app",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/nginformatica/flipper-ui.git"
+    },
+    "scripts": {
+        "test": "jest --coverage",
+        "start": "start-storybook -p 6006",
+        "build": "yarn build:ts && yarn build:babel",
+        "build:ts": "tsc --emitDeclarationOnly",
+        "build:babel": "babel src --out-dir dist --extensions \".ts,.tsx\"",
+        "lint": "eslint -c .eslintrc.json 'src/**/*.{ts,tsx}'",
+        "lint:fix": "eslint -c .eslintrc.json --fix 'src/**/*.{ts,tsx}'",
+        "predeploy": "yarn build && yarn storybook:build",
+        "docs:build": "build-storybook -o docs",
+        "type-check": "tsc --noEmit",
+        "deploy": "gh-pages -d docs",
+        "release": "yarn build && node pre-publish.js && npm publish dist --access public"
+    },
+    "author": "NG Informática",
+    "license": "MIT",
+    "dependencies": {
+        "@date-io/date-fns": "1.3.6",
+        "@material-ui/core": "4.11.0",
+        "@material-ui/icons": "4.9.1",
+        "@material-ui/lab": "4.0.0-alpha.54",
+        "@material-ui/pickers": "3.2.6",
+        "date-fns": "2.4.1",
+        "material-table": "1.69.3",
+        "material-ui-chip-input": "2.0.0-beta.2",
+        "ramda": "0.25.0",
+        "react-number-format": "4.4.1"
+    },
+    "devDependencies": {
+        "@babel/cli": "7.10.0",
+        "@babel/core": "7.9.0",
+        "@babel/plugin-transform-runtime": "7.9.0",
+        "@babel/preset-env": "7.9.0",
+        "@babel/preset-react": "7.9.0",
+        "@babel/preset-typescript": "7.9.0",
+        "@storybook/addon-actions": "6.3.12",
+        "@storybook/addon-essentials": "6.3.12",
+        "@storybook/addon-links": "6.3.12",
+        "@storybook/react": "6.3.12",
+        "@testing-library/react": "9.3.2",
+        "@types/jest": "24.0.22",
+        "@types/node": "10.9.4",
+        "@types/ramda": "0.25.36",
+        "@types/react": "16.8.18",
+        "@types/styled-components": "4.4.2",
+        "@typescript-eslint/eslint-plugin": "1.6.0",
+        "@typescript-eslint/parser": "1.6.0",
+        "babel-loader": "8.2.3",
+        "babel-plugin-transform-class-properties": "6.24.1",
+        "babel-plugin-transform-imports": "2.0.0",
+        "eslint": "5.16.0",
+        "eslint-config-prettier": "4.1.0",
+        "eslint-plugin-import": "2.16.0",
+        "eslint-plugin-prefer-arrow": "1.1.5",
+        "eslint-plugin-ramda": "2.5.1",
+        "eslint-plugin-react": "7.12.4",
+        "fs-extra": "7.0.0",
+        "gh-pages": "2.0.0",
+        "jest": "24.9.0",
+        "node-fetch": "2.6.1",
+        "prettier": "1.16.4",
+        "react": "16.14.0",
+        "react-dom": "16.14.0",
+        "styled-components": "5.0.0",
+        "typescript": "3.9.5"
+    },
+    "peerDependencies": {
+        "react": "^16.8.0",
+        "styled-components": "^5.0.0"
+    },
+    "jest": {
+        "setupFilesAfterEnv": [
+            "<rootDir>/src/setupTests.js"
+        ]
+    }
 }

package/stories/Advertise.stories.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Advertise = _interopRequireDefault(require("../core/Advertise"));
+
+var _default = {
+  title: 'Advertise',
+  component: _Advertise["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Advertise["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  comment: 'Be like water. You put water into a cup. \
+        It becomes the cup. You put water into a bottle. It becomes the bottle.',
+  author: 'Bruce Lee',
+  children: 'Advertise'
+};

package/stories/AutoComplete.stories.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithSubheader = exports.OpeningWhenFocused = exports.Default = exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _AutoComplete = _interopRequireDefault(require("../core/AutoComplete"));
+
+var _ListItem = _interopRequireDefault(require("../core/ListItem"));
+
+var _TextField = _interopRequireDefault(require("../core/TextField"));
+
+var _Typography = _interopRequireDefault(require("../core/Typography"));
+
+var _default = {
+  title: 'AutoComplete',
+  component: _AutoComplete["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  suggestions: [{
+    value: 'rock',
+    label: 'Rock'
+  }, {
+    value: 'pop',
+    label: 'Pop'
+  }, {
+    value: 'classic',
+    label: 'Classic'
+  }],
+  renderInput: function renderInput(props) {
+    return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
+      fullWidth: true,
+      placeholder: "Music genres"
+    }, props));
+  },
+  renderSuggestion: function renderSuggestion(item, props, selected) {
+    return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], (0, _extends2["default"])({
+      key: item,
+      selected: selected
+    }, props), item.label);
+  },
+  onChange: function onChange() {
+    return null;
+  }
+};
+
+var OpeningWhenFocused = function OpeningWhenFocused() {
+  return /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
+    openOnFocus: true,
+    value: {
+      value: 'classic',
+      label: 'Classic'
+    },
+    suggestions: [{
+      value: 'rock',
+      label: 'Rock'
+    }, {
+      value: 'pop',
+      label: 'Pop'
+    }, {
+      value: 'classic',
+      label: 'Classic'
+    }],
+    renderInput: function renderInput(props) {
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
+        fullWidth: true,
+        placeholder: "Music genres"
+      }, props));
+    },
+    renderSuggestion: function renderSuggestion(item, props, selected) {
+      return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], (0, _extends2["default"])({
+        selected: selected
+      }, props), item.label);
+    },
+    onChange: function onChange() {
+      return null;
+    }
+  });
+};
+
+exports.OpeningWhenFocused = OpeningWhenFocused;
+
+var WithSubheader = function WithSubheader() {
+  return /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], {
+    openOnFocus: true,
+    suggestions: [{
+      label: 'Genres',
+      subheader: true
+    }, {
+      value: 'rock',
+      label: 'Rock'
+    }, {
+      value: 'pop',
+      label: 'Pop'
+    }, {
+      value: 'classic',
+      label: 'Classic'
+    }],
+    renderInput: function renderInput(props) {
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
+        fullWidth: true,
+        placeholder: "Music genres"
+      }, props));
+    },
+    renderSuggestion: function renderSuggestion(item, props, selected) {
+      return item.subheader ? /*#__PURE__*/_react["default"].createElement(_ListItem["default"], null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        variant: "caption"
+      }, item.label)) : /*#__PURE__*/_react["default"].createElement(_ListItem["default"], (0, _extends2["default"])({}, props, {
+        selected: selected
+      }), item.label || item);
+    },
+    onChange: function onChange() {
+      return null;
+    }
+  });
+};
+
+exports.WithSubheader = WithSubheader;

package/stories/AutoCompleteLab.stories.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _AutoComplete = _interopRequireDefault(require("../core/AutoComplete"));
+
+var _TextField = _interopRequireDefault(require("../core/TextField"));
+
+var _lab = require("@material-ui/lab");
+
+var _default = {
+  title: 'AutoCompleteLab',
+  component: _AutoComplete["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_lab.Autocomplete, {
+    options: [{
+      label: 'Anemone',
+      value: 'forget-me-not'
+    }, {
+      label: 'Forget me not',
+      value: 'anemone'
+    }, {
+      label: 'Snapdragon',
+      value: 'snapdragon'
+    }, {
+      label: 'Sunflower',
+      value: 'sunflower'
+    }, {
+      label: 'Rose',
+      value: 'rose'
+    }],
+    getOptionLabel: function getOptionLabel(option) {
+      return option.label;
+    },
+    style: {
+      width: 300
+    },
+    renderInput: function renderInput(props) {
+      return /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({}, props, {
+        label: "Flowers",
+        placeholder: "Flowers",
+        variant: "outlined",
+        fullWidth: true
+      }));
+    },
+    onChange: function onChange() {
+      return null;
+    }
+  });
+};
+
+exports.Default = Default;

package/stories/Avatar.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithChuildren = exports.Primary = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Avatar = _interopRequireDefault(require("../core/Avatar"));
+
+var _default = {
+  title: 'Avatar',
+  component: _Avatar["default"],
+  argTypes: {
+    backgroundColor: {
+      control: 'color'
+    },
+    children: {
+      control: 'text'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Avatar["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = {
+  primary: true
+};
+var WithChuildren = Template.bind({});
+exports.WithChuildren = WithChuildren;
+WithChuildren.args = {
+  children: 'W',
+  primary: true
+};

package/stories/Badge.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithDot = exports.Secondary = exports.Primary = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Badge = _interopRequireDefault(require("../core/Badge"));
+
+var _Button = _interopRequireDefault(require("../core/Button"));
+
+var _default = {
+  title: 'Badge',
+  component: _Badge["default"],
+  argTypes: {
+    backgroundColor: {
+      control: 'color'
+    },
+    counter: {
+      control: 'number'
+    }
+  }
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Badge["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  counter: 2,
+  children: 'Badge'
+};
+var Primary = Template.bind({});
+exports.Primary = Primary;
+Primary.args = {
+  counter: 2,
+  color: 'primary',
+  children: 'Badge'
+};
+var Secondary = Template.bind({});
+exports.Secondary = Secondary;
+Secondary.args = {
+  counter: 150,
+  color: 'secondary',
+  children: /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    variant: "outlined"
+  }, "Try changing the counter to Zero")
+};
+var WithDot = Template.bind({});
+exports.WithDot = WithDot;
+WithDot.args = {
+  counter: 1,
+  variant: 'dot',
+  color: 'primary',
+  children: 'Badge'
+};

package/stories/Box.stories.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../core/Box"));
+
+var _default = {
+  title: 'Box',
+  component: _Box["default"]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], args);
+};
+
+var Default = Template.bind({});
+exports.Default = Default;
+Default.args = {
+  margin: 25,
+  children: 'Open the box and think outside of it.'
+};