open-index/open-npm huggingface dataset:
npm package: @scuba0624/smartform-components
Description: Collection of smartform components.  Each component is a "dumb" component in that it expects all pertinent information to be provided via `props`.
Author: Kyryl Budnyk
Latest version: 3.3.3

# smartform-components

Collection of smartform components.  Each component is a "dumb" component in that it expects all pertinent information to be provided via `props`.

## Installation

```bash
npm install @wyzerrorg/smartform-components
```

## Development

The easiest way to develop in these components is to `npm link` it to your application.

For example:

```bash
cd smartform-components
npm link
npm run watch

# In another terminal
cd my-app
npm link @wyzerrorg/smartform-components
```

*Note that webpack will have issues resolving a linked repo with peer deps. To fix, add a resolve entry for node_modules.  For more info, see this link:
[http://webpack.github.io/docs/troubleshooting.html#npm-linked-modules-doesn-t-find-their-dependencies](http://webpack.github.io/docs/troubleshooting.html#npm-linked-modules-doesn-t-find-their-dependencies)*




## Provided Smartforms (exported as default)

* `BINARY`
* `BUBBLE`
* `QUADRANT`
* `ORBIT`

### Usage example

```javascript
import smartformComponents from '@wyzerrorg/smartform-components';

class Foo extends React.Component {
  render() {
    const Component = smartformComponents.BUBBLE;
    return (
      <Component />
    );
  }
}

```

## Provided Helpers (named exports)

* `SurveyPowered`
* `SurveySplash`
* `SurveyThankYou`

### Usage example

```javascript
import { SurveySplash } from '@wyzerrorg/smartform-components';

class Foo extends React.Component {
  render() {
    return (
      <SurveySplash />
    );
  }
}

```
npm package: @scubadive/layout
Description: Layout manager for scubadive
Latest version: 2.0.2

# `@scubadive/router`

Router components for scubadive

## Usage

```javascript
import {
  useBrowserHistory,
  renderPage,
  store,
  routerReducer,
  Link,
  PageContext,
  PageProvider,
  PageConsumer,
} from "@scubadive/router";
```

### Functions

#### `useBrowserHistory()`

Listens to events in the browser history.

#### `renderPage(page, routes)`

Return a component from the url of the desired page `page` and the list of routes `routes`.

#### `store(routes)`

`store` is the return of the `createStore` function.
Need a parameter `routes`.

#### `routerReducer(routes)`

`routerReducer` is also available to allow you to combine several reducers with `combinedReducers`.
Need to feed the reducer with the `routes`.

### Components

#### `Link`

`target`:

- `self`: display the `href` page instead of the current one.
- `after`: displays the `href` page after the clicked one.
- `root` (default value): displays the `href` page with all its parents.

```javascript
const PageRed = () => {
  return (
    <RedBlock>
      <Link href="/clients/10" target="root">
        Next page (/clients/10)
      </Link>
      <Link href="/bills" target="after">
        Next page (/bills)
      </Link>
      <Link href="/bills" target="self">
        Next page (/bills)
      </Link>
    </RedBlock>
  );
};
```

#### `PageContext`

`PageProvider` wrapp all pages displayed one by one to allow each child to know where they are.

```javascript
<PageProvider value={page} key={page}>
  {React.cloneElement(route.action(), { match })}
</PageProvider>
```

`PageConsumer` can be used to get the context from html content:

```javascript
<PageConsumer>
  {value => /* display something based on the context value */}
<PageConsumer/>
```

Or from javascript with the react hook:

```javascript
const page = useContext(PageContext);
```

## Full example

- `routes.js`

```javascript
import React from "react";
import { PageBlue, PageRed, PageBlack, PageGreen } from "./pages";

const routes = [
  {
    path: "/",
    action: () => <PageBlue />,
  },
  {
    path: "/clients",
    action: () => <PageRed />,
    parent: "/",
  },
  {
    path: "/clients/:id",
    action: () => <PageBlack />,
    parent: "/clients",
  },
  {
    path: "/bills",
    action: () => <PageGreen />,
    parent: "/clients/:id",
  },
];

export default routes;
```

- `index.js`

```javascript
import { Provider } from "react-redux";
import routes from "routes";
import App from "./app";
import { store } from "@scubadive/router";

const rootEl = document.querySelector(".js-app");

ReactDOM.render(
  <Provider store={store(routes)}>
    <App />
  </Provider>,
  rootEl
);
```

- `app.js`

```javascript
import React from "react";
import { useSelector } from "react-redux";
import routes from "routes";
import { renderPage } from "@scubadive/router";

const App = () => {
  useBrowserHistory();

  const pages = useSelector((state) => state.pages);
  return <>{pages.map((page) => renderPage(page, routes))}</>;
};

export default App;
```
npm package: @scubadive/router
Description: Router components for scubadive
Latest version: 2.0.2

# `@scubadive/router`

Router components for scubadive

## Usage

```javascript
import {
  useBrowserHistory,
  renderPage,
  store,
  routerReducer,
  Link,
  PageContext,
  PageProvider,
  PageConsumer,
} from "@scubadive/router";
```

### Functions

#### `useBrowserHistory()`

Listens to events in the browser history.

#### `renderPage(page, routes)`

Return a component from the url of the desired page `page` and the list of routes `routes`.

#### `store(routes)`

`store` is the return of the `createStore` function.
Need a parameter `routes`.

#### `routerReducer(routes)`

`routerReducer` is also available to allow you to combine several reducers with `combinedReducers`.
Need to feed the reducer with the `routes`.

### Components

#### `Link`

`target`:

- `self`: display the `href` page instead of the current one.
- `after`: displays the `href` page after the clicked one.
- `root` (default value): displays the `href` page with all its parents.

```javascript
const PageRed = () => {
  return (
    <RedBlock>
      <Link href="/clients/10" target="root">
        Next page (/clients/10)
      </Link>
      <Link href="/bills" target="after">
        Next page (/bills)
      </Link>
      <Link href="/bills" target="self">
        Next page (/bills)
      </Link>
    </RedBlock>
  );
};
```

#### `PageContext`

`PageProvider` wrapp all pages displayed one by one to allow each child to know where they are.

```javascript
<PageProvider value={page} key={page}>
  {React.cloneElement(route.action(), { match })}
</PageProvider>
```

`PageConsumer` can be used to get the context from html content:

```javascript
<PageConsumer>
  {value => /* display something based on the context value */}
<PageConsumer/>
```

Or from javascript with the react hook:

```javascript
const page = useContext(PageContext);
```

## Full example

- `routes.js`

```javascript
import React from "react";
import { PageBlue, PageRed, PageBlack, PageGreen } from "./pages";

const routes = [
  {
    path: "/",
    action: () => <PageBlue />,
  },
  {
    path: "/clients",
    action: () => <PageRed />,
    parent: "/",
  },
  {
    path: "/clients/:id",
    action: () => <PageBlack />,
    parent: "/clients",
  },
  {
    path: "/bills",
    action: () => <PageGreen />,
    parent: "/clients/:id",
  },
];

export default routes;
```

- `index.js`

```javascript
import { Provider } from "react-redux";
import routes from "routes";
import App from "./app";
import { store } from "@scubadive/router";

const rootEl = document.querySelector(".js-app");

ReactDOM.render(
  <Provider store={store(routes)}>
    <App />
  </Provider>,
  rootEl
);
```

- `app.js`

```javascript
import React from "react";
import { useSelector } from "react-redux";
import routes from "routes";
import { renderPage } from "@scubadive/router";

const App = () => {
  useBrowserHistory();

  const pages = useSelector((state) => state.pages);
  return <>{pages.map((page) => renderPage(page, routes))}</>;
};

export default App;
```