@kubex/zinc 0.0.2 → 1.0.0

package/scripts/generator/generator.js

@@ -0,0 +1,102 @@
+import _ from 'lodash';
+import {toSassVariable} from './resolver.js';
+import fs from 'fs';
+
+const srcDirectory = 'scss/variables';
+
+const preamble = `// ******************************************************
+// DO NOT MODIFY THIS FILE. THIS FILE WAS GENERATED.
+// Inspired by Tailwind CSS: https://tailwindcss.com/
+// ******************************************************
+`;
+
+const colorFunction = `@function color($color, $weight: 500) {
+  @if not variable-exists(#{color}) {
+    @error "#{color} does not exist";
+  }
+  @else if type-of($color) != 'map' {
+    @return $color;
+  }
+  @else if index($color, $weight) != null {
+    @error "#{weight} does not exist in #{color}";
+  }
+  @else {
+    @return map-get($color, $weight);
+  }
+}
+`;
+
+function toKebabCase(str) {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase();
+}
+
+function generateFunction(name, data) {
+  const defaultVal = () => {
+    if(Object.keys(data).includes('default')) {
+      return ': default';
+    }
+    else if(Object.keys(data).includes('normal')) {
+      return ': normal';
+    }
+    return '';
+  };
+
+  return `@function ${name}($value${defaultVal()}) {
+    @if index($${name}, $value) != null {
+      @error "${data} already exists in $${name}";
+    }
+    @return map-get($${name}, $value);
+  }`;
+}
+
+function generateColors(data) {
+  let result = colorFunction;
+
+  Object.entries(data).forEach(([k, v]) => {
+    result += `${toSassVariable(k, v)}\n\n`;
+  });
+
+  return result;
+}
+
+function generateCategory(category, data) {
+  if(category === 'colors') {
+    return generateColors(data);
+  }
+
+  let result = '';
+  Object.entries(data).forEach(([name, value]) => {
+    // TODO: should we handle colors?
+    if(!name.toLowerCase().includes('color')) {
+      const fmtName = toKebabCase(name);
+      result += generateFunction(fmtName, value);
+      result += toSassVariable(fmtName, value);
+      result += '\n\n';
+    }
+  });
+
+  return result;
+}
+
+export function generateIndexFile(categories) {
+  let indexFileData = '';
+  Object.keys(categories).forEach(category => {
+    indexFileData += `@import '${category}';\n`;
+  });
+  generateFile('index', indexFileData);
+}
+
+export function generateFile(category, data) {
+  const fileName = `${srcDirectory}/_${category}.scss`;
+  let writeData = preamble;
+  writeData += _.isObject(data) ? generateCategory(category, data) : data;
+  fs.writeFile(fileName, writeData, (err) => {
+    if(err) {
+      throw err;
+    }
+    console.log(`* ${fileName}`);
+  });
+}

package/scripts/generator/index.js

@@ -0,0 +1,17 @@
+import _ from 'lodash';
+import {preprocess} from './preprocess.js';
+import {generateFile, generateIndexFile} from './generator.js';
+import theme from './tailwind.config.js';
+
+let processedTheme = preprocess(theme);
+
+const categories = {
+  colors: ['colors']
+}
+
+Object.entries(categories).forEach(([category, properties]) => {
+  const data = _.pick(processedTheme, properties);
+  generateFile(category, data);
+});
+
+generateIndexFile(categories);

package/scripts/generator/preprocess.js

@@ -0,0 +1,20 @@
+import _ from 'lodash';
+
+const keysToOmit = [
+  'background',
+  'fill',
+  'container',
+  'cursor',
+  'inset',
+  'listStyle',
+  'objectPosition',
+  'transform'
+];
+
+const subKeysToOmit = ['stroke', 'colors.current', 'colors.transparent'];
+
+export function preprocess(theme) {
+  theme = _.omitBy(theme, (k, v) => keysToOmit.some(str => v.includes(str)));
+  theme = _.omit(theme, subKeysToOmit);
+  return theme;
+}

package/scripts/generator/resolver.js

