Merge pull request #260 from modelix/more-component-libraries

More component libraries

react-ssr-client/package.json

@@ -10,15 +10,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@modelix/projectional-editor-ssr-client-lib": "file:../projectional-editor-ssr-client-lib/build/packages/js",
     "@modelix/ts-model-api": "^8.15.0",
     "@mui/icons-material": "^5.15.20",
+    "@mui/joy": "^5.0.0-beta.51",
     "@mui/material": "^5.15.20",
     "@mui/x-data-grid": "^7.7.1",
     "@mui/x-tree-view": "^7.7.1",
+    "antd": "^5.23.3",
+    "chart.js": "^4.4.7",
     "material-table": "^2.0.5",
+    "primereact": "^10.9.2",
+    "quill": "^2.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "reconnecting-websocket": "^4.4.0"

react-ssr-client/src/components/DefaultComponents.ts

@@ -1,6 +1,11 @@
 import {componentConstructors, registerComponentConstructor} from "./Base.tsx";
 import * as mui from "@mui/material";
 import * as icons from "@mui/icons-material";
+import * as joy from "@mui/joy";
+import * as joyStyles from "@mui/joy/styles";
+import * as antd from "antd";
+import * as primeComponents from "./PrimeReactComponents.ts";
+import * as primeIcons from "./PrimeReactIcons.ts";
 import { DataGrid } from '@mui/x-data-grid';
 import Grid2 from "@mui/material/Unstable_Grid2"
 import { SimpleTreeView, RichTreeView, TreeItem, TreeItem2 } from '@mui/x-tree-view';
@@ -57,6 +62,13 @@ const svgTagList = [
     "view",
 ]
 
