first commit

Author: iamwill123

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+*.map
+*.yml
+.npmignore

README.md

@@ -0,0 +1 @@
+# A simple React inline editing component.

build/index.d.ts

@@ -0,0 +1 @@
+export declare function testMethod(param: string): string;

build/index.js

@@ -0,0 +1,50 @@
+{
+  "name": "react-inline-input-edit",
+  "version": "1.0.0",
+  "description": "a simple inline input editor for react",
+  "main": "build/index.js",
+  "module": "build/index.es.js",
+  "jsnext:main": "build/index.es.js",
+  "scripts": {
+    "build": "rollup -c",
+    "test": "jest -u"
+  },
+  "keywords": [
+    "react",
+    "inline",
+    "editor",
+    "input"
+  ],
+  "author": "William Pei Yuan",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^10.4.7",
+    "@types/jest": "^26.0.7",
+    "@types/react": "^16.9.43",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-test-renderer": "^16.9.2",
+    "jest": "^26.1.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts-ts": "^3.1.0",
+    "react-test-renderer": "^16.13.1",
+    "rollup": "^2.23.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.3",
+    "rollup-plugin-typescript2": "^0.27.1",
+    "ts-jest": "^26.1.3",
+    "typescript": "^3.9.7"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "jsdom"
+  },
+  "files": [
+    "build"
+  ]
+}

package-lock.json

@@ -0,0 +1,45 @@
+import typescript from 'rollup-plugin-typescript2';
+import commonjs from 'rollup-plugin-commonjs';
+import external from 'rollup-plugin-peer-deps-external';
+import resolve from 'rollup-plugin-node-resolve';
+
+import pkg from './package.json';
+
+export default {
+	input: 'src/index.tsx',
+	output: [
+		{
+			file: pkg.main,
+			format: 'cjs',
+			exports: 'named',
+			sourcemap: true,
+		},
+		{
+			file: pkg.module,
+			format: 'es',
+			exports: 'named',
+			sourcemap: true,
+		},
+	],
+	plugins: [
+		external(),
+		resolve(),
+		typescript({
+			rollupCommonJSResolveHack: true,
+			exclude: '**/__tests__/**',
+			clean: true,
+		}),
+		commonjs({
+			include: ['node_modules/**'],
+			namedExports: {
+				'node_modules/react/react.js': [
+					'Children',
+					'Component',
+					'PropTypes',
+					'createElement',
+				],
+				'node_modules/react-dom/index.js': ['render'],
+			},
+		}),
+	],
+};

