@bolio-ui/core 1.0.1 → 1.0.3
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 +25 -7
- package/dist/avatar/index.js +6 -6
- package/dist/card/index.js +1 -1
- package/dist/index.js +499 -215
- package/dist/input/index.js +7 -7
- package/dist/table/index.js +1139 -0
- package/esm/avatar/avatar.js +6 -6
- package/esm/button/stories.js +1 -1
- package/esm/card/styles.js +1 -1
- package/esm/index.js +1 -0
- package/esm/input/input.js +7 -7
- package/esm/table/index.js +2 -0
- package/esm/table/stories.js +269 -0
- package/esm/table/table-body.js +54 -0
- package/esm/table/table-cell.js +28 -0
- package/esm/table/table-column.js +41 -0
- package/esm/table/table-context.js +9 -0
- package/esm/table/table-head.js +58 -0
- package/esm/table/table-types.js +1 -0
- package/esm/table/table.js +115 -0
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,16 +1,27 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<a href="https://github.com/
|
|
3
|
-
<img src="https://
|
|
2
|
+
<a href="https://github.com/bolio-ui/bolio-ui">
|
|
3
|
+
<img src="https://bolio-ui.com/logo-colored.svg" alt="Bolio UI Logo" width="100" />
|
|
4
4
|
</a>
|
|
5
5
|
</p>
|
|
6
6
|
|
|
7
7
|
<h1 align="center">Bolio UI 🥷🏼</h1>
|
|
8
8
|
|
|
9
9
|
<p align="center">
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<
|
|
10
|
+
<a href="https://github.com/bolio-ui/bolio-ui/blob/master/LICENSE">
|
|
11
|
+
<img alt="MIT License" src="https://img.shields.io/github/license/bolio-ui/bolio-ui" />
|
|
12
|
+
</a>
|
|
13
|
+
<a href="https://www.npmjs.com/package/@bolio-ui/core">
|
|
14
|
+
<img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@bolio-ui/core.svg?style=flat" />
|
|
15
|
+
</a>
|
|
16
|
+
<a href="https://github.com/bolio-ui/bolio-ui/">
|
|
17
|
+
<img alt="Github Stars" src="https://badgen.net/github/stars/bolio-ui/bolio-ui" />
|
|
18
|
+
</a>
|
|
19
|
+
<a href="https://github.com/bolio-ui/bolio-ui/issues">
|
|
20
|
+
<img alt="Issues" src="https://img.shields.io/github/issues/bolio-ui/bolio-ui?color=0088ff" />
|
|
21
|
+
</a>
|
|
22
|
+
<a href="https://github.com/bolio-ui/bolio-ui/pulls">
|
|
23
|
+
<img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/bolio-ui/bolio-ui?color=0088ff" />
|
|
24
|
+
</a>
|
|
14
25
|
</p>
|
|
15
26
|
|
|
16
27
|
<br />
|
|
@@ -38,10 +49,11 @@ npm i @bolio-ui/core
|
|
|
38
49
|
Go to the root of your application and do this:
|
|
39
50
|
|
|
40
51
|
```jsx
|
|
41
|
-
import { BolioUIProvider } from '@bolio-ui/core'
|
|
52
|
+
import { BolioUIProvider, CssBaseline } from '@bolio-ui/core'
|
|
42
53
|
|
|
43
54
|
const Application = () => (
|
|
44
55
|
<BolioUIProvider>
|
|
56
|
+
<CssBaseline /> // ---> Normalize styles
|
|
45
57
|
<AppComponent /> // ---> Your App Component
|
|
46
58
|
</BolioUIProvider>
|
|
47
59
|
)
|
|
@@ -57,6 +69,12 @@ import { Button } from '@bolio-ui/core'
|
|
|
57
69
|
const Component = () => <Button>Click me</Button>
|
|
58
70
|
```
|
|
59
71
|
|
|
72
|
+
### Showcases
|
|
73
|
+
|
|
74
|
+
- [Bolio Icons](https://icons.bolio-ui.com/)
|
|
75
|
+
- [Bolio Me](https://me.bolio-ui.com/)
|
|
76
|
+
- [Bolio ChatGPT](https://chatgpt.bolio-ui.com/)
|
|
77
|
+
|
|
60
78
|
### Community
|
|
61
79
|
|
|
62
80
|
We're excited to see the community adopt Bolio UI, raise issues, and provide feedback.
|
package/dist/avatar/index.js
CHANGED
|
@@ -849,7 +849,7 @@ function AvatarComponent(_ref) {
|
|
|
849
849
|
};
|
|
850
850
|
}, [loading, showAnimation]);
|
|
851
851
|
return /*#__PURE__*/React__default["default"].createElement("span", {
|
|
852
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
852
|
+
className: styledJsx_cjs.style.dynamic([["2739790524", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || "")
|
|
853
853
|
}, !showText && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showSkeleton && showAnimation && /*#__PURE__*/React__default["default"].createElement(AvatarSkeleton$1, {
|
|
854
854
|
opacity: loading ? 1 : 0
|
|
855
855
|
}), /*#__PURE__*/React__default["default"].createElement("img", _extends({
|
|
@@ -859,13 +859,13 @@ function AvatarComponent(_ref) {
|
|
|
859
859
|
onLoad: imageLoaded,
|
|
860
860
|
draggable: false
|
|
861
861
|
}, props, {
|
|
862
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
862
|
+
className: styledJsx_cjs.style.dynamic([["2739790524", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
|
|
863
863
|
}))), showText && /*#__PURE__*/React__default["default"].createElement("span", _extends({}, props, {
|
|
864
|
-
className: styledJsx_cjs.style.dynamic([["
|
|
864
|
+
className: styledJsx_cjs.style.dynamic([["2739790524", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text")
|
|
865
865
|
}), safeText(text)), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
|
|
866
|
-
id: "
|
|
867
|
-
dynamic: [radius, theme.palette.
|
|
868
|
-
}, ".avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border-radius:".concat(radius, ";vertical-align:top;background-color:").concat(theme.palette.
|
|
866
|
+
id: "2739790524",
|
|
867
|
+
dynamic: [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]
|
|
868
|
+
}, ".avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border-radius:".concat(radius, ";vertical-align:top;background-color:").concat(theme.palette.accents_2, ";box-sizing:border-box;width:").concat(SCALES.width(1.75) || SCALES.height(1.75), ";height:").concat(SCALES.height(1.75) || SCALES.width(1.75), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(marginLeft, ";}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:").concat(radius, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:").concat(SCALES.font(1), ";text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
|
|
869
869
|
}
|
|
870
870
|
|
|
871
871
|
AvatarComponent.displayName = 'BolioUIAvatar';
|
package/dist/card/index.js
CHANGED