feat(react): update react-output-target

package.json

@@ -30,9 +30,9 @@
     "tokens:build": "nx build @juntossomosmais/atomium-tokens"
   },
   "dependencies": {
-    "@ionic/core": "^7.8.6",
+    "@ionic/core": "^8.4.0",
     "@popperjs/core": "^2.11.8",
-    "@stencil/core": "~4.17.2"
+    "@stencil/core": "~4.22.3"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -44,15 +44,15 @@
     "@juntossomosmais/linters": "^0.21.0",
     "@nrwl/workspace": "19.6.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/react-output-target": "^0.7.4",
     "@stencil/sass": "^3.0.12",
     "@stencil/vue-output-target": "^0.8.9",
     "@storybook/addon-a11y": "^7.6.17",
     "@storybook/addon-docs": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-mdx-gfm": "^7.6.17",
     "@storybook/addons": "^7.6.17",
-    "@storybook/preset-typescript": "^3.0.0",
+    "@storybook/preset-typescript": "^2.1.0",
     "@storybook/react": "^7.6.17",
     "@storybook/react-webpack5": "^7.6.17",
     "@storybook/theming": "^7.6.17",

packages/core/loader/cdn.js

@@ -1,3 +1 @@
-
-module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports = require('../dist/cjs/loader.cjs.js');

packages/core/loader/index.cjs.js

@@ -1,3 +1 @@
-
-module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports = require('../dist/cjs/loader.cjs.js');

packages/core/loader/index.d.ts

@@ -9,6 +9,9 @@ export interface CustomElementsDefineOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
 export declare function applyPolyfills(): Promise<void>;
 
 /**

packages/core/loader/index.es2017.js

@@ -1,3 +1 @@
-
-export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm/loader.js';
+export * from '../dist/esm/loader.js';

packages/core/src/components.d.ts

@@ -7,10 +7,10 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { IconProps } from "./icons";
 import { Mode, TextFieldTypes } from "@ionic/core";
-import { IonTypes } from "@ionic/core/dist/types/components";
+import { LocalJSX as IonTypes } from "@ionic/core/dist/types/components";
 export { IconProps } from "./icons";
 export { Mode, TextFieldTypes } from "@ionic/core";
-export { IonTypes } from "@ionic/core/dist/types/components";
+export { LocalJSX as IonTypes } from "@ionic/core/dist/types/components";
 export namespace Components {
     interface AtomAlert {
         "actionText"?: string;
@@ -195,13 +195,12 @@ export namespace Components {
         "value"?: IonTypes.IonSelect['value'];
     }
     interface AtomStepsModal {
-        "cancelButtonText"?: string;
         "closeOnFinish"?: boolean;
         "currentStep": number;
-        "customInitialStep"?: number;
         "disablePrimaryButton"?: boolean;
         "disableSecondaryButton"?: boolean;
         "isOpen": boolean;
+        "lockedInitialStep"?: number;
         "primaryButtonTextsByStep": string;
         "secondaryButtonTextsByStep": string;
         "steps": number;
@@ -827,13 +826,12 @@ declare namespace LocalJSX {
         "value"?: IonTypes.IonSelect['value'];
     }
     interface AtomStepsModal {
-        "cancelButtonText"?: string;
         "closeOnFinish"?: boolean;
         "currentStep"?: number;
-        "customInitialStep"?: number;
         "disablePrimaryButton"?: boolean;
         "disableSecondaryButton"?: boolean;
         "isOpen"?: boolean;
+        "lockedInitialStep"?: number;
         "onAtomCancel"?: (event: AtomStepsModalCustomEvent<any>) => void;
         "onAtomCloseClick"?: (event: AtomStepsModalCustomEvent<any>) => void;
         "onAtomDidDismiss"?: (event: AtomStepsModalCustomEvent<any>) => void;

packages/core/src/global/global.scss

@@ -1,8 +1,5 @@
 :root {
-  /* Set the background of the entire app */
   --ion-background-color: white;
-
-  /* Set the font family of the entire app */
   --ion-font-family: var(--font-family);
 
   --ion-color-primary: var(--color-brand-primary-regular);

packages/core/stencil.config.ts

@@ -4,13 +4,11 @@ import { reactOutputTarget } from '@stencil/react-output-target'
 import { sass } from '@stencil/sass'
 import { vueOutputTarget } from '@stencil/vue-output-target'
 
-import { reactBooleanFixOutputTarget } from './output-target/react-boolean'
-
 // Since Ionic components are imported in `global.ts`
 // we need to exclude them here to avoid unnecessary imports in the React and Vue output module
 const excludeComponents = [
-  'ion-accordion',
   'ion-accordion-group',
+  'ion-accordion',
   'ion-action-sheet',
   'ion-alert',
   'ion-app',
@@ -22,77 +20,84 @@ const excludeComponents = [
   'ion-breadcrumbs',
   'ion-button',
   'ion-buttons',
-  'ion-card',
   'ion-card-content',
   'ion-card-header',
   'ion-card-subtitle',
   'ion-card-title',
+  'ion-card',
   'ion-checkbox',
   'ion-chip',
   'ion-col',
   'ion-content',
-  'ion-datetime',
   'ion-datetime-button',
-  'ion-fab',
+  'ion-datetime',
   'ion-fab-button',
   'ion-fab-list',
+  'ion-fab',
   'ion-footer',
   'ion-grid',
   'ion-header',
   'ion-icon',
   'ion-img',
-  'ion-infinite-scroll',
   'ion-infinite-scroll-content',
+  'ion-infinite-scroll',
+  'ion-input-password-toggle',
   'ion-input',
-  'ion-item',
   'ion-item-divider',
   'ion-item-group',
   'ion-item-option',
   'ion-item-options',
   'ion-item-sliding',
+  'ion-item',
   'ion-label',
-  'ion-list',
   'ion-list-header',
+  'ion-list',
   'ion-loading',
-  'ion-menu',
   'ion-menu-button',
   'ion-menu-toggle',
+  'ion-menu',
   'ion-modal',
-  'ion-nav',
   'ion-nav-link',
+  'ion-nav',
   'ion-note',
-  'ion-picker',
-  'ion-picker-column',
   'ion-picker-column-internal',
+  'ion-picker-column-option',
+  'ion-picker-column',
   'ion-picker-internal',
+  'ion-picker-legacy-column',
+  'ion-picker-legacy',
+  'ion-picker',
   'ion-popover',
   'ion-progress-bar',
-  'ion-radio',
   'ion-radio-group',
+  'ion-radio',
   'ion-range',
-  'ion-refresher',
   'ion-refresher-content',
-  'ion-reorder',
+  'ion-refresher',
   'ion-reorder-group',
+  'ion-reorder',
   'ion-ripple-effect',
-  'ion-route',
   'ion-route-redirect',
-  'ion-router',
+  'ion-route',
   'ion-router-link',
   'ion-router-outlet',
+  'ion-router',
   'ion-row',
   'ion-searchbar',
-  'ion-segment',
   'ion-segment-button',
-  'ion-select',
+  'ion-segment-content',
+  'ion-segment-view',
+  'ion-segment',
+  'ion-select-modal',
   'ion-select-option',
   'ion-select-popover',
+  'ion-select',
   'ion-skeleton-text',
   'ion-spinner',
   'ion-split-pane',
-  'ion-tab',
   'ion-tab-bar',
   'ion-tab-button',
+  'ion-tab',
   'ion-tabs',
   'ion-text',
   'ion-textarea',
@@ -120,6 +125,10 @@ export const config: Config = {
       type: 'dist',
       esmLoaderPath: '../loader',
     },
+    {
+      type: 'dist-custom-elements',
+      externalRuntime: false,
+    },
     vueOutputTarget({
       componentCorePackage: '@juntossomosmais/atomium',
       proxiesFile: '../vue/src/components/index.ts',
@@ -128,15 +137,9 @@ export const config: Config = {
       excludeComponents,
     }),
     reactOutputTarget({
-      componentCorePackage: '@juntossomosmais/atomium',
-      proxiesFile: '../react/src/components/index.ts',
-      includeDefineCustomElements: true,
-      includePolyfills: false,
+      stencilPackageName: '@juntossomosmais/atomium',
+      outDir: '../react/src/components',
       excludeComponents,
     }),
-    reactBooleanFixOutputTarget({
-      attachPropsFile:
-        '../../react/src/components/react-component-lib/utils/attachProps.ts',
-    }),
   ] as OutputTargetCustom[],
 }

packages/react/package.json

@@ -2,18 +2,15 @@
   "name": "@juntossomosmais/atomium-react",
   "description": "React transpiled for Atomium",
   "private": true,
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "files": [
     "dist/"
   ],
   "scripts": {
     "start": "tsc -p . --watch",
     "build": "nx build @juntossomosmais/atomium && npm run compile && npm run copy",
-    "compile": "npm run build:cjs && npm run build:esm",
-    "build:cjs": "tsc --module commonjs --outDir ../core/react/dist/cjs --declarationDir ../core/react/dist/types",
-    "build:esm": "tsc --module es6 --outDir ../core/react/dist/esm --declarationDir ../core/react/dist/types",
+    "compile": "tsc --outDir ../core/react/dist --declarationDir ../core/react/dist/types",
     "copy": "npx copyfiles --flat ./package.json ../core/react"
   },
   "nx": {

packages/react/src/index.ts

@@ -1 +1 @@
-export * from './components'
+export * from './components/components'

packages/react/tsconfig.json

@@ -4,8 +4,8 @@
     "rootDir": "src",
     "outDir": "dist",
     "lib": ["dom", "es2015"],
-    "module": "CommonJS",
-    "moduleResolution": "node",
+    "module": "esnext",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "target": "es2015",
     "skipLibCheck": true,