@kitconcept/core 1.0.0-alpha.29 → 1.0.0-alpha.30

package/.changelog.draft

@@ -1,3 +1,11 @@
-## 1.0.0-alpha.29 (2025-09-17)
+## 1.0.0-alpha.30 (2025-09-18)
+
+### Feature
+
+- Transfer core features from intranet distribution to here: TTWCustomCSS and TTWBlocksConfig. @sneridagh [#53](https://github.com/kitconcept/kitconcept-core/issue/53)
+
+### Bugfix
+
+- Better buttons in slider add item. Refresh content button in slider. @sneridagh 
 
 

package/CHANGELOG.md

@@ -8,6 +8,16 @@
 
 <!-- towncrier release notes start -->
 
+## 1.0.0-alpha.30 (2025-09-18)
+
+### Feature
+
+- Transfer core features from intranet distribution to here: TTWCustomCSS and TTWBlocksConfig. @sneridagh [#53](https://github.com/kitconcept/kitconcept-core/issue/53)
+
+### Bugfix
+
+- Better buttons in slider add item. Refresh content button in slider. @sneridagh 
+
 ## 1.0.0-alpha.29 (2025-09-17)
 
 ## 1.0.0-alpha.28 (2025-09-16)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/core",
-  "version": "1.0.0-alpha.29",
+  "version": "1.0.0-alpha.30",
   "description": "Core setup for kitconcept GmbH distributions built on top of Plone",
   "main": "src/index.ts",
   "license": "MIT",
@@ -37,20 +37,26 @@
   ],
   "dependencies": {
     "@plone-collective/volto-authomatic": "3.0.0-alpha.4",
-    "@kitconcept/volto-light-theme": "7.0.0-beta.4",
+    "@kitconcept/volto-light-theme": "7.0.0-beta.5",
     "@mbarde/volto-image-crop-widget": "^0.5.1",
     "@plone/components": "3.0.2"
   },
   "peerDependencies": {
+    "@plonegovbr/volto-social-media": "^2.0.0-alpha.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "@plonegovbr/volto-social-media": "^2.0.0-alpha.8"
+    "react-intl": "^3.12.1",
+    "react-redux": "^8.1.2"
   },
   "devDependencies": {
     "@plone/scripts": "^3.6.1",
+    "@types/lodash": "^4.14.201",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "lodash": "4.17.21",
     "release-it": "^19.0.4",
+    "typescript": "^5.7.3",
+    "vitest": "^3.1.2",
     "@plone/types": "1.4.5"
   },
   "scripts": {

package/src/config/slots.ts

@@ -0,0 +1,19 @@
+import type { ConfigType } from '@plone/registry';
+import TTWCustomCSS from '../slots/TTWCustomCSS/TTWCustomCSS';
+import ConfigInjector from '../slots/ConfigInjector/ConfigInjector';
+
+export default function install(config: ConfigType) {
+  config.registerSlotComponent({
+    slot: 'aboveHeader',
+    name: 'ConfigInjector',
+    component: ConfigInjector,
+  });
+
+  config.registerSlotComponent({
+    slot: 'aboveHeader',
+    name: 'TTWCustomCSS',
+    component: TTWCustomCSS,
+  });
+
+  return config;
+}

package/src/helpers/BlocksConfigMerger.test.ts

@@ -0,0 +1,98 @@
+import { BlocksConfigMerger } from './BlocksConfigMerger';
+import { describe, it, expect } from 'vitest';
+
+const baseBlocksConfig = {
+  teaser: {
+    restricted: false,
+    variations: [
+      { id: 'variation1', label: 'Variation 1' },
+      { id: 'variation2', label: 'Variation 2' },
+      { id: 'variation3', label: 'Variation 3' },
+    ],
+    themes: [],
+  },
+  gridBlock: {
+    restricted: false,
+    variations: [
+      { id: 'variationA', label: 'Variation A' },
+      { id: 'variationB', label: 'Variation B' },
+    ],
+    themes: [],
+  },
+};
+
+const mutator = {
+  teaser: {
+    disable: true,
+    variations: ['variation1', 'variation2'],
+    themes: [
+      {
+        style: {
+          '--theme-color': '#fff',
+          '--theme-high-contrast-color': '#ecebeb',
+          '--theme-foreground-color': '#000',
+          '--theme-low-contrast-foreground-color': '#555555',
+        },
+        name: 'default',
+        label: 'Default',
+      },
+    ],
+  },
+  gridBlock: {
+    variations: ['variationB'],
+  },
+  description: {
+    disable: true,
+  },
+};
+
+describe('BlocksConfigMerger', () => {
+  it('disables the block if disable is true', () => {
+    const result = BlocksConfigMerger(baseBlocksConfig, mutator);
+    expect(result.teaser.restricted).toBe(true);
+  });
+
+  it('filters variations according to mutator', () => {
+    const result = BlocksConfigMerger(baseBlocksConfig, mutator);
+    expect(result.teaser.variations.map((v) => v.id)).toEqual([
+      'variation1',
+      'variation2',
+    ]);
+    expect(result.gridBlock.variations.map((v) => v.id)).toEqual([
+      'variationB',
+    ]);
+  });
+
+  it('assigns themes from mutator', () => {
+    const result = BlocksConfigMerger(baseBlocksConfig, mutator);
+    expect(result.teaser.themes).toEqual([
+      {
+        style: {
+          '--theme-color': '#fff',
+          '--theme-high-contrast-color': '#ecebeb',
+          '--theme-foreground-color': '#000',
+          '--theme-low-contrast-foreground-color': '#555555',
+        },
+        name: 'default',
+        label: 'Default',
+      },
+    ]);
+  });
+
+  it('does not modify blocks not present in mutator', () => {
+    const result = BlocksConfigMerger(baseBlocksConfig, mutator);
+    expect(result.teaser.variations.length).toBe(2);
+    expect(result.gridBlock.restricted).toBe(false);
+  });
+
+  it('ignores blocks in mutator that do not exist in blocksConfig', () => {
+    const result = BlocksConfigMerger(baseBlocksConfig, mutator);
+    expect(result.description).toBeUndefined();
+  });
+
+  it('does not mutate the original blocksConfig', () => {
+    const original = JSON.parse(JSON.stringify(baseBlocksConfig));
+    BlocksConfigMerger(baseBlocksConfig, mutator);
+    expect(baseBlocksConfig).toEqual(original);
+  });
+});

package/src/helpers/BlocksConfigMerger.ts

@@ -0,0 +1,42 @@
+import type { BlocksConfig } from '@plone/types';
+import cloneDeep from 'lodash/cloneDeep';
+import type { MutatorDSL } from '../types';
+
+// Utility type for deep recursive Partial
+type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object
+    ? T[P] extends Array<infer U>
+      ? Array<DeepPartial<U>>
+      : DeepPartial<T[P]>
+    : T[P];
+};
+
+export function BlocksConfigMerger(
+  blocksConfig: DeepPartial<BlocksConfig['blocksConfig']>,
+  merger: MutatorDSL,
+): BlocksConfig['blocksConfig'] {
+  const mergedConfig = cloneDeep(blocksConfig);
+
+  Object.entries(merger).forEach(([blockId, dsl]) => {
+    if (!mergedConfig[blockId]) return;
+
+    // 1. Disable block
+    if (dsl.disable) {
+      mergedConfig[blockId]!.restricted = true;
+    }
+
+    // 2. Filter variations
+    if (Array.isArray(dsl.variations) && mergedConfig[blockId]!.variations) {
+      mergedConfig[blockId]!.variations = mergedConfig[
+        blockId
+      ]!.variations!.filter((v) => dsl.variations!.includes(v.id));
+    }
+
+    // 3. Assign themes
+    if (Array.isArray(dsl.themes)) {
+      mergedConfig[blockId]!.themes = dsl.themes;
+    }
+  });
+
+  return mergedConfig as BlocksConfig['blocksConfig'];
+}

package/src/index.ts

@@ -1,9 +1,23 @@
 import type { ConfigType } from '@plone/registry';
-
+import type { CustomInheritBehavior, BlocksConfigSettings } from './types';
 import installSettings from './config/settings';
+import installSlots from './config/slots';
+
+declare module '@plone/types' {
+  export interface GetSiteResponse {
+    'kitconcept.intranet.custom_css': string;
+  }
+
+  export interface Expanders {
+    inherit: {
+      'kitconcept.blocks.config': CustomInheritBehavior<BlocksConfigSettings>;
+    };
+  }
+}
 
 const applyConfig = (config: ConfigType) => {
   installSettings(config);
+  installSlots(config);
   return config;
 };
 

package/src/slots/ConfigInjector/ConfigInjector.tsx

@@ -0,0 +1,32 @@
+import config from '@plone/volto/registry';
+import { useSelector } from 'react-redux';
+import { BlocksConfigMerger } from '../../helpers/BlocksConfigMerger';
+import type { Content } from '@plone/types';
+import type { MutatorDSL } from '../../types';
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+};
+
+const ConfigInjector = () => {
+  const blockConfigData = useSelector<FormState, MutatorDSL>(
+    (state) =>
+      state.content.data?.['@components']?.inherit?.['kitconcept.blocks.config']
+        ?.data?.blocks_config_mutator,
+  );
+
+  if (blockConfigData) {
+    config.blocks.blocksConfig = BlocksConfigMerger(
+      config.blocks.blocksConfig,
+      blockConfigData,
+    );
+  }
+
+  // This component does not render anything, it just injects config from the Redux
+  // store in the global config
+  return null;
+};
+
+export default ConfigInjector;

package/src/slots/TTWCustomCSS/TTWCustomCSS.tsx

@@ -0,0 +1,28 @@
+import Helmet from '@plone/volto/helpers/Helmet/Helmet';
+import { useSelector } from 'react-redux';
+import type { GetSiteResponse } from '@plone/types';
+
+type FormState = {
+  site: { data: GetSiteResponse };
+};
+
+const TTWCustomCSS = () => {
+  const site = useSelector<FormState, GetSiteResponse>(
+    (state) => state.site.data,
+  );
+  const customCSS = site['kitconcept.custom_css'];
+
+  return (
+    <>
+      {customCSS ? (
+        <>
+          <Helmet>
+            <style>{customCSS}</style>
+          </Helmet>
+        </>
+      ) : null}
+    </>
+  );
+};
+
+export default TTWCustomCSS;

package/src/types.d.ts

@@ -0,0 +1,22 @@
+import type { StyleDefinition } from '@plone/types';
+
+export type MutatorDSL = Record<
+  string,
+  {
+    disable?: boolean;
+    variations?: string[];
+    themes?: StyleDefinition[];
+  }
+>;
+
+export type BlocksConfigSettings = {
+  blocks_config_mutator: MutatorDSL;
+};
+
+export type CustomInheritBehavior<T> = {
+  data: T;
+  from: {
+    '@id': string;
+    title: string;
+  };
+};