@startupjs-ui/breadcrumbs 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/breadcrumbs
+
+
+
+
+
+## [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))
+* **breadcrumbs:** refactor Breadcrumbs component ([233206d](https://github.com/startupjs/startupjs-ui/commit/233206da7306cf8cc0e61e3f55717f326d5ee57c))

package/README.mdx

@@ -0,0 +1,185 @@
+import Breadcrumbs, { _PropsJsonSchema as BreadcrumbsPropsJsonSchema } from './index'
+import Br from '@startupjs-ui/br'
+import Div from '@startupjs-ui/div'
+import { faAnchor, faBook, faGift, faHome, faRocket } from '@fortawesome/free-solid-svg-icons'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Breadcrumbs
+Breadcrumbs indicate the current page’s location within a navigational hierarchy and allow users to navigate through the hierarchy.
+
+```jsx
+import { Breadcrumbs } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+return (
+  <Breadcrumbs
+    routes={[
+      {
+        to: '#startupjs',
+        name: 'StartupJs'
+      },
+      {
+        to: '#docs',
+        name: 'Docs'
+      },
+      {
+        to: '#component',
+        name: 'Component'
+      },
+      {
+        to: '#Breadcrumbs',
+        name: 'Breadcrumbs'
+      }
+    ]}
+  />
+)
+```
+
+## Custom Separator
+
+Separator is `/` by default. It can be changed by passing string to `separator` prop.
+
+```jsx example
+return (
+  <Breadcrumbs
+    separator='>'
+    routes={[
+      {
+        to: '#startupjs',
+        name: 'StartupJs'
+      },
+      {
+        to: '#docs',
+        name: 'Docs'
+      },
+      {
+        to: '#component',
+        name: 'Component'
+      },
+      {
+        to: '#Breadcrumbs',
+        name: 'Breadcrumbs'
+      }
+    ]}
+  />
+)
+```
+
+## Icons
+
+Each route object accepts its own icon in `icon` property. Position of icon can be changed by passing `iconPosition` to component (`left` by default).
+
+```jsx example
+return (
+  <Breadcrumbs
+    separator='>'
+    routes={[
+      {
+        to: '#startupjs',
+        name: 'StartupJs',
+        icon: faRocket
+      },
+      {
+        to: '#docs',
+        name: 'Docs',
+        icon: faBook
+      },
+      {
+        to: '#component',
+        name: 'Component',
+        icon: faGift
+      },
+      {
+        to: '#Breadcrumbs',
+        name: 'Breadcrumbs',
+        icon: faAnchor
+      }
+    ]}
+  />
+)
+```
+
+## Sizes
+
+Size is `m` by default. It can be changed by changing `size` prop. Possible values of property can be found in the `Sandbox` section at the bottom of the page.
+
+```jsx example
+return (
+  <Div>
+    <Breadcrumbs
+      size='l'
+      routes={[
+        {
+          to: '#startupjs',
+          name: 'StartupJs'
+        },
+        {
+          to: '#docs',
+          name: 'Docs'
+        },
+        {
+          to: '#component',
+          name: 'Component'
+        },
+        {
+          to: '#Breadcrumbs',
+          name: 'Breadcrumbs'
+        }
+      ]}
+    />
+    <Br />
+    <Breadcrumbs
+      size='s'
+      routes={[
+        {
+          to: '#startupjs',
+          name: 'StartupJs'
+        },
+        {
+          to: '#docs',
+          name: 'Docs'
+        },
+        {
+          to: '#component',
+          name: 'Component'
+        },
+        {
+          to: '#Breadcrumbs',
+          name: 'Breadcrumbs'
+        }
+      ]}
+    />
+  </Div>
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Breadcrumbs}
+  propsJsonSchema={BreadcrumbsPropsJsonSchema}
+  props={{
+    routes: [
+      {
+        icon: faHome,
+        to: '#',
+        name: 'Home'
+      },
+      {
+        to: '#',
+        name: 'Section'
+      },
+      {
+        to: '#',
+        name: 'Page'
+      },
+      {
+        to: '#sandbox',
+        name: 'Sandbox'
+      }
+    ]
+  }}
+/>

package/index.cssx.styl

@@ -0,0 +1,53 @@
+_iconMargin = 0.5u
+
+.iconWrapper
+  &.left
+    &.xs
+    &.s
+    &.m
+      margin-right 0.5u
+
+    &.l
+    &.xl
+    &.xxl
+      margin-right 1u
+
+  &.right
+    &.xs
+    &.s
+    &.m
+      margin-left 0.5u
+
+    &.l
+    &.xl
+    &.xxl
+      margin-left 1u
+
+.item
+  align-items center
+
+.separator
+  margin-left 2px
+  margin-right @margin-left
+  color var(--color-text-description)
+
+.separator,
+.content
+  &.xs
+    font-size 1.25u
+    line-height 1.75u
+
+  &.s
+    font(caption)
+
+  &.m
+    font(body2)
+
+  &.l
+    font(body1)
+
+  &.xl
+    font(h5)
+
+  &.xxl
+    font(h4)

package/index.d.ts

@@ -0,0 +1,32 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import React, { type ReactNode } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import './index.cssx.styl';
+type BreadcrumbsSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+declare const _default: React.ComponentType<BreadcrumbsProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface BreadcrumbRoute {
+    /** Path to navigate to */
+    to?: string;
+    /** Text label of the route */
+    name?: string;
+    /** Icon displayed next to the label */
+    icon?: object | (() => any);
+}
+export interface BreadcrumbsProps {
+    /** Custom styles applied to the root container */
+    style?: StyleProp<ViewStyle>;
+    /** List of breadcrumb routes to render */
+    routes?: BreadcrumbRoute[];
+    /** Separator displayed between routes @default '/' */
+    separator?: string | ReactNode;
+    /** Size preset controlling text and icon dimensions @default 'm' */
+    size?: BreadcrumbsSize;
+    /** Replace the current history entry instead of pushing */
+    replace?: boolean;
+    /** Icon position relative to the label @default 'left' */
+    iconPosition?: 'left' | 'right';
+}

package/index.tsx

@@ -0,0 +1,104 @@
+import React, { type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed, useColors } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Icon from '@startupjs-ui/icon'
+import Link from '@startupjs-ui/link'
+import Span from '@startupjs-ui/span'
+import './index.cssx.styl'
+
+type BreadcrumbsSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'
+
+const DEPRECATED_SIZE_VALUES: BreadcrumbsSize[] = ['xs', 'xl', 'xxl']
+
+export default observer(themed('Breadcrumbs', Breadcrumbs))
+
+export const _PropsJsonSchema = {/* BreadcrumbsProps */}
+
+export interface BreadcrumbRoute {
+  /** Path to navigate to */
+  to?: string
+  /** Text label of the route */
+  name?: string
+  /** Icon displayed next to the label */
+  icon?: object | (() => any)
+}
+
+export interface BreadcrumbsProps {
+  /** Custom styles applied to the root container */
+  style?: StyleProp<ViewStyle>
+  /** List of breadcrumb routes to render */
+  routes?: BreadcrumbRoute[]
+  /** Separator displayed between routes @default '/' */
+  separator?: string | ReactNode
+  /** Size preset controlling text and icon dimensions @default 'm' */
+  size?: BreadcrumbsSize
+  /** Replace the current history entry instead of pushing */
+  replace?: boolean
+  /** Icon position relative to the label @default 'left' */
+  iconPosition?: 'left' | 'right'
+}
+
+function Breadcrumbs ({
+  style,
+  routes = [],
+  separator = '/',
+  size = 'm',
+  replace = false,
+  iconPosition = 'left'
+}: BreadcrumbsProps): ReactNode {
+  if (DEPRECATED_SIZE_VALUES.includes(size)) {
+    console.warn(
+      `[@startupjs/ui] Breadcrumbs: size='${size}' is DEPRECATED, use one of 's', 'm', 'l' instead.`
+    )
+  }
+  const getColor = useColors()
+
+  function renderItem ({
+    icon,
+    color,
+    bold,
+    children
+  }: {
+    icon?: BreadcrumbRoute['icon']
+    color?: string
+    bold?: boolean
+    children?: ReactNode
+  }): ReactNode {
+    const extraStyle = { color }
+    return pug`
+      Div(vAlign='center' reverse=iconPosition === 'right' row)
+        if icon
+          Div.iconWrapper(styleName=[size, iconPosition])
+            Icon(style=extraStyle icon=icon size=size)
+        Span.content(
+          style=extraStyle
+          styleName=[size]
+          bold=bold
+        )= children
+    `
+  }
+
+  return pug`
+    Div(style=style wrap row)
+      each route, index in routes
+        - const { name, icon, to } = route
+        - const isLastRoute = index === routes.length - 1
+        React.Fragment(key=index)
+          if isLastRoute
+            = renderItem({ icon, color: getColor('text-secondary'), bold: true, children: name })
+          else
+            Div.item(row)
+              Link(
+                replace=replace
+                to=to
+              )
+                = renderItem({ icon, color: getColor('text-description'), children: name })
+              if typeof separator === 'string'
+                Span.separator(styleName=[size])
+                  | &nbsp#{separator}&nbsp
+              else
+                = separator
+  `
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@startupjs-ui/breadcrumbs",
+  "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/link": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}