From 59ed78442bc482a693a0bea3ca98d413cee508ff Mon Sep 17 00:00:00 2001
From: mhsdesign <85400359+mhsdesign@users.noreply.github.com>
Date: Tue, 21 Feb 2023 00:14:46 +0100
Subject: [PATCH] Task: Better splitting & Docs
---
packages/react-ui-components/README.md | 28 +++++++++++--
packages/react-ui-components/esbuild.js | 41 +++++++++++++++++--
.../react-ui-components/example/test.html | 9 ++++
packages/react-ui-components/example/test.jsx | 29 +++++++++++++
packages/react-ui-components/package.json | 7 +++-
5 files changed, 106 insertions(+), 8 deletions(-)
create mode 100644 packages/react-ui-components/example/test.html
create mode 100644 packages/react-ui-components/example/test.jsx
diff --git a/packages/react-ui-components/README.md b/packages/react-ui-components/README.md
index cdeb54f856..69550dd39f 100644
--- a/packages/react-ui-components/README.md
+++ b/packages/react-ui-components/README.md
@@ -25,7 +25,7 @@ Its already compiled for you to bare ES2020 Javascript and CSS. So just roll wit
## Usage within in a Neos.Ui plugin?
-you dont actually need to require this pluging when building a pure Neos.Ui Plugin like you dont need react installed aswell. Your plugin will import `@neos-project/react-ui-components` from the "`window` export" of the Neos.Ui Host.
+You dont actually need to require this pluging when building a pure Neos.Ui Plugin like you dont need react installed aswell. Your plugin will import `@neos-project/react-ui-components` from the "`window` export" of the Neos.Ui Host.
You still might want to install this package to have typescript autocompletion and typesafety ;)
@@ -46,9 +46,31 @@ visit their docs for more information about how this approach works. Our identif
import identifiers from '@neos-project/react-ui-components/identifiers';
```
-... todo implement above
+## Usage with Icons
-## Todo Explain Icon Usage ...
+Icons require you to import and configure fontawesome properly.
+And example config could look like this:
+
+```js
+import { Icon } from '@neos-project/react-ui-components';
+
+import { config, library } from '@fortawesome/fontawesome-svg-core';
+// here we import all the solid icons (which is bad wor bundle size, but might be necessary)
+import { fas } from '@fortawesome/free-solid-svg-icons';
+// but you can also only include a certain icon youd like
+import { faNeos } from '@fortawesome/free-brands-svg-icons/faNeos';
+import '@fortawesome/fontawesome-svg-core/styles.css';
+
+config.autoAddCss = false; // Dont insert the supporting CSS into the of the HTML document
+library.add(
+ fas,
+ faNeos,
+)
+
+export const Component = () => (
+
+)
+```
## Contributing
diff --git a/packages/react-ui-components/esbuild.js b/packages/react-ui-components/esbuild.js
index dadc028ed1..5613a5c010 100644
--- a/packages/react-ui-components/esbuild.js
+++ b/packages/react-ui-components/esbuild.js
@@ -1,15 +1,48 @@
-const {compileWithCssVariables} = require('../../cssVariables')
+const { compileWithCssVariables } = require('../../cssVariables')
const nodePath = require("path")
const { writeFile, mkdir } = require("fs/promises")
const packageJson = require("./package.json");
const { cssModules } = require('../../cssModules');
+const { build } = require('esbuild');
-require('esbuild').build({
+build({
entryPoints: [
- "src/index.ts",
- "src/unstyled.ts"
+ "./src/index.ts",
+ "./src/unstyled.ts",
+ "./src/identifiers.ts",
+
+ // we use each component as entry point to not bundle all code directly into the index.js
+ // so we have proper code splitting when importing only a single component from this lib
+ "./src/enhanceWithClickOutside",
+ "./src/Badge",
+ "./src/Bar",
+ "./src/Button",
+ "./src/ButtonGroup",
+ "./src/CheckBox",
+ "./src/DateInput",
+ "./src/Dialog",
+ "./src/DropDown",
+ "./src/Frame",
+ "./src/Headline",
+ "./src/Icon",
+ "./src/IconButton",
+ "./src/IconButtonDropDown",
+ "./src/Label",
+ "./src/Logo",
+ "./src/SelectBox",
+ "./src/SideBar",
+ "./src/Tabs",
+ "./src/TextArea",
+ "./src/TextInput",
+ "./src/ToggablePanel",
+ "./src/Tooltip",
+ "./src/Tree",
+ "./src/MultiSelectBox",
+ "./src/MultiSelectBox_ListPreviewSortable",
+ "./src/SelectBox_Option_SingleLine",
+ "./src/SelectBox_Option_MultiLineWithThumbnail"
],
external: Object.keys({...packageJson.dependencies, ...packageJson.peerDependencies}),
outdir: "dist",
diff --git a/packages/react-ui-components/example/test.html b/packages/react-ui-components/example/test.html
new file mode 100644
index 0000000000..5a4644ce08
--- /dev/null
+++ b/packages/react-ui-components/example/test.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/packages/react-ui-components/example/test.jsx b/packages/react-ui-components/example/test.jsx
new file mode 100644
index 0000000000..41b7e7bb63
--- /dev/null
+++ b/packages/react-ui-components/example/test.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { render } from "react-dom";
+import { IconButton, Icon, Button } from "../dist/index"
+
+import {config, library} from '@fortawesome/fontawesome-svg-core';
+import {fas} from '@fortawesome/free-solid-svg-icons';
+import {faNeos} from '@fortawesome/free-brands-svg-icons/faNeos';
+import '@fortawesome/fontawesome-svg-core/styles.css';
+
+config.autoAddCss = false; // Dont insert the supporting CSS into the of the HTML document
+library.add(
+ fas,
+ faNeos,
+)
+
+const App = () => (
+