diff --git a/.env b/.env index 8ff21d5..63dff59 100644 --- a/.env +++ b/.env @@ -1 +1,11 @@ -# Defines the Output Bundle Path for the "npm run dev" target. \ No newline at end of file +# Defines the Output Bundle Path for the "npm run dev" target. + +CLIENT_DIR=C:\dev\spm-enterprise\cef_carbon_upgrade\CEF\CEFBase\webclient +RELATIVE_PATH_TO_BUNDLE=CDEJ/jscript/SPMUIComponents/ +# FIXME I got a warning for both of these when I ran `npm run build`... which suggests either that they did not default or else we get the warning anyway. +CUSTOM_COMPONENT_NAME=core +#GRAPHQL_SERVER_URL=/Rest/graphql # Defaults to '/Rest/graphql' +GRAPHQL_SERVER_URL=http://localhost:4000/graphql +CSRF_TOKEN_ENPOINT=/Rest/v1/csrf/tokens +# FIXME This still says IBM +CSRF_TOKEN_REQUEST_HEADER=X-IBM-SPM-CSRF diff --git a/.npmrc b/.npmrc deleted file mode 100644 index 6bd7585..0000000 --- a/.npmrc +++ /dev/null @@ -1,2 +0,0 @@ -// Added to fix https://github.com/webpack/webpack/issues/14532 when upgrading to NodeJs 20. Remove when we upgrade to Webpack 5. -node-options="--openssl-legacy-provider" diff --git a/packages/custom-carbon-addons/renderers/Alan1Renderer.js b/packages/custom-carbon-addons/renderers/Alan1Renderer.js new file mode 100644 index 0000000..5411c98 --- /dev/null +++ b/packages/custom-carbon-addons/renderers/Alan1Renderer.js @@ -0,0 +1,15 @@ +import React from "react"; +import { createRoot } from "react-dom/client"; +import Alan1Addon from "../src/react/addons/Alan1Addon/Alan1Addon"; + +const getWrapper = (iframeWindow, containerID) => { + return iframeWindow.document.getElementById(`${containerID}`); +}; + +const Alan1Renderer = (inputId, { iframeWindow = window }) => { + const container = getWrapper(iframeWindow, inputId); + const root = createRoot(container); + root.render(); +}; + +export default Alan1Renderer; diff --git a/packages/custom-carbon-addons/renderers/Alan2Renderer.js b/packages/custom-carbon-addons/renderers/Alan2Renderer.js new file mode 100644 index 0000000..7c02af6 --- /dev/null +++ b/packages/custom-carbon-addons/renderers/Alan2Renderer.js @@ -0,0 +1,15 @@ +import React from "react"; +import { createRoot } from "react-dom/client"; +import Alan2Addon from "../src/react/addons/Alan2Addon/Alan2Addon"; + +const getWrapper = (iframeWindow, containerID) => { + return iframeWindow.document.getElementById(`${containerID}`); +}; + +const Alan2Renderer = (inputId, { iframeWindow = window }) => { + const container = getWrapper(iframeWindow, inputId); + const root = createRoot(container); + root.render(); +}; + +export default Alan2Renderer; diff --git a/packages/custom-carbon-addons/renderers/index.js b/packages/custom-carbon-addons/renderers/index.js index a706c23..7522969 100644 --- a/packages/custom-carbon-addons/renderers/index.js +++ b/packages/custom-carbon-addons/renderers/index.js @@ -14,3 +14,8 @@ // import MyComponent2 from './MyComponent2'; // export default { MyComponent1, MyComponent2 }; + +import Alan1Renderer from "./Alan1Renderer"; +import Alan2Renderer from "./Alan2Renderer"; + +export default { Alan1Renderer, Alan2Renderer }; diff --git a/packages/custom-carbon-addons/src/react/addons/Alan1Addon/Alan1Addon.js b/packages/custom-carbon-addons/src/react/addons/Alan1Addon/Alan1Addon.js new file mode 100644 index 0000000..c9edade --- /dev/null +++ b/packages/custom-carbon-addons/src/react/addons/Alan1Addon/Alan1Addon.js @@ -0,0 +1,129 @@ +import React from "react"; +import { + Button, + Checkbox, + Column, + FormGroup, + RadioButton, + RadioButtonGroup, + StructuredListBody, + StructuredListCell, + StructuredListHead, + StructuredListRow, + StructuredListWrapper, + Tab, + Tabs, + TabList, + TabPanel, + TabPanels, + TextInput, + Toggle, +} from "@carbon/react"; + +const createTabOne = () => ( +
+ Content for first tab goes here. +
+ Checkbox heading + + +
+ + + + + + + + +
+); + +const createTabTwo = () => ( +
+ Content for second tab goes here. + + + + ColumnA + ColumnB + ColumnC + + + + + Row 1 + Row 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + Row 2 + Row 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui + magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere + sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque + vulputate nisl a porttitor interdum. + + + + +
+); + +const createTabThree = () => ( +
+
Content for third tab goes here.
+
+ +
+
+ +
+
+); + +const Alan1Addon = () => ( + + + + Tab label 1 + Tab label 2 + Tab label 3 + + + {createTabOne()} + {createTabTwo()} + {createTabThree()} + + + +); + +export default Alan1Addon; diff --git a/packages/custom-carbon-addons/src/react/addons/Alan2Addon/Alan2Addon.js b/packages/custom-carbon-addons/src/react/addons/Alan2Addon/Alan2Addon.js new file mode 100644 index 0000000..aa2a6c7 --- /dev/null +++ b/packages/custom-carbon-addons/src/react/addons/Alan2Addon/Alan2Addon.js @@ -0,0 +1,5 @@ +import React from "react"; + +const Alan2Addon = () =>
This is Alan2Addon.js
; + +export default Alan2Addon; diff --git a/packages/custom-carbon-addons/src/react/index.js b/packages/custom-carbon-addons/src/react/index.js index fd059fd..bbbb752 100644 --- a/packages/custom-carbon-addons/src/react/index.js +++ b/packages/custom-carbon-addons/src/react/index.js @@ -2,3 +2,8 @@ // create a separate directory for each carbon compoennt in the component directory // Then refer to them from here + +import Alan1Addon from "./addons/Alan1Addon/Alan1Addon"; +import Alan2Addon from "./addons/Alan2Addon/Alan2Addon"; + +export { Alan1Addon, Alan2Addon }; diff --git a/packages/custom-carbon-addons/stories/Alan1Addon/Alan1Addon.stories.js b/packages/custom-carbon-addons/stories/Alan1Addon/Alan1Addon.stories.js new file mode 100644 index 0000000..14f5d98 --- /dev/null +++ b/packages/custom-carbon-addons/stories/Alan1Addon/Alan1Addon.stories.js @@ -0,0 +1,11 @@ +import React from "react"; +import Alan1Addon from "../../src/react/addons/Alan1Addon/Alan1Addon"; + +export default { + title: "Alan1Addon", + component: Alan1Addon, +}; + +export const All = () => { + return ; +}; diff --git a/packages/custom-carbon-addons/stories/Alan2Addon/Alan2Addon.stories.js b/packages/custom-carbon-addons/stories/Alan2Addon/Alan2Addon.stories.js new file mode 100644 index 0000000..8898edf --- /dev/null +++ b/packages/custom-carbon-addons/stories/Alan2Addon/Alan2Addon.stories.js @@ -0,0 +1,11 @@ +import React from "react"; +import Alan2Addon from "../../src/react/addons/Alan2Addon/Alan2Addon"; + +export default { + title: "Alan2Addon", + component: Alan2Addon, +}; + +export const All = () => { + return ; +};