Extract the search component into @automattic/search

package.json

@@ -156,6 +156,7 @@
 		"whybundled:server": "whybundled client/stats-server.json",
 		"composite-checkout-demo": "webpack-dev-server --config ./packages/composite-checkout/webpack.config.demo.js --mode development",
 		"components:storybook:start": "start-storybook -c packages/components/.storybook",
+		"search:storybook:start": "start-storybook -c packages/search/.storybook",
 		"media-library:storybook:start": "start-storybook -c packages/media-library/.storybook -h calypso.localhost -p 3001"
 	},
 	"dependencies": {

packages/search/.storybook/main.js

@@ -0,0 +1,26 @@
+const path = require( 'path' );
+
+module.exports = {
+	stories: [ '../src/**/*.stories.{js,jsx,ts,tsx}' ],
+	addons: [
+		'@storybook/addon-actions',
+		'@storybook/preset-scss',
+		{
+			name: '@storybook/preset-typescript',
+			options: {
+				tsLoaderOptions: {
+					transpileOnly: true,
+					configFile: path.resolve( __dirname, '../tsconfig.json' ),
+				},
+				tsDocgenLoaderOptions: {
+					tsconfigPath: path.resolve( __dirname, '../tsconfig.json' ),
+				},
+				forkTsCheckerWebpackPluginOptions: {
+					tsconfig: path.resolve( __dirname, '../tsconfig.json' ),
+					memoryLimit: 4096,
+				},
+				include: [ path.resolve( __dirname, '../src' ) ],
+			},
+		},
+	],
+};

packages/search/.storybook/preview.js

@@ -0,0 +1,2 @@
+import '@automattic/calypso-color-schemes';
+import '@wordpress/components/build-style/style.css';

packages/search/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 1.0.0
+
+- Add Search component

packages/search/README.md

@@ -0,0 +1,24 @@
+# Search
+
+A search input component.
+
+## Installation
+
+Install the component.
+
+```bash
+yarn add @automattic/search
+```
+
+## Internationalization
+
+This package depends directly on `@wordpress/i18n` for translations. This means consumers must provide locale data prior to using the component.
+
+## Development Workflow
+
+This package is developed as part of the Calypso monorepo. Run `yarn`
+in the root of the repository to get the required `devDependencies`.
+
+### Using [Storybook](https://storybook.js.org/)
+
+`yarn run components:storybook:start`

packages/search/package.json

@@ -0,0 +1,52 @@
+{
+	"name": "@automattic/search",
+	"version": "1.0.0-alpha.3",
+	"description": "Automattic Search",
+	"homepage": "https://github.com/Automattic/wp-calypso",
+	"license": "GPL-2.0-or-later",
+	"author": "Automattic Inc.",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"sideEffects": [
+		"*.css",
+		"*.scss"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Automattic/wp-calypso.git",
+		"directory": "packages/search"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"bugs": {
+		"url": "https://github.com/Automattic/wp-calypso/issues"
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"types": "dist/types",
+	"dependencies": {
+		"@automattic/viewport": "^1.0.0",
+		"@babel/runtime": "^7.11.1",
+		"@wordpress/components": "^10.0.5",
+		"@wordpress/i18n": "^3.14.0",
+		"@wordpress/icons": "^2.4.0",
+		"classnames": "^2.2.6",
+		"lodash": "^4.17.15"
+	},
+	"peerDependencies": {
+		"react": "^16.8",
+		"react-dom": "^16.8"
+	},
+	"devDependencies": {
+		"@storybook/addon-actions": "^5.3.18",
+		"enzyme": "^3.11.0"
+	},
+	"scripts": {
+		"clean": "npx rimraf dist && tsc --build --clean",
+		"prepublish": "yarn run clean",
+		"prepare": "transpile && tsc && copy-assets"
+	}
+}

packages/search/src/index.ts

@@ -0,0 +1 @@
+export { default } from './search';

packages/search/src/search.stories.tsx

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+import Search from '.';
+
+export default { title: 'Search', component: Search };
+
+const BoxedSearch = ( props: any ) => (
+	<div style={ { position: 'relative', width: '270px', height: '50px' } }>
+		<Search
+			placeholder="Search..."
+			fitsContainer
+			onSearch={ ( search ) => console.log( 'Searched: ', search ) } // eslint-disable-line no-console
+			{ ...props }
+		/>
+	</div>
+);
+
+export const _default = () => {
+	return <BoxedSearch />;
+};
+
+export const Simple = () => {
+	return <BoxedSearch hideClose hideOpenIcon compact />;
+};
+
+export const Delayed = () => {
+	return <BoxedSearch delaySearch />;
+};
+
+export const Searching = () => {
+	return <BoxedSearch searching initialValue="Kiwi" />;
+};
+
+export const Disabled = () => <BoxedSearch disabled isOpen />;
+
+export const Pinned = () => <BoxedSearch pinned />;
+
+export const Compact = () => <BoxedSearch compact />;
+
+export const CompactPinned = () => <BoxedSearch pinned compact fitsContainer />;
+
+export const WithOverlayStyling = () => {
+	const overlayStyling = ( input: string ) => {
+		const tokens = input.split( /(\s+)/ );
+
+		return tokens
+			.filter( ( token ) => token.trim() )
+			.map( ( token, i ) => (
+				<span style={ { borderBottom: '1px solid blue', fontSize: '0.9rem' } } key={ i }>
+					{ token }
+				</span>
+			) );
+	};
+
+	return <BoxedSearch overlayStyling={ overlayStyling } />;
+};