@startupjs-ui/rank 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/rank
+
+
+
+
+
+## [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))
+* **rank:** refactor Rank component ([f38b0df](https://github.com/startupjs/startupjs-ui/commit/f38b0dfb212fa77efe1fa0e52b2b60d1ff4f7c95))

package/README.mdx

@@ -0,0 +1,70 @@
+import { useState } from 'react'
+import Rank, { _PropsJsonSchema as RankPropsJsonSchema } from './index'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Rank
+
+Rank input allows user to arrange options in specific order.
+
+```jsx
+import { Rank } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const options = ['option1', 'option2', 'option3', 'option4', 'option5']
+const [value, setValue] = useState(options)
+
+return (
+  <Rank
+    value={value}
+    options={options}
+    onChange={setValue}
+  />
+)
+```
+
+## Disabled
+
+```jsx example
+const options = ['option1', 'option2', 'option3', 'option4', 'option5']
+const [value, setValue] = useState(options)
+
+return (
+  <Rank
+    disabled
+    value={value}
+    options={options}
+    onChange={setValue}
+  />
+)
+```
+
+## Readonly
+
+```jsx example
+const options = ['option1', 'option2', 'option3', 'option4', 'option5']
+const [value, setValue] = useState(options)
+
+return (
+  <Rank
+    readonly
+    value={value}
+    options={options}
+    onChange={setValue}
+  />
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Rank}
+  propsJsonSchema={RankPropsJsonSchema}
+  props={{
+    options: ['option1', 'option2', 'option3', 'option4', 'option5'],
+    onChange: value => alert('New order: ' + JSON.stringify(value))
+  }}
+  block
+/>

package/helpers.ts

@@ -0,0 +1,25 @@
+export function stringifyValue (option: any): string {
+  try {
+    const value = getOptionValue(option)
+    return JSON.stringify(value)
+  } catch (err) {
+    console.error(err)
+    return ''
+  }
+}
+
+export function getOptionValue (option: any): any {
+  return option?.value ?? option
+}
+
+export function getOptionLabel (option: any): any {
+  return option?.label ?? option
+}
+
+export function move<T> (arr: T[], oldIndex: number, newIndex: number): T[] {
+  const arrCopy = arr.slice()
+  const element = arrCopy[oldIndex]
+  arrCopy.splice(oldIndex, 1)
+  arrCopy.splice(newIndex, 0, element)
+  return arrCopy
+}

package/index.cssx.styl

@@ -0,0 +1,42 @@
+.droppable
+  margin-top 1u
+
+.droppable
+.span
+  flex-shrink 1
+  flex-grow 1
+
+.readonly
+  &-index
+    min-width 2.5u
+  &-text
+    flex-shrink 1
+    flex-grow 1
+
+.draggable
+  padding 1u
+  border-width 1px
+  radius()
+  margin-top 1u
+
+.cursor
+  +web()
+    cursor pointer
+
+.span
+  margin-left 2.5u
+  justify-content center
+
+.right
+  flex-shrink 0
+  justify-content center
+  margin-left 4u
+
+.icon
+  &.disabled
+    color var(--color-text-subtle)
+
+.hint
+  font(caption)
+  margin-top 1u
+

package/index.d.ts

@@ -0,0 +1,21 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type StyleProp, type ViewStyle } from 'react-native';
+export declare const _PropsJsonSchema: {};
+export interface RankProps {
+    /** Custom styles applied to the root view */
+    style?: StyleProp<ViewStyle>;
+    /** Options list (strings, numbers, or `{ value, label }` objects) @default [] */
+    options?: any[];
+    /** Current order as a list of option values @default [] */
+    value?: any[];
+    /** Disable drag-and-drop interactions @default false */
+    disabled?: boolean;
+    /** Render a non-interactive ranked list @default false */
+    readonly?: boolean;
+    /** Fired when order changes; receives array of option values */
+    onChange?: (value: any[]) => void;
+}
+declare const _default: import("react").ComponentType<RankProps>;
+export default _default;

package/index.tsx

@@ -0,0 +1,162 @@
+import { useMemo, type ReactNode } from 'react'
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer, $ } from 'startupjs'
+import { themed, useColors } from '@startupjs-ui/core'
+import { DragDropProvider, Draggable, Droppable } from '@startupjs-ui/draggable'
+import Div from '@startupjs-ui/div'
+import Icon from '@startupjs-ui/icon'
+import Select from '@startupjs-ui/select'
+import Span from '@startupjs-ui/span'
+import { faGripVertical } from '@fortawesome/free-solid-svg-icons/faGripVertical'
+import { getOptionLabel, getOptionValue, stringifyValue, move } from './helpers'
+import STYLES from './index.cssx.styl'
+
+export const _PropsJsonSchema = {/* RankProps */} // used in docs generation
+
+export interface RankProps {
+  /** Custom styles applied to the root view */
+  style?: StyleProp<ViewStyle>
+  /** Options list (strings, numbers, or `{ value, label }` objects) @default [] */
+  options?: any[]
+  /** Current order as a list of option values @default [] */
+  value?: any[]
+  /** Disable drag-and-drop interactions @default false */
+  disabled?: boolean
+  /** Render a non-interactive ranked list @default false */
+  readonly?: boolean
+  /** Fired when order changes; receives array of option values */
+  onChange?: (value: any[]) => void
+}
+
+function Rank (props: RankProps): ReactNode {
+  const {
+    options = [],
+    readonly = false,
+    value = [],
+    style
+  } = props
+
+  const sortedValue = useMemo(() => {
+    return options.slice().sort((a, b) => {
+      return value.findIndex(i => stringifyValue(i) === stringifyValue(a)) -
+        value.findIndex(i => stringifyValue(i) === stringifyValue(b))
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value.toString()])
+
+  return pug`
+    if readonly
+      RankReadonly(value=sortedValue style=style)
+    else
+      RankInput(...props value=sortedValue)
+  `
+}
+
+const RankInput = observer(function RankInput ({
+  value,
+  onChange,
+  disabled,
+  style
+}: {
+  value: any[]
+  onChange?: (value: any[]) => void
+  disabled?: boolean
+  style?: StyleProp<ViewStyle>
+}): ReactNode {
+  const $width: any = $()
+  const dropId = useMemo(() => $.id(), [])
+
+  const getColor = useColors()
+
+  const selectOptions = useMemo(() => {
+    return value.map((_o, i) => ({ label: i + 1, value: i }))
+  }, [value])
+
+  function onLayout (event: any) {
+    $width.set(event.nativeEvent.layout.width)
+  }
+
+  function onMoveItem (oldIndex: number, newIndex: number) {
+    const newItems = move(value, oldIndex, newIndex)
+    onChange && onChange(newItems.map(i => getOptionValue(i)))
+  }
+
+  function onDragEnd ({ dragId, hoverIndex }: { dragId: string, hoverIndex: number }) {
+    const oldIndex = value.findIndex(item => stringifyValue(item) === dragId)
+    const newIndex = hoverIndex < oldIndex ? hoverIndex : hoverIndex - 1
+    onMoveItem(oldIndex, newIndex)
+  }
+
+  function renderDragItem (item: any, index: number): ReactNode {
+    const dragId = stringifyValue(item)
+
+    function onSelectChange (newIndex: any) {
+      onMoveItem(index, newIndex)
+    }
+
+    // HACK: Draggable component has some visual bugs if styles are not passed
+    // through style object
+    const extraStyle: any = disabled ? { backgroundColor: getColor('bg-main-subtle') } : STYLES.cursor
+    const itemStyle: any = [
+      { ...STYLES.draggable, backgroundColor: getColor('bg-main-strong'), borderColor: getColor('border-main') },
+      { width: $width.get() },
+      extraStyle
+    ]
+
+    const Container: any = disabled ? Div : Draggable
+
+    return pug`
+      Container(
+        style=StyleSheet.flatten(itemStyle)
+        key=dragId
+        dragId=dragId
+        onDragEnd=onDragEnd
+      )
+        Div(row)
+          Select(
+            size='s'
+            disabled=disabled
+            showEmptyValue=false
+            options=selectOptions
+            value=index
+            onChange=onSelectChange
+          )
+          Div.span
+            Span= getOptionLabel(item)
+          Div.right
+            Icon.icon(icon=faGripVertical styleName={ disabled })
+    `
+  }
+
+  return pug`
+    Div(
+      style=style
+      onLayout=onLayout
+    )
+      Span.hint(italic) To rank the listed items drag and drop each item
+      DragDropProvider
+        Droppable.droppable(dropId=dropId)
+          each option, index in value
+            = renderDragItem(option, index)
+  `
+})
+
+const RankReadonly = observer(function RankReadonly ({
+  value,
+  style
+}: {
+  value: any[]
+  style?: StyleProp<ViewStyle>
+}): ReactNode {
+  return pug`
+    Div(style=style)
+      each option, index in value
+        Div.readonly(key=index row)
+          Div.readonly-index
+            Span #{index + 1}.&nbsp;
+          Div.readonly-text
+            Span= getOptionLabel(option)
+  `
+})
+
+export default observer(themed('Rank', Rank))

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@startupjs-ui/rank",
+  "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/draggable": "^0.1.3",
+    "@startupjs-ui/icon": "^0.1.3",
+    "@startupjs-ui/select": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}