From ea15b547dc23009591d74fc9c4dbf40319d75486 Mon Sep 17 00:00:00 2001 From: Tom Delahunty Date: Mon, 18 Oct 2021 17:11:55 +0100 Subject: [PATCH] add sample components, webpack conf, package.json --- .babelrc | 3 + .env | 3 + .gitignore | 6 + .npmignore | 15 +++ .storybook/main.js | 10 ++ .storybook/preview.js | 11 ++ .storybook/webpack.config.js | 17 +++ gulpfile.js | 69 ++++++++++ package.json | 54 ++++++++ public-path.js | 22 ++++ src/dynamicExports.js | 19 +++ src/examples/images/sample-logo.jpg | Bin 0 -> 23831 bytes src/index.js | 21 +++ src/react/Logo/Logo.js | 43 +++++++ src/react/Logo/Logo.stories.js | 70 ++++++++++ src/react/Logo/index.js | 26 ++++ src/react/PersonFolio/PersonFolio.js | 46 +++++++ src/react/PersonFolio/PersonFolio.stories.js | 74 +++++++++++ src/react/PersonFolio/index.js | 25 ++++ src/react/index.js | 7 + src/react/settings.js | 16 +++ src/scss/index.scss | 127 +++++++++++++++++++ src/scss/logo.scss | 29 +++++ src/scss/personfolio.scss | 33 +++++ src/scss/variables.scss | 5 + webpack.config.js | 45 +++++++ 26 files changed, 796 insertions(+) create mode 100644 .babelrc create mode 100644 .env create mode 100644 .gitignore create mode 100644 .npmignore create mode 100644 .storybook/main.js create mode 100644 .storybook/preview.js create mode 100644 .storybook/webpack.config.js create mode 100644 gulpfile.js create mode 100644 package.json create mode 100644 public-path.js create mode 100644 src/dynamicExports.js create mode 100644 src/examples/images/sample-logo.jpg create mode 100644 src/index.js create mode 100644 src/react/Logo/Logo.js create mode 100644 src/react/Logo/Logo.stories.js create mode 100644 src/react/Logo/index.js create mode 100644 src/react/PersonFolio/PersonFolio.js create mode 100644 src/react/PersonFolio/PersonFolio.stories.js create mode 100644 src/react/PersonFolio/index.js create mode 100644 src/react/index.js create mode 100644 src/react/settings.js create mode 100644 src/scss/index.scss create mode 100644 src/scss/logo.scss create mode 100644 src/scss/personfolio.scss create mode 100644 src/scss/variables.scss create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..14d9aa2 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/env", "@babel/preset-react"] +} \ No newline at end of file diff --git a/.env b/.env new file mode 100644 index 0000000..1496cc2 --- /dev/null +++ b/.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 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f23a460 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +# Dependency directories +node_modules/ +dist/ + +# storybook +storybook-static/ \ No newline at end of file diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..8c0cfc5 --- /dev/null +++ b/.npmignore @@ -0,0 +1,15 @@ +node_modules + +.publish + +.editorconfig +.eslintignore +.eslintrc +.travis.yml + +gulpfile.js +index.js +webpack.config.js + +CONTRIBUTING.md +README.md diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..26dfeaf --- /dev/null +++ b/.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" + ] +} \ No newline at end of file diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000..1a611ec --- /dev/null +++ b/.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$/, + }, + }, +} \ No newline at end of file diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js new file mode 100644 index 0000000..d2f0454 --- /dev/null +++ b/.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, + }; +}; diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..64710f8 --- /dev/null +++ b/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(); +}); + diff --git a/package.json b/package.json new file mode 100644 index 0000000..f3d1830 --- /dev/null +++ b/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" + } +} diff --git a/public-path.js b/public-path.js new file mode 100644 index 0000000..7c0ca7a --- /dev/null +++ b/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; diff --git a/src/dynamicExports.js b/src/dynamicExports.js new file mode 100644 index 0000000..299cc99 --- /dev/null +++ b/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; + }; \ No newline at end of file diff --git a/src/examples/images/sample-logo.jpg b/src/examples/images/sample-logo.jpg new file mode 100644 index 0000000000000000000000000000000000000000..77b8adb54232b8ba9ecb49fe531bbb4a5538a708 GIT binary patch literal 23831 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 { + 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 ( +
+ {children} +
+ ); +}; + +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; diff --git a/src/react/Logo/Logo.stories.js b/src/react/Logo/Logo.stories.js new file mode 100644 index 0000000..0f856f7 --- /dev/null +++ b/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) =>
logo
; + +//πŸ‘‡ 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 ( +
+
+
+
+

