Remove unnecessary flag

.env

@@ -1 +1,11 @@
-# Defines the Output Bundle Path for the "npm run dev" target.
+# 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

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(<Alan1Addon />);
+};
+
+export default Alan1Renderer;

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(<Alan2Addon />);
+};
+
+export default Alan2Renderer;

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 };

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 = () => (
+ <div className="some-content">
+ Content for first tab goes here.
+ <fieldset className="cds--fieldset">
+ <legend className="cds--label">Checkbox heading</legend>
+ <Checkbox defaultChecked labelText="Checkbox 1" id="checked" />
+ <Checkbox labelText="Checkbox 2" id="checked-2" />
+ </fieldset>
+ <FormGroup legendText="Radio button heading">
+ <RadioButtonGroup
+ defaultSelected="default-selected"
+ legend="Group Legend"
+ name="radio-button-group"
+ valueSelected="default-selected"
+ >
+ <RadioButton id="radio-1" labelText="Option 1" value="standard" />
+ <RadioButton
+ id="radio-2"
+ labelText="Option 2"
+ value="default-selected"
+ />
+ <RadioButton id="radio-3" labelText="Option 3" value="disabled" />
+ </RadioButtonGroup>
+ </FormGroup>
+ <Button>Button</Button>
+ </div>
+);
+
+const createTabTwo = () => (
+ <div className="some-content">
+ Content for second tab goes here.
+ <StructuredListWrapper ariaLabel="Structured list">
+ <StructuredListHead>
+ <StructuredListRow head tabIndex={0}>
+ <StructuredListCell head>ColumnA</StructuredListCell>
+ <StructuredListCell head>ColumnB</StructuredListCell>
+ <StructuredListCell head>ColumnC</StructuredListCell>
+ </StructuredListRow>
+ </StructuredListHead>
+ <StructuredListBody>
+ <StructuredListRow tabIndex={0}>
+ <StructuredListCell>Row 1</StructuredListCell>
+ <StructuredListCell>Row 1</StructuredListCell>
+ <StructuredListCell>
+ 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.
+ </StructuredListCell>
+ </StructuredListRow>
+ <StructuredListRow tabIndex={0}>
+ <StructuredListCell>Row 2</StructuredListCell>
+ <StructuredListCell>Row 2</StructuredListCell>
+ <StructuredListCell>
+ 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.
+ </StructuredListCell>
+ </StructuredListRow>
+ </StructuredListBody>
+ </StructuredListWrapper>
+ </div>
+);
+
+const createTabThree = () => (
+ <div className="some-content">
+ <div>Content for third tab goes here.</div>
+ <div>
+ <Toggle
+ labelText="Toggle element label"
+ labelA="Off"
+ labelB="On"
+ defaultToggled
+ id="toggle-1"
+ />
+ </div>
+ <div>
+ <TextInput
+ helperText="Optional helper text"
+ id="test2"
+ invalidText="A valid value is required"
+ labelText="Text input label"
+ placeholder="Placeholder text"
+ />
+ </div>
+ </div>
+);
+
+const Alan1Addon = () => (
+ <Column lg={16} md={8} sm={4} className="landing-page__r2">
+ <Tabs>
+ <TabList aria-label="foobar">
+ <Tab>Tab label 1</Tab>
+ <Tab>Tab label 2</Tab>
+ <Tab>Tab label 3</Tab>
+ </TabList>
+ <TabPanels>
+ <TabPanel>{createTabOne()}</TabPanel>
+ <TabPanel>{createTabTwo()}</TabPanel>
+ <TabPanel>{createTabThree()}</TabPanel>
+ </TabPanels>
+ </Tabs>
+ </Column>
+);
+
+export default Alan1Addon;

packages/custom-carbon-addons/src/react/addons/Alan2Addon/Alan2Addon.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+const Alan2Addon = () => <div>This is Alan2Addon.js</div>;
+
+export default Alan2Addon;

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 };

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 <Alan1Addon />;
+};

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 <Alan2Addon />;
+};