Task: Better splitting & Docs

neos · Feb 20, 2023 · 59ed784 · 59ed784
1 parent 2128f07
commit 59ed784
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 8 deletions.
diff --git 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 <head> of the HTML document
+library.add(
+    fas,
+    faNeos,
+)
+
+export const Component = () => (
+    <Icon icon="neos" />
+)
+```
 
 
 ## Contributing

diff --git 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
@@ -0,0 +1,9 @@
+<html>
+<head>
+    <script defer src="dist/test.js"></script>
+    <link rel="stylesheet" href="dist/test.css"> 
+</head>
+<body style="padding: 2rem; background: #1f1f1f;">
+    <div id="app"></div>
+</body>
+</html>
diff --git a/packages/react-ui-components/example/test.jsx 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 <head> of the HTML document
+library.add(
+    fas,
+    faNeos,
+)
+
+const App = () => (
+    <div style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "2rem",
+        width: "100px"
+    }}>
+        <IconButton icon="neos" />
+        <Icon icon="swimming-pool" />
+        <Button>Hello Welt</Button>
+    </div>
+)
+
+render(<App />, document.getElementById("app"))
diff --git a/packages/react-ui-components/package.json b/packages/react-ui-components/package.json
@@ -14,6 +14,10 @@
         "import": "./dist/index.js",
         "types": "./types/index.d.ts"
       },
+      "./identifiers": {
+        "import": "./dist/identifiers.js",
+        "types": "./types/identifiers.d.ts"
+      },
       "./unstyled": {
         "import": "./dist/unstyled.js",
         "types": "./types/unstyled.d.ts"
@@ -33,7 +37,8 @@
     "clean": "rm -rf dist types",
     "jest": "NODE_ENV=test jest",
     "jest:updateSnapshots": "NODE_ENV=test jest -u",
-    "start": "cross-env STORY=true start-storybook -p 9001"
+    "start": "cross-env STORY=true start-storybook -p 9001",
+    "example": "cd example && yarn esbuild test.jsx --outdir=dist --bundle --sourcemap=linked"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",