gantri-components 1.0.2 → 1.0.6

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.
@@ -1,18 +1,10 @@
1
- import React from "react";
2
- import "./Button.css";
1
+ import React from 'react';
2
+ import './Button.css';
3
3
  export interface ButtonProps {
4
- /**
5
- * Is this the principal call to action on the page?
6
- */
7
- primary?: boolean;
8
4
  /**
9
5
  * What background color to use
10
6
  */
11
7
  backgroundColor?: string;
12
- /**
13
- * How large should the button be?
14
- */
15
- size?: "small" | "medium" | "large";
16
8
  /**
17
9
  * Button contents
18
10
  */
@@ -21,6 +13,14 @@ export interface ButtonProps {
21
13
  * Optional click handler
22
14
  */
23
15
  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
16
+ /**
17
+ * Is this the principal call to action on the page?
18
+ */
19
+ primary?: boolean;
20
+ /**
21
+ * How large should the button be??
22
+ */
23
+ size?: 'small' | 'medium' | 'large';
24
24
  }
25
25
  /**
26
26
  * Primary UI component for user interaction
@@ -0,0 +1,2 @@
1
+ export * from './theme';
2
+ export { ThemeProvider } from './theme-provider';
@@ -0,0 +1,5 @@
1
+ import { FC } from 'react';
2
+ import { DefaultTheme } from 'styled-components/macro';
3
+ export declare const ThemeProvider: FC<{
4
+ theme?: DefaultTheme;
5
+ }>;
@@ -0,0 +1,180 @@
1
+ import { DefaultTheme } from 'styled-components/macro';
2
+ import { Property } from 'csstype';
3
+ import { ResolutionAwareProp } from '../types/resolution-aware-prop.type';
4
+ export declare type PaletteColor = 'blue_100' | 'blue_200' | 'blue_300' | 'blue_400' | 'blue_500' | 'gold_100' | 'gold_200' | 'gold_300' | 'gold_400' | 'gold_500' | 'green_100' | 'green_200' | 'green_300' | 'green_400' | 'green_500' | 'monochrome_050' | 'monochrome_100' | 'monochrome_200' | 'monochrome_300' | 'monochrome_400' | 'monochrome_500' | 'monochrome_600' | 'monochrome_700' | 'monochrome_800' | 'monochrome_900' | 'monochrome_black' | 'monochrome_white' | 'pink_300' | 'pink_400' | 'pink_500' | 'red_100' | 'red_200' | 'red_300' | 'red_400' | 'red_500' | 'translucent_black' | 'translucent_cream' | 'translucent_white' | 'yellow_100' | 'yellow_200' | 'yellow_300' | 'yellow_400' | 'yellow_500' | string;
5
+ export declare const palette: Record<PaletteColor, string>;
6
+ declare module 'styled-components' {
7
+ interface FontInfo {
8
+ family: string;
9
+ familyMedium?: string;
10
+ familySmaller?: string;
11
+ fontWeight?: Property.FontWeight;
12
+ lineHeight: string;
13
+ lineHeightMedium?: string;
14
+ lineHeightSmaller: string;
15
+ size: string;
16
+ sizeMedium?: string;
17
+ sizeSmaller: string;
18
+ }
19
+ interface DefaultTheme {
20
+ border: string;
21
+ borderRadius: string;
22
+ colors: {
23
+ dividers: {
24
+ t1: PaletteColor;
25
+ t2: PaletteColor;
26
+ t3: PaletteColor;
27
+ };
28
+ iconography: {
29
+ alert: PaletteColor;
30
+ link: PaletteColor;
31
+ t1: PaletteColor;
32
+ t2: PaletteColor;
33
+ t3: PaletteColor;
34
+ warning: PaletteColor;
35
+ };
36
+ palette: Record<PaletteColor, string>;
37
+ surface: {
38
+ alert: PaletteColor;
39
+ hover: PaletteColor;
40
+ level1: PaletteColor;
41
+ level2: PaletteColor;
42
+ level3: PaletteColor;
43
+ selected: PaletteColor;
44
+ success: PaletteColor;
45
+ successAlt: PaletteColor;
46
+ warning: PaletteColor;
47
+ };
48
+ typography: {
49
+ alert: PaletteColor;
50
+ alt: PaletteColor;
51
+ link: PaletteColor;
52
+ success: PaletteColor;
53
+ t1: PaletteColor;
54
+ t2: PaletteColor;
55
+ t3: PaletteColor;
56
+ warning: PaletteColor;
57
+ };
58
+ };
59
+ dimensions: {
60
+ gridGutter: ResolutionAwareProp<string>;
61
+ headerHeight: ResolutionAwareProp<string>;
62
+ maxWidth: string;
63
+ spacing: {
64
+ s1: string;
65
+ s2: string;
66
+ s3: string;
67
+ s4: string;
68
+ s5: string;
69
+ s6: string;
70
+ };
71
+ };
72
+ fonts: {
73
+ badge: FontInfo;
74
+ boldFontFamily: string;
75
+ h1: FontInfo;
76
+ h2: FontInfo;
77
+ h3: FontInfo;
78
+ h4: FontInfo;
79
+ h5: FontInfo;
80
+ hero: FontInfo;
81
+ link: FontInfo;
82
+ p0: FontInfo;
83
+ p1: FontInfo;
84
+ p2: FontInfo;
85
+ p3: FontInfo;
86
+ regularFontFamily: string;
87
+ };
88
+ name: string;
89
+ shadow: string;
90
+ transitions: {
91
+ base: string;
92
+ slow: string;
93
+ slowest: string;
94
+ turtle: string;
95
+ };
96
+ }
97
+ }
98
+ declare const lightTheme: DefaultTheme;
99
+ declare const darkTheme: DefaultTheme;
100
+ export declare const getThemeColor: (color: PaletteColor, currentTheme?: DefaultTheme) => string;
101
+ declare const combinationsByColor: (appTheme?: DefaultTheme) => {
102
+ alert: {
103
+ background: string;
104
+ color: string;
105
+ hover: string;
106
+ selected: string;
107
+ };
108
+ black: {
109
+ background: string;
110
+ color: string;
111
+ hover: string;
112
+ selected: string;
113
+ };
114
+ blue: {
115
+ background: string;
116
+ color: string;
117
+ hover: string;
118
+ selected: string;
119
+ };
120
+ gold: {
121
+ background: string;
122
+ color: string;
123
+ hover: string;
124
+ selected: string;
125
+ };
126
+ green: {
127
+ background: string;
128
+ color: string;
129
+ hover: string;
130
+ selected: string;
131
+ };
132
+ grey: {
133
+ background: string;
134
+ color: string;
135
+ hover: string;
136
+ selected: string;
137
+ };
138
+ greyLight: {
139
+ background: string;
140
+ color: string;
141
+ hover: string;
142
+ selected: string;
143
+ };
144
+ pink: {
145
+ background: string;
146
+ color: string;
147
+ hover: string;
148
+ selected: string;
149
+ };
150
+ primary: {
151
+ background: string;
152
+ color: string;
153
+ hover: string;
154
+ selected: string;
155
+ };
156
+ secondary: {
157
+ background: string;
158
+ hover: string;
159
+ selected: string;
160
+ };
161
+ secondaryAlt: {
162
+ background: string;
163
+ color: string;
164
+ hover: string;
165
+ selected: string;
166
+ };
167
+ white: {
168
+ background: string;
169
+ color: string;
170
+ hover: string;
171
+ selected: string;
172
+ };
173
+ yellow: {
174
+ background: string;
175
+ color: string;
176
+ hover: string;
177
+ selected: string;
178
+ };
179
+ };
180
+ export { lightTheme, darkTheme, combinationsByColor };
@@ -0,0 +1,7 @@
1
+ export declare type AppSize = 'lg' | 'md' | 'sm' | string;
2
+ export interface ResolutionAwarePropBase<T> {
3
+ lg?: T;
4
+ md?: T;
5
+ sm?: T;
6
+ }
7
+ export declare type ResolutionAwareProp<T> = T extends boolean ? boolean | ResolutionAwarePropBase<T> | any : T | ResolutionAwarePropBase<T>;
package/package.json CHANGED
@@ -1,16 +1,18 @@
1
1
  {
2
2
  "name": "gantri-components",
3
- "version": "1.0.2",
4
- "main": "lib/index.js",
5
- "module": "lib/index.esm.js",
3
+ "version": "1.0.6",
4
+ "main": "dist/index.cjs.js",
5
+ "module": "dist/src/index.js",
6
6
  "types": "lib/index.d.ts",
7
7
  "repository": "git@github.com:gantri/ui-library.git",
8
8
  "author": "Danny <danny@gantri.com>",
9
+ "sideEffects": false,
9
10
  "license": "MIT",
10
11
  "scripts": {
11
12
  "build": "rollup -c",
12
13
  "storybook": "start-storybook -p 6006",
13
- "build-storybook": "build-storybook"
14
+ "build-storybook": "build-storybook",
15
+ "publish": "yarn build && yarn publish"
14
16
  },
15
17
  "peerDependencies": {
16
18
  "react": "^17.0.2",
@@ -20,6 +22,7 @@
20
22
  "@babel/core": "^7.17.5",
21
23
  "@react-theming/storybook-addon": "^1.1.5",
22
24
  "@rollup/plugin-commonjs": "^21.0.2",
25
+ "@rollup/plugin-json": "^4.1.0",
23
26
  "@rollup/plugin-node-resolve": "^13.1.3",
24
27
  "@storybook/addon-actions": "^6.4.19",
25
28
  "@storybook/addon-essentials": "^6.4.19",
@@ -1 +0,0 @@
1
- export * from './Button';
package/lib/index.esm.js DELETED
@@ -1,45 +0,0 @@
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
@@ -1 +0,0 @@
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 DELETED
@@ -1,53 +0,0 @@
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 DELETED
@@ -1 +0,0 @@
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;;;;;;;;;;;;;;;;;;"}