Minoro docs

Appearance

Buttons and Texts ​

Defining Buttons ​

Buttons are used to perform actions in Minoro, they can be used to navigate, call APIs, or perform any other action you can think of.

To define buttons in Minoro, you first need a view in which the button will be displayed. You can then use the defineButton method to create a button within that view.

Let's create a very simple view with a button.

ts
import { defineView } from 'minoro'

export const buttonView = defineView(
  { name: 'View', icon: 'lucide:info' },
  (view) => {
    view.defineButton({
      label: 'Trigger deployment',
      action: async () => {
        console.log('Deployment triggered!')
      },
      icon: 'lucide:rocket', // Optional icon for the button
    })
  },
)

Button redirections ​

Once a button action is executed, you can redirect the user to another view using the redirectToView function imported from minoro. This function allows you to specify the view you want to redirect to and pass any necessary parameters (if any).

ts
import { defineView } from 'minoro'

const otherView = defineView({
  name: 'Other View', 
  params: z.object({ param: z.any() }) 
}, /* ... */) 

export const buttonView = defineView(
  { name: 'View', icon: 'lucide:info' },
  (view) => {
    view.defineButton({
      label: 'Trigger deployment',
      action: async () => {
        console.log('Deployment triggered!')
        // if the view accepts no parameters, pass in an empty object
        // return redirectToView(otherView, {})
        return redirectToView(otherView, { param: 123 }) 
      },
      icon: 'lucide:rocket', // Optional icon for the button
    })
  },
)

Button Options ​

ts
type ButtonOptions = {
  label: string
  /**
   * An icon to display in the button in the form of "iconset:icon-name"
   * @see https://icones.js.org/
   */
  icon?: string
  action: () => MaybePromise<ViewRedirection | void>
  type?: 'link' | 'button'
  /**
   * @default true
   */
  showToast?: boolean
  /**
   * When the action is successful, you can specify what the toast (notification) should contain.
   */
  successToast?: {
    title: string
    content: string
  }
  /**
   * You can choose to display an alert before the action is executed.
   * This is useful for actions that can have significant consequences, such as deleting data.
   */
  alert?: {
    title: string
    content: string
  }
  /**
   * Whether to show the button in the view.
   * If not provided, the button will always be shown.
   * @example `show: () => view.getParams()?.postId !== undefined`
   */
  show?: () => MaybePromise<boolean>
}

Defining Texts ​

The most simple of view elements, texts are used to display static content in your views. They support markdown content which is automatically rendered in the admin panel.

To define texts in Minoro, you can use the defineText method within a view. This allows you to display static text or dynamic content based on the view's parameters.

Texts support Markdown formatting, so you can use it to display rich text content.

ts
import { defineView } from 'minoro'

export const textView = defineView(
  { name: 'Text View', icon: 'lucide:text' },
  (view) => {
    view.defineText({
      text: 'This is a **static** text.',
    })

    // You can also define dynamic texts based on view parameters or any other data
    view.defineText({
      text: async () => `Current parameter value: ${view.getParams()?.paramValue}`,
    })
  },
)