kampmann-calcgateway-frontend

Welcome to the Kampmann CalcGateway Frontend! This package provides the frontend interface for the Kampmann CalcGateway API. For comprehensive documentation, please visit our documentation page.

Installation

npm install kampmann-calcgateway-frontend

Basic Usage

import {CalcGatewayForm, useGetUIControls} from 'kampmann-calcgateway-frontend'
import { useEffect, useState } from 'react'

//Import the styles - these are prefixed classes to avoid conflicts with your own styles
import 'kampmann-calcgateway-frontend/dist/style.css'

function App() {

  //This state is passed as a callback to the CalcGatewayForm component and will store the Request Form result
  const [result, setResult] = useState({})

  //This is the request body that will be used to fetch the UI Controls from the backend
  const reqBody = {
    ProductIds: [],
    ProductGroupIds: [51050],
    ProductFamilyIds: [],
    InterfaceI18n: {
      Language: RequestLanguage.DE,
      Region: RequestRegion.DE,
      UnitSystem: RequestUnitSystem.METRIC,
    },
    CalculationI18n: {
      Language: RequestLanguage.DE,
      Region: RequestRegion.DE,
      UnitSystem: RequestUnitSystem.METRIC,
    }
  }

  //Log the result when it changes
  useEffect(() => {
    console.log(result)
  }, [result])

  const url = "your/custom/url" // please contact us for your custom url

  /* Fetch the UI Controls from the backend using the useGetUIControls hook
  This hook is just a simple wrapper around the fetch API
  You may use your own fetch implementation if you prefer */
  const {loading, error, data} = useGetUIControls(url, reqBody)

  if (loading) return <p>Loading...</p>;
  if (error) {
    console.error(error)
    return <p>Error :(</p>;
  }

  return (
      <CalcGatewayForm UIControls={data} callback={setResult}  />
  );
}

export default App

Dependencies

| Name | Installed version | License type | | :----------------------------------------------------------------------------------- | :---------------- | :------------- | | @emotion/is-prop-valid | 1.4.0 | MIT | | @radix-ui/react-accordion | 1.2.20 | MIT | | @radix-ui/react-checkbox | 1.3.11 | MIT | | @radix-ui/react-dialog | 1.1.23 | MIT | | @radix-ui/react-icons | 1.3.2 | MIT | | @radix-ui/react-label | 2.1.15 | MIT | | @radix-ui/react-select | 2.3.7 | MIT | | @radix-ui/react-slider | 1.4.7 | MIT | | @radix-ui/react-slot | 1.3.3 | MIT | | @radix-ui/react-tabs | 1.1.21 | MIT | | @radix-ui/react-toggle | 1.1.18 | MIT | | @radix-ui/react-tooltip | 1.2.16 | MIT | | class-variance-authority | 0.7.1 | Apache-2.0 | | clsx | 2.1.1 | MIT | | fast-deep-equal | 3.1.3 | MIT | | lucide-react | 0.460.0 | ISC | | mathjs | 15.2.0 | Apache-2.0 | | motion | 12.43.0 | MIT | | next-themes | 0.4.6 | MIT | | pako | 2.2.0 | (MIT AND Zlib) | | postcss-import | 16.2.0 | MIT | | react-icons | 5.7.0 | MIT | | sonner | 1.7.4 | MIT | | tailwind-merge | 2.6.1 | MIT | | tailwindcss-animate | 1.0.7 | MIT | | usehooks-ts | 3.1.1 | MIT |