diff --git a/TODO.txt b/TODO.txt new file mode 100644 index 0000000..eb09e5f --- /dev/null +++ b/TODO.txt @@ -0,0 +1,5 @@ +Inputs: + slider, multi-value slider + + +Toaster diff --git a/lib/component/progress.ts b/lib/component/progress.ts new file mode 100644 index 0000000..f50dd27 --- /dev/null +++ b/lib/component/progress.ts @@ -0,0 +1,26 @@ +import DangerProgress from "./progress/DangerProgress"; +import DarkProgress from "./progress/DarkProgress"; +import InfoProgress from "./progress/InfoProgress"; +import LightProgress from "./progress/LightProgress"; +import MoltenProgress from "./progress/MoltenProgress"; +import PrimaryProgress from "./progress/PrimaryProgress"; +import Progress from "./progress/Progress"; +import SecondaryProgress from "./progress/SecondaryProgress"; +import SuccessProgress from "./progress/SuccessProgress"; +import TertiaryProgress from "./progress/TertiaryProgress"; +import WarningProgress from "./progress/WarningProgress"; + + +export { + DangerProgress, + DarkProgress, + InfoProgress, + LightProgress, + MoltenProgress, + PrimaryProgress, + Progress, + SecondaryProgress, + SuccessProgress, + TertiaryProgress, + WarningProgress +}; diff --git a/lib/component/progress/DangerProgress.tsx b/lib/component/progress/DangerProgress.tsx new file mode 100644 index 0000000..be0fac7 --- /dev/null +++ b/lib/component/progress/DangerProgress.tsx @@ -0,0 +1,13 @@ +import type { ThemedProgressProps } from "$/types/Progress"; +import Progress from "./Progress"; + + +export default function DangerProgress(props: ThemedProgressProps){ + return ( + + ); +} diff --git a/lib/component/progress/DarkProgress.tsx b/lib/component/progress/DarkProgress.tsx new file mode 100644 index 0000000..f1df920 --- /dev/null +++ b/lib/component/progress/DarkProgress.tsx @@ -0,0 +1,13 @@ +import type { ThemedProgressProps } from "$/types/Progress"; +import Progress from "./Progress"; + + +export default function DarkProgress(props: ThemedProgressProps){ + return ( + + ); +} diff --git a/lib/component/progress/InfoProgress.tsx b/lib/component/progress/InfoProgress.tsx new file mode 100644 index 0000000..c492b6a --- /dev/null +++ b/lib/component/progress/InfoProgress.tsx @@ -0,0 +1,13 @@ +import type { ThemedProgressProps } from "$/types/Progress"; +import Progress from "./Progress"; + + +export default function InfoProgress(props: ThemedProgressProps){ + return ( + + ); +} diff --git a/lib/component/progress/LightProgress.tsx b/lib/component/progress/LightProgress.tsx new file mode 100644 index 0000000..fe74214 --- /dev/null +++ b/lib/component/progress/LightProgress.tsx @@ -0,0 +1,13 @@ +import type { ThemedProgressProps } from "$/types/Progress"; +import Progress from "./Progress"; + + +export default function LightProgress(props: ThemedProgressProps){ + return ( + + ); +} diff --git a/lib/component/progress/MoltenProgress.tsx b/lib/component/progress/MoltenProgress.tsx new file mode 100644 index 0000000..84615f9 --- /dev/null +++ b/lib/component/progress/MoltenProgress.tsx @@ -0,0 +1,13 @@ +import type { ThemedProgressProps } from "$/types/Progress"; +import Progress from "./Progress"; + + +export default function MoltenProgress(props: ThemedProgressProps){ + return ( + + ); +} diff --git a/lib/component/progress/PrimaryProgress.tsx b/lib/component/progress/PrimaryProgress.tsx new file mode 100644 index 0000000..adf16d3 --- /dev/null +++ b/lib/component/progress/PrimaryProgress.tsx @@ -0,0 +1,13 @@ +import type { ThemedProgressProps } from "$/types/Progress"; +import Progress from "./Progress"; + + +export default function PrimaryProgress(props: ThemedProgressProps){ + return ( + + ); +} diff --git a/lib/component/progress/Progress.tsx b/lib/component/progress/Progress.tsx new file mode 100644 index 0000000..a4c126d --- /dev/null +++ b/lib/component/progress/Progress.tsx @@ -0,0 +1,79 @@ +import type { ProgressProps } from "$/types/Progress"; +import clsx from "clsx"; +import { useMemo } from "react"; + + +export default function Progress({ + id, + className, + value, + min, + max, + size = "md", + rounding = "full", + label, + tabIndex, + progressColor, + backgroundColor +}: ProgressProps){ + const percentage = useMemo(() => { + const num = !value || Number.isNaN(value) ? min : Math.max(value, min); + const den = (!value || Number.isNaN(value) ? max : Math.max(value, max)) - min; + const percentage = (num / den) * 100; + return percentage && percentage > max ? max : percentage; + }, [ min, max, value ]); + + + return ( +
+
+
+
+ ); +} diff --git a/lib/component/progress/SecondaryProgress.tsx b/lib/component/progress/SecondaryProgress.tsx new file mode 100644 index 0000000..ebf0857 --- /dev/null +++ b/lib/component/progress/SecondaryProgress.tsx @@ -0,0 +1,13 @@ +import type { ThemedProgressProps } from "$/types/Progress"; +import Progress from "./Progress"; + + +export default function SecondaryProgress(props: ThemedProgressProps){ + return ( + + ); +} diff --git a/lib/component/progress/SuccessProgress.tsx b/lib/component/progress/SuccessProgress.tsx new file mode 100644 index 0000000..ad84c7e --- /dev/null +++ b/lib/component/progress/SuccessProgress.tsx @@ -0,0 +1,13 @@ +import type { ThemedProgressProps } from "$/types/Progress"; +import Progress from "./Progress"; + + +export default function SuccessProgress(props: ThemedProgressProps){ + return ( + + ); +} diff --git a/lib/component/progress/TertiaryProgress.tsx b/lib/component/progress/TertiaryProgress.tsx new file mode 100644 index 0000000..a8fdbe4 --- /dev/null +++ b/lib/component/progress/TertiaryProgress.tsx @@ -0,0 +1,13 @@ +import type { ThemedProgressProps } from "$/types/Progress"; +import Progress from "./Progress"; + + +export default function TertiaryProgress(props: ThemedProgressProps){ + return ( + + ); +} diff --git a/lib/component/progress/WarningProgress.tsx b/lib/component/progress/WarningProgress.tsx new file mode 100644 index 0000000..03ad999 --- /dev/null +++ b/lib/component/progress/WarningProgress.tsx @@ -0,0 +1,13 @@ +import type { ThemedProgressProps } from "$/types/Progress"; +import Progress from "./Progress"; + + +export default function WarningProgress(props: ThemedProgressProps){ + return ( + + ); +} diff --git a/lib/types/Progress.d.ts b/lib/types/Progress.d.ts new file mode 100644 index 0000000..eb4adf1 --- /dev/null +++ b/lib/types/Progress.d.ts @@ -0,0 +1,29 @@ +export type ProgressSize = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full"; +export type ProgressRounding = "none" | "sm" | "md" | "lg" | "full"; + + +export interface ProgressProps { + id?: string; + className?: string; + value?: number; + min: number; + max: number; + size?: ProgressSize; + rounding?: ProgressRounding; + label: string; + tabIndex?: number; + progressColor: string; + backgroundColor: string; +} + +export interface ThemedProgressProps { + id?: string; + className?: string; + value?: number; + min: number; + max: number; + size?: ProgressSize; + rounding?: ProgressRounding; + label: string; + tabIndex?: number; +} diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index 8417225..9186c46 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -11,6 +11,7 @@ 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 ModalIndexRouteImport } from './routes/modal/index' import { Route as MessageIndexRouteImport } from './routes/message/index' import { Route as LoadingIndexRouteImport } from './routes/loading/index' @@ -27,6 +28,11 @@ const TabIndexRoute = TabIndexRouteImport.update({ path: '/tab/', getParentRoute: () => rootRouteImport, } as any) +const ProgressIndexRoute = ProgressIndexRouteImport.update({ + id: '/progress/', + path: '/progress/', + getParentRoute: () => rootRouteImport, +} as any) const ModalIndexRoute = ModalIndexRouteImport.update({ id: '/modal/', path: '/modal/', @@ -60,6 +66,7 @@ export interface FileRoutesByFullPath { '/loading': typeof LoadingIndexRoute '/message': typeof MessageIndexRoute '/modal': typeof ModalIndexRoute + '/progress': typeof ProgressIndexRoute '/tab': typeof TabIndexRoute } export interface FileRoutesByTo { @@ -69,6 +76,7 @@ export interface FileRoutesByTo { '/loading': typeof LoadingIndexRoute '/message': typeof MessageIndexRoute '/modal': typeof ModalIndexRoute + '/progress': typeof ProgressIndexRoute '/tab': typeof TabIndexRoute } export interface FileRoutesById { @@ -79,6 +87,7 @@ export interface FileRoutesById { '/loading/': typeof LoadingIndexRoute '/message/': typeof MessageIndexRoute '/modal/': typeof ModalIndexRoute + '/progress/': typeof ProgressIndexRoute '/tab/': typeof TabIndexRoute } export interface FileRouteTypes { @@ -90,9 +99,18 @@ export interface FileRouteTypes { | '/loading' | '/message' | '/modal' + | '/progress' | '/tab' fileRoutesByTo: FileRoutesByTo - to: '/' | '/buttons' | '/input' | '/loading' | '/message' | '/modal' | '/tab' + to: + | '/' + | '/buttons' + | '/input' + | '/loading' + | '/message' + | '/modal' + | '/progress' + | '/tab' id: | '__root__' | '/' @@ -101,6 +119,7 @@ export interface FileRouteTypes { | '/loading/' | '/message/' | '/modal/' + | '/progress/' | '/tab/' fileRoutesById: FileRoutesById } @@ -111,6 +130,7 @@ export interface RootRouteChildren { LoadingIndexRoute: typeof LoadingIndexRoute MessageIndexRoute: typeof MessageIndexRoute ModalIndexRoute: typeof ModalIndexRoute + ProgressIndexRoute: typeof ProgressIndexRoute TabIndexRoute: typeof TabIndexRoute } @@ -130,6 +150,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof TabIndexRouteImport parentRoute: typeof rootRouteImport } + '/progress/': { + id: '/progress/' + path: '/progress' + fullPath: '/progress' + preLoaderRoute: typeof ProgressIndexRouteImport + parentRoute: typeof rootRouteImport + } '/modal/': { id: '/modal/' path: '/modal' @@ -175,6 +202,7 @@ const rootRouteChildren: RootRouteChildren = { LoadingIndexRoute: LoadingIndexRoute, MessageIndexRoute: MessageIndexRoute, ModalIndexRoute: ModalIndexRoute, + ProgressIndexRoute: ProgressIndexRoute, TabIndexRoute: TabIndexRoute, } export const routeTree = rootRouteImport diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index 967f508..17d4f97 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -11,7 +11,8 @@ const navLinks = [ { to: "/loading", label: "Loading" }, { to: "/message", label: "Message" }, { to: "/modal", label: "Modal" }, - { to: "/tab", label: "Tab" }, + { to: "/progress", label: "Progress" }, + { to: "/tab", label: "Tab" } ]; diff --git a/src/routes/progress/index.tsx b/src/routes/progress/index.tsx new file mode 100644 index 0000000..e1e5437 --- /dev/null +++ b/src/routes/progress/index.tsx @@ -0,0 +1,147 @@ +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'; + + +export const Route = createFileRoute('/progress/')({ + component: ProgressPage, +}); + +function ProgressPage() { + const [ value, setValue ] = useState(0); + + + return ( +
+
+ setValue(value - 1)}> + setValue(value + 1)}> + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} + +function ProgressBlock({ + label, + children +}:{ + label: string; + children: React.ReactNode; +}){ + return ( +
+

+ {label} +

+ {children} +
+ ); +}