@startupjs-ui/rating 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/rating
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **rating:** refactor Rating component ([c820b75](https://github.com/startupjs/startupjs-ui/commit/c820b7504d01c56702d3b06833a0e45df87ee9e9))

package/README.mdx

@@ -0,0 +1,53 @@
+import { useState } from 'react'
+import Rating, { _PropsJsonSchema as RatingPropsJsonSchema } from './index'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Rating
+
+Rating provides an ability for user to leave his opinion and view opinion of other users of a service or a product.
+
+```js
+import { Rating } from 'startupjs-ui'
+```
+
+## Simple example
+
+Rating component provides five-star rating system. The `value` prop gets rounded to the nearest integer.
+
+```jsx example
+return (
+  <Rating value={3} />
+)
+```
+
+## Controlled
+
+```jsx example
+const [rated, setRated] = useState(0)
+return (
+  <Rating
+    value={rated}
+    onChange={(value) => setRated(value)}
+  />
+)
+```
+
+## Read only
+
+The `readonly` prop prevents the user from changing the value of the rating and display the it in compact view (`false` by default).
+
+```jsx example
+return(
+  <Rating value={4.5} readonly />
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Rating}
+  propsJsonSchema={RatingPropsJsonSchema}
+  props={{
+    onChange: value => alert('Value ' + value + ' selected.')
+  }}
+/>

package/Star/index.cssx.styl

@@ -0,0 +1,5 @@
+.icon
+  color var(--color-text-placeholder)
+
+  &.active
+    color var(--color-text-warning)

package/Star/index.tsx

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Icon, { type IconProps } from '@startupjs-ui/icon'
+import { faStar } from '@fortawesome/free-solid-svg-icons/faStar'
+import './index.cssx.styl'
+
+export default observer(themed('Rating', Star))
+
+export interface StarProps {
+  /** Custom styles applied to the star icon */
+  style?: IconProps['style']
+  /** Highlight the star as active */
+  active?: boolean
+}
+
+function Star ({
+  style,
+  active
+}: StarProps): ReactNode {
+  return pug`
+    Icon.icon(
+      styleName={active}
+      style=style
+      icon=faStar
+    )
+  `
+}

package/index.cssx.styl

@@ -0,0 +1,8 @@
+.value
+  margin-left 1u
+
+.star
+  margin-left 1u
+
+  &.first
+    margin-left 0

package/index.d.ts

@@ -0,0 +1,18 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type StyleProp, type ViewStyle } from 'react-native';
+import './index.cssx.styl';
+declare const _default: import("react").ComponentType<RatingProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface RatingProps {
+    /** Custom styles applied to the root view */
+    style?: StyleProp<ViewStyle>;
+    /** Rating value displayed with stars @default 0 */
+    value?: number;
+    /** Disable interactions and show compact view */
+    readonly?: boolean;
+    /** Handler called when user selects a value */
+    onChange?: (value: number) => void;
+}

package/index.tsx

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import Star from './Star'
+import './index.cssx.styl'
+
+const AMOUNT = 5
+const ITEMS = Array(AMOUNT).fill(null)
+
+export default observer(themed('Rating', Rating))
+
+export const _PropsJsonSchema = {/* RatingProps */}
+
+export interface RatingProps {
+  /** Custom styles applied to the root view */
+  style?: StyleProp<ViewStyle>
+  /** Rating value displayed with stars @default 0 */
+  value?: number
+  /** Disable interactions and show compact view */
+  readonly?: boolean
+  /** Handler called when user selects a value */
+  onChange?: (value: number) => void
+}
+
+function Rating ({
+  style,
+  value = 0,
+  readonly = false,
+  onChange
+}: RatingProps): ReactNode {
+  return pug`
+    Div(style=style vAlign='center' row)
+      if readonly
+        Star(active)
+        Span.value(bold h6)= value.toFixed(1)
+      else
+        each ITEM, index in ITEMS
+          Div.star(
+            key=index
+            onPress=() => onChange && onChange(index + 1)
+            styleName={first: index === 0}
+          )
+            Star(active=index < Math.round(value))
+  `
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@startupjs-ui/rating",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "@startupjs-ui/icon": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}