@successtar/cogo-toast 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +126 -0
  2. package/LICENSE +21 -0
  3. package/README.md +165 -0
  4. package/index.d.ts +52 -0
  5. package/package.json +125 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,126 @@
1
+ ### Features
2
+
3
+ - 5.0.1
4
+
5
+ - Fix: ReactDOM.render warning in React 18.x.x
6
+
7
+ - 4.2.3
8
+
9
+ - Fix: install error at 4.2.2. #53
10
+
11
+ - 4.2.2
12
+
13
+ - Fix: useEffect not cancelling timeouts. #49
14
+ - Switched from pnpm to yarn to manage package dependencies - Better community support.
15
+
16
+ - 4.2.1
17
+
18
+ - Fix: Heading and renderIcon not being passed to the toast component
19
+
20
+ - 4.2.0
21
+
22
+ - Refactored entire codebase to TypeScript.
23
+ - Switched from yarn to pnpm to manage package dependencies.
24
+ - Bundle Size reduced to 4 KB
25
+ - No change to the package API or features. Everything should work as before.
26
+
27
+ - 4.2.0-beta.0
28
+
29
+ - Refactored entire codebase to TypeScript.
30
+ - Switched from yarn to pnpm to manage package dependencies.
31
+ - Bundle Size reduced to 4 KB
32
+ - No change to the package API or features. Everything should work as before.
33
+
34
+ - 4.1.3
35
+
36
+ - Fixes #44 and #45
37
+
38
+ - 4.1.1
39
+
40
+ - Added missing types for 4.0, role, and toastContainerID. #35
41
+
42
+ - 4.1.0
43
+
44
+ - Added a new option `toastContainerID`. This enables specifying the id of the parent dom element, to which the toast is mounted as a child. #27
45
+
46
+ - 4.0.0
47
+
48
+ - Breaking Change
49
+
50
+ - Hide the toast on Click
51
+
52
+ Before:
53
+
54
+ ```javascript
55
+ cogoToast.success('This is a success message.', {
56
+ onClick: (hide) => {
57
+ hide();
58
+ },
59
+ };
60
+ ```
61
+
62
+ Now:
63
+
64
+ ```javascript
65
+ const { hide } = cogoToast.success('This is a success message.', {
66
+ onClick: () => {
67
+ hide();
68
+ },
69
+ };
70
+ ```
71
+
72
+ - Toast now always returns a promise, as opposed to before. See issue #28
73
+
74
+ - Accesibilty - Added a role of `status` by default. Configurable via options. Thanks @balazsorban44.
75
+
76
+ - v3.2.2
77
+
78
+ - classnames added to each type of toast, to enable css overrides
79
+
80
+ - v3.2.1
81
+
82
+ - 3.2.0 Accidentally published a Non-Minified Build. 3.2.1 fixes this
83
+
84
+ - v3.2.0
85
+
86
+ - JSX Support:
87
+
88
+ - Prop types fix when using React node instead of a text message.
89
+ - JSX Usage added in the documentation.
90
+
91
+ - v3.1.0
92
+
93
+ - Ability to hide the toast immediately on click. `hide` function passed as a param in `onClick`.
94
+
95
+ ```javascript
96
+ cogoToast.success('This is a success message.', {
97
+ onClick: (hide) => {
98
+ hide();
99
+ },
100
+ });
101
+ ```
102
+
103
+ - v3.0.0
104
+
105
+ - Major internal rewrite to remove ReactDOMServer dependency.
106
+
107
+ - Using react hooks internally, so support for React versions before hooks is now dropped. Use `v2.0.1` if you want to use this library in versions before React@16.8 (pre-hooks)
108
+
109
+ **Breaking:**
110
+
111
+ - `icon` option changed to `renderIcon`, where you can pass a render function instead of a node. (Useful for Lazy Rendering)
112
+ - Export for `create` function removed. `cogoToast()` works like create did before.
113
+
114
+ - v2.0.1
115
+
116
+ - Fix for top level typings declaration
117
+
118
+ - v2.0.0
119
+
120
+ - Custom styling is now supported. Just extend the css classes to specify your own styles. For all classnames, refer to [/src/styles.css](/src/styles.css)
121
+
122
+ - Typescript typings added. Shout out to @sebastien-p
123
+
124
+ - v1.0.7 - Internal dependencies and build system upgraded. No changes to the toast.
125
+
126
+ - **cogoToast:** `cogoToast` is the root object of the containing of 5 functions, `success`, `info`, `loading`, `warn`, and `error`.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2020 Cogo Freight Private Limited
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,165 @@
1
+ <p align="center"><a href="https://cogoport.github.io/cogo-toast/" target="_blank"><img src="https://cogoport.github.io/cogo-toast/meta/android-chrome-96x96.png" alt="cogo-toast" title="cogo-toast" width="120"></a></p>
2
+ <h1 align="center">Cogo Toast</h1>
3
+ <p align="center" style="font-size: 1.2rem;">Beautiful, Zero Configuration, Toast Messages for React ~4kb gzip (with styles and icons)</p>
4
+ <p align="center"><a href="https://cogoport.github.io/cogo-toast/">https://cogoport.github.io/cogo-toast/</a></p>
5
+
6
+ [![Dependencies](https://img.shields.io/david/Cogoport/cogo-toast.svg)](https://david-dm.org/Cogoport/cogo-toast.svg)
7
+ [![npm package](https://img.shields.io/npm/v/cogo-toast/latest.svg)](https://www.npmjs.com/package/cogo-toast)
8
+ [![Small size](https://img.badgesize.io/https://unpkg.com/cogo-toast/dist/index.js?compression=gzip)](https://unpkg.com/cogo-toast/dist/index.js)
9
+ [![npm downloads](https://img.shields.io/npm/dm/cogo-toast.svg)](https://www.npmjs.com/package/cogo-toast)
10
+ ![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)
11
+ [![License](https://img.shields.io/npm/l/@xstyled/styled-components.svg)](https://github.com/Cogoport/cogo-toast/blob/master/LICENSE)
12
+
13
+ <p align="center">
14
+ <a href="https://cogoport.github.io/cogo-toast/" target="_blank"><img src="docs/public/images/preview.gif" alt="cogo-toast-preview" title="cogo-toast-preview"></a>
15
+ </p>
16
+
17
+ ### Install via NPM:
18
+
19
+ ```bash
20
+ npm install --save cogo-toast
21
+ ```
22
+
23
+ ### Install via Yarn:
24
+
25
+ ```bash
26
+ yarn add cogo-toast
27
+ ```
28
+
29
+ #### Note:
30
+
31
+ The latest version `^3.0.0` makes the use of React Hooks internally.
32
+
33
+ To use this package in projects that don't support hooks, use `v2.0.1` instead.
34
+
35
+ ```bash
36
+ yarn add cogo-toast@2.0.1
37
+ ```
38
+
39
+ ## Usage
40
+
41
+ Its Plug and Play. No configuration required. Just import and you are good to go.
42
+
43
+ ```javascript
44
+ import cogoToast from 'cogo-toast';
45
+
46
+ cogoToast.success('This is a success message!');
47
+ ```
48
+
49
+ ### 5 Built in Types
50
+
51
+ There are 5 built-in types to handle the most common cases in any application.
52
+
53
+ ```javascript
54
+ cogoToast.success('This is a success message');
55
+
56
+ cogoToast.info('This is a info message');
57
+
58
+ cogoToast.loading('This is a loading message');
59
+
60
+ cogoToast.warn('This is a warn message');
61
+
62
+ cogoToast.error('This is a error message');
63
+ ```
64
+
65
+ ### Use JSX
66
+
67
+ **cogoToast** is built using React. Which means any valid jsx can be used as the message in cogoToast
68
+
69
+ ```javascript
70
+ cogoToast.info(
71
+ <div>
72
+ <b>Awesome!</b>
73
+ <div>Isn't it?</div>
74
+ </div>,
75
+ );
76
+ ```
77
+
78
+ ### Returns a Promise
79
+
80
+ Returns a promise which resolves when the toast is about to hide.
81
+
82
+ This can be useful to do some action when the toast has completed showing.
83
+
84
+ ```javascript
85
+ cogoToast.loading('Loading your data...').then(() => {
86
+ cogoToast.success('Data Successfully Loaded');
87
+ });
88
+ ```
89
+
90
+ ### Hide on Click
91
+
92
+ ```javascript
93
+ const { hide } = cogoToast.success('This is a success message.', {
94
+ onClick: () => {
95
+ hide();
96
+ },
97
+ });
98
+ ```
99
+
100
+ ### Completely Customizable
101
+
102
+ The second parameter to the function is an options object that can be passed in for customization.
103
+
104
+ ```javascript
105
+ cogoToast.info('This is an info message', options);
106
+ ```
107
+
108
+ #### All Available Options
109
+
110
+ Here's a list of all the available options, to customize the toast to your needs.
111
+
112
+ | Options | Type | Default |
113
+ | :-----------: | :----------------------------------------------------------------------------------------------: | :--------------------------------------------------------: |
114
+ | hideAfter | Number in Seconds | `3` <br />(Can be `0` to disable auto-hiding of the toast) |
115
+ | position | `'top-left', 'top-center', 'top-right',` <br /> `'bottom-left', 'bottom-center', 'bottom-right'` | `'top-center'` |
116
+ | heading | String | `''` |
117
+ | renderIcon | Function<ReactNode> | Icon Based on the Type |
118
+ | bar | Object <br /> `{ size: '2px', style: 'solid/dashed/dotted', color: '#hex' }` | Based on the Type |
119
+ | onClick() | Function | `null` |
120
+ | role | aria-role | `status` |
121
+ | toastContainerID | The dom element in which the toast container is added | `ct-container` |
122
+
123
+ ### Custom Styling
124
+
125
+ You can provide your own custom styling by extending the `ct-toast` class in your css styles.
126
+
127
+ For all classnames, refer to [/src/styles/styles.css](/src/styles/styles.css)
128
+
129
+ #### Customize each type of Toast seperately
130
+
131
+ Customize each type of Toast seperately, by extending the `ct-toast-<type>` class. For example, in your CSS,
132
+
133
+ ```
134
+ ct-toast-success {
135
+ color: #FFFFFF;
136
+ background: #6EC05F;
137
+ }
138
+ ```
139
+
140
+ ### Only ~ 4kb gzip (with Styles and Icons)
141
+
142
+ The package contains the minified build file, along with the SVG Icons and the Styles, built into the Code, with a total of only ~4kb gzip.
143
+
144
+ ## Contributors ✨
145
+
146
+ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
147
+
148
+ <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
149
+ <!-- prettier-ignore-start -->
150
+ <!-- markdownlint-disable -->
151
+ <table>
152
+ <tr>
153
+ <td align="center"><a href="https://github.com/anmdotdev"><img src="https://avatars2.githubusercontent.com/u/36692003?v=4" width="100px;" alt="Anmol Mahatpurkar"/><br /><sub><b>Anmol Mahatpurkar</b></sub></a><br /><a href="https://github.com/Cogoport/cogo-toast/commits?author=anmolmahatpurkar" title="Code">💻</a> <a href="#design-anmolmahatpurkar" title="Design">🎨</a> <a href="https://github.com/Cogoport/cogo-toast/commits?author=anmolmahatpurkar" title="Documentation">📖</a></td>
154
+ <td align="center"><a href="https://balazsorban.com"><img src="https://avatars1.githubusercontent.com/u/18369201?v=4" width="100px;" alt="Balázs Orbán"/><br /><sub><b>Balázs Orbán</b></sub></a><br /><a href="https://github.com/Cogoport/cogo-toast/commits?author=balazsorban44" title="Code">💻</a></td>
155
+ <td align="center"><a href="https://github.com/Keaws"><img src="https://avatars1.githubusercontent.com/u/5289466?v=4" width="100px;" alt="Vitalii Kalchuk"/><br /><sub><b>Vitalii Kalchuk</b></sub></a><br /><a href="https://github.com/Cogoport/cogo-toast/commits?author=Keaws" title="Code">💻</a></td>
156
+ <td align="center"><a href="http://www.apathak.com"><img src="https://avatars1.githubusercontent.com/u/24917309?v=4" width="100px;" alt="Amar Pathak"/><br /><sub><b>Amar Pathak</b></sub></a><br /><a href="https://github.com/Cogoport/cogo-toast/commits?author=amarpathak" title="Documentation">📖</a></td>
157
+ <td align="center"><a href="https://github.com/nataly87s"><img src="https://avatars2.githubusercontent.com/u/7895237?s=460&v=4" width="100px;" alt="Nataly Shrits"/><br /><sub><b>Nataly Shrits</b></sub></a><br /><a href="https://github.com/Cogoport/cogo-toast/commits?author=nataly87s" title="Code">💻</a></td>
158
+ </tr>
159
+ </table>
160
+
161
+ <!-- markdownlint-enable -->
162
+ <!-- prettier-ignore-end -->
163
+ <!-- ALL-CONTRIBUTORS-LIST:END -->
164
+
165
+ This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
package/index.d.ts ADDED
@@ -0,0 +1,52 @@
1
+ import { ReactNode, MouseEventHandler } from 'react';
2
+
3
+ export type CTOptions = Partial<{
4
+ hideAfter: number;
5
+ position:
6
+ | 'top-left'
7
+ | 'top-center'
8
+ | 'top-right'
9
+ | 'bottom-left'
10
+ | 'bottom-center'
11
+ | 'bottom-right';
12
+ heading: string;
13
+ role: string;
14
+ toastContainerID: string;
15
+ renderIcon: Function;
16
+ bar: Partial<{
17
+ size: string;
18
+ style: 'solid' | 'dashed' | 'dotted';
19
+ color: string;
20
+ }>;
21
+ onClick: MouseEventHandler;
22
+ onHide: Function;
23
+ }>;
24
+
25
+ export type HideToastFunction = () => void;
26
+
27
+ export type CTReturn = Promise<void> & { hide?: HideToastFunction };
28
+
29
+ export type CTMethod = (message: string | ReactNode, options?: CTOptions) => CTReturn;
30
+
31
+ export type CTMainMethod = (
32
+ message: string | ReactNode,
33
+ options?: CTOptions & { type: string },
34
+ ) => CTReturn;
35
+
36
+ export type CToast = CTMainMethod & {
37
+ success: CTMethod;
38
+ warn: CTMethod;
39
+ info: CTMethod;
40
+ error: CTMethod;
41
+ loading: CTMethod;
42
+ };
43
+
44
+ declare namespace cogoToast {
45
+ const success: CTMethod;
46
+ const info: CTMethod;
47
+ const loading: CTMethod;
48
+ const warn: CTMethod;
49
+ const error: CTMethod;
50
+ }
51
+
52
+ export default cogoToast;
package/package.json ADDED
@@ -0,0 +1,125 @@
1
+ {
2
+ "name": "@successtar/cogo-toast",
3
+ "description": "Beautiful, Zero Configuration, Toast Messages - Built with React (^18.2.0)",
4
+ "version": "5.0.0",
5
+ "license": "MIT",
6
+ "scripts": {
7
+ "setup": "yarn install && cd docs && yarn install",
8
+ "add-contributor": "all-contributors add",
9
+ "dev-npm": "rollup -c -w",
10
+ "dev-docs": "cd docs && yarn run dev",
11
+ "dev": "concurrently --kill-others-on-fail \"yarn run dev-npm\" \"yarn run dev-docs\"",
12
+ "build": "rollup -c",
13
+ "minify-cjs": "uglifyjs --compress --mangle -o dist/index.js -- dist/index.js",
14
+ "minify-es": "terser --compress --mangle --comments /$^/ -o dist/index.es.js -- dist/index.es.js",
15
+ "minify": "concurrently --kill-others-on-fail \"yarn run minify-cjs\" \"yarn run minify-es\"",
16
+ "postbuild": "yarn run minify",
17
+ "predeploy": "cd docs && yarn install && yarn run deploy",
18
+ "deploy": "gh-pages -t -d docs/out"
19
+ },
20
+ "peerDependencies": {
21
+ "prop-types": "^15.6.2",
22
+ "react": "^18.2.0",
23
+ "react-dom": "^18.2.0"
24
+ },
25
+ "devDependencies": {
26
+ "@babel/core": "7.9.6",
27
+ "@babel/preset-env": "7.9.6",
28
+ "@babel/preset-react": "7.9.4",
29
+ "@rollup/plugin-commonjs": "^11.1.0",
30
+ "@rollup/plugin-node-resolve": "^7.1.3",
31
+ "@rollup/plugin-typescript": "^2.1.0",
32
+ "@rollup/plugin-url": "^5.0.0",
33
+ "@svgr/rollup": "5.4.0",
34
+ "@types/jest": "^25.2.2",
35
+ "@types/prop-types": "^15.7.3",
36
+ "@types/react": "^18.0.15",
37
+ "@types/react-dom": "^18.0.6",
38
+ "@typescript-eslint/eslint-plugin": "^2.33.0",
39
+ "@typescript-eslint/parser": "^2.33.0",
40
+ "all-contributors-cli": "^6.14.2",
41
+ "babel-eslint": "10.1.0",
42
+ "concurrently": "5.2.0",
43
+ "cross-env": "7.0.2",
44
+ "eslint": "^7.0.0",
45
+ "eslint-config-airbnb": "^18.1.0",
46
+ "eslint-config-prettier": "^6.11.0",
47
+ "eslint-config-react-app": "^5.2.1",
48
+ "eslint-plugin-import": "^2.20.2",
49
+ "eslint-plugin-jest": "^23.13.1",
50
+ "eslint-plugin-jsx-a11y": "^6.2.3",
51
+ "eslint-plugin-prettier": "^3.1.3",
52
+ "eslint-plugin-react": "^7.20.0",
53
+ "eslint-plugin-react-hooks": "^4.0.2",
54
+ "gh-pages": "2.2.0",
55
+ "prettier": "^2.0.5",
56
+ "prettier-eslint-cli": "^5.0.0",
57
+ "prop-types": "^15.7.2",
58
+ "react": "^18.2.0",
59
+ "react-dom": "^18.2.0",
60
+ "react-scripts": "5.0.1",
61
+ "rollup": "^2.10.2",
62
+ "rollup-plugin-peer-deps-external": "^2.2.2",
63
+ "rollup-plugin-postcss": "3.1.1",
64
+ "terser": "4.6.13",
65
+ "tslib": "^2.0.0",
66
+ "typescript": "^3.9.2",
67
+ "uglify-js": "^3.9.3"
68
+ },
69
+ "main": "dist/index.js",
70
+ "module": "dist/index.es.js",
71
+ "jsnext:main": "dist/index.es.js",
72
+ "files": [
73
+ "dist",
74
+ "index.d.ts"
75
+ ],
76
+ "publishConfig": {
77
+ "access": "public"
78
+ },
79
+ "homepage": "https://cogoport.github.io/cogo-toast/",
80
+ "bugs": {
81
+ "url": "https://github.com/Cogoport/cogo-toast/issues"
82
+ },
83
+ "repository": {
84
+ "type": "git",
85
+ "url": "git+https://github.com/Cogoport/cogo-toast.git"
86
+ },
87
+ "keywords": [
88
+ "react",
89
+ "toast",
90
+ "react-toast",
91
+ "toast-react",
92
+ "toastr",
93
+ "toast messages",
94
+ "messages",
95
+ "notifications",
96
+ "react notifications",
97
+ "component",
98
+ "components",
99
+ "react component",
100
+ "react components",
101
+ "ui"
102
+ ],
103
+ "author": {
104
+ "name": "Cogoport",
105
+ "email": "developers@cogoport.io",
106
+ "url": "https://cogoport.io/"
107
+ },
108
+ "contributors": [
109
+ {
110
+ "name": "Cogoport",
111
+ "email": "developers@cogoport.io",
112
+ "url": "https://cogoport.io/"
113
+ },
114
+ {
115
+ "name": "anmolmahatpurkar",
116
+ "email": "anmol@cogoport.com",
117
+ "url": "https://github.com/anmolmahatpurkar"
118
+ },
119
+ {
120
+ "name": "Hammed Olalekan Osanyinpeju",
121
+ "email": "osanyinpejuhammed35@gmail.com",
122
+ "url": "https://successtar.github.io"
123
+ }
124
+ ]
125
+ }