cubed-cli 0.1.0 → 0.1.2

package/README.md

@@ -7,5 +7,5 @@ Cubed is a CLI tool that scaffolds systematic styling with the Cube CSS methodol
 # useage
 
 ```shell
-npx cubed create
+npx cubed-cli create
 ```

package/dist/commands/create.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -14,24 +47,62 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.create = void 0;
 const commander_1 = require("commander");
-const prompts_1 = __importDefault(require("@clack/prompts"));
+const p = __importStar(require("@clack/prompts"));
+const common_1 = require("../utils/common");
+const fs = __importStar(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
 exports.create = new commander_1.Command("create")
     .description("scaffolds a new project")
-    .action(() => __awaiter(void 0, void 0, void 0, function* () {
-    const { directory } = yield prompts_1.default.group({
-        directory: () => {
-            const defaultPath = "./";
-            return prompts_1.default.text({
-                message: "Where would you like to place this project?",
-                placeholder: `(hit Enter to use '${defaultPath}')`,
-                defaultValue: defaultPath,
-            });
-        },
-    }, {
-        onCancel: () => {
-            prompts_1.default.cancel("operation cancelled");
-            process.exit(0);
-        },
+    .action(() => {
+    (0, common_1.runCommand)(() => __awaiter(void 0, void 0, void 0, function* () {
+        const { directory } = yield createProject();
+        // In the future, here is where additional steps can be introduced.
+        // TODO: detect if the base dirs are already created
+        // TODO: use a spinner and highlighting to indicate what is happening
+        // TODO: how to cleanup files if something fails mid process
+        const templatesPath = node_path_1.default.join(__dirname, "../templates");
+        copyTemplateFiles(templatesPath, directory);
+    }));
+});
+function makeDirs() {
+    return __awaiter(this, void 0, void 0, function* () {
+        yield p.text({ message: "making dirs" });
     });
-    console.log(`Destination directory: ${directory}`);
-}));
+}
+// recursively generate base directories and files
+function copyTemplateFiles(sourcePath, destPath) {
+    const entries = fs.readdirSync(sourcePath);
+    entries.forEach((entry) => {
+        const sourceEntryPath = node_path_1.default.join(sourcePath, entry);
+        const relativeEntryPath = node_path_1.default.relative(node_path_1.default.join(__dirname, "../templates"), sourceEntryPath);
+        if ((0, common_1.isDir)(sourceEntryPath)) {
+            // Recursively process subdirectories
+            copyTemplateFiles(sourceEntryPath, destPath);
+        }
+        else {
+            // Copy file
+            const content = (0, common_1.readFile)(node_path_1.default.join(__dirname, "../templates"), relativeEntryPath);
+            (0, common_1.writeFile)(destPath, relativeEntryPath, content);
+        }
+    });
+}
+function createProject() {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { directory } = yield p.group({
+            directory: () => {
+                const defaultPath = "./styles";
+                return p.text({
+                    message: "Where would you like to generate the styles?",
+                    placeholder: `(hit Enter to use '${defaultPath}')`,
+                    defaultValue: defaultPath,
+                });
+            },
+        }, {
+            onCancel: () => {
+                p.cancel("operation cancelled");
+                process.exit(0);
+            },
+        });
+        return { directory };
+    });
+}

package/dist/index.js

@@ -1,7 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const package_json_1 = __importDefault(require("../package.json"));
 const commander_1 = require("commander");
 const create_1 = require("./commands/create");
-commander_1.program.name("cubed").version("0.1.0");
+// adds a gap of spacing between the executing command and the output
+console.log();
+commander_1.program.name("cubed-cli").version(package_json_1.default.version);
 commander_1.program.addCommand(create_1.create);
 commander_1.program.parse();

package/dist/scripts/copy-templates.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs = __importStar(require("fs"));
+fs.cpSync('src/templates', 'dist/templates', { recursive: true });
+console.log('✓ Templates copied');

package/dist/templates/global/global-styles.css

@@ -0,0 +1,373 @@
+/* 
+  Global styles 
+
+  Low-specificity, global styles that apply to the whole 
+  project: https://cube.fyi/css.html
+*/
+
+body {
+  /* color: var(--text-color); */
+  color: var(--color-dark);
+  /* background: var(--background); */
+  background: var(--color-light);
+  font-size: var(--text-step-1);
+  font-family: var(--font-base);
+  line-height: var(--leading-standard);
+  font-size-adjust: from-font;
+}
+
+:is(h1, h2, h3, h4) {
+  line-height: var(--leading-fine);
+  text-wrap: balance;
+  font-family: var(--font-heading);
+}
+
+:is(h1, h2, h3, h4):where(
+    [class*="text-step-8"],
+    [class*="text-step-9"],
+    [class*="text-step-10"]
+  ) {
+  line-height: var(--leading-micro);
+  font-weight: var(--font-black);
+}
+
+h1 {
+  font-size: var(--text-step-6);
+  max-width: 20ch;
+}
+
+h2 {
+  font-size: var(--text-step-5);
+  max-width: 35ch;
+}
+
+h3 {
+  font-size: var(--text-step-4);
+  max-width: 35ch;
+}
+
+:is(h4, h5, h6) {
+  font-size: var(--text-step-3);
+}
+
+small {
+  font-size: var(--text-step-0);
+}
+
+ins {
+  text-decoration: none;
+  background: var(--color-primary);
+  color: var(--color-dark);
+  padding-inline: 0.3em;
+}
+
+:is(code, kbd, samp) {
+  font-family: var(--font-mono);
+  padding: 0.2em 0.2em 0.05em 0.2em;
+  hyphens: none;
+  tab-size: 2;
+  text-align: left;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  box-decoration-break: clone;
+}
+
+/* This is quite a new property, so we want code styles to at least, not be huge or tiny */
+@supports not (font-size-adjust: from-font) {
+  :is(code, kbd, samp) {
+    font-size: 0.8em;
+  }
+}
+
+pre:has(code) {
+  width: max-content;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+pre code {
+  border: none;
+  background: none;
+  padding: 0;
+}
+
+kbd {
+  border: 1px solid;
+  padding-block-end: 0.1em;
+}
+
+var {
+  font-style: normal;
+  font-weight: var(--font-medium);
+}
+
+q {
+  font-style: italic;
+}
+
+ul:not(.navigation, .list-override) {
+  padding-inline-start: 1.7ch;
+  list-style-type: disc;
+}
+
+ul:not(.navigation, .list-override) > li {
+  padding-inline-start: var(--space-xs);
+}
+
+:is(ol, ul):not(.navigation, .list-override) li + * {
+  margin-block-start: var(--space-3xs);
+}
+
+ul ::marker {
+  font-size: 0.8lh;
+}
+
+ol ::marker {
+  font-size: 1em;
+  font-weight: var(--font-bold);
+}
+
+/* Lists with classes and roles will be out of standard flow, so remove the default spacing */
+[role="list"][class],
+[role="tablist"][class] {
+  margin-block: 0;
+  padding: 0;
+}
+
+dt {
+  font-weight: var(--font-medium);
+}
+
+dt + dd {
+  margin-block-start: var(--space-xs);
+}
+
+dd + dt {
+  margin-block-start: var(--space-s);
+}
+
+dd {
+  margin-inline-start: 1.5ch;
+}
+
+blockquote {
+  display: inline-block;
+  margin-inline: var(--space-s);
+  padding: var(--space-m);
+  color: var(--background);
+  background-color: var(--text-color);
+}
+
+blockquote footer {
+  margin-block-start: var(--space-xs);
+  color: var(--color-primary);
+  font-size: var(--text-step-0);
+}
+
+blockquote q {
+  font-style: normal;
+}
+
+:is(video, iframe[src*="youtube"], iframe[src*="vimeo"]) {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 16/9;
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+  display: block;
+}
+
+figcaption {
+  padding-block-start: 0.5em;
+  font-size: var(--text-step-0);
+  font-family: monospace;
+}
+
+table {
+  border: var(--stroke);
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th {
+  text-align: left;
+  font-weight: var(--font-bold);
+  line-height: var(--leading-fine);
+}
+
+thead th {
+  padding-block: var(--space-s);
+}
+
+td,
+th {
+  padding: var(--space-xs) var(--space-s);
+}
+
+th:not(:only-of-type) {
+  border-block-end: var(--stroke);
+}
+
+th:only-of-type {
+  border-inline-end: var(--stroke);
+}
+
+:is(th, td) ~ :is(th, td) {
+  border-inline-start: var(--stroke);
+}
+
+tr + tr :is(th, td) {
+  border-block-start: var(--stroke);
+}
+
+caption {
+  caption-side: bottom;
+  margin-block-start: var(--space-s);
+}
+
+a:not([class]):hover {
+  text-underline-offset: 0.2lh;
+}
+
+:is(h1, h2, h3, h4) a:not([class]) {
+  text-decoration-thickness: 0.1ex;
+  text-underline-offset: 0.2ex;
+}
+
+:is(h1, h2, h3, h4) a:not([class]):hover {
+  text-underline-offset: 0.3ex;
+}
+
+:focus {
+  outline: none;
+}
+
+:focus-visible {
+  outline: 2px solid var(--focus-color, currentColor);
+  outline-offset: var(--focus-offset, 0.2lh);
+}
+
+/* Firefox is the only browser that doesn't outline the whole element unless you make it display: inline-block. That in itself causes multiple flow issues so we can detect it, using its own vendor prefix and reduce focus offset
+*/
+@supports (-moz-appearance: none) {
+  :root {
+    --focus-offset: 0.08em;
+  }
+}
+
+:target {
+  scroll-margin-block: 5lh;
+}
+
+::selection {
+  color: var(--color-light);
+  background: var(--color-dark);
+}
+
+hr {
+  border: none;
+  border-block-start: var(--hr-stroke, var(--stroke));
+  margin-block: var(--flow-space, var(--space-xl));
+}
+
+svg:not([class]) {
+  width: auto;
+  height: 1lh;
+}
+
+svg {
+  flex-shrink: 0;
+}
+
+svg[role="img"][width][height] {
+  width: revert;
+  height: revert;
+  background: var(--color-light);
+  padding: var(--space-xs);
+}
+
+/* There's a .flow composition, but this prevents forms from having to have that applied where markup is harder to control in certain systems. It still uses the --flow-space variables though to make managing space easier */
+form > * + * {
+  margin-top: var(--flow-space, 1rem);
+}
+
+:is(input, select, textarea) {
+  accent-color: var(--color-primary);
+}
+
+:is(
+    input:not([type="checkbox"], [type="radio"], [type="color"]),
+    select,
+    textarea
+  ) {
+  padding: 0.5em 0.8em;
+  border-radius: var(--radius-s);
+  border: var(--stroke-solid);
+  background: var(--color-dark-glare);
+  color: var(--color-light);
+  width: 100%;
+
+  &::placeholder {
+    color: var(--color-mid);
+  }
+}
+
+label {
+  line-height: var(--leading-fine);
+  font-weight: var(--font-medium);
+}
+
+label::after {
+  content: "\A";
+  white-space: pre;
+}
+
+/* Usually label wraps checkbox and radio buttons, so we give ourselves more layout and text-flow control with flex */
+label:has(input) {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-s);
+  font-weight: var(--font-normal);
+}
+
+label:has(input) + label:has(input) {
+  --flow-space: var(--space-s-m);
+}
+
+/* Slightly adjusts the vertical position of the check/radio */
+label:has(input) input {
+  transform: translateY(-0.1ex);
+}
+
+input:disabled {
+  background: var(--color-mid);
+}
+
+input:disabled,
+label input:disabled + * {
+  cursor: not-allowed;
+}
+
+fieldset {
+  border: var(--stroke);
+  padding: var(--space-s);
+}
+
+legend {
+  font-weight: var(--font-medium);
+  padding-inline: var(--space-xs);
+}
+
+summary {
+  font-weight: var(--font-bold);
+  cursor: pointer;
+}
+
+details[open] summary {
+  margin-block-end: var(--space-s);
+}

package/dist/templates/global/reset.css

@@ -0,0 +1,91 @@
+/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}

package/dist/templates/global/sizes/space.css

@@ -0,0 +1,36 @@
+:root {
+  /* spacing */
+  /* https://utopia.fyi/space/calculator/?c=360,18,1.2,1240,20,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
+  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
+  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
+  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
+  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
+  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
+  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
+  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
+  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);
+
+  /* One-up pairs */
+  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
+  --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
+  --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
+  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
+  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
+  --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
+  --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
+  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
+
+  /* Custom pairs */
+  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
+
+  --gutter: var(--space-xl-2xl);
+
+  --leading-micro: 0.85;
+  --leading-flat: 1;
+  --leading-fine: 1.2;
+  --leading-standard: 1.4;
+  --leading-loose: 1.7;
+
+  --measure: 60ch;
+}

package/dist/templates/global/sizes/text.css

@@ -0,0 +1,17 @@
+/* typography sizes */
+:root {
+  /* https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,10,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+  --text-step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
+  --text-step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
+  --text-step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
+  --text-step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
+  --text-step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
+  --text-step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
+  --text-step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
+  --text-step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
+  --text-step-6: clamp(3.3592rem, 2.7828rem + 2.5621vw, 4.7684rem);
+  --text-step-7: clamp(4.0311rem, 3.2418rem + 3.508vw, 5.9605rem);
+  --text-step-8: clamp(4.8373rem, 3.7682rem + 4.7514vw, 7.4506rem);
+  --text-step-9: clamp(5.8048rem, 4.3695rem + 6.379vw, 9.3132rem);
+  --text-step-10: clamp(6.9657rem, 5.0529rem + 8.5015vw, 11.6415rem);
+}