@webiny/app-admin 0.0.0-mt-1

package/styles/material-theme-assignments.scss

@@ -0,0 +1,333 @@
+@use "~@material/top-app-bar/_mixins.scss" as topAppBar;
+@use "~@material/elevation/mixins" as elevation;
+@use "~@material/button/mixins" as button;
+@use "~@material/icon-button/mixins" as iconButton;
+@use "~@material/drawer/mixins" as drawer;
+@use "~@material/tab-bar/mixins" as tabBar;
+@use "~@material/tab/mixins" as tab;
+@use "~@material/tab-indicator/mixins" as tabIndicator;
+@use "~@material/list/mixins" as list;
+@use "~@material/switch/mixins" as switch;
+@use "~@material/textfield/mixins" as textfield;
+@use "~@material/select/mixins" as select;
+@use "~@material/checkbox/mixins" as checkbox;
+@use "~@material/radio/mixins" as radio;
+@use "~@material/snackbar/mixins" as snackbar;
+
+// top app bar should use theme-surface as the fill color
+.mdc-top-app-bar {
+  @include topAppBar.mdc-top-app-bar-fill-color($mdc-theme-surface);
+}
+
+.mdc-top-app-bar.primary {
+  @include topAppBar.mdc-top-app-bar-fill-color($mdc-theme-primary);
+}
+
+// elevation should use theme-surface as fill color so it can be used as surface
+.mdc-elevation--z1 {
+  @include elevation.mdc-elevation(1, $mdc-theme-on-surface);
+}
+
+.mdc-elevation--z2 {
+  @include elevation.mdc-elevation(2, $mdc-theme-on-surface);
+}
+
+.mdc-elevation--z3 {
+  @include elevation.mdc-elevation(3, $mdc-theme-on-surface);
+}
+
+.mdc-elevation--z1,
+.mdc-elevation--z2,
+.mdc-elevation--z3,
+.mdc-elevation--z4,
+.mdc-elevation--z5,
+.mdc-elevation--z6,
+.mdc-elevation--z7,
+.mdc-elevation--z8,
+.mdc-elevation--z9 {
+  background-color: $mdc-theme-surface;
+}
+
+// button styles
+.mdc-button {
+  @include button.mdc-button-shape-radius(2px);
+  .mdc-button__label {
+    display: flex;
+    align-items: center;
+  }
+}
+
+// set icon colors
+.mdc-icon,
+.mdc-icon-button {
+  @include iconButton.mdc-icon-button-ink-color($mdc-theme-text-secondary-on-background);
+}
+
+// drawer
+.mcd-drawer {
+  @include drawer.mdc-drawer-title-ink-color($mdc-theme-text-primary-on-background);
+  @include drawer.mdc-drawer-subtitle-ink-color($mdc-theme-text-primary-on-background);
+  @include drawer.mdc-drawer-item-icon-ink-color($mdc-theme-text-primary-on-background);
+  @include drawer.mdc-drawer-item-text-ink-color($mdc-theme-text-primary-on-background);
+  @include drawer.mdc-drawer-surface-fill-color($mdc-theme-surface);
+  @include drawer.mdc-drawer-item-shape-radius(0);
+}
+
+// fix for drawer positioning
+.mdc-drawer {
+  background-color: $mdc-theme-surface;
+  &.mdc-drawer--modal.mdc-drawer--open {
+    top: 0;
+    background-color: $mdc-theme-surface;
+  }
+}
+
+// fix drawer display so we can have a nice drawer footer
+.mdc-drawer--modal.mdc-drawer--open {
+  display: flex;
+}
+
+// tabs
+.mdc-tab-bar {
+  @include tabBar.mdc-tab-bar-width("100%");
+
+  .mdc-tab {
+    @include tab.mdc-tab-fixed-width("100px");
+    @include tab.mdc-tab-text-label-color($mdc-theme-text-primary-on-background);
+    @include tab.mdc-tab-icon-color($mdc-theme-text-primary-on-background);
+
+    // fixes tab width
+    flex: 1 0;
+  }
+
+  .mdc-tab-indicator {
+    @include tabIndicator.mdc-tab-indicator-underline-color($mdc-theme-primary);
+  }
+}
+
+// list
+.mdc-list {
+  @include list.mdc-list-item-primary-text-ink-color($mdc-theme-text-primary-on-background);
+  @include list.mdc-list-item-secondary-text-ink-color($mdc-theme-text-secondary-on-background);
+  @include list.mdc-list-item-graphic-ink-color($mdc-theme-text-secondary-on-background);
+  @include list.mdc-list-item-meta-ink-color($mdc-theme-text-secondary-on-background);
+  @include list.mdc-list-divider-color($mdc-theme-on-background);
+  @include list.mdc-list-group-subheader-ink-color($mdc-theme-text-primary-on-background);
+  @include list.mdc-list-item-shape-radius(0);
+
+  .mdc-list-item {
+    color: $mdc-theme-text-primary-on-background;
+  }
+
+  .mdc-list-item:hover,
+  .mdc-list-item::after,
+  .mdc-list-item::before {
+    background-color: transparent;
+  }
+  &:not(.mdc-list--non-interactive) {
+    .mdc-list-item:hover {
+      background-color: $mdc-theme-text-hint-on-dark;
+      cursor: pointer;
+    }
+    .mdc-list-item::after,
+    .mdc-list-item::before {
+      background-color: $mdc-theme-text-primary-on-background;
+    }
+  }
+}
+
+// switch
+.mdc-switch {
+  @include switch.mdc-switch-toggled-off-track-color($mdc-theme-on-surface);
+  margin-left: 5px;
+  margin-right: 10px;
+}
+
+// menu
+.mdc-menu {
+  background-color: $mdc-theme-surface;
+}
+
+/*
+Fix the width of input components when inside grids
+ */
+.mdc-text-field {
+  width: 100%;
+  @include textfield.mdc-text-field-shape-radius(0);
+  @include textfield.mdc-text-field-textarea-shape-radius(0);
+  @include textfield.mdc-text-field-fill-color($mdc-theme-on-background);
+  @include textfield.mdc-text-field-label-color($mdc-theme-text-primary-on-background);
+  @include textfield.mdc-text-field-ink-color($mdc-theme-on-surface);
+  &.mdc-text-field--textarea {
+    textarea {
+      padding-top: 25px;
+    }
+    .mdc-floating-label.mdc-floating-label {
+      margin-left: 11px;
+      top: 35px;
+    }
+    &.--focused {
+      .mdc-floating-label.mdc-floating-label {
+        top: 0px;
+      }
+    }
+  }
+  &.mdc-text-field--disabled {
+    background-color: $mdc-theme-background;
+    opacity: 0.55;
+    .mdc-text-field__input {
+      color: $mdc-theme-text-primary-on-background;
+      &::placeholder {
+        color: $mdc-theme-text-primary-on-background;
+      }
+    }
+  }
+  .mdc-text-field__input {
+    width: 100%;
+    resize: none;
+    //border: 1px solid $mdc-theme-on-background;
+  }
+}
+
+// textfield helper - color fix
+.mdc-text-field-helper-text {
+  margin-left: 2px !important;
+  color: $mdc-theme-text-secondary-on-background;
+  &--error {
+    color: $webiny-theme-dark-primary !important;
+  }
+}
+
+// dialog
+.mdc-dialog {
+  z-index: 20;
+  .mdc-dialog__container {
+    width: 100%;
+  }
+  .mdc-dialog__surface {
+    border-radius: 0px;
+    max-width: 875px;
+    position: relative;
+    .mdc-dialog__title {
+      background-color: $mdc-theme-secondary;
+      padding-bottom: 20px;
+      font-size: 1.4rem;
+      font-weight: 600;
+      color: $mdc-theme-on-secondary;
+    }
+    .mdc-dialog__content {
+      color: $mdc-theme-text-primary-on-background;
+      max-height: 70vh;
+      overflow: auto;
+      margin-top: 0;
+      padding-top: 24px;
+      background-color: $mdc-theme-surface;
+
+      // add options for when tabs are inside the body
+      > .webiny-ui-tabs {
+        margin: -24px;
+        > .mdc-tab-bar {
+          position: absolute;
+          z-index: 10;
+          @include tabBar.mdc-tab-bar-width(100%);
+          background-color: $mdc-theme-secondary;
+          .mdc-tab {
+            @include tab.mdc-tab-text-label-color($mdc-theme-on-secondary);
+            @include tab.mdc-tab-icon-color($mdc-theme-on-secondary);
+            @include tab.mdc-tab-fixed-width(100px);
+            justify-content: flex-start;
+            font-weight: 600;
+          }
+          .mdc-tab-indicator {
+            padding-bottom: 5px;
+            margin-top: -1px;
+            @include tabIndicator.mdc-tab-indicator-underline-color($mdc-theme-on-secondary);
+            background-color: $mdc-theme-secondary;
+          }
+        }
+        > .webiny-ui-tabs__content {
+          padding-top: 50px;
+          padding-bottom: 25px;
+        }
+      }
+    }
+    .mdc-dialog__actions {
+      border-top: 1px solid $mdc-theme-on-background;
+      background-color: $mdc-theme-surface;
+      padding: 24px;
+    }
+  }
+  &.mdc-dialog--open .mdc-dialog__scrim {
+    opacity: 0.7;
+    background-color: var(--mdc-theme-on-surface);
+  }
+}
+
+// select
+.mdc-select {
+  width: 100%;
+  @include select.mdc-select-ink-color($mdc-theme-text-primary-on-background);
+  @include select.mdc-select-label-color($mdc-theme-text-secondary-on-background);
+  @include select.mdc-select-bottom-line-color($mdc-theme-text-secondary-on-background);
+  @include select.mdc-select-hover-bottom-line-color($mdc-theme-text-primary-on-background);
+  @include select.mdc-select-container-fill-color($mdc-theme-on-background);
+  @include select.mdc-select-shape-radius(0);
+  @include select.mdc-select-outline-shape-radius(2);
+
+  /*
+  Fix for select box appearance. For some reason browser prefix css attributes are striped away.
+   */
+  .mdc-select__native-control {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border-radius: 2px;
+  }
+
+  &.mdc-select--box {
+    border-radius: 2px;
+    .mdc-select__native-control {
+      padding-top: 10px;
+    }
+  }
+
+  .mdc-select__dropdown-icon {
+    bottom: 50%;
+    transform: translateY(50%);
+  }
+}
+
+// checkbox
+.mdc-checkbox {
+  @include checkbox.mdc-checkbox-container-colors("text-secondary-on-background");
+}
+
+// radio button
+.mdc-radio {
+  @include radio.mdc-radio-unchecked-stroke-color("text-secondary-on-background");
+}
+
+// snackbar
+.mdc-snackbar {
+  @include snackbar.mdc-snackbar-shape-radius(2px);
+  @include snackbar.mdc-snackbar-z-index(1000);
+}
+.mdc-snackbar__action:not(:disabled) {
+  color: var(--mdc-theme-primary);
+  &::before {
+    background-color: var(--mdc-theme-primary);
+  }
+  &::after {
+    background-color: var(--mdc-theme-primary);
+  }
+}
+
+// when grid is inside another grid cell, child grid should not have any padding
+.mdc-layout-grid {
+  > .mdc-layout-grid__inner {
+    > .mdc-layout-grid__cell {
+      > .mdc-layout-grid {
+        padding: 0;
+      }
+    }
+  }
+}

