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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
import type { AxiosError, AxiosInstance } from "axios";
import axios from "axios";
import { createContext, useContext, useMemo } from "react";
import { createContext, use, useMemo } from "react";
import { useToken } from "../token";
@@ -46,8 +46,9 @@ export default function AxiosProvider({
}
return config;
}
catch(error){
return Promise.reject(error as Error);
catch (e) {
const error = e as Error;
return Promise.reject(error);
}
});
api.interceptors.response.use(r => r, async (error: AxiosError) => {
@@ -62,8 +63,9 @@ export default function AxiosProvider({
original.headers.Authorization = `Bearer ${newToken}`;
return api(original);
}
catch(refreshError){
return Promise.reject(refreshError as Error);
catch (e) {
const refreshError = e as Error;
return Promise.reject(refreshError);
}
}
});
@@ -76,16 +78,16 @@ export default function AxiosProvider({
}), [authorizedApi, publicApi]);
return (
<AxiosContext.Provider value={value}>
<AxiosContext value={value}>
{children}
</AxiosContext.Provider>
</AxiosContext>
);
}
// eslint-disable-next-line react-refresh/only-export-components
export function useAxios(){
const context = useContext(AxiosContext);
const context = use(AxiosContext);
if(!context){
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 { createContext, useContext, useEffect, useMemo, useState } from "react";
import { createContext, use, useEffect, useMemo, useState } from "react";
const themeInitialState: ThemeProviderState = {
@@ -17,7 +17,7 @@ export default function ThemeProvider(props: Readonly<ThemeProviderProps>){
storageKey = "mattrixwv-ui-theme"
} = props;
const [ theme, setTheme ] = useState<Theme>((localStorage.getItem(storageKey) as Theme) || defaultTheme);
const [ theme, setTheme ] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);
useEffect(() => {
const root = globalThis.document.documentElement;
@@ -43,16 +43,16 @@ export default function ThemeProvider(props: Readonly<ThemeProviderProps>){
}), [storageKey, theme]);
return (
<ThemeProviderContext.Provider value={value}>
<ThemeProviderContext value={value}>
{children}
</ThemeProviderContext.Provider>
</ThemeProviderContext>
);
}
// eslint-disable-next-line react-refresh/only-export-components
export function useTheme(){
const context = useContext(ThemeProviderContext);
const context = use(ThemeProviderContext);
if(!context){
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 Toaster from "$/component/toaster/Toaster";
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 = {
@@ -72,20 +72,20 @@ export default function ToasterProvider({
}), [ toast, hideToast, addToast, addSuccess, addWarning, addDanger ]);
return (
<ToasterProviderContext.Provider value={value}>
<ToasterProviderContext value={value}>
<Toaster
toast={toast}
className={className}
/>
{children}
</ToasterProviderContext.Provider>
</ToasterProviderContext>
);
}
// eslint-disable-next-line react-refresh/only-export-components
export function useToaster(){
const context = useContext(ToasterProviderContext);
const context = use(ToasterProviderContext);
if(!context){
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";
export interface TokenState {
@@ -20,11 +20,11 @@ export default function TokenProvider({
children: React.ReactNode;
}>){
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 () => {
if(refreshPromise.current){
return refreshPromise.current;
if(refreshPromiseRef.current){
return refreshPromiseRef.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
if(!accessToken || isExpired){
refreshPromise.current = (async () => {
refreshPromiseRef.current = (async () => {
try {
const rawToken = (await fetchToken(apiUrl)).token;
const parsedToken = parseToken(rawToken);
@@ -44,10 +44,10 @@ export default function TokenProvider({
throw error;
}
finally {
refreshPromise.current = null;
refreshPromiseRef.current = null;
}
})();
return refreshPromise.current;
return refreshPromiseRef.current;
}
return accessToken;
@@ -58,16 +58,16 @@ export default function TokenProvider({
}), [getToken]);
return (
<TokenContext.Provider value={value}>
<TokenContext value={value}>
{children}
</TokenContext.Provider>
</TokenContext>
);
}
// eslint-disable-next-line react-refresh/only-export-components
export function useToken(){
const context = useContext(TokenContext);
const context = use(TokenContext);
if(!context){
throw new Error("useToken must be called inside a TokenProvider");

1
lib/types/TabTypes.ts
View File

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

2
lib/util/AccessibilityUtil.ts
View File

@@ -6,7 +6,7 @@ export function usePrefersReducedMotion(){
useEffect(() => {
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);
}, [ ]);

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

208
src/routeTree.gen.ts
View File

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

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(){
const [ clickCount, setClickCount ] = useState(0);
const tabs: TabGroupContent[] = [
{ tab: "Primary", content: generateTabContent(PrimaryButton, () => setClickCount(clickCount + 1)) },
{ tab: "Secondary", content: generateTabContent(SecondaryButton, () => setClickCount(clickCount + 1)) },
{ tab: "Tertiary", content: generateTabContent(TertiaryButton, () => setClickCount(clickCount + 1)) },
{ tab: "Info", content: generateTabContent(InfoButton, () => setClickCount(clickCount + 1)) },
{ tab: "Success", content: generateTabContent(SuccessButton, () => setClickCount(clickCount + 1)) },
{ tab: "Warning", content: generateTabContent(WarningButton, () => setClickCount(clickCount + 1)) },
{ tab: "Danger", content: generateTabContent(DangerButton, () => setClickCount(clickCount + 1)) },
{ tab: "Molten", content: generateTabContent(MoltenButton, () => setClickCount(clickCount + 1)) },
{ tab: "Dark", content: generateTabContent(DarkButton, () => setClickCount(clickCount + 1)) },
{ tab: "Light", content: generateTabContent(LightButton, () => setClickCount(clickCount + 1)) }
{ id: "primary", tab: "Primary", content: generateTabContent(PrimaryButton, () => setClickCount(clickCount + 1)) },
{ id: "secondary", tab: "Secondary", content: generateTabContent(SecondaryButton, () => setClickCount(clickCount + 1)) },
{ id: "tertiary", tab: "Tertiary", content: generateTabContent(TertiaryButton, () => setClickCount(clickCount + 1)) },
{ id: "info", tab: "Info", content: generateTabContent(InfoButton, () => setClickCount(clickCount + 1)) },
{ id: "success", tab: "Success", content: generateTabContent(SuccessButton, () => setClickCount(clickCount + 1)) },
{ id: "warning", tab: "Warning", content: generateTabContent(WarningButton, () => setClickCount(clickCount + 1)) },
{ id: "danger", tab: "Danger", content: generateTabContent(DangerButton, () => setClickCount(clickCount + 1)) },
{ id: "molten", tab: "Molten", content: generateTabContent(MoltenButton, () => setClickCount(clickCount + 1)) },
{ id: "dark", tab: "Dark", content: generateTabContent(DarkButton, () => 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({
title,
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(){
return (
<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(){
const [ date, setDate ] = useState<Date>();
const [ dateTime, setDateTime ] = useState<Date>();
@@ -17,12 +18,12 @@ function InputPage(){
const tabs: TabGroupContent[] = [
{ tab: "Checkbox", content: <CheckboxContent/>},
{ tab: "Radio", content: <RadioContent/> },
{ tab: "Date", content: <DateContent date={date} setDate={setDate} dateTime={dateTime} setDateTime={setDateTime} time={time} setTime={setTime}/> },
{ tab: "File", content: <FileContent/> },
{ tab: "Switch", content: <SwitchContent/> },
{ tab: "Text", content: <TextContent/> }
{ id: "checkbox", tab: "Checkbox", content: <CheckboxContent/>},
{ id: "radio", tab: "Radio", content: <RadioContent/> },
{ id: "date", tab: "Date", content: <DateContent date={date} setDate={setDate} dateTime={dateTime} setDateTime={setDateTime} time={time} setTime={setTime}/> },
{ id: "file", tab: "File", content: <FileContent/> },
{ id: "switch", tab: "Switch", content: <SwitchContent/> },
{ 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(){
const tabs: TabGroupContent[] = [
{ tab: "Spinners", content: generateSpinnersContent() },
{ tab: "Dots", content: generateDotsContent() },
{ tab: "Bars", content: generateBarsContent() },
{ tab: "Blocks", content: generateBlocksContent() },
{ tab: "Pulses", content: generatePulsesContent() },
{ tab: "Various", content: generateVariousContent() }
{ id: "spinners", tab: "Spinners", content: generateSpinnersContent() },
{ id: "dots", tab: "Dots", content: generateDotsContent() },
{ id: "bars", tab: "Bars", content: generateBarsContent() },
{ id: "blocks", tab: "Blocks", content: generateBlocksContent() },
{ id: "pulses", tab: "Pulses", content: generatePulsesContent() },
{ id: "various", tab: "Various", content: generateVariousContent() }
];
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(){
const tabs: TabGroupContent[] = [
{ tab: "Primary", content: generateTabContent(PrimaryMessageBlock) },
{ tab: "Secondary", content: generateTabContent(SecondaryMessageBlock) },
{ tab: "Tertiary", content: generateTabContent(TertiaryMessageBlock) },
{ tab: "Info", content: generateTabContent(InfoMessageBlock) },
{ tab: "Success", content: generateTabContent(SuccessMessageBlock) },
{ tab: "Warning", content: generateTabContent(WarningMessageBlock) },
{ tab: "Danger", content: generateTabContent(DangerMessageBlock) },
{ tab: "Molten", content: generateTabContent(MoltenMessageBlock) },
{ tab: "Dark", content: generateTabContent(DarkMessageBlock) },
{ tab: "Light", content: generateTabContent(LightMessageBlock) }
{ id: "primary", tab: "Primary", content: generateTabContent(PrimaryMessageBlock) },
{ id: "secondary", tab: "Secondary", content: generateTabContent(SecondaryMessageBlock) },
{ id: "tertiary", tab: "Tertiary", content: generateTabContent(TertiaryMessageBlock) },
{ id: "info", tab: "Info", content: generateTabContent(InfoMessageBlock) },
{ id: "success", tab: "Success", content: generateTabContent(SuccessMessageBlock) },
{ id: "warning", tab: "Warning", content: generateTabContent(WarningMessageBlock) },
{ id: "danger", tab: "Danger", content: generateTabContent(DangerMessageBlock) },
{ id: "molten", tab: "Molten", content: generateTabContent(MoltenMessageBlock) },
{ id: "dark", tab: "Dark", content: generateTabContent(DarkMessageBlock) },
{ 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(){
const [ displayCenteredModal, setDisplayCenteredModal ] = useState(false);
const [ displayTopModal, setDisplayTopModal ] = useState(false);
@@ -74,6 +75,7 @@ function ModalPage(){
);
}
// eslint-disable-next-line react-refresh/only-export-components
function DemoCenteredModal({
display,
onClose
@@ -94,6 +96,7 @@ function DemoCenteredModal({
);
}
// eslint-disable-next-line react-refresh/only-export-components
function DemoTopModal({
display,
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(){
return (
<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({
PillType,
pillName

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

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

1
src/util/LoadingUtils.tsx
View File

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

1
tsconfig.app.json
View File

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

1
tsconfig.test.json
View File

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

23
vite.config.ts
View File

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