small

+ + small logo + +
+
+
+
+

medium

+ + medium logo + +
+
+
+
+

large

+ + large logo + +
+
+
+
+ ); +}; + + diff --git a/src/react/Logo/index.js b/src/react/Logo/index.js new file mode 100644 index 0000000..550b5be --- /dev/null +++ b/src/react/Logo/index.js @@ -0,0 +1,26 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import Logo from './Logo'; + +const getWrapper = (iframeWindow, containerID) => { + console.log(`${containerID}`); + return iframeWindow.document.getElementById(`${containerID}`); +} + +const render = ({ + inputId, + iframeWindow = window, + logo, + size, +}) => { + const container = getWrapper(iframeWindow, inputId); + + ReactDOM.render( + + small logo + , + container + ); +}; + +export { render }; diff --git a/src/react/PersonFolio/PersonFolio.js b/src/react/PersonFolio/PersonFolio.js new file mode 100644 index 0000000..0315e69 --- /dev/null +++ b/src/react/PersonFolio/PersonFolio.js @@ -0,0 +1,46 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; +import settings from '../settings'; + +const PersonFolio = ({ children, className, age, ...other }) => { + const styleClass = cx( + `${settings.prefix}--personfolio`, + { + [`${settings.prefix}--personfolio--child`]: age < 18, + [`${settings.prefix}--personfolio--youngadult`]: age >= 18 && age < 25, + [`${settings.prefix}--personfolio--adult`]: age >= 25 && age < 65, + [`${settings.prefix}--personfolio--senior`]: age >= 65, + }, + className + ); + + const {firstname, surname} = other; + return ( +
+

First name: {firstname}

+

Surname: {surname}

+

Age: {age}

+ {children} +
+ ); + }; + + + PersonFolio.propTypes = { + /** + * Pass in the image that will be rendered within the Avatar + */ + children: PropTypes.node, + /** + * Additional styling + */ + className: PropTypes.string, + + }; + + PersonFolio.defaultProps = { + className: undefined, + }; + +export default PersonFolio; \ No newline at end of file diff --git a/src/react/PersonFolio/PersonFolio.stories.js b/src/react/PersonFolio/PersonFolio.stories.js new file mode 100644 index 0000000..5713c03 --- /dev/null +++ b/src/react/PersonFolio/PersonFolio.stories.js @@ -0,0 +1,74 @@ +import React from 'react'; +import PersonFolio from './PersonFolio'; + + +//πŸ‘‡ We create a β€œtemplate” of how args map to rendering +const Template = (args) =>
; + +//πŸ‘‡ Each story then reuses that template + +export const Child = Template.bind({}); + +Child.args = { +age: "12", +}; + +export const YoungAdult = Template.bind({}); + +YoungAdult.args = { +age: "20", +}; + +export const Adult = Template.bind({}); + +Adult.args = { +age: "32", +}; + +export const Senior = Template.bind({}); + +Senior.args = { +age: "71", +}; + +export const PersonFolioStory = () => { + return ( +
+
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+
+
+ ); +}; + + +export default { + title: 'Person Folio Story', + component: PersonFolio, +} \ No newline at end of file diff --git a/src/react/PersonFolio/index.js b/src/react/PersonFolio/index.js new file mode 100644 index 0000000..028f5e8 --- /dev/null +++ b/src/react/PersonFolio/index.js @@ -0,0 +1,25 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import PersonFolio from './PersonFolio'; + +const getWrapper = (iframeWindow, containerID) => { + return iframeWindow.document.getElementById(`${containerID}`); +} + +const render = ({ + inputId, + iframeWindow = window, + firstname, + surname, + age, +}) => { + const container = getWrapper(iframeWindow, inputId); + + ReactDOM.render( + , + container + ); +}; + +export { render }; + diff --git a/src/react/index.js b/src/react/index.js new file mode 100644 index 0000000..ce3b04c --- /dev/null +++ b/src/react/index.js @@ -0,0 +1,7 @@ +import 'regenerator-runtime/runtime'; +import * as Logo from './Logo'; +export { Logo }; +import * as PersonFolio from './PersonFolio'; +export { PersonFolio }; + + diff --git a/src/react/settings.js b/src/react/settings.js new file mode 100644 index 0000000..a3023e9 --- /dev/null +++ b/src/react/settings.js @@ -0,0 +1,16 @@ +/* + * 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. + */ + +const settings = { + prefix: 'bx', +}; + +module.exports = settings; diff --git a/src/scss/index.scss b/src/scss/index.scss new file mode 100644 index 0000000..a0a2520 --- /dev/null +++ b/src/scss/index.scss @@ -0,0 +1,127 @@ + +//------------------------- +// πŸš€ Variables +//------------------------- + +$feature-flags: ( + grid-columns-16: true, +); + +$css--font-face: true; +$css--helpers: true; +$css--body: true; +$css--reset: true; +$css--default-type: true; +$css--plex: true; +$css--use-experimental-grid: false; +$css--use-experimental-grid-fallback: false; + +//------------------------- +// πŸ”„ Resets +//------------------------- + +// rtl directives must be imported when wrapping an imported stylesheet so +// that they are positioned correctly in the compiled css +// https://github.com/MohammadYounes/rtlcss/issues/113#issuecomment-379907981 + +@import 'carbon-components/scss/globals/scss/css--reset'; + + +//------------------------- +// 🎨 Themes +//------------------------- + +@import 'carbon-components/scss/globals/scss/theme'; + +$carbon--theme: $carbon--theme--g10; +@include carbon--theme(); + +// overwrite box-sizing from css--reset to original Curam styling +* { + box-sizing: content-box; +} + +// Temporary until Carbon fix is applied for date picker opening event. +html.spm-modal--html { + overflow: visible; +} + +.spm-custom-component { + + // re-apply Carbon box-boxing after overwrite above + * { + box-sizing: border-box; + } + + //------------------------- + // 🌍 Globals + //------------------------- + @import 'carbon-components/scss/globals/scss/theme-tokens'; + @import 'carbon-components/scss/globals/scss/layout'; + @import 'carbon-components/scss/globals/scss/layer'; + @import 'carbon-components/scss/globals/scss/typography'; + @import 'carbon-components/scss/globals/scss/css--font-face'; + @import 'carbon-components/scss/globals/scss/css--helpers'; + @import 'carbon-components/scss/globals/scss/css--body'; + @import 'carbon-components/scss/globals/grid/grid'; + + //------------------------- + // πŸ• Components + //------------------------- + + @import 'carbon-components/scss/components/button/button'; + @import 'carbon-components/scss/components/copy-button/copy-button'; + @import 'carbon-components/scss/components/file-uploader/file-uploader'; + @import 'carbon-components/scss/components/checkbox/checkbox'; + @import 'carbon-components/scss/components/combo-box/combo-box'; + @import 'carbon-components/scss/components/radio-button/radio-button'; + @import 'carbon-components/scss/components/toggle/toggle'; + @import 'carbon-components/scss/components/search/search'; + @import 'carbon-components/scss/components/select/select'; + @import 'carbon-components/scss/components/text-input/text-input'; + @import 'carbon-components/scss/components/text-area/text-area'; + @import 'carbon-components/scss/components/number-input/number-input'; + @import 'carbon-components/scss/components/form/form'; + @import 'carbon-components/scss/components/link/link'; + @import 'carbon-components/scss/components/list-box/list-box'; + @import 'carbon-components/scss/components/list/list'; + @import 'carbon-components/scss/components/data-table/data-table'; + @import 'carbon-components/scss/components/structured-list/structured-list'; + @import 'carbon-components/scss/components/code-snippet/code-snippet'; + @import 'carbon-components/scss/components/overflow-menu/overflow-menu'; + @import 'carbon-components/scss/components/content-switcher/content-switcher'; + @import 'carbon-components/scss/components/date-picker/date-picker'; + @import 'carbon-components/scss/components/dropdown/dropdown'; + @import 'carbon-components/scss/components/loading/loading'; + @import 'carbon-components/scss/components/modal/modal'; + @import 'carbon-components/scss/components/multi-select/multi-select'; + @import 'carbon-components/scss/components/notification/inline-notification'; + @import 'carbon-components/scss/components/notification/toast-notification'; + @import 'carbon-components/scss/components/tooltip/tooltip'; + @import 'carbon-components/scss/components/tabs/tabs'; + @import 'carbon-components/scss/components/tag/tag'; + @import 'carbon-components/scss/components/pagination/pagination'; + @import 'carbon-components/scss/components/accordion/accordion'; + @import 'carbon-components/scss/components/progress-indicator/progress-indicator'; + @import 'carbon-components/scss/components/breadcrumb/breadcrumb'; + @import 'carbon-components/scss/components/toolbar/toolbar'; + @import 'carbon-components/scss/components/time-picker/time-picker'; + @import 'carbon-components/scss/components/slider/slider'; + @import 'carbon-components/scss/components/tile/tile'; + @import 'carbon-components/scss/components/skeleton/skeleton'; + @import 'carbon-components/scss/components/inline-loading/inline-loading'; + @import 'carbon-components/scss/components/pagination-nav/pagination-nav'; + + // type utilities + @import '@carbon/type/scss/classes'; + @include carbon--type-classes(); + + //------------------------- + // ✨ Addons + //------------------------- + + + @import './variables.scss'; + @import './logo.scss'; + @import './personfolio.scss'; +} diff --git a/src/scss/logo.scss b/src/scss/logo.scss new file mode 100644 index 0000000..c086664 --- /dev/null +++ b/src/scss/logo.scss @@ -0,0 +1,29 @@ +.#{$prefix}--logo { + box-shadow: inset 0 0 0 2px $carbon--white-0; + border-radius: $border-radius-round; + font-weight: 500; + overflow: hidden; + + &--small { + height: $width-logo-small; + width: $width-logo-small; + min-width: $width-logo-small; + } + + &--medium { + height: $width-logo-medium; + width: $width-logo-medium; + min-width: $width-logo-medium; + } + + &--large { + height: $width-logo-large; + width: $width-logo-large; + min-width: $width-logo-large; + } + + img { + width: 100%; + height: 100%; + } +} diff --git a/src/scss/personfolio.scss b/src/scss/personfolio.scss new file mode 100644 index 0000000..4d6eda3 --- /dev/null +++ b/src/scss/personfolio.scss @@ -0,0 +1,33 @@ +.#{$prefix}--personfolio { + + background-color: $ui-01; + color: $text-01; + border-radius: 6px; + border-width: 1px 1px 1px 1px; + border-style: solid !important; + padding: $spacing-05; + margin-top: $spacing-05; + + &--child { + border-color: $support-01; + + } + + &--youngadult { + + border-color: $support-02; + + } + + &--adult { + + border-color: $support-03; + } + + &--senior { + + border-color: $support-04; + } + + } + \ No newline at end of file diff --git a/src/scss/variables.scss b/src/scss/variables.scss new file mode 100644 index 0000000..37ef7f0 --- /dev/null +++ b/src/scss/variables.scss @@ -0,0 +1,5 @@ +$border-radius-round: 100vw !default; +$width-logo-large: 120px; // do we need small and medium too +$width-logo-medium: 80px; +$width-logo-small: 36px; +$border-base: 1px solid #f3f3f3; // this should be a variable \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..cf1237d --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,45 @@ +const path = require("path"); +const webpack = require("webpack"); + +module.exports = { + entry: ['./public-path.js', "./src/index.js"], + mode: "development", + module: { + rules: [ + { + test: /\.scss$/, + loaders: ['style-loader', 'css-loader', 'sass-loader'], + include: path.resolve(__dirname, './src/scss'), + }, + { + test: /\.(js|jsx)$/, + exclude: /(node_modules|bower_components)/, + loader: "babel-loader", + options: { presets: ["@babel/env"] } + }, + { + test: /\.css$/, + use: ["style-loader", "css-loader"] + }, + { + test: /\.(gif|png|jpe?g|svg)$/i, + loader: 'file-loader', + }, + ] + }, + resolve: { extensions: ["*", ".js", ".jsx"] }, + output: { + path: path.resolve(__dirname, "dist/"), + library: 'spmcustom', + libraryExport: 'default', + publicPath: "/dist/", + filename: "custom-carbon-addons-[name].bundle.js", + chunkFilename: 'custom-carbon-addons-[name].chunk.js', + }, + devServer: { + contentBase: path.join(__dirname, "public/"), + port: 3000, + publicPath: "http://localhost:3000/dist/", + hotOnly: false + } +}; \ No newline at end of file