package/styles/material.scss

@@ -0,0 +1,74 @@
+@use "~@material/theme/mixins" as themeMixins;
+
+// material variables
+$mdc-theme-primary: $webiny-theme-light-primary;
+$mdc-theme-on-primary: $webiny-theme-light-on-primary;
+$mdc-theme-secondary: $webiny-theme-light-secondary;
+$mdc-theme-on-secondary: $webiny-theme-light-on-secondary;
+$mdc-theme-surface: $webiny-theme-light-surface;
+$mdc-theme-on-surface: $webiny-theme-light-on-surface;
+$mdc-theme-background: $webiny-theme-light-background;
+$mdc-theme-on-background: $webiny-theme-light-on-background;
+$mdc-theme-text-primary-on-background: $webiny-theme-light-text-primary-on-background !global;
+$mdc-theme-text-secondary-on-background: $webiny-theme-light-text-secondary-on-background;
+$mdc-theme-text-hint-on-dark: $webiny-theme-light-text-hint-on-dark;
+$mdc-typography-font-family: $webiny-theme-typography-font-family;
+
+@import "~material-components-web/material-components-web.scss";
+@import "material-theme-assignments.scss";
+
+body {
+  background-color: $mdc-theme-background;
+  min-height: 100vh;
+
+  // assign all the sass variables in css variables
+  --mdc-theme-primary: #{$mdc-theme-primary};
+  --mdc-theme-secondary: #{$mdc-theme-secondary};
+  --mdc-theme-background: #{$mdc-theme-background};
+  --mdc-theme-surface: #{$mdc-theme-surface};
+  --mdc-theme-on-primary: #{$mdc-theme-on-primary};
+  --mdc-theme-on-secondary: #{$mdc-theme-on-secondary};
+  --mdc-theme-on-surface: #{$mdc-theme-on-surface};
+  --mdc-theme-on-background: #{$mdc-theme-on-background};
+  --mdc-theme-text-primary-on-background: #{$mdc-theme-text-primary-on-background};
+  --mdc-theme-text-secondary-on-background: #{$mdc-theme-text-secondary-on-background};
+  --mdc-theme-text-hint-on-dark: #{$mdc-theme-text-hint-on-dark};
+  --mdc-theme-caret-down: #{$webiny-theme-light-caret-down};
+
+  font-family: "Source Sans Pro";
+}
+
+body.dark-theme {
+  $mdc-theme-primary: $webiny-theme-dark-primary;
+  $mdc-theme-on-primary: $webiny-theme-dark-on-primary;
+  $mdc-theme-secondary: $webiny-theme-dark-secondary;
+  $mdc-theme-on-secondary: $webiny-theme-dark-on-secondary;
+  $mdc-theme-surface: $webiny-theme-dark-surface;
+  $mdc-theme-on-surface: $webiny-theme-dark-on-surface;
+  $mdc-theme-background: $webiny-theme-dark-background;
+  $mdc-theme-on-background: $webiny-theme-dark-on-background;
+  $mdc-theme-text-secondary-on-background: $webiny-theme-dark-text-secondary-on-background;
+  $mdc-theme-text-primary-on-background: $webiny-theme-dark-text-primary-on-background;
+  $mdc-theme-text-hint-on-dark: $webiny-theme-dark-text-hint-on-dark;
+
+  @include themeMixins.mdc-theme-prop("on-primary", $webiny-theme-dark-text-primary-on-background);
+
+  background-color: $mdc-theme-background;
+
+  // assign all the sass variables in css variables
+  --mdc-theme-primary: #{$mdc-theme-primary};
+  --mdc-theme-secondary: #{$mdc-theme-secondary};
+  --mdc-theme-background: #{$mdc-theme-background};
+  --mdc-theme-surface: #{$mdc-theme-surface};
+  --mdc-theme-on-primary: #{$mdc-theme-on-primary};
+  --mdc-theme-on-secondary: #{$mdc-theme-on-secondary};
+  --mdc-theme-on-surface: #{$mdc-theme-on-surface};
+  --mdc-theme-on-background: #{$mdc-theme-on-background};
+  --mdc-theme-text-primary-on-background: #{$mdc-theme-text-primary-on-background};
+  --mdc-theme-text-secondary-on-background: #{$mdc-theme-text-secondary-on-background};
+  --mdc-theme-text-hint-on-dark: #{$mdc-theme-text-hint-on-dark};
+  --mdc-theme-caret-down: #{$webiny-theme-dark-caret-down};
+
+  @import "~@material/textfield/mdc-text-field";
+  @import "material-theme-assignments.scss";
+}

