From efed77e2c45cad84da268c2a4abd30cd0add75ee Mon Sep 17 00:00:00 2001 From: Jarret Moses Date: Wed, 3 May 2017 10:17:35 -0400 Subject: [PATCH 01/12] feature: add TextHelpers singleton class --- src/index.js | 4 ++++ src/lib/text.js | 59 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+) create mode 100644 src/lib/text.js diff --git a/src/index.js b/src/index.js index 33fc597..97d0f49 100644 --- a/src/index.js +++ b/src/index.js @@ -7,6 +7,7 @@ import { lockPortrait, unlockOrientations, } from './lib/orientation'; +import TextHelpers from './text'; export { // Orientation @@ -20,4 +21,7 @@ export { // Dimensions getDeviceHeight, getDeviceWidth, + + // Text + TextHelpers }; diff --git a/src/lib/text.js b/src/lib/text.js new file mode 100644 index 0000000..79568de --- /dev/null +++ b/src/lib/text.js @@ -0,0 +1,59 @@ + +/** + * @name TextHelpers + * @summary - Singleton class for handling any text related helpers + * @return {undefined} + */ +export default class TextHelpers { + /** + * @name constructor + * @summary - Method called on initialization of TextHelpers instance + * @param {object} fontSizes - object containing defined font sizes + * @param {object} lineHeights - object containing defined line heights + * @return {undefined} + */ + constructor(fontSizes, lineHeights) { + this._fontSizes = fontSizes; + this._lineHeights = lineHeights; + } + + /** + * @name handleError + * @summary - Generic method for throwing errors + * @param {string} message - the error message to be thrown + * @return {undefined} + */ + handleError(message) { + throw new Error(message); + } + + /** + * @name getFontSize + * @summary - Method for returning object containing font size and + * line height dependent on passed size argument + * @param {string} size - desired size of the font and line height + * @return {object} + */ + getFontSize(size) { + + if (typeof size !== 'string') { + this.handleError('Passed size argument must be a string'); + } + + const fontSize = this._fontSizes[size]; + const lineHeight = this._lineHeights[size]; + + if (!fontSize) { + this.handleError(`Size ${size} is not a supported font size`); + } + + if (!lineHeight) { + this.handleError(`Size ${size} is not a supported line height`); + } + + return { + fontSize, + lineHeight + } + } +} \ No newline at end of file From e3a076265bdb9b582eb3c45bd60cecb4167dbd9a Mon Sep 17 00:00:00 2001 From: Jarret Moses Date: Wed, 3 May 2017 10:29:26 -0400 Subject: [PATCH 02/12] chore: update Readme --- README.md | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index b89a59f..d519f8d 100644 --- a/README.md +++ b/README.md @@ -31,10 +31,31 @@ react-native link react-native-orientation | lockPortrait | `RNUtils.lockPortrait()` | Locks the device's viewport to the Portrait mode. Disables landscape. | | unlockOrientations | `RNUtils.unlockOrientations()` | Unlocks any previous locking behavior applied by `lockPortrait` or `lockLandscape`. | +### Dimensions + +| Function | Usage | Utility | +|-----------|-------|---------| +| getFontSizes | textHelpers.getFontSizes(size) | returns an object with a font size and line height based on size argument | + +**Example Usage** + +``` +import TextHelpers from 'rn-utils' + +const fontSizes = {small: 8, medium: 12}; +const lineHeights = {small: 12, medium: 16}; + +const textHelpers = new TextHelpers(fintSizes, lineHeights); + +const fontStyles = { + ...textHelpers.getFontSizes('small'); +} +``` + ## Roadmap The aim for this package is to introduce an ever growing list of React Native utilities that can be used when developing real-world scalable applications. With that in mind, below is the list of items I'd like to tackle next. These could be full rewrites of utilities or extracting it from current React Native projects. -- [ ] Font Sizes / Line Heights +- [x] Font Sizes / Line Heights - [ ] Legacy Operating Systems - [ ] Themes (?) - [ ] Animations (?) From d5f8db5aac8649def9f50ff010386ed19df94cb9 Mon Sep 17 00:00:00 2001 From: Jarret Moses Date: Wed, 3 May 2017 10:30:14 -0400 Subject: [PATCH 03/12] chore: fix text --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d519f8d..294d18f 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ react-native link react-native-orientation | Function | Usage | Utility | |-----------|-------|---------| -| getFontSizes | textHelpers.getFontSizes(size) | returns an object with a font size and line height based on size argument | +| getFontSizes | textHelpers.getFontSizes(size) | Returns an object with a font size and line height based on size argument | **Example Usage** From 402b40d8b6a144053c77bd60d7025fb004400d55 Mon Sep 17 00:00:00 2001 From: Jarret Moses Date: Wed, 3 May 2017 10:31:40 -0400 Subject: [PATCH 04/12] refactor: add newline cause github complained --- src/lib/text.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/text.js b/src/lib/text.js index 79568de..9605e91 100644 --- a/src/lib/text.js +++ b/src/lib/text.js @@ -56,4 +56,4 @@ export default class TextHelpers { lineHeight } } -} \ No newline at end of file +} From b70275d360ee055ec88d38dd64c6c6b1949a835a Mon Sep 17 00:00:00 2001 From: Jarret Moses Date: Wed, 3 May 2017 10:38:13 -0400 Subject: [PATCH 05/12] remove a space --- src/lib/text.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/text.js b/src/lib/text.js index 9605e91..f88fb40 100644 --- a/src/lib/text.js +++ b/src/lib/text.js @@ -35,7 +35,6 @@ export default class TextHelpers { * @return {object} */ getFontSize(size) { - if (typeof size !== 'string') { this.handleError('Passed size argument must be a string'); } From 50f468917c81ed157fe183635ffad2f44d2c988b Mon Sep 17 00:00:00 2001 From: Jarret Moses Date: Wed, 3 May 2017 10:44:25 -0400 Subject: [PATCH 06/12] refactor: break out font size and line heights to their own methods just in case you want them individually --- README.md | 6 ++++-- src/lib/text.js | 42 +++++++++++++++++++++++++++++++++++------- 2 files changed, 39 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 294d18f..4939001 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,9 @@ react-native link react-native-orientation | Function | Usage | Utility | |-----------|-------|---------| -| getFontSizes | textHelpers.getFontSizes(size) | Returns an object with a font size and line height based on size argument | +| getFontSize | textHelpers.getFontSize(size) | Returns a font size baed on size argument | +| getLineHeight | textHelpers.getLineHeight(size) | Returns a line height based on size argument | +| getFontStyles | textHelpers.getFontStyles(size) | Returns an object with a font size and line height based on size argument | **Example Usage** @@ -48,7 +50,7 @@ const lineHeights = {small: 12, medium: 16}; const textHelpers = new TextHelpers(fintSizes, lineHeights); const fontStyles = { - ...textHelpers.getFontSizes('small'); + ...textHelpers.getFontStyles('small'); } ``` diff --git a/src/lib/text.js b/src/lib/text.js index f88fb40..954e1ec 100644 --- a/src/lib/text.js +++ b/src/lib/text.js @@ -27,10 +27,29 @@ export default class TextHelpers { throw new Error(message); } + /** + * @name getLineHeight + * @summary - Method for returning a line height dependent on passed size argument + * @param {string} size - desired size of the font and line height + * @return {object} + */ + getLineHeight(size) { + if (typeof size !== 'string') { + this.handleError('Passed size argument must be a string'); + } + + const lineHeight = this._lineHeights[size]; + + if (!lineHeight) { + this.handleError(`Size ${size} is not a supported line height`); + } + + return lineHeight; + } + /** * @name getFontSize - * @summary - Method for returning object containing font size and - * line height dependent on passed size argument + * @summary - Method for returning a font size dependent on passed size argument * @param {string} size - desired size of the font and line height * @return {object} */ @@ -40,19 +59,28 @@ export default class TextHelpers { } const fontSize = this._fontSizes[size]; - const lineHeight = this._lineHeights[size]; if (!fontSize) { this.handleError(`Size ${size} is not a supported font size`); } - if (!lineHeight) { - this.handleError(`Size ${size} is not a supported line height`); - } - return { fontSize, lineHeight } } + + /** + * @name getFontStyles + * @summary - Method for returning object containing font size and + * line height dependent on passed size argument + * @param {string} size - desired size of the font and line height + * @return {object} + */ + getFontStyles(size) { + return { + fontSize: this.getFontSize(size), + lineHeight: this.getLineHeight(size) + } + } } From b332d8a893cd495390462feede1042e576b3ca94 Mon Sep 17 00:00:00 2001 From: Jarret Moses Date: Wed, 3 May 2017 10:46:19 -0400 Subject: [PATCH 07/12] fix: return just fontSize --- src/lib/text.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/lib/text.js b/src/lib/text.js index 954e1ec..005540e 100644 --- a/src/lib/text.js +++ b/src/lib/text.js @@ -64,10 +64,7 @@ export default class TextHelpers { this.handleError(`Size ${size} is not a supported font size`); } - return { - fontSize, - lineHeight - } + return fontSize; } /** From 3ed668c8e05489ac4523388e6e942470fcca3c7c Mon Sep 17 00:00:00 2001 From: Jarret Moses Date: Wed, 3 May 2017 10:48:30 -0400 Subject: [PATCH 08/12] chore: jsDoc tweak --- src/lib/text.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/text.js b/src/lib/text.js index 005540e..96430c0 100644 --- a/src/lib/text.js +++ b/src/lib/text.js @@ -69,7 +69,7 @@ export default class TextHelpers { /** * @name getFontStyles - * @summary - Method for returning object containing font size and + * @summary - Method for returning object containing a font size and * line height dependent on passed size argument * @param {string} size - desired size of the font and line height * @return {object} From 76f9adfc96fd25c82a79087f15bd23e7f198ea43 Mon Sep 17 00:00:00 2001 From: Jarret Moses Date: Wed, 3 May 2017 10:51:13 -0400 Subject: [PATCH 09/12] chore: update Readme --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4939001..9410b56 100644 --- a/README.md +++ b/README.md @@ -35,9 +35,9 @@ react-native link react-native-orientation | Function | Usage | Utility | |-----------|-------|---------| -| getFontSize | textHelpers.getFontSize(size) | Returns a font size baed on size argument | -| getLineHeight | textHelpers.getLineHeight(size) | Returns a line height based on size argument | -| getFontStyles | textHelpers.getFontStyles(size) | Returns an object with a font size and line height based on size argument | +| getFontSize | `textHelpers.getFontSize(size)` | Returns a font size baed on size argument | +| getLineHeight | `textHelpers.getLineHeight(size)` | Returns a line height based on size argument | +| getFontStyles | `textHelpers.getFontStyles(size)` | Returns an object with a font size and line height based on size argument | **Example Usage** From 4ff394640d0040eb3b0fe59aaac7014e13418a8b Mon Sep 17 00:00:00 2001 From: Jarret Moses Date: Wed, 3 May 2017 10:52:22 -0400 Subject: [PATCH 10/12] fix typo... --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9410b56..266691a 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ import TextHelpers from 'rn-utils' const fontSizes = {small: 8, medium: 12}; const lineHeights = {small: 12, medium: 16}; -const textHelpers = new TextHelpers(fintSizes, lineHeights); +const textHelpers = new TextHelpers(fontSizes, lineHeights); const fontStyles = { ...textHelpers.getFontStyles('small'); From 639bbb39647ef9e855357fa607ec87d86770e0e9 Mon Sep 17 00:00:00 2001 From: Jarret Moses Date: Wed, 3 May 2017 10:53:34 -0400 Subject: [PATCH 11/12] chore: update dimensions to Text Helpers --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 266691a..50554a8 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ react-native link react-native-orientation | lockPortrait | `RNUtils.lockPortrait()` | Locks the device's viewport to the Portrait mode. Disables landscape. | | unlockOrientations | `RNUtils.unlockOrientations()` | Unlocks any previous locking behavior applied by `lockPortrait` or `lockLandscape`. | -### Dimensions +### Text Helpers | Function | Usage | Utility | |-----------|-------|---------| From af69a635435f49648d8c5d8390e92a1bdf0ff784 Mon Sep 17 00:00:00 2001 From: Jarret Moses Date: Wed, 3 May 2017 10:54:10 -0400 Subject: [PATCH 12/12] typo... --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 50554a8..7b30624 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ react-native link react-native-orientation | Function | Usage | Utility | |-----------|-------|---------| -| getFontSize | `textHelpers.getFontSize(size)` | Returns a font size baed on size argument | +| getFontSize | `textHelpers.getFontSize(size)` | Returns a font size based on size argument | | getLineHeight | `textHelpers.getLineHeight(size)` | Returns a line height based on size argument | | getFontStyles | `textHelpers.getFontStyles(size)` | Returns an object with a font size and line height based on size argument |