tabler-react-2 0.1.86 → 0.1.88

package/dist/provider/tabler.js

@@ -29,7 +29,9 @@ var TablerProvider = exports.TablerProvider = function TablerProvider(_ref3) {
     _ref3$colorScheme = _ref3.colorScheme,
     colorScheme = _ref3$colorScheme === void 0 ? "light" : _ref3$colorScheme,
     _ref3$theme = _ref3.theme,
-    themeColors = _ref3$theme === void 0 ? {} : _ref3$theme;
+    themeColors = _ref3$theme === void 0 ? {} : _ref3$theme,
+    _ref3$fallbackAnchor = _ref3.fallbackAnchor,
+    fallbackAnchor = _ref3$fallbackAnchor === void 0 ? true : _ref3$fallbackAnchor;
   (0, _react.useEffect)(function () {
     var script1 = document.createElement("script");
     script1.src = "https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js";
@@ -38,7 +40,7 @@ var TablerProvider = exports.TablerProvider = function TablerProvider(_ref3) {
     link.rel = "stylesheet";
     link.href = "https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/css/tabler.min.css";
     var script2 = document.createElement("script");
-    script2.textContent = "window.USE_FALLBACK_ANCHOR = true;";
+    script2.textContent = "window.USE_FALLBACK_ANCHOR = ".concat(fallbackAnchor, ";");
     document.head.appendChild(link);
     document.head.appendChild(script1);
     document.head.appendChild(script2);

package/dist/steps/index.js

@@ -10,13 +10,15 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var Steps = exports.Steps = function Steps(_ref) {
   var steps = _ref.steps,
-    color = _ref.color,
+    passedColor = _ref.color,
+    passedVariant = _ref.variant,
     _ref$numbered = _ref.numbered,
     numbered = _ref$numbered === void 0 ? false : _ref$numbered,
     _ref$hideText = _ref.hideText,
     hideText = _ref$hideText === void 0 ? false : _ref$hideText,
     _ref$vertical = _ref.vertical,
     vertical = _ref$vertical === void 0 ? false : _ref$vertical;
+  var color = passedColor || passedVariant;
   var stepClass = "steps ".concat(color ? "steps-".concat(color) : "", " ").concat(numbered ? "steps-counter" : "", " ").concat(vertical ? "steps-vertical" : "");
   return /*#__PURE__*/_react["default"].createElement("ul", {
     className: stepClass

package/docs/gatsby-config.js

@@ -19,7 +19,7 @@ module.exports = {
         docsPath: `src/docs`,
         homePath: `src/home`,
         yamlFilesPath: `src/yamlFiles`,
-        repositoryUrl: `https://github.com/jpedroschmitz/rocketdocs`,
+        repositoryUrl: `https://github.com/jackcrane/tabler-react-2`,
         baseDir: `examples/gatsby-theme-docs`,
         gatsbyRemarkPlugins: [],
       },
@@ -27,9 +27,9 @@ module.exports = {
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
-        name: `Rocket Docs`,
-        short_name: `Rocket Docs`,
-        start_url: `/`,
+        name: `Tabler React 2 Docs`,
+        short_name: `Tabler React 2 Docs`,
+        start_url: `/getting-started`,
         background_color: `#ffffff`,
         display: `standalone`,
         icon: `static/favicon.png`,

package/docs/package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "@rocketseat/gatsby-theme-docs": "^4.0.0",
+    "@tabler/icons-react": "^3.30.0",
     "ajv": "^8.17.1",
     "gatsby": "^5.9.0",
     "gatsby-plugin-canonical-urls": "^5.9.0",
@@ -21,7 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.15",
-    "tabler-react-2": "0.1.85"
+    "tabler-react-2": "0.1.87"
   },
   "devDependencies": {},
   "keywords": [

package/docs/src/components/ButtonedHookModal.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Button, useModal } from "tabler-react-2";
+
+export const ButtonedHookModal = ({ hookProps, buttonOn, on = () => {} }) => {
+  const { modal, ModalElement } = useModal(hookProps);
+
+  return (
+    <>
+      <Button onClick={async () => on(await modal(buttonOn))}>
+        Open hook-driven modal
+      </Button>
+      {ModalElement}
+    </>
+  );
+};

package/docs/src/components/ConfirmModal.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Button, useConfirm } from "tabler-react-2";
+
+export const ConfirmModal = ({ on = () => {}, hookProps, buttonOn }) => {
+  const { confirm, ConfirmModal } = useConfirm(hookProps);
+
+  return (
+    <>
+      <Button onClick={async () => on(await confirm(buttonOn))}>
+        Open confirm modal
+      </Button>
+      {ConfirmModal}
+    </>
+  );
+};

package/docs/src/components/Excerpt.jsx

@@ -9,7 +9,7 @@ const _Excerpt = styled.div`
   background-size: 20px 20px;
   background-position: -19px -19px;
   border: 1.5px solid #e4e4e4;
-  border-radius: 8px;
+  border-radius: 5px;
   min-height: 100px;
   width: 100%;
   padding: 16px;
@@ -18,6 +18,7 @@ const _Excerpt = styled.div`
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
+  overflow: auto;
 `;
 
 export const Excerpt = ({ children, f }) => {

package/docs/src/components/LoadableTabler.jsx

@@ -36,6 +36,12 @@ export const Input = loadable(() =>
 export const Modal = loadable(() =>
   import("tabler-react-2").then((mod) => mod.Modal)
 );
+export const ButtonedHookModal = loadable(() =>
+  import("./ButtonedHookModal").then((mod) => mod.ButtonedHookModal)
+);
+export const ConfirmModal = loadable(() =>
+  import("./ConfirmModal").then((mod) => mod.ConfirmModal)
+);
 export const Ribbon = loadable(() =>
   import("tabler-react-2").then((mod) => mod.Ribbon)
 );

package/docs/src/config/sidebar.yml

@@ -4,6 +4,8 @@
   link: "/"
 - label: "Getting started"
   link: "/getting-started"
+- label: "Theme"
+  link: "/theme"
 - label: "Components"
   items:
     - label: "Typography"
@@ -26,10 +28,18 @@
       link: "/components/dropdown-input"
     - label: "Modals"
       link: "/components/modals"
+    - label: "Hook-driven modals"
+      link: "/components/hook-driven-modals"
+    - label: "Hook-driven confirm"
+      link: "/components/hook-confirm"
     - label: "Ribbons"
       link: "/components/ribbons"
     - label: "Spinners"
       link: "/components/spinners"
+    - label: "Steps"
+      link: "/components/steps"
+    - label: "Tables"
+      link: "/components/tables"
 - label: "Utilities"
   items:
     - label: "Colors"

package/docs/src/data/congressPeople.json

@@ -0,0 +1,90 @@
+[
+  {
+    "name": "Ed Case",
+    "email": "ed.case@mail.house.gov",
+    "party": "Democrat",
+    "region": {
+      "state": "Hawaii",
+      "abbr": "HI",
+      "district": "1st"
+    },
+    "website": "https://case.house.gov"
+  },
+  {
+    "name": "Mike Carey",
+    "email": "mike.carey@mail.house.gov",
+    "party": "Republican",
+    "region": {
+      "state": "Ohio",
+      "abbr": "OH",
+      "district": "15th"
+    },
+    "website": "https://carey.house.gov"
+  },
+  {
+    "name": "Andrew Clyde",
+    "email": "andrew.clyde@mail.house.gov",
+    "party": "Republican",
+    "region": {
+      "state": "Georgia",
+      "abbr": "GA",
+      "district": "9th"
+    },
+    "website": "https://clyde.house.gov"
+  },
+  {
+    "name": "Angie Craig",
+    "email": "angie.craig@mail.house.gov",
+    "party": "Democrat",
+    "region": {
+      "state": "Minnesota",
+      "abbr": "MN",
+      "district": "2nd"
+    },
+    "website": "https://craig.house.gov"
+  },
+  {
+    "name": "Rick Crawford",
+    "email": "rick.crawford@mail.house.gov",
+    "party": "Republican",
+    "region": {
+      "state": "Arkansas",
+      "abbr": "AR",
+      "district": "1st"
+    },
+    "website": "https://crawford.house.gov"
+  },
+  {
+    "name": "Jared Golden",
+    "email": "jared.golden@mail.house.gov",
+    "party": "Democrat",
+    "region": {
+      "state": "Maine",
+      "abbr": "ME",
+      "district": "2nd"
+    },
+    "website": "https://golden.house.gov"
+  },
+  {
+    "name": "Dusty Johnson",
+    "email": "dusty.johnson@mail.house.gov",
+    "party": "Republican",
+    "region": {
+      "state": "South Dakota",
+      "abbr": "SD",
+      "district": "At-Large"
+    },
+    "website": "https://dustyjohnson.house.gov"
+  },
+  {
+    "name": "Susie Lee",
+    "email": "susie.lee@mail.house.gov",
+    "party": "Democrat",
+    "region": {
+      "state": "Nevada",
+      "abbr": "NV",
+      "district": "3rd"
+    },
+    "website": "https://susielee.house.gov"
+  }
+]

package/docs/src/docs/components/buttons.mdx

@@ -12,7 +12,7 @@ Buttons are used to trigger actions.
 ```jsx
 import { Button } from "tabler-react-2";
 
-<ButtonButton {...props} />;
+<Button {...props} />;
 ```
 
 ### Props

package/docs/src/docs/components/dropdown-input.mdx

@@ -224,19 +224,6 @@ You can show a loading indicator by passing in `loading={true}`.
 />
 ```
 
-## Custom content
-
-<Excerpt>
-  <DropdownInput
-    prompt="Select a value"
-    items={[
-      { id: 1, label: "Sam" },
-      { id: 2, label: "Bob" },
-      { id: 3, label: "John" },
-    ]}
-  />
-</Excerpt>
-
 ## ItemList
 
 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-confirm.mdx

@@ -0,0 +1,106 @@
+---
+title: Hook-driven confirm
+---
+
+import { ConfirmModal } from "../../components/LoadableTabler.jsx";
+import { Excerpt } from "../../components/Excerpt.jsx";
+
+Hook-driven confirms 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.
+
+The hook will provide a `confirm` function that returns a promise. The promise will resolve with the value of the button clicked, or `false` if the modal is closed without a button click. It will also return a `<ConfirmModal />` component that you need to render in your application.
+
+If the user clicks the cancel button, the promise will resolve with `false`, functionally the same as if the user clicked cancel.
+
+## Signature
+
+```jsx
+import { useConfirm } from "tabler-react-2";
+
+const { confirm, ConfirmModal } = useConfirm({
+  title: "Confirm Title",
+  text: "Text",
+  commitText: "Commit",
+  cancelText: "Cancel",
+});
+
+<ConfirmModal />
+<Button onClick={() => confirm()}>Open hook-driven confirm</Button>
+```
+
+### Props
+
+| Prop         | Required | Type           | Default | Description                           |
+| ------------ | -------- | -------------- | ------- | ------------------------------------- |
+| `title`      | No       | String         |         | The title of the modal.               |
+| `text`       | No       | String \| node |         | The text of the modal.                |
+| `commitText` | No       | String         |         | The text of the commit button.        |
+| `cancelText` | No       | String         |         | The text of the cancel button.        |
+| `modalProps` | No       | Object         |         | Additional props to pass to the modal |
+
+<blockquote>
+<p>
+
+**Tip**: If you need to use multiple hook driven confirms in a single scope or want to descriptively name the confirm variables you can re-assign the variable names in the deconstruction:
+
+```jsx
+const Home = () => {
+  const { confirm: signup, ConfirmModal: SignupPopup } = useConfirm({
+    title: "Confirm Title",
+    text: "Text",
+    commitText: "Commit",
+    cancelText: "Cancel",
+  });
+
+  return (
+    <>
+      <Button onClick={() => signup()}>Open hook-driven confirm</Button>
+      {SignupPopup}
+    </>
+  );
+};
+```
+
+</p>
+</blockquote>
+
+> **Note**: You don't need to use a `<Button />` component to open the confirm. The `confirm()` function is in scope and can be called directly or any other way you would typically call a function.
+
+## Basic Usage
+
+The `useConfirm` hook is used to display a confirm.
+
+<Excerpt>
+  <ConfirmModal
+    on={(d) => window && window.alert(d)}
+    hookProps={{
+      title: "Confirm Title",
+      text: <kbd>A hook-driven confirm.</kbd>,
+      commitText: "Commit",
+      cancelText: "Cancel",
+    }}
+  />
+</Excerpt>
+
+For the basic usage, this shows the entire component, not just the implementation like usual. This is because of the extra implementation steps.
+
+```jsx title="./index.jsx"
+import { useConfirm, Button } from "tabler-react-2";
+
+const Home = () => {
+  const { confirm, ConfirmModal } = useConfirm({
+    title: "Confirm Title",
+    text: "Text",
+    commitText: "Commit",
+    cancelText: "Cancel",
+  });
+
+  return (
+    <>
+      <Button onClick={async () => alert(await confirm())}>
+        Open hook-driven confirm
+      </Button>
+      {ConfirmModal}
+    </>
+  );
+};
+```

package/docs/src/docs/components/hook-driven-modals.mdx

@@ -0,0 +1,219 @@
+---
+title: Hook-driven modals
+---
+
+import { ButtonedHookModal } from "../../components/LoadableTabler.jsx";
+import { Excerpt } from "../../components/Excerpt.jsx";
+
+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.
+
+The hook will provide a `modal` function that returns a promise. The promise will resolve with the value of the button clicked, or `false` if the modal is closed without a button click. It will also return a `<ModalElement />` component that you need to render in your application.
+
+## Signature
+
+```jsx
+import { useModal } from "tabler-react-2";
+
+const { modal, ModalElement } = useModal({
+  title: "Modal Title",
+  text: "Text",
+  buttons: []
+});
+
+<ModalElement />
+<Button onClick={() => modal()}>Open hook-driven modal</Button>
+```
+
+### Props
+
+| Prop         | Required | Type                      | Default | Description                           |
+| ------------ | -------- | ------------------------- | ------- | ------------------------------------- |
+| `title`      | No       | String                    |         | The title of the modal.               |
+| `text`       | No       | String \| node            |         | The text of the modal.                |
+| `buttons`    | No       | [ButtonList](#buttonlist) |         | An array of buttons to display        |
+| `modalProps` | No       | Object                    |         | Additional props to pass to the modal |
+
+<blockquote>
+<p>
+
+**Tip**: If you need to use multiple hook driven modals in a single scope or want to descriptively name the modal variables you can re-assign the variable names in the deconstruction:
+
+```jsx
+const Home = () => {
+  const { modal: signup, ModalElement: SignupPopup } = useModal({
+    title: "Modal Title",
+    text: "Text",
+    buttons: [],
+  });
+
+  return (
+    <>
+      <Button onClick={() => signup()}>Open hook-driven modal</Button>
+      {SignupPopup}
+    </>
+  );
+};
+```
+
+</p>
+</blockquote>
+
+> **Note**: You don't need to use a `<Button />` component to open the modal. The `modal()` function is in scope and can be called directly or any other way you would typically call a function.
+
+## Basic Usage
+
+The `useModal` hook is used to display a modal.
+
+<Excerpt>
+  <ButtonedHookModal
+    on={console.log}
+    hookProps={{
+      title: "Modal Title",
+      text: <kbd>A hook-driven modal.</kbd>,
+    }}
+  />
+</Excerpt>
+
+For the basic usage, this shows the entire component, not just the implementation like usual. This is because of the extra implementation steps.
+
+```jsx title="./index.jsx"
+import { useModal, Button } from "tabler-react-2";
+
+const Home = () => {
+  const { modal, ModalElement } = useModal({
+    title: "Modal Title",
+    text: "Text",
+  });
+
+  return (
+    <>
+      <Button onClick={() => modal()}>Open hook-driven modal</Button>
+      {ModalElement}
+    </>
+  );
+};
+
+export default Home;
+```
+
+## Buttons
+
+You can pass [`ButtonList`](#buttonlist) to the `buttons` prop to display buttons in the modal footer. When the button is clicked, the modal will close and the promise returned by the `modal` function will resolve with the value of the clicked button.
+
+<Excerpt f>
+  <ButtonedHookModal
+    on={(d) => alert(d)}
+    hookProps={{
+      title: "Modal Title",
+      text: <kbd>A hook-driven modal with buttons.</kbd>,
+      buttons: [
+        {
+          text: "Button 1",
+          variant: "danger",
+          value: "one",
+        },
+        {
+          text: "Button 2",
+          variant: "success",
+          value: "two",
+        },
+      ],
+    }}
+  />
+</Excerpt>
+
+```jsx
+const Home = () => {
+  const {} = useModal({
+    title: "Modal Title",
+    text: "Text",
+    buttons: [
+      {
+        text: "Button 1",
+        variant: "danger",
+        value: "one",
+      },
+      {
+        text: "Button 2",
+        variant: "success",
+        value: "two",
+      },
+    ],
+  });
+
+  return (
+    <>
+      <Button onClick={async () => alert(await modal())}>
+        Open hook-driven modal
+      </Button>
+      {ModalElement}
+    </>
+  );
+};
+```
+
+### ButtonList
+
+The `buttons` prop of the `useModal` hook accepts an array of objects.
+
+A `button` object has the following properties:
+
+| Prop      | Required | Type   | Default | Description                                     |
+| --------- | -------- | ------ | ------- | ----------------------------------------------- |
+| `text`    | Yes      | String |         | The text to display in the button.              |
+| `variant` | No       | String |         | The color variant of the button.                |
+| `value`   | No       | Any    |         | The value to return when the button is clicked. |
+
+```ts
+type ButtonList = Array<{
+  text: string;
+  variant?: string;
+  value?: any;
+}
+```
+
+## Overriding modal setup
+
+You can pass an object to the `modal()` function to override the default modal setup:
+
+<Excerpt f>
+  <ButtonedHookModal
+    on={(d) => alert(d)}
+    hookProps={{
+      title: "This not show up",
+      text: <kbd>A hook-driven modal with buttons.</kbd>,
+      buttons: [
+        {
+          text: "Button 1",
+          variant: "danger",
+          value: "one",
+        },
+        {
+          text: "Button 2",
+          variant: "success",
+          value: "two",
+        },
+      ],
+    }}
+    buttonOn={{ title: "This will though!" }}
+  />
+</Excerpt>
+
+```jsx
+const Home = () => {
+  const { modal, ModalElement } = useModal({
+    title: "This will not show up",
+    text: "Text",
+    buttons: [],
+  });
+
+  return (
+    <>
+      <Button onClick={() => modal({ title: "This will though!" })}>
+        Open hook-driven modal
+      </Button>
+      {ModalElement}
+    </>
+  );
+};
+```

package/docs/src/docs/components/modals.mdx

@@ -113,13 +113,13 @@ You can pass [`ButtonList`](#buttonlist) to the `buttons` prop to display button
         text: "Button 1",
         variant: "danger",
         attrs: { outline: true },
-        onClick: () => alert("Clicked button 1"),
+        onClick: () => window && window.alert("Clicked button 1"),
       },
       {
         text: "Button 2",
         variant: "success",
         attrs: { outline: true },
-        onClick: () => alert("Clicked button 2"),
+        onClick: () => window && window.alert("Clicked button 2"),
       },
     ]}
   >