https://github.com/gamurs-group/fable-storybook
Fable bindings for @storybook/react
https://github.com/gamurs-group/fable-storybook
fable-bindings fable2
Last synced: 12 months ago
JSON representation
Fable bindings for @storybook/react
- Host: GitHub
- URL: https://github.com/gamurs-group/fable-storybook
- Owner: gamurs-group
- License: mit
- Created: 2019-02-10T22:43:32.000Z (over 7 years ago)
- Default Branch: develop
- Last Pushed: 2019-03-08T04:28:04.000Z (over 7 years ago)
- Last Synced: 2025-04-03T08:22:48.775Z (about 1 year ago)
- Topics: fable-bindings, fable2
- Language: F#
- Size: 243 KB
- Stars: 9
- Watchers: 0
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Fable.Storybook
Fable bindings for the [@storybook/react](https://www.npmjs.com/package/@storybook/react) NPM package.
### Nuget Packages
Stable | Prerelease
--- | ---
[](https://www.nuget.org/packages/Fable.Storybook/) | [](https://www.nuget.org/packages/Fable.Storybook/)
## Getting Started
1. Configure your Fable/NPM project according to the [Storybook for React](https://storybook.js.org/basics/guide-react/)
quick start guide.
2. Create a custom webpack configuration for Storybook, in `.storybook/webpack.config.js`:
```
module.exports = {
module: {
rules: [
{
test: /\.fs(x|proj)?$/,
use: {
loader: "fable-loader",
options: {
babel: yourCustomBabelConfig
}
}
},
# Any other rules your project requires (e.g. babel-loader, style-loader, file-loader)
...
]
}
};
```
3. You can now require `.fs` files directly in your `.storybook/config.js`, for example:
```
import { configure } from '@storybook/react';
// If using SASS
import '../path/to/styles/main.sass';
function loadStories() {
const req = require.context('../src/', true, /\.stories\.(fs|js)$/);
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
```
## Example Stories
### Basic
```fsharp
/// Example stories
module Example.MyComponent
open Fable.Storybook
storiesOf("Folder/MyComponent")
.add("First Story", fun _ -> MyComponent.render [])
.add("Second Story", fun _ -> MyComponent.render [])
.add("Bedtime Story", fun _ -> MyComponent.render [])
.add("True Story", fun _ -> MyComponent.render [])
|> ignore
```
### With Decorator - Centered
```fsharp
/// Example stories with centered decorator
module Example.MyComponent
open Fable.Storybook
storiesOf("Folder/MyComponent")
.addDecorator(centered)
.add("First Story", fun _ -> MyComponent.render [])
.add("Second Story", fun _ -> MyComponent.render [])
.add("Bedtime Story", fun _ -> MyComponent.render [])
.add("True Story", fun _ -> MyComponent.render [])
|> ignore
```
## Development
### Building
Make sure the following **requirements** are installed in your system:
* [dotnet SDK](https://www.microsoft.com/net/download/core) 2.0 or higher
* [node.js](https://nodejs.org) 6.11 or higher
* [yarn](https://yarnpkg.com)
* [Mono](http://www.mono-project.com/) if you're on Linux or macOS.
Then you just need to type `./build.cmd` or `./build.sh`
### Release
In order to push the package to [nuget.org](https://nuget.org) you need to add your API keys to `NUGET_KEY` environmental variable.
You can create a key [here](https://www.nuget.org/account/ApiKeys).
- Update RELEASE_NOTES with a new version, data and release notes [ReleaseNotesHelper](http://fake.build/apidocs/fake-releasenoteshelper.html).
Ex:
```
#### 0.2.0 - 30.04.2017
* FEATURE: Does cool stuff!
* BUGFIX: Fixes that silly oversight
```
- You can then use the Release target. This will:
- make a commit bumping the version: Bump version to 0.2.0
- publish the package to nuget
- push a git tag
`./build.sh Release`
## How were these bindings generated
These bindings were mostly auto-generated using `ts2fable`, with a few manual tweaks:
```bash
# Install ts2fable as a global tool
yarn global add ts2fable
yarn add --dev @types/storybook__react
ts2fable node_modules/\@types/storybook__react/index.d.ts Fable.Storybook.fs
```