{"id":19700521,"url":"https://github.com/draftbit/rescript-storybook","last_synced_at":"2025-08-22T05:04:46.257Z","repository":{"id":39136407,"uuid":"123693968","full_name":"draftbit/rescript-storybook","owner":"draftbit","description":"Storybook bindings for Rescript","archived":false,"fork":false,"pushed_at":"2023-03-04T16:33:13.000Z","size":978,"stargazers_count":80,"open_issues_count":22,"forks_count":21,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-15T09:33:57.870Z","etag":null,"topics":["rescript","storybook"],"latest_commit_sha":null,"homepage":"","language":"ReScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/draftbit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-03-03T13:23:09.000Z","updated_at":"2024-11-05T00:47:24.000Z","dependencies_parsed_at":"2024-01-06T07:43:11.829Z","dependency_job_id":"80dd3f22-2c28-4445-bfa8-23b3ed001e95","html_url":"https://github.com/draftbit/rescript-storybook","commit_stats":{"total_commits":38,"total_committers":12,"mean_commits":"3.1666666666666665","dds":0.7894736842105263,"last_synced_commit":"1667544087b17ddf5b0027e3738e6936b4038a2c"},"previous_names":["draftbit/bs-storybook","mywellgiving/bs-storybook"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/draftbit/rescript-storybook","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/draftbit%2Frescript-storybook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/draftbit%2Frescript-storybook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/draftbit%2Frescript-storybook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/draftbit%2Frescript-storybook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/draftbit","download_url":"https://codeload.github.com/draftbit/rescript-storybook/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/draftbit%2Frescript-storybook/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271588743,"owners_count":24785751,"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","status":"online","status_checked_at":"2025-08-22T02:00:08.480Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["rescript","storybook"],"created_at":"2024-11-11T21:06:18.709Z","updated_at":"2025-08-22T05:04:46.232Z","avatar_url":"https://github.com/draftbit.png","language":"ReScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rescript-storybook\n\nRescript bindings for **[Storybook](https://storybook.js.org/)**.\n\nThe goal of this project is to provide bindings for the main Storybook API, as well as the official add-ons. Currently it supports:\n\n- [actions](https://github.com/storybooks/storybook/tree/master/addons/actions)\n- [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs)\n- [addons API](https://storybook.js.org/addons/writing-addons/)\n\n## Getting Started\n\nFirst install this package:\n\n```bash\nnpm install rescript-storybook\n```\n\nNext, you'll need to add `rescript-storybook` to your `bsconfig.json` as a dependency.\n\nThen, get Storybook up and running according to [their docs](https://storybook.js.org/basics/quick-start-guide/)\n\n\u003e **Note:** This library does not attempt to provide a way to configure storybook in Reason - just use the standard JS configs.\n\nIn your `/.storybook/config.js`, import your stories from wherever your compiled Reason modules end up.\nFor example, if you're writing your stories inside a `__stories__` directory, and `bsb` is configured for a standard build, you might do something like:\n\n```javascript\nconst req = require.context(\"../lib/js\", true, /\\__stories__\\/.*.js$/);\nconfigure(() =\u003e {\n  req.keys().forEach((module) =\u003e {\n    req(module).default();\n  });\n}, module);\n```\n\nor if you are using Storybook v6.\n\n```javascript\n/* .storybook/main.js */\nmodule.exports = {\n  stories: [\"../stories/**/*.js\"],\n  addons: [\n    \"@storybook/addon-actions\",\n    \"@storybook/addon-links\",\n    \"@storybook/addon-knobs/register\",\n  ],\n};\n```\n\nNote that in the above example, we're assuming the convention of each module containing a function as the `default` export. rescript-storybook is accountable for that while writting your stories:\n\n## Writing a story\n\nHere's a basic story in its entirety:\n\n```reason\nopen BsStorybook.Story;\n\nlet _module = [%bs.raw \"module\"];\n\nstoriesOf(\"My First Reason Story\", _module)\n-\u003eadd(\"Chapter I\", () =\u003e \u003cspan\u003e {React.string(\"Hello rescript-storybook!\")} \u003c/span\u003e);\n```\n\nStorybook uses a reference to the `module` global provided by webpack to facilitate hot-reloading. We'll access that via the `[%bs.raw]` decorator.\n\n## Writing a CSF Story\n\nIf you'd prefer to use the newer [Component Story Format](https://storybook.js.org/docs/formats/component-story-format/), you can do that as well:\n\n```reason\nopen BsStorybook;\n\nlet default = CSF.make(~title=\"My CSF Story\", ());\n\nlet button = () =\u003e \u003cMyButton /\u003e;\n\nbutton-\u003eCSF.addMeta(~name=\"Plain Button\", ());\n```\n\n## The Actions Addon\n\nThe action addon's API is essentially unchanged from its JS implementation:\n\n\u003e Make sure that you have `@storybook/addon-actions` in the config\n\n```reason\nlet clickAction = Action.action(\"I Clicked The Button!\");\n\n\u003cdiv onClick={clickAction} /\u003e\n```\n\n## The Knobs Addon\n\nTo use [knobs](https://github.com/storybooks/storybook/tree/master/addons/knobs) you have twoo ways:\n\n\u003e Make sure that you have @storybook/addon-knobs/register in the config\n\n#### As a decorator\n\n```reason\nopen Storybook;\nopen Story;\n\nlet _module = [%bs.raw \"module\"];\n\nstoriesOf(\"My First Reason Story\", _module)\n-\u003eaddDecorator(Knobs.withKnobs)\n-\u003eadd(\"Chaper with Knobs\", () =\u003e {\n    let name = Knobs.text(~label=\"Name\", ~defaultValue=\"Patrick\", ());\n    \u003cspan\u003e {React.string(name)} \u003c/span\u003e;\n  })\n```\n\n#### Creating the story\n\n```reason\nopen Storybook;\nopen Story;\n\nlet _module = [%bs.raw \"module\"];\n\nlet knobsStory =\n  Main.createStory(\n    ~title=\"Hey look, knobs!\",\n    ~decorators=[Knobs.withKnobs],\n    ~_module,\n    (),\n  );\n\nknobsStory.add(\"Chaper with Knobs\", () =\u003e {\n  let name = Knobs.text(~label=\"Name\", ~defaultValue=\"Patrick\", ());\n  \u003cspan\u003e {React.string(name)} \u003c/span\u003e;\n})\n```\n\nEach knob type is invoked using a function with labeled arguments, and each requires passing `unit` as the final argument. They all share a `~label` argument, and a `~defaultValue` argument (where appropriate):\n\n### Text\n\n```reason\nlet myText = Knobs.text(~label=\"What should it say?\", ~defaultValue=\"Sup?\", ());\n```\n\n### Boolean\n\n```reason\nlet myBoolean = Knobs.boolean(~label=\"Should Show?\", ~defaultValue=true, ());\n```\n\nNote: The boolean type will call the underlying JS knob with a defaultValue of `false` if one is not provided.\n\n### Color\n\n```reason\nlet myColor = Knobs.color(~label=\"Color\", ~defaultValue=\"#333\" ());\n```\n\n### Number\n\nThe number type works with floats. If no `defaultValue` is provided, it will pass `0`. It also takes an optional `rangeConfig` record, which allows for specifying a `min`, `max`, and `step` so that the knob is displayed as a range slider.\n\n```reason\nlet num1 = Knobs.number(~label=\"Number 1\", ());\nlet num2 =\n  Knobs.number(\n    ~label=\"Number 2\",\n    ~rangeConfiguration={range: true, min: 0., max: 10., step: 1.},\n    ()\n  );\n```\n\n### Select\n\nTo use the select knob, first define a record type that contains the shape of the options, then the actual options as a type of `selectConfig`, passing your shape as the constructor type:\n\n```reason\ntype selectOptions = {\n  one: string,\n  two: string\n};\n\nlet options : Knobs.selectConfig(selectOptions) = {\n  one: \"Hello\",\n  two: \"Hi\"\n};\n```\n\nThen define the select knob like so:\n\n```reason\nlet greeting = Knobs.select(~label=\"Greeting\", ~options, ~defaultValue=options.one, ());\n```\n\n### Button\n\n```reason\nKnobs.button(\n  ~label=\"Knob Button\",\n  ~handler=Action.action(\"Clicked the knob button\"),\n  ()\n)\n```\n\n### Object\n\n```reason\nlet obj = Knobs.object_(~label=\"User\", ~defaultValue={\"color\": \"grey\"}, ());\n```\n\n### Js.Dict\n\n\u003e https://bucklescript.github.io/bucklescript/api/Js.Dict.html\n\n```reason\nlet options =\n  Js.Dict.fromArray([|\n    (\"Red\", \"red\"),\n    (\"Blue\", \"blue\"),\n    (\"Yellow\", \"yellow\"),\n    (\"None\", \"\"),\n  |]);\n\nlet color =\n  Knobs.selectFromDict(\n    ~label=\"MySelection\",\n    ~options,\n    ~defaultValue=\"red\",\n    (),\n  );\n```\n\n### Array\n\n```reason\nlet color =\n  Knobs.selectFromArray(\n    ~label=\"MySelection\",\n    ~options=[|\"red\", \"blue\", \"yellow\"|],\n    ~defaultValue=\"red\",\n    (),\n  );\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdraftbit%2Frescript-storybook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdraftbit%2Frescript-storybook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdraftbit%2Frescript-storybook/lists"}