@startupjs-ui/link 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/link
+
+
+
+
+
+## [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))
+* **link:** refactor Link component ([2729a36](https://github.com/startupjs/startupjs-ui/commit/2729a36d48b7930a3182c0c69070541e1bd2cf8c))

package/README.mdx

@@ -0,0 +1,148 @@
+import Link, { _PropsJsonSchema as LinkPropsJsonSchema } from './index'
+import Br from '@startupjs-ui/br'
+import Button from '@startupjs-ui/button'
+import Div from '@startupjs-ui/div'
+import Rating from '@startupjs-ui/rating'
+import { u } from 'startupjs'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# Link
+
+Link allows to navigate of the app and customize anchors.
+
+```jsx
+import { Link } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+return (
+  <Link to='/docs/Card'>
+    Card
+  </Link>
+)
+```
+
+## Different display
+
+There are two options `inline` and `block` of the `display` property. It is detected automatically based on the type of `children`, if not specified. When type of `children` is string it `inline` and `block` otherwise. Depending on the `display` property, component has a different appearance.
+
+```jsx example
+return (
+  <Div>
+    <Link to='/docs/Card'>
+      Card
+    </Link>
+    <Br />
+    <Link to='/docs/Rating'>
+      <Rating value={4.5} readonly />
+    </Link>
+  </Div>
+)
+```
+
+## Colors
+
+To change link color pass the property `color` (works only when `display` value is `inline`).
+
+```jsx example
+return (
+  <Link
+    to='/docs/Card'
+    color='primary'
+  >
+    Card
+  </Link>
+)
+```
+
+## Bold link
+
+To make link text bold pass the property `bold` to component.
+
+```jsx example
+return (
+  <Link to='/docs/Card' bold>
+    Card
+  </Link>
+)
+```
+
+## Italic link
+
+To make link text italic pass the property `italic` to component.
+
+```jsx example
+return (
+  <Link to='/docs/Card' italic>
+    Card
+  </Link>
+)
+```
+
+## Hover style
+
+You can change hover style like in [Div component](/docs/Div) by passing `variant='highlight'` (works only when `display` value is `block`).
+
+```jsx example
+const style = {
+  height: u(10),
+  backgroundColor: 'white',
+  alignItems: 'center',
+  justifyContent: 'center'
+}
+return (
+  <Link
+    style={style}
+    to='/docs/Rating'
+    variant='highlight'
+  >
+    <Rating value={4.5} readonly />
+  </Link>
+)
+```
+
+## Button as link
+
+Sometimes you want to make button as link. The example below illustrates how to do this correctly.
+
+```jsx example
+return (
+  <Link
+    to='/docs/Card'
+  >
+    <Button color='primary' variant='flat'>Card</Button>
+  </Link>
+)
+```
+
+## Actions
+
+By passing `onPress` handler to component you can run some logic before redirecting.
+
+```jsx example
+function onPress (event) {
+  console.log('Go to alert docs')
+}
+return (
+  <Link
+    color='primary'
+    to='/docs/Alert'
+    onPress={onPress}
+  >
+    Alert docs
+  </Link>
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Link}
+  propsJsonSchema={LinkPropsJsonSchema}
+  props={{
+    to: '#',
+    children: 'StartupJS'
+  }}
+/>

package/index.cssx.styl

@@ -0,0 +1,12 @@
+.root
+  color: var(--color-text-secondary)
+  text-decoration-line underline
+  text-decoration-color @color
+
+  &.primary
+    color var(--color-text-primary)
+    text-decoration-color @color
+
+  &.block
+    display flex
+    text-decoration none

package/index.d.ts

@@ -0,0 +1,36 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode } from 'react';
+import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { type DivProps } from '@startupjs-ui/div';
+import './index.cssx.styl';
+declare const _default: import("react").ComponentType<LinkProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface LinkProps extends Omit<DivProps, 'style'> {
+    /** Custom styles applied to the root view */
+    style?: StyleProp<TextStyle | ViewStyle>;
+    /** Content rendered inside Link */
+    children?: ReactNode;
+    /** Link target path or URL */
+    to?: string;
+    /** Alias for `to` */
+    href?: string;
+    /** Use router push instead of navigate */
+    push?: boolean;
+    /** Replace current history entry instead of pushing */
+    replace?: boolean;
+    /** Display mode @default auto-detected */
+    display?: 'inline' | 'block';
+    /** Color variant for inline links @default 'default' */
+    color?: 'default' | 'primary';
+    /** Theme name used for styling */
+    theme?: string;
+    /** Render text in bold style when inline @default false */
+    bold?: boolean;
+    /** Render text in italic style when inline @default false */
+    italic?: boolean;
+    /** onPress handler */
+    onPress?: (event: any) => void;
+}

package/index.tsx

@@ -0,0 +1,142 @@
+import { Children, cloneElement, type ReactNode } from 'react'
+import { Linking, Platform, type StyleProp, type TextStyle, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import useRouter from 'startupjs/useRouter'
+import { themed } from '@startupjs-ui/core'
+import Button from '@startupjs-ui/button'
+import Div, { type DivProps } from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import './index.cssx.styl'
+
+const isWeb = Platform.OS === 'web'
+const EXTERNAL_LINK_REGEXP = /^(https?:\/\/|\/\/)/i
+
+export default observer(themed('Link', Link))
+
+export const _PropsJsonSchema = {/* LinkProps */} // used in docs generation
+export interface LinkProps extends Omit<DivProps, 'style'> {
+  /** Custom styles applied to the root view */
+  style?: StyleProp<TextStyle | ViewStyle>
+  /** Content rendered inside Link */
+  children?: ReactNode
+  /** Link target path or URL */
+  to?: string
+  /** Alias for `to` */
+  href?: string
+  /** Use router push instead of navigate */
+  push?: boolean
+  /** Replace current history entry instead of pushing */
+  replace?: boolean
+  /** Display mode @default auto-detected */
+  display?: 'inline' | 'block'
+  /** Color variant for inline links @default 'default' */
+  color?: 'default' | 'primary'
+  /** Theme name used for styling */
+  theme?: string
+  /** Render text in bold style when inline @default false */
+  bold?: boolean
+  /** Render text in italic style when inline @default false */
+  italic?: boolean
+  /** onPress handler */
+  onPress?: (event: any) => void
+}
+
+function Link ({
+  style,
+  to,
+  href,
+  color = 'default',
+  theme,
+  display,
+  push,
+  replace = false,
+  children,
+  onPress,
+  ...restProps
+}: LinkProps): ReactNode {
+  let bold = restProps.bold
+  let italic = restProps.italic
+  if (bold == null) bold = false
+  if (italic == null) italic = false
+  restProps.bold = bold
+  restProps.italic = italic
+
+  let target = to ?? ''
+  if (href) target = href
+
+  let resolvedDisplay = display
+  if (!resolvedDisplay) resolvedDisplay = typeof children === 'string' ? 'inline' : 'block'
+
+  const isBlock = resolvedDisplay === 'block'
+  const Component = isBlock ? Div : Span
+  const extraProps: Record<string, any> = { accessibilityRole: 'link', onPress: handlePress }
+  const {
+    navigate: routerNavigate,
+    push: routerPush,
+    replace: routerReplace,
+    usePathname
+  } = useRouter()
+
+  const pathname = usePathname()
+
+  if (isWeb) {
+    let hrefValue = target ?? ''
+    if (!EXTERNAL_LINK_REGEXP.test(hrefValue) && !/^[/?#]/.test(hrefValue)) {
+      let p = pathname
+      p = p.replace(/#.*$/, '')
+      p = p.replace(/\?.*$/, '')
+      p = p.replace(/\/$/, '')
+      hrefValue = hrefValue.replace(/^\//, '')
+      hrefValue = hrefValue.replace(/\/$/, '')
+      hrefValue = p + '/' + hrefValue
+    }
+    extraProps.href = hrefValue
+  }
+
+  function handlePress (event: any) {
+    if (onPress) onPress(event)
+
+    if (!event.defaultPrevented) {
+      if (isWeb) {
+        if (isModifiedEvent(event)) return
+        event.preventDefault()
+      }
+
+      if (EXTERNAL_LINK_REGEXP.test(target ?? '')) {
+        isWeb
+          ? window.open(target, '_blank')
+          : Linking.openURL(target ?? '')
+      } else {
+        let method
+        if (push) method = routerPush
+        else if (replace) method = routerReplace
+        else method = routerNavigate
+        method(target)
+      }
+    }
+  }
+
+  if (isBlock) {
+    try {
+      Children.only(children as any)
+      if ((children as any)?.props?.originalType === Button || (children as any)?.type === Button) {
+        return cloneElement(children as any, { style, ...restProps, ...extraProps })
+      }
+    } catch (e) {
+      // ignore errors when children contains multiple elements
+    }
+  }
+
+  return pug`
+    Component.root(
+      style=style
+      styleName=[theme, color, resolvedDisplay]
+      ...restProps
+      ...extraProps
+    )= children
+  `
+}
+
+function isModifiedEvent (event: any) {
+  return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
+}

package/package.json

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