@inventreedb/ui 0.2.0 → 0.2.2

package/dist/.vite/manifest.json

@@ -63,14 +63,13 @@
     "name": "_virtual/index",
     "src": "/home/inventree/src/frontend/node_modules/unraw/dist/index.js?commonjs-exports"
   },
-  "lib/components/StylishText.tsx": {
-    "file": "components/StylishText.js",
-    "name": "components/StylishText",
-    "src": "lib/components/StylishText.tsx",
+  "lib/components/InvenTreeStylishText.tsx": {
+    "file": "components/InvenTreeStylishText.js",
+    "name": "components/InvenTreeStylishText",
+    "src": "lib/components/InvenTreeStylishText.tsx",
     "imports": [
       "/home/inventree/src/frontend/node_modules/react/jsx-runtime.js?commonjs-es-import",
       "node_modules/@mantine/core/esm/components/Text/Text.mjs",
-      "node_modules/@mantine/core/esm/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs",
       "node_modules/@mantine/core/esm/core/MantineProvider/color-functions/get-theme-color/get-theme-color.mjs",
       "node_modules/@mantine/core/esm/core/MantineProvider/color-functions/darken/darken.mjs"
     ]
@@ -139,7 +138,7 @@
       "lib/functions/Api.tsx",
       "lib/functions/Navigation.tsx",
       "lib/functions/Plugins.tsx",
-      "lib/components/StylishText.tsx"
+      "lib/components/InvenTreeStylishText.tsx"
     ]
   },
   "lib/types/Plugins.tsx": {

package/dist/components/InvenTreeStylishText.d.ts

@@ -0,0 +1,13 @@
+import { MantineSize, MantineTheme } from '@mantine/core';
+import { JSX } from 'react';
+/**
+ * A stylish text component that uses the primary color of the theme
+ * Note that the "theme" object must be provided by the parent component.
+ * - For plugins this theme object is provided.
+ * - For the main UI, we have a separate <StylishText> component
+ */
+export declare function InvenTreeStylishText({ children, theme, size }: Readonly<{
+    children: JSX.Element | string;
+    theme: MantineTheme;
+    size?: MantineSize;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/components/{StylishText.js → InvenTreeStylishText.js}

@@ -1,15 +1,15 @@
 import { j as jsxRuntimeExports } from "../_virtual/jsx-runtime.js";
 import { useMemo } from "react";
 import { Text } from "../node_modules/@mantine/core/esm/components/Text/Text.js";
-import { useMantineTheme } from "../node_modules/@mantine/core/esm/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.js";
 import { getThemeColor } from "../node_modules/@mantine/core/esm/core/MantineProvider/color-functions/get-theme-color/get-theme-color.js";
 import { darken } from "../node_modules/@mantine/core/esm/core/MantineProvider/color-functions/darken/darken.js";
-const useThematicGradient = () => {
-  const theme = useMantineTheme();
+const useThematicGradient = ({
+  suppliedTheme
+}) => {
   const primary = useMemo(() => {
-    return getThemeColor(theme.primaryColor, theme);
-  }, [theme]);
-  const secondary = useMemo(() => darken(primary, 0.9), [primary]);
+    return getThemeColor(suppliedTheme.primaryColor, suppliedTheme);
+  }, [suppliedTheme]);
+  const secondary = useMemo(() => darken(primary, 0.25), [primary]);
   return useMemo(() => {
     return {
       primary,
@@ -17,20 +17,23 @@ const useThematicGradient = () => {
     };
   }, [primary, secondary]);
 };
-function StylishText({
+function InvenTreeStylishText({
   children,
+  theme,
   size
 }) {
   const {
     primary,
     secondary
-  } = useThematicGradient();
+  } = useThematicGradient({
+    suppliedTheme: theme
+  });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fw: 700, size: size ?? "xl", variant: "gradient", gradient: {
     from: primary.toString(),
     to: secondary.toString()
   }, children });
 }
 export {
-  StylishText
+  InvenTreeStylishText
 };
-//# sourceMappingURL=StylishText.js.map
+//# sourceMappingURL=InvenTreeStylishText.js.map

package/dist/components/InvenTreeStylishText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvenTreeStylishText.js","sources":["../../lib/components/InvenTreeStylishText.tsx"],"sourcesContent":["import {\n  type MantineSize,\n  type MantineTheme,\n  Text,\n  darken,\n  getThemeColor\n} from '@mantine/core';\nimport { useMemo } from 'react';\nimport type { JSX } from 'react';\n\n// Hook that memoizes the gradient color based on the primary color of the theme\nconst useThematicGradient = ({\n  suppliedTheme\n}: {\n  suppliedTheme: MantineTheme;\n}) => {\n  const primary = useMemo(() => {\n    return getThemeColor(suppliedTheme.primaryColor, suppliedTheme);\n  }, [suppliedTheme]);\n\n  const secondary = useMemo(() => darken(primary, 0.25), [primary]);\n\n  return useMemo(() => {\n    return { primary, secondary };\n  }, [primary, secondary]);\n};\n\n/**\n * A stylish text component that uses the primary color of the theme\n * Note that the \"theme\" object must be provided by the parent component.\n * - For plugins this theme object is provided.\n * - For the main UI, we have a separate <StylishText> component\n */\nexport function InvenTreeStylishText({\n  children,\n  theme,\n  size\n}: Readonly<{\n  children: JSX.Element | string;\n  theme: MantineTheme;\n  size?: MantineSize;\n}>) {\n  const { primary, secondary } = useThematicGradient({ suppliedTheme: theme });\n\n  return (\n    <Text\n      fw={700}\n      size={size ?? 'xl'}\n      variant='gradient'\n      gradient={{ from: primary.toString(), to: secondary.toString() }}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["useThematicGradient","suppliedTheme","primary","useMemo","getThemeColor","primaryColor","secondary","darken","InvenTreeStylishText","children","theme","size","jsx","from","toString","to"],"mappings":";;;;;AAWA,MAAMA,sBAAsBA,CAAC;AAAA,EAC3BC;AAGF,MAAM;AACEC,QAAAA,UAAUC,QAAQ,MAAM;AACrBC,WAAAA,cAAcH,cAAcI,cAAcJ,aAAa;AAAA,EAAA,GAC7D,CAACA,aAAa,CAAC;AAEZK,QAAAA,YAAYH,QAAQ,MAAMI,OAAOL,SAAS,IAAI,GAAG,CAACA,OAAO,CAAC;AAEhE,SAAOC,QAAQ,MAAM;AACZ,WAAA;AAAA,MAAED;AAAAA,MAASI;AAAAA,IAAU;AAAA,EAAA,GAC3B,CAACJ,SAASI,SAAS,CAAC;AACzB;AAQO,SAASE,qBAAqB;AAAA,EACnCC;AAAAA,EACAC;AAAAA,EACAC;AAKD,GAAG;AACI,QAAA;AAAA,IAAET;AAAAA,IAASI;AAAAA,MAAcN,oBAAoB;AAAA,IAAEC,eAAeS;AAAAA,EAAAA,CAAO;AAGzE,SAAAE,sCAAC,QACC,IAAI,KACJ,MAAMD,QAAQ,MACd,SAAQ,YACR,UAAU;AAAA,IAAEE,MAAMX,QAAQY,SAAS;AAAA,IAAGC,IAAIT,UAAUQ,SAAS;AAAA,KAE5DL,SACH,CAAA;AAEJ;"}

package/dist/index.d.ts

@@ -6,4 +6,4 @@ export type { InvenTreePluginContext } from './types/Plugins';
 export { apiUrl } from './functions/Api';
 export { getBaseUrl, getDetailUrl, navigateToLink } from './functions/Navigation';
 export { checkPluginVersion } from './functions/Plugins';
-export { StylishText } from './components/StylishText';
+export { InvenTreeStylishText } from './components/InvenTreeStylishText';

package/dist/index.js

@@ -5,15 +5,15 @@ import { UserPermissions, UserRoles } from "./enums/Roles.js";
 import { apiUrl } from "./functions/Api.js";
 import { getBaseUrl, getDetailUrl, navigateToLink } from "./functions/Navigation.js";
 import { checkPluginVersion } from "./functions/Plugins.js";
-import { StylishText } from "./components/StylishText.js";
+import { InvenTreeStylishText } from "./components/InvenTreeStylishText.js";
 export {
   ApiEndpoints,
   INVENTREE_MANTINE_VERSION,
   INVENTREE_PLUGIN_VERSION,
   INVENTREE_REACT_DOM_VERSION,
   INVENTREE_REACT_VERSION,
+  InvenTreeStylishText,
   ModelType,
-  StylishText,
   UserPermissions,
   UserRoles,
   apiUrl,

package/dist/types/Plugins.js

@@ -1,4 +1,4 @@
-const INVENTREE_PLUGIN_VERSION = "0.1.0";
+const INVENTREE_PLUGIN_VERSION = "0.2.2";
 const INVENTREE_REACT_VERSION = "18.3.1";
 const INVENTREE_REACT_DOM_VERSION = (
   // @ts-ignore

package/lib/components/InvenTreeStylishText.tsx

@@ -0,0 +1,55 @@
+import {
+  type MantineSize,
+  type MantineTheme,
+  Text,
+  darken,
+  getThemeColor
+} from '@mantine/core';
+import { useMemo } from 'react';
+import type { JSX } from 'react';
+
+// Hook that memoizes the gradient color based on the primary color of the theme
+const useThematicGradient = ({
+  suppliedTheme
+}: {
+  suppliedTheme: MantineTheme;
+}) => {
+  const primary = useMemo(() => {
+    return getThemeColor(suppliedTheme.primaryColor, suppliedTheme);
+  }, [suppliedTheme]);
+
+  const secondary = useMemo(() => darken(primary, 0.25), [primary]);
+
+  return useMemo(() => {
+    return { primary, secondary };
+  }, [primary, secondary]);
+};
+
+/**
+ * A stylish text component that uses the primary color of the theme
+ * Note that the "theme" object must be provided by the parent component.
+ * - For plugins this theme object is provided.
+ * - For the main UI, we have a separate <StylishText> component
+ */
+export function InvenTreeStylishText({
+  children,
+  theme,
+  size
+}: Readonly<{
+  children: JSX.Element | string;
+  theme: MantineTheme;
+  size?: MantineSize;
+}>) {
+  const { primary, secondary } = useThematicGradient({ suppliedTheme: theme });
+
+  return (
+    <Text
+      fw={700}
+      size={size ?? 'xl'}
+      variant='gradient'
+      gradient={{ from: primary.toString(), to: secondary.toString() }}
+    >
+      {children}
+    </Text>
+  );
+}

package/lib/index.ts

@@ -23,4 +23,4 @@ export {
 export { checkPluginVersion } from './functions/Plugins';
 
 // UI components
-export { StylishText } from './components/StylishText';
+export { InvenTreeStylishText } from './components/InvenTreeStylishText';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@inventreedb/ui",
     "description": "UI components for the InvenTree project",
-    "version": "0.2.0",
+    "version": "0.2.2",
     "private": false,
     "type": "module",
     "license": "MIT",

package/dist/components/StylishText.d.ts

@@ -1,6 +0,0 @@
-import { MantineSize } from '@mantine/core';
-import { JSX } from 'react';
-export declare function StylishText({ children, size }: Readonly<{
-    children: JSX.Element | string;
-    size?: MantineSize;
-}>): import("react/jsx-runtime").JSX.Element;

package/dist/components/StylishText.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StylishText.js","sources":["../../lib/components/StylishText.tsx"],"sourcesContent":["import {\n  type MantineSize,\n  Text,\n  darken,\n  getThemeColor,\n  useMantineTheme\n} from '@mantine/core';\nimport { useMemo } from 'react';\nimport type { JSX } from 'react';\n\n// Hook that memoizes the gradient color based on the primary color of the theme\nconst useThematicGradient = () => {\n  const theme = useMantineTheme();\n\n  const primary = useMemo(() => {\n    return getThemeColor(theme.primaryColor, theme);\n  }, [theme]);\n\n  const secondary = useMemo(() => darken(primary, 0.9), [primary]);\n\n  return useMemo(() => {\n    return { primary, secondary };\n  }, [primary, secondary]);\n};\n\n// A stylish text component that uses the primary color of the theme\nexport function StylishText({\n  children,\n  size\n}: Readonly<{\n  children: JSX.Element | string;\n  size?: MantineSize;\n}>) {\n  const { primary, secondary } = useThematicGradient();\n\n  return (\n    <Text\n      fw={700}\n      size={size ?? 'xl'}\n      variant='gradient'\n      gradient={{ from: primary.toString(), to: secondary.toString() }}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["useThematicGradient","theme","useMantineTheme","primary","useMemo","getThemeColor","primaryColor","secondary","darken","StylishText","children","size","jsx","from","toString","to"],"mappings":";;;;;;AAWA,MAAMA,sBAAsBA,MAAM;AAChC,QAAMC,QAAQC,gBAAgB;AAExBC,QAAAA,UAAUC,QAAQ,MAAM;AACrBC,WAAAA,cAAcJ,MAAMK,cAAcL,KAAK;AAAA,EAAA,GAC7C,CAACA,KAAK,CAAC;AAEJM,QAAAA,YAAYH,QAAQ,MAAMI,OAAOL,SAAS,GAAG,GAAG,CAACA,OAAO,CAAC;AAE/D,SAAOC,QAAQ,MAAM;AACZ,WAAA;AAAA,MAAED;AAAAA,MAASI;AAAAA,IAAU;AAAA,EAAA,GAC3B,CAACJ,SAASI,SAAS,CAAC;AACzB;AAGO,SAASE,YAAY;AAAA,EAC1BC;AAAAA,EACAC;AAID,GAAG;AACI,QAAA;AAAA,IAAER;AAAAA,IAASI;AAAAA,MAAcP,oBAAoB;AAGjD,SAAAY,sCAAC,QACC,IAAI,KACJ,MAAMD,QAAQ,MACd,SAAQ,YACR,UAAU;AAAA,IAAEE,MAAMV,QAAQW,SAAS;AAAA,IAAGC,IAAIR,UAAUO,SAAS;AAAA,KAE5DJ,SACH,CAAA;AAEJ;"}

package/lib/components/StylishText.tsx

@@ -1,46 +0,0 @@
-import {
-  type MantineSize,
-  Text,
-  darken,
-  getThemeColor,
-  useMantineTheme
-} from '@mantine/core';
-import { useMemo } from 'react';
-import type { JSX } from 'react';
-
-// Hook that memoizes the gradient color based on the primary color of the theme
-const useThematicGradient = () => {
-  const theme = useMantineTheme();
-
-  const primary = useMemo(() => {
-    return getThemeColor(theme.primaryColor, theme);
-  }, [theme]);
-
-  const secondary = useMemo(() => darken(primary, 0.9), [primary]);
-
-  return useMemo(() => {
-    return { primary, secondary };
-  }, [primary, secondary]);
-};
-
-// A stylish text component that uses the primary color of the theme
-export function StylishText({
-  children,
-  size
-}: Readonly<{
-  children: JSX.Element | string;
-  size?: MantineSize;
-}>) {
-  const { primary, secondary } = useThematicGradient();
-
-  return (
-    <Text
-      fw={700}
-      size={size ?? 'xl'}
-      variant='gradient'
-      gradient={{ from: primary.toString(), to: secondary.toString() }}
-    >
-      {children}
-    </Text>
-  );
-}