Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement actions for button in react export #298

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Implement actions for button in react export #298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
75cc6a2
implement actions for button in react export
ngalanmanlok Jan 15, 2024
eed55ba
remove console logs
ngalanmanlok Jan 15, 2024
4e203cc
fix compile errors
ngalanmanlok Jan 15, 2024
b200305
Merge branch 'main' into feature/react-export-action
Akshat55 May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions app/src/routes/edit/share-options/exports/frameworks/react/latest/fragment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
} from '@carbon/react/icons';
import { getAllFragmentStyleClasses } from '@carbon-builder/player-react';
import { hasFragmentStyleClasses } from '../../../../../../../utils/fragment-tools';
import { format } from '../../utils';
import { format, getReactActionsMap } from '../../utils';
import {
formatOptions,
formatOptionsCss,
getAdditionalCodeAsString,
jsonToCarbonImports,
jsonToTemplate,
otherImportsFromComponentObj
otherImportsFromComponentObj,

Check failure on line 17 in app/src/routes/edit/share-options/exports/frameworks/react/latest/fragment.ts

View workflow job for this annotation

GitHub Actions / lint 

Unexpected trailing comma
} from './utils';
import { classNameFromFragment, tagNameFromFragment } from '@carbon-builder/sdk-react';

Expand All @@ -23,10 +23,12 @@
const carbonImportsString = carbonImports.reduce((string: string, curr: string) => (
string += `${curr}, `
), '');
const actions = getReactActionsMap(json);

return {
imports: `import { ${carbonImportsString} } from '@carbon/react';
${otherImportsFromComponentObj(json, fragments)}`,
template: jsonToTemplate(json, fragments, customComponentsCollections),
template: jsonToTemplate(json, actions.signals, actions.slots, fragments, customComponentsCollections),
additionalCode: getAdditionalCodeAsString(json, fragments)
};
};
Expand Down
6 changes: 3 additions & 3 deletions app/src/routes/edit/share-options/exports/frameworks/react/latest/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,19 +66,19 @@
return imports;
};

export const jsonToTemplate = (json: any, fragments: any[], customComponentsCollections: any[]) => {
export const jsonToTemplate = (json: any, signals: any, slots: any, fragments: any[], customComponentsCollections: any[]) => {
if (typeof json === 'string' || !json) {
return json;
}

for (const component of Object.values(allComponents)) {
if (json.type === component.componentInfo.type && !component.componentInfo.codeExport.react.latest.isNotDirectExport) {
return component.componentInfo.codeExport.react.latest.code({ json, jsonToTemplate, fragments, customComponentsCollections });
return component.componentInfo.codeExport.react.latest.code({ json, signals, slots, jsonToTemplate, fragments, customComponentsCollections });

Check failure on line 76 in app/src/routes/edit/share-options/exports/frameworks/react/latest/utils.ts

View workflow job for this annotation

GitHub Actions / lint 

This line has a length of 154. Maximum allowed is 150
}
}

if (json.items) {
return json.items.map((item: any) => jsonToTemplate(item, fragments, customComponentsCollections)).join('\n');
return json.items.map((item: any) => jsonToTemplate(item, signals, slots, fragments, customComponentsCollections)).join('\n');
}
};

Expand Down
6 changes: 4 additions & 2 deletions app/src/routes/edit/share-options/exports/frameworks/react/v10/fragment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
} from '@carbon/react/icons';
import { getAllFragmentStyleClasses } from '@carbon-builder/player-react';
import { hasFragmentStyleClasses } from '../../../../../../../utils/fragment-tools';
import { format } from '../../utils';
import { format, getReactActionsMap } from '../../utils';
import {
formatOptions,
formatOptionsCss,
Expand All @@ -23,10 +23,12 @@ const generateTemplate = (json: any, fragments: any[], customComponentsCollectio
const carbonImportsString = carbonImports.reduce((string: string, curr: string) => (
string += `${curr}, `
), '');
const actions = getReactActionsMap(json);

return {
imports: `import { ${carbonImportsString} } from '@carbon/react';
${otherImportsFromComponentObj(json, fragments)}`,
template: jsonToTemplate(json, fragments, customComponentsCollections),
template: jsonToTemplate(json, actions.signals, actions.slots, fragments, customComponentsCollections),
additionalCode: getAdditionalCodeAsString(json, fragments)
};
};
Expand Down
6 changes: 3 additions & 3 deletions app/src/routes/edit/share-options/exports/frameworks/react/v10/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,19 +66,19 @@
return imports;
};

