{"id":13788478,"url":"https://github.com/Day8/re-com","last_synced_at":"2025-05-12T02:33:26.726Z","repository":{"id":18608089,"uuid":"21813295","full_name":"day8/re-com","owner":"day8","description":"A ClojureScript library of reusable components for Reagent","archived":false,"fork":false,"pushed_at":"2024-05-22T14:37:02.000Z","size":5653,"stargazers_count":791,"open_issues_count":46,"forks_count":147,"subscribers_count":32,"default_branch":"master","last_synced_at":"2024-05-23T01:07:48.604Z","etag":null,"topics":["clojurescript","re-frame","react","reagent","reagent-components","ui-components"],"latest_commit_sha":null,"homepage":"https://re-com.day8.com.au","language":"Clojure","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/day8.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"license.txt","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},"funding":{"github":"mike-thompson-day8"}},"created_at":"2014-07-14T08:54:29.000Z","updated_at":"2024-07-09T15:40:15.036Z","dependencies_parsed_at":"2023-11-22T20:27:07.305Z","dependency_job_id":"c2a8ee91-7a1e-4613-a233-91e251f37571","html_url":"https://github.com/day8/re-com","commit_stats":{"total_commits":1535,"total_committers":47,"mean_commits":"32.659574468085104","dds":0.6710097719869708,"last_synced_commit":"fcebaeefbe87c664222d50b69bdfc1b3faa05db8"},"previous_names":[],"tags_count":75,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/day8%2Fre-com","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/day8%2Fre-com/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/day8%2Fre-com/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/day8%2Fre-com/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/day8","download_url":"https://codeload.github.com/day8/re-com/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":213856344,"owners_count":15648199,"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","re-frame","react","reagent","reagent-components","ui-components"],"created_at":"2024-08-03T21:00:47.580Z","updated_at":"2024-11-18T02:31:03.739Z","avatar_url":"https://github.com/day8.png","language":"Clojure","funding_links":["https://github.com/sponsors/mike-thompson-day8"],"categories":["front-end","Awesome ClojureScript","Tools"],"sub_categories":["[React.js](https://facebook.github.io/react/) Interface","Components"],"readme":"\u003c!--  [![CI](https://github.com/day8/re-com/workflows/ci/badge.svg)](https://github.com/day8/re-com/actions?workflow=ci)\n[![CD](https://github.com/day8/re-com/workflows/cd/badge.svg)](https://github.com/day8/re-com/actions?workflow=cd)\n[![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/day8/re-com?style=for-the-badge)](https://github.com/day8/re-com/tags) --\u003e\n[![Clojars Project](https://img.shields.io/clojars/v/re-com.svg?style=for-the-badge\u0026logo=clojure\u0026logoColor=fff)](https://clojars.org/re-com)\n[![GitHub issues](https://img.shields.io/github/issues-raw/day8/re-com?style=for-the-badge\u0026logo=github)](https://github.com/day8/re-com/issues)\n[![GitHub pull requests](https://img.shields.io/github/issues-pr/day8/re-com?style=for-the-badge\u0026logo=github)](https://github.com/day8/re-com/pulls)\n[![License](https://img.shields.io/github/license/day8/re-com.svg?style=for-the-badge)](license.txt)\n\n# re-com\n\nA ClojureScript library of UI components for [Reagent](http://reagent-project.github.io). \n\nre-com provides:\n\n* familiar UI widgetry **components** such as dropdowns, date pickers, popovers, tabs, etc.\n* layout **components**, which arrange widgets vertically and horizontally, within\n  splitters, etc. Plus components\n  which put borders around their children. These various pieces can be arbitrarily nested\n  to create sophisticated layouts.\n* a mostly [Bootstrap](http://getbootstrap.com/) look, mixed with\n  some [Material Design Icons](http://zavoloklom.github.io/material-design-iconic-font/icons.html).\n\nIn short, re-com attempts to provide the kind of UI basics you'd need to build a desktop-class SPA app.\n\n## It Uses Flexbox\n\nThe entire layout side of this library relies on \n[Flexbox](http://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\nNow, pretty much every modern browser\n[has support for Flexbox](http://caniuse.com/#feat=flexbox) so \nthis is probably a non-issue these days, unless you need to \nsupport old versions of IE.\n\nWe build desktop-class apps to run in controlled browser environments\nlike [Electron](https://electron.atom.io).  So, we know we're dealing with Chrome.\n\n## Warning: No Mobile Focus\n\nNone of the components have been designed with mobile in mind. We said we had a desktop app focus, right?\n\nNeither have we been worried too much about code size because other design goals have\ntaken precedence. To give you some idea, our main demo app which includes every component, plus all demo\ncode and plenty of yadda yadda explanatory strings, comes to about 167K compressed when\nusing `:optimizations :advanced` (700K uncompressed).\nThat number includes ReactJS plus the ClojureScript libs and runtime. So, everything.\nNote:  these numbers no longer match the demo app. We wanted to show off some of the debug features in our demo app, \nso we backed away from fully advanced, minified compilation. \n\n## So, Without Ado Being Any Furthered ...\n\nStart by [looking at the demo](https://re-com.day8.com.au).\n\n## Navigating The Source\n\nWhen you are running the demo app, look to the the right of each page's titles, and you'll see hyperlinks\nwhich will take you to the associated source code.  That's a convenient way to navigate to either\nthe components themselves or the demo code.\n\nWhen browsing more generally, look in the `src` directory or this repo, you'll notice\ntwo subdirectories:\n\n  - re-com - the library itself - the components\n  - re-demo - the demo app, which shows how to use the components\n\n## Useful Commands\n\n1. Getting The Repo\n\n\n   ```shell\n   git clone https://github.com/day8/re-com.git\n   ```\n\n   ```shell\n   cd re-com\n   ```\n\n2. Compiling And Running The Demo\n\n   Install dependencies (CONFIRM if this only needs to be run once or every time the deps change):   \n   ```shell\n   npm install\n   ```\n   \n   ```shell\n   npx shadow-cljs watch demo\n   ```\n   \n   This will prepare the demo, by doing:\n     - a clean\n     - a compile\n   \n   Wait until `[:demo] Build completed.` is displayed in the console indicating\n   the dev HTTP server is ready.\n    \n   Now you can open [`http://localhost:3449/`](http://localhost:3449/) in your\n   browser.\n\n3. Run The (erm, modest) Tests\n   \n   ```shell\n   lein ci\n   ```\n   \n   This will:\n     - clean\n     - compile the tests\n     - compile in release mode as a basic optimized build check\n\n4. Run or Debug the tests:\n   \n   ```shell\n   lein watch\n   ```\n\n5. Deploy The Demo App To S3 bucket\n   \n   This will only work if you have the right credentials in your env:\n   ```shell\n   lein deploy-aws\n   ```\n\n\n## Using re-com\n\nre-com is available from clojars. Add it to your project.clj dependencies:\n\n[![Clojars Project](https://img.shields.io/clojars/v/re-com.svg)](https://clojars.org/re-com)\n\nYou should now be able to require the `re-com.core` namespace, which exposes all of the API functions documented in the `re-demo` example app.\n\nYou'll then need to include these asset folders in your app:\nhttps://github.com/day8/re-com/tree/master/run/resources/public/assets\n\nAs far as your `index.html` is concerned, take inspiration from here:\nhttps://github.com/day8/re-com/tree/master/run/resources/public\n\nIn particular, you'll need bootstrap (assumedly via a CDN):\n```html\n\u003clink rel=\"stylesheet\" href=\"//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css\"\u003e\n```\n\nAnd a reference to these two CSS files (make sure `re-com.css` appears after `bootstrap.css`):\n\n```html\n\u003clink rel=\"stylesheet\" href=\"assets/css/material-design-iconic-font.min.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"assets/css/re-com.css\"\u003e\n```\n\nAnd a reference to the Roboto fonts (but this can be overridden relatively easily):\n\n```html\n\u003clink href=\"http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic\" rel=\"stylesheet\" type=\"text/css\"\u003e\n\u003clink href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text/css'\u003e\n```\n\nReagent comes bundled with a matching version of ReactJS,\nso you don't need to include it explicitly.\n\n\n## MVC\n\nIf you decide to use re-com, consider also using [re-frame](https://github.com/day8/re-frame)\n(an MVC-ish framework).\n\nAlthough both `re-frame` and `re-com` can be used independently of each other, they dovetail well.\n\n## Related projects\n\n[re-com-tailwind](https://github.com/BnMcGn/re-com-tailwind) - an edition of re-com that is compatible with tailwindcss\n[re-frame-template](https://github.com/day8/re-frame-template) - start a re-com project with one command: `lein new re-frame +re-com`\n\n\n## The Missing Components\n\n* tree  (not hard, just haven't needed one yet)\n* menus - there's a dropdown, but no cascading menus\n* accordion\n* maybe a dockable LHS navbar\n* \u003cs\u003e virtual grid. Straight v-box is good enough at small grids, so no problem there. But when the number of\nrows gets huge, you need a widget which does virtual rows, otherwise there's just too much DOM\nand there's performance problems.\nCan we use [Fixed Data Tables for React](https://github.com/facebookarchive/fixed-data-table)?  \u003c/s\u003e\n* drag and drop.\n* animations / transitions.  We have ideas.  They seem clunky.\n* Focus management - When the user presses tab, to which field does focus move?\n\n## Helping\n\n1. Where the docs are wrong or fall short, write up something better. Because\n   our docs take the form of an app written in ClojureScript using re-com, you're actually\n   exercising your knowledge of re-com as you do this.\n2. See the list of missing components above. You'll have to produce the\n   component itself, including a params spec, plus the extra page in the demo app.\n3. Test re-com on new browsers and iron out any quirks.  Our focus is strictly Chrome.\n\nWhen creating new components, we have found it useful to use the CSS from existing\nJavaScript projects (assuming their licence is compatible with MIT) and then\nreplace the JavaScript with ClojureScript. Reagent really is very nice.\n\nAlso, please refer to [CONTRIBUTING.md](https://github.com/day8/re-com/blob/master/CONTRIBUTING.md) for further \ndetails on creating issues and pull requests.\n\n\n### License\n\nCopyright © 2015-2021 Michael Thompson\n\nDistributed under The MIT License (MIT) - See LICENSE.txt\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDay8%2Fre-com","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDay8%2Fre-com","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDay8%2Fre-com/lists"}