+function registerAllComponents(objects: any, prefix: string) {
+    for (const id in objects) {
+        if (id.charAt(0).toUpperCase() != id.charAt(0)) continue
+        registerComponentConstructor(prefix + id, (objects as any)[id])
+    }
+}
+
 export function registerDefaultComponents() {
     for (const tagName of htmlTagList) {
         registerComponentConstructor("html." + tagName, tagName)
@@ -66,15 +78,13 @@ export function registerDefaultComponents() {
         registerComponentConstructor("svg." + tagName, tagName)
     }
 
-    for (const id in mui) {
-        if (id.charAt(0).toUpperCase() != id.charAt(0)) continue
-        registerComponentConstructor("mui." + id, (mui as any)[id])
-    }
-
-    for (const id in icons) {
-        if (id.charAt(0).toUpperCase() != id.charAt(0)) continue
-        registerComponentConstructor("mui.icons." + id, (icons as any)[id])
-    }
+    registerAllComponents(mui, "mui.")
+    registerAllComponents(icons, "mui.icons.")
+    registerAllComponents(joy, "joy.")
+    registerAllComponents(joyStyles, "joy.styles.")
+    registerAllComponents(antd, "antd.")
+    registerAllComponents(primeComponents, "primereact.")
+    registerAllComponents(primeIcons, "primereact.icons.")
 
     registerComponentConstructor("mui.DataGrid", DataGrid)
     registerComponentConstructor("mui.Grid2", Grid2)

react-ssr-client/src/components/PrimeReactComponents.ts

@@ -0,0 +1,103 @@
+export { Accordion, AccordionTab } from 'primereact/accordion'
+export { PrimeReactProvider, PrimeReactContext } from 'primereact/api'
+export { AutoComplete } from 'primereact/autocomplete'
+export { Avatar } from 'primereact/avatar'
+export { AvatarGroup } from 'primereact/avatargroup'
+export { Badge } from 'primereact/badge'
+export { BlockUI } from 'primereact/blockui'
+export { BreadCrumb } from 'primereact/breadcrumb'
+export { Button } from 'primereact/button'
+export { ButtonGroup } from 'primereact/buttongroup'
+export { Calendar } from 'primereact/calendar'
+export { Card } from 'primereact/card'
+export { Carousel } from 'primereact/carousel'
+export { CascadeSelect } from 'primereact/cascadeselect'
+export { Chart } from 'primereact/chart'
+export { Checkbox } from 'primereact/checkbox'
+export { Chip } from 'primereact/chip'
+export { Chips } from 'primereact/chips'
+export { ColorPicker } from 'primereact/colorpicker'
+export { Column } from 'primereact/column'
+export { ColumnGroup } from 'primereact/columngroup'
+export { ConfirmDialog } from 'primereact/confirmdialog'
+export { ConfirmPopup } from 'primereact/confirmpopup'
+export { ContextMenu } from 'primereact/contextmenu'
+export { CSSTransition } from 'primereact/csstransition'
+export { DataScroller } from 'primereact/datascroller'
+export { DataTable } from 'primereact/datatable'
+export { DataView, DataViewLayoutOptions } from 'primereact/dataview'
+export { DeferredContent } from 'primereact/deferredcontent'
+export { Dialog } from 'primereact/dialog'
+export { Divider } from 'primereact/divider'
+export { Dock } from 'primereact/dock'
+export { Dropdown } from 'primereact/dropdown'
+export { Editor } from 'primereact/editor'
+export { Fieldset } from 'primereact/fieldset'
+export { FileUpload } from 'primereact/fileupload'
+export { FloatLabel } from 'primereact/floatlabel'
+export { Galleria } from 'primereact/galleria'
+export { IconBase } from 'primereact/iconbase'
+export { IconField } from 'primereact/iconfield'
+export { Image } from 'primereact/image'
+export { Inplace, InplaceContent, InplaceDisplay } from 'primereact/inplace'
+export { InputIcon } from 'primereact/inputicon'
+export { InputMask } from 'primereact/inputmask'
+export { InputNumber } from 'primereact/inputnumber'
+export { InputOtp } from 'primereact/inputotp'
+export { InputSwitch } from 'primereact/inputswitch'
+export { InputText } from 'primereact/inputtext'
+export { InputTextarea } from 'primereact/inputtextarea'
+export { Knob } from 'primereact/knob'
+export { ListBox } from 'primereact/listbox'
+export { MegaMenu } from 'primereact/megamenu'
+export { Mention } from 'primereact/mention'
+export { Menu } from 'primereact/menu'
+export { Menubar } from 'primereact/menubar'
+export { Message } from 'primereact/message'
+export { Messages } from 'primereact/messages'
+export { MeterGroup } from 'primereact/metergroup'
+export { MultiSelect } from 'primereact/multiselect'
+export { MultiStateCheckbox } from 'primereact/multistatecheckbox'
+export { OrderList } from 'primereact/orderlist'
+export { OrganizationChart } from 'primereact/organizationchart'
+export { OverlayPanel } from 'primereact/overlaypanel'
+export { Paginator } from 'primereact/paginator'
+export { Panel } from 'primereact/panel'
+export { PanelMenu } from 'primereact/panelmenu'
+export { Password } from 'primereact/password'
+export { PickList } from 'primereact/picklist'
+export { ProgressBar } from 'primereact/progressbar'
+export { ProgressSpinner } from 'primereact/progressspinner'
+export { RadioButton } from 'primereact/radiobutton'
+export { Rating } from 'primereact/rating'
+export { Ripple } from 'primereact/ripple'
+export { Row } from 'primereact/row'
+export { ScrollPanel } from 'primereact/scrollpanel'
+export { ScrollTop } from 'primereact/scrolltop'
+export { SelectButton } from 'primereact/selectbutton'
+export { Sidebar } from 'primereact/sidebar'
+export { Skeleton } from 'primereact/skeleton'
+export { SlideMenu } from 'primereact/slidemenu'
+export { Slider } from 'primereact/slider'
+export { SpeedDial } from 'primereact/speeddial'
+export { SplitButton } from 'primereact/splitbutton'
+export { Splitter, SplitterPanel } from 'primereact/splitter'
+export { Stepper } from 'primereact/stepper'
+export { StepperPanel } from 'primereact/stepperpanel'
+export { Steps } from 'primereact/steps'
+export { StyleClass } from 'primereact/styleclass'
+export { TabMenu } from 'primereact/tabmenu'
+export { TabView, TabPanel } from 'primereact/tabview'
+export { Tag } from 'primereact/tag'
+export { Terminal } from 'primereact/terminal'
+export { TieredMenu } from 'primereact/tieredmenu'
+export { Timeline } from 'primereact/timeline'
+export { Toast } from 'primereact/toast'
+export { ToggleButton } from 'primereact/togglebutton'
+export { Toolbar } from 'primereact/toolbar'
+export { Tooltip } from 'primereact/tooltip'
+export { Tree } from 'primereact/tree'
+export { TreeSelect } from 'primereact/treeselect'
+export { TreeTable } from 'primereact/treetable'
+export { TriStateCheckbox } from 'primereact/tristatecheckbox'
+export { VirtualScroller } from 'primereact/virtualscroller'

react-ssr-client/src/components/PrimeReactIcons.ts

@@ -0,0 +1,47 @@
+export { AngleDoubleDownIcon } from 'primereact/icons/angledoubledown'
+export { AngleDoubleLeftIcon } from 'primereact/icons/angledoubleleft'
+export { AngleDoubleRightIcon } from 'primereact/icons/angledoubleright'
+export { AngleDoubleUpIcon } from 'primereact/icons/angledoubleup'
+export { AngleDownIcon } from 'primereact/icons/angledown'
+export { AngleLeftIcon } from 'primereact/icons/angleleft'
+export { AngleRightIcon } from 'primereact/icons/angleright'
+export { AngleUpIcon } from 'primereact/icons/angleup'
+export { ArrowDownIcon } from 'primereact/icons/arrowdown'
+export { ArrowUpIcon } from 'primereact/icons/arrowup'
+export { BanIcon } from 'primereact/icons/ban'
+export { BarsIcon } from 'primereact/icons/bars'
+export { BlankIcon } from 'primereact/icons/blank'
+export { CalendarIcon } from 'primereact/icons/calendar'
+export { CheckIcon } from 'primereact/icons/check'
+export { ChevronDownIcon } from 'primereact/icons/chevrondown'
+export { ChevronLeftIcon } from 'primereact/icons/chevronleft'
+export { ChevronRightIcon } from 'primereact/icons/chevronright'
+export { ChevronUpIcon } from 'primereact/icons/chevronup'
+export { DownloadIcon } from 'primereact/icons/download'
+export { ExclamationTriangleIcon } from 'primereact/icons/exclamationtriangle'
+export { EyeIcon } from 'primereact/icons/eye'
+export { EyeSlashIcon } from 'primereact/icons/eyeslash'
+export { FilterIcon } from 'primereact/icons/filter'
+export { FilterSlashIcon } from 'primereact/icons/filterslash'
+export { InfoCircleIcon } from 'primereact/icons/infocircle'
+export { MinusIcon } from 'primereact/icons/minus'
+export { PencilIcon } from 'primereact/icons/pencil'
+export { PlusIcon } from 'primereact/icons/plus'
+export { RefreshIcon } from 'primereact/icons/refresh'
+export { SearchIcon } from 'primereact/icons/search'
+export { SearchMinusIcon } from 'primereact/icons/searchminus'
+export { SearchPlusIcon } from 'primereact/icons/searchplus'
+export { SortAltIcon } from 'primereact/icons/sortalt'
+export { SortAmountDownIcon } from 'primereact/icons/sortamountdown'
+export { SortAmountUpAltIcon } from 'primereact/icons/sortamountupalt'
+export { SpinnerIcon } from 'primereact/icons/spinner'
+export { StarIcon } from 'primereact/icons/star'
+export { StarFillIcon } from 'primereact/icons/starfill'
+export { ThLargeIcon } from 'primereact/icons/thlarge'
+export { TimesIcon } from 'primereact/icons/times'
+export { TimesCircleIcon } from 'primereact/icons/timescircle'
+export { TrashIcon } from 'primereact/icons/trash'
+export { UndoIcon } from 'primereact/icons/undo'
+export { UploadIcon } from 'primereact/icons/upload'
+export { WindowMaximizeIcon } from 'primereact/icons/windowmaximize'
+export { WindowMinimizeIcon } from 'primereact/icons/windowminimize'