export const jsonToTemplate = (json: any, fragments: any[], customComponentsCollections: any[]) => {
export const jsonToTemplate = (json: any, signals: any, slots: any, fragments: any[], customComponentsCollections: any[]) => {
if (typeof json === 'string' || !json) {
return json;
}

for (const component of Object.values(allComponents)) {
if (json.type === component.componentInfo.type && !component.componentInfo.codeExport.react.v10.isNotDirectExport) {
return component.componentInfo.codeExport.react.v10.code({ json, jsonToTemplate, fragments, customComponentsCollections });
return component.componentInfo.codeExport.react.v10.code({ json, signals, slots, jsonToTemplate, fragments, customComponentsCollections });

Check failure on line 76 in app/src/routes/edit/share-options/exports/frameworks/react/v10/utils.ts

View workflow job for this annotation

GitHub Actions / lint 

This line has a length of 151. Maximum allowed is 150
}
}

if (json.items) {
return json.items.map((item: any) => jsonToTemplate(item, fragments, customComponentsCollections)).join('\n');
return json.items.map((item: any) => jsonToTemplate(item, signals, slots, fragments, customComponentsCollections)).join('\n');
}
};

Expand Down
55 changes: 55 additions & 0 deletions app/src/routes/edit/share-options/exports/frameworks/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Action } from 'player/react/src/lib/types';
import { format as formatPrettier, Options } from 'prettier';

export const format = (source: string, options?: Options | undefined) => {
Expand All @@ -8,3 +9,57 @@
return source;
}
};

export const getIdContextNameMap = (json: any, itemIds: Set<any>, map: any) => {
if (typeof json === 'string' || !json) {
return json;
}

if (json.items) {
json.items.forEach((item: any) => {
if (itemIds.has(item.id)) {
map[item.id] = item.codeContext?.name;
}
map = getIdContextNameMap(item, itemIds, map);
});
}

return map;
};

export const getReactActionsMap = (json: any) => {
const signalReactEvent: any = {
click: 'onClick',
change: 'onChange',

Check failure on line 33 in app/src/routes/edit/share-options/exports/frameworks/utils.ts

View workflow job for this annotation

GitHub Actions / lint 

Unexpected trailing comma
};

const signals: any = {};
const slots: any = {};
if (json.actions) {
json.actions.forEach((action: Action) => {
const itemIdsWithActions = new Set(json.actions.map((action: Action) => [action.source, action.destination]).flat());
const idContextNameMap = getIdContextNameMap(json, itemIdsWithActions, {});
const eventName = signalReactEvent[action.signal];
if (!signals[idContextNameMap[action.source]]) {
signals[idContextNameMap[action.source]] = {};
}
if (!signals[idContextNameMap[action.source]][eventName]) {
signals[idContextNameMap[action.source]][eventName] = {};
}
if (!signals[idContextNameMap[action.source]][eventName][idContextNameMap[action.destination]]) {
signals[idContextNameMap[action.source]][eventName][idContextNameMap[action.destination]] = [];
}
signals[idContextNameMap[action.source]][eventName][idContextNameMap[action.destination]].push(action.slot);

if (!slots[idContextNameMap[action.destination]]) {
slots[idContextNameMap[action.destination]] = new Set<string>();
}
slots[idContextNameMap[action.destination]].add(action.slot);
});
}

Check failure on line 60 in app/src/routes/edit/share-options/exports/frameworks/utils.ts

View workflow job for this annotation

GitHub Actions / lint 

Trailing spaces not allowed
return {

Check failure on line 61 in app/src/routes/edit/share-options/exports/frameworks/utils.ts

View workflow job for this annotation

GitHub Actions / lint 

Trailing spaces not allowed
signals: signals,
slots: slots

Check failure on line 63 in app/src/routes/edit/share-options/exports/frameworks/utils.ts

View workflow job for this annotation

GitHub Actions / lint 

Trailing spaces not allowed
};
}

