Entity specialization

[c-falardeau]

Hello :), I don't know if there is a way currently, but it would be nice to be able to extend the Entity type to add custom props that are not modifiable like attributes and not intended to be editable by user. These props would help me generalize some behaviours without apply condition on specific report types

[sandulat]

Hey @c-falardeau,

Why not simply hide the editor component for any attribute that shouldn't be modifiable by the user?

function TextFieldAttributes() {
  return (
    <div>
      <LabelAttribute />
      <PlaceholderAttribute />
      {/* <WhateverAttribute /> Just omit it from the UI. */}
    </div>
  );
}

Then you can manually populate the attribute value when instantiating an entity:

builderStore.addEntity({
  type: "textField",
  attributes: { whatever: someValue },
});

Or am I misunderstanding your question? Could you share more about your use case?

[c-falardeau]

yes thought about it, but I would need to provide the values each time I create instance of the entity,
I wanted something attach to the entity type not the instance
but thanks for the suggestion

[sandulat]

@c-falardeau If you just want to pass some custom props to your entity component, you can create the component inside a hook like this:

function useTextField(customProps: { someProp: string }) {
  return useMemo(
    () =>
      createEntityComponent(textFieldEntity, (props) => {
        return <div>{customProps.someProp}</div>;
      }),
    [customProps.someProp]
  );
}

Then use the hook like this:

function MyApp() {
  const TextField = useTextField({ someProp: "someValue" });

  return (
    <BuilderEntities
      builderStore={builderStore}
      components={{ textField: TextField }}
    />
  );
}

But I'm still not sure I fully understand your question. Could you elaborate in case I'm missing the point?

[sandulat]

@c-falardeau If you want to make some custom data/configuration available to multiple components across different entity types, you can simply wrap them in a custom React context:

const SomeContext = createContext({
  someProp: "someDefaultValue",
});

const TextFieldEntity = createEntityComponent(
  textFieldEntity,
  (props) => {
    const { someProp } = useContext(SomeContext);

    return <div>{/* ... */}</div>;
  }
);

function MyApp() {
  return (
    <SomeContext.Provider value={{ someProp: "someCustomValue" }}>
      <BuilderEntities
        builderStore={builderStore}
        components={{ textField: TextField }}
      />
    </SomeContext.Provider>
  );
}

[c-falardeau]

I was able to do it but inelegantly (since the current work I had to do is a POC).

import { createEntity as createEntityCore, Attribute, Entity, SchemaEntityWithId, BuilderStore } from '@coltorapps/builder';

// Sorry I had to duplicate this because it is not exported from the lib
type OptionalEntityArgs =
  | 'attributes'
  | 'validate'
  | 'defaultValue'
  | 'shouldBeProcessed'
  | 'childrenAllowed'
  | 'attributesExtensions'
  | 'parentRequired';

export type EntityExtension = {
  metaData: {
    [key: string]: unknown;
  };
};

export const createEntity = <
  const TName extends string,
  const TAttributes extends ReadonlyArray<Attribute>,
  TValue,
  const TChildrenAllowed extends boolean = false,
  const TParentRequired extends boolean = false,
>(
  options: Omit<Entity<TName, TAttributes, TValue, TParentRequired, TChildrenAllowed>, OptionalEntityArgs | 'valueAllowed'> &
    Partial<Pick<Entity<TName, TAttributes, TValue, TParentRequired, TChildrenAllowed>, OptionalEntityArgs>>,
  metaData?: EntityExtension['metaData'],
): Entity<TName, TAttributes, TValue, TParentRequired, TChildrenAllowed> => {
  const entity = createEntityCore(options);
  const entityWithMetaData = entity as unknown as EntityExtension;

  entityWithMetaData.metaData = metaData || {};

  return entity;
};

export type FormBuilderType = typeof formBuilder; // formBuilder is the return value from createBuilder

export const getEntityMetaData = (builderStore: BuilderStore<FormBuilderType>, entity: SchemaEntityWithId): EntityExtension['metaData'] => {
  const entityWithMetaData = builderStore.builder.entities.find(current => current.name === entity.type) as unknown as EntityExtension;

  return entityWithMetaData.metaData;
};

export const horizontalReportSectionEntity = createEntity(
  {
    attributes: [...commonAttributes],
    childrenAllowed: true,
    name: 'horizontalReportSection',
  },
  { flexDirection: 'row' }, // <---- this is the medata I've aggregating to the entity type
);


export const verticalReportSectionEntity = createEntity(
  {
    attributes: [...commonAttributes],
    childrenAllowed: true,
    name: 'verticalReportSection',
  },
  { flexDirection: 'column' }, // <---- this is the medata I've aggregating to the entity type
);

export const otherKindOfSectionEntity = createEntity(
  {
    attributes: [...commonAttributes],
    childrenAllowed: true,
    name: 'otherKindOfSection',
  },
  { flexDirection: 'column' }, // <---- this is the medata I've aggregating to the entity type
);

So I can do this

const { flexDirection } = getEntityMetaData(builderStore, entityInstance);

if (flexDirection === 'row') {
  return { } 
} else if (flexDirection === 'column') {
  return { } 
}

instance of this

const { flexDirection } = getEntityMetaData(builderStore, entityInstance);

if (entity.type === 'horizontalReportSection') {
  return {};
} else if (entity.type === 'otherKindOfSection' ||  entity.type === 'verticalReportSection') {
  return {};
}

So each time we add a new entity type, we do not have to update the condition, just make to attach the correct flowDirection value when creating the entity type (definition)

I need this information out of context of the entity component, like in the component that calls BuilderEntities, so I cannot get the custom props passed to the children.

[c-falardeau]

It was just a suggestion and thanks by the way for the solution you provided, greatly appreciated :)

[sandulat]

@c-falardeau This is actually a valid use case and perhaps I'll add official support for it in the v1 release candidate. 👍🏻

[c-falardeau]

Thanks :)