@procore/labs-bid-form-editor NPM | npm.io

4.6.0 • Published 2 years ago

Install

Weekly downloads

-

License

SEE LICENSE IN LI...

Repository

Last release

2 years ago

Bid Form Editor Introduction

Bid Form Editor with React Query API Hooks, and MockAPI

Installation

yarn add @procore/labs-bid-form-editor

Dependencies

@procore/core-react and react are listed as external peer dependencies. The package will not bundle the code, and requires the app client to provide it as a dependency. The external peer dep is to assure React Context is consistent in a client's React tree, the child consumers can reference the correct parent provider. If the package uses latest features or bug fixes and a new minimum version of core-react is required, it should be considered a breaking change as the peer dependency version must be met.

React Query Provider is required

Note that you must supply a React Query QueryClientProvider see for details https://react-query.tanstack.com/reference/QueryClientProvider

A zero config provider is exported from this package that can also be used, simply import and wrap a parent componet with it

import { ReactQueryProvider } from '@procore/labs-bid-form-editor'

<ReactQueryProvider>
  <NewBidForm />
</ReactQueryProvider>

Usage

import { useBidForms } from '@procore/labs-bid-form-editor';

const BidForms = () => {
  const { isLoading, data } = useBidForms({
    projectId: '1',
    bidPackageId: '2',
  });
  if (isLoading) {
    return <>Loading</>;
  }
  return (
    <Box>
      {data.map((item: IBidFormSkinny) => (
        <h3 key={item.id}>{item.title}</h3>
      ))}
    </Box>
  );
};

const RenderedComponent = () => {
  return(
    <ReactQueryProvider>
      <BidForms />
    </ReactQueryProvider>
  )
}

Mock Server

This package includes a MirageJS mock server. It can be used if the backend is not available. Import mockServer and call it inside any component in your app.

Usage

import { mockServer, useBidForms } from '@procore/labs-bid-form-editor';
mockServer({
  timing?: number;
  logging?: boolean;
});

const BidForms = () => {
  const { isLoading, data } = useBidForms({
    projectId: '1',
    bidPackageId: '2',
  });
  if (isLoading) {
    return <>Loading</>;
  }
  return (
    <Box>
      {data.map((item: IBidFormSkinny) => (
        <h3 key={item.id}>{item.title}</h3>
      ))}
    </Box>
  );
};

const RenderedComponent = () => {
  return(
    <ReactQueryProvider>
      <BidForms />
    </ReactQueryProvider>
  )
}

@procore/labs-comments @procore/labs-content-placeholder @procore/labs-loading-states @procore/labs-toast-alert axios classnames miragejs query-string-parser ramda react-router-dom regenerator-runtime styled-components

@infinitebrahmanuniverse/nolb-_proc @everything-registry/sub-chunk-738

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.2.3-alpha-edit-1

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.2.1-alpha-2-no-I18n-Lazy-React

3 years ago

0.2.1-alpha-2-no-I18n-Lazy

3 years ago

0.2.1-alpha-2-no-I18n

3 years ago

0.2.1-alpha-bidding-routes

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.2.0-alpha21-to-level-routes-3

3 years ago

0.2.0-alpha21-to-level-routes-2

3 years ago

0.2.0-alpha21-to-level-routes-1

3 years ago

0.2.0-alpha21-bidding-routes-2

3 years ago

0.2.0-alpha21-bidding-routes-1

3 years ago

0.2.0-alpha21-bidding-routes

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago