@mrshmllw/smores-react 2.1.6 → 2.1.7
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.
- package/README.md +31 -20
- package/dist/Button/Button.js +32 -11
- package/dist/Button/Button.js.map +1 -1
- package/dist/Button/Button.stories.d.ts +1 -0
- package/dist/Button/Button.stories.js +3 -0
- package/dist/Button/Button.stories.js.map +1 -1
- package/dist/Button/InteractivePlayground.d.ts +2 -0
- package/dist/Button/InteractivePlayground.js +26 -0
- package/dist/Button/InteractivePlayground.js.map +1 -0
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -32,30 +32,41 @@ $ npm install @mrshmllw/smores-react
|
|
|
32
32
|
```
|
|
33
33
|
|
|
34
34
|
## Release
|
|
35
|
-
|
|
35
|
+
|
|
36
|
+
Before starting, make sure that `CHANGELOG.md` is updated according to [keepachangelog.com](https://keepachangelog.com/en/1.0.0/) with the latest release notes. If not, make a PR updating it before continuing.
|
|
37
|
+
|
|
36
38
|
1. Checkout a new branch from the `Master` branch, update Changelog and _bump_ the project version.
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
git checkout master
|
|
42
|
+
git pull
|
|
43
|
+
git checkout -b [branch_name]
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
2. Bump the version according to [semver.org](https://semver.org/) and create a PR
|
|
47
|
+
|
|
48
|
+
```
|
|
49
|
+
npm version [major | minor | patch]
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
3. When merged, go the the `master` branch, pull and push the new tag to `origin`
|
|
53
|
+
|
|
54
|
+
```
|
|
55
|
+
git checkout master
|
|
56
|
+
git pull
|
|
57
|
+
git push origin --tags
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Wait for the build to be successful (green tick in GitHub Actions workflow) before next step
|
|
61
|
+
|
|
62
|
+
4. Login and publish to NPM
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
npm login
|
|
53
66
|
> enter your username and password
|
|
54
67
|
> enter your email address
|
|
55
68
|
> complete two factor authentication
|
|
56
|
-
|
|
57
|
-
3. Publish to NPM.
|
|
58
|
-
> $ npm publish
|
|
69
|
+
npm publish
|
|
59
70
|
```
|
|
60
71
|
|
|
61
72
|
## Running Smores in dev mode
|
package/dist/Button/Button.js
CHANGED
|
@@ -18,26 +18,30 @@ import { Loader } from '../Loader';
|
|
|
18
18
|
import { Icon as IconComponent } from '../Icon';
|
|
19
19
|
export const Button = forwardRef((_a, ref) => {
|
|
20
20
|
var { children, id, className = '', color = 'secondary', block = false, inverted = false, disabled = false, outlined = false, handleClick, loading = false, primary = false, secondary = false, tertiary = false, icon = '', forcedWidth = '', form, type } = _a, props = __rest(_a, ["children", "id", "className", "color", "block", "inverted", "disabled", "outlined", "handleClick", "loading", "primary", "secondary", "tertiary", "icon", "forcedWidth", "form", "type"]);
|
|
21
|
-
|
|
21
|
+
if (!primary && !secondary && !tertiary) {
|
|
22
|
+
return (React.createElement(LegacyButton, { id: id, className: className, color: color, block: block, inverted: inverted, disabled: disabled, outlined: outlined, handleClick: (e) => {
|
|
23
|
+
handleClick && handleClick(e);
|
|
24
|
+
} }, children));
|
|
25
|
+
}
|
|
26
|
+
return (React.createElement(Container, Object.assign({ id: id, className: className, disabled: disabled || loading, onClick: (e) => {
|
|
22
27
|
handleClick && handleClick(e);
|
|
23
|
-
}, isLoading: loading, primary: primary, secondary: secondary, tertiary: tertiary, icon: icon, forcedWidth: forcedWidth }, (form ? { form } : {}), { type: type }, props, { ref: ref }),
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
+
}, isLoading: loading, primary: primary, secondary: secondary, tertiary: tertiary, icon: icon, forcedWidth: forcedWidth }, (form ? { form } : {}), { type: type }, props, { ref: ref }),
|
|
29
|
+
loading && (React.createElement(LoaderContainer, null,
|
|
30
|
+
React.createElement(Loader, { color: primary ? 'white' : `${theme.colors.secondary}`, height: "16" }))),
|
|
31
|
+
React.createElement(ContentContainer, { icon: icon, loading: loading },
|
|
32
|
+
icon && (React.createElement(IconContainer, { render: icon, size: 24, color: primary ? 'white' : 'secondary' })),
|
|
33
|
+
React.createElement(ChildrenContainer, null, children))));
|
|
28
34
|
});
|
|
29
35
|
Button.displayName = 'Button';
|
|
30
|
-
const Container = styled.button(({ disabled, isLoading, primary, secondary, tertiary,
|
|
36
|
+
const Container = styled.button(({ disabled, isLoading, primary, secondary, tertiary, forcedWidth }) => css `
|
|
37
|
+
position: relative;
|
|
31
38
|
background-color: ${theme.colors.primary};
|
|
32
39
|
border: 2px solid;
|
|
33
40
|
box-shadow: none;
|
|
34
41
|
color: ${theme.colors.secondary};
|
|
35
|
-
padding:
|
|
42
|
+
padding: 0 20px;
|
|
36
43
|
outline: none;
|
|
37
44
|
border-radius: 8px;
|
|
38
|
-
align-items: center;
|
|
39
|
-
display: flex;
|
|
40
|
-
justify-content: ${icon ? 'space-evenly' : 'center'};
|
|
41
45
|
font-weight: ${theme.font.weight.medium};
|
|
42
46
|
cursor: ${disabled || isLoading ? 'not-allowed' : 'pointer'};
|
|
43
47
|
line-height: 100%;
|
|
@@ -94,10 +98,27 @@ const Container = styled.button(({ disabled, isLoading, primary, secondary, tert
|
|
|
94
98
|
}
|
|
95
99
|
`}
|
|
96
100
|
`);
|
|
101
|
+
const LoaderContainer = styled.div `
|
|
102
|
+
position: absolute;
|
|
103
|
+
top: 0;
|
|
104
|
+
bottom: 0;
|
|
105
|
+
left: 0;
|
|
106
|
+
right: 0;
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
justify-content: center;
|
|
110
|
+
`;
|
|
111
|
+
const ContentContainer = styled.div `
|
|
112
|
+
display: flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
justify-content: ${({ icon }) => (icon ? 'space-evenly' : 'center')};
|
|
115
|
+
opacity: ${({ loading }) => (loading ? '0' : '1')};
|
|
116
|
+
`;
|
|
97
117
|
const IconContainer = styled(IconComponent) `
|
|
98
118
|
margin-right: 10px;
|
|
99
119
|
`;
|
|
100
120
|
const ChildrenContainer = styled.div `
|
|
121
|
+
padding: 16px 0;
|
|
101
122
|
flex-grow: 1;
|
|
102
123
|
`;
|
|
103
124
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,SAAS,CAAA;AAyC/C,MAAM,CAAC,MAAM,MAAM,GAAoB,UAAU,CAI/C,CACE,EAmBC,EACD,GAAG,EACH,EAAE;QArBF,EACE,QAAQ,EACR,EAAE,EACF,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,WAAW,EACnB,KAAK,GAAG,KAAK,EACb,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,EAAE,EACT,WAAW,GAAG,EAAE,EAChB,IAAI,EACJ,IAAI,OAEL,EADI,KAAK,cAlBV,0LAmBC,CADS;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Button } from './Button';
|
|
3
|
+
import { InteractivePlayground } from './InteractivePlayground';
|
|
3
4
|
export default {
|
|
4
5
|
title: 'Button',
|
|
5
6
|
component: Button,
|
|
@@ -10,6 +11,8 @@ export const Default = Template.bind({});
|
|
|
10
11
|
Default.args = {
|
|
11
12
|
color: 'secondary',
|
|
12
13
|
};
|
|
14
|
+
const InteractivePlaygroundTemplate = (args) => (React.createElement(InteractivePlayground, Object.assign({}, args)));
|
|
15
|
+
export const Interactive = InteractivePlaygroundTemplate.bind({});
|
|
13
16
|
export const Coloured = Template.bind({});
|
|
14
17
|
Coloured.args = {
|
|
15
18
|
color: 'success',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/Button/Button.stories.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/Button/Button.stories.js"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import React, { useState } from 'react';
|
|
11
|
+
import { Button } from './Button';
|
|
12
|
+
function sleep(delay) {
|
|
13
|
+
return new Promise(function (resolve) {
|
|
14
|
+
setTimeout(resolve, delay);
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
export const InteractivePlayground = () => {
|
|
18
|
+
const [isLoading, setIsLoading] = useState(false);
|
|
19
|
+
const handleClick = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
20
|
+
setIsLoading(true);
|
|
21
|
+
yield sleep(1000);
|
|
22
|
+
setIsLoading(false);
|
|
23
|
+
});
|
|
24
|
+
return (React.createElement(Button, { primary: true, icon: "info", handleClick: handleClick, loading: isLoading }, "Get started"));
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=InteractivePlayground.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InteractivePlayground.js","sourceRoot":"","sources":["../../src/Button/InteractivePlayground.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,SAAS,KAAK,CAAC,KAAa;IAC1B,OAAO,IAAI,OAAO,CAAC,UAAU,OAAO;QAClC,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;IAC5B,CAAC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAO,GAAG,EAAE;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEjD,MAAM,WAAW,GAAG,GAAS,EAAE;QAC7B,YAAY,CAAC,IAAI,CAAC,CAAA;QAClB,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA;QACjB,YAAY,CAAC,KAAK,CAAC,CAAA;IACrB,CAAC,CAAA,CAAA;IAED,OAAO,CACL,oBAAC,MAAM,IAAC,OAAO,QAAC,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,kBAE/D,CACV,CAAA;AACH,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.7",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"keywords": [
|
|
@@ -51,14 +51,15 @@
|
|
|
51
51
|
"eslint": "^7.9.0",
|
|
52
52
|
"eslint-config-prettier": "^8.2.0",
|
|
53
53
|
"eslint-plugin-jest": "^26.0.0",
|
|
54
|
-
"eslint-plugin-react": "^7.
|
|
54
|
+
"eslint-plugin-react": "^7.29.2",
|
|
55
55
|
"eslint-plugin-react-hooks": "^4.1.2",
|
|
56
56
|
"husky": "^7.0.0",
|
|
57
57
|
"jest": "^26.4.2",
|
|
58
58
|
"jest-styled-components": "^7.0.3",
|
|
59
59
|
"lint-staged": "^12.0.2",
|
|
60
60
|
"prettier": "^2.1.2",
|
|
61
|
-
"snyk": "^1.529.0"
|
|
61
|
+
"snyk": "^1.529.0",
|
|
62
|
+
"storybook-addon-performance": "^0.16.1"
|
|
62
63
|
},
|
|
63
64
|
"dependencies": {
|
|
64
65
|
"date-fns": "^2.16.1",
|