Extract Gutenboarding language picker into @automattic/language-picker

client/components/language-picker/constants.js

@@ -1,6 +1,10 @@
 /**
  * @jest-environment jsdom
  */
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
 
 /*
  * List of territories that languages are grouped into (displayed as tabs in the UI).
@@ -23,11 +27,11 @@ export const DEFAULT_LANGUAGE_GROUP = 'popular';
 export const LANGUAGE_GROUPS = [
 	{
 		id: 'popular',
-		name: ( translate ) => translate( 'Popular languages' ),
+		name: () => __( 'Popular languages' ),
 	},
 	{
 		id: 'africa-middle-east',
-		name: ( translate ) => translate( 'Africa and Middle East' ),
+		name: () => __( 'Africa and Middle East' ),
 		subTerritories: [ '145', '002' ],
 		countries: [
 			'AE',
@@ -112,7 +116,7 @@ export const LANGUAGE_GROUPS = [
 	},
 	{
 		id: 'americas',
-		name: ( translate ) => translate( 'Americas' ),
+		name: () => __( 'Americas' ),
 		subTerritories: [ '019' ],
 		countries: [
 			'AG',
@@ -175,7 +179,7 @@ export const LANGUAGE_GROUPS = [
 	{
 		id: 'asia-pacific',
 		default: true,
-		name: ( translate ) => translate( 'Asia-Pacific' ),
+		name: () => __( 'Asia-Pacific' ),
 		subTerritories: [ '143', '009', '030', '034', '035' ],
 		countries: [
 			'AC',
@@ -254,13 +258,13 @@ export const LANGUAGE_GROUPS = [
 	},
 	{
 		id: 'eastern-europe',
-		name: ( translate ) => translate( 'Eastern Europe' ),
+		name: () => __( 'Eastern Europe' ),
 		subTerritories: [ '151' ],
 		countries: [ 'BG', 'BY', 'CZ', 'HU', 'MD', 'PL', 'RO', 'RU', 'SK', 'UA' ],
 	},
 	{
 		id: 'western-europe',
-		name: ( translate ) => translate( 'Western Europe' ),
+		name: () => __( 'Western Europe' ),
 		subTerritories: [ '154', '155', '039' ],
 		countries: [
 			'AD',

client/landing/gutenboarding/onboarding-block/language/index.tsx

@@ -3,19 +3,15 @@
  */
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
-import { Button } from '@wordpress/components';
 import { useI18n } from '@automattic/react-i18n';
 import { ActionButtons, BackButton, Title } from '@automattic/onboarding';
+import LanguagePicker, { createLanguageGroups } from '@automattic/language-picker';
 
 /**
  * Internal dependencies
  */
 import { ChangeLocaleContextConsumer } from '../../components/locale-context';
