Merge pull request #20 from mondaycom/fix/orr/consistant-import-naming

Fix/orr/consistant import naming
mondaycom · Nov 10, 2020 · ce0a37b · ce0a37b
2 parents a52d7ba + 8215bf6
commit ce0a37b
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 65 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "monday-ui-react-core",
- "version": "0.0.16",
+ "version": "0.0.17",
  "description": "Official monday.com UI resources for application development in React.js",
  "main": "dist/main.js",
  "scripts": {

diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import "./Search.scss";
-import InputField from "../TextField/InputField";
+import TextField from "../TextField/TextField";
 import { SIZES, TYPES } from "./SearchConstats";
 
 const NOOP = () => {};
@@ -16,12 +16,13 @@ const TYPE_CLASSES = {
 function getType(type) {
  return TYPE_CLASSES[type] || "";
 }
+
 const ICON_NAMES = {
  primary: "Search",
  secondary: "Clear Search"
 };
 
-export const SearchComponent = ({
+const Search = ({
  secondaryIconName,
  iconName,
  onChange,
@@ -45,7 +46,7 @@ export const SearchComponent = ({
  iconNames
 }) => {
  return (
- <InputField
+ <TextField
  id={id}
  iconName={iconName}
  value={value}
@@ -75,10 +76,10 @@ export const SearchComponent = ({
  );
 };
 
-SearchComponent.sizes = SIZES;
-SearchComponent.types = TYPES;
+Search.sizes = SIZES;
+Search.types = TYPES;
 
-SearchComponent.propTypes = {
+Search.propTypes = {
  secondaryIconName: PropTypes.string,
  iconName: PropTypes.string,
  onChange: PropTypes.func,
@@ -112,7 +113,7 @@ SearchComponent.propTypes = {
  })
 };
 
-SearchComponent.defaultProps = {
+Search.defaultProps = {
  secondaryIconName: "icon-dapulse-close",
  iconName: "icon-v2-search",
  onChange: NOOP,
@@ -136,4 +137,4 @@ SearchComponent.defaultProps = {
  iconNames: ICON_NAMES
 };
 
-export default SearchComponent;
+export default Search;
diff --git a/src/components/Search/__stories__/search.stories.js b/src/components/Search/__stories__/search.stories.js
@@ -1,9 +1,10 @@
 import React from "react";
 import { action } from "@storybook/addon-actions";
 import { text, boolean, number, select } from "@storybook/addon-knobs";
-import Search from "../Search";
 import SearchStoryLine from "./SearchStoryLine";
+
 import { FlexLayout } from "../../storybook-helpers";
+import Search from "../Search";
 
 export const Sandbox = () => {
  return (

diff --git a/src/components/TextField/InputField-test.js → src/components/TextField/TextField-test.js b/src/components/TextField/InputField-test.js → src/components/TextField/TextField-test.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { sinon, expect } from "../../test/test-helpers";
-import InputField, { ARIA_LABELS } from "./InputField";
+import TextField, { ARIA_LABELS } from "./TextField";
 import {
  render,
  fireEvent,
@@ -9,7 +9,7 @@ import {
  act
 } from "@testing-library/react";
 
-describe("InputField Tests", () => {
+describe("TextField Tests", () => {
  let inputComponent;
  let onChangeStub;
  let defaultPlaceHolder = "Place Holder Text";
@@ -20,7 +20,7 @@ describe("InputField Tests", () => {
  clock = sinon.useFakeTimers();
  act(() => {
  inputComponent = render(
- <InputField
+ <TextField
  placeholder={defaultPlaceHolder}
  onChange={onChangeStub}
  id="test"
@@ -60,7 +60,7 @@ describe("InputField Tests", () => {
  const { rerender } = inputComponent;
  act(() => {
  inputComponent = rerender(
- <InputField
+ <TextField
  placeholder={defaultPlaceHolder}
  onChange={onChangeStub}
  id="test"
@@ -83,7 +83,7 @@ describe("InputField Tests", () => {
  const debounceTime = 200;
  act(() => {
  inputComponent = rerender(
- <InputField
+ <TextField
  placeholder={defaultPlaceHolder}
  onChange={onChangeStub}
  id="test"
@@ -105,7 +105,7 @@ describe("InputField Tests", () => {
  const { rerender } = inputComponent;
  act(() => {
  inputComponent = rerender(
- <InputField
+ <TextField
  placeholder={defaultPlaceHolder}
  onChange={onChangeStub}
  id="test"
@@ -122,7 +122,7 @@ describe("InputField Tests", () => {
  const title = "Title";
  act(() => {
  rerender(
- <InputField
+ <TextField
  placeholder={defaultPlaceHolder}
  onChange={onChangeStub}
  id="test"
@@ -140,7 +140,7 @@ describe("InputField Tests", () => {
  const title = "My Awesome Title";
  act(() => {
  rerender(
- <InputField
+ <TextField
  placeholder={defaultPlaceHolder}
  onChange={onChangeStub}
  id="test"
@@ -157,7 +157,7 @@ describe("InputField Tests", () => {
  const { rerender, queryByLabelText } = inputComponent;
  act(() => {
  rerender(
- <InputField
+ <TextField
  placeholder={defaultPlaceHolder}
  onChange={onChangeStub}
  id="test"
@@ -175,7 +175,7 @@ describe("InputField Tests", () => {
  const { rerender, queryByLabelText } = inputComponent;
  act(() => {
  rerender(
- <InputField
+ <TextField
  placeholder={defaultPlaceHolder}
  onChange={onChangeStub}
  id="test"
@@ -193,7 +193,7 @@ describe("InputField Tests", () => {
  const value = "hello";
  act(() => {
  rerender(
- <InputField
+ <TextField
  placeholder={defaultPlaceHolder}
  onChange={onChangeStub}
  id="char-count-test"
@@ -212,7 +212,7 @@ describe("InputField Tests", () => {
  let value = "hello";
  act(() => {
  rerender(
- <InputField
+ <TextField
  placeholder={defaultPlaceHolder}
  onChange={onChangeStub}
  id="char-count-test"
@@ -244,29 +244,29 @@ describe("InputField Tests", () => {
  describe("types", () => {
  it("default type should be text", () => {
  const input = screen.getByPlaceholderText(defaultPlaceHolder);
- expect(input.type).to.equal(InputField.types.TEXT);
+ expect(input.type).to.equal(TextField.types.TEXT);
  });
 
  it("type should be password", () => {
  const { rerender } = inputComponent;
  act(() => {
  inputComponent = rerender(
- <InputField
+ <TextField
  placeholder={defaultPlaceHolder}
  onChange={onChangeStub}
  id="test"
- type={InputField.types.PASSWORD}
+ type={TextField.types.PASSWORD}
  />
  );
  });
  const input = screen.getByPlaceholderText(defaultPlaceHolder);
- expect(input.type).to.equal(InputField.types.PASSWORD);
+ expect(input.type).to.equal(TextField.types.PASSWORD);
  });
  });
  describe("autocomplete", () => {
  it("should add autocomplete attr and set it to on", () => {
  const { container } = render(
- <InputField
+ <TextField
  placeholder={defaultPlaceHolder}
  onChange={onChangeStub}
  id="test"
@@ -279,7 +279,7 @@ describe("InputField Tests", () => {
 
  it("should add autocomplete attr and set it to off", () => {
  const { container } = render(
- <InputField
+ <TextField
  placeholder={defaultPlaceHolder}
  onChange={onChangeStub}
  id="test"
@@ -295,7 +295,7 @@ describe("InputField Tests", () => {
  const { rerender } = inputComponent;
  act(() => {
  inputComponent = rerender(
- <InputField
+ <TextField
  placeholder={defaultPlaceHolder}
  onChange={onChangeStub}
  id="test"

diff --git a/src/components/TextField/InputField.jsx → src/components/TextField/TextField.jsx b/src/components/TextField/InputField.jsx → src/components/TextField/TextField.jsx
@@ -3,7 +3,7 @@ import React, { useRef, useEffect, useMemo, useCallback } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
 import useDebounceEvent from "../../hooks/useDebounceEvent";
-import "./InputField.scss";
+import "./TextField.scss";
 import Icon from "../Icon/Icon";
 import {
  FEEDBACK_CLASSES,
@@ -16,7 +16,7 @@ import { TEXT_FIELD_SIZE, TEXT_TYPES } from "./TextFieldConstants";
 const NOOP = () => {};
 
 const EMPTY_OBJECT = { primary: "", secondary: "", label: "" };
-const InputField = ({
+const TextField = ({
  className,
  placeholder,
  autoComplete,
@@ -203,7 +203,7 @@ const InputField = ({
  );
 };
 
-InputField.propTypes = {
+TextField.propTypes = {
  className: PropTypes.string,
  placeholder: PropTypes.string,
  /* See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete for all of the available options */
@@ -245,12 +245,16 @@ InputField.propTypes = {
  secondary: PropTypes.string
  }),
  /* TEXT_TYPES is exposed on the component itself */
- type: PropTypes.oneOf([TEXT_TYPES.TEXT, TEXT_TYPES.PASSWORD, TEXT_TYPES.SEARCH]),
+ type: PropTypes.oneOf([
+ TEXT_TYPES.TEXT,
+ TEXT_TYPES.PASSWORD,
+ TEXT_TYPES.SEARCH
+ ]),
  maxLength: PropTypes.number,
  trim: PropTypes.bool
 };
 
-InputField.defaultProps = {
+TextField.defaultProps = {
  className: "",
  placeholder: "",
  autoComplete: "off",
@@ -287,7 +291,8 @@ export const ARIA_LABELS = {
  VALIDATION_TEXT: "Additional helper text"
 };
 
-InputField.sizes = TEXT_FIELD_SIZE;
-InputField.feedbacks = FEEDBACK_STATES;
-InputField.types = TEXT_TYPES;
-export default InputField;
+TextField.sizes = TEXT_FIELD_SIZE;
+TextField.feedbacks = FEEDBACK_STATES;
+TextField.types = TEXT_TYPES;
+
+export default TextField;
diff --git a/src/components/TextField/InputField.scss → src/components/TextField/TextField.scss b/src/components/TextField/InputField.scss → src/components/TextField/TextField.scss