@sparrowengg/integrations-templates-frontend 8.0.15-Beta โ 8.0.16-Beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -0
- package/dist/cjs/commons/constants/operator-options.js +1 -2
- package/dist/cjs/commons/constants/operator-options.js.map +1 -1
- package/dist/es/commons/constants/operator-options.js +1 -2
- package/dist/es/commons/constants/operator-options.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -561,6 +561,29 @@ function IntegrationTemplateExample() {
|
|
|
561
561
|
}
|
|
562
562
|
```
|
|
563
563
|
|
|
564
|
+
## ๐งช Automation & Test IDs
|
|
565
|
+
|
|
566
|
+
Every interactive element across all modules ships with a stable `data-testid` attribute scoped to the integration name. Pass `integrationName` to any module root and all descendants receive IDs in the format `module_{integrationName}_{suffix}`:
|
|
567
|
+
|
|
568
|
+
```tsx
|
|
569
|
+
<IntegrationTemplate integrationName="salesforce" ... />
|
|
570
|
+
// โ <button data-testid="module_salesforce_configure-mapping">New Mapping</button>
|
|
571
|
+
// โ <button data-testid="module_salesforce_confirm-btn">Confirm</button>
|
|
572
|
+
```
|
|
573
|
+
|
|
574
|
+
Query them in Playwright, Cypress, or Testing Library:
|
|
575
|
+
|
|
576
|
+
```ts
|
|
577
|
+
// Playwright
|
|
578
|
+
await page.locator('[data-testid="module_salesforce_configure-mapping"]').click();
|
|
579
|
+
// nth card (0-based)
|
|
580
|
+
await page.locator('[data-testid="module_salesforce_expand-trigger"]').nth(0).click();
|
|
581
|
+
```
|
|
582
|
+
|
|
583
|
+
See **[TEST_ID_GUIDE.md](./TEST_ID_GUIDE.md)** for the full reference โ every suffix, which component it lives in, and how to add new ones.
|
|
584
|
+
|
|
585
|
+
---
|
|
586
|
+
|
|
564
587
|
## ๐จ Styling
|
|
565
588
|
|
|
566
589
|
The library includes built-in CSS styles. Make sure to import the stylesheet:
|
|
@@ -2,8 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
const noValueOperators = [
|
|
4
4
|
{ id: 5, label: "has no value", value: "NO_VALUE", requiresValue: false },
|
|
5
|
-
{ id: 9, label: "has any value", value: "ANY_VALUE", requiresValue: false }
|
|
6
|
-
{ id: 14, label: "has changed", value: "IS_CHANGED", requiresValue: false }
|
|
5
|
+
{ id: 9, label: "has any value", value: "ANY_VALUE", requiresValue: false }
|
|
7
6
|
];
|
|
8
7
|
const booleanOperators = [
|
|
9
8
|
{ id: 1, label: "is equals to", value: "IS", type: "BOOLEAN" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"operator-options.js","sources":["../../../../src/commons/constants/operator-options.ts"],"sourcesContent":["export type OperatorOption = {\n id: number;\n label: string;\n value: string;\n isDateOnly?: boolean;\n isNumberOnly?: boolean;\n type?: string;\n requiresValue?: boolean;\n};\n\nexport type DataType =\n | \"STRING\"\n | \"NUMBER\"\n | \"DATE_TIME\"\n | \"BOOLEAN\"\n | \"SELECT\"\n | \"MULTI_SELECT\"\n | \"PHONE_NUMBER\"\n | \"NO_PREFERENCE\";\n\nexport type CustomConditions = Partial<Record<DataType, OperatorOption[]>>;\n\nconst noValueOperators: OperatorOption[] = [\n { id: 5, label: \"has no value\", value: \"NO_VALUE\", requiresValue: false },\n { id: 9, label: \"has any value\", value: \"ANY_VALUE\", requiresValue: false },\n
|
|
1
|
+
{"version":3,"file":"operator-options.js","sources":["../../../../src/commons/constants/operator-options.ts"],"sourcesContent":["export type OperatorOption = {\n id: number;\n label: string;\n value: string;\n isDateOnly?: boolean;\n isNumberOnly?: boolean;\n type?: string;\n requiresValue?: boolean;\n};\n\nexport type DataType =\n | \"STRING\"\n | \"NUMBER\"\n | \"DATE_TIME\"\n | \"BOOLEAN\"\n | \"SELECT\"\n | \"MULTI_SELECT\"\n | \"PHONE_NUMBER\"\n | \"NO_PREFERENCE\";\n\nexport type CustomConditions = Partial<Record<DataType, OperatorOption[]>>;\n\nconst noValueOperators: OperatorOption[] = [\n { id: 5, label: \"has no value\", value: \"NO_VALUE\", requiresValue: false },\n { id: 9, label: \"has any value\", value: \"ANY_VALUE\", requiresValue: false },\n];\n\nconst booleanOperators: OperatorOption[] = [\n { id: 1, label: \"is equals to\", value: \"IS\", type: \"BOOLEAN\" },\n { id: 2, label: \"is not equals to\", value: \"IS_NOT\", type: \"BOOLEAN\" },\n];\n\nconst stringOperators: OperatorOption[] = [\n { id: 3, label: \"contains\", value: \"CONTAINS\" },\n { id: 4, label: \"not contains\", value: \"CONTAINS_NOT\" },\n { id: 5, label: \"starts with\", value: \"STARTS_WITH\" },\n { id: 6, label: \"ends with\", value: \"ENDS_WITH\" },\n];\n\nconst dateOperators: OperatorOption[] = [\n { id: 6, label: \"before\", value: \"BEFORE\", isDateOnly: true },\n { id: 7, label: \"after\", value: \"AFTER\", isDateOnly: true },\n { id: 8, label: \"on\", value: \"ON\", isDateOnly: true },\n];\n\nconst numberOperators: OperatorOption[] = [\n { id: 10, label: \"less than\", value: \"LESS_THAN\", isNumberOnly: true },\n { id: 11, label: \"greater than\", value: \"GREATER_THAN\", isNumberOnly: true },\n { id: 12, label: \"less than or equal to\", value: \"LESS_THAN_OR_EQUAL\", isNumberOnly: true },\n { id: 13, label: \"greater than or equal to\", value: \"GREATER_THAN_OR_EQUAL\", isNumberOnly: true },\n];\n\nexport const operatorOptions: OperatorOption[] = [\n ...booleanOperators,\n ...stringOperators,\n ...dateOperators,\n ...numberOperators,\n ...noValueOperators,\n];\n\nexport const getValueLessOperators = (customConditions?: CustomConditions): string[] => {\n const baseNoValue = noValueOperators\n .filter(op => op.requiresValue === false)\n .map(op => op.value);\n\n if (!customConditions) return baseNoValue;\n\n const customNoValue = (Object.values(customConditions) as OperatorOption[][])\n .flat()\n .filter(op => op.requiresValue === false)\n .map(op => op.value);\n\n const seen = new Set<string>();\n return [...baseNoValue, ...customNoValue].filter(v => {\n if (seen.has(v)) return false;\n seen.add(v);\n return true;\n });\n};\n\nexport const getOperatorsByCategory = () => ({\n boolean: booleanOperators,\n string: stringOperators,\n date: dateOperators,\n number: numberOperators,\n noValue: noValueOperators,\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
const noValueOperators = [
|
|
2
2
|
{ id: 5, label: "has no value", value: "NO_VALUE", requiresValue: false },
|
|
3
|
-
{ id: 9, label: "has any value", value: "ANY_VALUE", requiresValue: false }
|
|
4
|
-
{ id: 14, label: "has changed", value: "IS_CHANGED", requiresValue: false }
|
|
3
|
+
{ id: 9, label: "has any value", value: "ANY_VALUE", requiresValue: false }
|
|
5
4
|
];
|
|
6
5
|
const booleanOperators = [
|
|
7
6
|
{ id: 1, label: "is equals to", value: "IS", type: "BOOLEAN" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"operator-options.js","sources":["../../../../src/commons/constants/operator-options.ts"],"sourcesContent":["export type OperatorOption = {\n id: number;\n label: string;\n value: string;\n isDateOnly?: boolean;\n isNumberOnly?: boolean;\n type?: string;\n requiresValue?: boolean;\n};\n\nexport type DataType =\n | \"STRING\"\n | \"NUMBER\"\n | \"DATE_TIME\"\n | \"BOOLEAN\"\n | \"SELECT\"\n | \"MULTI_SELECT\"\n | \"PHONE_NUMBER\"\n | \"NO_PREFERENCE\";\n\nexport type CustomConditions = Partial<Record<DataType, OperatorOption[]>>;\n\nconst noValueOperators: OperatorOption[] = [\n { id: 5, label: \"has no value\", value: \"NO_VALUE\", requiresValue: false },\n { id: 9, label: \"has any value\", value: \"ANY_VALUE\", requiresValue: false },\n
|
|
1
|
+
{"version":3,"file":"operator-options.js","sources":["../../../../src/commons/constants/operator-options.ts"],"sourcesContent":["export type OperatorOption = {\n id: number;\n label: string;\n value: string;\n isDateOnly?: boolean;\n isNumberOnly?: boolean;\n type?: string;\n requiresValue?: boolean;\n};\n\nexport type DataType =\n | \"STRING\"\n | \"NUMBER\"\n | \"DATE_TIME\"\n | \"BOOLEAN\"\n | \"SELECT\"\n | \"MULTI_SELECT\"\n | \"PHONE_NUMBER\"\n | \"NO_PREFERENCE\";\n\nexport type CustomConditions = Partial<Record<DataType, OperatorOption[]>>;\n\nconst noValueOperators: OperatorOption[] = [\n { id: 5, label: \"has no value\", value: \"NO_VALUE\", requiresValue: false },\n { id: 9, label: \"has any value\", value: \"ANY_VALUE\", requiresValue: false },\n];\n\nconst booleanOperators: OperatorOption[] = [\n { id: 1, label: \"is equals to\", value: \"IS\", type: \"BOOLEAN\" },\n { id: 2, label: \"is not equals to\", value: \"IS_NOT\", type: \"BOOLEAN\" },\n];\n\nconst stringOperators: OperatorOption[] = [\n { id: 3, label: \"contains\", value: \"CONTAINS\" },\n { id: 4, label: \"not contains\", value: \"CONTAINS_NOT\" },\n { id: 5, label: \"starts with\", value: \"STARTS_WITH\" },\n { id: 6, label: \"ends with\", value: \"ENDS_WITH\" },\n];\n\nconst dateOperators: OperatorOption[] = [\n { id: 6, label: \"before\", value: \"BEFORE\", isDateOnly: true },\n { id: 7, label: \"after\", value: \"AFTER\", isDateOnly: true },\n { id: 8, label: \"on\", value: \"ON\", isDateOnly: true },\n];\n\nconst numberOperators: OperatorOption[] = [\n { id: 10, label: \"less than\", value: \"LESS_THAN\", isNumberOnly: true },\n { id: 11, label: \"greater than\", value: \"GREATER_THAN\", isNumberOnly: true },\n { id: 12, label: \"less than or equal to\", value: \"LESS_THAN_OR_EQUAL\", isNumberOnly: true },\n { id: 13, label: \"greater than or equal to\", value: \"GREATER_THAN_OR_EQUAL\", isNumberOnly: true },\n];\n\nexport const operatorOptions: OperatorOption[] = [\n ...booleanOperators,\n ...stringOperators,\n ...dateOperators,\n ...numberOperators,\n ...noValueOperators,\n];\n\nexport const getValueLessOperators = (customConditions?: CustomConditions): string[] => {\n const baseNoValue = noValueOperators\n .filter(op => op.requiresValue === false)\n .map(op => op.value);\n\n if (!customConditions) return baseNoValue;\n\n const customNoValue = (Object.values(customConditions) as OperatorOption[][])\n .flat()\n .filter(op => op.requiresValue === false)\n .map(op => op.value);\n\n const seen = new Set<string>();\n return [...baseNoValue, ...customNoValue].filter(v => {\n if (seen.has(v)) return false;\n seen.add(v);\n return true;\n });\n};\n\nexport const getOperatorsByCategory = () => ({\n boolean: booleanOperators,\n string: stringOperators,\n date: dateOperators,\n number: numberOperators,\n noValue: noValueOperators,\n});\n"],"names":[],"mappings":"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"}
|