@@ -0,0 +1,86 @@
+import _ from 'lodash';
+
+function resolveFunction(name, value) {
+  // first convert the function to a string and et everything after the =>
+  const fnString = value.toString();
+  let objString = fnString.substring(fnString.indexOf('=>') + 3).trim();
+
+  // filter out the trailing parens/curly braces
+  if(objString[0] === '{' && objString[objString.length - 1] === '}') {
+    objString = objString.substring(1, objString.length - 1);
+    if(objString[0] === '{') {
+      objString = objString.substring(1);
+    }
+
+    if(objString[objString.length - 1] === '}') {
+      objString = objString.substring(0, objString.length - 1);
+    }
+
+    if(objString[objString.length - 1] === ',') {
+      objString = objString.substring(0, objString.length - 1);
+    }
+  }
+
+  // now we convert this string into an array of key,value pairs
+  objString = objString
+    .replace(/\s+/g, '')
+    .replace(/\.\.\..*'\),?/gm, '')
+    .split(/,(?=(?:(?:[^']*'){2})*[^']*$)/)
+    .filter((s) => !_.isEmpty(s));
+
+  let objectToProcess = {};
+
+  // No go through the list of strings and convert them into and object one by one.
+  objString.forEach(s => {
+    let [k, v] = s.split(':');
+    if(k && v) {
+      const removeQuotes = /["']/g;
+      k = k.replace(removeQuotes, '');
+      v = v.replace(removeQuotes, '');
+      objectToProcess = {
+        ...objectToProcess,
+        [k]: v
+      };
+    }
+  });
+}
+
+function resolveObject(name, obj) {
+  let res = `$${name}: (\n`;
+
+  console.log(obj);
+
+  Object.entries(obj).forEach(([k, v], idx) => {
+
+    // handle nested objects
+    if(_.isObject(v)) {
+      res += `${resolveObject(k, v)}\n`;
+      return;
+    }
+
+    const val = v.includes(', ') || _.isArray(v) ? `(${v})` : v;
+    const key = k.includes('/') ? `"${k}"` : k;
+    res += `  ${key}: ${val},\n\n`;
+  });
+
+  return res + ');';
+}
+
+function resolveArray(name, lst) {
+  return `$${name}: (${lst.join(', ')});`;
+}
+
+export function toSassVariable(name, value) {
+  if(_.isFunction(value)) {
+    return resolveFunction(name, value);
+  }
+  else if(_.isObject(value)) {
+    return resolveObject(name, value);
+  }
+  else if(_.isArray(value)) {
+    return resolveArray(name, value);
+  }
+  else {
+    return `$${name}: ${value};`;
+  }
+}

package/scripts/generator/tailwind.config.js

@@ -0,0 +1,14 @@
+import resolveConfig from 'tailwindcss/resolveConfig.js';
+
+const defaults = {
+  theme: {
+    colors: {
+      primary: '#ff0000',
+    }
+  }
+};
+
+const config = resolveConfig(defaults);
+console.log(config.theme);
+
+export default config.theme;

package/scripts/make-metadata.js

@@ -0,0 +1,10 @@
+//
+// This script runs the Custom Elements Manifest analyzer to generate custom-elements.json
+//
+
+import {execSync} from 'child_process';
+import commandLineArgs from 'command-line-args';
+
+const {outdir} = commandLineArgs({name: 'outdir', type: String});
+
+execSync(`cem analyze --litelement --outdir "${outdir}"`, {stdio: 'inherit'});

package/scripts/make-themes.js

@@ -0,0 +1,27 @@
+//
+// This script bakes and copies themes, then generates a corresponding Lit stylesheet in dist/themes
+//
+import commandLineArgs from 'command-line-args';
+import fs from 'fs';
+import path from 'path';
+import * as sass from 'sass';
+import postCSS from 'postcss';
+import autoprefixer from 'autoprefixer';
+import minify from 'postcss-minify';
+
+const postCss = postCSS([
+  autoprefixer(),
+  minify()
+]);
+
+const {outdir} = commandLineArgs({name: 'outdir', type: String});
+const file = './scss/boot.scss';
+
+let source = sass.compile(file, {
+  style: 'compressed'
+}).css;
+
+const css = postCss.process(source).css;
+
+const cssFile = path.join(outdir, 'zn.min.css');
+fs.writeFileSync(cssFile, css, 'utf8');

package/scripts/plop/plopfile.js

@@ -0,0 +1,63 @@
+export default function (plop)
+{
+  plop.setHelper('tagWithoutPrefix', tag => tag.replace(/^zn-/, ''));
+
+  plop.setHelper('tagToTitle', tag =>
+  {
+    const withoutPrefix = plop.getHelper('tagWithoutPrefix');
+    const titleCase = plop.getHelper('titleCase');
+    return titleCase(withoutPrefix(tag).replace(/-/g, ' '));
+  });
+
+  plop.setGenerator('component', {
+    description: 'Generate a new Component',
+    prompts: [{
+        type: 'input',
+        name: 'tag',
+        message: 'Tag Name (e.g. zn-button)',
+        validate: value => {
+          // start with zn- and only contain lowercase letters, dashes and pluses
+          if(!/^zn-[a-z-+]+/.test(value))
+          {
+           return false;
+          }
+
+          // No double dashes or trailing dash
+          return !(value.includes('--') || value.endsWith('-'));
+        }
+      }],
+    actions: [
+      {
+        type: 'add',
+        path: '../../src/components/{{tagWithoutPrefix tag}}/index.ts',
+        templateFile: 'templates/define.hbs'
+      },
+      {
+        type: 'add',
+        path: '../../src/components/{{tagWithoutPrefix tag}}/{{tagWithoutPrefix tag}}.scss',
+        templateFile: 'templates/style.hbs'
+      },
+      {
+        type: 'add',
+        path: '../../src/components/{{tagWithoutPrefix tag}}/{{tagWithoutPrefix tag}}.component.ts',
+        templateFile: 'templates/component.hbs'
+      },
+      {
+        type: 'add',
+        path: '../../src/components/{{tagWithoutPrefix tag}}/{{tagWithoutPrefix tag}}.test.ts',
+        templateFile: 'templates/test.hbs'
+      },
+      {
+        type: 'add',
+        path: '../../docs/pages/components/{{tagWithoutPrefix tag}}.md',
+        templateFile: 'templates/docs.hbs'
+      },
+      {
+        type: 'modify',
+        path: '../../src/zinc.ts',
+        pattern: /\/\* plop:component \*\//,
+        template: `export { default as {{tagToTitle tag}} } from './components/{{tagWithoutPrefix tag}}';\n/* plop:component */`
+      }
+    ]
+  });
+}

package/scripts/plop/templates/component.hbs

@@ -0,0 +1,43 @@
+import {property} from 'lit/decorators.js';
+import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {LocalizeController} from '../../utilities/localize';
+import {watch} from '../../internal/watch';
+import ZincElement from '../../internal/zinc-element';
+
+import styles from './{{ tagWithoutPrefix tag }}.scss';
+
+/**
+* @summary Short summary of the component's intended use.
+* @documentation https://zinc.style/components/{{ tagWithoutPrefix tag }}
+* @status experimental
+* @since 1.0
+*
+* @dependency zn-example
+*
+* @event zn-event-name - Emitted as an example.
+*
+* @slot - The default slot.
+* @slot example - An example slot.
+*
+* @csspart base - The component's base wrapper.
+*
+* @cssproperty --example - An example CSS custom property.
+*/
+export default class {{ properCase tag }} extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+
+  // @ts-expect-error unused property
+  private readonly localize = new LocalizeController(this);
+
+  /** An example attribute. */
+  @property() attr = 'example';
+
+  @watch('example')
+  handleExampleChange() {
+    // do something
+  }
+
+  render() {
+    return html` <slot></slot> `;
+  }
+}

package/scripts/plop/templates/define.hbs

@@ -0,0 +1,12 @@
+import {{ properCase tag }} from './{{ tagWithoutPrefix tag }}.component';
+
+export * from './{{ tagWithoutPrefix tag }}.component';
+export default {{ properCase tag }};
+
+{{ properCase tag }}.define('{{ tag }}');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    '{{ tag }}': {{ properCase tag }};
+  }
+}

package/scripts/plop/templates/docs.hbs

@@ -0,0 +1,20 @@
+---
+meta:
+  title: {{ tagToTitle tag }}
+  description:
+layout: component
+---
+
+```html:preview
+<{{ tag }}></{{ tag }}>
+```
+
+## Examples
+
+### First Example
+
+TODO
+
+### Second Example
+
+TODO

package/scripts/plop/templates/style.hbs

@@ -0,0 +1,5 @@
+@use "../../wc";
+
+:host {
+  display: block;
+}

package/scripts/plop/templates/test.hbs

@@ -0,0 +1,10 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<{{ tag }}>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <{{ tag }}></{{ tag }}> `);
+
+    expect(el).to.exist;
+  });
+});

package/scss/_global-components.scss

@@ -0,0 +1,4 @@
+@use "../src/components/Chip/chip";
+@use "../src/components/Sp/Sp";
+@use "../src/components/Table/Table";
+@use "../src/components/Tooltip/tooltip";

package/scss/_global-spacing.scss

@@ -0,0 +1,96 @@
+@use "mixins";
+
+.zn-gap {
+  @include mixins.gap();
+  @include mixins.padding();
+
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.zn-gap-in {
+  @include mixins.gap();
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.zn-gap-in-sm {
+  @include mixins.gap-sm();
+}
+
+.zn-gap-md {
+  gap: mixins.spacing(md);
+}
+
+.zn-gap-inner {
+  @include mixins.gap();
+}
+
+.zn-gap-ism {
+  @include mixins.gap();
+  --zn-gap: #{mixins.spacing(sm)};
+}
+
+
+.zn-gap-ixs {
+  @include mixins.gap();
+  --zn-gap: #{mixins.spacing(xs)};
+}
+
+.zn-max-hide {
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.zn-hide-empty:empty {
+  display: none;
+}
+
+.zn-nopoint {
+  pointer-events: none;
+}
+
+
+.form-spacing {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--zn-spacing-medium) var(--zn-spacing-small);
+
+  @include mixins.media-query(md) {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+.form-spacing > * {
+  grid-column: span 6 / span 6;
+}
+
+.form-spacing > *[span="1"] {
+  @include mixins.media-query(md) {
+    grid-column: span 1 / span 1;
+  }
+}
+
+.form-spacing > *[span="2"] {
+  @include mixins.media-query(md) {
+    grid-column: span 2 / span 2;
+  }
+}
+
+.form-spacing > *[span="3"] {
+  @include mixins.media-query(md) {
+    grid-column: span 3 / span 3;
+  }
+}
+
+.form-spacing > *[span="4"] {
+  @include mixins.media-query(md) {
+    grid-column: span 4 / span 4;
+  }
+}
+
+.form-spacing > *[span="5"] {
+  @include mixins.media-query(md) {
+    grid-column: span 5 / span 5;
+  }
+}