tabler-react-2 0.1.85 → 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.
Files changed (17) hide show
  1. package/dist/modal/modal.js +1 -0
  2. package/dist/provider/tabler.js +75 -0
  3. package/dist/ribbon/index.js +1 -1
  4. package/docs/gatsby-config.js +4 -4
  5. package/docs/package.json +2 -1
  6. package/docs/src/components/ButtonedHookModal.jsx +15 -0
  7. package/docs/src/components/LoadableTabler.jsx +6 -0
  8. package/docs/src/config/sidebar.yml +6 -0
  9. package/docs/src/docs/components/dropdown-input.mdx +0 -13
  10. package/docs/src/docs/components/hook-driven-modals.mdx +58 -0
  11. package/docs/src/docs/components/ribbons.mdx +82 -7
  12. package/docs/src/docs/components/spinners.mdx +76 -0
  13. package/docs/src/docs/getting-started.mdx +18 -63
  14. package/docs/src/docs/theme.mdx +151 -0
  15. package/docs/src/home/index.mdx +29 -21
  16. package/docs/static/favicon.png +0 -0
  17. package/package.json +1 -1
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/dist/provider/tabler.js ADDED
@@ -0,0 +1,75 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.TablerProvider = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _propTypes = _interopRequireDefault(require("prop-types"));
10
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
11
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
12
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
13
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
14
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
15
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
16
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
17
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
18
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
19
+ var generateCSSVariables = function generateCSSVariables(theme) {
20
+ return theme ? Object.entries(theme).map(function (_ref) {
21
+ var _ref2 = _slicedToArray(_ref, 2),
22
+ key = _ref2[0],
23
+ value = _ref2[1];
24
+ return "--tblr-".concat(key, ": ").concat(value, ";");
25
+ }).join("\n") : "";
26
+ };
27
+ var TablerProvider = exports.TablerProvider = function TablerProvider(_ref3) {
28
+ var children = _ref3.children,
29
+ _ref3$colorScheme = _ref3.colorScheme,
30
+ colorScheme = _ref3$colorScheme === void 0 ? "light" : _ref3$colorScheme,
31
+ _ref3$theme = _ref3.theme,
32
+ themeColors = _ref3$theme === void 0 ? {} : _ref3$theme;
33
+ (0, _react.useEffect)(function () {
34
+ var script1 = document.createElement("script");
35
+ script1.src = "https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js";
36
+ script1.async = true;
37
+ var link = document.createElement("link");
38
+ link.rel = "stylesheet";
39
+ link.href = "https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/css/tabler.min.css";
40
+ var script2 = document.createElement("script");
41
+ script2.textContent = "window.USE_FALLBACK_ANCHOR = true;";
42
+ document.head.appendChild(link);
43
+ document.head.appendChild(script1);
44
+ document.head.appendChild(script2);
45
+ return function () {
46
+ document.head.removeChild(link);
47
+ document.head.removeChild(script1);
48
+ document.head.removeChild(script2);
49
+ };
50
+ }, []);
51
+ (0, _react.useEffect)(function () {
52
+ if (colorScheme === "dark") {
53
+ document.body.classList.add("theme-dark");
54
+ } else {
55
+ document.body.classList.remove("theme-dark");
56
+ }
57
+ }, [colorScheme]);
58
+ (0, _react.useEffect)(function () {
59
+ var styleTag = document.createElement("style");
60
+ styleTag.innerHTML = "\n :root {\n ".concat(generateCSSVariables(themeColors || {}), "\n }\n ");
61
+ document.head.appendChild(styleTag);
62
+ return function () {
63
+ document.head.removeChild(styleTag);
64
+ };
65
+ }, [themeColors]);
66
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
67
+ };
68
+ TablerProvider.propTypes = {
69
+ children: _propTypes["default"].node.isRequired,
70
+ colorScheme: _propTypes["default"].oneOf(["light", "dark"]),
71
+ themeColors: _propTypes["default"].shape({
72
+ light: _propTypes["default"].object,
73
+ dark: _propTypes["default"].object
74
+ })
75
+ };
package/dist/ribbon/index.js CHANGED
@@ -38,7 +38,7 @@ var Ribbon = exports.Ribbon = function Ribbon(_ref2) {
38
38
  _ref2$content = _ref2.content,
39
39
  content = _ref2$content === void 0 ? /*#__PURE__*/_react["default"].createElement(IconStar, null) : _ref2$content,
40
40
  shape = _ref2.shape;
41
- var color = passedColor || passedVariant || "primary";
41
+ var color = passedVariant || passedColor || "primary";
42
42
  return /*#__PURE__*/_react["default"].createElement("div", null, children, /*#__PURE__*/_react["default"].createElement("div", {
43
43
  className: (0, _classnames["default"])("ribbon", "ribbon-".concat(position), "bg-".concat(color), shape && "ribbon-".concat(shape))
44
44
  }, content));
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/jpedroschmitz/rocketdocs`,
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: `Rocket Docs`,
31
- short_name: `Rocket Docs`,
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.83"
25
+ "tabler-react-2": "0.1.86"
25
26
  },
26
27
  "devDependencies": {},
27
28
  "keywords": [
package/docs/src/components/ButtonedHookModal.jsx ADDED
@@ -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
+ };
package/docs/src/components/LoadableTabler.jsx CHANGED
@@ -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
  );
@@ -153,3 +156,6 @@ export const Typography = {
153
156
  U,
154
157
  Special,
155
158
  };
159
+ export const TablerProvider = loadable(() =>
160
+ import("tabler-react-2").then((mod) => mod.TablerProvider)
161
+ );
package/docs/src/config/sidebar.yml CHANGED
@@ -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,8 +28,12 @@
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"
35
+ - label: "Spinners"
36
+ link: "/components/spinners"
31
37
  - label: "Utilities"
32
38
  items:
33
39
  - label: "Colors"
package/docs/src/docs/components/dropdown-input.mdx CHANGED
@@ -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`.
package/docs/src/docs/components/hook-driven-modals.mdx ADDED
@@ -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>
package/docs/src/docs/components/ribbons.mdx CHANGED
@@ -4,6 +4,7 @@ title: Ribbons
4
4
 
5
5
  import { Ribbon, Card } from "../../components/LoadableTabler";
6
6
  import { Excerpt } from "../../components/Excerpt.jsx";
7
+ import { IconAerialLift } from "@tabler/icons-react";
7
8
 
8
9
  You can assign a ribbon to a card to display a small badge.
9
10
 
@@ -19,7 +20,7 @@ import { Ribbon } from "tabler-react-2";
19
20
 
20
21
  | Prop | Required | Type | Default | Description |
21
22
  | ---------- | -------- | -------------------------- | ------- | --------------------------------------------------- |
22
- | `variant` | No | [Color](/utilities/colors) | | The color variant of the ribbon. |
23
+ | `variant` | No | [Color](/utilities/colors) | primary | The color variant of the ribbon. |
23
24
  | `color` | No | [Color](/utilities/colors) | | The color variant of the ribbon. Alias of `variant` |
24
25
  | `content` | No | React.ReactNode | | The content to display in the ribbon. |
25
26
  | `position` | No | String | | The position of the ribbon. |
@@ -30,19 +31,21 @@ The `Ribbon` component is used to display a ribbon.
30
31
 
31
32
  <Excerpt>
32
33
  <Card style={{ minWidth: 150, maxWidth: 250 }}>
33
- <Ribbon>Ribbon</Ribbon>
34
+ Ribbon
35
+ <Ribbon />
34
36
  </Card>
35
37
  </Excerpt>
36
38
 
37
39
  ```jsx
38
40
  <Card>
39
- <Ribbon>Ribbon</Ribbon>
41
+ Ribbon
42
+ <Ribbon />
40
43
  </Card>
41
44
  ```
42
45
 
43
46
  ## Variants
44
47
 
45
- You can pass a `color` prop to the `Ribbon` component to change the color of the ribbon.
48
+ You can pass a `variant` prop to the `Ribbon` component to change the color of the ribbon.
46
49
 
47
50
  <Excerpt f>
48
51
  {[
@@ -57,16 +60,88 @@ You can pass a `color` prop to the `Ribbon` component to change the color of the
57
60
  "purple",
58
61
  ].map((color) => (
59
62
  <Card key={color} style={{ minWidth: 150, maxWidth: 250 }}>
60
- <Ribbon variant={color}>{color}</Ribbon>
63
+ {color}
64
+ <Ribbon variant={color} />
61
65
  </Card>
62
66
  ))}
63
67
  </Excerpt>
64
68
 
65
69
  ```jsx
66
70
  <Card>
67
- <Ribbon variant="primary">primary</Ribbon>
71
+ primary
72
+ <Ribbon variant="primary" />
68
73
  </Card>
69
74
  <Card>
70
- <Ribbon variant="secondary">secondary</Ribbon>
75
+ secondary
76
+ <Ribbon variant="secondary" />
77
+ </Card>
78
+ ```
79
+
80
+ ## Positions
81
+
82
+ You can pass a `position` prop to the `Ribbon` component to change the position of the ribbon.
83
+
84
+ <Excerpt f>
85
+ {["top", "start", "end"].map((pos) => (
86
+ <Card
87
+ key={pos}
88
+ style={{ minWidth: 150, maxWidth: 250, textAlign: "center" }}
89
+ >
90
+ <Ribbon position={pos}>{pos}</Ribbon>
91
+ </Card>
92
+ ))}
93
+ </Excerpt>
94
+
95
+ ```jsx
96
+ <Card>
97
+ <Ribbon position="top">top</Ribbon>
98
+ </Card>
99
+ <Card>
100
+ <Ribbon position="start">start</Ribbon>
101
+ </Card>
102
+ <Card>
103
+ <Ribbon position="end">end</Ribbon>
104
+ </Card>
105
+ ```
106
+
107
+ ## Shapes
108
+
109
+ You can pass a `shape` prop to the `Ribbon` component to change the shape of the ribbon.
110
+
111
+ <Excerpt f>
112
+ <Card style={{ minWidth: 150, maxWidth: 250 }}>
113
+ <span>Bookmark</span>
114
+ <Ribbon shape="bookmark" />
115
+ </Card>
116
+ <Card style={{ minWidth: 150, maxWidth: 250 }}>
117
+ <span>Normal</span>
118
+ <Ribbon />
119
+ </Card>
120
+ </Excerpt>
121
+
122
+ ```jsx
123
+ <Card>
124
+ <span>Ribbon</span>
125
+ <Ribbon shape="bookmark" />
126
+ </Card>
127
+ <Card>
128
+ <span>Ribbon</span>
129
+ <Ribbon />
130
+ </Card>
131
+ ```
132
+
133
+ ## Custom Content
134
+
135
+ You can pass a `content` prop to the `Ribbon` component to change the content of the ribbon.
136
+
137
+ <Excerpt>
138
+ <Card style={{ minWidth: 150, maxWidth: 250 }}>
139
+ <Ribbon content={<IconAerialLift />}>Ribbon</Ribbon>
140
+ </Card>
141
+ </Excerpt>
142
+
143
+ ```jsx
144
+ <Card>
145
+ <Ribbon content={<IconAerialLift />}>Ribbon</Ribbon>
71
146
  </Card>
72
147
  ```
package/docs/src/docs/components/spinners.mdx ADDED
@@ -0,0 +1,76 @@
1
+ ---
2
+ title: Spinners
3
+ ---
4
+
5
+ import { Spinner } from "../../components/LoadableTabler";
6
+ import { Excerpt } from "../../components/Excerpt.jsx";
7
+
8
+ Spinners are used to indicate that something is loading.
9
+
10
+ ## Signature
11
+
12
+ ```jsx
13
+ import { Spinner } from "tabler-react-2";
14
+
15
+ <Spinner {...props}>{children}</Spinner>;
16
+ ```
17
+
18
+ ### Props
19
+
20
+ | Prop | Required | Type | Default | Description |
21
+ | --------- | -------- | -------------------------- | ------- | -------------------------------------------------- |
22
+ | `size` | No | [`sm` \| `lg`] | `lg` | The size of the spinner. |
23
+ | `color` | No | [Color](/utilities/colors) | | The color variant of the spinner. |
24
+ | `variant` | No | String | | The color variant of the spinner. Alias of `color` |
25
+
26
+ ## Basic Usage
27
+
28
+ The `Spinner` component is used to display a spinner.
29
+
30
+ <Excerpt>
31
+ <Spinner />
32
+ </Excerpt>
33
+
34
+ ```jsx
35
+ <Spinner />
36
+ ```
37
+
38
+ ## Sizes
39
+
40
+ You can pass a `size` prop to the `Spinner` component to change the size of the spinner.
41
+
42
+ <Excerpt f>
43
+ {["sm", "lg"].map((size) => (
44
+ <Spinner key={size} size={size} />
45
+ ))}
46
+ </Excerpt>
47
+
48
+ ```jsx
49
+ <Spinner size="sm" />
50
+ <Spinner size="lg" />
51
+ ```
52
+
53
+ ## Variant
54
+
55
+ You can pass a `color` prop to the `Spinner` component to change the color of the spinner.
56
+
57
+ <Excerpt f>
58
+ {[
59
+ "primary",
60
+ "secondary",
61
+ "success",
62
+ "danger",
63
+ "warning",
64
+ "info",
65
+ "light",
66
+ "dark",
67
+ "purple",
68
+ ].map((color) => (
69
+ <Spinner key={color} variant={color} />
70
+ ))}
71
+ </Excerpt>
72
+
73
+ ```jsx
74
+ <Spinner variant="primary" />
75
+ <Spinner variant="secondary" />
76
+ ```
package/docs/src/docs/getting-started.mdx CHANGED
@@ -1,79 +1,34 @@
1
1
  ---
2
- title: 'Getting started'
3
- description: Learn how to get started with Rocket Docs.
2
+ title: "Getting started"
3
+ description: Learn how to get started with Tabler React 2
4
4
  ---
5
5
 
6
- > Rocket Docs is ready for Gatsby v5. New projects will use the new version!
6
+ Welcome to Tabler React 2! This guide will help you get started with the library and its components.
7
7
 
8
- The best way to start is by using our starter:
8
+ ## Installation
9
9
 
10
- ```bash
11
- npx gatsby new rocketdocs https://github.com/jpedroschmitz/gatsby-starter-rocketdocs
12
- ```
13
-
14
- But, if you prefer, you can install and configure manually.
15
-
16
- #### Using Yarn:
10
+ To install Tabler React 2, you can use npm or yarn.
17
11
 
18
12
  ```bash
19
- yarn add @rocketseat/gatsby-theme-docs
13
+ npm install tabler-react-2 @tabler/icons-react
20
14
  ```
21
15
 
22
- #### Using NPM:
23
-
24
16
  ```bash
25
- npm i @rocketseat/gatsby-theme-docs
17
+ yarn add tabler-react-2 @tabler/icons-react
26
18
  ```
27
19
 
28
- ## Theme Options
29
-
30
- | Key | Default | Required | Description |
31
- | ------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
32
- | basePath | / | No | Root url for all docs |
33
- | configPath | config | No | Location of config files |
34
- | docsPath | docs | No | The site description for SEO and social (FB, Twitter) tags |
35
- | homePath | - | No | Location of home file |
36
- | githubUrl | - | - | Deprecated in favor of `repositoryUrl` |
37
- | repositoryUrl | - | No | The complete URL of your repository (supports GitHub, GitLab and Bitbucket). Example: `https://github/jpedroschmitz/rocketdocs` |
38
- | baseDir | - | No | If your Gatsby site does not live in the root of your project directory/git repo, pass the subdirectory name here (ex: `docs`) |
39
- | withMdx | true | No | If necessary, you can add your own MDX options to the theme. To do so, make sure you turn this option to false and include `gatsby-plugin-mdx` on your `gatsby-config` |
40
- | branch | main | No | Default branch of the repository |
20
+ ## Usage
41
21
 
42
- <br />
22
+ 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.
43
23
 
44
- > Note: When adding a BitBucket link on the `repositoryUrl` option, don't add the `src/<branch>` to it.
45
- > Example of correct link: <br /> `https://bitbucket.org/jpedroschmitz/rocketdocs`
24
+ ```jsx
25
+ import { TablerProvider } from "tabler-react-2";
46
26
 
47
- ## Example usage
48
-
49
- ```js title=gatsby-config.js
50
- module.exports = {
51
- siteMetadata: {
52
- siteTitle: `@rocketseat/gatsby-theme-docs`,
53
- defaultTitle: `@rocketseat/gatsby-theme-docs`,
54
- siteTitleShort: `gatsby-theme-docs`,
55
- siteDescription: `Out of the box Gatsby Theme for creating documentation websites easily and quickly`,
56
- siteUrl: `https://rocketdocs.netlify.app`,
57
- siteAuthor: `@jpedroschmitz`,
58
- siteImage: `/banner.png`,
59
- siteLanguage: `en`,
60
- themeColor: `#8257E6`,
61
- basePath: `/`,
62
- },
63
- plugins: [
64
- {
65
- resolve: `@rocketseat/gatsby-theme-docs`,
66
- options: {
67
- basePath: `/`,
68
- configPath: `src/config`,
69
- docsPath: `src/docs`,
70
- homePath: `src/home`,
71
- repositoryUrl: `https://github.com/jpedroschmitz/rocketdocs`,
72
- baseDir: `examples/gatsby-theme-docs`,
73
- },
74
- },
75
- ],
76
- };
27
+ function App() {
28
+ return (
29
+ <TablerProvider>
30
+ <YourApp />
31
+ </TablerProvider>
32
+ );
33
+ }
77
34
  ```
78
-
79
- Once you have installed the dependencies you will need to create the [navigation](/usage/navigation) and [documentation](/usage/creating-docs) files.
package/docs/src/docs/theme.mdx ADDED
@@ -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
- Rocket Docs is a complete and awesome Gatsby Theme for documentation websites. We've
4
- developed it to be easy to use and customize. Forget about other
5
- things and focus on what matters: **writing docs.**
6
-
7
- ## Features
8
-
9
- - ⚛️ Ready for Gatsby v5;
10
- - 📝 MDX for docs;
11
- - 🛣 Yaml-based sidebar navigation;
12
- - 📱 Responsive and mobile friendly;
13
- - 🖥 Code highlighting with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) and [react-live](https://github.com/FormidableLabs/react-live) support;
14
- - 🥇 SEO (Sitemap, schema.org data, Open Graph and Twitter tags).
15
- - 📈 Google Analytics support;
16
- - 📄 Custom docs schema;
17
- - 🖱 Table of Contents;
18
- - ⚡️ Offline Support & WebApp Manifest;
19
- - and much more 🔥
20
-
21
- <br />
22
-
23
- [Get started now!](/getting-started)
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tabler-react-2",
3
- "version": "0.1.85",
3
+ "version": "0.1.87",
4
4
  "description": "A react implementation of Tabler ui",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {