add sample components, webpack conf, package.json

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/env", "@babel/preset-react"]
+}

.env

@@ -0,0 +1,3 @@
+# Defines the Output Bundle Path for the "npm run dev" target.
+# It is recommended to point it directly to the SPM jscript folder.
+# For example: %SPM_ROOT_PATH%/webclient/WebContent/CDEJ/jscript/SPMUIComponents

.gitignore

@@ -0,0 +1,6 @@
+# Dependency directories
+node_modules/
+dist/
+
+# storybook
+storybook-static/

.npmignore

@@ -0,0 +1,15 @@
+node_modules
+
+.publish
+
+.editorconfig
+.eslintignore
+.eslintrc
+.travis.yml
+
+gulpfile.js
+index.js
+webpack.config.js
+
+CONTRIBUTING.md
+README.md

.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,11 @@
+import '../src/scss/index.scss';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

.storybook/webpack.config.js

@@ -0,0 +1,17 @@
+const path = require('path');
+const glob = require('glob');
+const custom = require('../webpack.config.js');
+
+module.exports = async ({ config, mode }) => {
+  config.module.rules.push({
+    test: /\.scss$/,
+    loaders: ['style-loader', 'css-loader', 'sass-loader'],
+    include: path.resolve(__dirname, '../'),
+  });
+
+  return {
+    ...config,
+    module: { ...config.module },
+    devServer: custom.devServer,
+  };
+};

gulpfile.js

@@ -0,0 +1,69 @@
+/*
+ * Licensed Materials - Property of IBM
+ *
+ * PID 5725-H26
+ *
+ * Copyright IBM Corporation 2020. All Rights Reserved.
+ *
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+
+/* eslint-disable  no-console */
+const path = require('path');
+const gulp = require('gulp');
+const shell = require('shelljs');
+
+// Load env vars from the .env file.
+require('dotenv').config();
+
+/*
+ * This task generates a development bundle to the specified output folder.
+ * Also the bundle is generated, it watches the projects folder for changes.
+ * Any changes in the project kicks off a Delta bundle generator only for
+ * the file that was changed.
+ *
+ * - The output folder is defined in the .env file
+ * through the variable: DEV_BUNDLE_OUTPUT
+ * If not variable is defined, it defaults to /dist
+ *
+ * - The development bundle uses the source maps strategy "eval-source-map"
+ * It is the slowest build option but it enables the developer to debug
+ * on the browser exactly the same code he sees in the code editor
+ * before it is transpiled by Babel.
+ */
+
+gulp.task('dev:spm', () => {
+  const output =
+    process.env.DEV_BUNDLE_OUTPUT ||
+    path.resolve(__dirname, '/dist');
+  if (!process.env.DEV_BUNDLE_OUTPUT) {
+    shell.echo(
+      `\n[WARNING] Env var DEV_BUNDLE_OUTPUT not defined in the .env file.
+Using Default Output: ${output}`
+    );
+  }
+
+  shell.echo(`\n[INFO] Generating the dev bundle to path: ${output}
+[INFO] Any changes to the files will automatically trigger a new bundle generation.`);
+
+  shell.exec(
+    `webpack --mode=development --devtool=eval-source-map\
+    --output-path=${output} --watch=true --hide-modules=true\
+    --build-delimiter="\n\n[INFO] Bundle Generated into ${output} \n[INFO] Watching for file changes."`,
+    { fatal: true }
+  );
+});
+
+gulp.task('prod:spm', (done) => {
+  const output = path.resolve(__dirname, '/dist');
+
+  shell.echo(`\n[INFO] Generating the dev bundle to path: ${output}.`);
+
+  shell.exec(
+    `webpack --mode production`,
+    { fatal: true, silent: true }
+  );
+  done();
+});
+

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "custom-carbon-addons",
+  "version": "0.0.1",
+  "description": "Enable customers to develop the content within the package, Carbon Components, and GraphQl using the apollo client. It also enables customer to build and deploy this new package.",
+  "main": "index.js",
+  "scripts": {
+    "build": "gulp prod:spm",
+    "dev": "gulp dev:spm",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack-dev-server --mode development",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "author": "Tom Delahunty",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.1.0",
+    "@babel/core": "^7.1.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-essentials": "^6.3.8",
+    "@storybook/addon-links": "^6.3.8",
+    "@storybook/react": "^6.3.8",
+    "babel-loader": "^8.0.2",
+    "css-loader": "^1.0.0",
+    "gulp": "^4.0.2",
+    "gulp-cli": "^2.3.0",
+    "node-sass": "^4.14.1",
+    "sass-loader": "^10.0.3",
+    "shelljs": "^0.8.4",
+    "style-loader": "^0.23.0",
+    "webpack": "4.42.1",
+    "webpack-cli": "3.3.11",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "dependencies": {
+    "@carbon/grid": "^10.20.0",
+    "@carbon/icon-helpers": "^10.13.0",
+    "@carbon/icons": "^10.25.0",
+    "@carbon/icons-react": "^10.25.0",
+    "@carbon/layout": "^10.17.0",
+    "@carbon/pictograms-react": "^11.2.0",
+    "@carbon/type": "^10.20.0",
+    "carbon-components": "10.44.0",
+    "carbon-components-react": "7.41.0",
+    "carbon-icons": "^7.0.7",
+    "classnames": "^2.2.6",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-app-polyfill": "^1.0.6",
+    "regenerator-runtime": "^0.13.7"
+  }
+}

