In the beginning there was darkness

3 years ago · 11018f613b
commit 11018f613b
165 changed files with 4662 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,6 @@
+*.js
+.nrepl-port
+.shadow-cljs
+.cpcache
+resources/public/js
+node_modules
--- a/README.adoc
+++ b/README.adoc
@ -0,0 +1,134 @@
+:toc:
+:toc-placement: preamble
+:toc-levels: 2
+
+= Fulcro 3 Carbon Wrappers
+
+Fulcro 3 convenience wrappers for using https://react.carbondesignsystem.com[Carbon Design System] components.
+
+This library offers improved integration with the carbon design system packages with predefined
+factories and doc strings generated directly from the Carbon source. It also includes symbols for
+all icon names.
+
+NOTE: This library requires that you use Fulcro 3 and Shadow CLJS as the compiler.
+
+image::https://img.shields.io/clojars/v/ch.lyrion/carbon-wrapper.svg[link="https://clojars.org/ch.lyrion/carbon-wrapper"]
+
+== Usage
+
+Shadow-cljs has much better integration with the NPM ecosystem, which allows you to
+easily upgrade your carbon dependency without worrying about cljsjs, and also
+allows you to easily use individual components for a smaller build size. Simply add
+the carbon components to your `package.json`:
+
+```
+$ npm install --save-dev carbon-components-react carbon-components carbon-icons
+```
+
+=== Using Components
+
+Individual factories can be found in namespaces that mirror the carbon-react module structure:
+
+e.g. `Grid > Row` is available as
+```
+(:require [ch.lyrion.carbon.grid.ui-row :refer [ui-row]])
+```
+
+and `Accordion > Accordion` is available as
+```
+(:require [ch.lyrion.carbon.accordion.ui-accordion :refer [ui-accordion]])
+```
+
+While this is a bit tedious in the requires, it ensures that you don't get components in your
+build that you don't use.
+
+== Porting from Carbon React Documentation Examples
+
+Props are required. The factories will convert them to js for you, but if you want every ounce of
+possible speed you can pre-tag your props with `#js`.
+
+React Version:
+```
+<Breadcrumb
+  className="some-class"
+  noTrailingSlash
+  onClick={function noRefCheck(){}}
+>
+  <BreadcrumbItem>
+    <a href="/#">
+      Breadcrumb 1
+    </a>
+  </BreadcrumbItem>
+  <BreadcrumbItem href="#">
+    Breadcrumb 2
+  </BreadcrumbItem>
+  <BreadcrumbItem
+    aria-current="page"
+    href="#"
+  >
+    Breadcrumb 3
+  </BreadcrumbItem>
+</Breadcrumb>
+```
+
+This library:
+
+```
+(ui-breadcrumb
+{:className "some-class"
+ :noTrailingSlash true
+ :onClick (fn [] nil)
+ :children [
+     (ui-breadcrumb-item
+      (dom/a {:href "/#"} "Breadcrumb 1"))
+     (ui-breadcrumb-item
+      "Breadcrumb 2")
+     (ui-breadcrumb-item
+      {:aria-current "page"
+       :href "#"}
+      "Breadcrumb 3")
+ ]})
+```
+
+
+== Examples
+
+You can see some example usage in the workspaces of this repository. To play with them live
+clone this repo, and start the compiler:
+
+```
+cd carbon-wrapper
+npm install
+npx shadow-cljs server
+```
+Navigate to http://localhost:9000 and start the workspaces build
+
+Then navigate to http://localhost:8023
+
+== Regenerating Factories
+
+The factory files are generated from a checkout of the (https://github.com/carbon-design-system/carbon)[Carbon]
+source (to automatically get the docstrings). The `user` namespace can be run in a normal Clojure REPL, and
+contains the function to generate the files.
+
+First clone the semantic-ui-react repo:
+```
+git clone https://github.com/carbon-design-system/carbon
+```
+
+In the cloned repository, run:
+```
+yarn install
+yarn build
+```
+
+Then using the path to the generated packages/react/build/docgen/components folder, start a repl and run
+```
+(gen-factories "path/to/generated/docgen/components")
+```
+
+== LICENSE
+
+Copyright 2020 Daniel Ziltener
+
+MIT Public License
--- a/deps.edn
+++ b/deps.edn
@ -0,0 +1,12 @@
+{:paths   ["src/main"]
+ :deps    {}
+ :aliases {:outdated {:extra-deps {olical/depot {:mvn/version "1.8.4"}
+                                   org.clojure/tools.namespace {:mvn/version "1.0.0"}}
+                      :main-opts ["-m" "depot.outdated.main" "-a" "outdated"]}
+           :dev      {:extra-paths ["src/workspaces" "src/dev"]
+                      :extra-deps  {org.clojure/clojure       {:mvn/version "1.10.1" :scope "provided"}
+                                    org.clojure/clojurescript {:mvn/version "1.10.773" :scope "provided"}
+                                    org.clojure/data.json     {:mvn/version "1.0.0"}
+                                    com.fulcrologic/fulcro    {:mvn/version "3.2.9" :scope "provided"}
+                                    thheller/shadow-cljs      {:mvn/version "2.9.10"}
+                                    nubank/workspaces         {:mvn/version "1.0.15"}}}}}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,28 @@
+{
+  "name": "fulcro3-carbon-wrappers",
+  "version": "1.0.0",
+  "description": "Carbon Design System Wrapper",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitea.lyrion.ch/zilti/carbon-wrapper.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://gitea.lyrion.ch/zilti/carbon-wrapper/issues"
+  },
+  "homepage": "https://gitea.lyrion.ch/zilti/carbon-wrapper",
+  "devDependencies": {
+    "carbon-components": "^10.12.0",
+    "carbon-components-react": "^7.12.0",
+    "carbon-icons": "^7.0.7",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "shadow-cljs": "^2.9.10",
+    "highlight.js": "9.12.0",
+    "react-grid-layout": "0.16.6",
+    "react-icons": "2.2.7",
+    "reakit": "0.11.1"
+  }
+}
--- a/resources/public/index.html
+++ b/resources/public/index.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>Template Devcards</title>
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
+    <link rel="stylesheet"
+        href="//cdnjs.cloudflare.com/ajax/libs/carbon-components/10.12.0/css/carbon-components.min.css">
+    </link>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script src="js/workspaces/main.js"></script>
+</body>
+
+</html>
--- a/shadow-cljs.edn
+++ b/shadow-cljs.edn
@ -0,0 +1,10 @@
+{:deps   {:aliases [:dev]}
+ :nrepl  {:port 9000}
+ :builds {:workspaces {:target     :browser
+                       :output-dir "resources/public/js/workspaces"
+                       :asset-path "/js/workspaces"
+                       :devtools   {:preloads           [com.fulcrologic.fulcro.inspect.preload]
+                                    :http-root          "resources/public"
+                                    :http-port          8023
+                                    :http-resource-root "."}
+                       :modules    {:main {:entries [com.ibm.carbon.workspaces-main]}}}}}
--- a/src/dev/user.clj
+++ b/src/dev/user.clj
@ -0,0 +1,117 @@
+(ns user
+  (:require
+   [clojure.string :as str]
+   [clojure.data.json :as json]
+   [clojure.java.io :as io]))
+
+(defn gen-prop-docstring [prop {:keys [defaultValue type required description]}]
+  (let [prop (name prop)
+        required (if required " (required)" "")
+        type (format "(%s)" (:name type))
+        description description
+        defaultValue (if defaultValue (format "Default: %s" (:value defaultValue)) "")
+        values (if (:value type) (format "Possible values: %s" (:value type)) "")]
+    (format "  - %s %s%s: %s %s %s\n" prop type required description defaultValue values)))
+
+(defn gen-docstring [{:keys [description props]}]
+  (let [description (if-not (str/blank? description) (str description "\n") description)
+        props (reduce #(str %1 (gen-prop-docstring (key %2) (val %2)))
+                      "Props:\n"
+                      props)]
+    (str description props)))
+
+(defn quoted [s] (str "\"" s "\""))
+(defn escaped [s] (str/replace s "\"" "\\\""))
+
+(defn hyphenated [camelCase]
+  (println "Hyphenating" camelCase)
+  (if (= "UIShell" camelCase)
+    "ui-shell"
+    (-> camelCase
+        (str/replace #"([A-Z])" "-$1")
+        (str/lower-case)
+        (str/replace #"^-" ""))))
+
+(def input-factory-classes
+  #{"Checkbox"
+    "ComboBox"
+    "FormInput"
+    "DropdownSearchInput"
+    "Search"
+    "TextArea"
+    "TextInput"})
+
+(defn factory-helper [class]
+  (if (contains? input-factory-classes class)
+    "wrapped-factory-apply"
+    "factory-apply"))
+
+(defn gen-json [js]
+  (let [datasplit (str/split js #";\n")
+        match (first (filter #(re-find #".*__docgen.*" %) datasplit))]
+    (if-not (nil? match)
+      (json/read-str (apply str (drop-while #(not= % \{) match)) :key-fn keyword)
+      nil)))
+
+(defn guess-display-name [file display-name]
+  (if (nil? display-name)
+    (do (print "No display name found for" file "and thus will guess...")
+        (let [display-name (-> file
+                               (str/replace #"\.js" "")
+                               (str/replace #"\." ""))]
+          (println "Guessed name:" display-name)
+          display-name))
+    display-name))
+
+(defn gen-factory-map [dir]
+  (fn [{:keys [subdir file]}]
+    (println "Generating" subdir "/" file "...")
+    (if-let [{:keys [displayName description props] :as docs} (gen-json (slurp (str dir "/" subdir "/" file)))]
+      (let [displayName  (guess-display-name file displayName)
+            class        displayName
+            factory-name (str "ui-" (hyphenated class))
+            filename     (str "src/main/ch/lyrion/carbon/" (hyphenated subdir) "/" (str/replace factory-name #"-" "_") ".cljs")
+            nns          (str "ch.lyrion.carbon." (hyphenated subdir) "." factory-name)
+            include-file (str "carbon-components-react/lib/components/" subdir "/" file)
+            docstring    (gen-docstring docs)]
+        {:class class
+         :factory-name factory-name
+         :filename filename
+         :ns nns
+         :include-file include-file
+         :docstring docstring})
+      nil)))
+
+(defn gen-component-filelist [dir]
+  (fn [subdir]
+    (let [path (str dir "/" subdir)]
+      (->> (seq (.list (io/file path)))
+           (remove #(or (= % "index.js")
+                        (str/ends-with? % "-story.js")
+                        (str/ends-with? % "-test.js")
+                        (not (str/ends-with? % ".js"))))
+           (map #(identity {:subdir subdir
+                            :file %}))))))
+
+(defn factory-ns-shadow [ns class factory-name include-file docstring]
+  (str "(ns " ns "\n"
+       "  (:require\n"
+       "    [ch.lyrion.carbon.factory-helpers :as h]\n"
+       "    [\"" include-file "\" :default " class "]))\n\n"
+       "(def " factory-name "\n"
+       "\n"
+       (quoted (escaped docstring))
+       "\n  (h/" (factory-helper class) " " class "))"))
+
+(defn gen-factories [component-dir]
+  (let [modules (->> (seq (.list (io/file component-dir)))
+                     (map (gen-component-filelist component-dir))
+                     flatten
+                     (map (gen-factory-map component-dir))
+                     (remove nil?)
+                     (sort-by :factory-name))]
+    (io/make-parents "src/main/ch/lyrion/carbon/factories.cljs")
+    (doseq [{:keys [filename ns class factory-name include-file filename docstring] :as m} modules]
+      (println "Generating" filename "...")
+      (io/make-parents filename)
+      (spit (io/as-file filename) (factory-ns-shadow ns class factory-name include-file docstring)))))
--- a/src/main/ch/lyrion/carbon/accordion/ui_accordion.cljs
+++ b/src/main/ch/lyrion/carbon/accordion/ui_accordion.cljs
@ -0,0 +1,13 @@
+(ns ch.lyrion.carbon.accordion.ui-accordion
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Accordion/Accordion.js" :default Accordion]))
+
+(def ui-accordion
+
+"Props:
+  - align (enum): Specify the alignment of the accordion heading title and chevron. Default: 'end' 
+  - children (node): Pass in the children that will be rendered within the Accordion  
+  - className (string): Specify an optional className to be applied to the container node  
+"
+  (h/factory-apply Accordion))
--- a/src/main/ch/lyrion/carbon/accordion/ui_accordion_item.cljs
+++ b/src/main/ch/lyrion/carbon/accordion/ui_accordion_item.cljs
@ -0,0 +1,19 @@
+(ns ch.lyrion.carbon.accordion.ui-accordion-item
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Accordion/AccordionItem.js" :default AccordionItem]))
+
+(def ui-accordion-item
+
+"Props:
+  - open (bool): `true` to open the expando. Default: false 
+  - renderExpando (func): The callback function to render the expando button.
+Can be a React component class. Default: props => <button {...props} /> 
+  - title (node): The accordion title. Default: 'title' 
+  - children (node): Provide the contents of your AccordionItem  
+  - className (string): Specify an optional className to be applied to the container node  
+  - iconDescription (custom): The description of the expando icon.  
+  - onClick (func): The handler of the massaged `click` event.  
+  - onHeadingClick (func): The handler of the massaged `click` event on the heading.  
+"
+  (h/factory-apply AccordionItem))
--- a/src/main/ch/lyrion/carbon/accordion/ui_accordion_skeleton.cljs
+++ b/src/main/ch/lyrion/carbon/accordion/ui_accordion_skeleton.cljs
@ -0,0 +1,15 @@
+(ns ch.lyrion.carbon.accordion.ui-accordion-skeleton
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Accordion/Accordion.Skeleton.js" :default AccordionSkeleton]))
+
+(def ui-accordion-skeleton
+
+"Props:
+  - open (bool): `false` to not display the first item opened Default: true 
+  - count (number): Set number of items to render Default: 4 
+  - align (enum): Specify the alignment of the accordion heading title and chevron. Default: 'end' 
+  - uid (custom): Set unique identifier to generate unique item keys  
+  - className (string): Specify an optional className to add.  
+"
+  (h/factory-apply AccordionSkeleton))
--- a/src/main/ch/lyrion/carbon/breadcrumb/ui_breadcrumb.cljs
+++ b/src/main/ch/lyrion/carbon/breadcrumb/ui_breadcrumb.cljs
@ -0,0 +1,14 @@
+(ns ch.lyrion.carbon.breadcrumb.ui-breadcrumb
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Breadcrumb/Breadcrumb.js" :default Breadcrumb]))
+
+(def ui-breadcrumb
+
+"Props:
+  - aria-label (string): Specify the label for the breadcrumb container  
+  - children (node): Pass in the BreadcrumbItem's for your Breadcrumb  
+  - className (string): Specify an optional className to be applied to the container node  
+  - noTrailingSlash (bool): Optional prop to omit the trailing slash for the breadcrumbs  
+"
+  (h/factory-apply Breadcrumb))
--- a/src/main/ch/lyrion/carbon/breadcrumb/ui_breadcrumb_item.cljs
+++ b/src/main/ch/lyrion/carbon/breadcrumb/ui_breadcrumb_item.cljs
@ -0,0 +1,14 @@
+(ns ch.lyrion.carbon.breadcrumb.ui-breadcrumb-item
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Breadcrumb/BreadcrumbItem.js" :default BreadcrumbItem]))
+
+(def ui-breadcrumb-item
+
+"Props:
+  - children (node): Pass in content that will be inside of the BreadcrumbItem  
+  - className (string): Specify an optional className to be applied to the container node  
+  - href (string): Optional string representing the link location for the BreadcrumbItem  
+  - isCurrentPage (bool): Provide if this breadcrumb item represents the current page  
+"
+  (h/factory-apply BreadcrumbItem))
--- a/src/main/ch/lyrion/carbon/breadcrumb/ui_breadcrumb_skeleton.cljs
+++ b/src/main/ch/lyrion/carbon/breadcrumb/ui_breadcrumb_skeleton.cljs
@ -0,0 +1,11 @@
+(ns ch.lyrion.carbon.breadcrumb.ui-breadcrumb-skeleton
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Breadcrumb/Breadcrumb.Skeleton.js" :default BreadcrumbSkeleton]))
+
+(def ui-breadcrumb-skeleton
+
+"Props:
+  - className (string): Specify an optional className to add.  
+"
+  (h/factory-apply BreadcrumbSkeleton))
--- a/src/main/ch/lyrion/carbon/button/ui_button.cljs
+++ b/src/main/ch/lyrion/carbon/button/ui_button.cljs
@ -0,0 +1,33 @@
+(ns ch.lyrion.carbon.button.ui-button
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Button/Button.js" :default Button]))
+
+(def ui-button
+
+"Props:
+  - role (string): Optional prop to specify the role of the Button  
+  - tooltipPosition (enum): Specify the direction of the tooltip for icon-only buttons.
+Can be either top, right, bottom, or left.  
+  - children (node): Specify the content of your Button  
+  - tabIndex (number): Optional prop to specify the tabIndex of the Button Default: 0 
+  - tooltipAlignment (enum): Specify the alignment of the tooltip to the icon-only button.
+Can be one of: start, center, or end.  
+  - disabled (bool): Specify whether the Button should be disabled, or not Default: false 
+  - as (union): Specify how the button itself should be rendered.
+Make sure to apply all props to the root node and render children appropriately  
+  - type (enum): Optional prop to specify the type of the Button Default: 'button' 
+  - className (string): Specify an optional className to be added to your Button  
+  - renderIcon (union): Optional prop to allow overriding the icon rendering.
+Can be a React component class  
+  - size (enum): Specify the size of the button, from a list of available sizes.
+For `default` buttons, this prop can remain unspecified.  
+  - small (custom): Deprecated in v10 in favor of `size`.
+Specify whether the Button should be a small variant  
+  - kind (enum): Specify the kind of Button you want to create Default: 'primary' 
+  - hasIconOnly (bool): Specify if the button is an icon-only button  
+  - iconDescription (custom): If specifying the `renderIcon` prop, provide a description for that icon that can
+be read by screen readers  
+  - href (string): Optionally specify an href for your Button to become an <a> element  
+"
+  (h/factory-apply Button))
--- a/src/main/ch/lyrion/carbon/button/ui_button_skeleton.cljs
+++ b/src/main/ch/lyrion/carbon/button/ui_button_skeleton.cljs
@ -0,0 +1,13 @@
+(ns ch.lyrion.carbon.button.ui-button-skeleton
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Button/Button.Skeleton.js" :default ButtonSkeleton]))
+
+(def ui-button-skeleton
+
+"Props:
+  - small (bool): Specify whether the Button should be a small variant Default: false 
+  - href (string): Optionally specify an href for your Button to become an <a> element  
+  - className (string): Specify an optional className to add.  
+"
+  (h/factory-apply ButtonSkeleton))
--- a/src/main/ch/lyrion/carbon/checkbox/ui_checkbox.cljs
+++ b/src/main/ch/lyrion/carbon/checkbox/ui_checkbox.cljs
@ -0,0 +1,23 @@
+(ns ch.lyrion.carbon.checkbox.ui-checkbox
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Checkbox/Checkbox.js" :default Checkbox]))
+
+(def ui-checkbox
+
+"Props:
+  - wrapperClassName (string): The CSS class name to be placed on the wrapping element  
+  - disabled (bool): Specify whether the Checkbox should be disabled  
+  - className (string): Specify an optional className to be applied to the <label> node  
+  - title (string): Specify a title for the <label> node for the Checkbox Default: '' 
+  - indeterminate (bool): Specify whether the Checkbox is in an indeterminate state Default: false 
+  - defaultChecked (bool): Specify whether the underlying input should be checked by default  
+  - hideLabel (bool): Specify whether the label should be hidden, or not  
+  - id (string) (required): Provide an `id` to uniquely identify the Checkbox input  
+  - checked (bool): Specify whether the underlying input should be checked  
+  - onChange (func): Receives three arguments: true/false, the checkbox's id, and the dom event.
+`(value, id, event) => console.log({value, id, event})` Default: () => {} 
+  - labelText (node) (required): Provide a label to provide a description of the Checkbox input that you are
+exposing to the user  
+"
+  (h/wrapped-factory-apply Checkbox))
--- a/src/main/ch/lyrion/carbon/checkbox/ui_checkbox_skeleton.cljs
+++ b/src/main/ch/lyrion/carbon/checkbox/ui_checkbox_skeleton.cljs
@ -0,0 +1,11 @@
+(ns ch.lyrion.carbon.checkbox.ui-checkbox-skeleton
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Checkbox/Checkbox.Skeleton.js" :default CheckboxSkeleton]))
+
+(def ui-checkbox-skeleton
+
+"Props:
+  - className (string): Specify an optional className to add.  
+"
+  (h/factory-apply CheckboxSkeleton))
--- a/src/main/ch/lyrion/carbon/code-snippet/ui_code_snippet.cljs
+++ b/src/main/ch/lyrion/carbon/code-snippet/ui_code_snippet.cljs
@ -0,0 +1,27 @@
+(ns ch.lyrion.carbon.code-snippet.ui-code-snippet
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/CodeSnippet/CodeSnippet.js" :default CodeSnippet]))
+
+(def ui-code-snippet
+
+"Props:
+  - copyButtonDescription (string): Specify the description for the Copy Button  
+  - children (string): Provide the content of your CodeSnippet as a string  
+  - feedback (string): Specify the string displayed when the snippet is copied  
+  - copyLabel (string): Specify a label to be read by screen readers on the containing <textbox>
+node  
+  - showMoreText (string): Specify a string that is displayed when the Code Snippet text is more
+than 15 lines Default: 'Show more' 
+  - type (enum): Provide the type of Code Snippet Default: 'single' 
+  - showLessText (string): Specify a string that is displayed when the Code Snippet has been
+interacted with to show more lines Default: 'Show less' 
+  - className (string): Specify an optional className to be applied to the container node  
+  - ariaLabel (string): Specify a label to be read by screen readers on the containing <textbox>
+node  
+  - light (bool): Specify whether you are using the light variant of the Code Snippet,
+typically used for inline snippet to display an alternate color  
+  - onClick (func): An optional handler to listen to the `onClick` even fired by the Copy
+Button  
+"
+  (h/factory-apply CodeSnippet))
--- a/src/main/ch/lyrion/carbon/code-snippet/ui_code_snippet_skeleton.cljs
+++ b/src/main/ch/lyrion/carbon/code-snippet/ui_code_snippet_skeleton.cljs
@ -0,0 +1,12 @@
+(ns ch.lyrion.carbon.code-snippet.ui-code-snippet-skeleton
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/CodeSnippet/CodeSnippet.Skeleton.js" :default CodeSnippetSkeleton]))
+
+(def ui-code-snippet-skeleton
+
+"Props:
+  - type (enum): The type of the code snippet, including single or multi Default: 'single' 
+  - className (string): Specify an optional className to be applied to the container node  
+"
+  (h/factory-apply CodeSnippetSkeleton))
--- a/src/main/ch/lyrion/carbon/combo-box/ui_combo_box.cljs
+++ b/src/main/ch/lyrion/carbon/combo-box/ui_combo_box.cljs
@ -0,0 +1,50 @@
+(ns ch.lyrion.carbon.combo-box.ui-combo-box
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/ComboBox/ComboBox.js" :default ComboBox]))
+
+(def ui-combo-box
+
+"Props:
+  - invalidText (string): Message which is displayed if the value is invalid.  
+  - selectedItem (union): For full control of the selection  
+  - placeholder (string) (required): Used to provide a placeholder text node before a user enters any input.
+This is only present if the control has no items selected  
+  - disabled (bool): Specify if the control should be disabled, or not Default: false 
+  - translateWithId (func): Specify a custom translation function that takes in a message identifier
+and returns the localized string for the message  
+  - itemToElement (func): Optional function to render items as custom components instead of strings.
+Defaults to null and is overriden by a getter Default: null 
+  - type (custom): Currently supports either the default type, or an inline variant Default: 'default' 
+  - invalid (bool): Specify if the currently selected value is invalid.  
+  - className (string): An optional className to add to the container node  
+  - size (custom): Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.  
+  - downshiftProps (shape): Additional props passed to Downshift  
+  - initialSelectedItem (union): Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+from their collection that are pre-selected  
+  - id (string) (required): Specify a custom `id` for the input  
+  - itemToString (func): Helper function passed to downshift that allows the library to render a
+given item to a string label. By default, it extracts the `label` field
+from a given item to serve as the item label in the list Default: item => {
+  if (typeof item === 'string') {
+    return item;
+  }
+
+  return item && item.label;
+} 
+  - onInputChange (func): Callback function to notify consumer when the text input changes.
+This provides support to change available items based on the text.
+@param {string} inputText  
+  - ariaLabel (string): 'aria-label' of the ListBox component. Default: 'Choose an item' 
+  - items (array) (required): We try to stay as generic as possible here to allow individuals to pass
+in a collection of whatever kind of data structure they prefer  
+  - onChange (func) (required): `onChange` is a utility for this controlled component to communicate to a
+consuming component when a specific dropdown item is selected.
+@param {{ selectedItem }}  
+  - light (bool): should use \"light theme\" (white background)? Default: false 
+  - shouldFilterItem (func): Specify your own filtering logic by passing in a `shouldFilterItem`
+function that takes in the current input and an item and passes back
+whether or not the item should be filtered. Default: () => true 
+  - direction (enum): Specify the direction of the combobox dropdown. Can be either top or bottom. Default: 'bottom' 
+"
+  (h/wrapped-factory-apply ComboBox))
--- a/src/main/ch/lyrion/carbon/composed-modal/ui_composed_modal.cljs
+++ b/src/main/ch/lyrion/carbon/composed-modal/ui_composed_modal.cljs
@ -0,0 +1,20 @@
+(ns ch.lyrion.carbon.composed-modal.ui-composed-modal
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/ComposedModal/ComposedModal.js" :default ComposedModal]))
+
+(def ui-composed-modal
+
+"Props:
+  - onKeyDown (func): Specify an optional handler for the `onKeyDown` event. Called for all
+`onKeyDown` events that do not close the modal Default: () => {} 
+  - selectorPrimaryFocus (string): Specify a CSS selector that matches the DOM element that should be
+focused when the Modal opens Default: '[data-modal-primary-focus]' 
+  - className (string): Specify an optional className to be applied to the modal root node  
+  - containerClassName (string): Specify an optional className to be applied to the modal node  
+  - onClose (func): Specify an optional handler for closing modal.
+Returning `false` here prevents closing modal.  
+  - open (bool): Specify whether the Modal is currently open  
+  - size (enum): Specify the size variant.  
+"
+  (h/factory-apply ComposedModal))
--- a/src/main/ch/lyrion/carbon/content-switcher/ui_content_switcher.cljs
+++ b/src/main/ch/lyrion/carbon/content-switcher/ui_content_switcher.cljs
@ -0,0 +1,16 @@
+(ns ch.lyrion.carbon.content-switcher.ui-content-switcher
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/ContentSwitcher/ContentSwitcher.js" :default ContentSwitcher]))
+
+(def ui-content-switcher
+
+"Props:
+  - selectedIndex (number): Specify a selected index for the initially selected content Default: 0 
+  - selectionMode (enum): Choose whether or not to automatically change selection on focus Default: 'automatic' 
+  - children (node): Pass in Switch components to be rendered in the ContentSwitcher  
+  - className (string): Specify an optional className to be added to the container node  
+  - onChange (func) (required): Specify an `onChange` handler that is called whenever the ContentSwitcher
+changes which item is selected  
+"
+  (h/factory-apply ContentSwitcher))
--- a/src/main/ch/lyrion/carbon/copy-button/ui_copy_button.cljs
+++ b/src/main/ch/lyrion/carbon/copy-button/ui_copy_button.cljs
@ -0,0 +1,18 @@
+(ns ch.lyrion.carbon.copy-button.ui-copy-button
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/CopyButton/CopyButton.js" :default CopyButton]))
+
+(def ui-copy-button
+
+"Props:
+  - iconDescription (string): Provide a description for the icon representing the copy action that can
+be read by screen readers Default: 'Copy to clipboard' 
+  - feedback (string): Specify the string that is displayed when the button is clicked and the
+content is copied Default: 'Copied!' 
+  - feedbackTimeout (number): Specify the time it takes for the feedback message to timeout Default: 2000 
+  - onClick (func): Specify an optional `onClick` handler that is called when the underlying
+<button> is clicked Default: () => {} 
+  - className (string): Specify an optional className to be applied to the underlying <button>  
+"
+  (h/factory-apply CopyButton))
--- a/src/main/ch/lyrion/carbon/copy/ui_copy.cljs
+++ b/src/main/ch/lyrion/carbon/copy/ui_copy.cljs
@ -0,0 +1,17 @@
+(ns ch.lyrion.carbon.copy.ui-copy
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Copy/Copy.js" :default Copy]))
+
+(def ui-copy
+
+"Props:
+  - feedback (string): Specify the string that is displayed when the button is clicked and the
+content is copied Default: 'Copied!' 
+  - feedbackTimeout (number): Specify the time it takes for the feedback message to timeout Default: 2000 
+  - onClick (func): Specify an optional `onClick` handler that is called when the underlying
+<button> is clicked Default: () => {} 
+  - children (node): Pass in content to be rendred in the underlying <button>  
+  - className (string): Specify an optional className to be applied to the underlying <button>  
+"
+  (h/factory-apply Copy))
--- a/src/main/ch/lyrion/carbon/danger-button/ui_danger_button.cljs
+++ b/src/main/ch/lyrion/carbon/danger-button/ui_danger_button.cljs
@ -0,0 +1,10 @@
+(ns ch.lyrion.carbon.danger-button.ui-danger-button
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DangerButton/DangerButton.js" :default DangerButton]))
+
+(def ui-danger-button
+
+"Props:
+"
+  (h/factory-apply DangerButton))
--- a/src/main/ch/lyrion/carbon/data-table-skeleton/ui_data_table_skeleton.cljs
+++ b/src/main/ch/lyrion/carbon/data-table-skeleton/ui_data_table_skeleton.cljs
@ -0,0 +1,17 @@
+(ns ch.lyrion.carbon.data-table-skeleton.ui-data-table-skeleton
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTableSkeleton/DataTableSkeleton.js" :default DataTableSkeleton]))
+
+(def ui-data-table-skeleton
+
+"Props:
+  - rowCount (number): Specify the number of rows that you want to render in the skeleton state Default: 5 
+  - columnCount (number): Specify the number of columns that you want to render in the skeleton state Default: 5 
+  - zebra (bool): Optionally specify whether you want the DataTable to be zebra striped Default: false 
+  - compact (bool): Optionally specify whether you want the Skeleton to be rendered as a
+compact DataTable Default: false 
+  - headers (union): Optionally specify the displayed headers Default: [] 
+  - className (string): Specify an optional className to add.  
+"
+  (h/factory-apply DataTableSkeleton))
--- a/src/main/ch/lyrion/carbon/data-table/ui_data_table.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_data_table.cljs
@ -0,0 +1,39 @@
+(ns ch.lyrion.carbon.data-table.ui-data-table
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/DataTable.js" :default DataTable]))
+
+(def ui-data-table
+
+"Data Tables are used to represent a collection of resources, displaying a
+subset of their fields in columns, or headers. We prioritize direct updates
+to the state of what we're rendering, so internally we end up normalizing the
+given data and then denormalizing it when rendering.
+
+As a result, each part of the DataTable is accessible through look-up by id,
+and updating the state of the single entity will cascade updates to the
+consumer.
+Props:
+  - overflowMenuOnHover (bool): Specify whether the overflow menu (if it exists) should be shown always, or only on hover Default: true 
+  - translateWithId (func): Optional method that takes in a message id and returns an
+internationalized string. See `DataTable.translationKeys` for all
+available message ids. Default: id => defaultTranslations[id] 
+  - radio (bool): Specify whether the control should be a radio button or inline checkbox  
+  - locale (string): Provide a string for the current locale Default: 'en' 
+  - stickyHeader (bool): Specify whether the header should be sticky.
+Still experimental: may not work with every combination of table props  
+  - isSortable (bool): Specify whether the table should be able to be sorted by its headers  
+  - size (enum): `normal` Change the row height of table Default: 'normal' 
+  - headers (arrayOf) (required): The `headers` prop represents the order in which the headers should
+appear in the table. We expect an array of objects to be passed in, where
+`key` is the name of the key in a row object, and `header` is the name of
+the header.  
+  - rows (arrayOf) (required): The `rows` prop is where you provide us with a list of all the rows that
+you want to render in the table. The only hard requirement is that this
+is an array of objects, and that each object has a unique `id` field
+available on it.  
+  - filterRows (func): Optional hook to manually control filtering of the rows from the
+TableToolbarSearch component Default: defaultFilterRows 
+  - sortRow (func): Optional hook to manually control sorting of the rows. Default: defaultSortRow 
+"
+  (h/factory-apply DataTable))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table.cljs
@ -0,0 +1,18 @@
+(ns ch.lyrion.carbon.data-table.ui-table
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/Table.js" :default Table]))
+
+(def ui-table
+
+"Props:
+  - isSortable (bool): `false` If true, will apply sorting styles Default: false 
+  - overflowMenuOnHover (bool): Specify whether the overflow menu (if it exists) should be shown always, or only on hover Default: true 
+  - className (string):   
+  - useZebraStyles (bool): `true` to add useZebraStyles striping.  
+  - size (enum): `normal` Change the row height of table  
+  - useStaticWidth (bool): `false` If true, will use a width of 'auto' instead of 100%  
+  - shouldShowBorder (bool): `false` If true, will remove the table border  
+  - stickyHeader (bool): `false` If true, will keep the header sticky (only data rows will scroll)  
+"
+  (h/factory-apply Table))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table_batch_action.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table_batch_action.cljs
@ -0,0 +1,14 @@
+(ns ch.lyrion.carbon.data-table.ui-table-batch-action
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/TableBatchAction.js" :default TableBatchAction]))
+
+(def ui-table-batch-action
+
+"Props:
+  - renderIcon (union): Optional function to render your own icon in the underlying button Default: iconAddSolid 
+  - hasIconOnly (bool): Specify if the button is an icon-only button  
+  - iconDescription (custom): If specifying the `renderIcon` prop, provide a description for that icon that can
+be read by screen readers  
+"
+  (h/factory-apply TableBatchAction))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table_batch_actions.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table_batch_actions.cljs
@ -0,0 +1,26 @@
+(ns ch.lyrion.carbon.data-table.ui-table-batch-actions
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/TableBatchActions.js" :default TableBatchActions]))
+
+(def ui-table-batch-actions
+
+"Props:
+  - translateWithId (func): Supply a method to translate internal strings with your i18n tool of
+choice. Translation keys are avabile on the `translationKeys` field for
+this component. Default: (id, state) => {
+  if (id === 'carbon.table.batch.cancel') {
+    return translationKeys[id];
+  }
+  return `${state.totalSelected} ${translationKeys[id]}`;
+} 
+  - children (node):   
+  - className (string):   
+  - shouldShowBatchActions (bool): Boolean specifier for whether or not the batch action bar should be
+displayed  
+  - totalSelected (number) (required): Numeric representation of the total number of items selected in a table.
+This number is used to derive the selection message  
+  - onCancel (func) (required): Hook required to listen for when the user initiates a cancel request
+through this comopnent  
+"
+  (h/factory-apply TableBatchActions))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table_body.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table_body.cljs
@ -0,0 +1,13 @@
+(ns ch.lyrion.carbon.data-table.ui-table-body
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/TableBody.js" :default TableBody]))
+
+(def ui-table-body
+
+"Props:
+  - aria-live (enum): `polite` Adjust the notification behavior of screen readers Default: 'polite' 
+  - className (string):   
+  - children (node):   
+"
+  (h/factory-apply TableBody))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table_container.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table_container.cljs
@ -0,0 +1,14 @@
+(ns ch.lyrion.carbon.data-table.ui-table-container
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/TableContainer.js" :default TableContainer]))
+
+(def ui-table-container
+
+"Props:
+  - className (string):   
+  - children (node):   
+  - title (node): Provide a title for the Table  
+  - description (node): Optional description text for the Table  
+"
+  (h/factory-apply TableContainer))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table_expand_header.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table_expand_header.cljs
@ -0,0 +1,18 @@
+(ns ch.lyrion.carbon.data-table.ui-table-expand-header
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/TableExpandHeader.js" :default TableExpandHeader]))
+
+(def ui-table-expand-header
+
+"Props:
+  - className (string):   
+  - children (node):   
+  - ariaLabel (custom): Specify the string read by a voice reader when the expand trigger is
+focused  
+  - isExpanded (custom): Specify whether this row is expanded or not. This helps coordinate data
+attributes so that `TableExpandRow` and `TableExapndedRow` work together  
+  - onExpand (custom): Hook for when a listener initiates a request to expand the given row  
+  - expandIconDescription (string): The description of the chevron right icon, to be put in its SVG `<title>` element.  
+"
+  (h/factory-apply TableExpandHeader))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table_expand_row.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table_expand_row.cljs
@ -0,0 +1,19 @@
+(ns ch.lyrion.carbon.data-table.ui-table-expand-row
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/TableExpandRow.js" :default TableExpandRow]))
+
+(def ui-table-expand-row
+
+"Props:
+  - expandHeader (string): The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43 Default: 'expand' 
+  - ariaLabel (string) (required): Specify the string read by a voice reader when the expand trigger is
+focused  
+  - className (string):   
+  - children (node):   
+  - isExpanded (bool) (required): Specify whether this row is expanded or not. This helps coordinate data
+attributes so that `TableExpandRow` and `TableExapndedRow` work together  
+  - onExpand (func) (required): Hook for when a listener initiates a request to expand the given row  
+  - expandIconDescription (string): The description of the chevron right icon, to be put in its SVG `<title>` element.  
+"
+  (h/factory-apply TableExpandRow))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table_expanded_row.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table_expanded_row.cljs
@ -0,0 +1,13 @@
+(ns ch.lyrion.carbon.data-table.ui-table-expanded-row
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/TableExpandedRow.js" :default TableExpandedRow]))
+
+(def ui-table-expanded-row
+
+"Props:
+  - children (node): Pass in the contents for your TableExpandedRow  
+  - className (string): Specify an optional className to be applied to the container node  
+  - colSpan (number) (required): The width of the expanded row's internal cell  
+"
+  (h/factory-apply TableExpandedRow))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table_header.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table_header.cljs
@ -0,0 +1,44 @@
+(ns ch.lyrion.carbon.data-table.ui-table-header
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/TableHeader.js" :default TableHeader]))
+
+(def ui-table-header
+
+"Props:
+  - children (node): Pass in children that will be embedded in the table header label  
+  - isSortHeader (bool): Specify whether this header is the header by which a table is being sorted
+by  
+  - translateWithId (func): Supply a method to translate internal strings with your i18n tool of
+choice. Translation keys are avabile on the `translationKeys` field for
+this component. Default: (key, { sortDirection, isSortHeader, sortStates }) => {
+  if (key === translationKeys.iconDescription) {
+    if (isSortHeader) {
+      // When transitioning, we know that the sequence of states is as follows:
+      // NONE -> ASC -> DESC -> NONE
+      if (sortDirection === sortStates.NONE) {
+        return 'Sort rows by this header in ascending order';
+      }
+      if (sortDirection === sortStates.ASC) {
+        return 'Sort rows by this header in descending order';
+      }
+
+      return 'Unsort rows by this header';
+    }
+    return 'Sort rows by this header in ascending order';
+  }
+
+  return '';
+} 
+  - scope (string): Specify the scope of this table header. You can find more info about this
+attribute at the following URL:
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope Default: 'col' 
+  - isSortable (bool): Specify whether this header is one through which a user can sort the table Default: false 
+  - className (string): Specify an optional className to be applied to the container node  
+  - colSpan (number): Specify `colSpan` as a non-negative integer value to indicate how
+many columns the TableHeader cell extends in a table  
+  - sortDirection (enum): Specify which direction we are currently sorting by, should be one of DESC,
+NONE, or ASC.  
+  - onClick (func): Hook that is invoked when the header is clicked  
+"
+  (h/factory-apply TableHeader))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table_row.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table_row.cljs
@ -0,0 +1,11 @@
+(ns ch.lyrion.carbon.data-table.ui-table-row
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/TableRow.js" :default TableRow]))
+
+(def ui-table-row
+
+"Props:
+  - className (string): Specify an optional className to be applied to the container node  
+"
+  (h/factory-apply TableRow))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table_select_all.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table_select_all.cljs
@ -0,0 +1,17 @@
+(ns ch.lyrion.carbon.data-table.ui-table-select-all
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/TableSelectAll.js" :default TableSelectAll]))
+
+(def ui-table-select-all
+
+"Props:
+  - ariaLabel (string): Specify the aria label for the underlying input control Default: 'Select all rows in the table' 
+  - checked (bool) (required): Specify whether all items are selected, or not  
+  - id (string) (required): Provide an `id` for the underlying input control  
+  - indeterminate (bool): Specify whether the selection only has a subset of all items  
+  - name (string) (required): Provide a `name` for the underlying input control  
+  - onSelect (func) (required): Provide a handler to listen to when a user initiates a selection request  
+  - className (string): The CSS class names of the cell that wraps the underlying input control  
+"
+  (h/factory-apply TableSelectAll))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table_select_row.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table_select_row.cljs
@ -0,0 +1,18 @@
+(ns ch.lyrion.carbon.data-table.ui-table-select-row
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/TableSelectRow.js" :default TableSelectRow]))
+
+(def ui-table-select-row
+
+"Props:
+  - ariaLabel (string) (required): Specify the aria label for the underlying input control  
+  - checked (bool) (required): Specify whether all items are selected, or not  
+  - disabled (bool): Specify whether the control is disabled  
+  - id (string) (required): Provide an `id` for the underlying input control  
+  - name (string) (required): Provide a `name` for the underlying input control  
+  - onSelect (func) (required): Provide a handler to listen to when a user initiates a selection request  
+  - radio (bool): Specify whether the control should be a radio button or inline checkbox  
+  - className (string): The CSS class names of the cell that wraps the underlying input control  
+"
+  (h/factory-apply TableSelectRow))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table_toolbar.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table_toolbar.cljs
@ -0,0 +1,13 @@
+(ns ch.lyrion.carbon.data-table.ui-table-toolbar
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/TableToolbar.js" :default TableToolbar]))
+
+(def ui-table-toolbar
+
+"Props:
+  - aria-label (null): null Default: 'data table toolbar' 
+  - children (node): Pass in the children that will be rendered inside the TableToolbar  
+  - size (enum): `normal` Change the row height of table  
+"
+  (h/factory-apply TableToolbar))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table_toolbar_action.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table_toolbar_action.cljs
@ -0,0 +1,13 @@
+(ns ch.lyrion.carbon.data-table.ui-table-toolbar-action
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/TableToolbarAction.js" :default TableToolbarAction]))
+
+(def ui-table-toolbar-action
+
+"Props:
+  - children (node):   
+  - className (string):   
+  - onClick (func) (required):   
+"
+  (h/factory-apply TableToolbarAction))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table_toolbar_menu.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table_toolbar_menu.cljs
@ -0,0 +1,14 @@
+(ns ch.lyrion.carbon.data-table.ui-table-toolbar-menu
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/TableToolbarMenu.js" :default TableToolbarMenu]))
+
+(def ui-table-toolbar-menu
+
+"Props:
+  - renderIcon (union): Optional prop to allow overriding the default menu icon Default: Settings16 
+  - iconDescription (string): The description of the menu icon. Default: 'Settings' 
+  - children (node) (required):   
+  - className (string): Provide an optional class name for the toolbar menu  
+"
+  (h/factory-apply TableToolbarMenu))
--- a/src/main/ch/lyrion/carbon/data-table/ui_table_toolbar_search.cljs
+++ b/src/main/ch/lyrion/carbon/data-table/ui_table_toolbar_search.cljs
@ -0,0 +1,24 @@
+(ns ch.lyrion.carbon.data-table.ui-table-toolbar-search
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DataTable/TableToolbarSearch.js" :default TableToolbarSearch]))
+
+(def ui-table-toolbar-search
+
+"Props:
+  - children (node):   
+  - searchContainerClasses (string): Provide an optional className for the overal container of the Search  
+  - tabIndex (union): Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state) Default: '0' 
+  - translateWithId (func): Provide custom text for the component for each translation id Default: id => {
+  return translationKeys[id];
+} 
+  - persistent (bool): Whether the search should be allowed to expand Default: false 
+  - persistant (custom):   
+  - className (string): Provide an optional class name for the search container  
+  - id (string): Provide an optional id for the search container  
+  - defaultValue (string): Provide an optional default value for the Search component  
+  - placeHolderText (string): Provide an optional placeholder text for the Search component  
+  - onChange (func): Provide an optional hook that is called each time the input is updated  
+  - labelText (string): Provide an optional label text for the Search component icon  
+"
+  (h/factory-apply TableToolbarSearch))
--- a/src/main/ch/lyrion/carbon/date-picker-input/ui_date_picker_input.cljs
+++ b/src/main/ch/lyrion/carbon/date-picker-input/ui_date_picker_input.cljs
@ -0,0 +1,22 @@
+(ns ch.lyrion.carbon.date-picker-input.ui-date-picker-input
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DatePickerInput/DatePickerInput.js" :default DatePickerInput]))
+
+(def ui-date-picker-input
+
+"Props:
+  - disabled (bool): Specify whether or not the input should be disabled Default: false 
+  - type (string): Specify the type of the <input> Default: 'text' 
+  - invalid (bool): Specify whether or not the input should be invalid Default: false 
+  - size (enum): Specify the size of the Date Picker Input. Currently supports either `sm` or `xl` as an option.  
+  - id (string) (required): Specify an id that unique identifies the <input>  
+  - onChange (func): Specify an `onChange` handler that is called whenever a change in the
+input field has occurred Default: () => {} 
+  - labelText (node) (required): Provide the text that will be read by a screen reader when visiting this
+control  
+  - iconDescription (string): The description of the calendar icon.  
+  - onClick (func): Provide a function to be called when the input field is clicked Default: () => {} 
+  - pattern (custom): Provide a regular expression that the input value must match Default: '\\d{1,2}\\/\\d{1,2}\\/\\d{4}' 
+"
+  (h/factory-apply DatePickerInput))
--- a/src/main/ch/lyrion/carbon/date-picker/ui_date_picker.cljs
+++ b/src/main/ch/lyrion/carbon/date-picker/ui_date_picker.cljs
@ -0,0 +1,78 @@
+(ns ch.lyrion.carbon.date-picker.ui-date-picker
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DatePicker/DatePicker.js" :default DatePicker]))
+
+(def ui-date-picker
+
+"Props:
+  - children (node): The child nodes.  
+  - short (bool): `true` to use the short version. Default: false 
+  - appendTo (object): The DOM element the Flatpicker should be inserted into. `<body>` by default.  
+  - datePickerType (enum): The type of the date picker:
+
+* `simple` - Without calendar dropdown.
+* `single` - With calendar dropdown and single date.
+* `range` - With calendar dropdown and a date range.  
+  - locale (enum): The language locale used to format the days of the week, months, and numbers.
+
+* `ar` - Arabic
+* `at` - Austria
+* `be` - Belarusian
+* `bg` - Bulgarian
+* `bn` - Bangla
+* `cat` - Catalan
+* `cs` - Czech
+* `cy` - Welsh
+* `da` - Danish
+* `de` - German
+* `en` - English
+* `eo` - Esperanto
+* `es` - Spanish
+* `et` - Estonian
+* `fa` - Persian
+* `fi` - Finnish
+* `fr` - French
+* `gr` - Greek
+* `he` - Hebrew
+* `hi` - Hindi
+* `hr` - Croatian
+* `hu` - Hungarian
+* `id` - Indonesian
+* `it` - Italian
+* `ja` - Japanese
+* `ko` - Korean
+* `lt` - Lithuanian
+* `lv` - Latvian
+* `mk` - Macedonian
+* `mn` - Mongolian
+* `ms` - Malaysian
+* `my` - Burmese
+* `nl` - Dutch
+* `no` - Norwegian
+* `pa` - Punjabi
+* `pl` - Polish
+* `pt` - Portuguese
+* `ro` - Romanian
+* `si` - Sinhala
+* `sk` - Slovak
+* `sl` - Slovenian
+* `sq` - Albanian
+* `sr` - Serbian
+* `sv` - Swedish
+* `th` - Thai
+* `tr` - Turkish
+* `uk` - Ukrainian
+* `vn` - Vietnamese
+* `zh` - Mandarin Default: 'en' 
+  - value (union): The value of the date value provided to flatpickr, could
+be a date, a date number, a date string, an array of dates.  
+  - onClose (func): The `close` event handler.  
+  - maxDate (string): The maximum date that a user can pick to.  
+  - className (string): The CSS class names.  
+  - minDate (string): The minimum date that a user can start picking from.  
+  - dateFormat (string): The date format. Default: 'm/d/Y' 
+  - onChange (func): The `change` event handler.  
+  - light (bool): `true` to use the light version. Default: false 
+"
+  (h/factory-apply DatePicker))
--- a/src/main/ch/lyrion/carbon/date-picker/ui_date_picker_skeleton.cljs
+++ b/src/main/ch/lyrion/carbon/date-picker/ui_date_picker_skeleton.cljs
@ -0,0 +1,12 @@
+(ns ch.lyrion.carbon.date-picker.ui-date-picker-skeleton
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/DatePicker/DatePicker.Skeleton.js" :default DatePickerSkeleton]))
+
+(def ui-date-picker-skeleton
+
+"Props:
+  - range (bool): Specify whether the skeleton should be of range date picker.  
+  - className (string): Specify an optional className to add.  
+"
+  (h/factory-apply DatePickerSkeleton))
--- a/src/main/ch/lyrion/carbon/dropdown/ui_dropdown.cljs
+++ b/src/main/ch/lyrion/carbon/dropdown/ui_dropdown.cljs
@ -0,0 +1,45 @@
+(ns ch.lyrion.carbon.dropdown.ui-dropdown
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Dropdown/Dropdown.js" :default Dropdown]))
+
+(def ui-dropdown
+
+"Props:
+  - helperText (union): Provide helper text that is used alongside the control label for
+additional help Default: '' 
+  - invalidText (string): Message which is displayed if the value is invalid.  
+  - selectedItem (union): In the case you want to control the dropdown selection entirely.  
+  - disabled (bool): Disable the control Default: false 
+  - translateWithId (func): Callback function for translating ListBoxMenuIcon SVG title  
+  - itemToElement (func): Function to render items as custom components instead of strings.
+Defaults to null and is overriden by a getter Default: null 
+  - type (custom): The dropdown type, `default` or `inline` Default: 'default' 
+  - invalid (bool): Specify if the currently selected value is invalid.  
+  - size (custom): Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.  
+  - initialSelectedItem (union): Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+from their collection that are pre-selected  
+  - label (node) (required): Generic `label` that will be used as the textual representation of what
+this field is for  
+  - id (string) (required): Specify a custom `id`  
+  - itemToString (func): Helper function passed to downshift that allows the library to render a
+given item to a string label. By default, it extracts the `label` field
+from a given item to serve as the item label in the list. Default: item => {
+  if (typeof item === 'string') {
+    return item;
+  }
+
+  return item ? item.label : '';
+} 
+  - ariaLabel (string): 'aria-label' of the ListBox component.  
+  - titleText (union): Provide the title text that will be read by a screen reader when
+visiting this control Default: '' 
+  - items (array) (required): We try to stay as generic as possible here to allow individuals to pass
+in a collection of whatever kind of data structure they prefer  
+  - onChange (func): `onChange` is a utility for this controlled component to communicate to a
+consuming component what kind of internal state changes are occuring.  
+  - light (bool): `true` to use the light version. Default: false 
+  - direction (enum): Specify the direction of the dropdown. Can be either top or bottom. Default: 'bottom' 
+  - inline (bool): Specify whether you want the inline version of this control  
+"
+  (h/factory-apply Dropdown))
--- a/src/main/ch/lyrion/carbon/dropdown/ui_dropdown_skeleton.cljs
+++ b/src/main/ch/lyrion/carbon/dropdown/ui_dropdown_skeleton.cljs
@ -0,0 +1,12 @@
+(ns ch.lyrion.carbon.dropdown.ui-dropdown-skeleton
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Dropdown/Dropdown.Skeleton.js" :default DropdownSkeleton]))
+
+(def ui-dropdown-skeleton
+
+"Props:
+  - inline (bool): Specify whether you want the inline version of this control Default: false 
+  - className (string): Specify an optional className to add.  
+"
+  (h/factory-apply DropdownSkeleton))
--- a/src/main/ch/lyrion/carbon/error-boundary/ui_error_boundary.cljs
+++ b/src/main/ch/lyrion/carbon/error-boundary/ui_error_boundary.cljs
@ -0,0 +1,27 @@
+(ns ch.lyrion.carbon.error-boundary.ui-error-boundary
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/ErrorBoundary/ErrorBoundary.js" :default ErrorBoundary]))
+
+(def ui-error-boundary
+
+"React introduced additional lifecycle methods in v16 for capturing errors
+that occur in a specific sub-tree of components. This component helps to
+consolidate some of the duplication that occurs when using these lifecycle
+methods across a codebase. In addition, it allows you to specify the fallback
+UI to display when an error occurs in the sub-tree through the `fallback`
+prop.
+
+This component roughly follows the React.js docs example code for these
+methods. In addition, it takes advantage of an `ErrorBoundaryContext` so that
+consumers can specify their own logic for logging errors. For example,
+reporting an error in the UI to an external service for every `ErrorBoundary`
+used.
+
+Reference:
+https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries
+Props:
+  - children (node):   
+  - fallback (node):   
+"
+  (h/factory-apply ErrorBoundary))
--- a/src/main/ch/lyrion/carbon/factory_helpers.cljs
+++ b/src/main/ch/lyrion/carbon/factory_helpers.cljs
@ -0,0 +1,16 @@
+(ns ch.lyrion.carbon.factory-helpers
+  (:require
+   ;;[goog.object :as gobj]
+   [com.fulcrologic.fulcro.dom :as dom]))
+
+(defn factory-apply
+  [class]
+  (fn [props & children]
+    (apply js/React.createElement class (clj->js props) children)))
+
+(defn wrapped-factory-apply
+  "Returns a factory that wraps the given class as an input. Requires that the target item support `:value` as a prop."
+  [class]
+  (let [factory (dom/wrap-form-element class)]
+    (fn [props & children]
+      (apply factory (clj->js props) children))))
--- a/src/main/ch/lyrion/carbon/file-uploader/ui_file_uploader.cljs
+++ b/src/main/ch/lyrion/carbon/file-uploader/ui_file_uploader.cljs
@ -0,0 +1,29 @@
+(ns ch.lyrion.carbon.file-uploader.ui-file-uploader
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/FileUploader/FileUploader.js" :default FileUploader]))
+
+(def ui-file-uploader
+
+"Props:
+  - labelTitle (string): Specify the title text of this <FileUploader>  
+  - name (string): Provide a name for the underlying <input> node  
+  - buttonKind (enum): Specify the type of the <FileUploaderButton> Default: 'primary' 
+  - multiple (bool): Specify if the component should accept multiple files to upload Default: false 
+  - filenameStatus (enum): Specify the status of the File Upload Default: 'uploading' 
+  - labelDescription (string): Specify the description text of this <FileUploader>  
+  - className (string): Provide a custom className to be applied to the container node  
+  - size (enum): Specify the size of the FileUploaderButton, from a list of available
+sizes. For `default` buttons, this prop can remain unspecified.  
+  - onChange (func): Provide an optional `onChange` hook that is called each time the input is
+changed  
+  - onDelete (func): Provide an optional `onDelete` hook that is called when an uploaded item
+is removed  
+  - iconDescription (string): Provide a description for the complete/close icon that can be read by screen readers Default: 'Provide icon description' 
+  - buttonLabel (string): Provide the label text to be read by screen readers when interacting with
+the <FileUploaderButton> Default: '' 
+  - onClick (func): Provide an optional `onClick` hook that is called each time the
+FileUploader is clicked Default: () => {} 
+  - accept (arrayOf): Specify the types of files that this input should be able to receive Default: [] 
+"
+  (h/factory-apply FileUploader))
--- a/src/main/ch/lyrion/carbon/file-uploader/ui_file_uploader_button.cljs
+++ b/src/main/ch/lyrion/carbon/file-uploader/ui_file_uploader_button.cljs
@ -0,0 +1,31 @@
+(ns ch.lyrion.carbon.file-uploader.ui-file-uploader-button
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/FileUploader/FileUploaderButton.js" :default FileUploaderButton]))
+
+(def ui-file-uploader-button
+
+"Props:
+  - role (string): Provide an accessibility role for the <FileUploaderButton> Default: 'button' 
+  - tabIndex (number): Provide a custom tabIndex value for the <FileUploaderButton> Default: 0 
+  - listFiles (bool): Specify whether you want the component to list the files that have been
+submitted to be uploaded  
+  - disabled (bool): Specify whether file input is disabled Default: false 
+  - name (string): Provide a name for the underlying <input> node  
+  - buttonKind (enum): Specify the type of underlying button Default: 'primary' 
+  - multiple (bool): Specify if the component should accept multiple files to upload Default: false 
+  - className (string): Provide a custom className to be applied to the container node  
+  - size (enum): Specify the size of the button, from a list of available sizes.
+For `default` buttons, this prop can remain unspecified.  
+  - id (string): Provide a unique id for the underlying <input> node  
+  - onChange (func): Provide an optional `onChange` hook that is called each time the <input>
+value changes Default: function noop() {} 
+  - labelText (node): Provide the label text to be read by screen readers when interacting with
+this control Default: 'Add file' 
+  - disableLabelChanges (bool): Specify whether you want to disable any updates to the FileUploaderButton
+label Default: false 
+  - onClick (func): Provide an optional `onClick` hook that is called each time the button is
+clicked  
+  - accept (arrayOf): Specify the types of files that this input should be able to receive  
+"
+  (h/factory-apply FileUploaderButton))
--- a/src/main/ch/lyrion/carbon/file-uploader/ui_file_uploader_drop_container.cljs
+++ b/src/main/ch/lyrion/carbon/file-uploader/ui_file_uploader_drop_container.cljs
@ -0,0 +1,22 @@
+(ns ch.lyrion.carbon.file-uploader.ui-file-uploader-drop-container
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/FileUploader/FileUploaderDropContainer.js" :default FileUploaderDropContainer]))
+
+(def ui-file-uploader-drop-container
+
+"Props:
+  - role (string): Provide an accessibility role for the <FileUploaderButton>  
+  - tabIndex (number): Provide a custom tabIndex value for the <FileUploaderButton> Default: 0 
+  - disabled (bool): Specify whether file input is disabled  
+  - name (string): Provide a name for the underlying <input> node  
+  - multiple (bool): Specify if the component should accept multiple files to upload Default: false 
+  - className (string): Provide a custom className to be applied to the container node  
+  - id (string): Provide a unique id for the underlying <input> node  
+  - onAddFiles (func): Event handler that is called after files are added to the uploader
+The event handler signature looks like `onAddFiles(evt, { addedFiles })` Default: () => {} 
+  - labelText (string): Provide the label text to be read by screen readers when interacting with
+this control Default: 'Add file' 
+  - accept (arrayOf): Specify the types of files that this input should be able to receive Default: [] 
+"
+  (h/factory-apply FileUploaderDropContainer))
--- a/src/main/ch/lyrion/carbon/file-uploader/ui_file_uploader_item.cljs
+++ b/src/main/ch/lyrion/carbon/file-uploader/ui_file_uploader_item.cljs
@ -0,0 +1,19 @@
+(ns ch.lyrion.carbon.file-uploader.ui-file-uploader-item
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/FileUploader/FileUploaderItem.js" :default FileUploaderItem]))
+
+(def ui-file-uploader-item
+
+"Props:
+  - status (enum): Status of the file upload Default: 'uploading' 
+  - onDelete (func): Event handler that is called after removing a file from the file uploader
+The event handler signature looks like `onDelete(evt, { uuid })` Default: () => {} 
+  - uuid (string): Unique identifier for the file object  
+  - name (string): Name of the uploaded file  
+  - iconDescription (string): Description of status icon (displayed in native tooltip)  
+  - invalid (bool): Specify if the currently uploaded file is invalid  
+  - errorSubject (string): Error message subject for an invalid file upload  
+  - errorBody (string): Error message body for an invalid file upload  
+"
+  (h/factory-apply FileUploaderItem))
--- a/src/main/ch/lyrion/carbon/file-uploader/ui_file_uploader_skeleton.cljs
+++ b/src/main/ch/lyrion/carbon/file-uploader/ui_file_uploader_skeleton.cljs
@ -0,0 +1,11 @@
+(ns ch.lyrion.carbon.file-uploader.ui-file-uploader-skeleton
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/FileUploader/FileUploader.Skeleton.js" :default FileUploaderSkeleton]))
+
+(def ui-file-uploader-skeleton
+
+"Props:
+  - className (string): Specify an optional className to add.  
+"
+  (h/factory-apply FileUploaderSkeleton))
--- a/src/main/ch/lyrion/carbon/file-uploader/ui_filename.cljs
+++ b/src/main/ch/lyrion/carbon/file-uploader/ui_filename.cljs
@ -0,0 +1,13 @@
+(ns ch.lyrion.carbon.file-uploader.ui-filename
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/FileUploader/Filename.js" :default Filename]))
+
+(def ui-filename
+
+"Props:
+  - iconDescription (string): Provide a description of the SVG icon to denote file upload status Default: 'Uploading file' 
+  - status (enum): Status of the file upload Default: 'uploading' 
+  - tabIndex (string): Provide a custom tabIndex value for the <Filename> Default: '0' 
+"
+  (h/factory-apply Filename))
--- a/src/main/ch/lyrion/carbon/fluid-form/ui_fluid_form.cljs
+++ b/src/main/ch/lyrion/carbon/fluid-form/ui_fluid_form.cljs
@ -0,0 +1,12 @@
+(ns ch.lyrion.carbon.fluid-form.ui-fluid-form
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/FluidForm/FluidForm.js" :default FluidForm]))
+
+(def ui-fluid-form
+
+"Props:
+  - children (node): Provide children to be rendered inside of the <form> element  
+  - className (string): Provide a custom className to be applied on the containing <form> node  
+"
+  (h/factory-apply FluidForm))
--- a/src/main/ch/lyrion/carbon/form-group/ui_form_group.cljs
+++ b/src/main/ch/lyrion/carbon/form-group/ui_form_group.cljs
@ -0,0 +1,16 @@
+(ns ch.lyrion.carbon.form-group.ui-form-group
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/FormGroup/FormGroup.js" :default FormGroup]))
+
+(def ui-form-group
+
+"Props:
+  - invalid (bool): Specify whether the <FormGroup> is invalid Default: false 
+  - message (bool): Specify whether the message should be displayed in the <FormGroup> Default: false 
+  - messageText (string): Provide the text for the message in the <FormGroup> Default: '' 
+  - children (node): Provide the children form elements to be rendered inside of the <fieldset>  
+  - legendText (string) (required): Provide the text to be rendered inside of the fieldset <legend>  
+  - className (string): Provide a custom className to be applied to the containing <fieldset> node  
+"
+  (h/factory-apply FormGroup))
--- a/src/main/ch/lyrion/carbon/form-item/ui_form_item.cljs
+++ b/src/main/ch/lyrion/carbon/form-item/ui_form_item.cljs
@ -0,0 +1,12 @@
+(ns ch.lyrion.carbon.form-item.ui-form-item
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/FormItem/FormItem.js" :default FormItem]))
+
+(def ui-form-item
+
+"Props:
+  - children (node): Provide content to be rendered in the form item  
+  - className (string): Provide a custom className to be applied to the containing node  
+"
+  (h/factory-apply FormItem))
--- a/src/main/ch/lyrion/carbon/form-label/ui_form_label.cljs
+++ b/src/main/ch/lyrion/carbon/form-label/ui_form_label.cljs
@ -0,0 +1,13 @@
+(ns ch.lyrion.carbon.form-label.ui-form-label
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/FormLabel/FormLabel.js" :default FormLabel]))
+
+(def ui-form-label
+
+"Props:
+  - children (node): Specify the content of the form label  
+  - className (string): Provide a custom className to be applied to the containing <label> node  
+  - id (string): Provide a unique id for the given <FormLabel>  
+"
+  (h/factory-apply FormLabel))
--- a/src/main/ch/lyrion/carbon/form/ui_form.cljs
+++ b/src/main/ch/lyrion/carbon/form/ui_form.cljs
@ -0,0 +1,12 @@
+(ns ch.lyrion.carbon.form.ui-form
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Form/Form.js" :default Form]))
+
+(def ui-form
+
+"Props:
+  - children (node): Provide children to be rendered inside of the <form> element  
+  - className (string): Provide a custom className to be applied on the containing <form> node  
+"
+  (h/factory-apply Form))
--- a/src/main/ch/lyrion/carbon/grid/ui_column.cljs
+++ b/src/main/ch/lyrion/carbon/grid/ui_column.cljs
@ -0,0 +1,33 @@
+(ns ch.lyrion.carbon.grid.ui-column
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Grid/Column.js" :default Column]))
+
+(def ui-column
+
+"Props:
+  - as (union): Provide a custom element to render instead of the default <div> Default: 'div' 
+  - sm (custom): Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
+This breakpoint supports 4 columns by default.
+
+@see https://www.carbondesignsystem.com/guidelines/layout#breakpoints  
+  - md (custom): Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
+This breakpoint supports 8 columns by default.
+
+@see https://www.carbondesignsystem.com/guidelines/layout#breakpoints  
+  - lg (custom): Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
+This breakpoint supports 16 columns by default.
+
+@see https://www.carbondesignsystem.com/guidelines/layout#breakpoints  
+  - xlg (custom): Specify column span for the `xlg` breakpoint (Default breakpoint up to
+1584px) This breakpoint supports 16 columns by default.
+
+@see https://www.carbondesignsystem.com/guidelines/layout#breakpoints  
+  - max (custom): Specify column span for the `max` breakpoint. This breakpoint supports 16
+columns by default.
+
+@see https://www.carbondesignsystem.com/guidelines/layout#breakpoints  
+  - className (string): Specify a custom className to be applied to the `Column`  
+  - children (node): Pass in content that will be rendered within the `Column`  
+"
+  (h/factory-apply Column))
--- a/src/main/ch/lyrion/carbon/grid/ui_grid.cljs
+++ b/src/main/ch/lyrion/carbon/grid/ui_grid.cljs
@ -0,0 +1,16 @@
+(ns ch.lyrion.carbon.grid.ui-grid
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Grid/Grid.js" :default Grid]))
+
+(def ui-grid
+
+"Props:
+  - as (union): Provide a custom element to render instead of the default <div> Default: 'div' 
+  - condensed (bool): Collapse the gutter to 2px. Useful for fluid layouts.
+Rows have 2px of margin between them to match gutter. Default: false 
+  - fullWidth (bool): Remove the default max width that the grid has set Default: false 
+  - className (string): Specify a custom className to be applied to the `Grid`  
+  - children (node): Pass in content that will be rendered within the `Grid`  
+"
+  (h/factory-apply Grid))
--- a/src/main/ch/lyrion/carbon/grid/ui_row.cljs
+++ b/src/main/ch/lyrion/carbon/grid/ui_row.cljs
@ -0,0 +1,15 @@
+(ns ch.lyrion.carbon.grid.ui-row
+  (:require
+    [ch.lyrion.carbon.factory-helpers :as h]
+    ["carbon-components-react/lib/components/Grid/Row.js" :default Row]))
+
+(def ui-row
+
+"Props:
+  - as (union): Provide a custom element to render instead of the default <div> Default: 'div' 
+  - condensed (bool): Specify a single row as condensed.Rows that are adjacent
+and are condensed will have 2px of margin between them to match gutter. Default: false 
+  - className (string): Specify a custom className to be applied to the `Row`  
+  - children (node): Pass in content that will be rendered within the `Row`