Merge remote-tracking branch 'origin/migrate-to-ui-package'

Author: ruucm

packages/ui/package.json

@@ -13,7 +13,7 @@
     "ngrok": "ngrok http --domain=esm.ngrok.dev 8000",
     "build": "tsup src/index.ts --format esm,cjs --dts --external react && tailwindcss -i ./src/styles.css -o ./dist/styles.css",
     "release": "pnpm run build && mkdir -p release && cp -Rf dist release/$npm_package_name@$npm_package_version",
-    "dev": "concurrently \"tsup src/index.tsx --format esm,cjs --dts --external react --watch\" \"tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch\"",
+    "dev": "concurrently \"tsup src/index.ts --format esm,cjs --dts --external react --watch\" \"tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch\"",
     "clean": "rm -rf dist"
   },
   "peerDependencies": {

packages/ui/src/ShaderGradientUI/InputTitle.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { useState } from 'react'
+
+type InputTitlePropsT = {
+  title: string
+  info: boolean
+  infoContent: any
+  condition: boolean
+} & React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+>
+
+export function InputTitle({
+  title,
+  info,
+  infoContent,
+  condition = false,
+}: InputTitlePropsT): JSX.Element {
+  const [isMouseOver, setIsMouseOver] = useState(false)
+  return (
+    <div
+      className='w-[100px] flex items-center flex-shrink-0 gap-1'
+      style={{ fontFamily: 'Inter Medium' }}
+    >
+      <p className='font-medium whitespace-nowrap'>
+        {condition === true && <span className='opacity-30'>↳ </span>}
+        {title}
+      </p>
+      {info === true && (
+        <div
+          className='flex items-center w-2 h-2 bg-[blue] gap-2 relative'
+          onMouseOver={() => setIsMouseOver(true)}
+          onMouseLeave={() => setIsMouseOver(false)}
+        >
+          <div
+            className={
+              'absolute text-[white] p-4 bg-[red] ' +
+              (isMouseOver === true ? 'opacity-100' : 'opacity-0')
+            }
+          >
+            {infoContent}
+          </div>
+        </div>
+        // <HoverMessage content={infoContent} isHovered={isMouseOver} />
+      )}
+    </div>
+  )
+}

packages/ui/src/ShaderGradientUI/RangeSlider.tsx

@@ -1,6 +1,7 @@
 import ReactSlider from 'react-slider'
 import { useState, useEffect } from 'react'
-import './slider.css'
+// import './slider.css'
+import { InputTitle } from './InputTitle'
 
 type RangeSliderPropsT = {
   title: string
@@ -10,6 +11,9 @@ type RangeSliderPropsT = {
   step: number
   min: number
   max: number
+  info: boolean
+  infoContent: string
+  condition: boolean
 }
 
 export function RangeSlider({
@@ -19,6 +23,9 @@ export function RangeSlider({
   step,
   min,
   max,
+  info,
+  infoContent,
+  condition,
 }: RangeSliderPropsT): JSX.Element {
   const [rangeValue, setRangeValue] = useState<[number, number]>(defaultValue)
   const [isMouseOver, setIsMouseOver] = useState(false)
@@ -36,9 +43,12 @@ export function RangeSlider({
       className='flex items-center w-full h-[26px] flex-row gap-2'
       style={{ fontFamily: 'Inter Medium' }}
     >
-      <div className='w-[100px] flex-shrink-0 flex items-center'>
-        <p className='font-medium whitespace-nowrap'>{title}</p>
-      </div>
+      <InputTitle
+        title={title}
+        info={info}
+        infoContent={infoContent}
+        condition={condition}
+      />
       <div
         className='flex items-center w-full h-fit flex-row gap-2'
         onMouseOver={() => setIsMouseOver(true)}

packages/ui/src/ShaderGradientUI/Slider.tsx

@@ -1,6 +1,7 @@
 import ReactSlider from 'react-slider'
 import { useState, useEffect } from 'react'
-import './slider.css'
+// import './slider.css'
+import { InputTitle } from './InputTitle'
 
 type SliderPropsT = {
   title: string
@@ -9,6 +10,9 @@ type SliderPropsT = {
   step: number
   min: number
   max: number
+  info: boolean
+  infoContent: string
+  condition: boolean
 } & React.DetailedHTMLProps<
   React.InputHTMLAttributes<HTMLInputElement>,
   HTMLInputElement
@@ -21,6 +25,9 @@ export function Slider({
   step,
   min,
   max,
+  info,
+  infoContent,
+  condition,
 }: SliderPropsT): JSX.Element {
   const [sharedValue, setSharedValue] = useState<any>(defaultValue)
   const [isMouseOver, setIsMouseOver] = useState<boolean>(false)
@@ -42,9 +49,12 @@ export function Slider({
       className='flex items-center w-full h-[26px] flex-row gap-2'
       style={{ fontFamily: 'Inter Medium' }}
     >
-      <div className='w-[100px] flex items-center flex-shrink-0'>
-        <p className='font-medium whitespace-nowrap'>{title}</p>
-      </div>
+      <InputTitle
+        title={title}
+        info={info}
+        infoContent={infoContent}
+        condition={condition}
+      />
       <div
         className='flex items-center w-full h-fit flex-row gap-2'
         onMouseOver={() => setIsMouseOver(true)}

packages/ui/src/ShaderGradientUI/index.ts

@@ -1,3 +1,4 @@
 export { Slider } from './Slider'
 export { ColorInput } from './ColorInput'
 export { RangeSlider } from './RangeSlider'
+export { InputTitle } from './InputTitle'