Initial commit

Author: zdhr

.gitignore

@@ -0,0 +1,2 @@
+js/node_modules
+.sass-cache

README.md

@@ -0,0 +1,24 @@
+# Mergado UI Library
+
+## Styles
+
+Stylesheet is available as both SASS source and compiled/minified CSS.
+We included basics like css reset, typography, icons and of course styles for individual UI components.
+
+## Images / Icons
+
+All (two) images needed are inlined into CSS. Only icons are as extra files.
+
+We use technique called SVG sprite. That means all icons are in a single svg file. We included this file, source svg files for each icons and script which will generate sprite file from source icons, it's in `bin` folder.
+
+## Javascript
+
+Checkboxes and radiobuttons are notoriously hard to style.
+We use some JS magic, to help us with that and decided to share it with you.
+Just put `script` tag pointing to this JS script this in your HTML and you're good to go.
+
+Unless you're using React or similar framework. In that case, you are better of writing your own component in your framework style.
+
+## Docs
+
+[Mergado Docs](https://mergado.github.io/docs/design/intro.html)

bin/crateSvgSprite.php

@@ -0,0 +1,82 @@
+#!/usr/bin/env php
+<?php
+
+/**
+ * For icons, we're using SVG sprite technique. This big svg would be PITA to
+ * maintain, so source icons are in single files. This script takes all .svg
+ * files from given folder (recursively) and combines them into that svg sprite.
+ */
+
+// Some setup.
+$inputPath = __DIR__ . '/../icons';
+$outputPath = realpath(__DIR__ . '/../build') . '/muil.icons.svg';
+
+
+/**
+ * Read directory recursively and return it's content in array filename => file content.
+ *
+ * @param string Icon directory location.
+ * @param string Icon prefix (directory name) - used when called recursively.
+ * @return array<iconName, svgCode>
+ */
+function readIcons(string $path, string $prefix = ''): array {
+	$icons = [];
+
+	foreach (new FilesystemIterator($path) as $fileInfo) {
+		if ($fileInfo->getExtension() === 'svg') {
+			$id = $fileInfo->getBasename('.svg');
+			$id = $prefix ? $prefix . '-' . $id : $id;
+			$icons[$id] = file_get_contents($fileInfo->getPathname());
+		} elseif ($fileInfo->isDir()) {
+			$dirName = $fileInfo->getFilename();
+			$icons = array_merge($icons, readIcons($fileInfo->getRealPath(), $dirName));
+		}
+	}
+
+	return $icons;
+}
+
+/**
+ * Convert SVG file into SVG symbol tag.
+ *
+ * @param string Icon SVG source.
+ * @param string Icon name
+ * @return string
+ */
+function fileToSymbol(string $svg, string $id): string {
+	$svg = str_replace('  ', null, $svg);
+	$svg = str_replace("\n", null, $svg);
+	$svg = str_replace(' xmlns="http://www.w3.org/2000/svg"', null, $svg);
+	$svg = str_replace('<svg ', sprintf('<symbol id="%s" ', $id), $svg);
+	$svg = str_replace('</svg>', '</symbol>', $svg);
+
+	// Unfuck firefox.
+	$svg = preg_replace('/ width="[0-9]+"/', null,  $svg);
+	$svg = preg_replace('/ height="[0-9]+"/', null,  $svg);
+
+	return trim($svg) . PHP_EOL;
+}
+
+
+// Read symbols.
+$symbols = [];
+$icons = readIcons($inputPath);
+$count = count($icons);
+echo "Processing $count files \n";
+foreach ($icons as $id => $svg) {
+	$symbols[$id] = fileToSymbol($svg, $id);
+	echo ".";
+}
+
+ksort($symbols);
+
+echo "\n";
+echo "Exporting sprite: $outputPath";
+
+// Write sprite.
+file_put_contents($outputPath, sprintf(
+	'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">%s</svg>%s',
+	implode('', $symbols), PHP_EOL
+));
+echo "\n";
+