open-index/open-npm huggingface dataset:
npm package: @freightos/freightwind
Description: FreightWind Design System — icons, constants, and utilities for Freightos applications
Author: Jiries Nasrawi
Latest version: 2.1.1

# @freightos/freightwind

FreightWind Design System — React UI components for Freightos applications.

## Installation

```bash
npm install @freightos/freightwind @freightos/freightwind/icons
```

## Usage

```tsx
import { Button, Alert, Badge } from '@freightos/freightwind';
import '@freightos/freightwind/tokens.css';
```

Components require Tailwind CSS v4 with the FDS design tokens loaded via `tokens.css`.

## Peer Dependencies

- `react` >= 18
- `react-dom` >= 18
- `@freightos/freightwind/icons` >= 1.0.0

## License

MIT
npm package: @freightos/storybook-react-live
Description: react-live decorator for Storybook 6+ | renders story as react-live
Author: Sasha Khamkov
Latest version: 1.0.9

# storybook-react-live

[react-live](https://github.com/FormidableLabs/react-live) decorator for [Storybook](https://storybook.js.org/) v6+

![npm](https://img.shields.io/npm/v/@freightos/storybook-react-live)
![NPM](https://img.shields.io/npm/l/@freightos/storybook-react-live)


## Installation

`npm i -D @freightos/storybook-react-live`

## Usage

```jsx
import withLiveEdit from '@freightos/storybook-react-live';

const code = `() => (
  <Center>
    <Button type="primary" size="large">
      Default
    </Button>
  </Center>
)`;

stories.add(
  'Live edit',
  withLiveEdit({
    code,
    scope: { Button }
  })
)

```

## Props of `withLiveEdit()`

All props accepted by [\<LiveProvider /\>](https://github.com/FormidableLabs/react-live#liveprovider-) and:

|Name|PropType|Description|
|---|---|---|
|theme|PropTypes.object|A `prism-react-renderer` theme object. See more [here](https://github.com/FormidableLabs/prism-react-renderer#theming)
|editorStyle|PropTypes.object| Styles object for overriding editor styles
|errorStyles|PropTypes.object| Styles object for overriding error styles

## Extend globally via `.storybook/preview.js`

Add property `reactLive` to `parameters` object. Accepts: `scope` and `theme`

```js
export const parameters = {
  reactLive: {
    scope: { Button, Icon },
    theme: synthwave84
  },
};
```

:)