.gitlab-ci.yml

@@ -11,12 +11,14 @@ before_script:
 build:
   stage: build
   script:
-    - mkdir public
-    - for f in dist/*.tgz; do tar -C ./public -xzf "$f"; done
+    - npm install
+    - npm run build
   after_script:
-    - echo "{\"job_token\":\"$CI_JOB_TOKEN\", \"name\":\"$SITE_NAME\" }" > request.json
+    - TAG=`git describe --tags $(git rev-list --tags --max-count=1)`
+    - echo "{\"name\":\"$SITE_NAME\", \"tag\":\"$TAG\" }" > request.json
     - "curl -H 'Content-Type: application/json' -X POST -d @request.json $WEBHOOK_URL"
   artifacts:
     expire_in: 30 min
     paths:
      - $ARTIFACTS_PATH
+

.nvmrc

-13.8
+14.5

Dockerfile

+FROM node:14.5-alpine as build
+
+RUN mkdir -p /home/node/ui-styleguide/node_modules
+
+WORKDIR /home/node/ui-styleguide
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+# ---
 
 FROM nginx:alpine
 
-# Remove default index file
-RUN rm /usr/share/nginx/html/*
-# Copy customized config
-COPY ./docker/nginx/default.conf /etc/nginx/conf.d/
-# Add all tarballs and unzip it
-ADD ./dist/* /usr/share/nginx/html/
+COPY --from=build /home/node/ui-styleguide/public /usr/share/nginx/html/

README.md

 # Pirati UI kit
 
-This repository holds UI styleguide for Czech Pirate Party websites.
+This repository holds UI styleguide for Czech Pirate Party websites. It's
+intention is to made a core framework to be used across all sites and build all
+UI using it. This will ensure better consistency a easier updates.
 
 It is built upon:
 
-- [Patternlab](https://patternlab.io/) is an awesome tool for developing design systems
+- [Patternlab](https://patternlab.io/) is a tool for developing design systems
 - [Tailwind CSS](https://tailwindcss.com/) is a brilliant utility-first CSS framework built on top of PostCSS
 
 ## Getting Started
@@ -17,23 +19,26 @@ These instructions are for getting the project running off a local development e
 
 ### System Requirements
 
-- [Node.js](https://nodejs.org) (v12.14.1 LTS or later recommended)
+- [Node.js](https://nodejs.org) (v14.5.x or later)
 
 ### Install and Run
 
-It's Javascript all the way down so once you have the the system requirements you can run the following commands:
+It's JavaScript all the way down so once you have the the system requirements
+you can run the following commands:
 
 ```
 npm i
 npm run develop
 ```
 
-The `npm` command will install project dependencies and the `npm run develop` command builds the project, sets up a local server for the Patternlab UI and watches relevant template files to rebuild on any changes.
-
+The `npm` command will install project dependencies and the `npm run develop`
+command builds the project, sets up a local server for the Patternlab UI and
+watches relevant template files to rebuild on any changes.
 
 ### Build
 
-The build command compiles the styleguide CSS and the Patternlab output but it doesn't create a server for the styleguide website. To build, run:
+The build command compiles the styleguide CSS and the Patternlab output but it
+doesn't create a server for the styleguide website. To build, run:
 
 ```
 npm run build
@@ -47,15 +52,22 @@ First build for production as described  previously:
 npm run build
 ```
 
-Now, make new version
+Now, make new version using [semver principle](https://semver.org/):
 
 ```
-./scripts/make-version.sh [VERSION_NUMBER]
+npm version [VERSION_NUMBER]
 ```
 
-This will create new version bundle under `dist` and also update `dist/latest.tgz` to be your new version.
+This will create a new git tag which will be recongnized by the build server and it will generate following:
+
+- update `latest` pointer
+- update minor version pointer like `1.x.x` in case this was a patch update or minor update
+- update patch version pointer like `1.3.x` in case this was the patch update
+- add `1.3.3` version if the tag name was `1.3.3`
+
+### Running locally with Docker
 
-Finally, create a docker build:
+Create a docker image:
 
 ```
 docker build -t pirati-ui .
@@ -66,3 +78,56 @@ You can then run the docker container like this:
 ```
 docker run -p 8001:80 pirati-ui:latest
 ```
+
+Your docker container will be available at [http://localhost:8001](http://localhost:8001).
+
+
+### Updating icons
+
+This styleguide features iconset too. Icons themselves are managed using
+[Icomoon](https://icomoon.io) web app. If you don't have your Icomoon account
+yet, start by creating one. Then, use `source/icons/selection.json` to load
+current project settings. Add/modify icons and finally download your new icon
+font. Delete contents of the `source/icons` and put all the content from your
+downloaded font. When finished, run `npm run update-iconset` that will update
+both the style and pattern file automatically.
+
+
+## Developing other websites with pirati-ui
+
+In order to integrate `pirati-ui` with other websites, you will need to include
+at least the CSS source that defines look and feel. Simply place the following
+code in your `<head>`:
+
+
+```html
+<link rel="stylesheet" href="[ROOT_URL]/css/styles.css">
+```
+
+If you want to use the JS enahancements as well, you will also need to:
+
+1. Include Vue.js:
+
+    ```html
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
+    ```
+
+2. Include `pirati-ui` JS bundle:
+
+    ```html
+    <script src="[ROOT_URL]/js/main.bundle.js"></script>
+    ```
+
+Make sure that Vue.js is included *before* the JS bundle. The best place for
+both of the JS sources is at the end of your HTML document.
+
+The `[ROOT_URL]` should point to the root address of your `pirati-ui` installation. This can either be
+one of official bundles hosted at `https://styleguide.pir-test.eu`:
+
+- https://styleguide.pir-test.eu/latest/
+- https://styleguide.pir-test.eu/1.x.x/
+- ... and so on
+
+Alternatively, you can run the `pirati-ui` locally. In this case, just run
+`npm run develop` and use whatever opens in the browser as your `ROOT_URL`.
+Usually, this will be `http://localhost:3000/`.

gulpfile.js

@@ -23,30 +23,6 @@ const postcss = require("gulp-postcss");
 const tailwindcss = require("tailwindcss");
 const rename = require("gulp-rename");
 const assets = require("postcss-assets");
-const postcssPurgecss = require("@fullhuman/postcss-purgecss")({
-  content: [
-    "./source/**/*.mustache",
-    "./source/**/*.json",
-    "./source/**/*.js",
-    "./source/**/*.vue",
-    "./public/**/*.html",
-  ],
-  defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
-  whitelistPatterns: [
-    /(sm|md|lg|xl)?(\\:)?w-\d\d?$/, // width
-    /(sm|md|lg|xl)?(\\:)?h-\d\d?$/, // height
-    /(sm|md|lg|xl)?(\\:)m.?-\d\d?$/, // margins
-    /(sm|md|lg|xl)?(\\:)p.?-\d\d?$/, // paddings
-    /max-w-*/, // maximum width
-    /grid-cols-\d\d?/, // grid columns
-    /col-span-\d\d?/, // grid spans
-    /row-span-\d\d?/, // grid spans
-    /grid-flow/, // grid flow
-    /(sm|md|lg|xl)(\\:)text-.*/,
-    // /text-*/,
-    /ico--*/, // icons
-  ],
-});
 
 
 function resolvePath(pathInput) {
@@ -222,30 +198,7 @@ function reloadJS(done) {
  * TAILWIND AND POSTCSS TASKS
  ******************************************************/
 
-gulp.task("tailwind-postcss:build", function (done) {
-  return gulp
-    .src("./source/css/style.pcss")
-    .pipe(
-      postcss([
-        require("postcss-import"),
-        tailwindcss("./tailwind.config.js"),
-        require("postcss-nested"),
-        // require('postcss-preset-env'),
-        require("postcss-custom-properties"),
-        require("autoprefixer"),
-        assets({
-          basePath: "source/",
-          loadPaths: ["images/"],
-        }),
-        require("postcss-clean"),
-      ])
-    )
-    .pipe(rename("styles.css"))
-    .pipe(gulp.dest(resolvePath(paths().public.css)))
-    .on("end", done);
-});
-
-gulp.task("tailwind-postcss:build:production", function (done) {
+gulp.task("tailwind-postcss", function (done) {
   return gulp
     .src("./source/css/style.pcss")
     .pipe(
@@ -261,7 +214,6 @@ gulp.task("tailwind-postcss:build:production", function (done) {
           loadPaths: ["images/"],
         }),
         require("postcss-clean"),
-        postcssPurgecss,
       ])
     )
     .pipe(rename("styles.css"))
@@ -296,7 +248,7 @@ function watch () {
   gulp.watch(
     postcssPaths,
     {useFsEvents: false},
-    gulp.series("tailwind-postcss:build", reloadCSS)
+    gulp.series("tailwind-postcss", reloadCSS)
   );
 
   console.log("Watching following source files:", jsPaths.concat(postcssPaths));
@@ -341,6 +293,7 @@ gulp.task(
         server: {
           baseDir: resolvePath(paths().public.root),
         },
+        cors: true,
         snippetOptions: {
           // Ignore all HTML files within the templates folder
           blacklist: ["/index.html", "/", "/?*"],
@@ -378,7 +331,8 @@ const buildJSBundle = (env) => {
       exclude: "node_modules/**/*",
       target: {
         chrome: 71,
-        firefox: 64
+        firefox: 64,
+        edge: 19
       },
     }),
     commonjs(),
@@ -425,13 +379,13 @@ gulp.task('rollup:build:production', buildJSBundle("production"));
 
 gulp.task(
   "site:build",
-  gulp.parallel("tailwind-postcss:build", "patternlab:build", "rollup:build")
+  gulp.parallel("tailwind-postcss", "patternlab:build", "rollup:build")
 );
 
 gulp.task(
   "site:build:production",
   // Build patternlab first to have all the necessary CSS classes ready for auto purge.
-  gulp.series("patternlab:build", gulp.parallel("tailwind-postcss:build:production", "rollup:build:production"))
+  gulp.series("patternlab:build", gulp.parallel("tailwind-postcss", "rollup:build:production"))
 );
 
 /******************************************************

package.json

 {
   "name": "edition-node-gulp",
   "description": "The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.",
-  "version": "1.3.4",
+  "version": "2.20.0",
   "dependencies": {
+    "@fullcalendar/core": "^6.1.5",
+    "@fullcalendar/daygrid": "^6.1.5",
+    "@fullcalendar/interaction": "^6.1.5",
+    "@fullcalendar/multimonth": "^6.1.6",
+    "@fullcalendar/vue": "^6.1.5",
     "browser-sync": "^2.26.7",
     "gulp": "^4.0.2",
     "kind-of": "^6.0.3",
@@ -12,7 +17,8 @@
     "styleguidekit-assets-default": "^3.0.0",
     "styleguidekit-mustache-default": "^3.0.0",
     "tailwindcss-elevation": "^0.3.4",
-    "vue": "^2.6.11",
+    "tippy.js": "^6.3.7",
+    "vue": "^2.7.14",
     "vue2-flip-countdown": "^0.10.0"
   },
   "resolutions": {
@@ -35,9 +41,10 @@
   "scripts": {
     "postinstall": "node scripts/postinstall.js",
     "gulp": "gulp -- ",
-    "develop": "gulp patternlab:serve",
-    "build": "gulp",
-    "make-version": "scripts/make-version.sh"
+    "develop": "NODE_ENV=development gulp patternlab:serve",
+    "build": "NODE_ENV=production gulp",
+    "make-version": "scripts/make-version.sh",
+    "update-iconset": "scripts/update-iconset.js"
   },
   "license": "MIT",
   "engines": {
@@ -52,10 +59,11 @@
     "@rollup/stream": "^1.0.0",
     "acorn": "^6.4.1",
     "autoprefixer": "^9.5.1",
+    "chart.js": "^4.2.0",
     "color": "^3.1.2",
     "gulp-add-src": "^1.0.0",
     "gulp-concat": "^2.6.1",
-    "gulp-postcss": "^8.0.0",
+    "gulp-postcss": "^9.0.0",
     "gulp-rename": "^2.0.0",
     "lodash": "^4.17.15",
     "postcss-assets": "^5.0.0",
@@ -68,10 +76,10 @@
     "rollup-plugin-terser": "^6.1.0",
     "rollup-plugin-vue": "^5.1.9",
     "tailwind-css-variables": "^2.0.3",
-    "tailwindcss": "^1.4.6",
-    "tailwindcss-typography": "^3.1.0",
+    "tailwindcss": "^3.3.3",
+    "@tailwindcss/typography": "^0.5.10",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.7.14"
   }
 }

scripts/make-version.sh

-#!/bin/bash
-
-VERSION=$1
-
-if [ -z "$VERSION" ]
-then
-      echo "Please specify a new version in argument"
-      exit 1
-fi
-
-CURRENT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
-PROJECT_DIR="$CURRENT_DIR/.."
-DIST_DIR="$PROJECT_DIR/dist"
-
-mkdir -p $DIST_DIR
-
-rm -f "$DIST_DIR/latest.tgz" &&
-  rm -rf "$DIST_DIR/latest" &&
-  cp -rf "$PROJECT_DIR/public" "$DIST_DIR/latest"
-  tar -czf "$DIST_DIR/latest.tgz" -C "$DIST_DIR" latest &&
-  mv "$DIST_DIR/latest" "$DIST_DIR/$VERSION"
-  tar -czf "$DIST_DIR/$VERSION.tgz" -C "$DIST_DIR" $VERSION &&
-  rm -rf "$DIST_DIR/$VERSION" &&
-  echo "New version ${VERSION} is ready as $DIST_DIR/$VERSION.tgz, please add it to repository."

scripts/update-iconset.js

+#!/usr/bin/env node
+
+const crypto = require('crypto');
+const fs = require("fs/promises");
+const path = require("path");
+
+const selection = require("../source/icons/selection.json");
+
+const buildBaseRules = (hash) => `
+@font-face {
+  font-family: 'pirati-ui';
+  src:  url('../fonts/pirati-ui.eot?${hash}');
+  src:  url('../fonts/pirati-ui.eot?${hash}#iefix') format('embedded-opentype'),
+    url('../fonts/pirati-ui.ttf?${hash}') format('truetype'),
+    url('../fonts/pirati-ui.woff?${hash}') format('woff'),
+    url('../fonts/pirati-ui.svg?${hash}#pirati-ui') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="ico--"], [class*=" ico--"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'pirati-ui' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+`;
+
+const buildIconRules = (icons) => {
+  return icons.map(icon => `.${icon.class}:before { content: "${icon.content}"; }`).join("\n");
+}
+
+const getHash = (icons) => {
+  return crypto.createHash('md5').update(icons, 'utf8').digest('hex');
+}
+
+const buildRuleset = (icons) => {
+  const iconRules = buildIconRules(icons);
+  const hash = getHash(iconRules);
+  const baseRules = buildBaseRules(hash);
+  return [baseRules, iconRules].join("\n");
+}
+
+const buildPattern = (icons) => {
+  const body = icons.map(icon => `
+<div class="card">
+  <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
+    <i class="${icon.class}"></i>
+  </div>
+  <div class="card__body p-2 text-2xs">
+    <code>.${icon.class}</code>
+  </div>
+</div>`).join("\n");
+  return `<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 xl:grid-cols-16 gap-2 items-center">${body}</div>`;
+}
+
+async function writeFile(path, content) {
+  let filehandle;
+
+  try {
+    filehandle = await fs.open(path, "w");
+    filehandle.write(content);
+  } finally {
+    if (filehandle !== undefined)
+      await filehandle.close();
+  }
+}
+
+
+const prefix = selection.preferences.fontPref.prefix;
+const icons = selection.icons.map(icon => {
+  const content = `${'\\'}${icon.properties.code.toString(16)}`;
+  return icon.properties.name.split(", ").map(iconName => ({
+    class: `${prefix}${iconName}`,
+    content
+  }));
+}).flat();
+
+// Write PCSS
+writeFile(path.join(path.dirname(__filename), "..", "source", "css", "atoms", "icons.pcss"), buildRuleset(icons));
+
+// Write Pattern Lab pattern
+writeFile(path.join(path.dirname(__filename), "..", "source", "_patterns", "00-atoms", "02-icons", "icons.mustache"), buildPattern(icons));