@publicismedia-ds/ui-all NPM

Welcome!

This project is a collection of UI components tailored to Publics Media for use across multiple projects.

As you've already discovered there is a Canvas tab and a Docs tab.

Canvas tab shows you live interactive examples
Docs tab shows you how to install and use the component

Getting Started

Add individual components

To install an individual component view the component's docs and follow its instructions.

# Example of how to install the Button component
npm i @publicismedia-ds/ui-button

Add entire component library

If you know your project is going to use a lot of components then you may want to install the entire library instead of installing components individually.

# Example of installing all components
npm i @publicismedia-ds/ui-all

Setting up a new React project and adding a component

The instructions below explain how to create a NEW React project in detail. The project uses webpack to build and hot-reload and configures support for .scss compilation. All of the code below can be found in the example directory at the root of the repo.

Setup

mkdir mySite
cd mySite
npm init
npm install --save-dev react react-dom webpack webpack-cli webpack-dev-server @babel/core @babel/polyfill @babel/preset-react babel-loader css-loader sass-loader sass mini-css-extract-plugin

Install a component to use

npm install @publicismedia-ds/ui-button

Create a new file at the root called babel.config.js

module.exports = {
	presets: ["@babel/preset-react"],
	plugins: []
};

Create a new file at the root called webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const filename = "example";

//Webpack config
module.exports = {
	devServer: {
		contentBase: "www",
		stats: "errors-only",
		host: process.env.HOST, // Defaults to `localhost`
		port: process.env.PORT, // Defaults to 8080
		open: true, // Open the page in browser
		overlay: true //For errors
	},
	mode: "production",
	entry: ["@babel/polyfill", `./src/${filename}.jsx`],
	output: {
		path: path.join(__dirname, "www"),
		filename: `js/${filename}.min.js`
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				resolve: {
					extensions: [".js", ".jsx"]
				},
				exclude: /node_modules/,
				use: {
					loader: "babel-loader",
					options: {
						extends: "./babel.config.js"
					}
				}
			},
			{
				test: /\.(css|sass|scss)$/,
				loaders: [
					MiniCssExtractPlugin.loader,
					"css-loader",
					{
						loader: "sass-loader",
						options: {
							implementation: require("sass")
						}
					}
				]
			}
		]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: `css/${filename}.min.css`
		})
	]
};

Add the following scripts to package.json

"scripts": {
	"build": "webpack --mode production",
	"start": "webpack-dev-server --mode development"
}

HTML - www/index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Example</title>

		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />

		<link href="css/example.min.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<div id="example"><!-- POPULATED BY REACT JS --></div>

		<script src="js/example.min.js"></script>
	</body>
</html>

JS - src/example.jsx

import React from "react";
import ReactDOM from "react-dom";

import "./example.scss";

import Button from "@publicismedia-ds/ui-button";

class Example extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		return (
			<div>
				<h1>Example</h1>

				<div id="test">Some content</div>

				<Button>Submit</Button>
			</div>
		);
	}
}

let domContainer = document.querySelector("#example");
ReactDOM.render(<Example />, domContainer);

CSS - src/example.scss

@use "@publicismedia-ds/ui-theme" as theme;

//Only needed once
@include theme.font_importRoboto; //Import Roboto font from Google
@include theme.font_typography; //Base styles for various tags
@include theme.icon_importIcons; //Import icon font from hosted url
@include theme.color_paletteClasses; //Mixin adds color classes for color and background-color

html,
body {
	height: 100%;
}

#test {
	@include theme.font_robotoMedium;
	color: theme.$color_primary-gold;
}

Build

npm run build

Run

npm run start

@publicismedia-ds/ui-button @publicismedia-ds/ui-theme

0.0.1

5 years ago