18 |
19 |
21 |
22 |
24 |
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/.releaserc:
--------------------------------------------------------------------------------
1 | {
2 | "branch": "master",
3 | "plugins": [
4 | "@semantic-release/commit-analyzer",
5 | "@semantic-release/release-notes-generator",
6 | [
7 | "@semantic-release/changelog",
8 | {
9 | "changelogFile": "CHANGELOG.md",
10 | "changelogTitle": "# Semantic Versioning Changelog"
11 | }
12 | ],
13 | "@semantic-release/npm",
14 | [
15 | "@semantic-release/git",
16 | {
17 | "assets": [
18 | "CHANGELOG.md", "package.json"
19 | ],
20 | "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
21 | }
22 | ],
23 | "@semantic-release/github"
24 | ]
25 | }
--------------------------------------------------------------------------------
/.circleci/config.yml:
--------------------------------------------------------------------------------
1 | # trigger build
2 | version: 2
3 | debug: true
4 | jobs:
5 | build:
6 | docker:
7 | - image: circleci/node:12.18.4
8 | steps:
9 | - checkout
10 | - run: yarn install
11 | - run: yarn run build
12 | - run: yarn run lint
13 | - run: yarn run test
14 | - persist_to_workspace:
15 | root: .
16 | paths:
17 | - .
18 | publish:
19 | docker:
20 | - image: circleci/node:12.18.4
21 | steps:
22 | - attach_workspace:
23 | at: .
24 | - run: npx semantic-release
25 | workflows:
26 | version: 2
27 | build:
28 | jobs:
29 | - build
30 | - publish:
31 | requires:
32 | - build
33 | filters:
34 | branches:
35 | only:
36 | - master
37 |
--------------------------------------------------------------------------------
/examples/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "text-provider-sample",
3 | "version": "1.0.0",
4 | "description": "Sample project to demo text-provider usage",
5 | "keywords": [
6 | "react",
7 | "text-provider"
8 | ],
9 | "author": {
10 | "name": "Niti Singhal",
11 | "url": "https://nitisinghal.com",
12 | "github": "nsinghal12"
13 | },
14 | "main": "src/index.js",
15 | "dependencies": {
16 | "react": "16.13.1",
17 | "react-dom": "16.13.1",
18 | "react-scripts": "3.4.3",
19 | "text-provider": "0.0.37"
20 | },
21 | "scripts": {
22 | "start": "react-scripts start",
23 | "build": "react-scripts build",
24 | "test": "react-scripts test --env=jsdom",
25 | "eject": "react-scripts eject"
26 | },
27 | "browserslist": [
28 | ">0.2%",
29 | "not dead",
30 | "not ie <= 11",
31 | "not op_mini all"
32 | ]
33 | }
34 |
--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
1 | # `text-provider` example
2 |
3 | This folder contains a very basic example on how to
4 | use the `text-provider` library in your own React project.
5 | This sample is based on the [Create React App](https://github.com/facebook/create-react-app) sample application.
6 |
7 | ## Running the sample
8 |
9 | To run the sample on your local machine, clone this
10 | repository and then follow the below instructions:
11 |
12 | ```sh
13 | # clone this repo
14 | $ git clone git@github.com:intuit/text-provider.git
15 |
16 | # move to examples folder
17 | $ cd examples
18 |
19 | # install the dependencies
20 | $ npm install
21 |
22 | # Start the sample project
23 | $ npm run start
24 | ```
25 |
26 | If you wish to use `yarn` instead of `npm` replace the last
27 | 2 commands with the ones below:
28 |
29 | ```sh
30 | # install the dependencies
31 | $ yarn
32 |
33 | # Start the sample project
34 | $ yarn run start
35 | ```
36 |
37 | Happy Hacking!
38 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2018 Intuit
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
14 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
15 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
16 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
17 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
18 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
19 | OR OTHER DEALINGS IN THE SOFTWARE.
20 |
--------------------------------------------------------------------------------
/src/TextProviderHOC.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { TextContext } from './TextProvider';
3 |
4 | const withTextProvider = (SomeComponent) => {
5 | /* eslint-disable-line no-unused-vars */
6 | class TextProviderHOC extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.getTextForKey = this.getTextForKey.bind(this);
10 | }
11 |
12 | getTextForKey(id, values = {}) {
13 | const globalText = this.context;
14 | let messageString = Object.prototype.hasOwnProperty.call(globalText, id)
15 | ? globalText[id]
16 | : '';
17 | /**
18 | * Iterate through all the keys given as the prop and replace with corresponding values.
19 | */
20 | Object.keys(values).forEach((key) => {
21 | messageString = messageString.replace(`{${key}}`, values[key]);
22 | });
23 | return messageString;
24 | }
25 |
26 | render() {
27 | return (
28 |
19 |
21 |
22 |
24 |
36 |
38 |
39 |
40 |
42 | {this.props.id ? this.props.id : 'id'}
;
14 | }
15 | }
16 |
17 | it('should render TextProviderHOC correctly', () => {
18 | const MockWithHOC = withTextProvider(SomeComponent);
19 |
20 | const wrapper = renderer.create(
2 | 
6 |
11 |
12 |
38 |
39 | Text provider is a library to place all the string constants of an application in a single place and use them inside the components in a memory friendly way.
40 |
41 | It provides two components:
42 |
43 | 1. [TextProvider](src/TextProvider.jsx)
44 | 2. [FormattedMessage](src/FormattedMessage.jsx)
45 |
46 | ## Install
47 |
48 | ```bash
49 | npm i text-provider
50 | ```
51 |
52 | ## Usage
53 |
54 | 1. Import the string constants required for the particular presentational component:
55 |
56 | ```javascript
57 | const sampleText = require("src/nls/sample-text.json");
58 | ```
59 |
60 | 2. Use the [TextProvider](src/TextProvider.jsx) to make it available for all the components:
61 |
62 | ```jsx
63 |
6 | text-provider
7 |8 | A component which provides all the string constants using provider pattern 9 |
10 |
18 | 
24 | 
30 | 
36 |