finch

A React component library for Bluesky beamlines.

To view components in your browser and see full documentation check out our storybook library.

Installation

Once you have your own React app setup, install finch in the root project directory with:

npm install @blueskyproject/finch

Example usage:

//App.tsx
import { Tiled } from '@blueskyproject/finch';
import '@blueskyproject/finch/style.css';

function App() {
  return (
    <Tiled tiledBaseUrl='http://customUrl:port/api/v1' />
  )
}

You will only need to import '@blueskyproject/finch/style.css' once, so long as it is imported inside a component that is high enough in the React tree to include all finch components.

Hint: To quickly check the props that a component takes on typescript apps, press 'ctrl+space' when clicked inside a component.

Alternative Installation - Clone This Repo

Instead of installing Finch into your existing React app, you can install this repository directly and get access to preconfigured layouts and pages.

git clone https://github.com/bluesky/finch.git
cd finch
npm install
npm run dev

The app should be running at http://localhost:5173/

Requirements

Components in this library require network access to the Bluesky Queue Server, Tiled, and Ophyd-Websocket. The components are designed to work out of the box with the default ports for each service.

Specific paths/ports can be set at runtime with environment variables, or alternatively passed in as props to components that need them.

For detailed backend setup instructions, see our Backend Setup documentation.

Related Projects

• Queue Server
• Tiled
• Ophyd WebSocket

Contributing

See CONTRIBUTING.md for development and publishing guidelines.