From ae0330d53708b74f20c46503b2c52a0ddc3961f6 Mon Sep 17 00:00:00 2001 From: Sara Marcondes <saram@fastmail.com> Date: Thu, 8 Oct 2020 14:24:35 -0700 Subject: [PATCH 01/12] Add LanguagePicker as package --- package.json | 5 +- packages/language-picker/.eslintrc.js | 10 ++ packages/language-picker/.storybook/main.js | 26 ++++ .../language-picker/.storybook/preview.js | 1 + packages/language-picker/CHANGELOG.md | 3 + packages/language-picker/README.md | 26 ++++ packages/language-picker/jest.config.js | 5 + packages/language-picker/package.json | 50 ++++++++ packages/language-picker/src/index.ts | 2 + .../src/language-picker.stories.tsx | 62 ++++++++++ .../language-picker/src/language-picker.tsx | 117 ++++++++++++++++++ packages/language-picker/src/style.scss | 47 +++++++ packages/language-picker/tsconfig.json | 33 +++++ 13 files changed, 385 insertions(+), 2 deletions(-) create mode 100644 packages/language-picker/.eslintrc.js create mode 100644 packages/language-picker/.storybook/main.js create mode 100644 packages/language-picker/.storybook/preview.js create mode 100644 packages/language-picker/CHANGELOG.md create mode 100644 packages/language-picker/README.md create mode 100644 packages/language-picker/jest.config.js create mode 100644 packages/language-picker/package.json create mode 100644 packages/language-picker/src/index.ts create mode 100644 packages/language-picker/src/language-picker.stories.tsx create mode 100644 packages/language-picker/src/language-picker.tsx create mode 100644 packages/language-picker/src/style.scss create mode 100644 packages/language-picker/tsconfig.json diff --git a/package.json b/package.json index 160b53f4b0f77..ad89ab9675c23 100644 --- a/package.json +++ b/package.json @@ -158,8 +158,9 @@ "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" + "language-picker:storybook:start": "start-storybook -c packages/language-picker/.storybook", + "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", diff --git a/packages/language-picker/.eslintrc.js b/packages/language-picker/.eslintrc.js new file mode 100644 index 0000000000000..aeaacd69b4ece --- /dev/null +++ b/packages/language-picker/.eslintrc.js @@ -0,0 +1,10 @@ +module.exports = { + overrides: [ + { + files: [ '**/test/**/*' ], + rules: { + 'import/no-nodejs-modules': 'off', + }, + }, + ], +}; diff --git a/packages/language-picker/.storybook/main.js b/packages/language-picker/.storybook/main.js new file mode 100644 index 0000000000000..9a84281147868 --- /dev/null +++ b/packages/language-picker/.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' ) ], + }, + }, + ], +}; diff --git a/packages/language-picker/.storybook/preview.js b/packages/language-picker/.storybook/preview.js new file mode 100644 index 0000000000000..521d3335699b9 --- /dev/null +++ b/packages/language-picker/.storybook/preview.js @@ -0,0 +1 @@ +import '@wordpress/components/build-style/style.css'; diff --git a/packages/language-picker/CHANGELOG.md b/packages/language-picker/CHANGELOG.md new file mode 100644 index 0000000000000..bec300287b9ef --- /dev/null +++ b/packages/language-picker/CHANGELOG.md @@ -0,0 +1,3 @@ +## 1.0.0 + +- Add LanguagePicker diff --git a/packages/language-picker/README.md b/packages/language-picker/README.md new file mode 100644 index 0000000000000..2bb92063ee93b --- /dev/null +++ b/packages/language-picker/README.md @@ -0,0 +1,26 @@ +# LanguagePicker + +A language picker component extracted from Gutenboarding for the purposes of code sharing between Gutenboarding and Calypso. + +## Installation + +Install the components and the color schemes they depend on. + +```bash +yarn add @automattic/language-picker +``` + +## 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`. + +### Tests + +`yarn run test-packages` + +`yarn run test-packages:watch` + +### Using [Storybook](https://storybook.js.org/) + +`yarn run language-picker:storybook:start` diff --git a/packages/language-picker/jest.config.js b/packages/language-picker/jest.config.js new file mode 100644 index 0000000000000..b94a8c8661cfe --- /dev/null +++ b/packages/language-picker/jest.config.js @@ -0,0 +1,5 @@ +module.exports = { + preset: '@automattic/calypso-build', + rootDir: __dirname, + cacheDirectory: '<rootDir>/../../.cache/jest', +}; diff --git a/packages/language-picker/package.json b/packages/language-picker/package.json new file mode 100644 index 0000000000000..742b9e1c32c89 --- /dev/null +++ b/packages/language-picker/package.json @@ -0,0 +1,50 @@ +{ + "name": "@automattic/language-picker", + "version": "1.0.0-alpha.3", + "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": "file:../react-i18n", + "@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" + }, + "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" + } +} diff --git a/packages/language-picker/src/index.ts b/packages/language-picker/src/index.ts new file mode 100644 index 0000000000000..f16eecca2ec25 --- /dev/null +++ b/packages/language-picker/src/index.ts @@ -0,0 +1,2 @@ +export * from './language-picker'; +export { default } from './language-picker'; diff --git a/packages/language-picker/src/language-picker.stories.tsx b/packages/language-picker/src/language-picker.stories.tsx new file mode 100644 index 0000000000000..b0439613b1d68 --- /dev/null +++ b/packages/language-picker/src/language-picker.stories.tsx @@ -0,0 +1,62 @@ +/** + * External dependencies + */ +import React from 'react'; + +import LanguagePicker, { Language, LanguageGroup } from '.'; + +export default { title: 'LanguagePicker' }; + +const LANGUAGES: Language[] = [ + { + value: 1, + langSlug: 'en', + name: 'English', + wpLocale: 'en_US', + popular: 1, + territories: [ '019' ], + }, + { value: 71, langSlug: 'th', name: 'ไทย', wpLocale: 'th', territories: [ '035' ] }, + + { value: 455, langSlug: 'tl', name: 'Tagalog', wpLocale: 'tl', territories: [ '035' ] }, + { value: 481, langSlug: 'am', name: 'አማርኛ', wpLocale: 'am', territories: [ '002' ] }, + { + value: 482, + langSlug: 'en-gb', + name: 'English (UK)', + wpLocale: 'en_GB', + territories: [ '154' ], + }, +]; + +const LANGUAGE_GROUPS: LanguageGroup[] = [ + { + id: 'popular', + name: ( translate ) => translate( 'Popular languages' ), + }, + { + id: 'africa-middle-east', + name: ( translate ) => translate( 'Africa and Middle East' ), + subTerritories: [ '145', '002' ], + countries: [ 'AM' ], + }, + { + id: 'asia-pacific', + default: true, + name: ( translate ) => translate( 'Asia-Pacific' ), + subTerritories: [ '143', '009', '030', '034', '035' ], + countries: [ 'TL', 'TH' ], + }, +]; + +export const _default = () => { + return ( + <LanguagePicker + // eslint-disable-next-line no-console + onSelectLanguage={ ( language ) => console.log( language ) } + languageGroups={ LANGUAGE_GROUPS } + languages={ LANGUAGES } + defaultLananguageGroupId="popular" + /> + ); +}; diff --git a/packages/language-picker/src/language-picker.tsx b/packages/language-picker/src/language-picker.tsx new file mode 100644 index 0000000000000..15ba8deabbe53 --- /dev/null +++ b/packages/language-picker/src/language-picker.tsx @@ -0,0 +1,117 @@ +/** + * External dependencies + */ +import React, { useState } from 'react'; +import { useI18n } from '@automattic/react-i18n'; + +/** + * WordPress dependencies + */ +import { I18n } from '@wordpress/i18n'; +import { Button } from '@wordpress/components'; + +/** + * Style dependencies + */ +import './style.scss'; + +export type LanguageGroup = { + id: string; + name: ( translate: I18n[ '__' ] ) => string; + subTerritories?: string[]; + countries?: string[]; + default?: boolean; +}; + +type LanguageSlug = string; +type WPLocale = string; + +type BaseLanguage = { + langSlug: LanguageSlug; + name: string; + popular?: number; + rtl?: boolean; + territories: string[]; + value: number; + wpLocale: WPLocale | ''; +}; + +type SubLanguage = BaseLanguage & { parentLangSlug: string }; + +export type Language = BaseLanguage | SubLanguage; + +type Props = { + onSelectLanguage: ( language: Language ) => void; + languages: Language[]; + languageGroups: LanguageGroup[]; + defaultLananguageGroupId: string; +}; + +const LanguagePicker = ( { + onSelectLanguage, + languages, + languageGroups, + defaultLananguageGroupId, +}: Props ) => { + const { __ } = useI18n(); + const [ filter, setFilter ] = useState( defaultLananguageGroupId ); + + const getFilteredLanguages = () => { + switch ( filter ) { + case 'popular': + return languages + .filter( ( language ) => language.popular ) + .sort( ( a, b ) => ( a.popular as number ) - ( b.popular as number ) ); + default: { + const languageGroup = languageGroups.find( ( l ) => l.id === filter ); + const subTerritories = languageGroup ? languageGroup.subTerritories : []; + return languages + .filter( ( language ) => + language.territories.some( ( t ) => subTerritories?.includes( t ) ) + ) + .sort( ( a, b ) => a.name.localeCompare( b.name ) ); + } + } + }; + + const renderCategoryButtons = () => { + return languageGroups.map( ( languageGroup ) => { + const isSelected = filter === languageGroup.id; + + const onClick = () => { + setFilter( languageGroup.id ); + }; + + return ( + <div key={ languageGroup.id }> + <Button onClick={ onClick } className="language-picker__language-group"> + <span className={ isSelected ? 'is-selected' : '' }>{ languageGroup.name( __ ) }</span> + </Button> + </div> + ); + } ); + }; + + return ( + <> + <div className="language-picker__regions-label">{ __( 'regions' ) }</div> + <div className="language-picker__content"> + <div className="language-picker__category-filters">{ renderCategoryButtons() }</div> + <div className="language-picker__language-buttons"> + { getFilteredLanguages().map( ( language ) => ( + <Button + className="language-picker__language-button" + key={ language.langSlug } + onClick={ () => onSelectLanguage( language ) } + title={ language.name } + > + <span lang={ language.langSlug }>{ language.name }</span> + </Button> + ) ) } + </div> + </div> + </> + ); +}; + +export default LanguagePicker; diff --git a/packages/language-picker/src/style.scss b/packages/language-picker/src/style.scss new file mode 100644 index 0000000000000..9d7ca759f2fe2 --- /dev/null +++ b/packages/language-picker/src/style.scss @@ -0,0 +1,47 @@ +@import '~@wordpress/base-styles/breakpoints'; +@import '~@wordpress/base-styles/mixins'; +@import '~@wordpress/base-styles/variables'; + +.language-picker__language-group { + width: 100%; +} + +.language-picker__language-group > span { + padding-bottom: 4px; + &.is-selected { + padding-bottom: 2px; + border-bottom: 2px solid #3582c4; + } +} + +.language-picker__regions-label { + font-family: $default-font; + margin: 6px 12px; + color: $gray-600; + /* stylelint-disable-next-line scales/font-size */ + font-size: 13px; + text-transform: uppercase; +} + +.language-picker__content { + display: flex; +} + +.language-picker__category-filters { + min-width: 170px; + + @include break-small { + min-width: 220px; + margin-right: 60px; + } +} + +.language-picker__language-buttons { + display: flex; + flex-wrap: wrap; + align-content: flex-start; +} + +.language-picker__language-button { + width: 165px; +} diff --git a/packages/language-picker/tsconfig.json b/packages/language-picker/tsconfig.json new file mode 100644 index 0000000000000..bdf5a4af4ced0 --- /dev/null +++ b/packages/language-picker/tsconfig.json @@ -0,0 +1,33 @@ +{ + "compilerOptions": { + "target": "ES2016", + "module": "esnext", + "allowJs": true, + "checkJs": false, + "jsx": "react", + "declaration": true, + "declarationDir": "dist/types", + "outDir": "dist/types", + "emitDeclarationOnly": true, + "isolatedModules": true, + + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + + "moduleResolution": "node", + "esModuleInterop": true, + + "forceConsistentCasingInFileNames": true, + + "typeRoots": [ "../../node_modules/@types" ], + "types": [], + "rootDir": "src", + + "composite": true + }, + "include": [ "src" ], + "exclude": [ "**/docs/*", "**/test/*" ] +} From 560956ad0fa9768e892d2320865fa8f69baea127 Mon Sep 17 00:00:00 2001 From: Sara Marcondes <saram@fastmail.com> Date: Thu, 8 Oct 2020 14:25:18 -0700 Subject: [PATCH 02/12] Use LanguagePicker in Gutenboarding --- .../onboarding-block/language/index.tsx | 69 +++---------------- .../onboarding-block/language/style.scss | 44 ------------ client/package.json | 1 + yarn.lock | 16 +++++ 4 files changed, 28 insertions(+), 102 deletions(-) diff --git a/client/landing/gutenboarding/onboarding-block/language/index.tsx b/client/landing/gutenboarding/onboarding-block/language/index.tsx index dea9689c91c38..cacded57d57a0 100644 --- a/client/landing/gutenboarding/onboarding-block/language/index.tsx +++ b/client/landing/gutenboarding/onboarding-block/language/index.tsx @@ -3,15 +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 from '@automattic/language-picker'; /** * Internal dependencies */ import { ChangeLocaleContextConsumer } from '../../components/locale-context'; -import { languages, Language } from '../../../../languages'; +import { languages } from '../../../../languages'; import { LANGUAGE_GROUPS, DEFAULT_LANGUAGE_GROUP, @@ -24,7 +24,6 @@ import './style.scss'; const LanguageStep: React.FunctionComponent = () => { const { __ } = useI18n(); - const [ filter, setFilter ] = React.useState< string >( DEFAULT_LANGUAGE_GROUP ); const history = useHistory(); @@ -32,42 +31,6 @@ const LanguageStep: React.FunctionComponent = () => { 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 +41,15 @@ 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={ LANGUAGE_GROUPS } + defaultLananguageGroupId={ DEFAULT_LANGUAGE_GROUP } + languages={ languages } + onSelectLanguage={ ( language ) => { + changeLocale( language.langSlug ); + goBack(); + } } + /> </div> ) } </ChangeLocaleContextConsumer> diff --git a/client/landing/gutenboarding/onboarding-block/language/style.scss b/client/landing/gutenboarding/onboarding-block/language/style.scss index d71595b4e2fb2..8daf939b75ac0 100644 --- a/client/landing/gutenboarding/onboarding-block/language/style.scss +++ b/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; -} diff --git a/client/package.json b/client/package.json index 063b6dc56781b..7f0152b86b853 100644 --- a/client/package.json +++ b/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": "file:../packages/language-picker", "@automattic/load-script": "^1.0.0", "@automattic/material-design-icons": "^1.0.0", "@automattic/notifications": "^1.0.0", diff --git a/yarn.lock b/yarn.lock index 92ef88dabd252..3cf88847e1b8f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16,6 +16,15 @@ resolved "https://registry.yarnpkg.com/@automattic/color-studio/-/color-studio-2.3.0.tgz#6549e77f823514bdcf520cb2c48932c2c9db379f" integrity sha512-GRMV4PMtn2iE+30+RP33LyJSe4Qp8oILFNvk+iF8zd0LzUUaErZu86rk8YpEcLvFJzOU2BTXSewSdwyGc/sa1g== +"@automattic/language-picker@file:packages/language-picker": + version "1.0.0-alpha.3" + dependencies: + "@automattic/react-i18n" "file:../../Library/Caches/Yarn/v6/npm-@automattic-language-picker-1.0.0-alpha.3-0c765296-2de2-4d1c-a515-a0556d288183-1602189433742/node_modules/@automattic/react-i18n" + "@babel/runtime" "^7.11.1" + "@wordpress/base-styles" "^2.0.1" + "@wordpress/components" "^10.0.5" + "@wordpress/i18n" "^3.14.0" + "@automattic/lasagna@^0.6.1": version "0.6.1" resolved "https://registry.yarnpkg.com/@automattic/lasagna/-/lasagna-0.6.1.tgz#98984f268e3186c3d4455f7f2bc324d509910f0c" @@ -34,6 +43,13 @@ schema-utils "^1.0.0" webpack-sources "^1.1.0" +"@automattic/react-i18n@file:packages/react-i18n": + version "1.0.0-alpha.0" + dependencies: + "@wordpress/compose" "1.x.x - 3.x.x" + "@wordpress/i18n" "^3.14.0" + tslib "^1.10.0" + "@automattic/react-virtualized@^9.21.2": version "9.21.2" resolved "https://registry.yarnpkg.com/@automattic/react-virtualized/-/react-virtualized-9.21.2.tgz#ea14243e7e7811eaa14daed3f0a6f4579208996f" From 467acae200673348ff4bff8ac2a1d0f3fafd5f55 Mon Sep 17 00:00:00 2001 From: Sara Marcondes <saram@fastmail.com> Date: Thu, 8 Oct 2020 15:34:14 -0700 Subject: [PATCH 03/12] Correct references to language-picker package --- client/package.json | 2 +- client/tsconfig.json | 1 + packages/language-picker/package.json | 2 +- yarn.lock | 9 --------- 4 files changed, 3 insertions(+), 11 deletions(-) diff --git a/client/package.json b/client/package.json index 7f0152b86b853..35c19313b7c08 100644 --- a/client/package.json +++ b/client/package.json @@ -24,7 +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": "file:../packages/language-picker", + "@automattic/language-picker": "^1.0.0", "@automattic/load-script": "^1.0.0", "@automattic/material-design-icons": "^1.0.0", "@automattic/notifications": "^1.0.0", diff --git a/client/tsconfig.json b/client/tsconfig.json index 2caaba361e2f8..31ec8718e27c8 100644 --- a/client/tsconfig.json +++ b/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" } ], diff --git a/packages/language-picker/package.json b/packages/language-picker/package.json index 742b9e1c32c89..9f6c0091f1007 100644 --- a/packages/language-picker/package.json +++ b/packages/language-picker/package.json @@ -1,6 +1,6 @@ { "name": "@automattic/language-picker", - "version": "1.0.0-alpha.3", + "version": "1.0.0", "description": "Automattic Language Picker", "homepage": "https://github.com/Automattic/wp-calypso", "license": "GPL-2.0-or-later", diff --git a/yarn.lock b/yarn.lock index 3cf88847e1b8f..cfa08dc4e757b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16,15 +16,6 @@ resolved "https://registry.yarnpkg.com/@automattic/color-studio/-/color-studio-2.3.0.tgz#6549e77f823514bdcf520cb2c48932c2c9db379f" integrity sha512-GRMV4PMtn2iE+30+RP33LyJSe4Qp8oILFNvk+iF8zd0LzUUaErZu86rk8YpEcLvFJzOU2BTXSewSdwyGc/sa1g== -"@automattic/language-picker@file:packages/language-picker": - version "1.0.0-alpha.3" - dependencies: - "@automattic/react-i18n" "file:../../Library/Caches/Yarn/v6/npm-@automattic-language-picker-1.0.0-alpha.3-0c765296-2de2-4d1c-a515-a0556d288183-1602189433742/node_modules/@automattic/react-i18n" - "@babel/runtime" "^7.11.1" - "@wordpress/base-styles" "^2.0.1" - "@wordpress/components" "^10.0.5" - "@wordpress/i18n" "^3.14.0" - "@automattic/lasagna@^0.6.1": version "0.6.1" resolved "https://registry.yarnpkg.com/@automattic/lasagna/-/lasagna-0.6.1.tgz#98984f268e3186c3d4455f7f2bc324d509910f0c" From 755018c14038a03cbee372d80c38d56f4588db01 Mon Sep 17 00:00:00 2001 From: Sara Marcondes <saram@fastmail.com> Date: Tue, 13 Oct 2020 08:30:11 -0700 Subject: [PATCH 04/12] Clean up package --- packages/language-picker/.eslintrc.js | 10 ---------- packages/language-picker/README.md | 8 -------- packages/language-picker/jest.config.js | 5 ----- packages/language-picker/package.json | 3 +-- packages/language-picker/tsconfig.json | 3 +-- 5 files changed, 2 insertions(+), 27 deletions(-) delete mode 100644 packages/language-picker/.eslintrc.js delete mode 100644 packages/language-picker/jest.config.js diff --git a/packages/language-picker/.eslintrc.js b/packages/language-picker/.eslintrc.js deleted file mode 100644 index aeaacd69b4ece..0000000000000 --- a/packages/language-picker/.eslintrc.js +++ /dev/null @@ -1,10 +0,0 @@ -module.exports = { - overrides: [ - { - files: [ '**/test/**/*' ], - rules: { - 'import/no-nodejs-modules': 'off', - }, - }, - ], -}; diff --git a/packages/language-picker/README.md b/packages/language-picker/README.md index 2bb92063ee93b..3a58b59f75e99 100644 --- a/packages/language-picker/README.md +++ b/packages/language-picker/README.md @@ -4,8 +4,6 @@ A language picker component extracted from Gutenboarding for the purposes of cod ## Installation -Install the components and the color schemes they depend on. - ```bash yarn add @automattic/language-picker ``` @@ -15,12 +13,6 @@ yarn add @automattic/language-picker This package is developed as part of the Calypso monorepo. Run `yarn` in the root of the repository to get the required `devDependencies`. -### Tests - -`yarn run test-packages` - -`yarn run test-packages:watch` - ### Using [Storybook](https://storybook.js.org/) `yarn run language-picker:storybook:start` diff --git a/packages/language-picker/jest.config.js b/packages/language-picker/jest.config.js deleted file mode 100644 index b94a8c8661cfe..0000000000000 --- a/packages/language-picker/jest.config.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - preset: '@automattic/calypso-build', - rootDir: __dirname, - cacheDirectory: '<rootDir>/../../.cache/jest', -}; diff --git a/packages/language-picker/package.json b/packages/language-picker/package.json index 9f6c0091f1007..b8a02151ee455 100644 --- a/packages/language-picker/package.json +++ b/packages/language-picker/package.json @@ -39,8 +39,7 @@ "react-dom": "^16.8" }, "devDependencies": { - "@storybook/addon-actions": "^5.3.18", - "enzyme": "^3.11.0" + "@storybook/addon-actions": "^5.3.18" }, "scripts": { "clean": "npx rimraf dist && tsc --build --clean", diff --git a/packages/language-picker/tsconfig.json b/packages/language-picker/tsconfig.json index bdf5a4af4ced0..abb477014a378 100644 --- a/packages/language-picker/tsconfig.json +++ b/packages/language-picker/tsconfig.json @@ -28,6 +28,5 @@ "composite": true }, - "include": [ "src" ], - "exclude": [ "**/docs/*", "**/test/*" ] + "include": [ "src" ] } From ab755b923288ed2614f74b68fead46b3f402976a Mon Sep 17 00:00:00 2001 From: Sara Marcondes <saram@fastmail.com> Date: Wed, 14 Oct 2020 09:04:11 -0700 Subject: [PATCH 05/12] Remove react-i18n dependency that was breaking storybook --- packages/language-picker/package.json | 1 - packages/language-picker/src/language-picker.stories.tsx | 8 ++++---- packages/language-picker/src/language-picker.tsx | 8 +++----- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/language-picker/package.json b/packages/language-picker/package.json index b8a02151ee455..073ac8ed57a0b 100644 --- a/packages/language-picker/package.json +++ b/packages/language-picker/package.json @@ -28,7 +28,6 @@ ], "types": "dist/types", "dependencies": { - "@automattic/react-i18n": "file:../react-i18n", "@babel/runtime": "^7.11.1", "@wordpress/base-styles": "^2.0.1", "@wordpress/components": "^10.0.5", diff --git a/packages/language-picker/src/language-picker.stories.tsx b/packages/language-picker/src/language-picker.stories.tsx index b0439613b1d68..2b6bf1e9afd6b 100644 --- a/packages/language-picker/src/language-picker.stories.tsx +++ b/packages/language-picker/src/language-picker.stories.tsx @@ -2,6 +2,7 @@ * External dependencies */ import React from 'react'; +import { __ } from '@wordpress/i18n'; import LanguagePicker, { Language, LanguageGroup } from '.'; @@ -17,7 +18,6 @@ const LANGUAGES: Language[] = [ territories: [ '019' ], }, { value: 71, langSlug: 'th', name: 'ไทย', wpLocale: 'th', territories: [ '035' ] }, - { value: 455, langSlug: 'tl', name: 'Tagalog', wpLocale: 'tl', territories: [ '035' ] }, { value: 481, langSlug: 'am', name: 'አማርኛ', wpLocale: 'am', territories: [ '002' ] }, { @@ -32,18 +32,18 @@ const LANGUAGES: Language[] = [ const LANGUAGE_GROUPS: LanguageGroup[] = [ { 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: [ 'AM' ], }, { id: 'asia-pacific', default: true, - name: ( translate ) => translate( 'Asia-Pacific' ), + name: () => __( 'Asia-Pacific' ), subTerritories: [ '143', '009', '030', '034', '035' ], countries: [ 'TL', 'TH' ], }, diff --git a/packages/language-picker/src/language-picker.tsx b/packages/language-picker/src/language-picker.tsx index 15ba8deabbe53..2b41bcb3eaed7 100644 --- a/packages/language-picker/src/language-picker.tsx +++ b/packages/language-picker/src/language-picker.tsx @@ -2,13 +2,12 @@ * External dependencies */ import React, { useState } from 'react'; -import { useI18n } from '@automattic/react-i18n'; /** * WordPress dependencies */ -import { I18n } from '@wordpress/i18n'; import { Button } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; /** * Style dependencies @@ -17,7 +16,7 @@ import './style.scss'; export type LanguageGroup = { id: string; - name: ( translate: I18n[ '__' ] ) => string; + name: () => string; subTerritories?: string[]; countries?: string[]; default?: boolean; @@ -53,7 +52,6 @@ const LanguagePicker = ( { languageGroups, defaultLananguageGroupId, }: Props ) => { - const { __ } = useI18n(); const [ filter, setFilter ] = useState( defaultLananguageGroupId ); const getFilteredLanguages = () => { @@ -85,7 +83,7 @@ const LanguagePicker = ( { return ( <div key={ languageGroup.id }> <Button onClick={ onClick } className="language-picker__language-group"> - <span className={ isSelected ? 'is-selected' : '' }>{ languageGroup.name( __ ) }</span> + <span className={ isSelected ? 'is-selected' : '' }>{ languageGroup.name() }</span> </Button> </div> ); From e6322956518b952d7916b0495c5ff76aa50003e7 Mon Sep 17 00:00:00 2001 From: Sara Marcondes <saram@fastmail.com> Date: Thu, 15 Oct 2020 08:32:04 -0700 Subject: [PATCH 06/12] Fix typo and add i18n documentation --- packages/language-picker/README.md | 4 ++++ .../language-picker/src/language-picker.stories.tsx | 1 - packages/language-picker/src/language-picker.tsx | 10 ++-------- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/language-picker/README.md b/packages/language-picker/README.md index 3a58b59f75e99..cd39e3ad9b1fb 100644 --- a/packages/language-picker/README.md +++ b/packages/language-picker/README.md @@ -8,6 +8,10 @@ A language picker component extracted from Gutenboarding for the purposes of cod 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` diff --git a/packages/language-picker/src/language-picker.stories.tsx b/packages/language-picker/src/language-picker.stories.tsx index 2b6bf1e9afd6b..e9c684a1a2184 100644 --- a/packages/language-picker/src/language-picker.stories.tsx +++ b/packages/language-picker/src/language-picker.stories.tsx @@ -56,7 +56,6 @@ export const _default = () => { onSelectLanguage={ ( language ) => console.log( language ) } languageGroups={ LANGUAGE_GROUPS } languages={ LANGUAGES } - defaultLananguageGroupId="popular" /> ); }; diff --git a/packages/language-picker/src/language-picker.tsx b/packages/language-picker/src/language-picker.tsx index 2b41bcb3eaed7..6f2da4a187c1b 100644 --- a/packages/language-picker/src/language-picker.tsx +++ b/packages/language-picker/src/language-picker.tsx @@ -43,16 +43,10 @@ type Props = { onSelectLanguage: ( language: Language ) => void; languages: Language[]; languageGroups: LanguageGroup[]; - defaultLananguageGroupId: string; }; -const LanguagePicker = ( { - onSelectLanguage, - languages, - languageGroups, - defaultLananguageGroupId, -}: Props ) => { - const [ filter, setFilter ] = useState( defaultLananguageGroupId ); +const LanguagePicker = ( { onSelectLanguage, languages, languageGroups }: Props ) => { + const [ filter, setFilter ] = useState( languageGroups[ 0 ].id ); const getFilteredLanguages = () => { switch ( filter ) { From 050e38f2886d46f63d51ad32599645938a463ae1 Mon Sep 17 00:00:00 2001 From: Sara Marcondes <saram@fastmail.com> Date: Thu, 15 Oct 2020 09:54:41 -0700 Subject: [PATCH 07/12] Commit missing yarn.lock changes --- yarn.lock | 7 ------- 1 file changed, 7 deletions(-) diff --git a/yarn.lock b/yarn.lock index cfa08dc4e757b..92ef88dabd252 100644 --- a/yarn.lock +++ b/yarn.lock @@ -34,13 +34,6 @@ schema-utils "^1.0.0" webpack-sources "^1.1.0" -"@automattic/react-i18n@file:packages/react-i18n": - version "1.0.0-alpha.0" - dependencies: - "@wordpress/compose" "1.x.x - 3.x.x" - "@wordpress/i18n" "^3.14.0" - tslib "^1.10.0" - "@automattic/react-virtualized@^9.21.2": version "9.21.2" resolved "https://registry.yarnpkg.com/@automattic/react-virtualized/-/react-virtualized-9.21.2.tgz#ea14243e7e7811eaa14daed3f0a6f4579208996f" From 29342edc9905033f24f136d07e5d8921b714bf24 Mon Sep 17 00:00:00 2001 From: Sara Marcondes <saram@fastmail.com> Date: Thu, 15 Oct 2020 10:11:46 -0700 Subject: [PATCH 08/12] Remove non-existent prop --- .../gutenboarding/onboarding-block/language/index.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/client/landing/gutenboarding/onboarding-block/language/index.tsx b/client/landing/gutenboarding/onboarding-block/language/index.tsx index cacded57d57a0..071befa5ded3b 100644 --- a/client/landing/gutenboarding/onboarding-block/language/index.tsx +++ b/client/landing/gutenboarding/onboarding-block/language/index.tsx @@ -12,10 +12,7 @@ import LanguagePicker from '@automattic/language-picker'; */ import { ChangeLocaleContextConsumer } from '../../components/locale-context'; import { languages } from '../../../../languages'; -import { - LANGUAGE_GROUPS, - DEFAULT_LANGUAGE_GROUP, -} from '../../../../components/language-picker/constants'; +import { LANGUAGE_GROUPS } from '../../../../components/language-picker/constants'; /** * Style dependencies @@ -43,7 +40,6 @@ const LanguageStep: React.FunctionComponent = () => { </div> <LanguagePicker languageGroups={ LANGUAGE_GROUPS } - defaultLananguageGroupId={ DEFAULT_LANGUAGE_GROUP } languages={ languages } onSelectLanguage={ ( language ) => { changeLocale( language.langSlug ); From 212a8b9690887c01a645e57b9be3003140597309 Mon Sep 17 00:00:00 2001 From: Sara Marcondes <saram@fastmail.com> Date: Tue, 20 Oct 2020 08:48:03 -0700 Subject: [PATCH 09/12] Use wp/i18n to translate region names --- client/components/language-picker/constants.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/client/components/language-picker/constants.js b/client/components/language-picker/constants.js index c5c7bf04b3da9..b1a55fe2d1975 100644 --- a/client/components/language-picker/constants.js +++ b/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', From e1d2ca7a5a7d0ffb1798ad028d3180769cc9eaff Mon Sep 17 00:00:00 2001 From: Sara Marcondes <saram@fastmail.com> Date: Tue, 20 Oct 2020 08:53:24 -0700 Subject: [PATCH 10/12] Wrap all styles and use more specific name --- .../language-picker/src/language-picker.tsx | 19 +++-- packages/language-picker/src/style.scss | 82 ++++++++++--------- 2 files changed, 53 insertions(+), 48 deletions(-) diff --git a/packages/language-picker/src/language-picker.tsx b/packages/language-picker/src/language-picker.tsx index 6f2da4a187c1b..bd1dd8ac2f181 100644 --- a/packages/language-picker/src/language-picker.tsx +++ b/packages/language-picker/src/language-picker.tsx @@ -1,3 +1,4 @@ +/* eslint-disable wpcalypso/jsx-classname-namespace */ /** * External dependencies */ @@ -76,7 +77,7 @@ const LanguagePicker = ( { onSelectLanguage, languages, languageGroups }: Props return ( <div key={ languageGroup.id }> - <Button onClick={ onClick } className="language-picker__language-group"> + <Button onClick={ onClick } className="language-picker-component__language-group"> <span className={ isSelected ? 'is-selected' : '' }>{ languageGroup.name() }</span> </Button> </div> @@ -85,14 +86,16 @@ const LanguagePicker = ( { onSelectLanguage, languages, languageGroups }: Props }; return ( - <> - <div className="language-picker__regions-label">{ __( 'regions' ) }</div> - <div className="language-picker__content"> - <div className="language-picker__category-filters">{ renderCategoryButtons() }</div> - <div className="language-picker__language-buttons"> + <div className="language-picker-component"> + <div className="language-picker-component__regions-label">{ __( 'regions' ) }</div> + <div className="language-picker-component__content"> + <div className="language-picker-component__category-filters"> + { renderCategoryButtons() } + </div> + <div className="language-picker-component__language-buttons"> { getFilteredLanguages().map( ( language ) => ( <Button - className="language-picker__language-button" + className="language-picker-component__language-button" key={ language.langSlug } onClick={ () => onSelectLanguage( language ) } title={ language.name } @@ -102,7 +105,7 @@ const LanguagePicker = ( { onSelectLanguage, languages, languageGroups }: Props ) ) } </div> </div> - </> + </div> ); }; diff --git a/packages/language-picker/src/style.scss b/packages/language-picker/src/style.scss index 9d7ca759f2fe2..659900cc51341 100644 --- a/packages/language-picker/src/style.scss +++ b/packages/language-picker/src/style.scss @@ -2,46 +2,48 @@ @import '~@wordpress/base-styles/mixins'; @import '~@wordpress/base-styles/variables'; -.language-picker__language-group { - width: 100%; -} - -.language-picker__language-group > span { - padding-bottom: 4px; - &.is-selected { - padding-bottom: 2px; - border-bottom: 2px solid #3582c4; +.language-picker-component { + .language-picker-component__language-group { + width: 100%; } -} - -.language-picker__regions-label { - font-family: $default-font; - margin: 6px 12px; - color: $gray-600; - /* stylelint-disable-next-line scales/font-size */ - font-size: 13px; - text-transform: uppercase; -} - -.language-picker__content { - display: flex; -} - -.language-picker__category-filters { - min-width: 170px; - - @include break-small { - min-width: 220px; - margin-right: 60px; + + .language-picker-component__language-group > span { + padding-bottom: 4px; + &.is-selected { + padding-bottom: 2px; + border-bottom: 2px solid #3582c4; + } + } + + .language-picker-component__regions-label { + font-family: $default-font; + margin: 6px 12px; + color: $gray-600; + /* stylelint-disable-next-line scales/font-size */ + font-size: 13px; + text-transform: uppercase; + } + + .language-picker-component__content { + display: flex; + } + + .language-picker-component__category-filters { + min-width: 170px; + + @include break-small { + min-width: 220px; + margin-right: 60px; + } + } + + .language-picker-component__language-buttons { + display: flex; + flex-wrap: wrap; + align-content: flex-start; + } + + .language-picker-component__language-button { + width: 165px; } -} - -.language-picker__language-buttons { - display: flex; - flex-wrap: wrap; - align-content: flex-start; -} - -.language-picker__language-button { - width: 165px; } From c1817302acf43e152d5515c6e8c3d6f218f5e018 Mon Sep 17 00:00:00 2001 From: Sara Marcondes <saram@fastmail.com> Date: Fri, 23 Oct 2020 11:43:28 -0700 Subject: [PATCH 11/12] Fix various translation bugs --- .../onboarding-block/language/index.tsx | 5 +- packages/language-picker/package.json | 1 + packages/language-picker/src/constants.ts | 294 ++++++++++++++++++ packages/language-picker/src/index.ts | 1 + .../language-picker/src/language-picker.tsx | 7 +- packages/language-picker/src/types.d.ts | 1 + 6 files changed, 304 insertions(+), 5 deletions(-) create mode 100644 packages/language-picker/src/constants.ts create mode 100644 packages/language-picker/src/types.d.ts diff --git a/client/landing/gutenboarding/onboarding-block/language/index.tsx b/client/landing/gutenboarding/onboarding-block/language/index.tsx index 071befa5ded3b..c7c233b144f86 100644 --- a/client/landing/gutenboarding/onboarding-block/language/index.tsx +++ b/client/landing/gutenboarding/onboarding-block/language/index.tsx @@ -5,14 +5,13 @@ import * as React from 'react'; import { useHistory } from 'react-router-dom'; import { useI18n } from '@automattic/react-i18n'; import { ActionButtons, BackButton, Title } from '@automattic/onboarding'; -import LanguagePicker from '@automattic/language-picker'; +import LanguagePicker, { createLanguageGroups } from '@automattic/language-picker'; /** * Internal dependencies */ import { ChangeLocaleContextConsumer } from '../../components/locale-context'; import { languages } from '../../../../languages'; -import { LANGUAGE_GROUPS } from '../../../../components/language-picker/constants'; /** * Style dependencies @@ -39,7 +38,7 @@ const LanguageStep: React.FunctionComponent = () => { </ActionButtons> </div> <LanguagePicker - languageGroups={ LANGUAGE_GROUPS } + languageGroups={ createLanguageGroups( __ ) } languages={ languages } onSelectLanguage={ ( language ) => { changeLocale( language.langSlug ); diff --git a/packages/language-picker/package.json b/packages/language-picker/package.json index 073ac8ed57a0b..c1bba3a97b44a 100644 --- a/packages/language-picker/package.json +++ b/packages/language-picker/package.json @@ -28,6 +28,7 @@ ], "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", diff --git a/packages/language-picker/src/constants.ts b/packages/language-picker/src/constants.ts new file mode 100644 index 0000000000000..755fb213873fc --- /dev/null +++ b/packages/language-picker/src/constants.ts @@ -0,0 +1,294 @@ +/** + * Internal dependencies + */ +import { LanguageGroup } from './language-picker'; +import { I18nReact } from '@automattic/react-i18n'; + +export const createLanguageGroups = ( __: I18nReact[ '__' ] ): LanguageGroup[] => [ + { + id: 'popular', + name: () => __( 'Popular languages' ), + }, + { + id: 'africa-middle-east', + name: () => __( 'Africa and Middle East' ), + subTerritories: [ '145', '002' ], + countries: [ + 'AE', + 'AM', + 'AO', + 'AZ', + 'BF', + 'BH', + 'BI', + 'BJ', + 'BW', + 'CD', + 'CF', + 'CG', + 'CI', + 'CM', + 'CV', + 'CY', + 'DJ', + 'DZ', + 'EA', + 'EG', + 'EH', + 'ER', + 'ET', + 'GA', + 'GE', + 'GH', + 'GM', + 'GN', + 'GQ', + 'GW', + 'IC', + 'IL', + 'IQ', + 'JO', + 'KE', + 'KM', + 'KW', + 'LB', + 'LR', + 'LS', + 'LY', + 'MA', + 'MG', + 'ML', + 'MR', + 'MU', + 'MW', + 'MZ', + 'NA', + 'NE', + 'NG', + 'OM', + 'PS', + 'QA', + 'RE', + 'RW', + 'SA', + 'SC', + 'SD', + 'SH', + 'SL', + 'SN', + 'SO', + 'SS', + 'ST', + 'SY', + 'SZ', + 'TD', + 'TG', + 'TN', + 'TR', + 'TZ', + 'UG', + 'YE', + 'YT', + 'ZA', + 'ZM', + 'ZW', + ], + }, + { + id: 'americas', + name: () => __( 'Americas' ), + subTerritories: [ '019' ], + countries: [ + 'AG', + 'AI', + 'AR', + 'AW', + 'BB', + 'BL', + 'BM', + 'BO', + 'BQ', + 'BR', + 'BS', + 'BZ', + 'CA', + 'CL', + 'CO', + 'CR', + 'CU', + 'CW', + 'DM', + 'DO', + 'EC', + 'FK', + 'GD', + 'GF', + 'GL', + 'GP', + 'GT', + 'GY', + 'HN', + 'HT', + 'JM', + 'KN', + 'KY', + 'LC', + 'MF', + 'MQ', + 'MS', + 'MX', + 'NI', + 'PA', + 'PE', + 'PM', + 'PR', + 'PY', + 'SR', + 'SV', + 'SX', + 'TC', + 'TT', + 'US', + 'UY', + 'VC', + 'VE', + 'VG', + 'VI', + ], + }, + { + id: 'asia-pacific', + default: true, + name: () => __( 'Asia-Pacific' ), + subTerritories: [ '143', '009', '030', '034', '035' ], + countries: [ + 'AC', + 'AF', + 'AQ', + 'AS', + 'AU', + 'BD', + 'BN', + 'BT', + 'BV', + 'CC', + 'CK', + 'CN', + 'CP', + 'CX', + 'DG', + 'FJ', + 'FM', + 'GS', + 'GU', + 'HK', + 'HM', + 'ID', + 'IN', + 'IO', + 'IR', + 'JP', + 'KG', + 'KH', + 'KI', + 'KP', + 'KR', + 'KZ', + 'LA', + 'LK', + 'MH', + 'MM', + 'MN', + 'MO', + 'MP', + 'MV', + 'MY', + 'NC', + 'NF', + 'NP', + 'NR', + 'NU', + 'NZ', + 'PF', + 'PG', + 'PH', + 'PK', + 'PN', + 'PW', + 'QO', + 'SB', + 'SG', + 'TA', + 'TF', + 'TH', + 'TJ', + 'TK', + 'TL', + 'TM', + 'TO', + 'TV', + 'TW', + 'UM', + 'UZ', + 'VN', + 'VU', + 'WF', + 'WS', + ], + }, + { + id: 'eastern-europe', + name: () => __( 'Eastern Europe' ), + subTerritories: [ '151' ], + countries: [ 'BG', 'BY', 'CZ', 'HU', 'MD', 'PL', 'RO', 'RU', 'SK', 'UA' ], + }, + { + id: 'western-europe', + name: () => __( 'Western Europe' ), + subTerritories: [ '154', '155', '039' ], + countries: [ + 'AD', + 'AL', + 'AT', + 'AX', + 'BA', + 'BE', + 'CH', + 'DE', + 'DK', + 'EE', + 'ES', + 'FI', + 'FO', + 'FR', + 'GB', + 'GG', + 'GI', + 'GR', + 'HR', + 'IE', + 'IM', + 'IS', + 'IT', + 'JE', + 'LI', + 'LT', + 'LU', + 'LV', + 'MC', + 'ME', + 'MK', + 'MT', + 'NL', + 'NO', + 'PT', + 'RS', + 'SE', + 'SI', + 'SJ', + 'SM', + 'VA', + 'XK', + ], + }, +]; diff --git a/packages/language-picker/src/index.ts b/packages/language-picker/src/index.ts index f16eecca2ec25..83019881af6e3 100644 --- a/packages/language-picker/src/index.ts +++ b/packages/language-picker/src/index.ts @@ -1,2 +1,3 @@ export * from './language-picker'; export { default } from './language-picker'; +export * from './constants'; diff --git a/packages/language-picker/src/language-picker.tsx b/packages/language-picker/src/language-picker.tsx index bd1dd8ac2f181..467cd3fe94a59 100644 --- a/packages/language-picker/src/language-picker.tsx +++ b/packages/language-picker/src/language-picker.tsx @@ -3,12 +3,12 @@ * External dependencies */ import React, { useState } from 'react'; +import { useI18n } from '@automattic/react-i18n'; /** * WordPress dependencies */ import { Button } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; /** * Style dependencies @@ -47,6 +47,7 @@ type Props = { }; const LanguagePicker = ( { onSelectLanguage, languages, languageGroups }: Props ) => { + const { __ } = useI18n(); const [ filter, setFilter ] = useState( languageGroups[ 0 ].id ); const getFilteredLanguages = () => { @@ -87,7 +88,9 @@ const LanguagePicker = ( { onSelectLanguage, languages, languageGroups }: Props return ( <div className="language-picker-component"> - <div className="language-picker-component__regions-label">{ __( 'regions' ) }</div> + <div className="language-picker-component__regions-label"> + { __( 'regions', __i18n_text_domain__ ) } + </div> <div className="language-picker-component__content"> <div className="language-picker-component__category-filters"> { renderCategoryButtons() } diff --git a/packages/language-picker/src/types.d.ts b/packages/language-picker/src/types.d.ts new file mode 100644 index 0000000000000..e4d38b2ca9e4e --- /dev/null +++ b/packages/language-picker/src/types.d.ts @@ -0,0 +1 @@ +declare const __i18n_text_domain__: string; From bf3aebc2d92a6caae397330e8898a33fcbed923a Mon Sep 17 00:00:00 2001 From: Sara Marcondes <saram@fastmail.com> Date: Fri, 23 Oct 2020 11:48:19 -0700 Subject: [PATCH 12/12] Remove language-picker storybook --- package.json | 1 - packages/language-picker/.storybook/main.js | 26 -------- .../language-picker/.storybook/preview.js | 1 - packages/language-picker/CHANGELOG.md | 4 +- packages/language-picker/README.md | 4 -- packages/language-picker/package.json | 3 - .../src/language-picker.stories.tsx | 61 ------------------- 7 files changed, 2 insertions(+), 98 deletions(-) delete mode 100644 packages/language-picker/.storybook/main.js delete mode 100644 packages/language-picker/.storybook/preview.js delete mode 100644 packages/language-picker/src/language-picker.stories.tsx diff --git a/package.json b/package.json index ad89ab9675c23..c2f4859328036 100644 --- a/package.json +++ b/package.json @@ -158,7 +158,6 @@ "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", - "language-picker:storybook:start": "start-storybook -c packages/language-picker/.storybook", "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" }, diff --git a/packages/language-picker/.storybook/main.js b/packages/language-picker/.storybook/main.js deleted file mode 100644 index 9a84281147868..0000000000000 --- a/packages/language-picker/.storybook/main.js +++ /dev/null @@ -1,26 +0,0 @@ -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' ) ], - }, - }, - ], -}; diff --git a/packages/language-picker/.storybook/preview.js b/packages/language-picker/.storybook/preview.js deleted file mode 100644 index 521d3335699b9..0000000000000 --- a/packages/language-picker/.storybook/preview.js +++ /dev/null @@ -1 +0,0 @@ -import '@wordpress/components/build-style/style.css'; diff --git a/packages/language-picker/CHANGELOG.md b/packages/language-picker/CHANGELOG.md index bec300287b9ef..7342cb6eaca4a 100644 --- a/packages/language-picker/CHANGELOG.md +++ b/packages/language-picker/CHANGELOG.md @@ -1,3 +1,3 @@ -## 1.0.0 +## 1.0.0-alpha.0 -- Add LanguagePicker +- Add LanguagePicker based on Gutenboarding language picker diff --git a/packages/language-picker/README.md b/packages/language-picker/README.md index cd39e3ad9b1fb..f77b8d8287a78 100644 --- a/packages/language-picker/README.md +++ b/packages/language-picker/README.md @@ -16,7 +16,3 @@ This package depends directly on `@wordpress/i18n` for translations and the exis 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 language-picker:storybook:start` diff --git a/packages/language-picker/package.json b/packages/language-picker/package.json index c1bba3a97b44a..15b73ac1c7e9a 100644 --- a/packages/language-picker/package.json +++ b/packages/language-picker/package.json @@ -38,9 +38,6 @@ "react": "^16.8", "react-dom": "^16.8" }, - "devDependencies": { - "@storybook/addon-actions": "^5.3.18" - }, "scripts": { "clean": "npx rimraf dist && tsc --build --clean", "prepublish": "yarn run clean", diff --git a/packages/language-picker/src/language-picker.stories.tsx b/packages/language-picker/src/language-picker.stories.tsx deleted file mode 100644 index e9c684a1a2184..0000000000000 --- a/packages/language-picker/src/language-picker.stories.tsx +++ /dev/null @@ -1,61 +0,0 @@ -/** - * External dependencies - */ -import React from 'react'; -import { __ } from '@wordpress/i18n'; - -import LanguagePicker, { Language, LanguageGroup } from '.'; - -export default { title: 'LanguagePicker' }; - -const LANGUAGES: Language[] = [ - { - value: 1, - langSlug: 'en', - name: 'English', - wpLocale: 'en_US', - popular: 1, - territories: [ '019' ], - }, - { value: 71, langSlug: 'th', name: 'ไทย', wpLocale: 'th', territories: [ '035' ] }, - { value: 455, langSlug: 'tl', name: 'Tagalog', wpLocale: 'tl', territories: [ '035' ] }, - { value: 481, langSlug: 'am', name: 'አማርኛ', wpLocale: 'am', territories: [ '002' ] }, - { - value: 482, - langSlug: 'en-gb', - name: 'English (UK)', - wpLocale: 'en_GB', - territories: [ '154' ], - }, -]; - -const LANGUAGE_GROUPS: LanguageGroup[] = [ - { - id: 'popular', - name: () => __( 'Popular languages' ), - }, - { - id: 'africa-middle-east', - name: () => __( 'Africa and Middle East' ), - subTerritories: [ '145', '002' ], - countries: [ 'AM' ], - }, - { - id: 'asia-pacific', - default: true, - name: () => __( 'Asia-Pacific' ), - subTerritories: [ '143', '009', '030', '034', '035' ], - countries: [ 'TL', 'TH' ], - }, -]; - -export const _default = () => { - return ( - <LanguagePicker - // eslint-disable-next-line no-console - onSelectLanguage={ ( language ) => console.log( language ) } - languageGroups={ LANGUAGE_GROUPS } - languages={ LANGUAGES } - /> - ); -};