public-path.js

@@ -0,0 +1,22 @@
+// Path to SPMUIComponents directory (relative to WebContent folder).
+const spmUIComponentsBaseURL = 'CDEJ/jscript/SPMUIComponents/';
+
+// Retrieves Static Content Server from SPM.
+//
+// The serverRootURL is set on the root document window so if a js bundle
+// is requested by a UIM iframe the parent window is checked instead.
+const serverRootURL =
+  window.curam || window.parent.curam
+    ? window.curam.serverRootURL || window.parent.curam.serverRootURL || ''
+    : '';
+
+// If a Static Content Server URL is not set, '../' must be prepended to
+// the URL to get the correct relative path.
+const spmUIComponentsRootURL = serverRootURL
+  ? spmUIComponentsBaseURL
+  : `../${spmUIComponentsBaseURL}`;
+
+// Concatenate the correct public path for use in webpack bundles.
+const publicPath = `${serverRootURL}${spmUIComponentsRootURL}`;
+
+export default __webpack_public_path__ = publicPath;

src/dynamicExports.js

@@ -0,0 +1,19 @@
+
+/*
+   Use when the main bundle is not on the same level as the script calling it.
+   Webpack will reference this path when emitting the chunks
+*/
+export const usePublicPath = async (path) => {
+    if (path) {
+      __webpack_public_path__ = path; // eslint-disable-line
+    }
+  };
+
+
+/* Imports Carbon Addons dynamically */
+export const requireCustomCarbonAddons = async () => {
+    const customCarbonAddons = await import(
+        /* webpackChunkName: "simple" */ './react'
+    );
+    return customCarbonAddons;
+  };

src/index.js

@@ -0,0 +1,21 @@
+import "./scss/index.scss";
+
+
+
+
+import 'regenerator-runtime/runtime';
+
+ import {
+    requireCustomCarbonAddons,
+  } from './dynamicExports';
+
+
+  export default  {
+
+    requireCustomCarbonAddons,
+
+  };
+
+  // export { default as requireCustomCarbonAddons } from requireCustomCarbonAddons;
+
+

src/react/Logo/Logo.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import settings from '../settings';
+
+const Logo = ({ children, className, size, ...other }) => {
+  const styleClass = cx(
+    `${settings.prefix}--logo`,
+    {
+      [`${settings.prefix}--logo--large`]: size === 'large',
+      [`${settings.prefix}--logo--medium`]: size === 'medium',
+      [`${settings.prefix}--logo--small`]: size === 'small',
+    },
+    className
+  );
+  return (
+    <div className={styleClass} {...other}>
+      {children}
+    </div>
+  );
+};
+
+Logo.propTypes = {
+  /**
+   * Pass in the image that will be rendered within the Logo
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Additional styling
+   */
+  className: PropTypes.string,
+  /**
+   * Specify an optional size for the Logo. Defaults to 'medium'
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+};
+
+Logo.defaultProps = {
+  size: 'medium',
+  className: undefined,
+};
+
+export default Logo;

src/react/Logo/Logo.stories.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import Example from '../../examples/images/sample-logo.jpg';
+import Logo from './Logo';
+
+
+export default {
+  title: 'Logo',
+  component: Logo,
+}
+
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => <div className="spm-custom-component"> <Logo {...args} ><img src={Example} alt="logo" /></Logo></div>;
+
+//👇 Each story then reuses that template
+
+export const Small = Template.bind({});
+
+Small.args = {
+size: "small",
+};
+
+export const Medium = Template.bind({});
+
+Medium.args = {
+size: "medium",
+};
+
+export const Large = Template.bind({});
+
+Large.args = {
+size: "large",
+};
+
+
+
+
+export const All = () => {
+  return (
+    <div className="spm-custom-component">
+        <div className="bx--grid">
+          <div className="bx--row">
+            <div className="bx--col">
+              <h2>small</h2>
+                <Logo size="small">
+                  <img src={Example} alt="small logo" />
+                </Logo>
+            </div>
+          </div>
+          <div className="bx--row">
+            <div className="bx--col">
+              <h2>medium</h2>
+                <Logo size="medium">
+                  <img src={Example} alt="medium logo" />
+                </Logo>
+            </div>
+          </div>
+          <div className="bx--row">
+            <div className="bx--col">
+              <h2>large</h2>
+                <Logo size="large">
+                  <img src={Example} alt="large logo" />
+                </Logo>
+            </div>
+          </div>
+        </div>
+    </div>
+  );
+};
+
+