@agility/plenum-ui 2.0.0-rc6 → 2.0.0-rc61

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.0.0-rc6",
+	"version": "2.0.0-rc61",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",
@@ -17,19 +17,35 @@
 		"storybook:tw": "tailwindcss -o ./lib/tailwind.css -w ",
 		"storybook": "npm-run-all -p \"storybook:*\" ",
 		"dev": "yarn storybook",
-		"build:tw": "tailwindcss -o ./dist/lib/tailwind.css",
+		"build:tw": "tailwindcss -o ./dist/tailwind.css",
 		"build:tsc": "yarn node build.js",
 		"prepare": "yarn build",
-		"build": "npm run clean && npm-run-all -s \"build:*\" ",
+		"build": "yarn clean && npm-run-all -s \"build:*\" ",
 		"clean": "rimraf dist",
-		"create-component": "node scripts/create-component.js"
+		"create-component": "node scripts/create-component.js",
+		"start:local": "bash ./local.sh",
+		"start:watch": "yarn node watch.js"
 	},
-	"devDependencies": {
+	"dependencies": {
 		"@floating-ui/react": "^0.25.0",
 		"@headlessui/react": "^1.7.10",
 		"@headlessui/tailwindcss": "^0.1.2",
 		"@heroicons/react": "^1.0.5",
 		"@next/font": "^13.4.12",
+		"@tabler/icons": "^2.26.0",
+		"@tabler/icons-react": "^2.27.0",
+		"@tailwindcss/forms": "^0.5.3",
+		"@tailwindcss/typography": "^0.5.9",
+		"classnames": "^2.3.2",
+		"concurrently": "^7.6.0",
+		"next": "13.1.6",
+		"npm-dts": "^1.3.12",
+		"npm-run-all": "^4.1.5",
+		"postcss": "^8.4.21",
+		"tailwindcss": "^3.2.4",
+		"typescript": "^5.1.6"
+	},
+	"devDependencies": {
 		"@storybook/addon-designs": "^7.0.1",
 		"@storybook/addon-essentials": "^7.1.1",
 		"@storybook/addon-interactions": "^7.1.1",
@@ -40,27 +56,28 @@
 		"@storybook/react": "^7.1.1",
 		"@storybook/testing-library": "^0.2.0",
 		"@storybook/theming": "^7.1.1",
-		"@tabler/icons": "^2.26.0",
-		"@tabler/icons-react": "^2.27.0",
-		"@tailwindcss/forms": "^0.5.3",
-		"@tailwindcss/typography": "^0.5.9",
 		"@types/node": "18.11.18",
 		"autoprefixer": "^10.4.13",
-		"classnames": "^2.3.2",
-		"concurrently": "^7.6.0",
 		"esbuild": "^0.18.19",
 		"eslint": "8.32.0",
 		"eslint-config-next": "13.1.6",
 		"eslint-plugin-storybook": "^0.6.13",
-		"next": "13.1.6",
-		"npm-dts": "^1.3.12",
-		"npm-run-all": "^4.1.5",
-		"postcss": "^8.4.21",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-icons": "^4.10.1",
-		"storybook": "^7.1.1",
-		"tailwindcss": "^3.2.4",
-		"typescript": "^5.1.6"
+		"rimraf": "^5.0.1",
+		"storybook": "^7.1.1"
+	},
+	"peerDependencies": {
+		"@floating-ui/react": "^0.25.0",
+		"@headlessui/react": "^1.7.10",
+		"@headlessui/tailwindcss": "^0.1.2",
+		"@heroicons/react": "^1.0.5",
+		"@tabler/icons": "^2.26.0",
+		"@tabler/icons-react": "^2.27.0",
+		"classnames": "^2.3.2",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"react-icons": "^4.10.1"
 	}
 }

package/rollup.config.mjs

@@ -0,0 +1,42 @@
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+
+
+const config = [
+	{
+
+		input: 'stories/index.ts',
+
+		output: [
+			{
+				file: "lib/index.js",
+				format: 'cjs',
+				sourcemap: true
+			},
+			{
+				file: "lib/index.esm.js",
+				format: 'esm',
+				sourcemap: true
+			}
+		],
+		external: ["react", "react-dom"],
+		plugins: [
+			peerDepsExternal(),
+			resolve(),
+			commonjs(),
+			typescript({
+				tsconfig: "./tsconfig.lib.json",
+			})
+		]
+	},
+	{
+		input: "lib/esm/types/index.d.ts",
+		output: [{ file: "dist/index.d.ts", format: "esm" }],
+		plugins: [dts()],
+		external: ["react", "react-dom"],
+	},
+];
+
+export default config;

