@startupjs-ui/alert 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/alert
+
+
+
+
+
+## [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))
+* **alert:** refactor Alert component ([cfa59c7](https://github.com/startupjs/startupjs-ui/commit/cfa59c7e0351a082c6820addd8f3610f8d2fbe25))

package/README.mdx

@@ -0,0 +1,195 @@
+import { useState } from 'react'
+import { Sandbox } from '@startupjs-ui/docs'
+import Alert, { _PropsJsonSchema as AlertPropsJsonSchema } from './index'
+import Br from '@startupjs-ui/br'
+import Button from '@startupjs-ui/button'
+import Div from '@startupjs-ui/div'
+import { faFire } from '@fortawesome/free-solid-svg-icons'
+
+# Alert
+
+An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
+
+```jsx
+import { Alert } from 'startupjs-ui'
+```
+
+## Simple example
+```jsx example
+return (
+  <Alert>
+    Message
+  </Alert>
+)
+```
+
+## Variants
+
+The alert offers four severity levels that set a distinctive icon and color: `success`, `info`, `warning`, `error`. You can specify it by passing `variant` property.
+
+```jsx example
+return (
+  <Div>
+    <Alert variant='info'>
+      This is an info alert — check it out!
+    </Alert>
+    <Br />
+    <Alert variant='success'>
+      This is an success alert — check it out!
+    </Alert>
+    <Br />
+    <Alert variant='warning'>
+      This is an warning alert — check it out!
+    </Alert>
+    <Br />
+    <Alert variant='error'>
+      This is an error alert — check it out!
+    </Alert>
+  </Div>
+)
+```
+
+## Title
+
+You can use the `title` property to display the title above the content.
+
+```jsx example
+return (
+  <Div>
+    <Alert
+      variant='info'
+      title='Info'
+    >
+      This is an info alert — check it out!
+    </Alert>
+    <Br />
+    <Alert
+      variant='success'
+      title='Success'
+    >
+      This is an success alert — check it out!
+    </Alert>
+    <Br />
+    <Alert
+      variant='warning'
+      title='Warning'
+    >
+      This is an warning alert — check it out!
+    </Alert>
+    <Br />
+    <Alert
+      variant='error'
+      title='Error'
+    >
+      This is an error alert — check it out!
+    </Alert>
+  </Div>
+)
+```
+
+
+## Icons
+The `icon` property allows you to change the icon at the beginning of the component.
+The `variant` prop defines the corresponding color for the icon.
+
+Setting the `icon` property to `false` will completely remove the icon.
+
+```jsx example
+return (
+  <Div>
+    <Alert
+      icon={faFire}
+      variant='error'
+    >
+      Error alert with custom icon
+    </Alert>
+    <Br />
+    <Alert
+      icon={false}
+      variant='warning'
+    >
+      Warning alert without icon
+    </Alert>
+  </Div>
+)
+```
+
+## Actions
+
+An alert can have an action (`onClose` prop). It is rendered after the message, at the end of the alert.
+
+```jsx example
+const [showFirstAlert, setShowFirstAlert] = useState(true)
+
+return (
+  <Div>
+    {showFirstAlert && <Alert
+      variant='warning'
+      onClose={() => setShowFirstAlert(false)}
+    >
+      Warning alert with default actions
+    </Alert>}
+    <Br />
+    <Button
+      style={{ alignSelf: 'center' }}
+      disabled={showFirstAlert}
+      onPress={() => setShowFirstAlert(true)}
+    >
+      Re-Open
+    </Button>
+  </Div>
+)
+```
+
+The `renderActions` prop can be used to provide an alternative action.
+
+```jsx example
+const [showSecondAlert, setShowSecondAlert] = useState(true)
+
+const renderCustomCloseButton = () => {
+  return (
+    <Button
+      color='success'
+      variant='flat'
+      size='s'
+      onPress={() => setShowSecondAlert(false)}
+    >
+      CLOSE
+    </Button>
+  )
+}
+
+return (
+  <Div>
+    {showSecondAlert && <Alert
+        variant='success'
+        renderActions={renderCustomCloseButton}
+      >
+        Success alert with custom actions
+      </Alert>}
+    <Br />
+    <Button
+      style={{ alignSelf: 'center' }}
+      disabled={showSecondAlert}
+      onPress={() => setShowSecondAlert(true)}
+    >
+      Re-Open
+    </Button>
+  </Div>
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Alert}
+  propsJsonSchema={AlertPropsJsonSchema}
+  extraParams={{
+    icon: {
+      showIconSelect: true
+    }
+  }}
+  props={{
+    children: 'Message content'
+  }}
+/>

package/index.cssx.styl

@@ -0,0 +1,52 @@
+.root
+  padding 1u 2u
+  border-width 1px
+  justify-content space-between
+  radius()
+
+  &.info
+    border-color var(--color-border-primary)
+    background-color var(--color-bg-primary-transparent)
+
+  &.error
+    border-color var(--color-border-error)
+    background-color var(--color-bg-error-transparent)
+
+  &.warning
+    border-color var(--color-border-warning)
+    background-color var(--color-bg-warning-transparent)
+
+  &.success
+    border-color var(--color-border-success)
+    background-color var(--color-bg-success-transparent)
+
+// we align height by actions
+// since info block has height less small button
+.information
+  padding 2px 0
+  flex-shrink 1
+
+.icon
+  flex-shrink 0
+
+  &.info
+    color var(--color-text-primary)
+
+  &.error
+    color var(--color-text-error)
+
+  &.warning
+    color var(--color-text-warning)
+
+  &.success
+    color var(--color-text-success)
+
+.content
+  flex-shrink 1
+
+  &.indent
+    margin-left 1.5u
+
+.actions
+  flex-shrink 0
+  margin-left 2u

package/index.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode } from 'react';
+import { type DivProps } from '@startupjs-ui/div';
+import { type IconProps } from '@startupjs-ui/icon';
+import './index.cssx.styl';
+declare const _default: import("react").ComponentType<AlertProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface AlertProps extends Omit<DivProps, 'variant' | 'style'> {
+    /** Custom styles applied to the root view */
+    style?: DivProps['style'];
+    /** Alert visual style variant @default 'info' */
+    variant?: 'info' | 'error' | 'warning' | 'success';
+    /** Icon definition or toggle. Pass false to hide icon @default true */
+    icon?: boolean | IconProps['icon'];
+    /** Title displayed above message */
+    title?: string;
+    /** Deprecated alias for children @deprecated */
+    label?: string;
+    /** Content rendered inside Alert */
+    children?: ReactNode;
+    /** Custom actions renderer displayed at the end */
+    renderActions?: () => ReactNode;
+    /** Close handler to render default close action */
+    onClose?: () => void;
+}

package/index.tsx

@@ -0,0 +1,95 @@
+import { type ReactNode } from 'react'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div, { type DivProps } from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import Icon, { type IconProps } from '@startupjs-ui/icon'
+import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes'
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons/faCheckCircle'
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle'
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle'
+import './index.cssx.styl'
+
+const ICONS = {
+  info: faInfoCircle,
+  error: faExclamationCircle,
+  warning: faExclamationTriangle,
+  success: faCheckCircle
+}
+
+export default observer(themed('Alert', Alert))
+
+export const _PropsJsonSchema = {/* AlertProps */}
+
+export interface AlertProps extends Omit<DivProps, 'variant' | 'style'> {
+  /** Custom styles applied to the root view */
+  style?: DivProps['style']
+  /** Alert visual style variant @default 'info' */
+  variant?: 'info' | 'error' | 'warning' | 'success'
+  /** Icon definition or toggle. Pass false to hide icon @default true */
+  icon?: boolean | IconProps['icon']
+  /** Title displayed above message */
+  title?: string
+  /** Deprecated alias for children @deprecated */
+  label?: string
+  /** Content rendered inside Alert */
+  children?: ReactNode
+  /** Custom actions renderer displayed at the end */
+  renderActions?: () => ReactNode
+  /** Close handler to render default close action */
+  onClose?: () => void
+}
+
+function Alert ({
+  style,
+  variant = 'info',
+  icon = true,
+  label,
+  title,
+  renderActions,
+  children,
+  onClose,
+  ...props
+}: AlertProps): ReactNode {
+  if (label) {
+    children = label
+    console.warn('[@startupjs/ui] Alert: label is DEPRECATED, use children instead.')
+  }
+
+  return pug`
+    Div.root(
+      style=style
+      vAlign='center'
+      styleName=[variant]
+      row
+      ...props
+    )
+      Div.information(row vAlign='center')
+        if icon
+          Icon.icon(
+            icon=icon === true ? ICONS[variant] : icon
+            size='l'
+            styleName=[variant]
+          )
+        Div.content(styleName={ indent: icon !== false })
+          if title
+            Span(bold)= title
+          if typeof children === 'string'
+            Span= children
+          else if Array.isArray(children) && children.every(item => typeof item === 'string')
+            Span= children.join('')
+          else
+            = children
+      if renderActions
+        Div.actions
+          = renderActions()
+      else if onClose
+        Div.actions(onPress=onClose)
+          Icon.icon(
+            icon=faTimes
+            size='l'
+            styleName=[variant]
+          )
+  `
+}

package/package.json

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