open-index/open-npm huggingface dataset:
npm package: @premise/plugin-dynamic-pick-extension
Description: Dynamic Data Form Extension (Frontend and Backend Plugins)
Author: Premise
Latest version: 0.2.2

# dynamic-pick-extension

Welcome to the dynamic-pick-extension plugin! This plugin is a [Custom Field Extension](https://backstage.io/docs/features/software-templates/writing-custom-field-extensions) that allow you to create `<Select>` components that fetches data dynamically from an endpoint. This can be used together with the `form-data-backend` plugin to write custom logic to fill the field.

## Installation

```
cd packages/app/
yarn add @premise/plugin-dynamic-pick-extension
```

## Configuration
Add the import to your `packages/app/src/App.tsx` on the frontend package of your backstage instance:

```js
import { DynamicPickFieldExtension } from '@premise/plugin-dynamic-pick-extension';
import { ScaffolderFieldExtensions } from '@backstage/plugin-scaffolder-react';
```

Then add the imported field extension as a child of `ScaffolderFieldExtensions` inside `Route`

```js
<Route path="/create" element={<ScaffolderPage />}>
  <ScaffolderFieldExtensions>
    <DynamicPickFieldExtension />
  </ScaffolderFieldExtensions>
</Route>
```

You should now see the custom filed `DynamicPickExtension` clicking "Custom field explored" here `http://localhost:3000/create/edit`.

## Usage
To use the extension on a [Backstage Template Action](https://backstage.io/docs/features/software-templates/writing-templates) just add the `ui-field` and `ui-options` fields to the parameter

### Basic usage:
```yaml
parameters:
    - category:
        title: Category
        type: string
        ui:field: DynamicPickExtension
        ui:options:
            # IMPORTANT: The endpoint needs to return a JSON array of strings.
            external_data: https://dummyjson.com/products/categories
```

### Using the `form-data-backend` plugin:

```yaml
parameters:
    - team:
        title: Github Team to add as admin of the repository
        type: string
        ui:field: DynamicPickExtension
        ui:options:
            # This is a provider added on the form-data-backend plugin
            form_data: github/teams
```

### Options
`no_options_text``: string
    - Text to show when no options are available
    - Default: "No options"

```yaml
parameters:
    - team:
        title: Github Team to add as admin of the repository
        type: string
        ui:field: DynamicPickExtension
        ui:options:
            # This is a provider added on the form-data-backend plugin
            form_data: github/teams
            no_options_text: "No teams available"
```
npm package: @premise/plugin-form-data-backend
Description: Dynamic Data Form Extension (Frontend and Backend Plugins)
Author: Premise
Latest version: 0.0.2

# form-data

Welcome to the form-data backend plugin! This plugin is a [Backstage Backend Plugin](https://backstage.io/docs/plugins/backend-plugin) that allow you to write custom providers to add custom logic and build the data to be shown on the `dynamic-field-extension` for example for APIs that require authentication or to parse data that doesn't come on the required JSON Array String format.

## Installation

```
cd packages/backend/
yarn add @premise/plugin-form-data-backend
```

## Configuration
Create a `form-data.ts` file under `packages/backend/src/plugins` with the following content:
```ts
import { createRouter } from '@premise/plugin-form-data-backend';
import { Router } from 'express';
import { PluginEnvironment } from '../types';
import { exampleRouter } from '../providers';

export default async function createPlugin(
  env: PluginEnvironment,
): Promise<Router> {
  return await createRouter(
    {
      logger: env.logger,
      config: env.config,
    },
    [
      {
        path: '/example',
        router: exampleRouter,
      }
    ],
  );
}
```

Create a `providers` folder under `packages/backend/src` containing all of your custom providers for example:

`example.ts`
```ts
import express from 'express';
import Router from 'express-promise-router';
import { RouterOptions } from '@premise/plugin-form-data-backend';

export async function exampleRouter(
  options: RouterOptions,
): Promise<express.Router> {
  const { logger } = options;

  const router = Router();
  
  // You can add in here all of the endpoints you want   
  router.get('/ping', async (_, response) => {
    logger.info('Pong');
    response.json(['pong']);
  });
  
  return router;
}
```

Then under `packages/backend/src/index.ts` import the plugin:
```ts
import formData from './plugins/form-data';
// ...
const formDataEnv = useHotMemoize(module, () => createEnv('form-data'));
// ...
apiRouter.use('/form-data', await formData(formDataEnv));
```

## Usage with dynamic-pick-extension
```yaml
parameters:
    - example:
        title: Example
        type: string
        ui:field: DynamicPickExtension
        ui:options:
            # This is a provider added on the form-data-backend plugin
            form_data: example/ping
```

## Contributing
You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
It is only meant for local development, and the setup for it can be found inside the [/dev](/dev) directory.
npm package: @premitive/component
Description: React re useable component
Author: Cmion
Latest version: 1.0.0-beta.1

# Getting Started with Create React App

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `yarn start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `yarn test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `yarn build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `yarn eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).