{"id":23055423,"url":"https://github.com/gamurs-group/fable-storybook","last_synced_at":"2025-07-05T18:33:12.252Z","repository":{"id":97726857,"uuid":"170035922","full_name":"gamurs-group/fable-storybook","owner":"gamurs-group","description":"Fable bindings for @storybook/react","archived":false,"fork":false,"pushed_at":"2019-03-08T04:28:04.000Z","size":249,"stargazers_count":9,"open_issues_count":1,"forks_count":5,"subscribers_count":0,"default_branch":"develop","last_synced_at":"2025-04-03T08:22:48.775Z","etag":null,"topics":["fable-bindings","fable2"],"latest_commit_sha":null,"homepage":null,"language":"F#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gamurs-group.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-10T22:43:32.000Z","updated_at":"2024-04-12T10:14:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"1fa1f444-b701-463e-97a0-cc1bcf1b9f60","html_url":"https://github.com/gamurs-group/fable-storybook","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/gamurs-group/fable-storybook","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gamurs-group%2Ffable-storybook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gamurs-group%2Ffable-storybook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gamurs-group%2Ffable-storybook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gamurs-group%2Ffable-storybook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gamurs-group","download_url":"https://codeload.github.com/gamurs-group/fable-storybook/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gamurs-group%2Ffable-storybook/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263784857,"owners_count":23510986,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fable-bindings","fable2"],"created_at":"2024-12-16T01:12:08.709Z","updated_at":"2025-07-05T18:33:12.242Z","avatar_url":"https://github.com/gamurs-group.png","language":"F#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fable.Storybook\n\nFable bindings for the [@storybook/react](https://www.npmjs.com/package/@storybook/react) NPM package.\n\n### Nuget Packages\n\nStable | Prerelease\n--- | ---\n[![NuGet Badge](https://buildstats.info/nuget/Fable.Storybook)](https://www.nuget.org/packages/Fable.Storybook/) | [![NuGet Badge](https://buildstats.info/nuget/Fable.Storybook?includePreReleases=true)](https://www.nuget.org/packages/Fable.Storybook/)\n\n\n## Getting Started\n\n1. Configure your Fable/NPM project according to the [Storybook for React](https://storybook.js.org/basics/guide-react/)\n   quick start guide.\n\n2. Create a custom webpack configuration for Storybook, in `.storybook/webpack.config.js`:\n\n   ```\n   module.exports = {\n       module: {\n           rules: [\n               {\n                   test: /\\.fs(x|proj)?$/,\n                   use: {\n                       loader: \"fable-loader\",\n                       options: {\n                           babel: yourCustomBabelConfig\n                       }\n                   }\n               },\n\n               # Any other rules your project requires (e.g. babel-loader, style-loader, file-loader)\n               ...\n           ]\n       }\n   };\n\n   ```\n\n3. You can now require `.fs` files directly in your `.storybook/config.js`, for example:\n\n    ```\n    import { configure } from '@storybook/react';\n\n    // If using SASS\n    import '../path/to/styles/main.sass';\n\n    function loadStories() {\n        const req = require.context('../src/', true, /\\.stories\\.(fs|js)$/);\n        req.keys().forEach(filename =\u003e req(filename));\n    }\n\n    configure(loadStories, module);\n\n\n    ```\n\n## Example Stories\n\n### Basic\n\n```fsharp\n/// Example stories\nmodule Example.MyComponent\n\nopen Fable.Storybook\n\nstoriesOf(\"Folder/MyComponent\")\n    .add(\"First Story\", fun _ -\u003e MyComponent.render [])\n    .add(\"Second Story\", fun _ -\u003e MyComponent.render [])\n    .add(\"Bedtime Story\", fun _ -\u003e MyComponent.render [])\n    .add(\"True Story\", fun _ -\u003e MyComponent.render [])\n    |\u003e ignore\n```\n\n### With Decorator - Centered\n\n```fsharp\n/// Example stories with centered decorator\nmodule Example.MyComponent\n\nopen Fable.Storybook\n\nstoriesOf(\"Folder/MyComponent\")\n    .addDecorator(centered)\n    .add(\"First Story\", fun _ -\u003e MyComponent.render [])\n    .add(\"Second Story\", fun _ -\u003e MyComponent.render [])\n    .add(\"Bedtime Story\", fun _ -\u003e MyComponent.render [])\n    .add(\"True Story\", fun _ -\u003e MyComponent.render [])\n    |\u003e ignore\n```\n\n## Development\n\n### Building\n\nMake sure the following **requirements** are installed in your system:\n\n* [dotnet SDK](https://www.microsoft.com/net/download/core) 2.0 or higher\n* [node.js](https://nodejs.org) 6.11 or higher\n* [yarn](https://yarnpkg.com)\n* [Mono](http://www.mono-project.com/) if you're on Linux or macOS.\n\nThen you just need to type `./build.cmd` or `./build.sh`\n\n### Release\n\nIn order to push the package to [nuget.org](https://nuget.org) you need to add your API keys to `NUGET_KEY` environmental variable.\nYou can create a key [here](https://www.nuget.org/account/ApiKeys).\n\n- Update RELEASE_NOTES with a new version, data and release notes [ReleaseNotesHelper](http://fake.build/apidocs/fake-releasenoteshelper.html).\nEx:\n\n```\n#### 0.2.0 - 30.04.2017\n* FEATURE: Does cool stuff!\n* BUGFIX: Fixes that silly oversight\n```\n\n- You can then use the Release target. This will:\n  - make a commit bumping the version: Bump version to 0.2.0\n  - publish the package to nuget\n  - push a git tag\n\n`./build.sh Release`\n\n\n## How were these bindings generated\n\nThese bindings were mostly auto-generated using `ts2fable`, with a few manual tweaks:\n\n```bash\n# Install ts2fable as a global tool\nyarn global add ts2fable\n\nyarn add --dev @types/storybook__react\n\nts2fable node_modules/\\@types/storybook__react/index.d.ts Fable.Storybook.fs\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgamurs-group%2Ffable-storybook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgamurs-group%2Ffable-storybook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgamurs-group%2Ffable-storybook/lists"}