open-index/open-npm huggingface dataset:
npm package: @livespark/action-sdk
Description: SDK client-side pour actions LiveSpark (iframe postMessage)
Latest version: 0.1.0

# @livespark/action-sdk

SDK léger pour plugins/action LiveSpark exécutés dans une iframe.

## But

- Aucun appel HTTP requis.
- Le runtime parent envoie déjà tous les événements live + configs via `postMessage`.
- Cette lib simplifie l'écoute des messages, le contexte et les helpers.

## Installation (plus tard, npm)

```bash
npm i @livespark/action-sdk
```

## Utilisation

```ts
import {
  createActionSdk,
  shouldRunOnlyNewFollowers,
} from "@livespark/action-sdk";

const sdk = createActionSdk({
  // true par défaut: loggue uniquement quand triggerConfig change
  logTriggerConfigChanges: true,
  onInit(context) {
    console.log("INIT", context.initConfig);
  },
  onEvent(event, context) {
    // Filtrage dans le plugin (pas dans le runtime)
    if (
      !shouldRunOnlyNewFollowers(
        event,
        context.triggerConfig,
        event.eventType,
      )
    ) {
      return;
    }

    // logique action
    console.log(
      "EVENT",
      event.eventType,
      event.data,
    );
  },
});

// facultatif
// sdk.emit({ status: "done" });
// sdk.destroy();
```

Si tu veux couper les logs:

```ts
createActionSdk({
  logTriggerConfigChanges: false,
  onEvent(event, context) {
    // ...
  },
});
```

## Messages entrants attendus

### PLUGIN_INIT

```ts
{
  type: "PLUGIN_INIT",
  config: Record<string, unknown>,
  instanceId: string,
  timestamp: number
}
```

### TRIGGER_EVENT

```ts
{
  type: "TRIGGER_EVENT",
  timestamp: number,
  event: {
    eventType: string,
    data: unknown,
    timestamp: string
  },
  trigger?: unknown,
  triggerConfig: Record<string, unknown>,
  automation?: unknown,
  action?: unknown
}
```

## Développement local du package

```bash
cd plugins/action-sdk
npm install
npm run build
```

## Exemple minimal local

Un exemple prêt à tester est disponible dans [plugins/action-sdk/examples/minimal-action](plugins/action-sdk/examples/minimal-action).

### 1) Build du SDK

```bash
cd plugins/action-sdk
npm run build
```

Le build copie automatiquement le bundle SDK dans `examples/minimal-action/dist`.

### 2) Servir l'exemple

Depuis le dossier `plugins/action-sdk/examples/minimal-action`, lance un serveur statique (au choix):

```bash
npx serve . -l 5174
```

ou

```bash
npx http-server . -p 5174
```

### 3) Dans le backoffice plugin dev

Renseigne l'URL de dev avec:

```text
http://localhost:5174
```

Le runtime chargera automatiquement `index.html`.

## Publication npm plus tard

```bash
npm version patch
npm publish --access public
```
npm package: @livestd/react-accordion-control
Description: base accordion component
Author: Dmitry Rtishchev @livestd
Latest version: 1.0.4

# react-render-counter
Basic control accordion component

## Installation
```
npm install --save @livestd/react-accordion-control
```

## Usage


you can use custom component for action button and content container

```js
import Accordion, { ControllerPropsRequired, ContainerPropsRequired } from '@livestd/react-accordion-control';

const AccordionCustomController = ({ open, onClick }: ControllerPropsRequired) => (
  <div className={`${open && s.opened}`} onClick={onClick}>Expand</div>
);

const AccordionCostomContainer = ({ open, children }: ContainerPropsRequired) => (
  <div className={`${open && s.opened}`}>{children}</div>;
);

export default () => (
  <Accordion
    title="title"
    controller=AccordionCustomController
    container=AccordionCostomContainer
    children="content"
   />
)
```
npm package: @livestd/react-control-group
Description: Basic react control group component (like a checkboxes or radio inputs group)
Author: Dmitry Rtishchev @livestd
Latest version: 1.0.3