package.json

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Inline Input edit component. should render a default "Click to edit" label when no text prop or labelPlaceHolder prop is provided. 1`] = `
+<label
+  data-testid="label-component"
+  onClick={[Function]}
+  style={
+    Object {
+      "cursor": "auto",
+      "fontSize": undefined,
+      "fontWeight": undefined,
+    }
+  }
+>
+  Click to edit
+</label>
+`;
+
+exports[`Inline Input edit component. should render a label when a labelPlaceHolder prop is provided. 1`] = `
+<label
+  data-testid="label-component"
+  onClick={[Function]}
+  style={
+    Object {
+      "cursor": "auto",
+      "fontSize": undefined,
+      "fontWeight": undefined,
+    }
+  }
+>
+  hey there
+</label>
+`;
+
+exports[`Inline Input edit component. should render a text label given a text prop. 1`] = `
+<label
+  data-testid="label-component"
+  onClick={[Function]}
+  style={
+    Object {
+      "cursor": "auto",
+      "fontSize": undefined,
+      "fontWeight": undefined,
+    }
+  }
+>
+  Chuck Norris’ tears cure cancer. Too bad he has never cried.
+</label>
+`;
+
+exports[`Inline Input edit component. should render an input when label is clicked, and should update label with new input text. 1`] = `
+<DocumentFragment>
+  <input
+    data-testid="input-component"
+    type="text"
+    value=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Inline Input edit component. should render an input when label is clicked, and should update label with new input text. 2`] = `
+<DocumentFragment>
+  <label
+    data-testid="label-component"
+    style="cursor: auto;"
+  >
+    check me out
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Inline Input edit component. should render optional props provided by user. 1`] = `
+<DocumentFragment>
+  <label
+    class="red"
+    data-testid="label-component"
+    style="cursor: pointer; font-size: 20px; font-weight: 500;"
+  >
+    Chuck Norris
+  </label>
+</DocumentFragment>
+`;
+
+exports[`Inline Input edit component. should render optional props provided by user. 2`] = `
+<DocumentFragment>
+  <input
+    class="the-one"
+    data-testid="input-component"
+    maxlength="20"
+    placeholder="the Chuck Norris"
+    style="width: 500px; height: 20px; font-size: 30px; font-weight: 500; border-width: 20px;"
+    tabindex="1"
+    type="text"
+    value="Chuck Norris"
+  />
+</DocumentFragment>
+`;

react-inline-input-edit-1.0.0.tgz

@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, fireEvent, getByTestId } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+
+import { InlineInputEdit } from '..';
+
+describe('Inline input edit component', () => {
+	test('should render a text label given a text prop.', () => {
+		const text = 'Chuck Norris’ tears cure cancer. Too bad he has never cried.';
+		const component = renderer.create(<InlineInputEdit text={text} />);
+		const testInstance = component.root;
+
+		const actual = testInstance.findByType(InlineInputEdit).props.text;
+		const expected =
+			'Chuck Norris’ tears cure cancer. Too bad he has never cried.';
+
+		expect(actual).toBe(expected);
+
+		let tree = component.toJSON();
+		expect(tree).toMatchSnapshot();
+	});
+
+	test('should render a default "Click to edit" label when no text prop or labelPlaceHolder prop is provided.', () => {
+		const text = '';
+		const component = renderer.create(<InlineInputEdit text={text} />);
+		const testInstance = component.root;
+
+		const actual = testInstance.findByType(InlineInputEdit).props.text;
+		const expected = '';
+
+		expect(actual).toBe(expected);
+
+		let tree = component.toJSON();
+		expect(tree).toMatchSnapshot();
+	});
+
+	test('should render a label when a labelPlaceHolder prop is provided.', () => {
+		const text = '';
+		const labelPlaceHolder = 'hey there';
+		const component = renderer.create(
+			<InlineInputEdit text={text} labelPlaceHolder={labelPlaceHolder} />
+		);
+		const testInstance = component.root;
+
+		const actualText = testInstance.findByType(InlineInputEdit).props.text;
+		const expectedText = '';
+
+		const actualPlaceholder = testInstance.findByType(InlineInputEdit).props
+			.labelPlaceHolder;
+		const expectedPlaceholder = 'hey there';
+
+		expect(actualText).toBe(expectedText);
+		expect(actualPlaceholder).toBe(expectedPlaceholder);
+
+		let tree = component.toJSON();
+		expect(tree).toMatchSnapshot();
+	});
+
+	test('should render an input when label is clicked, and should update label with new input text.', () => {
+		const text = '';
+		const { container, asFragment } = render(<InlineInputEdit text={text} />);
+		let labelComp = getByTestId(container, 'label-component');
+		fireEvent.click(labelComp);
+		expect(asFragment()).toMatchSnapshot();
+
+		const inputComp = getByTestId(container, 'input-component');
+		fireEvent.change(inputComp, { target: { value: 'check me out' } });
+		fireEvent.blur(inputComp);
+
+		labelComp = getByTestId(container, 'label-component');
+		expect(labelComp.textContent).toBe('check me out');
+		expect(asFragment()).toMatchSnapshot();
+	});
+
+	test('should render optional props provided by user.', () => {
+		const optionalProps = {
+			text: 'Chuck Norris',
+			labelCursor: 'pointer',
+			labelClassName: 'red',
+			labelFontSize: '20px',
+			labelFontWeight: '500',
+
+			inputMaxLength: 20,
+			inputPlaceHolder: 'the Chuck Norris',
+			inputTabIndex: 1,
+			inputWidth: 500,
+			inputHeight: 20,
+			inputFontSize: 30,
+			inputFontWeight: 500,
+			inputClassName: 'the-one',
+			inputBorderWidth: 20,
+
+			onFocus: (text: any) => text,
+			onFocusOut: (text: any) => text,
+		};
+		const { container, asFragment } = render(
+			<InlineInputEdit {...optionalProps} />
+		);
+		expect(asFragment()).toMatchSnapshot();
+
+		let labelComp = getByTestId(container, 'label-component');
+		fireEvent.click(labelComp);
+		expect(asFragment()).toMatchSnapshot();
+	});
+});