├── src
├── Helpers
│ ├── Function.re
│ ├── GenericHelpers.re
│ └── StyleHelpers.re
├── Spacer.re
├── Empty.re
├── Label.re
├── UiTypes.re
├── Checkbox.re
├── Button.re
├── Alert.re
├── Lib.re
├── Notifications.re
├── Loader.re
├── Input.re
├── Textarea.re
├── Config.re
├── CheckboxStyles.re
├── Card.re
├── CardStyles.re
├── Segment.re
├── Dnd.re
├── InputStyles.re
├── AlertStyles.re
├── TabStyles.re
├── TextareaStyles.re
├── ButtonStyles.re
├── ActionDropdown.re
├── Notification.re
├── Slider.re
├── Dropdown.re
├── Tooltip.re
└── Tabs.re
├── .prettierrc
├── postcss.config.js
├── jest.config.js
├── babel.config.js
├── .github
├── PULL_REQUEST_TEMPLATE.md
└── workflows
│ └── ui-components.yml
├── .gitignore
├── .storybook
├── preview-head.html
└── main.js
├── scripts
└── generate-react-icon-bindings.js
├── bsconfig.json
├── stories
├── loader.stories.js
├── typography.stories.js
├── alert.stories.js
├── tooltip.stories.js
├── checkbox.stories.js
├── icon.stories.js
├── segment.stories.js
├── input.stories.js
├── slider.stories.js
├── textarea.stories.js
├── button.stories.js
├── dropdown.stories.js
├── notifications.stories.js
├── card.stories.js
└── tabs.stories.js
├── COPYING
├── __tests__
├── GenericHelpers_test.re
└── StyleHelpers_test.re
├── CHANGELOG.md
├── package.json
└── README.md
/src/Helpers/Function.re:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "print-width": 80,
3 | "trailingComma": "es5",
4 | "tabWidth": 4,
5 | "semi": false,
6 | "singleQuote": true
7 | }
8 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: [
3 | require('postcss-flexbugs-fixes'),
4 | require('autoprefixer')({
5 | flexbox: 'no-2009',
6 | }),
7 | ],
8 | }
9 |
--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | transformIgnorePatterns: [
3 | 'node_modules/(?!(' +
4 | '|bs-css' +
5 | '|@glennsl/bs-jest' +
6 | '|bs-css-emotion' +
7 | '|bs-platform' +
8 | ')/)',
9 | ],
10 | }
11 |
--------------------------------------------------------------------------------
/src/Spacer.re:
--------------------------------------------------------------------------------
1 | module Vertical = {
2 | [@react.component]
3 | let make = (~amount: Css.Types.Length.t) => {
4 |
;
5 | };
6 | };
7 | module Horizontal = {
8 | [@react.component]
9 | let make = (~amount: Css.Types.Length.t) => {
10 |
;
11 | };
12 | };
13 |
--------------------------------------------------------------------------------
/src/Empty.re:
--------------------------------------------------------------------------------
1 | /*
2 | In some cases when pattern matching, we would want to show either a component, or nothing at all.
3 | The easiest way around this is to return an empty string as that won't render to anything. That
4 | isn't particularly declarative though, so we use this 'empty' component instead.
5 | */
6 |
7 | [@react.component]
8 | let make = () => React.string("");
9 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: [
3 | ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
4 | ],
5 | presets: [
6 | [
7 | '@babel/preset-env',
8 | {
9 | targets: {
10 | node: 'current',
11 | },
12 | },
13 | ],
14 | ],
15 | }
16 |
--------------------------------------------------------------------------------
/src/Label.re:
--------------------------------------------------------------------------------
1 | open UiTypes;
2 | open InputStyles;
3 |
4 | [@react.component]
5 | let make =
6 | (
7 | ~label=Unlabeled,
8 | ~identifier,
9 | ~variant=Normal,
10 | ~theme=Config.defaultTheme,
11 | ) =>
12 | switch (label) {
13 | | Labeled(labelString) =>
14 |
15 | {React.string(labelString)}
16 |
17 | | Unlabeled =>
24 |
25 |
36 |
;
37 | };
38 |
--------------------------------------------------------------------------------
/bsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tenzir-ui-component-library",
3 | "reason": {
4 | "react-jsx": 3
5 | },
6 | "sources": [
7 | {
8 | "dir": "src",
9 | "subdirs": true
10 | },
11 | {
12 | "dir": "__tests__",
13 | "type": "dev"
14 | }
15 | ],
16 | "bsc-flags": ["-bs-super-errors", "-bs-no-version-header"],
17 | "warnings": {
18 | "number": "+A-4-41-48-102-107",
19 | "error": "+A-3-44-102-103"
20 | },
21 | "package-specs": [
22 | {
23 | "module": "es6-global",
24 | "in-source": true
25 | }
26 | ],
27 | "suffix": ".bs.js",
28 | "namespace": true,
29 | "bs-dependencies": [
30 | "bs-flexboxgrid",
31 | "bs-webapi",
32 | "reason-react",
33 | "bs-css",
34 | "bs-css-emotion"
35 | ],
36 | "bs-dev-dependencies": ["@glennsl/bs-jest"],
37 | "refmt": 3
38 | }
39 |
--------------------------------------------------------------------------------
/src/Button.re:
--------------------------------------------------------------------------------
1 | [@react.component]
2 | let make =
3 | (
4 | ~disabled=false,
5 | ~type_="button",
6 | ~variant=ButtonStyles.Primary,
7 | ~size=UiTypes.Medium,
8 | ~theme=Config.defaultTheme,
9 | ~icon=?,
10 | ~iconPosition=ButtonStyles.Left,
11 | ~onClick=?,
12 | ~className="",
13 | ~children,
14 | ) =>
15 |
24 | {switch (icon) {
25 | | Some(icon) =>
26 | icon
27 | | None => children
30 | ;
31 |
32 | module Group = {
33 | [@react.component]
34 | let make = (~children, ~className="") =>
35 |
36 | children
37 |
;
38 | };
39 |
--------------------------------------------------------------------------------
/src/Alert.re:
--------------------------------------------------------------------------------
1 | open AlertStyles;
2 |
3 | [@react.component]
4 | let make =
5 | (
6 | ~children=?,
7 | ~variant=Primary,
8 | ~theme=Config.defaultTheme,
9 | ~size=UiTypes.Medium,
10 | ~className="",
11 | ~message=?,
12 | ) =>
13 |
15 | <>
16 |
17 | {switch (variant) {
18 | | Primary
19 | | Secondary =>
25 | {switch (message, children) {
26 | | (Some(message), Some(children)) =>
27 | <> message->React.string children
28 | | (Some(message), None) => message->React.string
29 | | (None, Some(children)) => children
30 | | (None, None) => ;
34 |
--------------------------------------------------------------------------------
/src/Lib.re:
--------------------------------------------------------------------------------
1 | module Function = {
2 | let id = x => x;
3 | let apply = (x, fn) => fn(x);
4 | let applyF = (fn, x) => fn(x);
5 | let const = (x, _) => x;
6 | let compose = (f, g, x) => f(g(x));
7 | let pipe = (g, f, x) => f(g(x));
8 |
9 | module Infix = {
10 | let (>>) = pipe;
11 | let (<<) = compose;
12 | };
13 | };
14 |
15 | module Jsx = {
16 | open Webapi;
17 | open Function.Infix;
18 | let focus = (ref: ReactDOM.Ref.currentDomRef) =>
19 | ref.current
20 | ->Js.Nullable.toOption
21 | ->Belt.Option.map(
22 | Dom.Element.unsafeAsHtmlElement >> Dom.HtmlElement.focus,
23 | )
24 | ->ignore;
25 |
26 | module Infix = {
27 | let (<&&>) = (a, b) => a ? b : React.null;
28 | };
29 | };
30 |
31 | module Event = {
32 | let getValueFromEvent = event => ReactEvent.Synthetic.target(event)##value;
33 | module Keyboard = {
34 | external toKeyboardEvent: 'a => Webapi.Dom.KeyboardEvent.t = "%identity";
35 |
36 | let keyWas = (inputKey, e) =>
37 | e
38 | |> toKeyboardEvent
39 | |> Webapi.Dom.KeyboardEvent.key
40 | |> (eventKey => eventKey === inputKey);
41 | };
42 | };
43 |
--------------------------------------------------------------------------------
/src/Notifications.re:
--------------------------------------------------------------------------------
1 | open BsFlexboxgrid;
2 |
3 | module Styles = {
4 | open Css;
5 | let container =
6 | style([
7 | position(`fixed),
8 | width(100.0->vw),
9 | height(100.0->vh),
10 | left(`zero),
11 | top(`zero),
12 | pointerEvents(`none),
13 | ]);
14 | };
15 |
16 | [@react.component]
17 | let make =
18 | (
19 | ~theme,
20 | ~notifications: array(Notification.t),
21 | ~handleDismissal=_ => (),
22 | ~defaultAnimationTime=400,
23 | ~maxAmount=5,
24 | ) => {
25 |
26 |
28 | {notifications
29 | ->Belt.Array.reverse
30 | ->Belt.Array.slice(~offset=0, ~len=maxAmount)
31 | ->Belt.Array.reverse
32 | ->Belt.Array.map(notification => {
33 |
43 |
44 |
;
45 | };
46 |
--------------------------------------------------------------------------------
/src/Loader.re:
--------------------------------------------------------------------------------
1 | open Css;
2 | let pulse =
3 | keyframes([
4 | (0, [opacity(0.1)]),
5 | (60, [opacity(0.5)]),
6 | (100, [opacity(0.1)]),
7 | ]);
8 |
9 | let loaderStyles =
10 | style([
11 | display(`flex),
12 | alignSelf(`center),
13 | justifyContent(`center),
14 | height(100.0->pct),
15 | width(100.0->pct),
16 | selector(
17 | "& circle",
18 | [
19 | opacity(0.1),
20 | animationName(pulse),
21 | animationDuration(1200),
22 | animationTimingFunction(`easeInOut),
23 | animationIterationCount(`infinite),
24 | ],
25 | ),
26 | selector("& circle:nth-of-type(1)", [animationDelay(100)]),
27 | selector("& circle:nth-of-type(2)", [animationDelay(200)]),
28 | ]);
29 |
30 | type background =
31 | | Dark
32 | | Light;
33 |
34 | [@react.component]
35 | let make = (~theme=Config.defaultTheme, ~className="") => {
36 | let colors = StyleHelpers.colorsFromThemeVariant(theme);
37 |
38 |
39 | Css_AtomicTypes.Color.toString}
41 | size=40
42 | />
43 |
;
44 | };
45 |
46 | let default = make;
47 |
--------------------------------------------------------------------------------
/stories/loader.stories.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
3 | import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
4 | import { useDarkMode } from "storybook-dark-mode";
5 | import { make as Loader } from "../src/Loader.bs.js";
6 | import { make as Card } from "../src/Card.bs.js";
7 | import { light, dark } from "../src/UiTypes.bs";
8 | export default {
9 | title: "Loader",
10 | };
11 |
12 | const margin = {
13 | margin: "1rem",
14 | };
15 | export const Loaders = () => {
16 | const theme = useDarkMode() ? dark : light;
17 | return (
18 | <>
19 |
20 |
21 | Loader
22 | Interface
23 |
24 | {`type Loader: (
25 | ~className: option(string), /* Defaults to empty string */
26 | ~theme: option(UiTypes.theme)
27 | ) => React.element;
28 | `}
29 |
30 |
31 | Preview
32 |
33 |
35 |
36 |
37 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/Helpers/GenericHelpers.re:
--------------------------------------------------------------------------------
1 | open UiTypes;
2 |
3 | /*
4 | * Bound a value within its upper and lower bounds. Works for int / float
5 | */
6 | let bound = (lowerBound, upperBound, value) =>
7 | switch (value) {
8 | | value when value > upperBound => upperBound
9 | | value when value < lowerBound => lowerBound
10 | | _ => value
11 | };
12 |
13 | /*
14 | * This function is used to add or subtract a percentate from any color
15 | * value. We take the percentage relative to 255 (max rgb value for any
16 | * given channel) and either add or subtract it.
17 | */
18 | let operatePercent = (percentage, operation, value) => {
19 | let amount = 255 * percentage / 100;
20 | switch (operation) {
21 | | Add => value + amount
22 | | Subtract => value - amount
23 | };
24 | };
25 |
26 | /*
27 | * When not providing an id for inputs with labels, we would still need to generate one.
28 | * We do this by re-using the labelstring in this case. There could be duplicates but this
29 | * will be caught by React and give a console output error. However, in 90% of the cases,
30 | * falling back to the label string will be just fine.
31 | */
32 | let genIdentifier = (id, label) =>
33 | switch (id, label) {
34 | | (Some(idString), _) => idString
35 | | (None, Labeled(labelString)) => labelString
36 | | (None, Unlabeled) => ""
37 | };
38 |
39 | /*
40 | * To aid the creation of random id's, we use UUID's v4 fn.
41 | */
42 | [@bs.module "uuid"] [@bs.val] external v4: unit => string = "v4";
43 |
--------------------------------------------------------------------------------
/src/Input.re:
--------------------------------------------------------------------------------
1 | open UiTypes;
2 | open InputStyles;
3 |
4 | [@react.component]
5 | let make =
6 | (
7 | ~_type="text",
8 | ~defaultValue="",
9 | ~className="",
10 | ~value=?,
11 | ~disabled=false,
12 | ~label=Unlabeled,
13 | ~id=?,
14 | ~validity=Valid,
15 | ~variant=Normal,
16 | ~width=[@reason.preserve_braces] 100.0,
17 | ~theme=Config.defaultTheme,
18 | ~placeholder="",
19 | ~onChange=?,
20 | ~onKeyDown=?,
21 | ~onBlur=?,
22 | ) => {
23 | let identifier = GenericHelpers.genIdentifier(id, label);
24 |
25 |
26 |
;
58 | };
59 |
--------------------------------------------------------------------------------
/stories/typography.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
3 | import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism'
4 | import { useDarkMode } from 'storybook-dark-mode'
5 | import { make as Card } from '../src/Card.bs.js'
6 | import { light, dark } from '../src/UiTypes.bs'
7 |
8 | export default {
9 | title: 'Typography',
10 | }
11 |
12 | const margin = {
13 | margin: '1rem',
14 | }
15 |
16 | export const typograph = () => {
17 | const theme = useDarkMode() ? dark : light
18 | return (
19 | <>
20 |
21 |
22 | Typography
23 | This is an h1 title
24 | This is an h2 title
25 | This is an h3 title
26 | This is an h4 title
27 | This is an h5 title
28 | This is an h6 title
29 | Here is the paragraph text
30 |
31 | I'm in an unordered list
32 | I'm in an unordered list
33 |
34 |
35 | I'm in an ordered list
36 | I'm in an ordered list
37 |
38 |
39 |
27 |
;
69 | };
70 |
--------------------------------------------------------------------------------
/.github/workflows/ui-components.yml:
--------------------------------------------------------------------------------
1 | name: "UI Components"
2 | on:
3 | push:
4 | branches:
5 | - master
6 | pull_request:
7 | types: [opened, synchronize]
8 | release:
9 | types: published
10 |
11 | jobs:
12 | build:
13 | runs-on: ubuntu-latest
14 | steps:
15 |
16 | - uses: actions/checkout@v2
17 | with:
18 | ref: ${{ github.ref }}
19 |
20 | - name: Install Dependencies
21 | run: yarn install --frozen-lockfile
22 |
23 | - name: Run Build
24 | run: yarn build
25 |
26 | - name: Run Tests
27 | run: yarn test
28 |
29 | - name: Build Storybook for GitHub Pages
30 | run: yarn deploy-storybook -- --dry-run --out=.out
31 |
32 | - name: Push Storybook Folder
33 | if: github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/tags/')
34 | uses: JamesIves/github-pages-deploy-action@releases/v3
35 | with:
36 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
37 | ACCESS_TOKEN: ${{ secrets.REPO_SCOPE_ACCESS_TOKEN }}
38 | BRANCH: gh-pages
39 | FOLDER: .out
40 |
41 | npm-release:
42 | name: NPM Release
43 | runs-on: ubuntu-latest
44 | if: github.event.action == 'published'
45 | needs: build
46 | steps:
47 |
48 | - uses: actions/checkout@v2
49 | with:
50 | ref: ${{ github.ref }}
51 |
52 | - uses: actions/setup-node@v1
53 | with:
54 | always-auth: true
55 | registry-url: "https://registry.npmjs.org"
56 |
57 | - env:
58 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
59 | run: |
60 | echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
61 | yarn publish
62 |
--------------------------------------------------------------------------------
/__tests__/GenericHelpers_test.re:
--------------------------------------------------------------------------------
1 | open Jest;
2 | open Expect;
3 |
4 | describe("bound", () => {
5 | let lowerBound = -10;
6 | let upperBound = 10;
7 | let bounded = GenericHelpers.bound(lowerBound, upperBound);
8 |
9 | test("LowerBound", () =>
10 | expect(bounded(-100)) |> toBe(lowerBound))
11 | test("UpperBound", () =>
12 | expect(bounded(100)) |> toBe(upperBound))
13 | test("Within Bounds", () =>
14 | expect(bounded(0)) |> toBe(0))
15 |
16 | let lowerBoundFlt = -10.0;
17 | let upperBoundFlt = 10.0;
18 | let bounded = GenericHelpers.bound(lowerBoundFlt, upperBoundFlt);
19 |
20 | test("LowerBound Float", () =>
21 | expect(bounded(-100.0)) |> toBe(lowerBoundFlt))
22 | test("UpperBound Float", () =>
23 | expect(bounded(100.0)) |> toBe(upperBoundFlt))
24 | test("Within Bounds Float", () =>
25 | expect(bounded(0.0)) |> toBe(0.0))
26 | });
27 |
28 | describe("operatePercent", () => {
29 | let percentage = 10;
30 | let baseValue = 50;
31 |
32 | test("Add", () =>
33 | expect(GenericHelpers.operatePercent(percentage, UiTypes.Add, baseValue)) |> toBe(75))
34 |
35 | test("Subtract", () =>
36 | expect(GenericHelpers.operatePercent(percentage, UiTypes.Subtract, baseValue)) |> toBe(25))
37 | });
38 |
39 | describe("genIdentifier", () => {
40 | open UiTypes;
41 |
42 | test("Opt id over label", () =>
43 | expect(GenericHelpers.genIdentifier(Some("id"), Labeled("label"))) |> toBe("id"))
44 |
45 | test("Fall back to label if no id", () =>
46 | expect(GenericHelpers.genIdentifier(None, Labeled("label"))) |> toBe("label"))
47 |
48 | test("Fall back to empty string if no id and no label", () =>
49 | expect(GenericHelpers.genIdentifier(None, Unlabeled)) |> toBe(""))
50 | });
51 |
--------------------------------------------------------------------------------
/src/Config.re:
--------------------------------------------------------------------------------
1 | open Css_AtomicTypes;
2 | open UiTypes;
3 |
4 | let defaultTheme = UiTypes.Light;
5 |
6 | type colors = {
7 | background: Color.t,
8 | darkBlueBg: Color.t,
9 | primary: Color.t,
10 | secondary: Color.t,
11 | success: Color.t,
12 | warning: Color.t,
13 | danger: Color.t,
14 | input: Color.t,
15 | font: Color.t,
16 | black: Color.t,
17 | white: Color.t,
18 | };
19 |
20 | module Colors = {
21 | let hoverChangeType = Lighten;
22 | let hoverChangePercent = 8;
23 | let activeChangeType = Darken;
24 | let activeChangePercent = 5;
25 | let light = {
26 | background: `rgb((254, 255, 255)),
27 | darkBlueBg: `rgba((0, 51, 77, `num(1.0))),
28 | primary: `rgb((0, 164, 241)),
29 | secondary: `rgb((189, 207, 219)),
30 | success: `rgb((154, 248, 0)),
31 | warning: `rgb((248, 237, 0)),
32 | danger: `rgb((248, 65, 10)),
33 | input: `rgb((34, 34, 34)),
34 | font: `rgb((34, 34, 34)),
35 | black: `rgb((34, 34, 34)),
36 | white: `rgb((238, 238, 238)),
37 | };
38 |
39 | let dark = {
40 | ...light,
41 | background: `rgb((34, 38, 38)),
42 | font: `rgb((238, 238, 238)),
43 | };
44 |
45 | let tenzirBlue = {
46 | ...light,
47 | background: `rgba((0, 51, 77, `num(1.0))),
48 | font: `rgb((238, 238, 238)),
49 | };
50 | };
51 |
52 | module Typography = {
53 | open Length;
54 | let family_default = "'Source Sans Pro', sans-serif;";
55 | let family_mono = "'Source Code Pro', monospace;";
56 | let size = 15->px;
57 | let size_label = 14->px;
58 | let weight_default = `normal;
59 | let weight_button = `semiBold;
60 | let weight_mono = `semiBold;
61 | };
62 |
63 | module Misc = {
64 | open Css;
65 | let baseXPadding = 1.0->rem;
66 | let baseYPadding = 0.5->rem;
67 | let borderRadius = 0.2->rem;
68 | let cardDarkeningPct = 4;
69 | let baseTransitions = [
70 | transitionProperty("all"),
71 | transitionDuration(200),
72 | transitionTimingFunction(`easeInOut),
73 | ];
74 | };
75 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | This changelog documents all notable user-facing changes of the Tenzir
4 | Component Library.
5 |
6 | Every entry has a category for which we use the following visual abbreviations:
7 |
8 | - 🎁 Feature
9 | - 🧬 Experimental Feature
10 | - ⚠️ Change
11 | - ⚡️ Breaking Change
12 | - 🐞 Bugfix
13 |
14 | ## [0.12.0]
15 | - 🎁 Tabs [#81](https://github.com/tenzir/ui-component-library/pull/81)
16 | We now have a tabs, and tabbed card component. They have built-in support for
17 | drag'n'drop replacing, updating, adding, duplicating and removing. Depending
18 | on which callback functions are supplied they're activated.
19 |
20 | ## [0.10.0]
21 | - 🎁 Sizing [#71](https://github.com/tenzir/ui-component-library/pull/71)
22 | We now support sizes (`small` / `medium` / `large`) for buttons and alerts
23 |
24 | ## [0.9.0]
25 | - 🎁 Generalized Segments [#67](https://github.com/tenzir/ui-component-library/pull/67)
26 | Instead of using strings as identifiers, the segments now use a generic type.
27 | Making them type-safe using variants is now possible.
28 |
29 | - ⚠️ Better font scaling [#67](https://github.com/tenzir/ui-component-library/pull/67)
30 | Font-scaling was previously done using css transforms. But that broke when using
31 | it in button-groups. By using paddings, we can still use different sizes,
32 | but they no longer break in groups.
33 |
34 | ## [0.8.1]
35 | - 🐞 Tooltip Hover [#60](https://github.com/tenzir/ui-component-library/pull/60)
36 | The tooltip was included in the hover's bounding box of the element. The
37 | `pointer-events` are now disabled for hover events until they become visible,
38 | meaning it can only be activated by hovering the element upon which the tooltip
39 | is introduced, not the tooltip itself.
40 |
41 | ## [0.8.0]
42 | - 🧬 Tooltips [#59](https://github.com/tenzir/ui-component-library/pull/59)
43 | We've used a CSS only approach for tooltips that is reasonably flexible in terms
44 | of positioning. We'll test this internally before releasing it publicly.
45 |
--------------------------------------------------------------------------------
/src/CheckboxStyles.re:
--------------------------------------------------------------------------------
1 | open Css;
2 | open Config;
3 | open UiTypes;
4 |
5 | let labelFontColor = (colors: colors, componentState, ~validity=Valid, ()) =>
6 | switch (componentState, validity) {
7 | | (Hovering, Invalid) => StyleHelpers.lighten(20, colors.danger)
8 | | (_, Invalid) => colors.danger
9 | | (Hovering, Valid) => StyleHelpers.lighten(20, colors.font)
10 | | (_, Valid) => colors.font
11 | };
12 |
13 | let inputFontColor = (colors: colors, componentState) =>
14 | switch (componentState) {
15 | | Hovering => StyleHelpers.lighten(20, colors.input)
16 | | _ => colors.input
17 | };
18 |
19 | let inputContainerStyles = (~pctWidth=100.0, ~disabled, ()) =>
20 | style([
21 | width(pctWidth->pct),
22 | paddingTop(0.7->rem),
23 | display(`inlineBlock),
24 | position(`relative),
25 | opacity(disabled ? 0.5 : 1.0),
26 | selector(
27 | "& input, & label",
28 | [cursor(disabled ? `notAllowed : `default)],
29 | ),
30 | hover([cursor(disabled ? `notAllowed : `default)]),
31 | ]);
32 |
33 | let checkboxStyles = (~theme, ()) => {
34 | let colors = StyleHelpers.colorsFromThemeVariant(theme);
35 | style([
36 | display(`inline),
37 | borderStyle(`solid),
38 | borderWidth(2->px),
39 | borderColor(colors.danger),
40 | outlineStyle(`none),
41 | color(inputFontColor(colors, Base)),
42 | fontFamily(`custom(Typography.family_default)),
43 | fontWeight(Typography.weight_default),
44 | fontSize(Typography.size),
45 | borderRadius(Misc.borderRadius),
46 | paddingLeft(1.1->rem),
47 | paddingRight(1.1->rem),
48 | paddingTop(0.6->rem),
49 | paddingBottom(0.6->rem),
50 | marginRight(0.6->rem),
51 | ...Misc.baseTransitions,
52 | ]);
53 | };
54 |
55 | let labelStyles = (~theme, ~validity, ()) => {
56 | let colors = StyleHelpers.colorsFromThemeVariant(theme);
57 | style([
58 | color(labelFontColor(colors, Base, ~validity, ())),
59 | fontFamily(`custom(Typography.family_default)),
60 | fontWeight(Typography.weight_default),
61 | fontSize(Typography.size_label),
62 | paddingLeft(0.6->rem),
63 | paddingRight(0.6->rem),
64 | paddingTop(0.6->rem),
65 | paddingBottom(0.6->rem),
66 | ...Misc.baseTransitions,
67 | ]);
68 | };
69 |
--------------------------------------------------------------------------------
/src/Card.re:
--------------------------------------------------------------------------------
1 | open CardStyles;
2 |
3 | [@react.component]
4 | let make =
5 | (
6 | ~onMouseOver=?,
7 | ~onMouseOut=?,
8 | ~spacing=Normal,
9 | ~theme=Config.defaultTheme,
10 | ~depth=1,
11 | ~className="",
12 | ~header=?,
13 | ~footer=?,
14 | ~children=
20 | {header->Belt.Option.mapWithDefault(
, header =>
21 |
header
22 | )}
23 |
Belt.Option.isSome,
26 | ~hasFooter=footer->Belt.Option.isSome,
27 | )}>
28 | children
29 |
30 | {footer->Belt.Option.mapWithDefault(
, footer =>
31 |
footer
32 | )}
33 |
64 |
78 |
Belt.Option.isSome,
82 | )}>
83 | children
84 |
85 | {footer->Belt.Option.mapWithDefault(
, footer =>
86 |
footer
87 | )}
88 |
29 |
30 | Alerts
31 | Interface
32 |
37 | {`type Alert: (
38 | ~message: option(string),
39 | ~children: option(React.Element), /* Note that both message and children can be passed in at once */
40 | ~variant: AlertStyles.variant,
41 | ~size: UiTypes.size,
42 | ~className: option(string),
43 | ~theme: option(UiTypes.theme)
44 | ) => React.element;
45 | `}
46 |
47 |
48 | Preview
49 | Sizes
59 |
63 |
77 | {segments
78 | ->Belt.Array.map(segment => {
79 | let isActive =
80 | active
81 | ->Belt.Option.map(x => x === segment.id)
82 | ->Belt.Option.getWithDefault(false);
83 |
84 |
92 | segment.disabled ? () : setActive(_ => Some(segment.id))
93 | }>
94 | segment.title->React.string
95 | ;
96 | })
97 | ->React.array}
98 |
99 | ;
100 | };
101 |
--------------------------------------------------------------------------------
/stories/tooltip.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Examples } from '../src/Tooltip.bs'
3 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
4 | import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism'
5 | import { useDarkMode } from 'storybook-dark-mode'
6 | import { FiActivity as Activity } from 'react-icons/fi'
7 | import { make as Card } from '../src/Card.bs.js'
8 | import { light, dark } from '../src/UiTypes.bs'
9 | import { top, right, bottom, left } from '../src/Tooltip.bs'
10 |
11 | const TooltipExamples = Examples.make
12 |
13 | export default {
14 | title: 'Tooltip',
15 | }
16 |
17 | const margin = {
18 | margin: '1rem',
19 | }
20 |
21 | export const Tooltips = () => {
22 | const theme = useDarkMode() ? dark : light
23 | return (
24 | <>
25 |
26 |
27 | Tooltip
28 | Interface
29 |
34 | {`type tooltip: (
35 | ~theme: option(UiTypes.theme)), // Defaults to UiTypes.light
36 | ~position: option(Tooltip.tPosition)), // Defaults to Top(Center)
37 | value: string
38 | )=> string;`}
39 |
40 |
41 |
42 | As opposed to most elements, this is not a component,
43 | but a css class generator. Based on the options above,
44 | we generate a tooltip that is placed on the "after"
45 | attribute of the element. This means we're not adding
46 | additional dom. The interface for positioning looks as
47 | follows:
48 |
49 |
50 |
55 | {`type horizontal =
56 | | Left
57 | | Center
58 | | Right;
59 |
60 | type vertical =
61 | | Top
62 | | Middle
63 | | Bottom;
64 |
65 | type tPosition =
66 | | Top(horizontal)
67 | | Bottom(horizontal)
68 | | Left(vertical)
69 | | Right(vertical);
70 |
71 | // For instance,
72 | // Adding a tooltip to the top left or bottom right of an element, would be:
73 |
84 |
85 | Previews
86 |
88 |
28 |
29 | Cards
30 | Interface
31 |
32 | {`type Card: (
33 | ~defaultValue: option(bool), /* Defaults to false */
34 | ~disabled: option(bool), /* Defaults to false */
35 | ~label: string,
36 | ~id: option(string), /* Id's have a fallback to the label, but possible collisions may occur if no id is presented */
37 | ~width: option(float), /* as a percentage, defaults to 100.0 */
38 | ~theme: option(UiTypes.theme),
39 | ~placeholder: option(string), /* defaults to empty string */
40 | ~validity: UiTypes.validation, /* defaults to UiTypes.Valid */
41 | ~onChange=option(React.SyntheticEvent.t->unit),
42 | ) => React.element;`}
43 |
44 |
45 | Preview
46 |
47 | setVal({ ...val, checkbox1: !val.checkbox1 })}
54 | />
55 | setVal({ ...val, checkbox2: !val.checkbox2 })}
63 | />
64 | setVal({ ...val, checkbox3: !val.checkbox3 })}
71 | />
72 |
80 |
81 |
82 | {(provided: OpaqueTypes.provided) => {
83 | <>
84 | {Provided.augmentChildren(provided, children)}
85 | {provided.placeholder}
86 | ;
87 | }}
88 | ;
89 | };
90 | };
91 |
92 | module Droppable = {
93 | type direction = [ | `vertical | `horizontal];
94 |
95 | module Wrapper = {
96 | [@bs.module "react-beautiful-dnd"] [@react.component]
97 | external make:
98 | (
99 | ~droppableId: string,
100 | ~direction: direction=?,
101 | ~children: OpaqueTypes.provided => React.element=?
102 | ) =>
103 | React.element =
104 | "Droppable";
105 | };
106 |
107 | [@react.component]
108 | let make = (~droppableId, ~direction, ~children) => {
109 |
110 | {(provided: OpaqueTypes.provided) => {
111 | <>
112 | {Provided.augmentChildren(provided, children)}
113 | {provided.placeholder}
114 | ;
115 | }}
116 | ;
117 | };
118 | };
119 |
--------------------------------------------------------------------------------
/src/InputStyles.re:
--------------------------------------------------------------------------------
1 | open Css;
2 | open Config;
3 | open UiTypes;
4 |
5 | let inputFontWeight = variant =>
6 | switch (variant) {
7 | | Normal => Typography.weight_default
8 | | Mono => Typography.weight_mono
9 | };
10 |
11 | let inputFontFamily = variant => {
12 | let font =
13 | switch (variant) {
14 | | Normal => Typography.family_default
15 | | Mono => Typography.family_mono
16 | };
17 | `custom(font);
18 | };
19 |
20 | let labelFontColor = (colors: colors, componentState) =>
21 | switch (componentState) {
22 | | Hovering => StyleHelpers.lighten(20, colors.font)
23 | | _ => colors.font
24 | };
25 |
26 | let inputFontColor = (colors: colors, componentState) =>
27 | switch (componentState) {
28 | | Hovering => StyleHelpers.lighten(20, colors.input)
29 | | _ => colors.input
30 | };
31 |
32 | let inputBordercolor = (colors: colors, componentState, ~validity=Valid, ()) =>
33 | switch (componentState, validity) {
34 | | (Base, Invalid) => colors.danger
35 | | (Hovering, Invalid) => StyleHelpers.lighten(25, colors.danger)
36 | | (Active, Invalid)
37 | | (Focus, Invalid) => StyleHelpers.lighten(8, colors.danger)
38 | | (Base, Valid) => StyleHelpers.lighten(80, colors.input)
39 | | (Hovering, Valid) => StyleHelpers.lighten(50, colors.input)
40 | | (Active, Valid)
41 | | (Focus, Valid) => StyleHelpers.lighten(40, colors.input)
42 | };
43 |
44 | let inputContainerStyles = (~pctWidth=100.0, ~label=Unlabeled, ()) =>
45 | style([
46 | width(pctWidth->pct),
47 | paddingTop(
48 | switch (label) {
49 | | Labeled(_) => 0.7->rem
50 | | Unlabeled => 0.0->rem
51 | },
52 | ),
53 | display(`inlineBlock),
54 | position(`relative),
55 | ]);
56 |
57 | let inputStyles = (~theme, ~validity, ~variant=Normal, ()) => {
58 | let colors = StyleHelpers.colorsFromThemeVariant(theme);
59 | style([
60 | display(`inlineBlock),
61 | width(100.0->pct),
62 | borderStyle(`solid),
63 | borderWidth(2->px),
64 | borderColor(inputBordercolor(colors, Base, ~validity, ())),
65 | outlineStyle(`none),
66 | color(inputFontColor(colors, Base)),
67 | fontFamily(variant->inputFontFamily),
68 | fontWeight(variant->inputFontWeight),
69 | fontSize(Typography.size),
70 | borderRadius(Misc.borderRadius),
71 | paddingLeft(1.1->rem),
72 | paddingRight(1.1->rem),
73 | paddingTop(0.6->rem),
74 | paddingBottom(0.6->rem),
75 | disabled([
76 | cursor(`notAllowed),
77 | backgroundColor(StyleHelpers.rgbWithAlpha(colors.white, 0.8)),
78 | ]),
79 | hover([
80 | color(inputFontColor(colors, Hovering)),
81 | borderColor(inputBordercolor(colors, Hovering, ~validity, ())),
82 | ]),
83 | focus([
84 | color(inputFontColor(colors, Focus)),
85 | borderColor(inputBordercolor(colors, Focus, ~validity, ())),
86 | ]),
87 | ...Misc.baseTransitions,
88 | ]);
89 | };
90 |
91 | let labelStyles = (~theme, ~variant=Normal, ()) => {
92 | let colors = StyleHelpers.colorsFromThemeVariant(theme);
93 | style([
94 | display(`block),
95 | color(labelFontColor(colors, Base)),
96 | fontFamily(variant->inputFontFamily),
97 | fontWeight(variant->inputFontWeight),
98 | fontSize(Typography.size_label),
99 | paddingLeft(0.6->rem),
100 | paddingRight(0.6->rem),
101 | paddingTop(0.6->rem),
102 | paddingBottom(0.6->rem),
103 | hover([
104 | color(labelFontColor(colors, Hovering)),
105 | borderColor(inputBordercolor(colors, Hovering, ())),
106 | ]),
107 | ...Misc.baseTransitions,
108 | ]);
109 | };
110 |
--------------------------------------------------------------------------------
/stories/icon.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { make as Button, Group } from '../src/Button.bs.js'
3 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
4 | import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism'
5 | import { useDarkMode } from 'storybook-dark-mode'
6 | import { make as Card } from '../src/Card.bs.js'
7 | import { make as Input } from '../src/Input.bs.js'
8 | import { light, dark } from '../src/UiTypes.bs'
9 | import { tiny, huge } from '../src/CardStyles.bs'
10 | import icons from './icons.js'
11 |
12 | export default {
13 | title: 'Icons',
14 | }
15 |
16 | const margin = {
17 | margin: '1rem',
18 | }
19 |
20 | const inputContainer = {
21 | marginBottom: '2rem',
22 | }
23 |
24 | const icon = {
25 | container: {
26 | textAlign: 'center',
27 | width: '20%',
28 | display: 'inline-block',
29 | marginBottom: '2rem',
30 | },
31 | title: {
32 | display: 'block',
33 | margin: '0.5rem',
34 | },
35 | icon: {
36 | display: 'inline-block',
37 | },
38 | }
39 |
40 | const cardContainer = {
41 | width: 'calc(100% - 2rem)',
42 | margin: '1rem',
43 | display: 'block',
44 | }
45 |
46 | const lCase = (str) => str.toLowerCase()
47 |
48 | export const feather = () => {
49 | const [filteredIcons, setFilteredIcons] = React.useState(icons)
50 | const [filter, setFilter] = React.useState('')
51 | const theme = useDarkMode() ? dark : light
52 | React.useEffect(() => {
53 | const newSet = icons.filter(({ name }) =>
54 | lCase(name).includes(lCase(filter))
55 | )
56 | setFilteredIcons(newSet)
57 | }, [filter])
58 |
59 | return (
60 |
61 |
62 | Icons
63 | Interface
64 |
69 | {`type Icon: (
70 | ~className:option(string),
71 | ~color: option(string),
72 | ~size: option(int),
73 | ~style: option(ReactDomRe.Style.t),
74 | )=> React.element;`}
75 |
76 | Preview
77 |
78 | We built a script that takes some (or all) icons from the
79 | 'react-icons', and generates ReasonML type bindings for
80 | them. We are currently using all 'feather-icons' from the
81 | 'react-icons' library. The cool part is that even though the
82 | file with the bindings is huge, it will be removed at
83 | compile time since they're simply type bindings. Check out
84 | the icons below.
85 |
86 |
87 |
88 |
95 |
96 | {filteredIcons.map(({ name, component }) => (
97 |
98 | {component}
99 |
{name}
100 |
101 | ))}
102 |
103 |
2 | Tenzir UI Component Library
3 |
4 |
5 |
6 | A ReasonML-first UI component library
7 |
8 | [![Storybook][storybook-badge]][storybook-url]
9 | [![CI][ci-badge]][ci-url]
10 | [![NPM Version][npm-badge]][npm-url]
11 | [![Development Status][alpha-badge]][latest-release-url]
12 | [![License][license-badge]][license-url]
13 |
14 | [_Introduction_](#introduction) —
15 | [_Getting Started_](#getting-started) —
16 | [_Contributing Guidelines_][contributing-url] —
17 | [_License_](#license)
18 |
19 |
20 |
21 | ## Introduction
22 | Most UI-Libraries for use with ReasonML have bindings to existing UI-Libraries.
23 | Wanting to be fully type-safe without outdated component bindings, leveraging
24 | things like pattern-matching along the way, we decided to build our own
25 | UI-Library, ReasonML-first. We will continually build on this and add
26 | components as we need them. This means components may be missing, or lack
27 | support of all the web API's needed in your specific use-case. We encourage
28 | contribution ([Contributing Guidelines][contributing-url]) in these cases.
29 |
30 | ### Components
31 | The following components are currently built.
32 | - Button
33 | - Card (optionally with a tabbed header)
34 | - Checkbox
35 | - Icons - A script generates bindings for [React
36 | Icons](https://github.com/react-icons/react-icons). We currently generate
37 | bindings to a subset that includes just the [Feather
38 | Icons](https://feathericons.com/) (MIT licensed).
39 | - Input
40 | - Textarea
41 | - Loader
42 | - Alert
43 | - Dropdown
44 | - Dropdown with Action Button
45 | - Segment
46 | - Notifications
47 | - Slider
48 | - Tabs
49 |
50 | Preview here: [Tenzir-Ui-Component-Library][storybook-url]
51 |
52 | ## Getting Started
53 | ### Installation
54 | **Add dependency:**
55 | ```sh
56 | yarn add tenzir-ui-component-library
57 | ```
58 |
59 | **Add the library to the `bs-dependencies` in your `bsconfig.json`:**
60 | ```sh
61 | {
62 | ...
63 | "bs-dependencies": ["tenzir-ui-component-library"]
64 | }
65 | ```
66 |
67 | ### Contributing / Development
68 | We develop the components application agnostically with the help of
69 | [_Storybook_](https://storybook.js.org/). The ReasonML code is compiled first
70 | and is then imported as plain Javascript in the Storybook stories.
71 |
72 | **Install dependencies:**
73 | ```sh
74 | yarn
75 | ```
76 |
77 | **Start ReasonML compiler with file-watcher:**
78 | ```sh
79 | yarn start
80 | ```
81 |
82 | **Start Storybook server (should be ran simultaniously):**
83 | ```sh
84 | yarn server
85 | ```
86 |
87 | ## License
88 | Tenzir UI-Component Library comes with a [3-clause BSD license][license-url].
89 |
90 | [storybook-badge]: https://raw.githubusercontent.com/storybookjs/brand/master/badge/badge-storybook.svg
91 | [storybook-url]: https://tenzir.github.io/ui-component-library/
92 | [ci-url]: https://github.com/tenzir/ui-component-library/actions?query=branch%3Amaster+workflow%3A%22UI%20Components%22
93 | [ci-badge]: https://github.com/tenzir/ui-component-library/workflows/UI%20Components/badge.svg?branch=master
94 | [npm-badge]: https://img.shields.io/npm/v/tenzir-ui-component-library
95 | [npm-url]: https://www.npmjs.com/package/tenzir-ui-component-library
96 | [contributing-url]: https://github.com/tenzir/.github/blob/master/contributing.md
97 | [latest-release-badge]: https://img.shields.io/github/commits-since/tenzir/ui-components/latest.svg?color=green
98 | [latest-release-url]: https://github.com/tenzir/ui-components/releases
99 | [license-badge]: https://img.shields.io/badge/license-BSD-blue.svg
100 | [license-url]: https://github.com/tenzir/ui-components/blob/master/COPYING
101 | [alpha-badge]: https://img.shields.io/badge/stage-alpha-blueviolet
102 |
--------------------------------------------------------------------------------
/stories/segment.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
3 | import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism'
4 | import { useDarkMode } from 'storybook-dark-mode'
5 | import { make as Segment } from '../src/Segment.bs.js'
6 | import { FiActivity as Activity } from 'react-icons/fi'
7 | import { make as Card } from '../src/Card.bs.js'
8 | import { light, dark } from '../src/UiTypes.bs'
9 |
10 | export default {
11 | title: 'Segment',
12 | }
13 |
14 | const segmentContainer = {
15 | display: 'inline-block',
16 | width: '40%',
17 | marginRight: '100px',
18 | paddingBottom: '100px',
19 | }
20 | const margin = {
21 | margin: '1rem',
22 | }
23 |
24 | export const Segments = () => {
25 | const theme = useDarkMode() ? dark : light
26 | const [value, setValue] = React.useState(0)
27 | return (
28 |
29 |
30 | Dropdowns
31 | Interface
32 |
37 | {`type t = {
38 | disabled: bool,
39 | id: 'a,
40 | title: string,
41 | };
42 |
43 | type Segment('a): (
44 | ~theme: option(UiTypes.theme)
45 | ~segments: array(t('a)),
46 | ~default: option('a), /* The id of the item */
47 | ~onSegmentUpdate: 'a => unit, /* The changed id get's pushed back */
48 | ~title: option(string),
49 | ) => React.element;
50 | `}
51 |
52 |
53 | Preview
54 |
55 |
A regular segment
56 |
null}
59 | segments={[
60 | { title: 'Lorum', id: 0, disabled: false },
61 | { title: 'Ipsum', id: 1, disabled: false },
62 | { title: 'Dolor', id: 2, disabled: false },
63 | ]}
64 | />
65 |
67 |
68 | When specifying disabled elements, we select the first
69 | non-disabled element in line by default
70 |
71 |
null}
74 | segments={[
75 | { title: 'Lorum', id: 0, disabled: true },
76 | { title: 'Ipsum', id: 1, disabled: false },
77 | { title: 'Dolor', id: 2, disabled: false },
78 | ]}
79 | />
80 |
82 |
83 | You can also specify a default selection. This will be
84 | selected upon first render.
85 |
86 |
null}
90 | segments={[
91 | { title: 'Lorum', id: 0, disabled: false },
92 | { title: 'Ipsum', id: 1, disabled: false },
93 | { title: 'Dolor', id: 2, disabled: false },
94 | ]}
95 | />
96 |
98 |
31 |
32 | Input
33 |
34 | Interface
35 |
36 | As there is the option to have a label, we need to have an
37 | id so that we can make that clickable and link the label and
38 | the input. We can infer the id from the label, but this may
39 | clash. When in doubt, add an id.
40 |
41 |
46 | {`type Input: (
47 | ~_type: option(string), /* maps to "type", defaults to "text" */
48 | ~defaultValue: option(string), /* defaults to empty string */
49 | ~value: option(string),
50 | ~disabled: option(bool), /* defaults to false */
51 | ~label: option(UiTypes.labels), /* defaults to "UiTypes.Unlabeled" */
52 | ~id: option(string), /* the id is used to make labels clickable. This falls back to the label */
53 | ~validity: option(UiTypes.validation), /* defaults to "UiTypes.Valid" */
54 | ~variant: option(UiTypes.fontStyle), /* defaults to "UiTypes.Normal" */
55 | ~width: option(float), /* as a percentage. Defaults to "100.0" */
56 | ~theme: option(UiTypes.theme)
57 | ~placeholder: option(string) /* defaults to empty string */
58 | ~onChange=option(React.SyntheticEvent.t->unit),
59 | ~onBlur=option(React.SyntheticEvent.t->unit),
60 | ) => React.element;
61 | `}
62 |
63 |
64 | Preview
65 | Custom Width
66 | Labeled vs Unlabeled
89 | Normal / Mono fonts
104 |
119 |
38 |
39 | Sliders
40 | Interface
41 |
46 | {`type Slider: (
47 | ~theme: option(UiTypes.theme)),
48 | ~label: UiTypes.labels, /* defaults to "UiTypes.Unlabeled" */
49 | ~min:int, /* defaults to 0 */
50 | ~max:int, /* defaults to 100 */
51 | ~value: int,
52 | ~displayValue: string, /* If none is provided, the stringified value will be used */
53 | ~align: Slider.align, /* Defaults to Left */
54 | ~font: UiTypes.fontStyle, /* Defaults to Normal */
55 | ~variant: Slider.variant, /* Defaults to Primary */
56 | ~id: string,
57 | ~onChange:React.SyntheticEvent.t->unit,
58 | ~onInput:React.SyntheticEvent.t->unit,
59 | ~className:string,
60 | ~childrenOffset:int /* in px. this wil offset child elements vertically */
61 | ~children:option(React.Element)
62 | )=> React.element;`}
63 |
64 |
65 | Previews
66 | Simple Slider
67 |
73 | event.persist() ||
74 | setVals((vals) => ({
75 | ...vals,
76 | simple: event.target.value,
77 | }))
78 | }
79 | >
80 | Slider with a rendered value
81 |
88 | event.persist() ||
89 | setVals((vals) => ({
90 | ...vals,
91 | rendered: event.target.value,
92 | }))
93 | }
94 | >
95 | Slider with a bound child (dropdown)
96 |
106 | event.persist() ||
107 | setVals((vals) => ({
108 | ...vals,
109 | withChild: {
110 | ...vals.withChild,
111 | value: event.target.value,
112 | },
113 | }))
114 | }
115 | >
116 |
119 | setVals((vals) => ({
120 | ...vals,
121 | withChild: {
122 | ...vals.withChild,
123 | unit: newVal,
124 | },
125 | }))
126 | }
127 | value={vals.withChild.unit}
128 | options={[
129 | { name: 'cm', value: 'cm' },
130 | { name: 'm', value: 'm' },
131 | { name: 'km', value: 'km' },
132 | ]}
133 | title="Units"
134 | />
135 |
136 |
137 |
138 |
122 |
123 | {options
124 | ->Js.Array2.find(_option => _option.value == value)
125 | ->Belt.Option.mapWithDefault( currentOption.action()}>
135 | {title->Belt.Option.mapWithDefault( name->React.string
139 |
140 | )}
141 |
150 |
152 |
153 | {switch (state) {
154 | | Open =>
155 |
160 | {enableSearch
161 | ?
172 | {filteredOptions
173 | ->Belt.Array.map(_option =>
174 | {
185 | toggleState(e);
186 | callActionOnChange ? _option.action() : ();
187 | onChange(_option.value);
188 | }}>
189 | _option.name->React.string
190 |
191 | )
192 | ->React.array}
193 |
194 |
195 | | Closed =>
196 | }}
197 |
setHovered(_ => true)}
179 | depth={
180 | switch (theme) {
181 | | UiTypes.Light => (-1)
182 | | _ => 1
183 | }
184 | }
185 | theme
186 | className={Styles.notification(theme, state, defaultAnimationTime)}>
187 | setReadyForDismissal(_ => Forced)}
189 | className={"close-button " ++ Styles.closeButton}
190 | variant=ButtonStyles.Secondary>
191 |
193 | notification.title->React.string
194 |
195 | {notification.body->Belt.Option.getWithDefault("")->React.string}
196 |
197 | {notification.action
198 | ->Belt.Option.mapWithDefault(
200 |
201 | title->React.string
202 |
203 |
204 | )}
205 | {notification.timeout
206 | ->Belt.Option.mapWithDefault(
207 |
217 |
;
219 | },
220 | )}
221 | ;
222 | };
223 |
--------------------------------------------------------------------------------
/stories/textarea.stories.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { make as Textarea } from '../src/Textarea.bs.js'
3 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
4 | import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism'
5 | import { useDarkMode } from 'storybook-dark-mode'
6 | import { make as Card } from '../src/Card.bs.js'
7 | import {
8 | labeled,
9 | light,
10 | dark,
11 | normal,
12 | mono,
13 | valid,
14 | invalid,
15 | } from '../src/UiTypes.bs'
16 | import { both, horizontal, vertical } from '../src/TextareaStyles.bs'
17 | import { tiny, huge } from '../src/CardStyles.bs'
18 |
19 | export default {
20 | title: 'Textarea',
21 | }
22 |
23 | const margin = {
24 | margin: '1rem',
25 | }
26 |
27 | export const textarea = () => {
28 | const theme = useDarkMode() ? dark : light
29 |
30 | return (
31 |
32 |
33 | Textarea
34 |
35 | Interface
36 |
37 | As there is the option to have a label, we need to have an
38 | id so that we can make that clickable and link the label and
39 | the input. We can infer the id from the label, but this may
40 | clash. When in doubt, add an id.
41 |
42 |
47 | {`type Textarea: (
48 | ~_type: option(string), /* maps to "type", defaults to "text" */
49 | ~defaultValue: option(string), /* defaults to empty string */
50 | ~value: option(string),
51 | ~disabled: option(bool), /* defaults to false */
52 | ~label: option(UiTypes.labels), /* defaults to "UiTypes.Unlabeled" */
53 | ~id: option(string), /* the id is used to make labels clickable. This falls back to the label */
54 | ~validity: option(UiTypes.validation), /* defaults to "UiTypes.Valid" */
55 | ~variant: option(UiTypes.fontStyle), /* defaults to "UiTypes.Normal" */
56 | ~width: option(float), /* as a percentage. Defaults to "100.0" */
57 | ~resize=option(TextareaStyles.resize), /* Defauls to NoResize */
58 | ~theme: option(UiTypes.theme)
59 | ~placeholder: option(string) /* defaults to empty string */
60 | ~onChange=option(React.SyntheticEvent.t->unit),
61 | ~onBlur=option(React.SyntheticEvent.t->unit),
62 | ~styles=option(array(Css.rule)),
63 | ~rows=option(int), /* Defaults to 4 rows */
64 | ~cols=option(int), /* Defaults to 50 rows */
65 | ) => React.element;
66 | `}
67 |
68 |
69 | Preview
70 | Custom Width
71 | Sizing can either be done via the 'Width' attribute.
72 |
79 |
86 |
93 | Custom Height
94 |
102 |
110 | Labeled vs Unlabeled
111 |
118 |
124 |
125 | Normal / Mono fonts
126 |
133 |
140 |
141 | Resizeable
142 |
147 |
153 |
159 |
165 |
166 |
elem
186 | | Center => elem
187 | | Right => elem
188 | };
189 |
190 |
191 | {aligned(
)}
192 |
193 |
string_of_int}
200 | min={min->string_of_int}
201 | max={max->string_of_int}
202 | />
203 | {children->Belt.Option.mapWithDefault(
, children =>
204 |
208 | children
209 |
210 | )}
211 |
212 |
213 | {displayValue
214 | ->Belt.Option.getWithDefault(value |> string_of_int)
215 | ->React.string}
216 |
217 |
218 |
219 |
39 |
40 | Buttons
41 | Interface
42 |
47 | {`type Button: (
48 | ~disabled:boolean,
49 | ~type_: string,
50 | ~variant:ButtonStyles.Primary
51 | ~theme: option(UiTypes.theme)),
52 | ~size=UiTypes.size,
53 | ~icon=option(React.Element),
54 | ~onClick=option(React.SyntheticEvent.t->unit),
55 | ~children=option(React.Element)
56 | )=> React.element;`}
57 |
58 |
59 | Previews
60 | Normal Buttons
61 | {buttons.map(({ variant, text }) => (
62 |
63 |
64 | {text}
65 |
66 |
67 | ))}
68 |
69 | Small / Medium / Large
70 |
71 | {buttons.map(({ variant, text }) => (
72 |
73 |
78 | {text}
79 |
80 |
81 | ))}
82 |
83 |
84 | {buttons.map(({ variant, text }) => (
85 |
89 |
94 | {text}
95 |
96 |
97 | ))}
98 |
99 |
100 | {buttons.map(({ variant, text }) => (
101 |
102 |
107 | {text}
108 |
109 |
110 | ))}
111 |
112 |
113 | Disabled
114 | {buttons.map(({ variant, text }) => (
115 |
116 |
117 | {text}
118 |
119 |
120 | ))}
121 |
122 | With Icons
123 | {buttons.map(({ variant, text }) => (
124 |
125 |
133 | ))}
134 |
135 | Grouped
136 | {buttons.map(({ variant, text }) => (
137 |
138 |
139 |
140 | {text}
141 |
142 |
143 | {text}
144 |
145 |
153 |
154 | ))}
155 |
156 | Grouped with Mixed Variants
157 | {buttons.map(({ variant, text }) => (
158 |
159 |
160 |
161 | {text}
162 |
163 |
171 |
172 | ))}
173 |
174 |
37 |
38 | Dropdowns
39 | Interface
40 |
45 | {`type t('a) = {
46 | name: string,
47 | value: 'a,
48 | };
49 |
50 | type Dropdown: (
51 | ~theme: option(UiTypes.theme)
52 | ~options: array(t('a)),
53 | ~disabled: option(bool), /* defaults to false */
54 | ~enableSearch: option(bool), /* defaults to false */
55 | ~value: 'a,
56 | ~depth: option(int), /* defaults to 1 */
57 | ~minWidth: option(int), /* in px, defaults to 150, width for the button */
58 | ~maxHeight: option(int), /* in px, defaults to 200, height for the dropdown */
59 | ~onChange: 'a => unit,
60 | ~title: option(string),
61 | ~className: option(string), /* Defaults to empty string */
62 | ) => React.element;
63 | `}
64 |
65 |
66 | Preview
67 |
68 |
A regular dropdown
69 |
83 |
85 |
A regular dropdown with a built in filter
86 |
101 |
103 |
A regular dropdown without anything
104 |
119 |
121 |
A regular dropdown without anything
122 |
137 |
139 |
148 |
149 | Action Dropdowns
150 | Interface
151 |
156 | {`type t('a) = {
157 | name: string,
158 | value: 'a,
159 | action: unit -> unit
160 | };
161 |
162 | type Dropdown: (
163 | ~theme: option(UiTypes.theme)
164 | ~options: array(t('a)),
165 | ~disabled: option(bool), /* defaults to false */
166 | ~enableSearch: option(bool), /* defaults to false */
167 | ~value: 'a,
168 | ~depth: option(int), /* defaults to 1 */
169 | ~minWidth: option(int), /* in px, defaults to 150, width for the button */
170 | ~maxHeight: option(int), /* in px, defaults to 200, height for the dropdown */
171 | ~callActionOnChange=false,
172 | ~onChange: 'a => unit,
173 | ~title: option(string),
174 | ~className: option(string), /* Defaults to empty string */
175 | ) => React.element;
176 | `}
177 |
178 |
179 | Preview
180 |
181 |
A dropdown that calls actions
182 |
alert('Hello'),
191 | },
192 | {
193 | name: 'Ipsum',
194 | value: 1,
195 | action: () => alert('Hello from no. 2'),
196 | },
197 | ]}
198 | title="Sample"
199 | />
200 |
202 |
64 |
65 | Notification
66 |
67 | Interface
68 |
69 | There are two types to care about when using these. The
70 | first one is the Notification itself, the second one is the
71 | one that handles the display logic. The design is made in
72 | such a way that there is a pure way to handle the showing /
73 | hiding of notifications by updating the list. It is expected
74 | of an implementer to implement the logic for this. We use a
75 | centralized store management solution and feed the list into
76 | it from there. Note that the timeout is defined as a tuple
77 | of string / unit -> unit. The string holds the line that
78 | get's put into the button.
79 |
80 |
85 | {`type Notification: {
86 | id: string,
87 | title: string,
88 | body: option(string),
89 | action: option((string, unit => unit)),
90 | timeout: option(int),
91 | };
92 |
93 | type Notifications
94 | ~notifications: array(Notification),
95 | ~handleDismissal: option(id => unit),
96 | ~defaultAnimationTime: int, /* In ms, Defaults to 400 */
97 | ~maxAmount: int, /* Max notifications to show at one point in time. Defaults to 5 */
98 | ) => React.element;
99 | `}
100 |
101 | Helper
102 | Try it:
103 |
104 |
117 | Plain
118 |
119 |
120 |
133 | Body
134 |
135 |
136 | alert('Hello')],
144 | undefined,
145 | 'Title'
146 | )
147 | )}
148 | >
149 | Action
150 |
151 |
152 | alert('Hello')],
160 | 2000,
161 | 'Title'
162 | )
163 | )}
164 | >
165 | Timeout
166 |
167 |
168 |
169 | Helper
170 |
171 | To aid with the creation of these, rather than declaring
172 | them with a record type, we expose a convienience function
173 | with sane defaults for all optional values and automatic id
174 | creation with the help of 'uuid.v4()'. With the help of
175 | optional arguments, we can make the creation much less
176 | verbose.
177 |
178 |
179 |
184 | {`type Notification.create: (
185 | ~id: string, /* Defaults to uuid.v4() */
186 | ~body: option(string), /* Defaults to None */
187 | ~action: option(string), /* Defaults to None */
188 | ~timeout: option((string, unit => unit)), /* Defaults to None */
189 | title: string, /* No default, the only fixed parameter */
190 | );
191 |
192 | let a = Notification.create("Just a title");
193 | let b = Notification.create(~body="Also a body", "Just a title");
194 |
195 | `}
196 |
197 |
198 |
200 | setNotifications((arr) =>
201 | arr.filter(({ id }) => id !== notificationId)
202 | )
203 | }
204 | notifications={notifications}
205 | theme={theme}
206 | />
207 |
208 |
221 |
222 | name->React.string
233 |
234 |
235 | {switch (state) {
236 | | Open =>
237 |
242 | {enableSearch
243 | ?
254 | {filteredOptions
255 | ->Belt.Array.map(_option =>
256 | {
267 | toggleState(e);
268 | onChange(_option.value);
269 | }}>
270 | _option.name->React.string
271 |
272 | )
273 | ->React.array}
274 |
275 |
276 | | Closed =>
277 | }}
278 |
237 |
238 | "Top Left"->React.string
239 |
240 |
241 | "Top Center"->React.string
242 |
243 |
244 | "Top Right"->React.string
245 |
246 |
247 |
248 |
249 | "Bottom Left"->React.string
250 |
251 |
252 | "Bottom Center"->React.string
253 |
254 |
255 | "Bottom Right"->React.string
256 |
257 |
258 |
259 |
260 | "Left Top"->React.string
261 |
262 |
263 | "Left Middle"->React.string
264 |
265 |
266 | "Left Bottom"->React.string
267 |
268 |
269 |
270 |
271 | "Right Top"->React.string
272 |
273 |
274 | "Right Middle"->React.string
275 |
276 |
277 | "Right Bottom"->React.string
278 |
279 |
280 | ;
281 | };
282 | };
283 |
--------------------------------------------------------------------------------
/src/Tabs.re:
--------------------------------------------------------------------------------
1 | module Styles = TabStyles;
2 | open Lib.Function.Infix;
3 | open Lib.Jsx.Infix;
4 |
5 | type t = {
6 | id: string,
7 | title: string,
8 | };
9 |
10 | module Helpers = {
11 | let create = title => {id: GenericHelpers.v4(), title};
12 | let createMany = arr => Belt.Array.map(arr, create);
13 | let add = (arr, tab) => Belt.Array.concat(arr, [|tab|]);
14 | let update = (arr, x) => Belt.Array.map(arr, y => y.id === x.id ? x : y);
15 | let removeById = (arr, id) => Belt.Array.keep(arr, x => x.id !== id);
16 | let removeByIndex = (arr, idx) =>
17 | Belt.Array.concat(
18 | Belt.Array.slice(arr, ~offset=0, ~len=idx),
19 | Belt.Array.sliceToEnd(arr, idx + 1),
20 | );
21 | let duplicateById = (arr, id) => {
22 | let newId = GenericHelpers.v4();
23 | let arr =
24 | Js.Array2.find(arr, x => x.id === id)
25 | ->Belt.Option.map(elem =>
26 | Belt.Array.concat(arr, [|{...elem, id: newId}|])
27 | )
28 | ->Belt.Option.getWithDefault(arr);
29 | (arr, newId);
30 | };
31 | let duplicateByIdx = (arr, idx) => {
32 | let newId = GenericHelpers.v4();
33 | let arr =
34 | Belt.Array.get(arr, idx)
35 | ->Belt.Option.map(elem =>
36 | Belt.Array.concat(arr, [|{...elem, id: newId}|])
37 | )
38 | ->Belt.Option.getWithDefault(arr);
39 | (arr, newId);
40 | };
41 | let move = (arr, from, to_) => {
42 | Belt.Array.get(arr, from)
43 | ->Belt.Option.map(elem => {
44 | let copy = Belt.Array.copy(arr);
45 | Js.Array2.spliceInPlace(copy, ~pos=from, ~remove=1, ~add=[||])
46 | ->ignore;
47 | Js.Array2.spliceInPlace(copy, ~pos=to_, ~remove=0, ~add=[|elem|])
48 | ->ignore;
49 | copy;
50 | })
51 | ->Belt.Option.getWithDefault(arr);
52 | };
53 | };
54 |
55 | module TabInput = {
56 | [@react.component]
57 | let make = (~defaultValue, ~onRename) => {
58 | let ref = React.useRef(Js.Nullable.null);
59 |
60 | React.useEffect0(() => {
61 | Lib.Jsx.focus(ref);
62 | None;
63 | });
64 |
65 | let handleKeyDown = e => {
66 | Lib.Event.Keyboard.keyWas("Enter", e)
67 | ? onRename(e |> Lib.Event.getValueFromEvent) : ();
68 | };
69 |
70 |
103 | Add(Helpers.create("New tab"))->dispatch}>
112 |
113 | {Belt.Option.mapWithDefault(title, x->React.string
115 | )}
116 |
117 | ;
118 | };
119 | };
120 | module Tab = {
121 | [@react.component]
122 | let make =
123 | (
124 | ~tab: t,
125 | ~dispatch: action => unit,
126 | ~index: int,
127 | ~active: bool,
128 | ~standalone: bool,
129 | ~depth: int,
130 | ~features,
131 | ~theme,
132 | ) => {
133 | let (editing, setEditing) = React.useState(Lib.Function.const(false));
134 | let (canOpen, canClose, canUpdate, canDuplicate, canMove) = features;
135 |
136 | Open(tab.id)->dispatch}>
140 | {editing
141 | ? {
144 | setEditing(Lib.Function.const(false));
145 | Rename({...tab, title})->dispatch;
146 | }}
147 | />
148 | : {
150 | e->ReactEvent.Synthetic.stopPropagation;
151 | active && canUpdate
152 | ? setEditing(Lib.Function.const(true))
153 | : Open(tab.id)->dispatch;
154 | }}
155 | className={Styles.text(active, canUpdate)}>
156 | tab.title->React.string
157 | }
158 | {(!canDuplicate && !canClose)
159 | <&&> Css.rem} />}
160 | {canDuplicate
161 | <&&> {
163 | e->ReactEvent.Synthetic.stopPropagation;
164 | Duplicate(tab.id)->dispatch;
165 | }}
166 | className={Styles.roundedIconButton(
167 | ~leftMargin=true,
168 | theme,
169 | depth,
170 | active,
171 | )}>
172 | }
174 | {canClose
175 | <&&> {
177 | e->ReactEvent.Synthetic.stopPropagation;
178 | Close(tab.id)->dispatch;
179 | }}
180 | className={Styles.roundedIconButton(theme, depth, active)}>
181 | }
183 |
184 | ;
185 | };
186 | };
187 |
188 | [@react.component]
189 | let make =
190 | (
191 | ~standalone=true,
192 | ~activeTabId: string,
193 | ~tabs: array(t),
194 | ~theme,
195 | ~depth=0,
196 | ~onAdd=?,
197 | ~onMove=?,
198 | ~onOpen=?,
199 | ~onRename=?,
200 | ~onClose=?,
201 | ~addButtonText=?,
202 | ~onDuplicate=?,
203 | ) => {
204 | let onDispatch = action =>
205 | (
206 | switch (action) {
207 | | Add(x) => Belt.Option.map(onAdd, Lib.Function.apply(x))
208 | | Open(x) => Belt.Option.map(onOpen, Lib.Function.apply(x))
209 | | Close(x) => Belt.Option.map(onClose, Lib.Function.apply(x))
210 | | Rename(x) =>
211 | Belt.Option.map(
212 | onRename,
213 | Lib.Function.apply(x.title === "" ? {...x, title: "Untitled"} : x),
214 | )
215 | | Duplicate(x) => Belt.Option.map(onDuplicate, Lib.Function.apply(x))
216 | }
217 | )
218 | ->ignore;
219 |
220 | let onDragEnd = (e: Dnd.Context.dragEndEvent) => {
221 | let move =
222 | e.destination
223 | ->Js.Nullable.toOption
224 | ->Belt.Option.map(d => (e.source.index, d.index));
225 |
226 | switch (move, onMove) {
227 | | (Some((from, to_)), Some(fn)) => fn((from, to_))
228 | | _ => ()
229 | };
230 | };
231 |
232 | let onDragStart = (e: Dnd.Context.dragStartEvent) =>
233 | Belt.Option.map(onOpen, fn => {
234 | Belt.Array.get(tabs, e.source.index)
235 | ->Belt.Option.map((x => x.id) >> Lib.Function.applyF(fn))
236 | })
237 | ->ignore;
238 |
239 |
240 |
241 |
242 |
243 | {tabs
244 | ->Belt.Array.mapWithIndex((index, tab) =>
245 |
Belt.Option.isSome,
254 | onClose->Belt.Option.isSome,
255 | onRename->Belt.Option.isSome,
256 | onDuplicate->Belt.Option.isSome,
257 | onMove->Belt.Option.isSome,
258 | )
259 | dispatch=onDispatch
260 | active={tab.id === activeTabId}
261 | />
262 | )
263 | ->React.array}
264 | {onAdd->Belt.Option.isSome
265 | <&&>
274 |
275 |
58 |
59 | Cards
60 | Interface
61 |
66 | {`type Card: (
67 | ~onMouseOut: option(ReactEvent.Mouse.t -> unit),
68 | ~onMouseOver: option(ReactEvent.Mouse.t -> unit),
69 | ~spacing: option(CardStyles.spacing),
70 | ~theme: option(UiTypes.theme),
71 | ~depth: option(int),
72 | ~header: option(React.Element),
73 | ~footer: option(React.Element),
74 | ~children: option(React.Element),
75 | ~className: option(string),
76 | ) => React.element;`}
77 |
78 |
79 | Preview
80 | Padding
81 |
82 |
83 | Tiny Padding
84 |
85 |
86 |
87 |
88 | Normal Padding
89 |
90 |
91 |
92 |
93 | Large Padding
94 |
95 |
96 |
97 |
98 | Huge Padding
99 |
100 |
101 |
102 | Nesting
103 |
104 | Using the 'Depth' Parameter, one can stack multiple cards.
105 | The stacking here actuall starts with the background, which
106 | is one of our cards.
107 |
108 |
109 |
110 | No. 1
111 |
112 | No. 2
113 |
114 | Cards all the way down
115 |
116 |
117 |
118 |
119 |
120 | Header / Footer
121 |
122 | One can pass in a header and footer component. To be as
123 | flexible as possible here, we do not implement any spacing
124 | options here. The component passed into the header should
125 | place itself according to the space available
126 |
127 |
128 |
131 | Some Header
132 |
136 |
Some Footer
137 |
138 | }
139 | spacing={tiny}
140 | depth={2}
141 | theme={theme}
142 | >
143 | No. 1
144 | Some text inside here still
145 |
146 |
156 | Login
157 |
158 | }
159 | spacing={tiny}
160 | depth={2}
161 | theme={theme}
162 | >
163 | Some forms could go here...
164 |
165 |
166 |
167 |
168 | )
169 | }
170 |
171 | export const cardWithTabs = () => {
172 | const theme = useDarkMode() ? dark : light
173 | const [tabs, setTabs] = React.useState([
174 | {
175 | id: 'one',
176 | title: 'foo',
177 | },
178 | {
179 | id: 'two',
180 | title: 'bar',
181 | },
182 | {
183 | id: 'three',
184 | title: 'baz',
185 | },
186 | ])
187 | const [activeTabId, setActiveTabId] = React.useState('one')
188 | return (
189 |
190 |
191 | Tabbed Card
192 | Interface
193 |
198 | {`type Card: (
199 | ~onMouseOver: option(ReactEvent.Mouse.t => unit),
200 | ~onMouseOut: option(ReactEvent.Mouse.t => unit),
201 | ~spacing: option(CardStyles.spacing),
202 | ~theme: option(UiTypes.theme),
203 | ~depth: option(int),
204 | ~className: option(string),
205 | ~footer: option(React.element),
206 | ~children: option(React.element),
207 | /* Tab specific */
208 | ~activeTabId: string, /* tabId */
209 | ~tabs: array(Tabs.t),
210 | ~onMove: option(((int, int)) => unit), /* (fromIdx, toIdx) */
211 | ~onOpen: option(string => 'a), /* tabId */
212 | ~onClose: option(string => 'a), /* tabId */
213 | ~onDuplicate: option(string => 'a), /* tabId */
214 | ~onRename: option(Tabs.t => 'a),
215 | ) => React.element;`}
216 |
217 |
218 | Preview
219 |
220 | Tabs support a number of callbacks:
221 |
222 | Open a tab (onMove)
223 | Close a tab (onClose)
224 | Duplicate a tab (onDuplicate)
225 | Rename a tab (onRename)
226 | Move a tab (via drag 'n drop) (onMove)
227 |
228 | Features can be disabled by omitting the callback. I.e if
229 | there is no function to rename the tab, the text won't be
230 | editable.
231 |
232 |
233 |
{
235 | setTabs((tabs) => Helpers.add(tabs, newTab))
236 | setActiveTabId(newTab.id)
237 | }}
238 | onOpen={setActiveTabId}
239 | onMove={([from, to]) => {
240 | setTabs(Helpers.move(tabs, from, to))
241 | }}
242 | onRename={(x) => {
243 | setTabs((tabs) => Helpers.update(tabs, x))
244 | }}
245 | onClose={(x) => {
246 | const tabIdx = tabs.findIndex((y) => y.id === x)
247 | console.log(tabIdx, x)
248 | if (tabs[tabIdx + 1]) {
249 | setActiveTabId(tabs[tabIdx + 1].id)
250 | } else if (tabs[tabIdx - 1]) {
251 | setActiveTabId(tabs[tabIdx - 1].id)
252 | } else {
253 | setActiveTabId('')
254 | }
255 | setTabs((tabs) => Helpers.removeById(tabs, x))
256 | }}
257 | onDuplicate={(x) => {
258 | const [newTabs, newId] = Helpers.duplicateById(
259 | tabs,
260 | x
261 | )
262 | setActiveTabId(newId)
263 | setTabs(newTabs)
264 | }}
265 | tabs={tabs}
266 | activeTabId={activeTabId}
267 | spacing={tiny}
268 | depth={2}
269 | theme={theme}
270 | >
271 | Tabs
272 |
273 | Active Tab:{' '}
274 | {tabs.find((x) => x.id === activeTabId).title}
275 |
276 |
277 |
A Tabbed card with almost no features enabled
279 |
280 |
288 | Tabs
289 |
290 | Active Tab:{' '}
291 | {tabs.find((x) => x.id === activeTabId).title}
292 |
293 |
294 |
296 |
74 |
75 | Tabbed Card
76 | Interface
77 |
82 | {`type tab = {
83 | id: string,
84 | title: string,
85 | };
86 |
87 | type Tabs: (
88 | ~activeTabId: string;
89 | ~depth: option(int);
90 | ~addButtonText: option(string); // Defaults to "New"
91 | ~onAdd: option(t -> unit);
92 | ~onClose: option(string -> unit);
93 | ~onDuplicate: option(string -> unit);
94 | ~onMove: option(( int, int ) -> unit);
95 | ~onOpen: option(string -> unit);
96 | ~onRename: option(t -> unit);
97 | ~standalone: option(bool);
98 | ~tabs: array(t);
99 | ~theme: UiTypes.theme;
100 | ) => React.element;`}
101 |
102 |
103 | Preview
104 |
105 | Tabs support a number of callbacks:
106 |
107 | Add a tab (onAdd)
108 | Open a tab (onMove)
109 | Close a tab (onClose)
110 | Duplicate a tab (onDuplicate)
111 | Rename a tab (onRename)
112 | Move a tab (via drag 'n drop) (onMove)
113 |
114 | Features can be disabled by omitting the callback. I.e if
115 | there is no function to rename the tab, the text won't be
116 | editable.
117 |
118 | All Functionality Enabled
119 |
120 |
{
122 | setTabs((tabs) => Helpers.add(tabs, newTab))
123 | setActiveTabId(newTab.id)
124 | }}
125 | onOpen={setActiveTabId}
126 | onMove={([from, to]) => {
127 | setTabs(Helpers.move(tabs, from, to))
128 | }}
129 | onRename={(x) => {
130 | setTabs((tabs) => Helpers.update(tabs, x))
131 | }}
132 | onClose={(x) => {
133 | const tabIdx = tabs.findIndex((y) => y.id === x)
134 | console.log(tabIdx, x)
135 | if (tabs[tabIdx + 1]) {
136 | setActiveTabId(tabs[tabIdx + 1].id)
137 | } else if (tabs[tabIdx - 1]) {
138 | setActiveTabId(tabs[tabIdx - 1].id)
139 | } else {
140 | setActiveTabId('')
141 | }
142 | setTabs((tabs) => Helpers.removeById(tabs, x))
143 | }}
144 | onDuplicate={(x) => {
145 | const [newTabs, newId] = Helpers.duplicateById(
146 | tabs,
147 | x
148 | )
149 | setActiveTabId(newId)
150 | setTabs(newTabs)
151 | }}
152 | tabs={tabs}
153 | activeTabId={activeTabId}
154 | depth={2}
155 | theme={theme}
156 | >
157 | Tabs
158 |
159 | Active Tab:{' '}
160 | {tabs.find((x) => x.id === activeTabId).title}
161 |
162 |
163 |
All Functionality Enabled - hiding add text
165 |
166 |
{
169 | setTabs((tabs) => Helpers.add(tabs, newTab))
170 | setActiveTabId(newTab.id)
171 | }}
172 | onOpen={setActiveTabId}
173 | onMove={([from, to]) => {
174 | setTabs(Helpers.move(tabs, from, to))
175 | }}
176 | onRename={(x) => {
177 | setTabs((tabs) => Helpers.update(tabs, x))
178 | }}
179 | onClose={(x) => {
180 | const tabIdx = tabs.findIndex((y) => y.id === x)
181 | console.log(tabIdx, x)
182 | if (tabs[tabIdx + 1]) {
183 | setActiveTabId(tabs[tabIdx + 1].id)
184 | } else if (tabs[tabIdx - 1]) {
185 | setActiveTabId(tabs[tabIdx - 1].id)
186 | } else {
187 | setActiveTabId('')
188 | }
189 | setTabs((tabs) => Helpers.removeById(tabs, x))
190 | }}
191 | onDuplicate={(x) => {
192 | const [newTabs, newId] = Helpers.duplicateById(
193 | tabs,
194 | x
195 | )
196 | setActiveTabId(newId)
197 | setTabs(newTabs)
198 | }}
199 | tabs={tabs}
200 | activeTabId={activeTabId}
201 | depth={2}
202 | theme={theme}
203 | >
204 | Tabs
205 |
206 | Active Tab:{' '}
207 | {tabs.find((x) => x.id === activeTabId).title}
208 |
209 |
210 |
No Duplication
212 |
213 |
{
216 | setTabs(Helpers.move(tabs, from, to))
217 | }}
218 | onRename={(x) => {
219 | setTabs((tabs) => Helpers.update(tabs, x))
220 | }}
221 | onClose={(x) => {
222 | const tabIdx = tabs.findIndex((y) => y.id === x)
223 | console.log(tabIdx, x)
224 | if (tabs[tabIdx + 1]) {
225 | setActiveTabId(tabs[tabIdx + 1].id)
226 | } else if (tabs[tabIdx - 1]) {
227 | setActiveTabId(tabs[tabIdx - 1].id)
228 | } else {
229 | setActiveTabId('')
230 | }
231 | setTabs((tabs) => Helpers.removeById(tabs, x))
232 | }}
233 | tabs={tabs}
234 | activeTabId={activeTabId}
235 | depth={2}
236 | theme={theme}
237 | >
238 | Tabs
239 |
240 | Active Tab:{' '}
241 | {tabs.find((x) => x.id === activeTabId).title}
242 |
243 |
244 |
No Duplication or Moving
246 |
247 |
{
250 | setTabs((tabs) => Helpers.update(tabs, x))
251 | }}
252 | onClose={(x) => {
253 | const tabIdx = tabs.findIndex((y) => y.id === x)
254 | console.log(tabIdx, x)
255 | if (tabs[tabIdx + 1]) {
256 | setActiveTabId(tabs[tabIdx + 1].id)
257 | } else if (tabs[tabIdx - 1]) {
258 | setActiveTabId(tabs[tabIdx - 1].id)
259 | } else {
260 | setActiveTabId('')
261 | }
262 | setTabs((tabs) => Helpers.removeById(tabs, x))
263 | }}
264 | tabs={tabs}
265 | activeTabId={activeTabId}
266 | depth={2}
267 | theme={theme}
268 | >
269 | Tabs
270 |
271 | Active Tab:{' '}
272 | {tabs.find((x) => x.id === activeTabId).title}
273 |
274 |
275 |
No Duplication or Moving or Renaming
277 |
278 |
{
281 | const tabIdx = tabs.findIndex((y) => y.id === x)
282 | console.log(tabIdx, x)
283 | if (tabs[tabIdx + 1]) {
284 | setActiveTabId(tabs[tabIdx + 1].id)
285 | } else if (tabs[tabIdx - 1]) {
286 | setActiveTabId(tabs[tabIdx - 1].id)
287 | } else {
288 | setActiveTabId('')
289 | }
290 | setTabs((tabs) => Helpers.removeById(tabs, x))
291 | }}
292 | tabs={tabs}
293 | activeTabId={activeTabId}
294 | depth={2}
295 | theme={theme}
296 | >
297 | Tabs
298 |
299 | Active Tab:{' '}
300 | {tabs.find((x) => x.id === activeTabId).title}
301 |
302 |
303 |
Only Opening
305 |
306 |
313 | Tabs
314 |
315 | Active Tab:{' '}
316 | {tabs.find((x) => x.id === activeTabId).title}
317 |
318 |
319 |
321 |
329 | Helper Functions
330 |
331 | These helper functions should abstract away most of the logic of
332 | updating the underlying array of tabs. They are quite self
333 | explanatory given the name and type signature.
334 |
335 |
340 | {`type create: string -> t
341 | type createMany: array(string) -> array(t)
342 | type add: (array(t), t) -> array(t)
343 | type update: (array(t), t) -> array(t)
344 | type removeById: (array(t), string) -> array(t)
345 | type removeByIndex: (array(t), int) -> array(t)
346 | type duplicateById: (array(t), string) -> array(t)
347 | type duplicateByIdx: (array(t), int) -> array(t)
348 | type move : (array(t), int, int) -> array(t) /* from / to */`}
349 |
350 |
351 | )
352 | }
353 |
--------------------------------------------------------------------------------