sti-antd-package

Table of contents

• Installation
• Components
  • Button
    • Button Group Add
    • Button Group Edit
  • Checkbox
  • Checkbox Group
  • Number Format
  • Radio
  • Select Async
• Context
  • Config
  • Feedback

Installation

npm install sti-antd-package

Components

Button

import { EditOutlined } from "@ant-design/icons"
import React from "react"
import { ButtonComponent } from "sti-antd-package"

return default () => {
  return (
    <>
      <ButtonComponent
        icon={<EditOutlined />}
        variant="solid"
        color="success"
        onClick={() => {
          {/* Your function */}
        }}
      />
    </>
  )
}

Button Group Add

import React from "react"
import { ButtonGroupAddComponent } from "sti-antd-package"

return default () => {
  return (
    <>
      <ButtonGroupAddComponent />
    </>
  )
}

Button Group Edit

import React, { useState } from "react"
import { ButtonGroupEditComponent } from "sti-antd-package"

return default () => {
  const [editing, setEditing] = useState(false)

  return (
    <>
      <ButtonGroupEditComponent
        editing={editing}
        setEditing={setEditing}
      />
    </>
  )
}

You can add formColLayout to match with Form layout

import React, { useState } from "react"
import { ButtonGroupEditComponent, Form, formColLayout } from "sti-antd-package"

return default () => {
  const [editing, setEditing] = useState(false)

  return (
    <>
      <Form {...formColLayout.default}>
        <ButtonGroupAddComponent
          formColLayout={formColLayout.default}
        />
        <ButtonGroupEditComponent
          formColLayout={formColLayout.default}
          editing={editing}
          setEditing={setEditing}
        />
      </Form>
    </>
  )
}

Checkbox

import React from "react"
import { CheckboxComponent } from "sti-antd-package"

return default () => {
  return (
    <>
      <CheckboxComponent
        name="checkbox"
        label="Checkbox"
      >
        Checkbox
      </CheckboxComponent>
    </>
  )
}

Checkbox Group

import React from "react"
import { CheckboxGroupComponent } from "sti-antd-package"

return default () => {
  return (
    <>
      <CheckboxGroupComponent
        name="checkbox"
        label="Checkbox"
        options={[
          {
            value: 'value1',
            label: 'Value 1',
          },
          {
            value: 'value2',
            label: 'Value 2',
          },
        ]}
      />
    </>
  )
}

Number Format

import React from "react"
import { NumberFormatComponent } from "sti-antd-package"

export default () => {
  return (
    <>
      <NumberFormatComponent name="number" label="Number" />
    </>
  )
}

Remember to wrap NumberFormatComponent using Form from "sti-antd-package" to enable antd Form.Item rules

import React from "react"
import { formColLayout, Form, NumberFormatComponent } from "sti-antd-package"

export default () => {
  const [form] = Form.useForm()

  return (
    <>
      <Form {...formColLayout.default} form={form}>
        <NumberFormatComponent
          name="number"
          label="Number"
          required
          ruleMin={1}
          ruleMax={1000}
        />
      </Form>
    </>
  )
}

Radio

import React from "react"
import { RadioComponent } from "sti-antd-package"

export default () => {
  return (
    <>
      <RadioComponent
        name="radio"
        label="Radio"
        optionType="button"
        buttonStyle="solid"
        options={[
          {
            value: "val1",
            label: "Value 1",
          },
          {
            value: "val2",
            label: "Value 2",
          },
        ]}
      />
    </>
  )
}

Select Async

import axios from "axios"
import React from "react"
import { selectAsync, SelectAsyncComponent } from "sti-antd-package"

return default () => {
  const [fetchDataList] = selectAsync({
    format: {
      value: 'id',
      label: 'name',
    },
    request: search => axios.get('https://link-to-backend.com/api/data', { q: search })
  })

  return (
    <>
      <SelectAsyncComponent
        label="Data"
        name="data"
        required
        ruleType="integer"
        fetchOptions={fetchDataList}
      />
    </>
  )
}

Context

Config

import App from "./App"
import React, { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { ConfigProvider } from "sti-antd-package"

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ConfigProvider linkType="react-router" trailing={2}>
      <App />
    </ConfigProvider>
  </StrictMode>
)

Feedback

import App from "./App"
import React, { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { FeedbackProvider } from "sti-antd-package"

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <FeedbackProvider>
      <App />
    </FeedbackProvider>
  </StrictMode>
)

Add FeedbackProvider at root app to get access { messageApi, modalApi, notificationApi, setLoadingFullscreen }

import { EditOutlined } from "@ant-design/icons"
import { Space } from "antd"
import React from "react"
import { ButtonComponent, useFeedback } from "sti-antd-package"

return default () => {
  const { messageApi, modalApi, notificationApi, setLoadingFullscreen } = useFeedback()

  return (
    <>
      <Space>
        <ButtonComponent
          variant="solid"
          color="success"
          onClick={() => {
            messageApi?.info({
              content: 'Message Info',
            })
          }}
        >
          Message
        </ButtonComponent>
        <ButtonComponent
          variant="solid"
          color="success"
          onClick={() => {
            modalApi?.info({
              title: 'Modal Info',
            })
          }}
        >
          Modal
        </ButtonComponent>
        <ButtonComponent
          variant="solid"
          color="success"
          onClick={() => {
            notificationApi?.info({
              message: 'Notification Info',
            })
          }}
        >
          Notification
        </ButtonComponent>
        <ButtonComponent
          variant="solid"
          color="success"
          onClick={() => {
            setLoadingFullscreen?.(true)
            setTimeout(() => {
              setLoadingFullscreen?.(false)
            }, 1000)
          }}
        >
          Loading Fullscreen
        </ButtonComponent>
      </Space>
    </>
  )
}