BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
Code Issues 3 Packages Projects Releases Wiki Activity

Update dependencies

Browse Source
This commit is contained in:
Matthew Ellison
2026-08-15 15:37:24 -04:00
parent 7265eaad18
commit cbd681e63b
26 changed files with 3230 additions and 4498 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
eslint.config.ts
View File

@@ -1,6 +1,6 @@
import js from "@eslint/js"; import js from "@eslint/js";
import pluginRouter from "@tanstack/eslint-plugin-router"; import pluginRouter from "@tanstack/eslint-plugin-router";
import react from "eslint-plugin-react"; import eslintReact from "@eslint-react/eslint-plugin";
import reactHooks from "eslint-plugin-react-hooks"; import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh"; import reactRefresh from "eslint-plugin-react-refresh";
import { defineConfig, globalIgnores } from "eslint/config"; import { defineConfig, globalIgnores } from "eslint/config";
@@ -9,12 +9,12 @@ import tseslint from "typescript-eslint";
export default defineConfig([ export default defineConfig([
globalIgnores(['dist']), globalIgnores(["dist", "coverage", ".tanstack", ".scannerwork"]),
{ {
files: ['**/*.{ts,tsx}'], files: ["**/*.{ts,tsx}"],
extends: [ extends: [
js.configs.recommended, js.configs.recommended,
react.configs.flat.recommended, eslintReact.configs.recommended,
tseslint.configs.recommendedTypeChecked, tseslint.configs.recommendedTypeChecked,
reactHooks.configs.flat["recommended-latest"], reactHooks.configs.flat["recommended-latest"],
reactRefresh.configs.vite, reactRefresh.configs.vite,

12
lib/component/input/radio/RadioButton.tsx
View File

@@ -1,10 +1,11 @@
import type { RadioButtonProps } from "$/types/InputTypes"; import type { RadioButtonProps } from "$/types/InputTypes";
import { Radio } from "@headlessui/react"; import { Radio } from "@headlessui/react";
import clsx from "clsx"; import clsx from "clsx";
import { useId } from "react";
export default function RadioButton({ export default function RadioButton({
id = crypto.randomUUID().replaceAll("-", ""), id,
className, className,
labelClassName, labelClassName,
size = "sm", size = "sm",
@@ -12,9 +13,12 @@ export default function RadioButton({
disabled, disabled,
children children
}: Readonly<RadioButtonProps>) { }: Readonly<RadioButtonProps>) {
const reactId = useId();
const effectiveId = id ?? reactId;
return ( return (
<Radio <Radio
id={id} id={effectiveId}
value={value} value={value}
className={clsx( className={clsx(
"group", "group",
@@ -26,7 +30,7 @@ export default function RadioButton({
} }
)} )}
disabled={disabled} disabled={disabled}
aria-labelledby={`${id}Label`} aria-labelledby={`${effectiveId}Label`}
> >
<div <div
className={clsx( className={clsx(
@@ -45,7 +49,7 @@ export default function RadioButton({
{ {
children && children &&
<span <span
id={`${id}Label`} id={`${effectiveId}Label`}
className={labelClassName} className={labelClassName}
> >
{children} {children}

8
lib/component/tab/MattrixwvTabGroup.tsx
View File

@@ -20,8 +20,8 @@ export default function MattrixwvTabGroup({
> >
<MattrixwvTabList> <MattrixwvTabList>
{ {
tabs.map((tab, index) => ( tabs.map(tab => (
<MattrixwvTab key={index}> <MattrixwvTab key={tab.id}>
{tab.tab} {tab.tab}
</MattrixwvTab> </MattrixwvTab>
)) ))
@@ -29,8 +29,8 @@ export default function MattrixwvTabGroup({
</MattrixwvTabList> </MattrixwvTabList>
<MattrixwvTabPanels> <MattrixwvTabPanels>
{ {
tabs.map((tab, index) => ( tabs.map(tab => (
<MattrixwvTabPanel key={index}> <MattrixwvTabPanel key={tab.id}>
{tab.content} {tab.content}
</MattrixwvTabPanel> </MattrixwvTabPanel>
)) ))

2
lib/component/toaster/Toaster.tsx
View File

@@ -7,8 +7,10 @@ export default function Toaster({
toast, toast,
className className
}: Readonly<ToasterProps>) { }: Readonly<ToasterProps>) {
//TODO: Rework how your toasters work
return ( return (
<Transition <Transition
// eslint-disable-next-line @eslint-react/purity
show={toast.length > 1 || (toast.length === 1 && toast[0].hideTime > new Date())} show={toast.length > 1 || (toast.length === 1 && toast[0].hideTime > new Date())}
enter="transform transition duration-500" enter="transform transition duration-500"
enterFrom="-translate-y-[25vh]" enterFrom="-translate-y-[25vh]"

18
lib/provider/axios/AxiosProvider.tsx
View File

@@ -1,6 +1,6 @@
import type { AxiosError, AxiosInstance } from "axios"; import type { AxiosError, AxiosInstance } from "axios";
import axios from "axios"; import axios from "axios";
import { createContext, useContext, useMemo } from "react"; import { createContext, use, useMemo } from "react";
import { useToken } from "../token"; import { useToken } from "../token";
@@ -46,8 +46,9 @@ export default function AxiosProvider({
} }
return config; return config;
} }
catch(error){ catch (e) {
return Promise.reject(error as Error); const error = e as Error;
return Promise.reject(error);
} }
}); });
api.interceptors.response.use(r => r, async (error: AxiosError) => { api.interceptors.response.use(r => r, async (error: AxiosError) => {
@@ -62,8 +63,9 @@ export default function AxiosProvider({
original.headers.Authorization = `Bearer ${newToken}`; original.headers.Authorization = `Bearer ${newToken}`;
return api(original); return api(original);
} }
catch(refreshError){ catch (e) {
return Promise.reject(refreshError as Error); const refreshError = e as Error;
return Promise.reject(refreshError);
} }
} }
}); });
@@ -76,16 +78,16 @@ export default function AxiosProvider({
}), [authorizedApi, publicApi]); }), [authorizedApi, publicApi]);
return ( return (
<AxiosContext.Provider value={value}> <AxiosContext value={value}>
{children} {children}
</AxiosContext.Provider> </AxiosContext>
); );
} }
// eslint-disable-next-line react-refresh/only-export-components // eslint-disable-next-line react-refresh/only-export-components
export function useAxios(){ export function useAxios(){
const context = useContext(AxiosContext); const context = use(AxiosContext);
if(!context){ if(!context){
throw new Error("useAxios must be called inside an AxiosProvider"); throw new Error("useAxios must be called inside an AxiosProvider");

10
lib/provider/theme/ThemeProvider.tsx
View File

@@ -1,5 +1,5 @@
import type { Theme, ThemeProviderProps, ThemeProviderState } from "$/types/ThemeTypes"; import type { Theme, ThemeProviderProps, ThemeProviderState } from "$/types/ThemeTypes";
import { createContext, useContext, useEffect, useMemo, useState } from "react"; import { createContext, use, useEffect, useMemo, useState } from "react";
const themeInitialState: ThemeProviderState = { const themeInitialState: ThemeProviderState = {
@@ -17,7 +17,7 @@ export default function ThemeProvider(props: Readonly<ThemeProviderProps>){
storageKey = "mattrixwv-ui-theme" storageKey = "mattrixwv-ui-theme"
} = props; } = props;
const [ theme, setTheme ] = useState<Theme>((localStorage.getItem(storageKey) as Theme) || defaultTheme); const [ theme, setTheme ] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);
useEffect(() => { useEffect(() => {
const root = globalThis.document.documentElement; const root = globalThis.document.documentElement;
@@ -43,16 +43,16 @@ export default function ThemeProvider(props: Readonly<ThemeProviderProps>){
}), [storageKey, theme]); }), [storageKey, theme]);
return ( return (
<ThemeProviderContext.Provider value={value}> <ThemeProviderContext value={value}>
{children} {children}
</ThemeProviderContext.Provider> </ThemeProviderContext>
); );
} }
// eslint-disable-next-line react-refresh/only-export-components // eslint-disable-next-line react-refresh/only-export-components
export function useTheme(){ export function useTheme(){
const context = useContext(ThemeProviderContext); const context = use(ThemeProviderContext);
if(!context){ if(!context){
throw new Error("useTheme must be used within a ThemeProvider"); throw new Error("useTheme must be used within a ThemeProvider");

8
lib/provider/toaster/ToasterProvider.tsx
View File

@@ -1,7 +1,7 @@
import { DangerMessageBlock, SuccessMessageBlock, WarningMessageBlock } from "$/component/message"; import { DangerMessageBlock, SuccessMessageBlock, WarningMessageBlock } from "$/component/message";
import Toaster from "$/component/toaster/Toaster"; import Toaster from "$/component/toaster/Toaster";
import type { Toast, ToastProviderProps, ToastProviderState } from "$/types/ToasterTypes"; import type { Toast, ToastProviderProps, ToastProviderState } from "$/types/ToasterTypes";
import { createContext, useCallback, useContext, useMemo, useState } from "react"; import { createContext, use, useCallback, useMemo, useState } from "react";
const toastInitialState: ToastProviderState = { const toastInitialState: ToastProviderState = {
@@ -72,20 +72,20 @@ export default function ToasterProvider({
}), [ toast, hideToast, addToast, addSuccess, addWarning, addDanger ]); }), [ toast, hideToast, addToast, addSuccess, addWarning, addDanger ]);
return ( return (
<ToasterProviderContext.Provider value={value}> <ToasterProviderContext value={value}>
<Toaster <Toaster
toast={toast} toast={toast}
className={className} className={className}
/> />
{children} {children}
</ToasterProviderContext.Provider> </ToasterProviderContext>
); );
} }
// eslint-disable-next-line react-refresh/only-export-components // eslint-disable-next-line react-refresh/only-export-components
export function useToaster(){ export function useToaster(){
const context = useContext(ToasterProviderContext); const context = use(ToasterProviderContext);
if(!context){ if(!context){
throw new Error("useToaster must be used within a ToasterProvider"); throw new Error("useToaster must be used within a ToasterProvider");

20
lib/provider/token/TokenProvider.tsx
View File

@@ -1,4 +1,4 @@
import { createContext, useCallback, useContext, useMemo, useRef } from "react"; import { createContext, use, useCallback, useMemo, useRef } from "react";
import { defaultTokenData, fetchToken, parseToken, type TokenData } from "./TokenUtils"; import { defaultTokenData, fetchToken, parseToken, type TokenData } from "./TokenUtils";
export interface TokenState { export interface TokenState {
@@ -20,11 +20,11 @@ export default function TokenProvider({
children: React.ReactNode; children: React.ReactNode;
}>){ }>){
const tokenRef = useRef<TokenData>(defaultTokenData); const tokenRef = useRef<TokenData>(defaultTokenData);
const refreshPromise = useRef<Promise<string | null | undefined>>(null); const refreshPromiseRef = useRef<Promise<string | null | undefined>>(null);
const getToken = useCallback(async () => { const getToken = useCallback(async () => {
if(refreshPromise.current){ if(refreshPromiseRef.current){
return refreshPromise.current; return refreshPromiseRef.current;
} }
const { accessToken, expires } = tokenRef.current; const { accessToken, expires } = tokenRef.current;
@@ -32,7 +32,7 @@ export default function TokenProvider({
const isExpired = Date.now() > (expires - 5000); //Give a 5 second buffer const isExpired = Date.now() > (expires - 5000); //Give a 5 second buffer
if(!accessToken || isExpired){ if(!accessToken || isExpired){
refreshPromise.current = (async () => { refreshPromiseRef.current = (async () => {
try { try {
const rawToken = (await fetchToken(apiUrl)).token; const rawToken = (await fetchToken(apiUrl)).token;
const parsedToken = parseToken(rawToken); const parsedToken = parseToken(rawToken);
@@ -44,10 +44,10 @@ export default function TokenProvider({
throw error; throw error;
} }
finally { finally {
refreshPromise.current = null; refreshPromiseRef.current = null;
} }
})(); })();
return refreshPromise.current; return refreshPromiseRef.current;
} }
return accessToken; return accessToken;
@@ -58,16 +58,16 @@ export default function TokenProvider({
}), [getToken]); }), [getToken]);
return ( return (
<TokenContext.Provider value={value}> <TokenContext value={value}>
{children} {children}
</TokenContext.Provider> </TokenContext>
); );
} }
// eslint-disable-next-line react-refresh/only-export-components // eslint-disable-next-line react-refresh/only-export-components
export function useToken(){ export function useToken(){
const context = useContext(TokenContext); const context = use(TokenContext);
if(!context){ if(!context){
throw new Error("useToken must be called inside a TokenProvider"); throw new Error("useToken must be called inside a TokenProvider");

1
lib/types/TabTypes.ts
View File

@@ -1,4 +1,5 @@
export interface TabGroupContent { export interface TabGroupContent {
id: string;
tab: React.ReactNode; tab: React.ReactNode;
content: React.ReactNode; content: React.ReactNode;
} }

2
lib/util/AccessibilityUtil.ts
View File

@@ -6,7 +6,7 @@ export function usePrefersReducedMotion(){
useEffect(() => { useEffect(() => {
const media = globalThis.matchMedia("(prefers-reduced-motion: reduce)"); const media = globalThis.matchMedia("(prefers-reduced-motion: reduce)");
// eslint-disable-next-line react-hooks/set-state-in-effect // eslint-disable-next-line react-hooks/set-state-in-effect,@eslint-react/set-state-in-effect
setReduced(media.matches); setReduced(media.matches);
}, [ ]); }, [ ]);

7237
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

69
package.json
View File

@@ -20,48 +20,43 @@
}, },
"dependencies": { "dependencies": {
"clsx": "^2.1.1", "clsx": "^2.1.1",
"react-icons": "^5.5.0" "react-icons": "^5.7.0"
}, },
"peerDependencies": { "peerDependencies": {
"axios": "^1.13.6", "@headlessui/react": "^2.2.10",
"@headlessui/react": "^2.2.9", "axios": "^1.19.0",
"react": "^19.2.3", "react": "^19.2.8",
"react-dom": "^19.2.3" "react-dom": "^19.2.8"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.39.2", "@eslint-react/eslint-plugin": "^5.18.6",
"@tailwindcss/vite": "^4.1.18", "@eslint/js": "^10.0.1",
"@tanstack/eslint-plugin-router": "^1.141.0", "@tailwindcss/vite": "^4.3.3",
"@tanstack/react-router": "^1.142.7", "@tanstack/eslint-plugin-router": "^1.162.0",
"@tanstack/react-router-devtools": "^1.142.7", "@tanstack/react-router": "^1.170.29",
"@tanstack/router-plugin": "^1.142.7", "@tanstack/react-router-devtools": "^1.167.1",
"@testing-library/jest-dom": "^6.9.1", "@tanstack/router-plugin": "^1.168.32",
"@testing-library/react": "^16.3.1", "@testing-library/jest-dom": "^7.0.1",
"@testing-library/user-event": "^14.6.1", "@testing-library/react": "^16.3.2",
"@types/node": "^25.0.3", "@testing-library/user-event": "^14.6.4",
"@types/react": "^19.2.7", "@types/node": "^26.2.0",
"@types/react-dom": "^19.2.3", "@types/react": "^19.2.18",
"@vitejs/plugin-react": "^5.1.2", "@types/react-dom": "^19.2.4",
"@vitest/coverage-v8": "^4.0.16", "@vitejs/plugin-react": "^6.0.5",
"eslint": "^9.39.2", "@vitest/coverage-v8": "^4.1.10",
"eslint-plugin-react": "^7.37.5", "eslint": "^10.8.1",
"eslint-plugin-react-hooks": "^7.0.1", "eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-react-refresh": "^0.4.26", "eslint-plugin-react-refresh": "^0.5.4",
"globals": "^16.5.0", "globals": "^17.11.0",
"jsdom": "^27.3.0", "jsdom": "^30.0.1",
"rollup-plugin-jsx-remove-attributes": "^3.1.2", "rollup-plugin-jsx-remove-attributes": "^3.1.2",
"tailwindcss": "^4.1.18", "tailwindcss": "^4.3.3",
"typescript": "^5.9.3", "typescript": "^6.0.3",
"typescript-eslint": "^8.50.0", "typescript-eslint": "^8.67.0",
"vite": "^7.3.0", "vite": "^8.2.1",
"vite-plugin-dts": "^4.5.4", "vite-plugin-dts": "^5.0.3",
"vite-plugin-static-copy": "^3.2.0", "vite-plugin-static-copy": "^4.1.1",
"vitest": "^4.0.16" "vitest": "^4.1.10"
},
"overrides": {
"@tailwindcss/vite": {
"vite": "^7.0.0"
}
}, },
"sideEffects": false, "sideEffects": false,
"license": "", "license": "",

208
src/routeTree.gen.ts
View File

@@ -10,71 +10,71 @@
import { Route as rootRouteImport } from './routes/__root' import { Route as rootRouteImport } from './routes/__root'
import { Route as IndexRouteImport } from './routes/index' import { Route as IndexRouteImport } from './routes/index'
import { Route as TabIndexRouteImport } from './routes/tab/index'
import { Route as ProgressIndexRouteImport } from './routes/progress/index'
import { Route as PillIndexRouteImport } from './routes/pill/index'
import { Route as ModalIndexRouteImport } from './routes/modal/index'
import { Route as MessageIndexRouteImport } from './routes/message/index'
import { Route as LoadingIndexRouteImport } from './routes/loading/index'
import { Route as InputIndexRouteImport } from './routes/input/index'
import { Route as ButtonsIndexRouteImport } from './routes/buttons/index' import { Route as ButtonsIndexRouteImport } from './routes/buttons/index'
import { Route as InputIndexRouteImport } from './routes/input/index'
import { Route as LoadingIndexRouteImport } from './routes/loading/index'
import { Route as MessageIndexRouteImport } from './routes/message/index'
import { Route as ModalIndexRouteImport } from './routes/modal/index'
import { Route as PillIndexRouteImport } from './routes/pill/index'
import { Route as ProgressIndexRouteImport } from './routes/progress/index'
import { Route as TabIndexRouteImport } from './routes/tab/index'
const IndexRoute = IndexRouteImport.update({ const IndexRoute = IndexRouteImport.update({
id: '/', id: '/',
path: '/', path: '/',
getParentRoute: () => rootRouteImport, getParentRoute: () => rootRouteImport,
} as any) } as any)
const TabIndexRoute = TabIndexRouteImport.update({
id: '/tab/',
path: '/tab/',
getParentRoute: () => rootRouteImport,
} as any)
const ProgressIndexRoute = ProgressIndexRouteImport.update({
id: '/progress/',
path: '/progress/',
getParentRoute: () => rootRouteImport,
} as any)
const PillIndexRoute = PillIndexRouteImport.update({
id: '/pill/',
path: '/pill/',
getParentRoute: () => rootRouteImport,
} as any)
const ModalIndexRoute = ModalIndexRouteImport.update({
id: '/modal/',
path: '/modal/',
getParentRoute: () => rootRouteImport,
} as any)
const MessageIndexRoute = MessageIndexRouteImport.update({
id: '/message/',
path: '/message/',
getParentRoute: () => rootRouteImport,
} as any)
const LoadingIndexRoute = LoadingIndexRouteImport.update({
id: '/loading/',
path: '/loading/',
getParentRoute: () => rootRouteImport,
} as any)
const InputIndexRoute = InputIndexRouteImport.update({
id: '/input/',
path: '/input/',
getParentRoute: () => rootRouteImport,
} as any)
const ButtonsIndexRoute = ButtonsIndexRouteImport.update({ const ButtonsIndexRoute = ButtonsIndexRouteImport.update({
id: '/buttons/', id: '/buttons/',
path: '/buttons/', path: '/buttons/',
getParentRoute: () => rootRouteImport, getParentRoute: () => rootRouteImport,
} as any) } as any)
const InputIndexRoute = InputIndexRouteImport.update({
id: '/input/',
path: '/input/',
getParentRoute: () => rootRouteImport,
} as any)
const LoadingIndexRoute = LoadingIndexRouteImport.update({
id: '/loading/',
path: '/loading/',
getParentRoute: () => rootRouteImport,
} as any)
const MessageIndexRoute = MessageIndexRouteImport.update({
id: '/message/',
path: '/message/',
getParentRoute: () => rootRouteImport,
} as any)
const ModalIndexRoute = ModalIndexRouteImport.update({
id: '/modal/',
path: '/modal/',
getParentRoute: () => rootRouteImport,
} as any)
const PillIndexRoute = PillIndexRouteImport.update({
id: '/pill/',
path: '/pill/',
getParentRoute: () => rootRouteImport,
} as any)
const ProgressIndexRoute = ProgressIndexRouteImport.update({
id: '/progress/',
path: '/progress/',
getParentRoute: () => rootRouteImport,
} as any)
const TabIndexRoute = TabIndexRouteImport.update({
id: '/tab/',
path: '/tab/',
getParentRoute: () => rootRouteImport,
} as any)
export interface FileRoutesByFullPath { export interface FileRoutesByFullPath {
'/': typeof IndexRoute '/': typeof IndexRoute
'/buttons': typeof ButtonsIndexRoute '/buttons/': typeof ButtonsIndexRoute
'/input': typeof InputIndexRoute '/input/': typeof InputIndexRoute
'/loading': typeof LoadingIndexRoute '/loading/': typeof LoadingIndexRoute
'/message': typeof MessageIndexRoute '/message/': typeof MessageIndexRoute
'/modal': typeof ModalIndexRoute '/modal/': typeof ModalIndexRoute
'/pill': typeof PillIndexRoute '/pill/': typeof PillIndexRoute
'/progress': typeof ProgressIndexRoute '/progress/': typeof ProgressIndexRoute
'/tab': typeof TabIndexRoute '/tab/': typeof TabIndexRoute
} }
export interface FileRoutesByTo { export interface FileRoutesByTo {
'/': typeof IndexRoute '/': typeof IndexRoute
@@ -103,14 +103,14 @@ export interface FileRouteTypes {
fileRoutesByFullPath: FileRoutesByFullPath fileRoutesByFullPath: FileRoutesByFullPath
fullPaths: fullPaths:
| '/' | '/'
| '/buttons' | '/buttons/'
| '/input' | '/input/'
| '/loading' | '/loading/'
| '/message' | '/message/'
| '/modal' | '/modal/'
| '/pill' | '/pill/'
| '/progress' | '/progress/'
| '/tab' | '/tab/'
fileRoutesByTo: FileRoutesByTo fileRoutesByTo: FileRoutesByTo
to: to:
| '/' | '/'
@@ -156,60 +156,60 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof IndexRouteImport preLoaderRoute: typeof IndexRouteImport
parentRoute: typeof rootRouteImport parentRoute: typeof rootRouteImport
} }
'/tab/': { '/buttons/': {
id: '/tab/' id: '/buttons/'
path: '/tab' path: '/buttons'
fullPath: '/tab' fullPath: '/buttons/'
preLoaderRoute: typeof TabIndexRouteImport preLoaderRoute: typeof ButtonsIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/progress/': {
id: '/progress/'
path: '/progress'
fullPath: '/progress'
preLoaderRoute: typeof ProgressIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/pill/': {
id: '/pill/'
path: '/pill'
fullPath: '/pill'
preLoaderRoute: typeof PillIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/modal/': {
id: '/modal/'
path: '/modal'
fullPath: '/modal'
preLoaderRoute: typeof ModalIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/message/': {
id: '/message/'
path: '/message'
fullPath: '/message'
preLoaderRoute: typeof MessageIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/loading/': {
id: '/loading/'
path: '/loading'
fullPath: '/loading'
preLoaderRoute: typeof LoadingIndexRouteImport
parentRoute: typeof rootRouteImport parentRoute: typeof rootRouteImport
} }
'/input/': { '/input/': {
id: '/input/' id: '/input/'
path: '/input' path: '/input'
fullPath: '/input' fullPath: '/input/'
preLoaderRoute: typeof InputIndexRouteImport preLoaderRoute: typeof InputIndexRouteImport
parentRoute: typeof rootRouteImport parentRoute: typeof rootRouteImport
} }
'/buttons/': { '/loading/': {
id: '/buttons/' id: '/loading/'
path: '/buttons' path: '/loading'
fullPath: '/buttons' fullPath: '/loading/'
preLoaderRoute: typeof ButtonsIndexRouteImport preLoaderRoute: typeof LoadingIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/message/': {
id: '/message/'
path: '/message'
fullPath: '/message/'
preLoaderRoute: typeof MessageIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/modal/': {
id: '/modal/'
path: '/modal'
fullPath: '/modal/'
preLoaderRoute: typeof ModalIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/pill/': {
id: '/pill/'
path: '/pill'
fullPath: '/pill/'
preLoaderRoute: typeof PillIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/progress/': {
id: '/progress/'
path: '/progress'
fullPath: '/progress/'
preLoaderRoute: typeof ProgressIndexRouteImport
parentRoute: typeof rootRouteImport
}
'/tab/': {
id: '/tab/'
path: '/tab'
fullPath: '/tab/'
preLoaderRoute: typeof TabIndexRouteImport
parentRoute: typeof rootRouteImport parentRoute: typeof rootRouteImport
} }
} }

22
src/routes/buttons/index.tsx
View File

@@ -14,21 +14,22 @@ export const Route = createFileRoute("/buttons/")({
}); });
// eslint-disable-next-line react-refresh/only-export-components
function ButtonPage(){ function ButtonPage(){
const [ clickCount, setClickCount ] = useState(0); const [ clickCount, setClickCount ] = useState(0);
const tabs: TabGroupContent[] = [ const tabs: TabGroupContent[] = [
{ tab: "Primary", content: generateTabContent(PrimaryButton, () => setClickCount(clickCount + 1)) }, { id: "primary", tab: "Primary", content: generateTabContent(PrimaryButton, () => setClickCount(clickCount + 1)) },
{ tab: "Secondary", content: generateTabContent(SecondaryButton, () => setClickCount(clickCount + 1)) }, { id: "secondary", tab: "Secondary", content: generateTabContent(SecondaryButton, () => setClickCount(clickCount + 1)) },
{ tab: "Tertiary", content: generateTabContent(TertiaryButton, () => setClickCount(clickCount + 1)) }, { id: "tertiary", tab: "Tertiary", content: generateTabContent(TertiaryButton, () => setClickCount(clickCount + 1)) },
{ tab: "Info", content: generateTabContent(InfoButton, () => setClickCount(clickCount + 1)) }, { id: "info", tab: "Info", content: generateTabContent(InfoButton, () => setClickCount(clickCount + 1)) },
{ tab: "Success", content: generateTabContent(SuccessButton, () => setClickCount(clickCount + 1)) }, { id: "success", tab: "Success", content: generateTabContent(SuccessButton, () => setClickCount(clickCount + 1)) },
{ tab: "Warning", content: generateTabContent(WarningButton, () => setClickCount(clickCount + 1)) }, { id: "warning", tab: "Warning", content: generateTabContent(WarningButton, () => setClickCount(clickCount + 1)) },
{ tab: "Danger", content: generateTabContent(DangerButton, () => setClickCount(clickCount + 1)) }, { id: "danger", tab: "Danger", content: generateTabContent(DangerButton, () => setClickCount(clickCount + 1)) },
{ tab: "Molten", content: generateTabContent(MoltenButton, () => setClickCount(clickCount + 1)) }, { id: "molten", tab: "Molten", content: generateTabContent(MoltenButton, () => setClickCount(clickCount + 1)) },
{ tab: "Dark", content: generateTabContent(DarkButton, () => setClickCount(clickCount + 1)) }, { id: "dark", tab: "Dark", content: generateTabContent(DarkButton, () => setClickCount(clickCount + 1)) },
{ tab: "Light", content: generateTabContent(LightButton, () => setClickCount(clickCount + 1)) } { id: "light", tab: "Light", content: generateTabContent(LightButton, () => setClickCount(clickCount + 1)) }
]; ];
@@ -117,6 +118,7 @@ function generateTabContent(Fn: (props: ButtonProps) => JSX.Element, onClick: ()
); );
} }
// eslint-disable-next-line react-refresh/only-export-components
function ButtonDisplay({ function ButtonDisplay({
title, title,
children children

1
src/routes/index.tsx
View File

@@ -6,6 +6,7 @@ export const Route = createFileRoute("/")({
}); });
// eslint-disable-next-line react-refresh/only-export-components
function HomePage(){ function HomePage(){
return ( return (
<div> <div>

13
src/routes/input/index.tsx
View File

@@ -10,6 +10,7 @@ export const Route = createFileRoute('/input/')({
}); });
// eslint-disable-next-line react-refresh/only-export-components
function InputPage(){ function InputPage(){
const [ date, setDate ] = useState<Date>(); const [ date, setDate ] = useState<Date>();
const [ dateTime, setDateTime ] = useState<Date>(); const [ dateTime, setDateTime ] = useState<Date>();
@@ -17,12 +18,12 @@ function InputPage(){
const tabs: TabGroupContent[] = [ const tabs: TabGroupContent[] = [
{ tab: "Checkbox", content: <CheckboxContent/>}, { id: "checkbox", tab: "Checkbox", content: <CheckboxContent/>},
{ tab: "Radio", content: <RadioContent/> }, { id: "radio", tab: "Radio", content: <RadioContent/> },
{ tab: "Date", content: <DateContent date={date} setDate={setDate} dateTime={dateTime} setDateTime={setDateTime} time={time} setTime={setTime}/> }, { id: "date", tab: "Date", content: <DateContent date={date} setDate={setDate} dateTime={dateTime} setDateTime={setDateTime} time={time} setTime={setTime}/> },
{ tab: "File", content: <FileContent/> }, { id: "file", tab: "File", content: <FileContent/> },
{ tab: "Switch", content: <SwitchContent/> }, { id: "switch", tab: "Switch", content: <SwitchContent/> },
{ tab: "Text", content: <TextContent/> } { id: "text", tab: "Text", content: <TextContent/> }
]; ];

13
src/routes/loading/index.tsx
View File

@@ -9,14 +9,15 @@ export const Route = createFileRoute("/loading/")({
}); });
// eslint-disable-next-line react-refresh/only-export-components
function LoadingPage(){ function LoadingPage(){
const tabs: TabGroupContent[] = [ const tabs: TabGroupContent[] = [
{ tab: "Spinners", content: generateSpinnersContent() }, { id: "spinners", tab: "Spinners", content: generateSpinnersContent() },
{ tab: "Dots", content: generateDotsContent() }, { id: "dots", tab: "Dots", content: generateDotsContent() },
{ tab: "Bars", content: generateBarsContent() }, { id: "bars", tab: "Bars", content: generateBarsContent() },
{ tab: "Blocks", content: generateBlocksContent() }, { id: "blocks", tab: "Blocks", content: generateBlocksContent() },
{ tab: "Pulses", content: generatePulsesContent() }, { id: "pulses", tab: "Pulses", content: generatePulsesContent() },
{ tab: "Various", content: generateVariousContent() } { id: "various", tab: "Various", content: generateVariousContent() }
]; ];
return ( return (

21
src/routes/message/index.tsx
View File

@@ -12,18 +12,19 @@ export const Route = createFileRoute("/message/")({
}); });
// eslint-disable-next-line react-refresh/only-export-components
function MessagePage(){ function MessagePage(){
const tabs: TabGroupContent[] = [ const tabs: TabGroupContent[] = [
{ tab: "Primary", content: generateTabContent(PrimaryMessageBlock) }, { id: "primary", tab: "Primary", content: generateTabContent(PrimaryMessageBlock) },
{ tab: "Secondary", content: generateTabContent(SecondaryMessageBlock) }, { id: "secondary", tab: "Secondary", content: generateTabContent(SecondaryMessageBlock) },
{ tab: "Tertiary", content: generateTabContent(TertiaryMessageBlock) }, { id: "tertiary", tab: "Tertiary", content: generateTabContent(TertiaryMessageBlock) },
{ tab: "Info", content: generateTabContent(InfoMessageBlock) }, { id: "info", tab: "Info", content: generateTabContent(InfoMessageBlock) },
{ tab: "Success", content: generateTabContent(SuccessMessageBlock) }, { id: "success", tab: "Success", content: generateTabContent(SuccessMessageBlock) },
{ tab: "Warning", content: generateTabContent(WarningMessageBlock) }, { id: "warning", tab: "Warning", content: generateTabContent(WarningMessageBlock) },
{ tab: "Danger", content: generateTabContent(DangerMessageBlock) }, { id: "danger", tab: "Danger", content: generateTabContent(DangerMessageBlock) },
{ tab: "Molten", content: generateTabContent(MoltenMessageBlock) }, { id: "molten", tab: "Molten", content: generateTabContent(MoltenMessageBlock) },
{ tab: "Dark", content: generateTabContent(DarkMessageBlock) }, { id: "dark", tab: "Dark", content: generateTabContent(DarkMessageBlock) },
{ tab: "Light", content: generateTabContent(LightMessageBlock) } { id: "light", tab: "Light", content: generateTabContent(LightMessageBlock) }
]; ];

3
src/routes/modal/index.tsx
View File

@@ -11,6 +11,7 @@ export const Route = createFileRoute("/modal/")({
}); });
// eslint-disable-next-line react-refresh/only-export-components
function ModalPage(){ function ModalPage(){
const [ displayCenteredModal, setDisplayCenteredModal ] = useState(false); const [ displayCenteredModal, setDisplayCenteredModal ] = useState(false);
const [ displayTopModal, setDisplayTopModal ] = useState(false); const [ displayTopModal, setDisplayTopModal ] = useState(false);
@@ -74,6 +75,7 @@ function ModalPage(){
); );
} }
// eslint-disable-next-line react-refresh/only-export-components
function DemoCenteredModal({ function DemoCenteredModal({
display, display,
onClose onClose
@@ -94,6 +96,7 @@ function DemoCenteredModal({
); );
} }
// eslint-disable-next-line react-refresh/only-export-components
function DemoTopModal({ function DemoTopModal({
display, display,
onClose onClose

2
src/routes/pill/index.tsx
View File

@@ -17,6 +17,7 @@ export const Route = createFileRoute("/pill/")({
}); });
// eslint-disable-next-line react-refresh/only-export-components
function PillPage(){ function PillPage(){
return ( return (
<div className="flex flex-col items-center justify-center gap-y-8"> <div className="flex flex-col items-center justify-center gap-y-8">
@@ -34,6 +35,7 @@ function PillPage(){
); );
} }
// eslint-disable-next-line react-refresh/only-export-components
function PillLayout({ function PillLayout({
PillType, PillType,
pillName pillName

17
src/routes/progress/index.tsx
View File

@@ -1,15 +1,17 @@
import { DangerButton, PrimaryButton } from '$/component/button'; import { DangerButton, PrimaryButton } from "$/component/button";
import { NumberInput } from '$/component/input'; import { NumberInput } from "$/component/input";
import { DangerProgress, DarkProgress, InfoProgress, LightProgress, MoltenProgress, PrimaryProgress, Progress, SecondaryProgress, SuccessProgress, TertiaryProgress, WarningProgress } from '$/component/progress'; import { DangerProgress, DarkProgress, InfoProgress, LightProgress, MoltenProgress, PrimaryProgress, Progress, SecondaryProgress, SuccessProgress, TertiaryProgress, WarningProgress } from '$/component/progress';
import { createFileRoute } from '@tanstack/react-router'; import { createFileRoute } from "@tanstack/react-router";
import { useState } from 'react'; import { useState } from "react";
import { BsDashLg, BsPlusLg } from 'react-icons/bs'; import { BsDashLg, BsPlusLg } from "react-icons/bs";
export const Route = createFileRoute('/progress/')({ export const Route = createFileRoute("/progress/")({
component: ProgressPage, component: ProgressPage
}); });
// eslint-disable-next-line react-refresh/only-export-components
function ProgressPage() { function ProgressPage() {
const [ value, setValue ] = useState(0); const [ value, setValue ] = useState(0);
@@ -125,6 +127,7 @@ function ProgressPage() {
); );
} }
// eslint-disable-next-line react-refresh/only-export-components
function ProgressBlock({ function ProgressBlock({
label, label,
children children

11
src/routes/tab/index.tsx
View File

@@ -9,13 +9,14 @@ export const Route = createFileRoute('/tab/')({
}); });
// eslint-disable-next-line react-refresh/only-export-components
function RouteComponent(){ function RouteComponent(){
const tabs: TabGroupContent[] = [ const tabs: TabGroupContent[] = [
{ tab: "Tab 1", content: "Tab 1 Content" }, { id: "1", tab: "Tab 1", content: "Tab 1 Content" },
{ tab: "Tab 2", content: "Tab 2 Content" }, { id: "2", tab: "Tab 2", content: "Tab 2 Content" },
{ tab: "Tab 3", content: "Tab 3 Content" }, { id: "3", tab: "Tab 3", content: "Tab 3 Content" },
{ tab: "Tab 4", content: "Tab 4 Content" }, { id: "4", tab: "Tab 4", content: "Tab 4 Content" },
{ tab: <div className="flex flex-row items-center justify-center gap-x-2">Tab <BsXLg/></div>, content: <div className="flex flex-row items-center justify-center gap-x-2">Tab <BsXLg/> Content</div> } { id: "5", tab: <div className="flex flex-row items-center justify-center gap-x-2">Tab <BsXLg/></div>, content: <div className="flex flex-row items-center justify-center gap-x-2">Tab <BsXLg/> Content</div> }
]; ];
return ( return (

1
src/util/LoadingUtils.tsx
View File

@@ -66,6 +66,7 @@ function LoadingGroup({
{ {
elements.map((spinner, index) => ( elements.map((spinner, index) => (
<div <div
// eslint-disable-next-line @eslint-react/no-array-index-key
key={index} key={index}
className="w-32 h-32" className="w-32 h-32"
> >

1
tsconfig.app.json
View File

@@ -22,7 +22,6 @@
"erasableSyntaxOnly": true, "erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true, "noUncheckedSideEffectImports": true,
"baseUrl": ".",
"paths": { "paths": {
"$/*": [ "./lib/*" ], "$/*": [ "./lib/*" ],
"@/*": [ "./src/*" ], "@/*": [ "./src/*" ],

1
tsconfig.test.json
View File

@@ -22,7 +22,6 @@
"erasableSyntaxOnly": true, "erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true, "noUncheckedSideEffectImports": true,
"baseUrl": ".",
"paths": { "paths": {
"$/*": [ "./lib/*" ], "$/*": [ "./lib/*" ],
"#root": [ "." ] "#root": [ "." ]

23
vite.config.ts
View File

@@ -7,7 +7,7 @@ import removeTestIdAttribute from "rollup-plugin-jsx-remove-attributes";
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import dts from "vite-plugin-dts"; import dts from "vite-plugin-dts";
import { viteStaticCopy } from "vite-plugin-static-copy"; import { viteStaticCopy } from "vite-plugin-static-copy";
import { peerDependencies } from "./package.json"; import { peerDependencies } from "./package.json" with { type: "json" };
const components = [ "button", "input", "loading", "message", "modal", "nav", "progress", "tab", "toaster" ]; const components = [ "button", "input", "loading", "message", "modal", "nav", "progress", "tab", "toaster" ];
@@ -26,8 +26,7 @@ export default defineConfig({
dts({ dts({
include: ["lib"], include: ["lib"],
tsconfigPath: "./tsconfig.lib.json", tsconfigPath: "./tsconfig.lib.json",
rollupTypes: true, bundleTypes: true,
insertTypesEntry: true,
compilerOptions: { compilerOptions: {
declarationMap: false declarationMap: false
} }
@@ -36,15 +35,15 @@ export default defineConfig({
viteStaticCopy({ viteStaticCopy({
targets: [ targets: [
{ {
src: resolve(__dirname, "lib/components.css"), src: resolve(import.meta.dirname, "lib/components.css"),
dest: "" dest: ""
}, },
{ {
src: resolve(__dirname, "lib/layout.css"), src: resolve(import.meta.dirname, "lib/layout.css"),
dest: "" dest: ""
}, },
{ {
src: resolve(__dirname, "lib/theme.css"), src: resolve(import.meta.dirname, "lib/theme.css"),
dest: "" dest: ""
} }
] ]
@@ -52,17 +51,17 @@ export default defineConfig({
], ],
resolve: { resolve: {
alias: { alias: {
"@": resolve(__dirname, "src"), "@": resolve(import.meta.dirname, "src"),
"$": resolve(__dirname, "lib"), "$": resolve(import.meta.dirname, "lib"),
"#root": resolve(__dirname) "#root": resolve(import.meta.dirname)
} }
}, },
build: { build: {
lib: { lib: {
entry: { entry: {
"mattrixwv-components": resolve(__dirname, "lib/index.ts"), "mattrixwv-components": resolve(import.meta.dirname, "lib/index.ts"),
...Object.fromEntries(components.map(mod => [mod, resolve(__dirname, `lib/component/${mod}/index.ts`)])), ...Object.fromEntries(components.map(mod => [mod, resolve(import.meta.dirname, `lib/component/${mod}/index.ts`)])),
...Object.fromEntries(providers.map(mod => [mod, resolve(__dirname, `lib/provider/${mod}/index.ts`)])) ...Object.fromEntries(providers.map(mod => [mod, resolve(import.meta.dirname, `lib/provider/${mod}/index.ts`)]))
}, },
formats: [ "es" ], formats: [ "es" ],
name: "Mattrixwv Component Library" name: "Mattrixwv Component Library"