@startupjs-ui/badge 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# 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/badge
+
+
+
+
+
+## [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))
+* **badge:** refactor Badge component ([91b1b06](https://github.com/startupjs/startupjs-ui/commit/91b1b0623dc14358ad037a607f261289e1a8af9e))
+* **menu:** refactor Menu component. Fix useColors types. ([ffd4671](https://github.com/startupjs/startupjs-ui/commit/ffd46719c308f99d856d8020ebfc070bb479ab28))

package/README.mdx

@@ -0,0 +1,127 @@
+import Badge, { _PropsJsonSchema as BadgePropsJsonSchema } from './index'
+import Div from '@startupjs-ui/div'
+import Icon from '@startupjs-ui/icon'
+import { faThumbsUp, faEnvelope } from '@fortawesome/free-solid-svg-icons'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Badge
+
+Badge is small state descriptors for UI elements.
+
+```js
+import { Badge } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+return (
+  <Badge label='10'>
+    <Icon icon={faEnvelope} size={40} />
+  </Badge>
+)
+```
+
+## Sizes
+
+Badges come in three different sizes: `s`, `m`, and `l`. The `m` size is the default and most frequently used. The other sizes should be used with care so as not to break the hierarchy of importance on the page.
+
+```jsx example
+return (
+  <Div row>
+    <Badge label='16' size='s'>
+      <Icon icon={faEnvelope} size={40} />
+    </Badge>
+    <Badge style={{ marginLeft: 16 }} label='20'>
+      <Icon icon={faEnvelope} size={40} />
+    </Badge>
+    <Badge style={{ marginLeft: 16 }} label='24' size='l'>
+      <Icon icon={faEnvelope} size={40} />
+    </Badge>
+  </Div>
+)
+```
+
+## Variants
+
+There are two types of Badges: `default` and `dot`. `default` it is the most frequently used and the default specified. `dot` turns the badge into a small dot, this can be used as a message that something has changed. If the property is `variant='dot'`, the `size` property will be ignored.
+
+```jsx example
+return (
+  <Div row>
+    <Badge label='10'>
+      <Icon icon={faEnvelope} size={40} />
+    </Badge>
+    <Badge style={{ marginLeft: 16 }} variant='dot'>
+      <Icon icon={faEnvelope} size={40} />
+    </Badge>
+  </Div>
+)
+```
+
+## Colors
+
+Color is `primary` by default. It can be changed by passing color name from the config colors to `color` property. Possible values of property can be found in the `Sandbox` section at the bottom of the page.
+
+```jsx example
+return (
+  <Badge color='error' label='10'>
+    <Icon icon={faEnvelope} size={40}/>
+  </Badge>
+)
+```
+
+## Position
+
+Badge can be in two positions: `top` and `bottom`. **Default value:** `top`.
+
+```jsx example
+return (
+  <Div row>
+    <Badge label='10'>
+      <Icon icon={faEnvelope} size={40} />
+    </Badge>
+    <Badge style={{ marginLeft: 16 }} position='bottom' label='10'>
+      <Icon icon={faEnvelope} size={40} />
+    </Badge>
+  </Div>
+)
+```
+
+## Icons
+
+Icon can be added using `icon` property.
+
+```jsx example
+return (
+  <Badge icon={faThumbsUp} label='10+' color='success'>
+    <Icon icon={faEnvelope} size={40} />
+  </Badge>
+)
+```
+
+## Counter
+
+If `label` property takes a numeric value, then the `max` property can be used to limit the maximum displayed number in the label.
+
+```jsx example
+return (
+  <Badge label={1000} max={100}>
+    <Icon icon={faEnvelope} size={40} />
+  </Badge>
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Badge}
+  propsJsonSchema={BadgePropsJsonSchema}
+  extraParams={{
+    icon: {
+      showIconSelect: true
+    }
+  }}
+  props={{ children: <Icon icon={faEnvelope} size={40} />, label: 100 }}
+  noScroll
+/>

package/index.cssx.styl

@@ -0,0 +1,57 @@
+_sizes = {
+  s: 2u,
+  m: 2.5u,
+  l: 3u,
+  dot: 1u
+}
+
+.root
+  position relative
+  align-self flex-start
+
+.badge
+  position absolute
+  justify-content center
+  align-items center
+  border-width 1px
+  border-color var(--color-border-main-strong)
+  opacity 0
+
+  &.visible
+    opacity 1
+
+  for size, unit in _sizes
+    _halfSize = unit / 2
+
+    &.{size}
+      min-width unit
+      height unit
+      border-radius _halfSize
+
+      &.top
+        top -(_halfSize)
+      &.bottom
+        bottom -(_halfSize)
+
+  &.hasLabel
+    &.s
+    &.m
+      padding 0 0.5u
+    &.l
+      padding 0 1u
+
+.label
+  &.s
+    font-size 1.25u
+    line-height 1.5u
+
+  &.m
+    font-size 1.5u
+    line-height 2u
+
+  &.l
+    font-size 2u
+    line-height 2.5u
+
+  &.icon
+    margin-left 0.25u

package/index.d.ts

@@ -0,0 +1,31 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import './index.cssx.styl';
+declare const _default: import("react").ComponentType<BadgeProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface BadgeProps {
+    /** Custom styles applied to the root view */
+    style?: StyleProp<ViewStyle>;
+    /** Custom styles applied to the badge view */
+    badgeStyle?: StyleProp<ViewStyle>;
+    /** Content rendered inside Badge */
+    children?: ReactNode;
+    /** Background color name @default 'primary' */
+    color?: string;
+    /** Label content rendered inside badge */
+    label?: string | number;
+    /** Icon displayed inside badge */
+    icon?: object;
+    /** Badge vertical position @default 'top' */
+    position?: 'top' | 'bottom';
+    /** Badge size preset @default 'm' */
+    size?: 's' | 'm' | 'l';
+    /** Badge appearance variant @default 'default' */
+    variant?: 'default' | 'dot';
+    /** Maximum number to display before adding "+" */
+    max?: number;
+}

package/index.tsx

@@ -0,0 +1,106 @@
+import { useMemo, useState, type ReactNode } from 'react'
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { Colors, themed, useColors } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Icon from '@startupjs-ui/icon'
+import Span from '@startupjs-ui/span'
+import './index.cssx.styl'
+
+const ICON_SIZES = {
+  s: 'xs',
+  m: 's',
+  l: 'm'
+}
+
+export default observer(themed('Badge', Badge))
+
+export const _PropsJsonSchema = {/* BadgeProps */}
+
+export interface BadgeProps {
+  /** Custom styles applied to the root view */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles applied to the badge view */
+  badgeStyle?: StyleProp<ViewStyle>
+  /** Content rendered inside Badge */
+  children?: ReactNode
+  /** Background color name @default 'primary' */
+  color?: string
+  /** Label content rendered inside badge */
+  label?: string | number
+  /** Icon displayed inside badge */
+  icon?: object
+  /** Badge vertical position @default 'top' */
+  position?: 'top' | 'bottom'
+  /** Badge size preset @default 'm' */
+  size?: 's' | 'm' | 'l'
+  /** Badge appearance variant @default 'default' */
+  variant?: 'default' | 'dot'
+  /** Maximum number to display before adding "+" */
+  max?: number
+}
+
+function Badge ({
+  style,
+  badgeStyle,
+  children,
+  color = Colors.primary,
+  label,
+  icon,
+  position = 'top',
+  size = 'm',
+  variant = 'default',
+  max
+}: BadgeProps): ReactNode {
+  const [right, setRight] = useState(0)
+  const getColor = useColors()
+
+  badgeStyle = StyleSheet.flatten([
+    { right, backgroundColor: getColor(color) },
+    badgeStyle
+  ]) as StyleProp<ViewStyle>
+
+  const textAndIconColor = getColor(`text-on-${color}`) ?? getColor('text-on-color')
+
+  const hasLabel = useMemo(() => {
+    return variant === 'default'
+      ? typeof label === 'string'
+        ? +label !== 0
+        : !!label
+      : false
+  }, [variant, label])
+
+  function getLabel (label: any, max?: number) {
+    return max && label > max ? max + '+' : label
+  }
+
+  function onLayout (event: any) {
+    const { width } = event.nativeEvent.layout
+    setRight(Math.ceil(width / 2) * -1)
+  }
+
+  return pug`
+    Div.root(style=style)
+      = children
+      if hasLabel || variant === 'dot'
+        Div.badge(
+          row
+          style=badgeStyle
+          onLayout=onLayout
+          styleName=[
+            size,
+            variant,
+            position,
+            { hasLabel, visible: !!right }
+          ]
+        )
+          if variant === 'default'
+            if icon
+              Icon(
+                style={ color: textAndIconColor }
+                icon=icon
+                size=ICON_SIZES[size]
+              )
+            Span.label(style={ color: textAndIconColor } styleName=[size, { icon }])= getLabel(label, max)
+  `
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@startupjs-ui/badge",
+  "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"
+}