@aslaluroba/help-center-react 2.0.2 → 2.0.5

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"
+  ]
+}

package/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
-  }
-}

package/rollup.config.js

@@ -1,58 +0,0 @@
-import json from '@rollup/plugin-json';
-import resolve from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
-import typescript from '@rollup/plugin-typescript'
-import postcss from 'rollup-plugin-postcss'
-import svgr from '@svgr/rollup'
-import image from '@rollup/plugin-image'
-
-const createConfig = (format) => ({
-  input: 'src/index.ts',
-  output: {
-    file: `dist/index${format === 'esm' ? '.esm' : ''}.js`,
-    format: format === 'esm' ? 'es' : 'cjs',
-    sourcemap: true
-  },
-  external: ['react', 'react-dom', '@microsoft/signalr', 'axios', 'i18next', 'react-i18next'],
-  plugins: [
-    svgr({
-      svgoConfig: {
-        plugins: [
-          {
-            name: 'preset-default',
-            params: {
-              overrides: {
-                removeViewBox: false
-              }
-            }
-          }
-        ]
-      }
-    }),
-    image({
-      include: ['**/*.gif', '**/*.png', '**/*.jpg', '**/*.jpeg'],
-      limit: 0,
-      fileName: '[dirname][name][extname]'
-    }),
-    resolve(),
-    json(), 
-    commonjs(),
-    postcss({
-      config: {
-        path: './postcss.config.js'
-      },
-      extensions: ['.css'],
-      minimize: true,
-      inject: {
-        insertAt: 'top'
-      }
-    }),
-    typescript({
-      tsconfig: './tsconfig.json',
-      declaration: true,
-      declarationDir: './dist'
-    })
-  ]
-})
-
-export default [createConfig('cjs'), createConfig('esm')]

package/tailwind.config.js

@@ -1,174 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  prefix: 'babylai-',
-  content: ['./src/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Cairo']
-      },
-
-      rotate: {
-        270: '270deg'
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)'
-      },
-      colors: {
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        borderColor: '#606060',
-        textDark: '#333333',
-        black: '#171717',
-        pureWhite: '#FFFFFF',
-        primary: {
-          100: '#F6ECFC',
-          200: '#DEB6F3',
-          300: '#D49CEE',
-          400: '#C57FEA',
-          500: '#AD49E1',
-          600: '#672B87',
-          700: '#451D5A',
-          800: '#220E2D',
-          900: '#110716',
-          950: '#0A0310',
-          DEFAULT: '#AD49E1',
-          foreground: '#FFFFFF'
-        },
-        'black-white': {
-          50: '#FFFFFF',
-          100: '#F3F3F3',
-          200: '#E2E2E2',
-          300: '#919191',
-          400: '#606060',
-          500: '#333333',
-          600: '#1F1F1F',
-          700: '#171717',
-          800: '#0A0A0A',
-          900: '#050505',
-          950: '#000000',
-          DEFAULT: '#333333'
-        },
-        'wild-sand': {
-          50: '#f8f8f8',
-          100: '#f3f3f3',
-          200: '#dcdcdc',
-          300: '#bdbdbd',
-          400: '#989898',
-          500: '#7c7c7c',
-          600: '#656565',
-          700: '#525252',
-          800: '#464646',
-          900: '#3d3d3d',
-          950: '#292929'
-        },
-        'storm-dust': {
-          50: '#f6f6f6',
-          100: '#e7e7e7',
-          200: '#d1d1d1',
-          300: '#b0b0b0',
-          400: '#888888',
-          500: '#6d6d6d',
-          600: '#606060',
-          700: '#4f4f4f',
-          800: '#454545',
-          900: '#3d3d3d',
-          950: '#262626'
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))'
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))'
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))'
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))'
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))'
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))'
-        },
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        chart: {
-          1: 'hsl(var(--chart-1))',
-          2: 'hsl(var(--chart-2))',
-          3: 'hsl(var(--chart-3))',
-          4: 'hsl(var(--chart-4))',
-          5: 'hsl(var(--chart-5))'
-        },
-        sidebar: {
-          DEFAULT: 'hsl(var(--sidebar-background))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-          primary: 'hsl(var(--sidebar-primary))',
-          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          accent: 'hsl(var(--sidebar-accent))',
-          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          border: 'hsl(var(--sidebar-border))',
-          ring: 'hsl(var(--sidebar-ring))'
-        }
-      },
-      keyframes: {
-        'accordion-down': {
-          from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' }
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: 0 }
-        }
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-        float: 'float 3s infinite ease-in-out'
-      },
-      screens: {
-        sm: '640px',
-        md: '768px',
-        lg: '1024px',
-        xl: '1400px',
-        '2xl': '1600px',
-        '3xl': '1820px'
-      },
-      fontSize: {
-        '4.5xl': ['2.875rem', { lineHeight: '2.875rem' }],
-        '3.4xl': ['2.25rem', { lineHeight: '2.25rem' }]
-      },
-      boxShadow: {
-        'minimal-shadow': 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px'
-      },
-      opacity: {
-        15: '0.15'
-      }
-    }
-  },
-  plugins: [
-    require('tailwindcss-animate'),
-    require('tailwindcss-rtl'),
-    ({ addBase }) => {
-      addBase({
-        html: {
-          fontFamily: '"Cairo", sans-serif'
-        },
-        body: {
-          fontFamily: '"Cairo", sans-serif'
-        }
-      })
-    }
-  ]
-}