[![NPM](https://img.shields.io/npm/v/@livestd/react-control-group.svg)](https://www.npmjs.com/package/@livestd/react-control-group)

Basic react control group component (like a checkboxes or radio inputs).
Can be used for single or multiple selection
## Installation
```
npm install --save @livestd/react-control-group
```

## types

```js
interface ControlRequiredProps<T> {
  active?: boolean;
  children?: T;
}

type valueKey = string | number | symbol;

interface Props<K extends valueKey, T, P extends ControlRequiredProps<T>>
```

## Props

- `component: React.ComponentType<P>` - component to render for the each element
- `itemClassName?: string` - apply a className to the component wrapper
- `values: Record<K, T> | T[]` - Record or array of values that may includes any type
- `active?: K | K[]` - active elements by default
- `componentProps?: P` - default props for the component
- `onChange?: (active: K[]) => void` - subscribe to change events
- `radio?: boolean` - allow the user to select multiple values. Is `false` by default
  
## Usage

```js
import ControlGroup, { ControlRequiredProps } from './ControlGroup';

// define component for the elements
// ControlRequiredProps contains active flag (boolean)
// and children - content of current element
const ControlNode = ({ children, active }: ControlRequiredProps<string>) => {
  return (
    <div
      style={{
        border: '1px solid black',
        background: active ? '#000' : '#FFF'
      }}
    >
      {children}
    </div>
  );
};

const CheckboxesComponent = () => (
  <ControlGroup
    // elements can be any type which your ControlNode can use 
    values={['a', 'b', 'c']}
    component={ControlNode}
    // onChange hook calls with array of actual choose
    // in case of array it would be an indexes of elements
    onChange={(v: number[]) => console.log(v)}
  />
)

// also you can use typed Record as values

type KeyType = 'a' | 'b' | 'c';

type ValueType = {
  id: number;
  name: string;
}

const RecordValues: Record<KeyType, ValueType> = {
  a: { id: 1, name: 'first' },
  b: { id: 2, name: 'second' },
  c: { id: 3, name: 'third' },
};

const ItemComponent = ({ children, active }: ControlRequiredProps<ValueType>) => (
  <div
  style={{
    border: '1px solid black',
    background: active ? '#000' : '#FFF'
  }}
  >
    {children && children.name}
  </div>
);

const RadioComponent = () => (
  <ControlGroup
    radio
    values={RecordValues}
    component={ControlItem}
    onChange={(v: KeyType[]) => console.log(v.map(i => RecordValues[i].id))}
  />
)
```
npm package: @livestd/react-render-counter
Description: simple render counter with react hook
Author: Dmitry Rtishchev @livestd
Latest version: 1.0.2

# react-render-counter
Simple counter based on react-hooks

## Installation
```
npm install --save @livestd/react-render-counter
```

## Usage

```js
import Counter from '@livestd/react-render-counter'

export default () => (<Counter />)
```
npm package: @livestd/react-router-utils
Description: Utils and hooks for react-router
Author: Dmitry Rtishchev @livestd
Latest version: 1.0.0

[![NPM](https://img.shields.io/npm/v/@livestd/react-router-utils.svg)](https://www.npmjs.com/package/@livestd/react-router-utils)

Utils and hooks for react-router

## Installation
```js
npm install --save @livestd/react-router-utils
```

# useQuery

```js
interface Query {
  // properties
  params: Record<string, any>;
  // methods
  push: (params: {}) => void;
  replace: (params: {}) => void; // replace on history
}

// type
useQuery = (): Query;
```

## Usage

```js
import { useQuery } from '@livestd/react-router-utils';

const Component = () => {
  const {params, push} = useQuery();
  
  useEffect(() => console.log(params));
  
  const pushParam = () => {
    push({param: 1});
  };
  
  return (<button onClick={pushParam} />)
}
```
npm package: @livestd/react-ticker-hook
Description: Simple ticker model for pooling requests.
Author: Dmitry Rtishchev @livestd
Latest version: 1.1.0

[![NPM](https://img.shields.io/npm/v/@livestd/react-ticker-hook.svg)](https://www.npmjs.com/package/@livestd/react-ticker-hook)

Simple ticker model for pooling requests and other timing functions.
Each component can subscribe for some ticker event, that defined previously.
If the ticker event have not listeners, he does not work.

## Installation
```
npm install --save @livestd/react-ticker-hook
```

## Usage

```js
import Tickers, { useTicker, SubscriberConfig, TickerCallback } from '@livestd/react-ticker-hook';

const IntervalId = 'mainEvent';
const IntervalEvent = () => {
  return "value"
}
const SubscriberId = "id"
// Same events must not be duplicated
_ticker.add({ id: IntervalId, callback: IntervalEvent });

const Component = () => {
  // Let activate ticker only on top of the page
  const [ontop, setOntop] = useState(true);
  const [counter, setCounter] = useState(0);
  const callback = (value) => {
    setCounter(counter + 1);
  };
  // Call main event each 5 seconds
  useTicker(
    {
      tickerId: IntervalId,
      // Id is need if you want to make uniq subscriber
      id: SubscriberId,
      active: ontop,
      // Ticker calls callback by the least interval of subscribers
      interval: 5000,
      // Subscriber callback is need if you wait some response from the ticker event
      callback: callback
    },
    // Update subscriber only when "ontop" is updated
    [ontop]
  );
  return (<>content</>);
} 

```