Added initial package

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+*~

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "volto-tabsblock",
+  "version": "1.0.0",
+  "description": "A Volto block that provides tabs for regular composite pages",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

src/Tabs/TabsBlockEdit.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components'; // EditBlock
+import TabsBlockView from './TabsBlockView';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import schema from './schema';
+import { useFormStateContext } from '@plone/volto/components/manage/Form/FormContext';
+
+const EditTabsBlock = (props) => {
+  const [activeTab, setActiveTab] = React.useState(0);
+  console.log('activeTab', activeTab);
+  const { contextData, setContextData } = useFormStateContext();
+  const currentContextData = React.useRef(null);
+
+  React.useEffect(() => {
+    if (!currentContextData.current) {
+      currentContextData.current = contextData;
+      console.log('current', currentContextData.current);
+    }
+  });
+
+  return (
+    <div className="block selected">
+      <div className="block-inner-wrapper">
+        <TabsBlockView
+          data={props.data}
+          onTabChange={(index) => {
+            setActiveTab(index);
+          }}
+          activeIndex={activeTab}
+        />
+      </div>
+
+      <SidebarPortal selected={props.selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          formData={props.data}
+          block={props.block}
+        />
+      </SidebarPortal>
+    </div>
+  );
+};
+
+export default EditTabsBlock;

src/Tabs/TabsBlockView.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Tab } from 'semantic-ui-react';
+import './public.less';
+
+const TabsBlockView = ({ onTabChange, data, activeIndex, ...rest }) => {
+  const { tabs = [{ title: 'Default' }] } = data;
+  console.log('activeTab', activeIndex);
+  return (
+    <div className="children-tabs-view">
+      <div id="page-document" className="ui container">
+        <Tab
+          menu={{ attached: false, tabular: false }}
+          panes={tabs.map((child) => ({
+            menuItem: child.title,
+            render: () => '',
+          }))}
+          onTabChange={(event, { activeIndex }) => {
+            onTabChange && onTabChange(activeIndex);
+          }}
+          activeIndex={activeIndex}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TabsBlockView;

src/Tabs/index.js

@@ -0,0 +1,2 @@
+export TabsBlockEdit from './TabsBlockEdit';
+export TabsBlockView from './TabsBlockView';

src/Tabs/public.less

@@ -0,0 +1,6 @@
+@import "~volto-tabsblock/less/globals.less";
+
+.ui.menu .active.item {
+  background-color: @highlightBackground !important;
+  color: @highlightColor !important;
+}

src/Tabs/schema.jsx

@@ -0,0 +1,44 @@
+export const Tab = {
+  title: 'Tab',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title'],
+    },
+  ],
+
+  properties: {
+    title: {
+      type: 'string',
+      title: 'Title',
+    },
+  },
+
+  required: ['title'],
+};
+
+export const Tabs = {
+  title: 'Tabs',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['tabs'],
+    },
+  ],
+
+  properties: {
+    tabs: {
+      widget: 'object_list',
+      title: 'Tabs',
+      // this is an invention, should confront with dexterity serializer
+      schema: Tab,
+    },
+  },
+
+  required: ['display', 'cards'],
+};
+
+export default Tabs;

src/index.js

@@ -0,0 +1,21 @@
+import codeSVG from '@plone/volto/icons/code.svg';
+import { TabsBlockEdit, TabsBlockView } from './Tabs';
+
+export default (config) => {
+  config.blocks.blocksConfig.tabs = {
+    id: 'tabs',
+    title: 'Tabs',
+    icon: codeSVG,
+    group: 'text',
+    view: TabsBlockView,
+    edit: TabsBlockEdit,
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+  return config;
+};

src/less/globals.less

@@ -0,0 +1,15 @@
+@type: 'extra';
+@element: 'custom';
+
+@import (multiple, reference, optional) '~@package/../theme/theme.config';
+
+/* Enables customization of addons */
+.loadAddonOverrides() {
+  @import (optional) "@{siteFolder}/../addons/@{addon}/@{addontype}s/@{addonelement}.overrides";
+}
+
+/* Helper to load variables */
+.loadAddonVariables() {
+  @import (optional) "@{addonelement}.variables";
+  @import (optional) "@{siteFolder}/../addons/@{addon}/@{addontype}s/@{addonelement}.variables";
+}