gantri-components 1.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 (11) hide show
  1. package/README.md +1 -0
  2. package/lib/components/Button/Button.d.ts +29 -0
  3. package/lib/components/Button/Button.stories.d.ts +7 -0
  4. package/lib/components/Button/index.d.ts +1 -0
  5. package/lib/components/index.d.ts +1 -0
  6. package/lib/index.d.ts +2 -0
  7. package/lib/index.esm.js +45 -0
  8. package/lib/index.esm.js.map +1 -0
  9. package/lib/index.js +53 -0
  10. package/lib/index.js.map +1 -0
  11. package/package.json +83 -0
package/README.md ADDED
@@ -0,0 +1 @@
1
+ # ui-library
package/lib/components/Button/Button.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import React from "react";
2
+ import "./Button.css";
3
+ export interface ButtonProps {
4
+ /**
5
+ * Is this the principal call to action on the page?
6
+ */
7
+ primary?: boolean;
8
+ /**
9
+ * What background color to use
10
+ */
11
+ backgroundColor?: string;
12
+ /**
13
+ * How large should the button be?
14
+ */
15
+ size?: "small" | "medium" | "large";
16
+ /**
17
+ * Button contents
18
+ */
19
+ label: string;
20
+ /**
21
+ * Optional click handler
22
+ */
23
+ onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
24
+ }
25
+ /**
26
+ * Primary UI component for user interaction
27
+ */
28
+ declare const Button: ({ primary, backgroundColor, size, onClick, label, }: ButtonProps) => JSX.Element;
29
+ export default Button;
package/lib/components/Button/Button.stories.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { Meta } from '@storybook/react/types-6-0';
2
+ import { Story } from '@storybook/react';
3
+ import { ButtonProps } from './Button';
4
+ declare const _default: Meta<import("@storybook/react").Args>;
5
+ export default _default;
6
+ export declare const Primary: Story<ButtonProps>;
7
+ export declare const Secondary: Story<ButtonProps>;
package/lib/components/Button/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './Button';
package/lib/components/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './Button';
package/lib/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import Button from './components/Button';
2
+ export { Button };
package/lib/index.esm.js ADDED
@@ -0,0 +1,45 @@
1
+ import React from 'react';
2
+
3
+ function styleInject(css, ref) {
4
+ if ( ref === void 0 ) ref = {};
5
+ var insertAt = ref.insertAt;
6
+
7
+ if (!css || typeof document === 'undefined') { return; }
8
+
9
+ var head = document.head || document.getElementsByTagName('head')[0];
10
+ var style = document.createElement('style');
11
+ style.type = 'text/css';
12
+
13
+ if (insertAt === 'top') {
14
+ if (head.firstChild) {
15
+ head.insertBefore(style, head.firstChild);
16
+ } else {
17
+ head.appendChild(style);
18
+ }
19
+ } else {
20
+ head.appendChild(style);
21
+ }
22
+
23
+ if (style.styleSheet) {
24
+ style.styleSheet.cssText = css;
25
+ } else {
26
+ style.appendChild(document.createTextNode(css));
27
+ }
28
+ }
29
+
30
+ var css_248z = ".storybook-button {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}\n";
31
+ styleInject(css_248z);
32
+
33
+ /**
34
+ * Primary UI component for user interaction
35
+ */
36
+ var Button = function (_a) {
37
+ var _b = _a.primary, primary = _b === void 0 ? true : _b, backgroundColor = _a.backgroundColor, _c = _a.size, size = _c === void 0 ? "medium" : _c, onClick = _a.onClick, label = _a.label;
38
+ var mode = primary
39
+ ? "storybook-button--primary"
40
+ : "storybook-button--secondary";
41
+ return (React.createElement("button", { type: "button", className: ["storybook-button", "storybook-button--".concat(size), mode].join(" "), style: backgroundColor ? { backgroundColor: backgroundColor } : {}, onClick: onClick }, label));
42
+ };
43
+
44
+ export { Button };
45
+ //# sourceMappingURL=index.esm.js.map
package/lib/index.esm.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;"}
package/lib/index.js ADDED
@@ -0,0 +1,53 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+
7
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
+
9
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
10
+
11
+ function styleInject(css, ref) {
12
+ if ( ref === void 0 ) ref = {};
13
+ var insertAt = ref.insertAt;
14
+
15
+ if (!css || typeof document === 'undefined') { return; }
16
+
17
+ var head = document.head || document.getElementsByTagName('head')[0];
18
+ var style = document.createElement('style');
19
+ style.type = 'text/css';
20
+
21
+ if (insertAt === 'top') {
22
+ if (head.firstChild) {
23
+ head.insertBefore(style, head.firstChild);
24
+ } else {
25
+ head.appendChild(style);
26
+ }
27
+ } else {
28
+ head.appendChild(style);
29
+ }
30
+
31
+ if (style.styleSheet) {
32
+ style.styleSheet.cssText = css;
33
+ } else {
34
+ style.appendChild(document.createTextNode(css));
35
+ }
36
+ }
37
+
38
+ var css_248z = ".storybook-button {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}\n";
39
+ styleInject(css_248z);
40
+
41
+ /**
42
+ * Primary UI component for user interaction
43
+ */
44
+ var Button = function (_a) {
45
+ var _b = _a.primary, primary = _b === void 0 ? true : _b, backgroundColor = _a.backgroundColor, _c = _a.size, size = _c === void 0 ? "medium" : _c, onClick = _a.onClick, label = _a.label;
46
+ var mode = primary
47
+ ? "storybook-button--primary"
48
+ : "storybook-button--secondary";
49
+ return (React__default["default"].createElement("button", { type: "button", className: ["storybook-button", "storybook-button--".concat(size), mode].join(" "), style: backgroundColor ? { backgroundColor: backgroundColor } : {}, onClick: onClick }, label));
50
+ };
51
+
52
+ exports.Button = Button;
53
+ //# sourceMappingURL=index.js.map
package/lib/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;"}
package/package.json ADDED
@@ -0,0 +1,83 @@
1
+ {
2
+ "name": "gantri-components",
3
+ "version": "1.0.0",
4
+ "main": "lib/index.js",
5
+ "module": "lib/index.esm.js",
6
+ "types": "lib/index.d.ts",
7
+ "repository": "git@github.com:gantri/ui-library.git",
8
+ "author": "Danny <danny@gantri.com>",
9
+ "license": "MIT",
10
+ "scripts": {
11
+ "build": "rollup -c",
12
+ "storybook": "start-storybook -p 6006",
13
+ "build-storybook": "build-storybook"
14
+ },
15
+ "peerDependencies": {
16
+ "react": "^17.0.2",
17
+ "react-dom": "^17.0.2"
18
+ },
19
+ "devDependencies": {
20
+ "@babel/core": "^7.17.5",
21
+ "@react-theming/storybook-addon": "^1.1.5",
22
+ "@rollup/plugin-commonjs": "^21.0.2",
23
+ "@rollup/plugin-node-resolve": "^13.1.3",
24
+ "@storybook/addon-actions": "^6.4.19",
25
+ "@storybook/addon-essentials": "^6.4.19",
26
+ "@storybook/addon-interactions": "^6.4.19",
27
+ "@storybook/addon-links": "^6.4.19",
28
+ "@storybook/addons": "^6.4.19",
29
+ "@storybook/react": "^6.4.19",
30
+ "@storybook/testing-library": "^0.0.9",
31
+ "@storybook/theming": "^6.4.19",
32
+ "@types/react": "^17.0.39",
33
+ "@typescript-eslint/eslint-plugin": "^5.14.0",
34
+ "@typescript-eslint/parser": "^5.14.0",
35
+ "babel-loader": "^8.2.3",
36
+ "eslint": "^8.10.0",
37
+ "eslint-config-airbnb": "^19.0.4",
38
+ "eslint-config-airbnb-typescript": "^16.1.0",
39
+ "eslint-config-node": "^4.1.0",
40
+ "eslint-config-prettier": "^8.5.0",
41
+ "eslint-plugin-import": "^2.25.4",
42
+ "eslint-plugin-jsx-a11y": "^6.5.1",
43
+ "eslint-plugin-node": "^11.1.0",
44
+ "eslint-plugin-prettier": "^4.0.0",
45
+ "eslint-plugin-promise": "^6.0.0",
46
+ "eslint-plugin-react": "^7.29.3",
47
+ "eslint-plugin-react-hooks": "^4.3.0",
48
+ "eslint-plugin-sort-keys-fix": "^1.1.2",
49
+ "eslint-plugin-typescript-sort-keys": "^2.1.0",
50
+ "husky": "^7.0.4",
51
+ "lint-staged": "^12.3.5",
52
+ "postcss": "^8.4.8",
53
+ "prettier": "^2.5.1",
54
+ "react": "^17.0.2",
55
+ "react-dom": "^17.0.2",
56
+ "rollup": "^2.70.0",
57
+ "rollup-plugin-peer-deps-external": "^2.2.4",
58
+ "rollup-plugin-postcss": "^4.0.2",
59
+ "rollup-plugin-typescript2": "^0.31.2",
60
+ "typescript": "^4.6.2"
61
+ },
62
+ "dependencies": {
63
+ "@types/styled-components": "^5.1.24",
64
+ "styled-components": "^5.3.3"
65
+ },
66
+ "files": [
67
+ "lib"
68
+ ],
69
+ "engines": {
70
+ "node": ">= 14.17.0",
71
+ "npm": "please-use-yarn",
72
+ "yarn": ">= 1.22.10"
73
+ },
74
+ "lint-staged": {
75
+ "*.{js,jsx,ts,tsx}": [
76
+ "eslint --cache --fix --quiet",
77
+ "prettier --write"
78
+ ],
79
+ "*.{md,html,css}": [
80
+ "prettier --write"
81
+ ]
82
+ }
83
+ }