package/styles/theme.scss

@@ -0,0 +1,43 @@
+// webiny light theme
+$webiny-theme-light-primary: #fa5723 !default;
+$webiny-theme-light-secondary: #00ccb0 !default;
+$webiny-theme-light-background: #f2f2f2 !default;
+$webiny-theme-light-surface: #fff !default;
+$webiny-theme-light-on-primary: #ffffff !default;
+$webiny-theme-light-on-secondary: #ffffff !default;
+$webiny-theme-light-on-surface: #000000 !default;
+$webiny-theme-light-on-background: rgba(212, 212, 212, 0.5) !default;
+$webiny-theme-light-text-primary-on-background: rgba(0, 0, 0, 0.87);
+$webiny-theme-light-text-secondary-on-background: rgba(0, 0, 0, 0.54);
+$webiny-theme-light-text-hint-on-dark: rgba(255, 255, 255, 0.5);
+$webiny-theme-light-caret-down: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
+
+// webiny dark theme
+$webiny-theme-dark-primary: #fa5723 !default;
+$webiny-theme-dark-secondary: #00ccb0 !default;
+$webiny-theme-dark-background: #121212 !default;
+$webiny-theme-dark-surface: #242424 !default;
+$webiny-theme-dark-on-primary: #ffffff !default;
+$webiny-theme-dark-on-secondary: #ffffff !default;
+$webiny-theme-dark-on-surface: #ffffff !default;
+$webiny-theme-dark-on-background: rgba(255, 255, 255, 0.15) !default;
+$webiny-theme-dark-text-primary-on-background: rgba(255, 255, 255, 0.87);
+$webiny-theme-dark-text-secondary-on-background: rgba(255, 255, 255, 0.54);
+$webiny-theme-dark-text-hint-on-dark: rgba(255, 255, 255, 0.15);
+$webiny-theme-dark-caret-down: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
+
+// webiny typography
+$webiny-theme-typography-font-family: "Source Sans Pro" !default;
+
+// import required fonts
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Open+Sans:300,400,600,700|Source+Code+Pro:400,700");
+//@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Open+Sans:300,400,600,700|Source+Code+Pro:400,700");
+
+body {
+  font-size: 16px;
+}
+
+a {
+  color: var(--webiny-theme-color-primary, #ee896b);
+  text-decoration: none;
+}

package/styles.scss

@@ -0,0 +1,2 @@
+@import "./styles/theme";
+@import "./styles/material";

package/types.d.ts

@@ -0,0 +1,100 @@
+import React, { ReactElement } from "react";
+import { Plugin } from "@webiny/plugins/types";
+import { ApolloClient } from "apollo-client";
+import { ItemProps, MenuProps, SectionProps } from "./ui/views/NavigationView/legacyMenu";
+declare type RenderParams = {
+    content: React.ReactNode;
+};
+export declare type AdminGlobalSearchPlugin = Plugin & {
+    type: "admin-global-search";
+    label: string;
+    route: string;
+    search?: {
+        operator?: "and" | "or";
+        fields?: Array<string>;
+    };
+};
+export declare type AdminGlobalSearchPreventHotkeyPlugin = Plugin & {
+    type: "admin-global-search-prevent-hotkey";
+    preventOpen(e: React.KeyboardEvent): boolean | void;
+};
+export declare type AdminDrawerFooterMenuPlugin = Plugin & {
+    type: "admin-drawer-footer-menu";
+    render(params: any): React.ReactElement;
+};
+/**
+ * LEGACY TYPE. Only for backwards compatibility.
+ */
+export declare type AdminMenuLogoPlugin = Plugin & {
+    name: "admin-menu-logo";
+    type: "admin-menu-logo";
+    render(): React.ReactElement;
+};
+export declare type AdminHeaderUserMenuPlugin = Plugin & {
+    type: "admin-header-user-menu";
+    render(): React.ReactElement;
+};
+export declare type AdminHeaderUserMenuHandlePlugin = Plugin & {
+    name: "admin-header-user-menu-handle";
+    type: "admin-header-user-menu-handle";
+    render(): React.ReactElement;
+};
+export declare type AdminHeaderUserMenuUserInfoPlugin = Plugin & {
+    type: "admin-header-user-menu-user-info";
+    render(): React.ReactElement;
+};
+/**
+ * Enables adding custom menu sections and items in the main menu, located on the left side of the screen.
+ * @see https://docs.webiny.com/docs/webiny-apps/admin/development/plugins-reference/app#admin-menu
+ */
+export declare type AdminMenuPlugin = Plugin & {
+    type: "admin-menu";
+    render(props: {
+        Menu: React.ComponentType<MenuProps>;
+        Section: React.ComponentType<SectionProps>;
+        Item: React.ComponentType<ItemProps>;
+    }): React.ReactNode;
+    order?: number;
+};
+/**
+ * Enables adding custom header elements to the right side of the top bar.
+ * @see https://docs.webiny.com/docs/webiny-apps/admin/development/plugins-reference/app#admin-header-right
+ */
+export declare type AdminHeaderRightPlugin = Plugin & {
+    type: "admin-header-right";
+    render(params: RenderParams): React.ReactNode;
+};
+export declare type AdminFileManagerFileTypePlugin = Plugin & {
+    type: "admin-file-manager-file-type";
+    types?: string[];
+    render({ file }: {
+        file: any;
+    }): React.ReactNode;
+    fileDetails?: {
+        actions: Array<React.FunctionComponent | React.Component>;
+    };
+};
+export declare type AdminInstallationPlugin = Plugin & {
+    type: "admin-installation";
+    getInstalledVersion(params: {
+        client: ApolloClient<object>;
+    }): Promise<string>;
+    title: string;
+    dependencies?: string[];
+    secure: boolean;
+    render({ onInstalled }: {
+        onInstalled: any;
+    }): React.ReactNode;
+    upgrades?: {
+        version: string;
+        getComponent(): React.ComponentType<{
+            onInstalled: () => void;
+        }>;
+    }[];
+};
+export declare type AdminAppPermissionRendererPlugin = Plugin & {
+    type: "admin-app-permissions-renderer";
+    system?: boolean;
+    render(params: any): ReactElement;
+};
+export {};

package/types.js

@@ -0,0 +1 @@
+export {};

package/ui/UIElement.d.ts

@@ -0,0 +1,2 @@
+export type { UIElementConfig, ApplyFunction, ShouldRender } from "@webiny/ui-composer/UIElement";
+export { UIElement, UIElementPlugin } from "@webiny/ui-composer/UIElement";

package/ui/UIElement.js

@@ -0,0 +1 @@
+export { UIElement, UIElementPlugin } from "@webiny/ui-composer/UIElement";

package/ui/UILayout.d.ts

@@ -0,0 +1 @@
+export { UILayout, UILayoutPlugin } from "@webiny/ui-composer/UILayout";

package/ui/UILayout.js

@@ -0,0 +1 @@
+export { UILayout, UILayoutPlugin } from "@webiny/ui-composer/UILayout";

package/ui/UIRenderer.d.ts

@@ -0,0 +1,2 @@
+export { UIRenderer } from "@webiny/ui-composer/UIRenderer";
+export type { UIRenderParams, RenderNext } from "@webiny/ui-composer/UIRenderer";

package/ui/UIRenderer.js

@@ -0,0 +1 @@
+export { UIRenderer } from "@webiny/ui-composer/UIRenderer";

package/ui/UIView.d.ts

@@ -0,0 +1,2 @@
+export type { ApplyFunction, UIElementWrapperProps, UIElementWrapper } from "@webiny/ui-composer/UIView";
+export { UIView, UIViewComponent, UIViewPlugin } from "@webiny/ui-composer/UIView";

package/ui/UIView.js

@@ -0,0 +1 @@
+export { UIView, UIViewComponent, UIViewPlugin } from "@webiny/ui-composer/UIView";

package/ui/elements/AccordionElement.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import { UIElement, UIElementConfig } from "../UIElement";
+interface GetterWithProps<TProps, T> {
+    (props: TProps): T;
+}
+interface Item<TProps = any> extends UIElementConfig {
+    id: string;
+    title: string;
+    description: string;
+    icon: React.ReactElement;
+    open?: boolean | GetterWithProps<TProps, boolean>;
+}
+export declare class AccordionItemElement extends UIElement<Item> {
+    constructor(id: any, config: Item);
+    setTitle(title: string): void;
+    setDescription(description: string): void;
+    render(props: any): JSX.Element;
+}
+interface Config extends UIElementConfig {
+    items: Item[];
+}
+export declare class AccordionElement extends UIElement<Config> {
+    constructor(id: any, config: Config);
+    getAccordionItemElement(id: string): AccordionItemElement;
+    render(props: any): JSX.Element;
+}
+export {};