-import { languages, Language } from '../../../../languages';
-import {
-	LANGUAGE_GROUPS,
-	DEFAULT_LANGUAGE_GROUP,
-} from '../../../../components/language-picker/constants';
+import { languages } from '../../../../languages';
 
 /**
  * Style dependencies
@@ -24,50 +20,13 @@ import './style.scss';
 
 const LanguageStep: React.FunctionComponent = () => {
 	const { __ } = useI18n();
-	const [ filter, setFilter ] = React.useState< string >( DEFAULT_LANGUAGE_GROUP );
 
 	const history = useHistory();
 
 	const goBack = () => {
 		history.goBack();
 	};
 
-	const getFilteredLanguages = () => {
-		switch ( filter ) {
-			case 'popular':
-				return languages
-					.filter( ( language: Language ) => language.popular )
-					.sort(
-						( a: Language, b: Language ) => ( a.popular as number ) - ( b.popular as number )
-					);
-			default: {
-				const languageGroup = LANGUAGE_GROUPS.find( ( l ) => l.id === filter );
-				const subTerritories = languageGroup ? languageGroup.subTerritories : null;
-				return languages
-					.filter( ( language: Language ) =>
-						language.territories.some( ( t ) => subTerritories?.includes( t ) )
-					)
-					.sort( ( a: Language, b: Language ) => a.name.localeCompare( b.name ) );
-			}
-		}
-	};
-
-	const renderCategoryButtons = () => {
-		return LANGUAGE_GROUPS.map( ( languageGroup ) => {
-			const isSelected = filter === languageGroup.id;
-
-			const onClick = () => {
-				setFilter( languageGroup.id );
-			};
-			return (
-				<div key={ languageGroup.id }>
-					<Button onClick={ onClick } className={ 'language__language-group' }>
-						<span className={ isSelected ? 'is-selected' : '' }>{ languageGroup.name( __ ) }</span>
-					</Button>
-				</div>
-			);
-		} );
-	};
 	return (
 		<ChangeLocaleContextConsumer>
 			{ ( changeLocale ) => (
@@ -78,25 +37,14 @@ const LanguageStep: React.FunctionComponent = () => {
 							<BackButton onClick={ goBack } />
 						</ActionButtons>
 					</div>
-					<div className="language__regions-label">{ __( 'regions' ) }</div>
-					<div className="language__page-content">
-						<div className="language__category-filters">{ renderCategoryButtons() }</div>
-						<div className="language__language-buttons">
-							{ getFilteredLanguages().map( ( language: Language ) => (
-								<Button
-									className="language__language-item"
-									key={ language.langSlug }
-									onClick={ () => {
-										changeLocale( language.langSlug );
-										goBack();
-									} }
-									title={ language.name }
-								>
-									<span lang={ language.langSlug }>{ language.name }</span>
-								</Button>
-							) ) }
-						</div>
-					</div>
+					<LanguagePicker
+						languageGroups={ createLanguageGroups( __ ) }
+						languages={ languages }
+						onSelectLanguage={ ( language ) => {
+							changeLocale( language.langSlug );
+							goBack();
+						} }
+					/>
 				</div>
 			) }
 		</ChangeLocaleContextConsumer>

client/landing/gutenboarding/onboarding-block/language/style.scss

@@ -1,49 +1,5 @@
-@import '../../mixins';
-
 .language__heading {
 	margin: 64px 0 80px;
 	display: flex;
 	justify-content: space-between;
 }
-
-.language__language-group {
-	width: 100%;
-}
-
-.language__language-group > span {
-	padding-bottom: 4px;
-	&.is-selected {
-		padding-bottom: 2px;
-		border-bottom: 2px solid var( --mainColor );
-	}
-}
-
-.language__regions-label {
-	margin: 6px 12px;
-	color: var( --studio-gray-50 );
-	font-size: 13px;
-	text-transform: uppercase;
-}
-
-.language__page-content {
-	display: flex;
-}
-
-.language__category-filters {
-	min-width: 170px;
-
-	@include break-small {
-		min-width: 220px;
-		margin-right: 60px;
-	}
-}
-
-.language__language-buttons {
-	display: flex;
-	flex-wrap: wrap;
-	align-content: flex-start;
-}
-
-.language__language-item {
-	width: 165px;
-}

client/package.json

@@ -24,6 +24,7 @@
 		"@automattic/domain-picker": "^1.0.0-alpha.0",
 		"@automattic/format-currency": "^1.0.0-alpha.0",
 		"@automattic/lasagna": "^0.6.1",
+		"@automattic/language-picker": "^1.0.0",
 		"@automattic/load-script": "^1.0.0",
 		"@automattic/material-design-icons": "^1.0.0",
 		"@automattic/notifications": "^1.0.0",

client/tsconfig.json

@@ -20,6 +20,7 @@
 		{ "path": "../packages/calypso-analytics" },
 		{ "path": "../packages/components" },
 		{ "path": "../packages/data-stores" },
+		{ "path": "../packages/language-picker" },
 		{ "path": "../packages/media-library" },
 		{ "path": "../packages/react-i18n" }
 	],

package.json

@@ -158,8 +158,8 @@
 		"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"
+		"media-library:storybook:start": "start-storybook -c packages/media-library/.storybook -h calypso.localhost -p 3001",
+		"search:storybook:start": "start-storybook -c packages/search/.storybook"
 	},
 	"dependencies": {
 		"@automattic/babel-plugin-i18n-calypso": "^1.2.0",

packages/language-picker/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 1.0.0-alpha.0
+
+- Add LanguagePicker based on Gutenboarding language picker

packages/language-picker/README.md

@@ -0,0 +1,18 @@
+# LanguagePicker
+
+A language picker component extracted from Gutenboarding for the purposes of code sharing between Gutenboarding and Calypso.
+
+## Installation
+
+```bash
+yarn add @automattic/language-picker
+```
+
+## Internationalization
+
+This package depends directly on `@wordpress/i18n` for translations and the existence of locale data is assumed. This means consumers must provide the locale data for this package.
+
+## 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`.

packages/language-picker/package.json

@@ -0,0 +1,46 @@
+{
+	"name": "@automattic/language-picker",
+	"version": "1.0.0",
+	"description": "Automattic Language Picker",
+	"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/language-picker"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"bugs": {
+		"url": "https://github.com/Automattic/wp-calypso/issues"
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"types": "dist/types",
+	"dependencies": {
+		"@automattic/react-i18n": "^1.0.0-alpha.0",
+		"@babel/runtime": "^7.11.1",
+		"@wordpress/base-styles": "^2.0.1",
+		"@wordpress/components": "^10.0.5",
+		"@wordpress/i18n": "^3.14.0"
+	},
+	"peerDependencies": {
+		"react": "^16.8",
+		"react-dom": "^16.8"
+	},
+	"scripts": {
+		"clean": "npx rimraf dist && tsc --build --clean",
+		"prepublish": "yarn run clean",
+		"prepare": "transpile && tsc && copy-assets"
+	}
+}