Add ModuleGrid Component

Author: OlehDutchenko

rollup.config.js

@@ -1,45 +1,72 @@
+// -----------------------------------------------------------------------------
+// Deps
+// -----------------------------------------------------------------------------
+
 import typescript from 'rollup-plugin-typescript2';
 import commonjs from 'rollup-plugin-commonjs';
 import external from 'rollup-plugin-peer-deps-external';
 import resolve from 'rollup-plugin-node-resolve';
 
 import pkg from './package.json';
 
-export default {
-	input: 'src/index.tsx',
-	output: [
-		{
-			file: pkg.main,
-			format: 'cjs',
-			exports: 'named',
-			sourcemap: true
-		},
-		{
-			file: pkg.module,
-			format: 'es',
-			exports: 'named',
-			sourcemap: true
-		}
-	],
-	plugins: [
-		external(),
-		resolve(),
-		typescript({
-			rollupCommonJSResolveHack: true,
-			exclude: '**/__tests__/**',
-			clean: true
-		}),
-		commonjs({
-			include: ['node_modules/**'],
-			namedExports: {
-				'node_modules/react/react.js': [
-					'Children',
-					'Component',
-					'PropTypes',
-					'createElement'
-				],
-				'node_modules/react-dom/index.js': ['render']
+// -----------------------------------------------------------------------------
+// Files
+// -----------------------------------------------------------------------------
+
+const files = [
+	{
+		input: 'src/ModuleGrid/index.tsx',
+		output: 'components/ModuleGrid/index.js',
+		outputES: 'components/ModuleGrid/index.es.js'
+	},
+	{
+		input: 'src/index.tsx',
+		output: pkg.main,
+		outputES: pkg.module
+	}
+];
+
+// -----------------------------------------------------------------------------
+// Config
+// -----------------------------------------------------------------------------
+
+export default files.map((file) => {
+	return {
+		input: file.input,
+		output: [
+			{
+				file: file.output,
+				format: 'cjs',
+				exports: 'named',
+				sourcemap: true
+			},
+			{
+				file: file.outputES,
+				format: 'es',
+				exports: 'named',
+				sourcemap: true
 			}
-		})
-	]
-};
+		],
+		plugins: [
+			external(),
+			resolve(),
+			typescript({
+				rollupCommonJSResolveHack: true,
+				exclude: '**/__tests__/**',
+				clean: true
+			}),
+			commonjs({
+				include: ['node_modules/**'],
+				namedExports: {
+					'node_modules/react/react.js': [
+						'Children',
+						'Component',
+						'PropTypes',
+						'createElement'
+					],
+					'node_modules/react-dom/index.js': ['render']
+				}
+			})
+		]
+	}
+});

src/ModuleGrid/index.tsx

@@ -0,0 +1,80 @@
+// -----------------------------------------------------------------------------
+// Deps
+// -----------------------------------------------------------------------------
+
+import * as React from 'react';
+
+// -----------------------------------------------------------------------------
+// Types
+// -----------------------------------------------------------------------------
+
+export type ModuleGridCol = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export interface ModuleGridProps {
+	cols?: ModuleGridCol;
+	xxsCols?: ModuleGridCol;
+	xsCols?: ModuleGridCol;
+	smCols?: ModuleGridCol;
+	mdCols?: ModuleGridCol;
+	dfCols?: ModuleGridCol;
+	lgCols?: ModuleGridCol;
+	xlCols?: ModuleGridCol;
+	xxlCols?: ModuleGridCol;
+	hdCols?: ModuleGridCol;
+}
+
+// -----------------------------------------------------------------------------
+// ModuleGrid Component
+// -----------------------------------------------------------------------------
+
+const colClassName = (col?: ModuleGridCol, mq: string = ''): string | boolean => {
+	return typeof col === 'number' || col === 'auto'
+		? `_${mq}module-grid--${col}`
+		: false;
+};
+
+export const ModuleGrid: React.FC<ModuleGridProps> = ({
+	cols,
+	xxsCols,
+	xsCols,
+	children
+}) => {
+	const classes = [
+		'_module-grid',
+		colClassName(cols),
+		colClassName(xxsCols, 'xxs:'),
+		colClassName(xsCols, 'xs:')
+	];
+
+	return <div className={classes.filter(Boolean).join(' ')}>{children}</div>;
+};
+
+// -----------------------------------------------------------------------------
+// ModuleCell Component
+// -----------------------------------------------------------------------------
+
+export type ModuleCellSpan = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export type ModuleCellProps = {
+	span?: ModuleCellSpan;
+	xxsSpan?: ModuleCellSpan;
+	xsSpan?: ModuleCellSpan;
+	smSpan?: ModuleCellSpan;
+	mdSpan?: ModuleCellSpan;
+	dfSpan?: ModuleCellSpan;
+	lgSpan?: ModuleCellSpan;
+	xlSpan?: ModuleCellSpan;
+	xxlSpan?: ModuleCellSpan;
+	hdSpan?: ModuleCellSpan;
+};
+
+const spanClassName = (span?: ModuleCellSpan, mq: string = ''): string | boolean => {
+	return typeof span === 'number' || span === 'auto'
+		? `_${mq}module-cell--${span}`
+		: false;
+};
+
+export const ModuleCell: React.FC<ModuleCellProps> = ({ span, children }) => {
+	const classes = ['_module-cell', spanClassName(span)];
+	return <div className={classes.join(' ')}>{children}</div>;
+};

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "outDir": "build",
+    "outDir": "components",
     "module": "esnext",
     "target": "es5",
     "lib": ["es6", "dom", "es2016", "es2017"],