package/stories/atoms/badges/Badge.tsx

@@ -117,7 +117,7 @@ const Badge: React.FC<IBadgeProps> = ({
 						className: `${removeButton?.className || ""} group outline-0 `
 					}}
 				>
-					<DynamicIcon {...{ icon: "XIcon", className: removeButtonStyles }} />
+					<DynamicIcon {...{ icon: "IconX", className: removeButtonStyles }} />
 				</button>
 			)}
 		</div>

package/stories/atoms/buttons/Button/Alternative/Alternative.stories.ts

@@ -22,6 +22,16 @@ export const Alternative: Story = {
 		}
 	}
 }
+export const AlternativeDisabled: Story = {
+	args: {
+		actionType: "alternative",
+		label: "Button",
+		disabled: true,
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
 export const AlternativeTrailingIcon: Story = {
 	args: {
 		...Alternative.args,

package/stories/atoms/buttons/Button/Button.tsx

@@ -1,12 +1,14 @@
 import Loader from "stories/atoms/loaders/Loader"
 import { default as cn } from "classnames"
-import { HTMLAttributeAnchorTarget } from "react"
+import React, { HTMLAttributeAnchorTarget, forwardRef } from "react"
 import { DynamicIcon, UnifiedIconName, IDynamicIconProps } from "../../icons"
 
 // import Loader from "../loaders/loader/Loader"
 
 export type BTNActionType = "primary" | "secondary" | "alternative" | "danger"
-export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
+
+export interface IButtonProps
+	extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> {
 	/** Is the button a Primary CTA, alternative or danger button? */
 	actionType?: BTNActionType
 	/** How lg should the button be? - Defaults to 'base'. */
@@ -31,30 +33,31 @@ export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
 	isLoading?: boolean
 	className?: string
 	iconObj?: React.ReactNode
-	ref?: React.LegacyRef<HTMLButtonElement>
 }
 /**
  * Primary UI component for user interaction
  */
-const Button = ({
-	actionType = "primary",
-	size = "sm",
-	label,
-	icon,
-	iconObj,
-	CustomSVGIcon,
-	fullWidth = false,
-	iconPosition = "trailing",
-	asLink,
-	isLoading = false,
-	className,
-	ref,
-	...props
-}: IButtonProps) => {
+const _Button = (
+	{
+		actionType = "primary",
+		size = "sm",
+		label,
+		icon,
+		iconObj,
+		CustomSVGIcon,
+		fullWidth = false,
+		iconPosition = "leading",
+		asLink,
+		isLoading = false,
+		className,
+		...props
+	}: IButtonProps,
+	ref: React.LegacyRef<HTMLButtonElement>
+) => {
 	const iconStyles = cn(
 		{ "text-white h-5 w-5": actionType === "primary" || actionType === "danger" },
 		{ "text-purple-700 h-5 w-5 ": actionType === "secondary" },
-		{ "text-gray-700  h-5 w-5": actionType === "alternative" }
+		{ "text-gray-400  h-5 w-5": actionType === "alternative" }
 	)
 	const loaderColors = cn(
 		{ "border-r-white": actionType === "primary" },
@@ -64,11 +67,91 @@ const Button = ({
 	)
 	const loaderSize = cn({ "h-4 w-4": size === "sm" }, { "h-5 w-5": size === "md" }, { "h-6 w-6 ": size === "lg" })
 
-	return (
+	return asLink ? (
+		//@ts-ignore
+		<a
+			{...{
+				href: asLink.href,
+				target: asLink.target,
+				title: asLink.title,
+				className: cn(
+					"inline-flex items-center justify-center gap-x-2  font-medium rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+					{ "w-full": fullWidth },
+					{ "px-[11px] py-[7px] text-xs": size === "xs" },
+					{ "px-[13px] py-[9px] text-sm": size === "sm" },
+					{ "px-[17px] py-[9px] text-sm": size === "md" },
+					{ "px-[17px] py-[9px] text-base": size === "lg" },
+					{ "px-[25px] py-[13px] text-base": size === "xl" },
+					{
+						"bg-violet-800 text-white hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:focus-visible:ring-0":
+							actionType === "primary"
+					},
+					{
+						" bg-purple-50  border-purple-400 border hover:border-purple-500 text-purple-700 hover:bg-purple-100   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
+							actionType === "secondary"
+					},
+					{
+						"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300 disabled:bg-gray-50 disabled:text-gray-300 disabled:focus-visible:ring-0":
+							actionType === "alternative"
+					},
+					{
+						" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
+							actionType === "danger"
+					},
+					className ? className : ""
+				),
+				onClick: props.onClick
+			}}
+		>
+			{" "}
+			{CustomSVGIcon &&
+				(isLoading ? (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : (
+					<i>{CustomSVGIcon}</i>
+				))}
+			{iconObj &&
+				iconPosition === "leading" &&
+				(!isLoading ? (
+					<>{iconObj}</>
+				) : (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				))}
+			{icon &&
+				iconPosition === "leading" &&
+				(isLoading ? (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : typeof icon === "string" ? (
+					<DynamicIcon {...{ icon: icon, className: iconStyles }} />
+				) : (
+					<DynamicIcon {...{ ...icon, className: iconStyles }} />
+				))}
+			{!icon && !CustomSVGIcon && isLoading && (
+				<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+			)}
+			{label}
+			{icon &&
+				iconPosition === "trailing" &&
+				(isLoading ? (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				) : typeof icon === "string" ? (
+					<DynamicIcon {...{ icon: icon, className: iconStyles }} />
+				) : (
+					<DynamicIcon {...{ ...icon, className: iconStyles }} />
+				))}
+			{iconObj &&
+				iconPosition === "trailing" &&
+				(!isLoading ? (
+					<>{iconObj}</>
+				) : (
+					<div className={cn("h-4 rounded-full w-4 border-2 m-0 animate-spin", loaderColors, loaderSize)} />
+				))}
+		</a>
+	) : (
 		<button
 			type="button"
 			className={cn(
-				"inline-flex items-center justify-center gap-x-2  font-medium p-2 rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+				"inline-flex items-center justify-center gap-x-2  font-medium rounded-[3px] !ring-offset-white outline-none focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
 				{ "w-full": fullWidth },
 				{ "px-[11px] py-[7px] text-xs": size === "xs" },
 				{ "px-[13px] py-[9px] text-sm": size === "sm" },
@@ -76,18 +159,19 @@ const Button = ({
 				{ "px-[17px] py-[9px] text-base": size === "lg" },
 				{ "px-[25px] py-[13px] text-base": size === "xl" },
 				{
-					"bg-purple-600 text-white hover:border-purple-700 hover:bg-purple-700 ": actionType === "primary"
+					"bg-violet-800 text-violet-100 hover:border-violet-700 hover:bg-violet-700 disabled:bg-violet-400 disabled:focus-visible:ring-0":
+						actionType === "primary"
 				},
 				{
-					" bg-purple-50 text-purple-700 hover:bg-purple-200   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100":
+					" bg-purple-50  border-purple-400 border hover:border-purple-500 text-purple-700 hover:bg-purple-100   focus-within:bg-purple-100  focus-visible:bg-purple-100 focus:bg-purple-100 active:bg-purple-100 disabled:bg-purple-50 disabled:text-purple-300 disabled:focus-visible:ring-0":
 						actionType === "secondary"
 				},
 				{
-					"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300":
+					"border-gray-300 bg-white border  text-gray-700 hover:bg-gray-50 focus-visible:!border-gray-300 focus-within:!border-gray-300 focus:!border-gray-300 active:!border-gray-300 disabled:bg-gray-50 disabled:text-gray-300 disabled:focus-visible:ring-0":
 						actionType === "alternative"
 				},
 				{
-					" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 ":
+					" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
 						actionType === "danger"
 				},
 				className ? className : ""
@@ -143,4 +227,6 @@ const Button = ({
 	)
 }
 
+const Button = forwardRef<HTMLButtonElement, IButtonProps>(_Button)
+
 export default Button

package/stories/atoms/buttons/Button/Danger/Danger.stories.ts

@@ -22,12 +22,24 @@ export const Danger: Story = {
 		}
 	}
 }
+
+export const DangerDisabled: Story = {
+	args: {
+		actionType: "danger",
+		label: "Danger Zone!",
+		disabled: true,
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+
 export const DangerTrailingIcon: Story = {
 	args: {
 		...Danger.args,
 		icon: {
 			...defaultIcon,
-			icon: "TrashIcon"
+			icon: "IconTrash"
 		},
 		iconPosition: "trailing"
 	}
@@ -41,7 +53,7 @@ export const DangerLeadingIcon: Story = {
 export const DangerSimpleIconName: Story = {
 	args: {
 		...Danger.args,
-		icon: "TrashIcon",
+		icon: "IconTrash",
 		iconPosition: "leading"
 	}
 }

package/stories/atoms/buttons/Button/Primary/Primary.stories.ts

@@ -28,12 +28,24 @@ export const Primary: Story = {
 		}
 	}
 }
+
+export const PrimaryDisabled: Story = {
+	args: {
+		actionType: "primary",
+		label: "Button",
+		disabled: true,
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+
 export const PrimaryLeadingIcon: Story = {
 	args: {
 		...Primary.args,
 		icon: {
 			...defaultIcon,
-			icon: "CheckIcon",
+			icon: "IconCheck",
 			outline: false
 		},
 		iconPosition: "leading"
@@ -42,7 +54,7 @@ export const PrimaryLeadingIcon: Story = {
 export const PrimarySimpleIconName: Story = {
 	args: {
 		...Primary.args,
-		icon: "CheckIcon",
+		icon: "IconCheck",
 		iconPosition: "leading"
 	}
 }

package/stories/atoms/buttons/Button/Secondary/Secondary.stories.ts

@@ -28,6 +28,18 @@ export const Secondary: Story = {
 		}
 	}
 }
+
+export const SecondaryDisabled: Story = {
+	args: {
+		actionType: "secondary",
+		label: "Button",
+		disabled: true,
+		onClick: () => {
+			window.alert("Button clicked!")
+		}
+	}
+}
+
 export const SecondaryTrailingIcon: Story = {
 	args: {
 		...Secondary.args,
@@ -44,7 +56,7 @@ export const SecondaryLeadingIcon: Story = {
 export const SecondarySimpleIconName: Story = {
 	args: {
 		...Secondary.args,
-		icon: "BellIcon",
+		icon: "IconBell",
 		iconPosition: "leading"
 	}
 }

package/stories/atoms/buttons/Button/defaultArgs.ts

@@ -1,7 +1,7 @@
 import { IDynamicIconProps } from "../../icons"
 
 const defaultIcon: IDynamicIconProps = {
-	icon: "BellIcon",
+	icon: "IconBell",
 	className: "w-5 h-5",
 	outline: true
 }

package/stories/atoms/buttons/Capsule/Capsule.tsx

@@ -6,7 +6,8 @@ import { UnifiedIconName } from "../../icons/DynamicIcon"
 /**
  * Capsule Style Button
  */
-export interface ICapsuleProps extends React.ComponentPropsWithoutRef<"button"> {
+export interface ICapsuleProps
+	extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
 	/** Is the button a Primary CTA, alternative or danger button? */
 	actionType: BTNActionType
 	/** How lg should the button be? - Defaults to 'base'. */

package/stories/atoms/icons/DynamicIcon.stories.ts

@@ -29,7 +29,7 @@ export const TablerIconSolid: Story = {
 }
 export const TablerIconOutline: Story = {
 	args: {
-		icon: "TrashIcon",
+		icon: "IconTrash",
 		outline: true
 	}
 }

package/stories/atoms/icons/DynamicIcon.tsx

@@ -1,20 +1,18 @@
 import React from "react"
-// TODO: Fix heroicons support 
+// TODO: Fix heroicons support
 import * as SolidIcons from "@heroicons/react/solid"
 import * as OutlineIcons from "@heroicons/react/outline"
-import * as TablerIconComponents from "@tabler/icons-react"
 import * as FA from "react-icons/fa"
 import { tablerIconNames, TablerIconName } from "./tablerIconNames"
 import { default as cn } from "classnames"
 
-import TablerIcon from "./TablerIcon"
 import { ClassNameWithAutocomplete } from "@/utils/types"
+import TablerIcon from "./TablerIcon"
 
 export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons
-
 export type FAIconName = keyof typeof FA
 
-export type UnifiedIconName = IconName | TablerIconName | FAIconName
+export type UnifiedIconName = TablerIconName | IconName | FAIconName
 
 export function isHeroIcon(name: UnifiedIconName): name is keyof typeof SolidIcons | keyof typeof OutlineIcons {
 	return name in SolidIcons || name in OutlineIcons
@@ -27,11 +25,12 @@ export function isTablerIcon(name: UnifiedIconName): name is TablerIconName {
 export function isFAIcon(name: UnifiedIconName): name is keyof typeof FA {
 	return name in FA
 }
+
 export function isUnifiedIconName(name: UnifiedIconName): name is UnifiedIconName {
-	return isTablerIcon(name) || isFAIcon(name)
+	return isTablerIcon(name) // || isHeroIcon(name) || isFAIcon(name)
 }
 
-export interface IDynamicIconProps extends React.ComponentProps<"i"> {
+export interface IDynamicIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
 	icon: UnifiedIconName
 	className?: ClassNameWithAutocomplete
 	outline?: boolean
@@ -62,6 +61,7 @@ export const DynamicIcon = ({
 			/>
 		)
 	}
+
 	if (isFAIcon(icon)) {
 		const Icon = FA[icon]
 		return (

package/stories/atoms/icons/IconWithShadow.stories.ts

@@ -11,13 +11,13 @@ type Story = StoryObj<typeof IconWithShadow>
 
 export const HeroIconSolid: Story = {
 	args: {
-		icon: "CubeTransparentIcon",
+		icon: "IconCube",
 		outline: false
 	}
 }
 export const HeroIconOutline: Story = {
 	args: {
-		icon: "CubeTransparentIcon",
+		icon: "IconCube",
 		outline: true
 	}
 }
@@ -35,7 +35,7 @@ export const TablerIconOutline: Story = {
 }
 export const FAIcon: Story = {
 	args: {
-		icon: "FaGithub",
+		icon: "IconBrandGithub",
 		outline: true
 	}
 }

package/stories/atoms/icons/TablerIcon.tsx

@@ -3,7 +3,7 @@ import { TablerIconName } from "./tablerIconNames"
 import * as TablerIcons from "@tabler/icons-react"
 import { ClassNameWithAutocomplete } from "@/utils/types"
 
-export interface ITablerIconProps extends React.ComponentProps<"i"> {
+export interface ITablerIconProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
 	icon: TablerIconName
 	className?: ClassNameWithAutocomplete
 }

package/stories/atoms/loaders/Loader.tsx

@@ -1,15 +1,21 @@
 import React from "react"
-import classNames, { default as cn } from "classnames"
+import { default as cn } from "classnames"
 
 export interface ILoaderProps {
 	className?: string
 }
 const Loader: React.FC<ILoaderProps> = ({ className }) => {
-  const outerLoaderStyles = cn(
-    "rounded-full w-16 h-16 inline-block border-8 animate-spin m-auto",
-    className ? className : "border-purple-700 border-r-gray-200"
-  )
-  return <i className={outerLoaderStyles} role="status" />
+	return (
+		<>
+			<i
+				className={cn(
+					"rounded-full w-16 h-16 inline-block border-8 animate-spin m-auto",
+					className ? className : "border-purple-700 border-r-gray-200"
+				)}
+				role="status"
+			/>
+		</>
+	)
 }
 
 export default Loader

package/stories/atoms/loaders/NProgress/RadialProgress.tsx

@@ -31,8 +31,6 @@ const RadialProgress: React.FC<IRadialProgressProps> = ({
   }
   const drawPercentage = useMemo(() => {
     const roundCircum = Math.round(2 * r * Math.PI)
-    console.log(roundCircum, "circumference")
-    console.log(inputValue, "input value")
     return (inputValue * roundCircum) / 50
   }, [inputValue, r])