Check failure on line 65 in app/src/routes/edit/share-options/exports/frameworks/utils.ts

View workflow job for this annotation

GitHub Actions / lint 

Newline required at end of file but not found

Check failure on line 65 in app/src/routes/edit/share-options/exports/frameworks/utils.ts

View workflow job for this annotation

GitHub Actions / lint 

Missing semicolon
11 changes: 7 additions & 4 deletions sdk/react/src/lib/fragment-components/a-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { AComponent, ComponentInfo } from './a-component';
import image from './../assets/component-icons/button.svg';
import {
angularClassNamesFromComponentObj,
getReactCodeForActions,
nameStringToVariableString,
reactClassNamesFromComponentObj
} from '../helpers/tools';
Expand Down Expand Up @@ -159,20 +160,22 @@ export const componentInfo: ComponentInfo = {
react: {
latest: {
imports: ['Button'],
code: ({ json }) => {
code: ({ json, signals, slots }) => {
return `<Button
${json.kind && `kind="${json.kind}"`}
${json.size && `size="${json.size}"`}
${reactClassNamesFromComponentObj(json)}>${json.text}</Button>`;
${reactClassNamesFromComponentObj(json)}
${getReactCodeForActions(signals, slots, json.codeContext?.name)}>${json.text}</Button>`;
}
},
v10: {
imports: ['Button'],
code: ({ json }) => {
code: ({ json, signals, slots }) => {
return `<Button
${json.kind && `kind="${json.kind}"`}
${json.size && `size="${json.size}"`}
${reactClassNamesFromComponentObj(json)}>${json.text}</Button>`;
${reactClassNamesFromComponentObj(json)}
${getReactCodeForActions(signals, slots, json.codeContext?.name)}>${json.text}</Button>`;
}
}
}
Expand Down
8 changes: 6 additions & 2 deletions sdk/react/src/lib/fragment-components/a-component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,9 @@ export interface ComponentInfo {
isNotDirectExport?: boolean;
code: (props: {
json: any;
jsonToTemplate: (json: any, fragments: any[], customComponentsCollections: any[]) => string;
signals: any;
slots: any;
jsonToTemplate: (json: any, signals: any, slots: any, fragments: any[], customComponentsCollections: any[]) => string;
fragments: any[];
customComponentsCollections: any[];
}) => string;
Expand All @@ -95,7 +97,9 @@ export interface ComponentInfo {
isNotDirectExport?: boolean;
code: (props: {
json: any;
jsonToTemplate: (json: any, fragments: any[], customComponentsCollections: any[]) => string;
signals: any;
slots: any;
jsonToTemplate: (json: any, signals: any, slots: any, fragments: any[], customComponentsCollections: any[]) => string;
fragments: any[];
customComponentsCollections: any[];
}) => string;
Expand Down
8 changes: 4 additions & 4 deletions sdk/react/src/lib/fragment-components/a-grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,23 +230,23 @@ export const componentInfo: ComponentInfo = {
react: {
latest: {
imports: ['FlexGrid', 'Column', 'Row'],
code: ({ json, fragments, jsonToTemplate, customComponentsCollections }) => {
code: ({ json, signals, slots, fragments, jsonToTemplate, customComponentsCollections }) => {
return `<FlexGrid ${reactClassNamesFromComponentObj(json)}>
${json.items.map((row: any) => `<Row ${reactClassNamesFromComponentObj(row)}>
${row.items.map((cell: any) => `<Column ${getCellParamsStringReact(cell)} ${reactClassNamesFromComponentObj(cell)}>
${jsonToTemplate(cell, fragments, customComponentsCollections)}
${jsonToTemplate(cell, signals, slots, fragments, customComponentsCollections)}
</Column>`).join('\n')}
</Row>`).join('\n')}
</FlexGrid>`;
}
},
v10: {
imports: ['Grid', 'Column', 'Row'],
code: ({ json, fragments, jsonToTemplate, customComponentsCollections }) => {
code: ({ json, signals, slots, fragments, jsonToTemplate, customComponentsCollections }) => {
return `<Grid ${reactClassNamesFromComponentObj(json)}>
${json.items.map((row: any) => `<Row ${reactClassNamesFromComponentObj(row)}>
${row.items.map((cell: any) => `<Column ${getCellParamsStringReact(cell)} ${reactClassNamesFromComponentObj(cell)}>
${jsonToTemplate(cell, fragments, customComponentsCollections)}
${jsonToTemplate(cell, signals, slots, fragments, customComponentsCollections)}
</Column>`).join('\n')}
</Row>`).join('\n')}
</Grid>`;
Expand Down
8 changes: 4 additions & 4 deletions sdk/react/src/lib/fragment-components/a-radio-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@
react: {
latest: {
imports: ['RadioButtonGroup'],
code: ({ json, fragments, jsonToTemplate, customComponentsCollections }) => {
code: ({ json, signals, slots, fragments, jsonToTemplate, customComponentsCollections }) => {
return `<RadioButtonGroup
name="${json.codeContext?.name}"
legendText="${json.legend}"
Expand All @@ -223,13 +223,13 @@
name: "${json.codeContext?.name}"
}
})}>
${json.items.map((element: any) => jsonToTemplate(element, fragments, customComponentsCollections)).join('\n')}
${json.items.map((element: any) => jsonToTemplate(element, signals, slots, fragments, customComponentsCollections)).join('\n')}

Check failure on line 226 in sdk/react/src/lib/fragment-components/a-radio-group.tsx

View workflow job for this annotation

GitHub Actions / lint 

This line has a length of 155. Maximum allowed is 150
</RadioButtonGroup>`;
}
},
v10: {
imports: ['RadioButtonGroup'],
code: ({ json, fragments, jsonToTemplate, customComponentsCollections }) => {
code: ({ json, signals, slots, fragments, jsonToTemplate, customComponentsCollections }) => {
return `<RadioButtonGroup
name="${json.codeContext?.name}"
legendText="${json.legend}"
Expand All @@ -243,7 +243,7 @@
name: "${json.codeContext?.name}"
}
})}>
${json.items.map((element: any) => jsonToTemplate(element, fragments, customComponentsCollections)).join('\n')}
${json.items.map((element: any) => jsonToTemplate(element, signals, slots, fragments, customComponentsCollections)).join('\n')}
</RadioButtonGroup>`;
}
}
Expand Down
8 changes: 4 additions & 4 deletions sdk/react/src/lib/fragment-components/accordion/a-accordion-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,23 +174,23 @@ export const componentInfo: ComponentInfo = {
react: {
latest: {
imports: ['AccordionItem'],
code: ({ json, fragments, jsonToTemplate, customComponentsCollections }) => {
code: ({ json, signals, slots, fragments, jsonToTemplate, customComponentsCollections }) => {
return `<AccordionItem
title="${json.title || ''}"
${json.disabled !== undefined ? `disabled={${json.disabled}}` : ''}
${reactClassNamesFromComponentObj(json)}>
${json.items.map((element: any) => jsonToTemplate(element, fragments, customComponentsCollections)).join('\n')}
${json.items.map((element: any) => jsonToTemplate(element, signals, slots, fragments, customComponentsCollections)).join('\n')}
</AccordionItem>`;
}
},
v10: {
imports: ['AccordionItem'],
code: ({ json, fragments, jsonToTemplate, customComponentsCollections }) => {
code: ({ json, signals, slots, fragments, jsonToTemplate, customComponentsCollections }) => {
return `<AccordionItem
title="${json.title || ''}"
${json.disabled !== undefined ? `disabled={${json.disabled}}` : ''}
${reactClassNamesFromComponentObj(json)}>
${json.items.map((element: any) => jsonToTemplate(element, fragments, customComponentsCollections)).join('\n')}
${json.items.map((element: any) => jsonToTemplate(element, signals, slots, fragments, customComponentsCollections)).join('\n')}
</AccordionItem>`;
}
}
Expand Down
8 changes: 4 additions & 4 deletions sdk/react/src/lib/fragment-components/accordion/a-accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,23 +130,23 @@ export const componentInfo: ComponentInfo = {
react: {
latest: {
imports: ['Accordion'],
code: ({ json, fragments, jsonToTemplate, customComponentsCollections }) => {
code: ({ json, signals, slots, fragments, jsonToTemplate, customComponentsCollections }) => {
return `<Accordion
${json.align !== undefined ? `align='${json.align}'` : ''}
${json.size !== undefined ? `size='${json.size}'` : ''}
${reactClassNamesFromComponentObj(json)}>
${json.items.map((element: any) => jsonToTemplate(element, fragments, customComponentsCollections)).join('\n')}
${json.items.map((element: any) => jsonToTemplate(element, signals, slots, fragments, customComponentsCollections)).join('\n')}
</Accordion>`;
}
},
v10: {
imports: ['Accordion'],
code: ({ json, fragments, jsonToTemplate, customComponentsCollections }) => {
code: ({ json, signals, slots, fragments, jsonToTemplate, customComponentsCollections }) => {
return `<Accordion
${json.align !== undefined ? `align='${json.align}'` : ''}
${json.size !== undefined ? `size='${json.size}'` : ''}
${reactClassNamesFromComponentObj(json)}>
${json.items.map((element: any) => jsonToTemplate(element, fragments, customComponentsCollections)).join('\n')}
${json.items.map((element: any) => jsonToTemplate(element, signals, slots, fragments, customComponentsCollections)).join('\n')}
</Accordion>`;
}
}
Expand Down
8 changes: 4 additions & 4 deletions sdk/react/src/lib/fragment-components/tiles/a-clickable-tile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,25 +171,25 @@ export const componentInfo: ComponentInfo = {
react: {
latest: {
imports: ['ClickableTile'],
code: ({ json, fragments, jsonToTemplate, customComponentsCollections }) => {
code: ({ json, signals, slots, fragments, jsonToTemplate, customComponentsCollections }) => {
return `<ClickableTile
${json.codeContext?.href !== undefined && json.codeContext?.href !== '' ? `href='${json.codeContext?.href}'` : ''}
${json.light !== undefined ? `light={${json.light}}` : ''}
${json.disabled !== undefined ? `disabled={${json.disabled}}` : ''}
${reactClassNamesFromComponentObj(json)}>
${json.items.map((element: any) => jsonToTemplate(element, fragments, customComponentsCollections)).join('\n')}
${json.items.map((element: any) => jsonToTemplate(element, signals, slots, fragments, customComponentsCollections)).join('\n')}
</ClickableTile>`;
}
},
v10: {
imports: ['ClickableTile'],
code: ({ json, fragments, jsonToTemplate, customComponentsCollections }) => {
code: ({ json, signals, slots, fragments, jsonToTemplate, customComponentsCollections }) => {
return `<ClickableTile
${json.codeContext?.href !== undefined && json.codeContext?.href !== '' ? `href='${json.codeContext?.href}'` : ''}
${json.light !== undefined ? `light={${json.light}}` : ''}
${json.disabled !== undefined ? `disabled={${json.disabled}}` : ''}
${reactClassNamesFromComponentObj(json)}>
${json.items.map((element: any) => jsonToTemplate(element, fragments, customComponentsCollections)).join('\n')}
${json.items.map((element: any) => jsonToTemplate(element, signals, slots, fragments, customComponentsCollections)).join('\n')}
</ClickableTile>`;
}
}
Expand Down
Loading
Loading