In the beginning there was darkness

This commit is contained in:
Daniel Ziltener 2020-05-31 14:26:20 +02:00
commit 11018f613b
165 changed files with 4662 additions and 0 deletions

6
.gitignore vendored Normal file
View File

@ -0,0 +1,6 @@
*.js
.nrepl-port
.shadow-cljs
.cpcache
resources/public/js
node_modules

134
README.adoc Normal file
View File

@ -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

12
deps.edn Normal file
View File

@ -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"}}}}}

1358
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

28
package.json Normal file
View File

@ -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"
}
}

View File

@ -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>

10
shadow-cljs.edn Normal file
View File

@ -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]}}}}}

117
src/dev/user.clj Normal file
View File

@ -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)))))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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))

View File

@ -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`
"
(h/factory-apply Row))

View File

@ -0,0 +1,22 @@
(ns ch.lyrion.carbon.icon.ui-icon
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/Icon/Icon.js" :default Icon]))
(def ui-icon
"Props:
- role (string): The `role` attribute. Default: 'img'
- description (string) (required): The icon description.
- iconRef (func): The `ref` callback for the icon.
- fillRule (string): The `<svg>` `fillRule` attribute. Default: 'evenodd'
- fill (string): The `<svg>` `fill` attribute.
- width (string): The `<svg>` `width` attribute.
- icon (shape): The icon data.
- className (string): The CSS class name.
- style (object): The CSS styles.
- iconTitle (string): The icon title.
- viewBox (string): The `<svg>` `viewbox` attribute.
- height (string): The `<svg>` `height` attribute.
"
(h/factory-apply Icon))

View File

@ -0,0 +1,12 @@
(ns ch.lyrion.carbon.icon.ui-icon-skeleton
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/Icon/Icon.Skeleton.js" :default IconSkeleton]))
(def ui-icon-skeleton
"Props:
- style (object): The CSS styles.
- className (string): Specify an optional className to add.
"
(h/factory-apply IconSkeleton))

View File

@ -0,0 +1,18 @@
(ns ch.lyrion.carbon.inline-loading.ui-inline-loading
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/InlineLoading/InlineLoading.js" :default InlineLoading]))
(def ui-inline-loading
"Props:
- status (enum): Specify the loading status Default: success ? 'finished' : 'active'
- successDelay (number): Provide a delay for the `setTimeout` for success Default: 1500
- className (string): Specify a custom className to be applied to the container node
- success (custom): Specify whether the load was successful
- description (node): Specify the description for the inline loading text
- iconDescription (string): Specify the description for the inline loading text
- onSuccess (func): Provide an optional handler to be inovked when <InlineLoading> is
successful
"
(h/factory-apply InlineLoading))

View File

@ -0,0 +1,16 @@
(ns ch.lyrion.carbon.link.ui-link
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/Link/Link.js" :default Link]))
(def ui-link
"Props:
- children (node): Provide the content for the Link
- className (string): Provide a custom className to be applied to the containing <a> node
- href (string): Provide the `href` attribute for the <a> node
- disabled (bool): Specify if the control should be disabled, or not
- inline (bool): Specify whether you want the inline version of this control
- visited (bool): Specify whether you want the link to receive visited styles after the link has been clicked
"
(h/factory-apply Link))

View File

@ -0,0 +1,18 @@
(ns ch.lyrion.carbon.list-box.ui-list-box
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/ListBox/ListBox.js" :default ListBox]))
(def ui-list-box
"`ListBox` is a generic container component that handles creating the
container class name in response to certain props.
Props:
- disabled (bool): Specify whether the ListBox is currently disabled Default: false
- type (custom): Specify the \"type\" of the ListBox. Currently supports either `default` or
`inline` as an option. Default: 'default'
- children (node): Provide the contents of your ListBox
- className (string): Specify a class name to be applied on the containing list box node
- size (custom): Specify the size of the ListBox. Currently supports either `sm` or `xl` as an option.
"
(h/factory-apply ListBox))

View File

@ -0,0 +1,17 @@
(ns ch.lyrion.carbon.list-box.ui-list-box-field
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/ListBox/ListBoxField.js" :default ListBoxField]))
(def ui-list-box-field
"`ListBoxField` is responsible for creating the containing node for valid
elements inside of a field. It also provides a11y-related attributes like
`role` to make sure a user can focus the given field.
Props:
- children (node): Provide the contents of your ListBoxField
- id (string) (required): Specify a custom `id`
- disabled (bool): Specify if the parent <ListBox> is disabled
- tabIndex (union): Optional prop to specify the tabIndex of the <ListBox> trigger button
"
(h/factory-apply ListBoxField))

View File

@ -0,0 +1,15 @@
(ns ch.lyrion.carbon.list-box.ui-list-box-menu
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/ListBox/ListBoxMenu.js" :default ListBoxMenu]))
(def ui-list-box-menu
"`ListBoxMenu` is a simple container node that isolates the `list-box__menu`
class into a single component. It is also being used to validate given
`children` components.
Props:
- children (custom): Provide the contents of your ListBoxMenu
- id (string) (required): Specify a custom `id`
"
(h/factory-apply ListBoxMenu))

View File

@ -0,0 +1,17 @@
(ns ch.lyrion.carbon.list-box.ui-list-box-menu-icon
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/ListBox/ListBoxMenuIcon.js" :default ListBoxMenuIcon]))
(def ui-list-box-menu-icon
"`ListBoxMenuIcon` is used to orient the icon up or down depending on the
state of the menu for a given `ListBox`
Props:
- translateWithId (func): i18n hook used to provide the appropriate description for the given menu
icon. This function takes in an id defined in `translationIds` and should
return a string message for that given message id. Default: id => defaultTranslations[id]
- isOpen (bool) (required): Specify whether the menu is currently open, which will influence the
direction of the menu icon
"
(h/factory-apply ListBoxMenuIcon))

View File

@ -0,0 +1,17 @@
(ns ch.lyrion.carbon.list-box.ui-list-box-menu-item
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/ListBox/ListBoxMenuItem.js" :default ListBoxMenuItem]))
(def ui-list-box-menu-item
"`ListBoxMenuItem` is a helper component for managing the container class
name, alongside any classes for any corresponding states, for a generic list
box menu item.
Props:
- isActive (bool): Specify whether the current menu item is \"active\". Default: false
- isHighlighted (bool): Specify whether the current menu item is \"highlighed\". Default: false
- children (node): Specify any children nodes that hsould be rendered inside of the ListBox
Menu Item
"
(h/factory-apply ListBoxMenuItem))

View File

@ -0,0 +1,25 @@
(ns ch.lyrion.carbon.list-box.ui-list-box-selection
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/ListBox/ListBoxSelection.js" :default ListBoxSelection]))
(def ui-list-box-selection
"`ListBoxSelection` is used to provide controls for clearing a selection, in
addition to conditionally rendering a badge if the control has more than one
selection.
Props:
- translateWithId (func): i18n hook used to provide the appropriate description for the given menu
icon. This function takes in an id defined in `translationIds` and should
return a string message for that given message id. Default: id => defaultTranslations[id]
- disabled (bool): Specify whether or not the clear selection element should be disabled
- clearSelection (func) (required): Specify a function to be invoked when a user interacts with the clear
selection element.
- selectionCount (number): Specify an optional `selectionCount` value that will be used to determine
whether the selection should display a badge or a single clear icon.
- onClick (func): Specify an optional `onClick` handler that is called when the underlying
clear selection element is clicked
- onKeyDown (func): Specify an optional `onKeyDown` handler that is called when the underlying
clear selection element fires a keydown event
"
(h/factory-apply ListBoxSelection))

View File

@ -0,0 +1,12 @@
(ns ch.lyrion.carbon.list-item.ui-list-item
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/ListItem/ListItem.js" :default ListItem]))
(def ui-list-item
"Props:
- children (node): Specify the content for the ListItem
- className (string): Specify an optional className to apply to the underlying <li> node
"
(h/factory-apply ListItem))

View File

@ -0,0 +1,16 @@
(ns ch.lyrion.carbon.loading.ui-loading
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/Loading/Loading.js" :default Loading]))
(def ui-loading
"Props:
- active (bool): Specify whether you want the loading indicator to be spinning or not Default: true
- withOverlay (bool): Specify whether you want the loader to be applied with an overlay Default: true
- small (bool): Specify whether you would like the small variant of <Loading> Default: false
- description (string): Specify an description that would be used to best describe the loading state Default: 'Active loading indicator'
- id (string): Provide an `id` to uniquely identify the label
- className (string): Provide an optional className to be applied to the containing node
"
(h/factory-apply Loading))

View File

@ -0,0 +1,32 @@
(ns ch.lyrion.carbon.modal-wrapper.ui-modal-wrapper
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/ModalWrapper/ModalWrapper.js" :default ModalWrapper]))
(def ui-modal-wrapper
"Props:
- secondaryButtonText (string): Default: 'Cancel'
- children (node):
- modalText (string):
- disabled (bool): Default: false
- passiveModal (bool):
- triggerButtonIconDescription (string): Default: 'Provide icon description if icon is used'
- handleOpen (func):
- handleSubmit (func):
- modalHeading (string):
- shouldCloseAfterSubmit (bool):
- renderTriggerButtonIcon (union):
- buttonTriggerClassName (string):
- status (string):
- id (string):
- withHeader (bool):
- triggerButtonKind (enum): Default: 'primary'
- modalLabel (string):
- buttonTriggerText (node):
- onKeyDown (null): null Default: () => {}
- selectorPrimaryFocus (null): null Default: '[data-modal-primary-focus]'
- modalBeforeContent (bool):
- primaryButtonText (string): Default: 'Save'
"
(h/factory-apply ModalWrapper))

View File

@ -0,0 +1,42 @@
(ns ch.lyrion.carbon.modal.ui-modal
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/Modal/Modal.js" :default Modal]))
(def ui-modal
"Props:
- secondaryButtonText (string): Specify the text for the secondary button
- selectorsFloatingMenus (arrayOf): Specify CSS selectors that match DOM elements working as floating menus.
Focusing on those elements won't trigger \"focus-wrap\" behavior
- open (bool): Specify whether the Modal is currently open
- focusTrap (custom): Deprecated; Used for advanced focus-wrapping feature using 3rd party library,
but it's now achieved without a 3rd party library.
- children (node): Provide the contents of your Modal
- passiveModal (bool): Specify whether the modal should be button-less Default: false
- modalHeading (node): Specify the content of the modal header title. Default: ''
- onRequestSubmit (func): Specify a handler for \"submitting\" modal.
The handler should care of closing modal, e.g. changing `open` prop, if necessary. Default: () => {}
- primaryButtonDisabled (bool): Specify whether the Button should be disabled, or not Default: false
- onRequestClose (func): Specify a handler for closing modal.
The handler should care of closing modal, e.g. changing `open` prop. Default: () => {}
- shouldSubmitOnEnter (bool): Specify if Enter key should be used as \"submit\" action
- className (string): Specify an optional className to be applied to the modal root node
- size (enum): Specify the size variant.
- onSecondarySubmit (func): Specify a handler for the secondary button.
Useful if separate handler from `onRequestClose` is desirable
- danger (bool): Specify whether the Modal is for dangerous actions
- hasScrollingContent (bool): Specify whether the modal contains scrolling content Default: false
- id (string): Specify the DOM element ID of the top-level node.
- modalLabel (node): Specify the content of the modal header label. Default: ''
- modalAriaLabel (string): Specify a label to be read by screen readers on the modal root node
- aria-label (custom): Required props for the accessibility label of the header
- onKeyDown (func): Specify a handler for keypresses. 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]'
- hasForm (bool): Provide whether the modal content has a form element.
If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
- iconDescription (string): Provide a description for \"close\" icon that can be read by screen readers Default: 'Close'
- primaryButtonText (string): Specify the text for the primary button
"
(h/factory-apply Modal))

View File

@ -0,0 +1,41 @@
(ns ch.lyrion.carbon.multi-select.ui-filterable-multi-select
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/MultiSelect/FilterableMultiSelect.js" :default FilterableMultiSelect]))
(def ui-filterable-multi-select
"Props:
- useTitleInItem (bool): Specify title to show title on hover
- open (bool): Initialize the component with an open(`true`)/closed(`false`) menu. Default: false
- invalidText (string): If invalid, what is the error?
- placeholder (string) (required): Generic `placeholder` that will be used as the textual representation of
what this field is for
- disabled (bool): Disable the control Default: false
- translateWithId (func): Callback function for translating ListBoxMenuIcon SVG title
- locale (string): Specify the locale of the control. Used for the default `compareItems`
used for sorting the list of items in the control. Default: 'en'
- invalid (bool): Is the current selection invalid?
- size (custom): Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
- initialSelectedItems (array): Allow users to pass in arbitrary items from their collection that are
pre-selected Default: []
- selectionFeedback (enum): Specify feedback (mode) of the selection.
`top`: selected item jumps to top
`fixed`: selected item stays at it's position
`top-after-reopen`: selected item jump to top after reopen dropdown Default: 'top-after-reopen'
- downshiftProps (shape): Additional props passed to Downshift
- 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: defaultItemToString
- sortItems (null): null Default: defaultSortItems
- 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
- filterItems (null): null Default: defaultFilterItems
- compareItems (null): null Default: defaultCompareItems
- 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
"
(h/factory-apply FilterableMultiSelect))

View File

@ -0,0 +1,42 @@
(ns ch.lyrion.carbon.multi-select.ui-multi-select
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/MultiSelect/MultiSelect.js" :default MultiSelect]))
(def ui-multi-select
"Props:
- useTitleInItem (bool): Specify title to show title on hover
- open (bool): Initialize the component with an open(`true`)/closed(`false`) menu. Default: false
- invalidText (string): If invalid, what is the error?
- disabled (bool): Disable the control Default: false
- translateWithId (func): Callback function for translating ListBoxMenuIcon SVG title
- locale (string): Specify the locale of the control. Used for the default `compareItems`
used for sorting the list of items in the control. Default: 'en'
- type (enum): Specify 'inline' to create an inline multi-select. Default: 'default'
- invalid (bool): Is the current selection invalid?
- size (custom): Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
- title (null): null Default: false
- initialSelectedItems (array): Allow users to pass in arbitrary items from their collection that are
pre-selected Default: []
- selectionFeedback (enum): Specify feedback (mode) of the selection.
`top`: selected item jumps to top
`fixed`: selected item stays at it's position
`top-after-reopen`: selected item jump to top after reopen dropdown Default: 'top-after-reopen'
- downshiftProps (shape): Additional props passed to Downshift
- 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: defaultItemToString
- sortItems (null): null Default: defaultSortItems
- 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
- compareItems (null): null Default: defaultCompareItems
- 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 multiselect dropdown. Can be either top or bottom. Default: 'bottom'
"
(h/factory-apply MultiSelect))

View File

@ -0,0 +1,10 @@
(ns ch.lyrion.carbon.notification.ui-a11y-warning-icon
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/Notification/a11yIconWarningSolid.js" :default a11yWarningIcon]))
(def ui-a11y-warning-icon
"Props:
"
(h/factory-apply a11yWarningIcon))

View File

@ -0,0 +1,13 @@
(ns ch.lyrion.carbon.notification.ui-notification-action-button
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/Notification/Notification.js" :default NotificationActionButton]))
(def ui-notification-action-button
"Props:
- className (string): Specify an optional className to be applied to the notification action button
- children (node): Specify the content of the notification action button.
- onClick (func): Optionally specify a click handler for the notification action button.
"
(h/factory-apply NotificationActionButton))

View File

@ -0,0 +1,12 @@
(ns ch.lyrion.carbon.number-input.ui-number-input-skeleton
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/NumberInput/NumberInput.Skeleton.js" :default NumberInputSkeleton]))
(def ui-number-input-skeleton
"Props:
- hideLabel (bool): Specify whether the label should be hidden, or not
- className (string): Specify an optional className to add to the form item wrapper.
"
(h/factory-apply NumberInputSkeleton))

View File

@ -0,0 +1,13 @@
(ns ch.lyrion.carbon.ordered-list.ui-ordered-list
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/OrderedList/OrderedList.js" :default OrderedList]))
(def ui-ordered-list
"Props:
- nested (bool): Specify whether this ordered list is nested inside of another nested list Default: false
- children (node): Provide list items to be rendered in the ordered list
- className (string): Provide an optional className to be applied to the containing <ol> node
"
(h/factory-apply OrderedList))

View File

@ -0,0 +1,29 @@
(ns ch.lyrion.carbon.overflow-menu-item.ui-overflow-menu-item
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/OverflowMenuItem/OverflowMenuItem.js" :default OverflowMenuItem]))
(def ui-overflow-menu-item
"Props:
- itemText (node): The text in the menu item. Default: 'Provide itemText'
- requireTitle (bool): `true` if this menu item has long text and requires a browser tooltip
- wrapperClassName (string): The CSS class name to be placed on the wrapper list item element
- primaryFocus (bool): `true` if this menu item should get focus when the menu gets open.
- disabled (bool): `true` to make this menu item disabled. Default: false
- closeMenu (func): A callback to tell the parent menu component that the menu should be closed.
- onMouseEnter (func):
- onMouseDown (func):
- onBlur (func): event handlers
- hasDivider (bool): `true` to make this menu item a divider. Default: false
- className (string): The CSS class name to be placed on the button element
- onKeyUp (func):
- isDelete (bool): `true` to make this menu item a \"danger button\". Default: false
- onMouseLeave (func):
- onKeyDown (func): Default: () => {}
- onClick (func): Default: () => {}
- href (string): If given, overflow item will render as a link with the given href
- onFocus (func):
- onMouseUp (func):
"
(h/factory-apply OverflowMenuItem))

View File

@ -0,0 +1,30 @@
(ns ch.lyrion.carbon.pagination.ui-pagination
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/Pagination/Pagination.js" :default Pagination]))
(def ui-pagination
"Props:
- backwardText (string): The description for the backward icon. Default: 'Previous page'
- itemText (func): A variant of `itemRangeText`, used if the total number of items is unknown. Default: (min, max) => `${min}${max} items`
- itemRangeText (func): The function returning a translatable text showing where the current page is,
in a manner of the range of items. Default: (min, max, total) => `${min}${max} of ${total} items`
- disabled (bool): `true` if the backward/forward buttons should be disabled. Default: false
- pageText (func): The translatable text showing the current page. Default: page => `page ${page}`
- isLastPage (bool): `true` if the current page should be the last page. Default: false
- page (number): The current page. Default: 1
- pageInputDisabled (bool): `true` if the select box to change the page should be disabled. Default: false
- totalItems (number): The total number of items.
- forwardText (string): The description for the forward icon. Default: 'Next page'
- className (string): The CSS class names.
- pageSizes (arrayOf) (required): The choices for `pageSize`.
- pageSize (number): The number dictating how many items a page contains.
- id (union): The unique ID of this component instance.
- pageRangeText (func): A function returning PII showing where the current page is. Default: (current, total) => `of ${total} pages`
- pagesUnknown (bool): `true` if the total number of items is unknown. Default: false
- itemsPerPageText (string): The translatable text indicating the number of items per page. Default: 'Items per page:'
- onChange (func): The callback function called when the current page changes.
- pageNumberText (string): Default: 'Page Number'
"
(h/factory-apply Pagination))

View File

@ -0,0 +1,11 @@
(ns ch.lyrion.carbon.pagination.ui-pagination-skeleton
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/Pagination/Pagination.Skeleton.js" :default PaginationSkeleton]))
(def ui-pagination-skeleton
"Props:
- className (string): Specify an optional className to add.
"
(h/factory-apply PaginationSkeleton))

View File

@ -0,0 +1,10 @@
(ns ch.lyrion.carbon.primary-button.ui-primary-button
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/PrimaryButton/PrimaryButton.js" :default PrimaryButton]))
(def ui-primary-button
"Props:
"
(h/factory-apply PrimaryButton))

View File

@ -0,0 +1,11 @@
(ns ch.lyrion.carbon.progress-indicator.ui-progress-indicator-skeleton
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/ProgressIndicator/ProgressIndicator.Skeleton.js" :default ProgressIndicatorSkeleton]))
(def ui-progress-indicator-skeleton
"Props:
- className (string): Specify an optional className to add.
"
(h/factory-apply ProgressIndicatorSkeleton))

View File

@ -0,0 +1,27 @@
(ns ch.lyrion.carbon.progress-indicator.ui-progress-step
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/ProgressIndicator/ProgressIndicator.js" :default ProgressStep]))
(def ui-progress-step
"Props:
- description (string): Provide a description for the <ProgressStep>
- index (number): Index of the current step within the ProgressIndicator
- disabled (bool): Specify whether the step is disabled
- translateWithId (func): Optional method that takes in a message id and returns an
internationalized string. Default: function translateWithId(messageId) {
return defaultTranslations[messageId];
}
- invalid (bool): Specify whether the step is invalid
- className (string): Provide an optional className to be applied to the containing <li> node
- label (node) (required): Provide the label for the <ProgressStep>
- current (bool): Specify whether the step is the current step
- tooltipId (string): The ID of the tooltip content.
- complete (bool): Specify whether the step has been completed
- secondaryLabel (string): Provide an optional secondary label
- renderLabel (func): Default: props => <p {...props} />
- onClick (func): A callback called if the step is clicked or the enter key is pressed
- overflowTooltipProps (object): Provide the props that describe a progress step tooltip
"
(h/factory-apply ProgressStep))

View File

@ -0,0 +1,20 @@
(ns ch.lyrion.carbon.radio-button-group.ui-radio-button-group
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/RadioButtonGroup/RadioButtonGroup.js" :default RadioButtonGroup]))
(def ui-radio-button-group
"Props:
- labelPosition (enum): Provide where label text should be placed Default: 'right'
- children (node): Provide a collection of <RadioButton> components to render in the group
- disabled (bool): Specify whether the group is disabled
- name (string) (required): Specify the name of the underlying <input> nodes
- orientation (enum): Provide where radio buttons should be placed Default: 'horizontal'
- className (string): Provide an optional className to be applied to the container node
- valueSelected (union): Specify the value that is currently selected in the group
- onChange (func): Provide an optional `onChange` hook that is called whenever the value of
the group changes Default: () => {}
- defaultSelected (union): Specify the <RadioButton> to be selected by default
"
(h/factory-apply RadioButtonGroup))

View File

@ -0,0 +1,11 @@
(ns ch.lyrion.carbon.radio-button.ui-radio-button-skeleton
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/RadioButton/RadioButton.Skeleton.js" :default RadioButtonSkeleton]))
(def ui-radio-button-skeleton
"Props:
- className (string): Specify an optional className to add.
"
(h/factory-apply RadioButtonSkeleton))

View File

@ -0,0 +1,20 @@
(ns ch.lyrion.carbon.radio-tile.ui-radio-tile
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/RadioTile/RadioTile.js" :default RadioTile]))
(def ui-radio-tile
"Props:
- tabIndex (number): Specify the tab index of the wrapper element Default: 0
- name (string): The `name` of the `<input>`.
- value (union) (required): The `value` of the `<input>`.
- className (string): The CSS class names.
- defaultChecked (bool): `true` if the `<input>` should be checked at initialization.
- id (string): The ID of the `<input>`.
- checked (bool): `true` if this tile should be selected.
- onChange (func): The handler of the massaged `change` event on the `<input>`. Default: () => {}
- light (bool): `true` to use the light version. Default: false
- iconDescription (custom): The description of the tile checkmark icon.
"
(h/factory-apply RadioTile))

View File

@ -0,0 +1,13 @@
(ns ch.lyrion.carbon.search-filter-button.ui-search-filter-button
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/SearchFilterButton/SearchFilterButton.js" :default SearchFilterButton]))
(def ui-search-filter-button
"The filter button for `<Search>`.
Props:
- labelText (string): The a11y label text. Default: 'Search'
- iconDescription (string): The icon description. Default: 'filter'
"
(h/factory-apply SearchFilterButton))

View File

@ -0,0 +1,16 @@
(ns ch.lyrion.carbon.search-layout-button.ui-search-layout-button
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/SearchLayoutButton/SearchLayoutButton.js" :default SearchLayoutButton]))
(def ui-search-layout-button
"The layout button for `<Search>`.
Props:
- labelText (string): The a11y label text. Default: 'Filter'
- iconDescriptionList (string): The description for the \"list\" icon. Default: 'list'
- iconDescriptionGrid (string): The description for the \"grid\" icon. Default: 'grid'
- format (enum): The layout.
- onChangeFormat (func): The callback called when layout switches.
"
(h/factory-apply SearchLayoutButton))

View File

@ -0,0 +1,24 @@
(ns ch.lyrion.carbon.search.ui-search
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/Search/Search.js" :default Search]))
(def ui-search
"Props:
- value (union): Specify the value of the <input>
- closeButtonLabelText (string): Specify a label to be read by screen readers on the \"close\" button Default: 'Clear search input'
- type (string): Optional prop to specify the type of the `<input>` Default: 'text'
- className (string): Specify an optional className to be applied to the container node
- size (enum): Specify the search size
- small (custom): Specify whether the load was successful
- id (string): Specify a custom `id` for the input
- defaultValue (union): Optionally provide the default value of the <input>
- placeHolderText (string): Provide an optional placeholder text for the Search.
Note: if the label and placeholder differ,
VoiceOver on Mac will read both Default: ''
- onChange (null): null Default: () => {}
- light (bool): Specify light version or default version of this control
- labelText (node) (required): Provide an optional label text for the Search icon
"
(h/wrapped-factory-apply Search))

View File

@ -0,0 +1,12 @@
(ns ch.lyrion.carbon.search.ui-search-skeleton
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/Search/Search.Skeleton.js" :default SearchSkeleton]))
(def ui-search-skeleton
"Props:
- small (bool): Specify whether the Search should be a small variant Default: false
- className (string): Specify an optional className to add.
"
(h/factory-apply SearchSkeleton))

View File

@ -0,0 +1,10 @@
(ns ch.lyrion.carbon.secondary-button.ui-secondary-button
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/SecondaryButton/SecondaryButton.js" :default SecondaryButton]))
(def ui-secondary-button
"Props:
"
(h/factory-apply SecondaryButton))

View File

@ -0,0 +1,14 @@
(ns ch.lyrion.carbon.select-item-group.ui-select-item-group
(:require
[ch.lyrion.carbon.factory-helpers :as h]
["carbon-components-react/lib/components/SelectItemGroup/SelectItemGroup.js" :default SelectItemGroup]))
(def ui-select-item-group
"Props:
- disabled (bool): Specify whether the <SelectItemGroup> should be disabled Default: false
- label (string): Specify the label to be displayed Default: 'Provide label'
- children (node): Provide the contents of your <SelectItemGroup>
- className (string): Specify an optional className to be applied to the node
"
(h/factory-apply SelectItemGroup))

Some files were not shown because too many files have changed in this diff Show More