@startupjs-ui/color-picker 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/color-picker
+
+
+
+
+
+## [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))
+* **color-picker:** refactor ColorPicker component ([96b24fe](https://github.com/startupjs/startupjs-ui/commit/96b24feeb2fc0cb85e30fe1ae1e03d9fca741f4c))

package/README.mdx

@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import ColorPicker, { _PropsJsonSchema as ColorPickerPropsJsonSchema } from './index'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# ColorPicker
+
+ColorPicker allows user to select a color from the color palette (works with colors in hexadecimal format).
+
+## Import
+
+```jsx
+import { ColorPicker } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const [color, setColor] = useState()
+
+return (
+  <ColorPicker
+    value={color}
+    onChangeColor={setColor}
+  />
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={ColorPicker}
+  propsJsonSchema={ColorPickerPropsJsonSchema}
+  props={{
+    value: '#FF0000',
+    onChangeColor: value => alert('Color ' + value + ' is selected')
+  }}
+  block
+/>

package/helpers.ts

@@ -0,0 +1,17 @@
+import Color from 'color'
+
+export function getLabelColor (hex: string): string {
+  try {
+    const threshold = 0.5
+    const rgbColor = Color(hex).object()
+    const r = rgbColor.r * 0.2126
+    const g = rgbColor.g * 0.7152
+    const b = rgbColor.b * 0.0722
+    const lightness = (r + g + b) / 255
+    const textColor = lightness >= threshold ? 'black' : 'white'
+    return textColor
+  } catch (err) {
+    console.error('[getLabelColor]: Invalid hex color')
+    return 'gray'
+  }
+}

package/index.cssx.styl

@@ -0,0 +1,15 @@
+.button
+  border-color: var(--color-border-main)
+  border-width 1px
+
+.content
+  flex-grow 1
+  justify-content center
+
+.picker
+  height 50u
+  // we hacked height because react-native-color-picker has a strange logic of
+  // sizing and positioning of picker.
+  // https://github.com/instea/react-native-color-picker/blob/master/src/HoloColorPicker.tsx#L114
+  // https://github.com/instea/react-native-color-picker/blob/master/src/HoloColorPicker.tsx#L331
+  // TODO: make a PR with correct behaviour to react-native-color-picker library

package/index.d.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type RefObject } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import './index.cssx.styl';
+declare const _default: import("react").ComponentType<ColorPickerProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface ColorPickerProps {
+    /** Custom styles applied to the root view */
+    style?: StyleProp<ViewStyle>;
+    /** Current hex color value @default '#fff' */
+    value?: string;
+    /** Disables opening and auto-closes picker @default false */
+    disabled?: boolean;
+    /** Size of the button @default 'm' */
+    size?: 's' | 'm' | 'l';
+    /** Called with the selected hex color */
+    onChangeColor?: (color: string) => void;
+    /** Imperative ref to open/close picker */
+    ref?: RefObject<any>;
+}

package/index.tsx

@@ -0,0 +1,75 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  useImperativeHandle,
+  type ReactNode,
+  type RefObject
+} 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 Button from '@startupjs-ui/button'
+import Picker from './picker'
+import { getLabelColor } from './helpers'
+import './index.cssx.styl'
+
+export default observer(themed('ColorPicker', ColorPicker))
+
+export const _PropsJsonSchema = {/* ColorPickerProps */}
+
+export interface ColorPickerProps {
+  /** Custom styles applied to the root view */
+  style?: StyleProp<ViewStyle>
+  /** Current hex color value @default '#fff' */
+  value?: string
+  /** Disables opening and auto-closes picker @default false */
+  disabled?: boolean
+  /** Size of the button @default 'm' */
+  size?: 's' | 'm' | 'l'
+  /** Called with the selected hex color */
+  onChangeColor?: (color: string) => void
+  /** Imperative ref to open/close picker */
+  ref?: RefObject<any>
+}
+
+function ColorPicker ({
+  style,
+  size = 'm',
+  value = '#fff',
+  disabled = false,
+  onChangeColor = () => {},
+  ref
+}: ColorPickerProps): ReactNode {
+  const [shown, setShown] = useState(false)
+  const pickerRef = useRef<any>(null)
+
+  useImperativeHandle(ref, () => pickerRef.current)
+
+  useEffect(() => {
+    if (shown && disabled) pickerRef.current?.hide?.()
+  }, [disabled, shown])
+
+  return pug`
+    Div(style=style)
+      Picker(
+        ref=pickerRef
+        onChangeColor=(color) => {
+          onChangeColor(color)
+          setShown(false)
+        }
+      )
+      Button.button(
+        disabled=disabled
+        style={ backgroundColor: value }
+        variant='flat'
+        size=size
+        textStyle={ color: getLabelColor(value) }
+        onPress=() => {
+          pickerRef.current?.show?.()
+          setShown(true)
+        }
+      )= value.toUpperCase()
+  `
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@startupjs-ui/color-picker",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/button": "^0.1.3",
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "@startupjs-ui/modal": "^0.1.3",
+    "@startupjs-ui/scroll-view": "^0.1.3",
+    "color": "^3.1.2",
+    "react-native-color-picker": "^0.6.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}

package/picker.tsx

@@ -0,0 +1,45 @@
+import { useRef, useImperativeHandle, type ReactNode, type RefObject } from 'react'
+import { ColorPicker as RNColorPicker } from 'react-native-color-picker'
+import { pug, observer, $ } from 'startupjs'
+import ScrollView from '@startupjs-ui/scroll-view'
+import Modal from '@startupjs-ui/modal'
+import './index.cssx.styl'
+
+interface PickerProps {
+  onChangeColor?: (color: string) => void
+  ref?: RefObject<any>
+}
+
+function FullHeightScrollView (props: any): ReactNode {
+  return pug`
+    ScrollView(
+      contentContainerStyleName='content'
+      ...props
+    )
+  `
+}
+
+function Picker ({
+  onChangeColor = () => {},
+  ref
+}: PickerProps): ReactNode {
+  const $visible = useRef<any>($()).current
+
+  useImperativeHandle(ref, () => ({
+    show: () => $visible.set(true),
+    hide: () => $visible.set(false)
+  }))
+
+  return pug`
+    Modal($visible=$visible variant='fullscreen')
+      Modal.Content(ContentComponent=FullHeightScrollView)
+        RNColorPicker.picker(
+          onColorSelected=color => {
+            onChangeColor(color)
+            $visible.set(false)
+          }
+        )
+  `
+}
+
+export default observer(Picker)

package/picker.web.tsx

@@ -0,0 +1,51 @@
+import { useRef, useEffect, useImperativeHandle, type ReactNode, type RefObject } from 'react'
+import { pug, observer } from 'startupjs'
+import './index.cssx.styl'
+
+interface PickerProps {
+  onChangeColor?: (color: string) => void
+  ref?: RefObject<any>
+}
+
+function Picker ({
+  onChangeColor = () => {},
+  ref
+}: PickerProps): ReactNode {
+  const pickerRef = useRef<any>(null)
+
+  useImperativeHandle(ref, () => ({
+    show: () => pickerRef.current?.click?.(),
+    hide: () => {
+      // hacky way to close the color picker
+      if (!pickerRef.current) return
+      pickerRef.current.setAttribute('type', 'text')
+      pickerRef.current.setAttribute('type', 'color')
+    }
+  }))
+
+  function onChange (e: any) {
+    onChangeColor(e.target.value)
+  }
+
+  useEffect(() => {
+    const colorPicker = pickerRef.current
+    if (!colorPicker) return
+    colorPicker.addEventListener('change', onChange, false)
+    return () => colorPicker.removeEventListener('change', onChange, false)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return pug`
+    input(
+      ref=pickerRef
+      type='color'
+      style={
+        visibility: 'hidden',
+        position: 'absolute',
+        alignSelf: 'center'
+      }
+    )
+  `
+}
+
+export default observer(Picker)