From 21a92a4550b36aab68edfdf20beeb2a795c32017 Mon Sep 17 00:00:00 2001 From: Orr Gottlieb Date: Tue, 10 Nov 2020 09:03:49 +0200 Subject: [PATCH 1/6] fix: change names of files to be more consistent --- src/components/Search/Search.jsx | 16 ++++---- .../{InputField-test.js => TextField-test.js} | 38 +++++++++--------- .../{InputField.jsx => TextField.jsx} | 16 ++++---- .../{InputField.scss => TextField.scss} | 0 .../__stories__/textField.stories.js | 39 ++++++++----------- src/components/index.js | 7 ++-- src/published-components.js | 5 ++- 7 files changed, 59 insertions(+), 62 deletions(-) rename src/components/TextField/{InputField-test.js => TextField-test.js} (93%) rename src/components/TextField/{InputField.jsx => TextField.jsx} (97%) rename src/components/TextField/{InputField.scss => TextField.scss} (100%) diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx index 7ce4fd08b5..8f70e0f42c 100644 --- 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 = () => {}; @@ -21,7 +21,7 @@ const ICON_NAMES = { secondary: "Clear Search" }; -export const SearchComponent = ({ +export const Search = ({ secondaryIconName, iconName, onChange, @@ -45,7 +45,7 @@ export const SearchComponent = ({ iconNames }) => { return ( - { +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( - { const { rerender } = inputComponent; act(() => { inputComponent = rerender( - { const debounceTime = 200; act(() => { inputComponent = rerender( - { const { rerender } = inputComponent; act(() => { inputComponent = rerender( - { const title = "Title"; act(() => { rerender( - { const title = "My Awesome Title"; act(() => { rerender( - { const { rerender, queryByLabelText } = inputComponent; act(() => { rerender( - { const { rerender, queryByLabelText } = inputComponent; act(() => { rerender( - { const value = "hello"; act(() => { rerender( - { let value = "hello"; act(() => { rerender( - { 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( - ); }); 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( - { it("should add autocomplete attr and set it to off", () => { const { container } = render( - { const { rerender } = inputComponent; act(() => { inputComponent = rerender( - {}; 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 */ @@ -250,7 +250,7 @@ InputField.propTypes = { trim: PropTypes.bool }; -InputField.defaultProps = { +TextField.defaultProps = { className: "", placeholder: "", autoComplete: "off", @@ -287,7 +287,7 @@ 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 b/src/components/TextField/TextField.scss similarity index 100% rename from src/components/TextField/InputField.scss rename to src/components/TextField/TextField.scss diff --git a/src/components/TextField/__stories__/textField.stories.js b/src/components/TextField/__stories__/textField.stories.js index 15cb37b7b3..ec042447d0 100644 --- a/src/components/TextField/__stories__/textField.stories.js +++ b/src/components/TextField/__stories__/textField.stories.js @@ -1,11 +1,6 @@ import React from "react"; -import { Story } from "@storybook/addon-docs/blocks"; -import InputField from "../InputField"; -import { - ComponentStateDescription, - FlexLayout, - Divider -} from "../../storybook-helpers"; +import TextField from "../TextField"; +import { ComponentStateDescription, FlexLayout } from "../../storybook-helpers"; import { text, boolean, number, select } from "@storybook/addon-knobs"; import StoryWrapper from "../../../StoryBookComponents/StoryWrapper/StoryWrapper"; import TextFieldStoryBookLine from "./TextFieldStoryBookLine"; @@ -13,7 +8,7 @@ import TextFieldStoryBookLine from "./TextFieldStoryBookLine"; export const Sandbox = () => { return (
- { return ( - + - + - + ); @@ -64,7 +59,7 @@ export const States = () => {
- {
- {
- {
- { />
- {
- { />
- {
- {
- { />
- { export default { title: "Components/Text Field", - component: InputField + component: TextField }; diff --git a/src/components/index.js b/src/components/index.js index e7ceb1559f..032e17f8b3 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,11 +1,12 @@ export { default as Loader } from "./Loader/Loader"; -export { default as SearchComponent } from "./Search/Search"; -export { default as InputField } from "./TextField/InputField"; +export { default as SearchComponent } from "./Search/Search"; // TODO: remove when bumping to version 1.0.0 +export { default as Search } from "./Search/Search"; +export { default as InputField } from "./TextField/TextField"; // TODO: remove when bumping to version 1.0.0 +export { default as TextField } from "./TextField/TextField"; export { default as Dialog } from "./Dialog/Dialog"; export { default as Tooltip } from "./Tooltip/Tooltip"; export { default as Button } from "./Button/Button"; export { default as FormattedNumber } from "./FormattedNumber/FormattedNumber"; export { default as LinearProgressBar } from "./ProgressBars/LinearProgressBar/LinearProgressBar"; - export { default as Link } from "./Link/Link"; export { default as CustomSvgIcon } from "./Icon/CustomSvgIcon"; diff --git a/src/published-components.js b/src/published-components.js index 042b983aa3..a3cddba618 100644 --- a/src/published-components.js +++ b/src/published-components.js @@ -2,8 +2,9 @@ const path = require("path"); const fs = require("fs"); const publishedComponents = { - SearchComponent: "/src/components/Search/Search.jsx", - TextField: "/src/components/TextField/InputField.jsx", + SearchComponent: "/src/components/Search/Search.jsx", // TODO: remove when bumping to version 1.0.0 + Search: "/src/components/Search/Search.jsx", + TextField: "/src/components/TextField/TextField.jsx", Tooltip: "/src/components/Tooltip/Tooltip.jsx", Button: "/src/components/Button/Button.jsx", Loader: "/src/components/Loader/Loader.jsx", From 80855a4929637bab61354c18eaf42793f640a0d7 Mon Sep 17 00:00:00 2001 From: Orr Gottlieb Date: Tue, 10 Nov 2020 09:07:02 +0200 Subject: [PATCH 2/6] fix: expose search sizes and types --- src/components/Search/Search.jsx | 4 ++++ src/components/TextField/TextField.jsx | 1 + src/components/TextField/__stories__/textField.stories.js | 2 +- 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx index 8f70e0f42c..dcd5714d6e 100644 --- a/src/components/Search/Search.jsx +++ b/src/components/Search/Search.jsx @@ -16,6 +16,7 @@ const TYPE_CLASSES = { function getType(type) { return TYPE_CLASSES[type] || ""; } + const ICON_NAMES = { primary: "Search", secondary: "Clear Search" @@ -136,4 +137,7 @@ Search.defaultProps = { iconNames: ICON_NAMES }; +Search.sizes = SIZES; +Search.types = TYPES; + export default Search; diff --git a/src/components/TextField/TextField.jsx b/src/components/TextField/TextField.jsx index 85e0df304c..b511a60c52 100644 --- a/src/components/TextField/TextField.jsx +++ b/src/components/TextField/TextField.jsx @@ -290,4 +290,5 @@ export const ARIA_LABELS = { TextField.sizes = TEXT_FIELD_SIZE; TextField.feedbacks = FEEDBACK_STATES; TextField.types = TEXT_TYPES; + export default TextField; diff --git a/src/components/TextField/__stories__/textField.stories.js b/src/components/TextField/__stories__/textField.stories.js index ec042447d0..e06771a122 100644 --- a/src/components/TextField/__stories__/textField.stories.js +++ b/src/components/TextField/__stories__/textField.stories.js @@ -1,7 +1,7 @@ import React from "react"; +import { text, boolean, number, select } from "@storybook/addon-knobs"; import TextField from "../TextField"; import { ComponentStateDescription, FlexLayout } from "../../storybook-helpers"; -import { text, boolean, number, select } from "@storybook/addon-knobs"; import StoryWrapper from "../../../StoryBookComponents/StoryWrapper/StoryWrapper"; import TextFieldStoryBookLine from "./TextFieldStoryBookLine"; From 8603c3e19f5bcc0438fb1d4a1bfabe93aa9fcaeb Mon Sep 17 00:00:00 2001 From: Orr Gottlieb Date: Tue, 10 Nov 2020 09:07:25 +0200 Subject: [PATCH 3/6] fix: already exposed --- src/components/Search/Search.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx index dcd5714d6e..0a27a02b85 100644 --- a/src/components/Search/Search.jsx +++ b/src/components/Search/Search.jsx @@ -137,7 +137,4 @@ Search.defaultProps = { iconNames: ICON_NAMES }; -Search.sizes = SIZES; -Search.types = TYPES; - export default Search; From 22172b9cd9d256f9857cf555280d2fd6fe45b233 Mon Sep 17 00:00:00 2001 From: Orr Gottlieb Date: Tue, 10 Nov 2020 09:08:36 +0200 Subject: [PATCH 4/6] fix: kin --- src/components/Search/Search.jsx | 2 +- src/components/Search/__stories__/search.stories.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx index 0a27a02b85..e74c08c950 100644 --- a/src/components/Search/Search.jsx +++ b/src/components/Search/Search.jsx @@ -22,7 +22,7 @@ const ICON_NAMES = { secondary: "Clear Search" }; -export const Search = ({ +const Search = ({ secondaryIconName, iconName, onChange, diff --git a/src/components/Search/__stories__/search.stories.js b/src/components/Search/__stories__/search.stories.js index 0ddd429aa3..82b6bc6f39 100644 --- 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 ( From ffb44f7490e73777495695d19ea08d507a013c51 Mon Sep 17 00:00:00 2001 From: Orr Gottlieb Date: Tue, 10 Nov 2020 11:20:59 +0200 Subject: [PATCH 5/6] lint --- src/components/TextField/TextField.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/TextField/TextField.jsx b/src/components/TextField/TextField.jsx index 97f5b3271c..e5597dedb9 100644 --- a/src/components/TextField/TextField.jsx +++ b/src/components/TextField/TextField.jsx @@ -245,7 +245,11 @@ TextField.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 }; From 8215bf673d70998b56397d17727ac533ebede811 Mon Sep 17 00:00:00 2001 From: Orr Gottlieb Date: Tue, 10 Nov 2020 11:21:18 +0200 Subject: [PATCH 6/6] bump: update patch version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 21786e79a3..397bb50b9e 100644 --- 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": {