@aslaluroba/help-center-react 2.0.4 → 2.0.6

package/src/ui/review-dialog/rating.tsx

@@ -0,0 +1,78 @@
+import { cn } from '@/lib'
+import { IconHeart as Heart, IconStar as Star, IconThumbUp as ThumbsUp } from '@tabler/icons-react'
+import * as React from 'react'
+
+export interface RatingProps {
+  value: number
+  onChange?: (value: number) => void
+  max?: number
+  icon?: 'star' | 'heart' | 'thumbsUp'
+  size?: 'sm' | 'md' | 'lg'
+  readOnly?: boolean
+  className?: string
+  style?: React.CSSProperties
+}
+
+const iconMap = {
+  star: Star,
+  heart: Heart,
+  thumbsUp: ThumbsUp
+}
+
+const sizeMap = {
+  sm: 'w-4 h-4',
+  md: 'w-6 h-6',
+  lg: 'w-8 h-8'
+}
+
+export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
+  ({ value, onChange, max = 5, icon = 'star', size = 'md', readOnly = false, className, ...props }, ref) => {
+    const [hoverValue, setHoverValue] = React.useState<number | null>(null)
+    const Icon = iconMap[icon]
+
+    const handleMouseEnter = (index: number) => {
+      if (!readOnly) {
+        setHoverValue(index)
+      }
+    }
+
+    const handleMouseLeave = () => {
+      setHoverValue(null)
+    }
+
+    const handleClick = (index: number) => {
+      if (!readOnly && onChange) {
+        onChange(index)
+      }
+    }
+
+    return (
+      <div ref={ref} className={cn('flex items-center', className)} {...props}>
+        {[...Array(max)].map((_, index) => {
+          const filled = (hoverValue !== null ? hoverValue : value) > index
+
+          return (
+            <Icon
+              key={index}
+              className={cn(
+                sizeMap[size],
+                'cursor-pointer transition-colors',
+                filled ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300',
+                readOnly && 'cursor-default'
+              )}
+              onMouseEnter={() => handleMouseEnter(index + 1)}
+              onMouseLeave={handleMouseLeave}
+              onClick={() => handleClick(index + 1)}
+              aria-hidden={readOnly}
+              role={readOnly ? undefined : 'button'}
+              tabIndex={readOnly ? -1 : 0}
+              aria-label={`Rate ${index + 1} out of ${max}`}
+            />
+          )
+        })}
+      </div>
+    )
+  }
+)
+
+Rating.displayName = 'Rating'

package/tsconfig.json

@@ -0,0 +1,48 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+     "paths": {
+      "@/*": ["src/*"],
+      "@/components/*": ["src/components/*"],
+      "@/ui/*": ["src/ui/*"],
+      "@/lib/*": ["src/lib/*"],
+      "@/assets/*": ["src/assets/*"]
+    },
+  },
+  "include": [
+    "src",
+    "assets"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}