tabler-react-2 0.1.86 → 0.1.87
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/dist/modal/modal.js +1 -0
- package/docs/gatsby-config.js +4 -4
- package/docs/package.json +2 -1
- package/docs/src/components/ButtonedHookModal.jsx +15 -0
- package/docs/src/components/LoadableTabler.jsx +3 -0
- package/docs/src/config/sidebar.yml +4 -0
- package/docs/src/docs/components/dropdown-input.mdx +0 -13
- package/docs/src/docs/components/hook-driven-modals.mdx +58 -0
- package/docs/src/docs/theme.mdx +151 -0
- package/docs/src/home/index.mdx +29 -21
- package/docs/static/favicon.png +0 -0
- package/package.json +1 -1
- package/docs/src/docs/themes.mdx +0 -28
package/dist/modal/modal.js
CHANGED
|
@@ -120,6 +120,7 @@ var useModal = exports.useModal = function useModal(options) {
|
|
|
120
120
|
});
|
|
121
121
|
}, []);
|
|
122
122
|
var handleDecision = function handleDecision(decision) {
|
|
123
|
+
console.log(decision);
|
|
123
124
|
if (modalState.resolve) {
|
|
124
125
|
modalState.resolve(decision);
|
|
125
126
|
setModalState(function (prevState) {
|
package/docs/gatsby-config.js
CHANGED
|
@@ -19,7 +19,7 @@ module.exports = {
|
|
|
19
19
|
docsPath: `src/docs`,
|
|
20
20
|
homePath: `src/home`,
|
|
21
21
|
yamlFilesPath: `src/yamlFiles`,
|
|
22
|
-
repositoryUrl: `https://github.com/
|
|
22
|
+
repositoryUrl: `https://github.com/jackcrane/tabler-react-2`,
|
|
23
23
|
baseDir: `examples/gatsby-theme-docs`,
|
|
24
24
|
gatsbyRemarkPlugins: [],
|
|
25
25
|
},
|
|
@@ -27,9 +27,9 @@ module.exports = {
|
|
|
27
27
|
{
|
|
28
28
|
resolve: `gatsby-plugin-manifest`,
|
|
29
29
|
options: {
|
|
30
|
-
name: `
|
|
31
|
-
short_name: `
|
|
32
|
-
start_url:
|
|
30
|
+
name: `Tabler React 2 Docs`,
|
|
31
|
+
short_name: `Tabler React 2 Docs`,
|
|
32
|
+
start_url: `/getting-started`,
|
|
33
33
|
background_color: `#ffffff`,
|
|
34
34
|
display: `standalone`,
|
|
35
35
|
icon: `static/favicon.png`,
|
package/docs/package.json
CHANGED
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"@loadable/component": "^5.16.4",
|
|
11
11
|
"@rocketseat/gatsby-theme-docs": "^4.0.0",
|
|
12
|
+
"@tabler/icons-react": "^3.30.0",
|
|
12
13
|
"ajv": "^8.17.1",
|
|
13
14
|
"gatsby": "^5.9.0",
|
|
14
15
|
"gatsby-plugin-canonical-urls": "^5.9.0",
|
|
@@ -21,7 +22,7 @@
|
|
|
21
22
|
"react": "^18.2.0",
|
|
22
23
|
"react-dom": "^18.2.0",
|
|
23
24
|
"styled-components": "^6.1.15",
|
|
24
|
-
"tabler-react-2": "0.1.
|
|
25
|
+
"tabler-react-2": "0.1.86"
|
|
25
26
|
},
|
|
26
27
|
"devDependencies": {},
|
|
27
28
|
"keywords": [
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Button, useModal } from "tabler-react-2";
|
|
3
|
+
|
|
4
|
+
export const ButtonedHookModal = ({ hookProps, on = () => {} }) => {
|
|
5
|
+
const { modal, ModalElement } = useModal(hookProps);
|
|
6
|
+
|
|
7
|
+
return (
|
|
8
|
+
<>
|
|
9
|
+
<Button onClick={async () => on(await modal())}>
|
|
10
|
+
Open hook-driven modal
|
|
11
|
+
</Button>
|
|
12
|
+
{ModalElement}
|
|
13
|
+
</>
|
|
14
|
+
);
|
|
15
|
+
};
|
|
@@ -36,6 +36,9 @@ export const Input = loadable(() =>
|
|
|
36
36
|
export const Modal = loadable(() =>
|
|
37
37
|
import("tabler-react-2").then((mod) => mod.Modal)
|
|
38
38
|
);
|
|
39
|
+
export const ButtonedHookModal = loadable(() =>
|
|
40
|
+
import("./ButtonedHookModal").then((mod) => mod.ButtonedHookModal)
|
|
41
|
+
);
|
|
39
42
|
export const Ribbon = loadable(() =>
|
|
40
43
|
import("tabler-react-2").then((mod) => mod.Ribbon)
|
|
41
44
|
);
|
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
link: "/"
|
|
5
5
|
- label: "Getting started"
|
|
6
6
|
link: "/getting-started"
|
|
7
|
+
- label: "Theme"
|
|
8
|
+
link: "/theme"
|
|
7
9
|
- label: "Components"
|
|
8
10
|
items:
|
|
9
11
|
- label: "Typography"
|
|
@@ -26,6 +28,8 @@
|
|
|
26
28
|
link: "/components/dropdown-input"
|
|
27
29
|
- label: "Modals"
|
|
28
30
|
link: "/components/modals"
|
|
31
|
+
- label: "Hook-driven modals"
|
|
32
|
+
link: "/components/hook-driven-modals"
|
|
29
33
|
- label: "Ribbons"
|
|
30
34
|
link: "/components/ribbons"
|
|
31
35
|
- label: "Spinners"
|
|
@@ -224,19 +224,6 @@ You can show a loading indicator by passing in `loading={true}`.
|
|
|
224
224
|
/>
|
|
225
225
|
```
|
|
226
226
|
|
|
227
|
-
## Custom content
|
|
228
|
-
|
|
229
|
-
<Excerpt>
|
|
230
|
-
<DropdownInput
|
|
231
|
-
prompt="Select a value"
|
|
232
|
-
items={[
|
|
233
|
-
{ id: 1, label: "Sam" },
|
|
234
|
-
{ id: 2, label: "Bob" },
|
|
235
|
-
{ id: 3, label: "John" },
|
|
236
|
-
]}
|
|
237
|
-
/>
|
|
238
|
-
</Excerpt>
|
|
239
|
-
|
|
240
227
|
## ItemList
|
|
241
228
|
|
|
242
229
|
The `items` prop of the `DropdownInput` component accepts an array of objects. It accepts 2 types of entries: an `item` and a `divider`.
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Hook-driven modals
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
import { ButtonedHookModal } from "../../components/LoadableTabler.jsx";
|
|
6
|
+
import { Excerpt } from "../../components/Excerpt.jsx";
|
|
7
|
+
|
|
8
|
+
Hook-driven modals are used to display content in a layer above the main content. They can be used to display forms, confirmations, or other types of content.
|
|
9
|
+
|
|
10
|
+
## Signature
|
|
11
|
+
|
|
12
|
+
```jsx
|
|
13
|
+
import { useModal } from "tabler-react-2";
|
|
14
|
+
|
|
15
|
+
const { modal, ModalElement } = useModal({
|
|
16
|
+
title: "Modal Title",
|
|
17
|
+
text: "Text",
|
|
18
|
+
buttons: []
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
<ModalElement />
|
|
22
|
+
<Button onClick={() => modal()}>Open hook-driven modal</Button>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Props
|
|
26
|
+
|
|
27
|
+
| Prop | Required | Type | Default | Description |
|
|
28
|
+
| ------------ | -------- | ------------------------- | ------- | ------------------------------------- |
|
|
29
|
+
| `title` | No | String | | The title of the modal. |
|
|
30
|
+
| `text` | No | String | | The text of the modal. |
|
|
31
|
+
| `buttons` | No | [ButtonList](#buttonlist) | | An array of buttons to display |
|
|
32
|
+
| `modalProps` | No | Object | | Additional props to pass to the modal |
|
|
33
|
+
|
|
34
|
+
## Basic Usage
|
|
35
|
+
|
|
36
|
+
The `useModal` hook is used to display a modal.
|
|
37
|
+
|
|
38
|
+
<Excerpt>
|
|
39
|
+
<ButtonedHookModal
|
|
40
|
+
on={console.log}
|
|
41
|
+
hookProps={{
|
|
42
|
+
title: "Modal Title",
|
|
43
|
+
text: <kbd>A hook-driven modal.</kbd>,
|
|
44
|
+
buttons: [
|
|
45
|
+
{
|
|
46
|
+
text: "Button 1",
|
|
47
|
+
variant: "danger",
|
|
48
|
+
value: "one",
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
text: "Button 2",
|
|
52
|
+
variant: "success",
|
|
53
|
+
value: "two",
|
|
54
|
+
},
|
|
55
|
+
],
|
|
56
|
+
}}
|
|
57
|
+
/>
|
|
58
|
+
</Excerpt>
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: "Themes"
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
import { TablerProvider } from "../components/LoadableTabler.jsx";
|
|
6
|
+
import { Excerpt } from "../components/Excerpt.jsx";
|
|
7
|
+
|
|
8
|
+
Tabler React 2 provides a light and dark theme. You can use the `TablerProvider` component to set the theme. You can set the `colorScheme` prop to either `light` or `dark`, or let it default to `light`.
|
|
9
|
+
|
|
10
|
+
```jsx
|
|
11
|
+
<TablerProvider colorScheme="dark">
|
|
12
|
+
<h1>Hello, world!</h1>
|
|
13
|
+
</TablerProvider>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Customization
|
|
17
|
+
|
|
18
|
+
You can pass in a `theme` object to the `TablerProvider` component to customize the theme. The `theme` object accepts a nested object with the following keys:
|
|
19
|
+
|
|
20
|
+
| Key | Value |
|
|
21
|
+
| ----------------------- | ------------------------------------------------------------------------------------------------ |
|
|
22
|
+
| primary | `#206bc4` |
|
|
23
|
+
| primary-rgb | `32, 107, 196` |
|
|
24
|
+
| primary-text | `#1a569d` |
|
|
25
|
+
| primary-bg-subtle | `#d2e1f3` |
|
|
26
|
+
| primary-border-subtle | `#a6c4e7` |
|
|
27
|
+
| secondary | `#616876` |
|
|
28
|
+
| secondary-rgb | `97, 104, 118` |
|
|
29
|
+
| secondary-text | `#49566c` |
|
|
30
|
+
| secondary-bg-subtle | `#f1f5f9` |
|
|
31
|
+
| secondary-border-subtle | `#e2e8f0` |
|
|
32
|
+
| success | `#2fb344` |
|
|
33
|
+
| success-rgb | `47, 179, 68` |
|
|
34
|
+
| success-text | `#268f36` |
|
|
35
|
+
| success-bg-subtle | `#d5f0da` |
|
|
36
|
+
| success-border-subtle | `#ace1b4` |
|
|
37
|
+
| info | `#4299e1` |
|
|
38
|
+
| info-rgb | `66, 153, 225` |
|
|
39
|
+
| info-text | `#0e616e` |
|
|
40
|
+
| info-bg-subtle | `#d1ecf1` |
|
|
41
|
+
| info-border-subtle | `#a2dae3` |
|
|
42
|
+
| warning | `#f76707` |
|
|
43
|
+
| warning-rgb | `247, 103, 7` |
|
|
44
|
+
| warning-text | `#935f00` |
|
|
45
|
+
| warning-bg-subtle | `#fdeccc` |
|
|
46
|
+
| warning-border-subtle | `#fbd999` |
|
|
47
|
+
| danger | `#d63939` |
|
|
48
|
+
| danger-rgb | `214, 57, 57` |
|
|
49
|
+
| danger-text | `#ab2e2e` |
|
|
50
|
+
| danger-bg-subtle | `#f7d7d7` |
|
|
51
|
+
| danger-border-subtle | `#efb0b0` |
|
|
52
|
+
| light | `#f8fafc` |
|
|
53
|
+
| light-rgb | `248, 250, 252` |
|
|
54
|
+
| light-text | `#49566c` |
|
|
55
|
+
| light-bg-subtle | `#f8fafc` |
|
|
56
|
+
| light-border-subtle | `#e2e8f0` |
|
|
57
|
+
| dark | `#1d273b` |
|
|
58
|
+
| dark-rgb | `29, 39, 59` |
|
|
59
|
+
| dark-text | `#313c52` |
|
|
60
|
+
| dark-bg-subtle | `#9ba9be` |
|
|
61
|
+
| dark-border-subtle | `#6c7a91` |
|
|
62
|
+
| muted | `#616876` |
|
|
63
|
+
| muted-rgb | `97, 104, 118` |
|
|
64
|
+
| black | `#000000` |
|
|
65
|
+
| black-rgb | `0, 0, 0` |
|
|
66
|
+
| white | `#ffffff` |
|
|
67
|
+
| white-rgb | `255, 255, 255` |
|
|
68
|
+
| blue | `#206bc4` |
|
|
69
|
+
| blue-rgb | `32, 107, 196` |
|
|
70
|
+
| azure | `#4299e1` |
|
|
71
|
+
| azure-rgb | `66, 153, 225` |
|
|
72
|
+
| indigo | `#4263eb` |
|
|
73
|
+
| indigo-rgb | `66, 99, 235` |
|
|
74
|
+
| purple | `#ae3ec9` |
|
|
75
|
+
| purple-rgb | `174, 62, 201` |
|
|
76
|
+
| pink | `#d6336c` |
|
|
77
|
+
| pink-rgb | `214, 51, 108` |
|
|
78
|
+
| red | `#d63939` |
|
|
79
|
+
| red-rgb | `214, 57, 57` |
|
|
80
|
+
| orange | `#f76707` |
|
|
81
|
+
| orange-rgb | `247, 103, 7` |
|
|
82
|
+
| yellow | `#f59f00` |
|
|
83
|
+
| yellow-rgb | `245, 159, 0` |
|
|
84
|
+
| lime | `#74b816` |
|
|
85
|
+
| lime-rgb | `116, 184, 22` |
|
|
86
|
+
| green | `#2fb344` |
|
|
87
|
+
| green-rgb | `47, 179, 68` |
|
|
88
|
+
| teal | `#0ca678` |
|
|
89
|
+
| teal-rgb | `12, 166, 120` |
|
|
90
|
+
| cyan | `#17a2b8` |
|
|
91
|
+
| cyan-rgb | `23, 162, 184` |
|
|
92
|
+
| facebook | `#1877f2` |
|
|
93
|
+
| facebook-rgb | `24, 119, 242` |
|
|
94
|
+
| twitter | `#1da1f2` |
|
|
95
|
+
| twitter-rgb | `29, 161, 242` |
|
|
96
|
+
| linkedin | `#0a66c2` |
|
|
97
|
+
| linkedin-rgb | `10, 102, 194` |
|
|
98
|
+
| google | `#dc4e41` |
|
|
99
|
+
| google-rgb | `220, 78, 65` |
|
|
100
|
+
| youtube | `#ff0000` |
|
|
101
|
+
| youtube-rgb | `255, 0, 0` |
|
|
102
|
+
| vimeo | `#1ab7ea` |
|
|
103
|
+
| vimeo-rgb | `26, 183, 234` |
|
|
104
|
+
| dribbble | `#ea4c89` |
|
|
105
|
+
| dribbble-rgb | `234, 76, 137` |
|
|
106
|
+
| github | `#181717` |
|
|
107
|
+
| github-rgb | `24, 23, 23` |
|
|
108
|
+
| instagram | `#e4405f` |
|
|
109
|
+
| instagram-rgb | `228, 64, 95` |
|
|
110
|
+
| pinterest | `#bd081c` |
|
|
111
|
+
| pinterest-rgb | `189, 8, 28` |
|
|
112
|
+
| vk | `#6383a8` |
|
|
113
|
+
| vk-rgb | `99, 131, 168` |
|
|
114
|
+
| rss | `#ffa500` |
|
|
115
|
+
| rss-rgb | `255, 165, 0` |
|
|
116
|
+
| flickr | `#0063dc` |
|
|
117
|
+
| flickr-rgb | `0, 99, 220` |
|
|
118
|
+
| bitbucket | `#0052cc` |
|
|
119
|
+
| bitbucket-rgb | `0, 82, 204` |
|
|
120
|
+
| tabler | `#206bc4` |
|
|
121
|
+
| tabler-rgb | `32, 107, 196` |
|
|
122
|
+
| body-color | `#1d273b` |
|
|
123
|
+
| body-color-rgb | `29, 39, 59` |
|
|
124
|
+
| body-bg | `#f1f5f9` |
|
|
125
|
+
| body-bg-rgb | `241, 245, 249` |
|
|
126
|
+
| border-color | `#e6e7e9` |
|
|
127
|
+
| border-radius | `4px` |
|
|
128
|
+
| border-radius-sm | `2px` |
|
|
129
|
+
| border-radius-lg | `8px` |
|
|
130
|
+
| border-radius-xl | `1rem` |
|
|
131
|
+
| border-radius-2xl | `2rem` |
|
|
132
|
+
| border-radius-pill | `100rem` |
|
|
133
|
+
| box-shadow | `0 0.5rem 1rem rgba(29, 39, 59, 0.15)` |
|
|
134
|
+
| emphasis-color | `#000000` |
|
|
135
|
+
| emphasis-color-rgb | `0, 0, 0` |
|
|
136
|
+
| font-sans-serif | `-apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif` |
|
|
137
|
+
| font-monospace | `Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace` |
|
|
138
|
+
| body-font-family | `var(--font-sans-serif)` |
|
|
139
|
+
| body-font-size | `0.875rem` |
|
|
140
|
+
| body-font-weight | `400` |
|
|
141
|
+
| body-line-height | `1.4285714286` |
|
|
142
|
+
| link-color | `#206bc4` |
|
|
143
|
+
| link-hover-color | `#1a569d` |
|
|
144
|
+
| highlight-bg | `#fdeccc` |
|
|
145
|
+
| border-width | `1px` |
|
|
146
|
+
| breakpoint-xs | `0` |
|
|
147
|
+
| breakpoint-sm | `576px` |
|
|
148
|
+
| breakpoint-md | `768px` |
|
|
149
|
+
| breakpoint-lg | `992px` |
|
|
150
|
+
| breakpoint-xl | `1200px` |
|
|
151
|
+
| breakpoint-xxl | `1400px` |
|
package/docs/src/home/index.mdx
CHANGED
|
@@ -1,23 +1,31 @@
|
|
|
1
1
|
# Introduction
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
3
|
+
Tabler React 2 is a React implementation of [Tabler](https://tabler.io) UI components, but is not an official project of Tabler. It is still a work in progress, but breaking changes are not to be expected.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
To install Tabler React 2, you can use npm or yarn.
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install tabler-react-2 @tabler/icons-react
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
yarn add tabler-react-2 @tabler/icons-react
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
To use Tabler React 2, you need to wrap your application with the `TablerProvider` component. This component provides the necessary CSS and JavaScript files for Tabler React 2.
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
import { TablerProvider } from "tabler-react-2";
|
|
23
|
+
|
|
24
|
+
function App() {
|
|
25
|
+
return (
|
|
26
|
+
<TablerProvider>
|
|
27
|
+
<YourApp />
|
|
28
|
+
</TablerProvider>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
```
|
package/docs/static/favicon.png
CHANGED
|
Binary file
|
package/package.json
CHANGED
package/docs/src/docs/themes.mdx
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: "Themes"
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
import { TablerProvider } from "../components/LoadableTabler";
|
|
6
|
-
import { Excerpt } from "../components/Excerpt.jsx";
|
|
7
|
-
|
|
8
|
-
Tabler React 2 provides a light and dark theme. You can use the `TablerProvider` component to set the theme.
|
|
9
|
-
|
|
10
|
-
## Light theme
|
|
11
|
-
|
|
12
|
-
The light theme is the default theme. It provides a light and dark theme.
|
|
13
|
-
|
|
14
|
-
<Excerpt>
|
|
15
|
-
<TablerProvider>
|
|
16
|
-
<div style={{ padding: 20 }}>
|
|
17
|
-
<h1>Hello, world!</h1>
|
|
18
|
-
</div>
|
|
19
|
-
</TablerProvider>
|
|
20
|
-
</Excerpt>
|
|
21
|
-
|
|
22
|
-
```jsx
|
|
23
|
-
<TablerProvider>
|
|
24
|
-
<div style={{ padding: 20 }}>
|
|
25
|
-
<h1>Hello, world!</h1>
|
|
26
|
-
</div>
|
|
27
|
-
</TablerProvider>
|
|
28
|
-
```
|