{"id":16660073,"url":"https://github.com/dvingo/om-storybook-example","last_synced_at":"2025-04-09T18:42:50.377Z","repository":{"id":140862272,"uuid":"91623397","full_name":"dvingo/om-storybook-example","owner":"dvingo","description":"Example of using om.next components in React Storybook","archived":false,"fork":false,"pushed_at":"2017-05-29T01:34:33.000Z","size":412,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T20:43:43.875Z","etag":null,"topics":["clojurescript","om"],"latest_commit_sha":null,"homepage":"https://dvingo.github.io/om-storybook-example","language":"Clojure","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/dvingo.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-17T21:54:34.000Z","updated_at":"2020-12-03T17:37:48.000Z","dependencies_parsed_at":"2024-08-11T07:15:48.286Z","dependency_job_id":null,"html_url":"https://github.com/dvingo/om-storybook-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvingo%2Fom-storybook-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvingo%2Fom-storybook-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvingo%2Fom-storybook-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvingo%2Fom-storybook-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dvingo","download_url":"https://codeload.github.com/dvingo/om-storybook-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248090350,"owners_count":21046069,"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":["clojurescript","om"],"created_at":"2024-10-12T10:27:49.325Z","updated_at":"2025-04-09T18:42:50.369Z","avatar_url":"https://github.com/dvingo.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"Example of using om.next components in React Storybook.\n\nThis example also uses the JS dependencies solution as described here:\nhttp://blob.tomerweller.com/reagent-import-react-components-from-npm\n\nThis way we can use the latest versions of JS libs without worrying about\nexterns.\n\nThe trade off is that you must use string names for properties, but for that\nwe can use:\nhttps://github.com/binaryage/cljs-oops\n\n# Overview of steps to get things setup:\n\nThis project was created using a figwheel template:\n\n```bash\nlein new figwheel cljs-storybook -- --om\n```\n\nThen updating the `project.clj`, and creating a simple component:\n\n```clojure\n(defui ^:export Hello\n  Object\n  (render [this]\n    (let [{:keys [name]} (om/props this)]\n      (dom/div nil (str \" your name is: \" name)))))\n\n(def ^:export hello (om/factory Hello))\n```\n\nNext step is to install all the JS deps using yarn.\n\nThis assumes yarn, npm, and node are installed already.\n\n```bash\nyarn init -y\nyarn add -D \\\nreact \\\nreact-dom \\\nwebpack \\\n@kadira/storybook\n```\n\nSetup React Storybook\n\nFollowing the Storybook \"slow start\" guide\n\nhttps://storybooks.js.org/docs/react-storybook/basics/slow-start-guide/\n\nAdd npm/yarn script:\n\n```\n  \"scripts\": {\n    \"storybook\": \"start-storybook -p 9001 -c .storybook -s resources/public\"\n  }\n```\n\n`-p` is the port to run the server on, `-c` is where to find the config directory\nand `-s` adds more directories for the server to serve static files from.\n\n`resources/public` is where our compiled CLJS and JS files are output to.\n\nCreate `.storybook` dir.\n\nEdit `.storybook/config.js`\n\nWe use webpack's require.context feature for dynamic require statements.\n\nhttps://webpack.js.org/guides/dependency-management/#require-context\n\n\nThis will treat any file ending in `.story.js` as a file that contains stories.\nYou are free to change how stories are included.\n\n```javascript\nimport { configure } from '@kadira/storybook'\nconst r = require.context('../src', true, /\\.story\\.js$/)\nconfigure(() =\u003e r.keys().forEach(r), module)\n```\n\nProduce JS deps:\n\n```bash\n ./node_modules/.bin/webpack -p\n```\n\nAdd `head.html` in `.storybook` dir:\n\nThis includes our CLJS on the page in a blocking manner so that our\nnamespaces will be available globally before the story code runs.\n\n```html\n\u003cscript src=\"js/compiled/out/goog/base.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"js/compiled/cljs_storybook.js\"\u003e\u003c/script\u003e\n\u003cscript\u003egoog.require('cljs_storybook.core')\u003c/script\u003e\n```\n\nNow we can construct a story:\n\n```javascript\nimport React from 'react'\nimport { storiesOf } from '@kadira/storybook'\nconst {hello} = cljs_storybook.core\nconst props = cljs.core.hash_map(cljs.core.keyword('name'), 'hello')\n\nstoriesOf('OmComponent', module)\n  .add('Default', () =\u003e \u003cdiv\u003e{hello(vals)}\u003c/div\u003e)\n```  \n\nIn this example I'm constructing the CLJS map in JS, another solution\nwould be to export your props from CLJS so they are easier to write.\n\nStart storybook:\n\n```\nyarn run storybook\n```\n\nEither produce a CLJS build one time or for dev use figwheel:\n\n```bash\nlein cljsbuild once dev\nlein cljsbuild once min\n# or\nrlwrap lein figwheel\n```\n\nopen http://localhost:9001 to view the stories.\nand http://localhost:3449 for normal figwheel dev.\n\nNow you can edit your code and use figwheel development workflow while viewing\nyour components in React Storybook.\n\n# GitHub pages build\n\nClone the repo to another directory.\n\nBuild the assets in this directory:\n\n```bash\n./scripts/buildProd.sh\n```\n\nThen copy the contents of the `storybookBuild` directory\nto the directory where you have the `gh-pages` branch checked out.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdvingo%2Fom-storybook-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdvingo%2Fom-storybook-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdvingo%2Fom-storybook-example/lists"}