handoff-app 0.7.2 → 0.7.3

package/Changelog.md

@@ -6,6 +6,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.7.3] - 2023-07-28
+
+This release allows custom theme files in the working directory to override the main theme
+
+### Changes
+
+- Added `eject:theme` which will eject the currently set theme into `theme/main.scss`
+- A new config `theme` has been added to allow toggling between themes. At present only a single default theme is provided
+- Improvements to cli help text
+
+### Cleanup
+
+- Removes unneeded template files from the root dir
+
 ## [0.7.2] - 2023-07-28
 
 This release improves existing functionalities and issue detected within the design system app.
@@ -13,10 +27,8 @@ This release improves existing functionalities and issue detected within the des
 ### Changes
 
 - Component style maps placed in `integration/scss` are now read in at build time allowing developers to provide custom scss mappings for components.
-- A new config `theme` has been added to allow toggling between themes. At present only a single default theme is provided
 - If a folder `theme/main.scss` is found in the working root of the project, that file will be included at build time to allow styling the app.
 - Globbing is now supported in scss integrations allowing more flexible ingest of component variables
-- Added `eject:theme` which will eject the currently set theme into `theme/main.scss`
 - Added `make:page` command to CLI for creating custom pages or editing existing pages
 - Adds a flattening algorithm when color blending on properties that do not support blending like `color` and `border-color`
 - Purge the app build cache when restarting the app to prevent cache from holding old copies of customized files.

package/dist/cli/eject.d.ts

@@ -19,4 +19,9 @@ export declare const ejectExportables: (handoff: Handoff) => Promise<Handoff>;
  * @param handoff
  */
 export declare const ejectPages: (handoff: Handoff) => Promise<Handoff>;
+/**
+ * Eject the integration to the working directory
+ * @param handoff
+ */
+export declare const ejectTheme: (handoff: Handoff) => Promise<Handoff>;
 export default ejectConfig;

package/dist/cli/eject.js

@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ejectPages = exports.ejectExportables = exports.ejectIntegration = exports.ejectConfig = void 0;
+exports.ejectTheme = exports.ejectPages = exports.ejectExportables = exports.ejectIntegration = exports.ejectConfig = void 0;
 var path_1 = __importDefault(require("path"));
 var fs_extra_1 = __importDefault(require("fs-extra"));
 var chalk_1 = __importDefault(require("chalk"));
@@ -148,4 +148,38 @@ var ejectPages = function (handoff) { return __awaiter(void 0, void 0, void 0, f
     });
 }); };
 exports.ejectPages = ejectPages;
+/**
+ * Eject the integration to the working directory
+ * @param handoff
+ */
+var ejectTheme = function (handoff) { return __awaiter(void 0, void 0, void 0, function () {
+    var config, workingPath, currentTheme, docsPath;
+    var _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0: return [4 /*yield*/, handoff.config];
+            case 1:
+                config = _b.sent();
+                workingPath = path_1.default.resolve(path_1.default.join(handoff.workingPath, 'theme', 'main.scss'));
+                if (fs_extra_1.default.existsSync(workingPath)) {
+                    if (!handoff.force) {
+                        console.log(chalk_1.default.yellow("It appears you already have custom theme.  Use the --force flag to replace you haven't customized."));
+                        return [2 /*return*/];
+                    }
+                }
+                currentTheme = (_a = handoff.config.theme) !== null && _a !== void 0 ? _a : 'default';
+                docsPath = path_1.default.resolve(path_1.default.join(handoff.modulePath, "src/app/sass/themes/_".concat(currentTheme, ".scss")));
+                if (fs_extra_1.default.existsSync(docsPath)) {
+                    fs_extra_1.default.copySync(docsPath, workingPath, { overwrite: false });
+                    console.log(chalk_1.default.green("Customizable theme ejected to ".concat(workingPath)));
+                }
+                else {
+                    fs_extra_1.default.copySync(path_1.default.resolve(path_1.default.join(handoff.modulePath, "src/app/sass/themes/_default.scss")), workingPath, { overwrite: false });
+                    console.log(chalk_1.default.green("Customizable theme ejected to ".concat(workingPath)));
+                }
+                return [2 /*return*/, handoff];
+        }
+    });
+}); };
+exports.ejectTheme = ejectTheme;
 exports.default = exports.ejectConfig;

package/dist/cli.js

@@ -69,7 +69,7 @@ var HandoffCliError = /** @class */ (function (_super) {
     }
     return HandoffCliError;
 }(Error));
-var usage = "Usage: handoff-app <cmd> <opts>\n\nCommands:\n  fetch [opts] - Fetches the design tokens from the design system\n\n  build - Using the current tokens, build various outputs\n    build:app [opts] - Builds the design system static application\n    build:integration [opts] - Builds current selected integration, styles and previews\n\n  start [opts] - Starts the design system in development mode\n\n  make\n    make:exportable <type> <name> [opts] - Creates a new schema\n    make:template <component> <state> [opts] - Creates a new template\n    make:page <name> <parent> [opts] - Creates a new custom page\n\n  eject - Ejects the default entire configuration to the current directory\n    eject:config [opts] - Ejects the default configuration to the current directory\n    eject:integration [opts] - Ejects the default integration to the current directory\n    eject:exportables [opts] - Ejects the default exportables to the current directory\n    eject:pages [opts] - Ejects the default pages to the current directory\n\nOptions:\n  -c, --config [file]      Define the path to the config file\n  -d, --debug              Show debug logs\n  -h, --help               Show this help message\n  -v, --version            Show the version number\n";
+var usage = "Usage: handoff-app <cmd> <opts>\n\nCommands:\n  fetch [opts] - Fetches the design tokens from the design system\n\n  build - Using the current tokens, build various outputs\n    build:app [opts] - Builds the design system static application\n    build:integration [opts] - Builds current selected integration, styles and previews\n\n  start [opts] - Starts the design system in development mode\n\n  make\n    make:exportable <type> <name> [opts] - Creates a new schema\n    make:template <component> <state> [opts] - Creates a new template\n    make:page <name> <parent> [opts] - Creates a new custom page\n\n  eject - Ejects the default entire configuration to the current directory\n    eject:config [opts] - Ejects the default configuration to the current directory\n    eject:integration [opts] - Ejects the default integration to the current directory\n    eject:exportables [opts] - Ejects the default exportables to the current directory\n    eject:pages [opts] - Ejects the default pages to the current directory\n    eject:theme [opts] - Ejects the currently selected theme to theme/main.scss\n\nOptions:\n  -c, --config [file]      Define the path to the config file\n  -d, --debug              Show debug logs\n  -h, --help               Show this help message\n  -v, --version            Show the version number\n";
 /**
  * Show the help message
  */
@@ -100,7 +100,7 @@ var run = function (argv, stdout, stderr) { return __awaiter(void 0, void 0, voi
     return __generator(this, function (_b) {
         switch (_b.label) {
             case 0:
-                _b.trys.push([0, 18, , 19]);
+                _b.trys.push([0, 19, , 20]);
                 args = (0, arg_1.default)({
                     '--help': Boolean,
                     '-h': '--help',
@@ -140,13 +140,14 @@ var run = function (argv, stdout, stderr) { return __awaiter(void 0, void 0, voi
                     case 'eject:config': return [3 /*break*/, 8];
                     case 'eject:integration': return [3 /*break*/, 9];
                     case 'eject:exportables': return [3 /*break*/, 10];
-                    case 'eject:pages': return [3 /*break*/, 11];
-                    case 'make': return [3 /*break*/, 12];
-                    case 'make:exportable': return [3 /*break*/, 13];
-                    case 'make:template': return [3 /*break*/, 14];
-                    case 'make:page': return [3 /*break*/, 15];
+                    case 'eject:theme': return [3 /*break*/, 11];
+                    case 'eject:pages': return [3 /*break*/, 12];
+                    case 'make': return [3 /*break*/, 13];
+                    case 'make:exportable': return [3 /*break*/, 14];
+                    case 'make:template': return [3 /*break*/, 15];
+                    case 'make:page': return [3 /*break*/, 16];
                 }
-                return [3 /*break*/, 16];
+                return [3 /*break*/, 17];
             case 1: return [2 /*return*/, handoff_1.fetch()];
             case 2: return [4 /*yield*/, handoff_1.build()];
             case 3:
@@ -161,15 +162,16 @@ var run = function (argv, stdout, stderr) { return __awaiter(void 0, void 0, voi
             case 6: return [2 /*return*/, handoff_1.integration()];
             case 7:
                 cliError("Eject commands will eject the default configuration into the working directory so you can customize it.\n\nEject must have a subcommand. Did you mean:\n  - eject:config\n  - eject:exportables\n  - eject:integration\n  - eject:docs\n  - eject:theme.", 2);
-                return [3 /*break*/, 17];
+                return [3 /*break*/, 18];
             case 8: return [2 /*return*/, handoff_1.ejectConfig()];
             case 9: return [2 /*return*/, handoff_1.ejectIntegration()];
             case 10: return [2 /*return*/, handoff_1.ejectExportables()];
-            case 11: return [2 /*return*/, handoff_1.ejectPages()];
-            case 12:
-                cliError("Make commands create configuration files in your working root and scaffold up the appropriate folder structure if needed.\n  \n  Make must have a subcommand. Did you mean:\n    - make:template\n    - make:exportable\n    - make:page", 2);
-                return [3 /*break*/, 17];
+            case 11: return [2 /*return*/, handoff_1.ejectTheme()];
+            case 12: return [2 /*return*/, handoff_1.ejectPages()];
             case 13:
+                cliError("Make commands create configuration files in your working root and scaffold up the appropriate folder structure if needed.\n  \n  Make must have a subcommand. Did you mean:\n    - make:template\n    - make:exportable\n    - make:page", 2);
+                return [3 /*break*/, 18];
+            case 14:
                 type = args._[1];
                 if (!type) {
                     cliError("You must specify a type of 'component' or 'foundation'", 2);
@@ -182,7 +184,7 @@ var run = function (argv, stdout, stderr) { return __awaiter(void 0, void 0, voi
                     cliError("Exportable name must be alphanumeric and may contain dashes or underscores", 2);
                 }
                 return [2 /*return*/, handoff_1.makeExportable(type, name_1)];
-            case 14:
+            case 15:
                 templateComponent = args._[1];
                 if (!templateComponent) {
                     cliError("You must supply a component name", 2);
@@ -195,7 +197,7 @@ var run = function (argv, stdout, stderr) { return __awaiter(void 0, void 0, voi
                     cliError("Template state must be alphanumeric and may contain dashes or underscores", 2);
                 }
                 return [2 /*return*/, handoff_1.makeTemplate(templateComponent, templateState)];
-            case 15:
+            case 16:
                 pageName = args._[1];
                 if (!pageName) {
                     cliError("You must supply a page name", 2);
@@ -208,14 +210,14 @@ var run = function (argv, stdout, stderr) { return __awaiter(void 0, void 0, voi
                     cliError("Page parent must be alphanumeric and may contain dashes or underscores", 2);
                 }
                 return [2 /*return*/, handoff_1.makePage(pageName, pageParent)];
-            case 16: return [2 /*return*/, showHelp()];
-            case 17: return [3 /*break*/, 19];
-            case 18:
+            case 17: return [2 /*return*/, showHelp()];
+            case 18: return [3 /*break*/, 20];
+            case 19:
                 e_1 = _b.sent();
                 if (e_1.message.indexOf('Unknown or unexpected option') === -1)
                     throw e_1;
                 return [2 /*return*/, cliError(e_1.message + "\n".concat(usage), 2)];
-            case 19: return [2 /*return*/];
+            case 20: return [2 /*return*/];
         }
     });
 }); };

package/dist/exporters/utils.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="plugin-typings" />
 import * as FigmaTypes from '../figma/types';
 import { Exportable, VariantProperty } from '../types';
-export declare function filterByNodeType<Type extends FigmaTypes.Node['type']>(type: Type): (obj?: FigmaTypes.Node | null) => obj is Extract<FigmaTypes.Component, {
-    type: Type;
-}> | Extract<FigmaTypes.Document, {
+export declare function filterByNodeType<Type extends FigmaTypes.Node['type']>(type: Type): (obj?: FigmaTypes.Node | null) => obj is Extract<FigmaTypes.Document, {
     type: Type;
 }> | Extract<FigmaTypes.Canvas, {
     type: Type;
@@ -29,6 +27,8 @@ export declare function filterByNodeType<Type extends FigmaTypes.Node['type']>(t
     type: Type;
 }> | Extract<FigmaTypes.Slice, {
     type: Type;
+}> | Extract<FigmaTypes.Component, {
+    type: Type;
 }> | Extract<FigmaTypes.ComponentSet, {
     type: Type;
 }> | Extract<FigmaTypes.Instance, {
@@ -46,7 +46,7 @@ export declare function findChildNodeWithTypeAndName<Type extends FigmaTypes.Nod
 export declare function getComponentNamePart(componentName: string, partKey: string): string;
 export declare const isValidVariantProperty: (variantProperty: string) => variantProperty is VariantProperty;
 export declare const isExportable: (exportable: string) => exportable is Exportable;
-export declare const isValidNodeType: (type: string) => type is "INSTANCE" | "COMPONENT" | "DOCUMENT" | "CANVAS" | "FRAME" | "GROUP" | "VECTOR" | "BOOLEAN_OPERATION" | "STAR" | "LINE" | "ELLIPSE" | "REGULAR_POLYGON" | "RECTANGLE" | "TEXT" | "SLICE" | "COMPONENT_SET";
+export declare const isValidNodeType: (type: string) => type is "DOCUMENT" | "CANVAS" | "FRAME" | "GROUP" | "VECTOR" | "BOOLEAN_OPERATION" | "STAR" | "LINE" | "ELLIPSE" | "REGULAR_POLYGON" | "RECTANGLE" | "TEXT" | "SLICE" | "COMPONENT" | "COMPONENT_SET" | "INSTANCE";
 export declare const isValidEffectType: (effect: FigmaTypes.Effect['type']) => boolean;
 export declare const isShadowEffectType: (effect: FigmaTypes.Effect['type']) => boolean;
 export declare const isValidGradientType: (gradientType: FigmaTypes.PaintType) => boolean;

package/dist/index.d.ts

@@ -39,6 +39,7 @@ declare class Handoff {
     ejectIntegration(): Promise<Handoff>;
     ejectExportables(): Promise<Handoff>;
     ejectPages(): Promise<Handoff>;
+    ejectTheme(): Promise<Handoff>;
     makeExportable(type: string, name: string): Promise<Handoff>;
     makeTemplate(component: string, state: string): Promise<Handoff>;
     makePage(name: string, parent: string): Promise<Handoff>;

package/dist/index.js

@@ -221,6 +221,21 @@ var Handoff = /** @class */ (function () {
             });
         });
     };
+    Handoff.prototype.ejectTheme = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!this.config) return [3 /*break*/, 2];
+                        return [4 /*yield*/, (0, eject_1.ejectTheme)(this)];
+                    case 1:
+                        _a.sent();
+                        _a.label = 2;
+                    case 2: return [2 /*return*/, this];
+                }
+            });
+        });
+    };
     Handoff.prototype.makeExportable = function (type, name) {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {

package/dist/utils/convertColor.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="plugin-typings" />
 import * as FigmaTypes from '../figma/types';
 import { GradientObject } from '../types';
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handoff-app",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Automated documentation toolchain for building client side documentation from figma",
   "author ": {
     "name": "Convertiv",

package/src/app/next.config.js

@@ -23,6 +23,7 @@ const nextConfig = {
   },
   sassOptions: {
     additionalData: (content, loaderContext) => {
+      let foundTheme = false;
       // Check if client configuration exists
       if (fs.existsSync('handoff.config.json')) {
         // Load client configuration
@@ -33,12 +34,21 @@ const nextConfig = {
           // If the theme is specified, check if the theme exists in the 'themes' folder
           if (clientConfig.hasOwnProperty('theme') && fs.existsSync(path.resolve('themes', `${clientConfig['theme']}.scss`))) {
             // Use custom theme
-            return content + `@import 'themes/${clientConfig['theme']}';`;
+            foundTheme = true;
+            content = content + `\n@import 'themes/${clientConfig['theme']}';`;
           }
         }
       }
-      // Use default theme
-      return content + `@import 'themes/default';`
+      if (!foundTheme) {
+        // Use default theme
+        content = content + `\n@import 'themes/default';`;
+      }
+
+      // Check if custom CSS exists
+      if (fs.existsSync('theme/main.scss')) {
+        content = content + `\n@import "theme/main.scss";`;
+      }
+      return content;
     },
   },
   webpack: (config) => {
@@ -47,7 +57,7 @@ const nextConfig = {
     config.resolve.modules.push(path.resolve('node_modules'));
     config.resolveLoader.modules.push(path.resolve('node_modules'));
     config.module.rules.push({
-      test: /\.svg$/i, 
+      test: /\.svg$/i,
       type: 'asset',
     });
     config.module.rules.push({

package/src/app/sass/main.scss

@@ -37,5 +37,3 @@ $enable-shadows: true;
 @import 'objects/all';
 @import 'components/all';
 @import 'utilities/all';
-//@import 'vendor/prism.scss';
-@import 'custom';

package/src/cli/eject.ts

@@ -87,4 +87,33 @@ export const ejectPages = async (handoff: Handoff) => {
   return handoff;
 };
 
+/**
+ * Eject the integration to the working directory
+ * @param handoff
+ */
+export const ejectTheme = async (handoff: Handoff) => {
+  const config = await handoff.config;
+  // does an local page exist?
+  const workingPath = path.resolve(path.join(handoff.workingPath, 'theme', 'main.scss'));
+  if (fs.existsSync(workingPath)) {
+    if (!handoff.force) {
+      console.log(
+        chalk.yellow(`It appears you already have custom theme.  Use the --force flag to replace you haven't customized.`)
+      );
+      return;
+    }
+  }
+  const currentTheme = handoff.config.theme ?? 'default';
+  const docsPath = path.resolve(path.join(handoff.modulePath, `src/app/sass/themes/_${currentTheme}.scss`));
+  if(fs.existsSync(docsPath)){
+    fs.copySync(docsPath, workingPath, { overwrite: false });
+    console.log(chalk.green(`Customizable theme ejected to ${workingPath}`));
+  }else {
+    fs.copySync(path.resolve(path.join(handoff.modulePath, `src/app/sass/themes/_default.scss`)), workingPath, { overwrite: false });
+    console.log(chalk.green(`Customizable theme ejected to ${workingPath}`));
+  }
+  
+  return handoff;
+};
+
 export default ejectConfig;

package/src/cli.ts

@@ -35,6 +35,7 @@ Commands:
     eject:integration [opts] - Ejects the default integration to the current directory
     eject:exportables [opts] - Ejects the default exportables to the current directory
     eject:pages [opts] - Ejects the default pages to the current directory
+    eject:theme [opts] - Ejects the currently selected theme to theme/main.scss
 
 Options:
   -c, --config [file]      Define the path to the config file
@@ -143,6 +144,8 @@ Eject must have a subcommand. Did you mean:
         return handoff.ejectIntegration();
       case 'eject:exportables':
         return handoff.ejectExportables();
+      case 'eject:theme':
+        return handoff.ejectTheme();
       case 'eject:pages':
         return handoff.ejectPages();
       case 'make':

package/src/index.ts

@@ -8,7 +8,7 @@ import { TransformedPreviewComponents } from './transformers/preview/types';
 import { HookReturn } from './types';
 import buildApp, { devApp, watchApp } from './app';
 import pipeline, { buildIntegrationOnly } from './pipeline';
-import { ejectConfig, ejectExportables, ejectIntegration, ejectPages } from './cli/eject';
+import { ejectConfig, ejectExportables, ejectIntegration, ejectPages, ejectTheme } from './cli/eject';
 import { makeExportable, makePage, makeTemplate } from './cli/make';
 import { HandoffIntegration, instantiateIntegration } from './transformers/integration';
 import { TransformerOutput } from './transformers/types';
@@ -66,7 +66,7 @@ class Handoff {
     return this;
   }
   preRunner(): Handoff {
-    if(!this.config) {
+    if (!this.config) {
       throw Error('Handoff not initialized');
     }
     this.config.figma.definitions = this.hooks.configureExportables(this.config.figma?.definitions || []);
@@ -119,6 +119,12 @@ class Handoff {
     }
     return this;
   }
+  async ejectTheme(): Promise<Handoff> {
+    if (this.config) {
+      await ejectTheme(this);
+    }
+    return this;
+  }
   async makeExportable(type: string, name: string): Promise<Handoff> {
     if (this.config) {
       await makeExportable(this, type, name);

package/src/app/sass/custom.scss

@@ -1,4 +0,0 @@
-/*
- This is a placeholder scss file that will get replaced by client specific
- styles when the project is built
-*/

package/templates/alert/default.html

@@ -1,7 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="preview-body">
-<div class="alert alert-{{ type }} w-100 mb-0" role="alert">
-	{{ parts.text.characters }}
-</div>
-</body>

package/templates/alert/horizontal.html

@@ -1,12 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="preview-body">
-<div class="alert alert-horizontal alert-dismissible w-100" role="alert">
-	<h4 class="alert-heading">{{ parts.title.characters }}</h4>
-	<p>{{ parts.text.characters }}</p>
-	<p>
-		<a href="#">{{ parts.actions.characters }}</a>
-	</p>
-	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-</div>
-</body>

package/templates/alert/vertical.html

@@ -1,12 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="preview-body">
-<div class="alert alert-vertical alert-dismissible" role="alert">
-	<h4 class="alert-heading">{{ parts.title.characters }}</h4>
-	<p>{{ parts.text.characters }}</p>
-	<p>
-		<a href="#">{{ parts.actions.characters }}</a>
-	</p>
-	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-</div>
-</body>

package/templates/button/default.html

@@ -1,5 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} preview-body">
-<button class="btn btn-{{ type }}">{{ parts.$.characters }}</button>
-</body>

package/templates/button/large.html

@@ -1,5 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="preview-body">
-<button class="btn btn-primary btn-lg">{{ parts.$.characters }}</button>
-</body>

package/templates/button/medium.html

@@ -1,5 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="preview-body">
-<button class="btn btn-primary btn-md">{{ parts.$.characters }}</button>
-</body>

package/templates/button/primary/disabled.html

@@ -1,5 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} preview-body">
-<button class="btn btn-{{ type }}" disabled>{{ parts.$.characters }}</button>
-</body>

package/templates/button/small.html

@@ -1,5 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="preview-body">
-<button class="btn btn-primary btn-sm">{{ parts.$.characters }}</button>
-</body>

package/templates/checkbox/default/off.html

@@ -1,10 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} checkbox flex-column align-items-center preview-body">
-<div class="form-check m-1">
-    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
-    <label class="form-check-label" for="flexCheckDefault">
-        {{ parts.label.characters }}
-    </label>
-</div>
-</body>

package/templates/checkbox/default/on.html

@@ -1,10 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} checkbox flex-column align-items-center preview-body">
-<div class="form-check m-1">
-    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
-    <label class="form-check-label" for="flexCheckChecked">
-        {{ parts.label.characters }}
-    </label>
-</div>
-</body>

package/templates/checkbox/default.html

@@ -1,22 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} checkbox preview-body">
-    <!-- <div class="form-check form-check-{{ state }}">
-        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
-        <label class="form-check-label" for="flexCheckDefault">
-            {{ parts.label.characters }}
-        </label>
-    </div> -->
-    <div class="form-check me-5">
-        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
-        <label class="form-check-label" for="flexCheckDefault">
-            {{ parts.label.characters }}
-        </label>
-    </div>
-    <div class="form-check">
-        <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
-        <label class="form-check-label" for="flexCheckChecked">
-            {{ parts.label.characters }}
-        </label>
-    </div>
-</body>

package/templates/checkbox/disabled.html

@@ -1,16 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} checkbox flex-column align-items-center preview-body">
-<div class="form-check form-check-{{ state }} m-1">
-    <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
-    <label class="form-check-label" for="flexCheckDisabled">
-        {{ parts.label.characters }}
-    </label>
-</div>
-<div class="form-check form-check-{{ state }} m-1">
-    <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
-    <label class="form-check-label" for="flexCheckCheckedDisabled">
-        {{ parts.label.characters }}
-    </label>
-</div>
-</body>

package/templates/input/complete.html

@@ -1,14 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} input flex-column preview-body">
-<div class="mb-3">
-    <label class="form-label" htmlFor="formTextComplete">{{parts.label.characters}}</label>
-    <input type="text" class="form-control" id="formTextComplete" value="{{parts.text.characters}}" />
-    <div class="form-text">{{parts.additionalInfo.characters}}</div>
-</div>
-<div class="mb-3">
-    <label class="form-label" for="formTextareaComplete">{{parts.label.characters}}</label>
-    <textarea class="form-control" id="formTextareaComplete" rows="3">{{parts.text.characters}}</textarea>
-    <div class="form-text">{{parts.additionalInfo.characters}}</div>
-</div>
-</body>

package/templates/input/default.html

@@ -1,14 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} input flex-column preview-body">
-<div class="mb-3">
-    <label class="form-label" for="formText">{{parts.label.characters}}</label>
-    <input type="text" class="form-control" id="formText" placeholder="{{parts.text.characters}}" />
-    <div class="form-text">{{parts.additionalInfo.characters}}</div>
-</div>
-<div class="mb-3">
-    <label class="form-label" for="formTextarea">{{parts.label.characters}}</label>
-    <textarea class="form-control" id="formTextarea" rows="3" placeholder="{{parts.text.characters}}"></textarea>
-    <div class="form-text">{{parts.additionalInfo.characters}}</div>
-</div>
-</body>

package/templates/input/disabled.html

@@ -1,14 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} input flex-column preview-body">
-<div class="mb-3">
-    <label class="form-label" htmlFor="formTextDisabled">{{parts.label.characters}}</label>
-    <input type="text" class="form-control" id="formTextDisabled" placeholder="{{parts.text.characters}}" disabled />
-    <div class="form-text">{{parts.additionalInfo.characters}}</div>
-</div>
-<div class="mb-3">
-    <label class="form-label" for="formTextareaDisabled">{{parts.label.characters}}</label>
-    <textarea class="form-control" id="formTextareaDisabled" rows="3" placeholder="{{parts.text.characters}}" disabled></textarea>
-    <div class="form-text">{{parts.additionalInfo.characters}}</div>
-</div>
-</body>

package/templates/input/error.html

@@ -1,14 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} input flex-column preview-body">
-<div class="mb-3">
-    <label class="form-label" for="formTextInvalid">{{parts.label.characters}}</label>
-    <input type="text" class="form-control is-invalid" id="formTextInvalid" placeholder="{{parts.text.characters}}" />
-    <div class="invalid-feedback">{{parts.additionalInfo.characters}}</div>
-</div>
-<div class="mb-3">
-    <label class="form-label" for="formTextareaInvalid">{{parts.label.characters}}</label>
-    <textarea class="form-control is-invalid" id="formTextareaInvalid" rows="3" placeholder="{{parts.text.characters}}"></textarea>
-    <div class="invalid-feedback">{{parts.additionalInfo.characters}}</div>
-</div>
-</body>

package/templates/main.js

@@ -1,16 +0,0 @@
-// bootstrap
-import { Tooltip, Modal } from 'bootstrap';
-import 'iframe-resizer/js/iframeResizer.contentWindow';
-// bootstrap css
-import './main.scss';
-
-// enable tooltips
-document.addEventListener('DOMContentLoaded', function (event) {
-  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-  const tooltipList = [...tooltipTriggerList].map(
-    (tooltipTriggerEl) =>
-      new Tooltip(tooltipTriggerEl, {
-        boundary: document.body,
-      })
-  );
-});

package/templates/main.scss

@@ -1,32 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap');
-
-@import "./exported/bootstrap-tokens/main.scss";
-
-body {
-	background-color: #f7f7f7;
-	display: flex;
-	justify-content: center;
-}
-
-p {
-	color: rgba( 0, 0, 0, .8 );
-	font-family: 'Inter', sans-serif;
-	font-size: 16px;
-	font-weight: 300;
-	letter-spacing: -.3px;
-	line-height: 1.6;
-}
-
-.modal-footer small {
-	color: #777;
-	font-family: 'Inter', sans-serif;
-	font-size: 12px;
-	font-weight: 300;
-	letter-spacing: -.3px;
-	line-height: 1.6;
-}
-
-.preview-body {
-	padding: 30px 40px;
-}
-

package/templates/modal/default.html

@@ -1,20 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="preview-body">
-<div class="modal" tabindex="-1" id="myModal" style="position: static; display: block;">
-	<div class="modal-dialog">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h5 class="modal-title">Modal Visual</h5>
-				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-			</div>
-			<div class="modal-body">
-				<p>Show modal content here, supports any tipe of previously styled component.</p>
-			</div>
-			<div class="modal-footer">
-				<small>Modal footer copy example.</small>
-			</div>
-		</div>
-	</div>
-</div>
-</body>

package/templates/pagination/default.html

@@ -1,31 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="flex-column align-items-center">
-  <nav aria-label="Page navigation example">
-    <ul class="pagination">
-      <li class="page-item disabled"><a class="page-link">Previous</a></li>
-      <li class="page-item"><a class="page-link" href="#">1</a></li>
-      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
-      <li class="page-item"><a class="page-link" href="#">3</a></li>
-      <li class="page-item"><a class="page-link" href="#">Next</a></li>
-    </ul>
-  </nav>
-
-  <nav aria-label="Page navigation example">
-    <ul class="pagination">
-      <li class="page-item disabled">
-        <a class="page-link" aria-label="Previous">
-          <span aria-hidden="true">&laquo;</span>
-        </a>
-      </li>
-      <li class="page-item"><a class="page-link" href="#">1</a></li>
-      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
-      <li class="page-item"><a class="page-link" href="#">3</a></li>
-      <li class="page-item">
-        <a class="page-link" href="#" aria-label="Next">
-          <span aria-hidden="true">&raquo;</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</body>

package/templates/pagination/lg.html

@@ -1,31 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="flex-column align-items-center">
-  <nav aria-label="Page navigation example">
-    <ul class="pagination pagination-lg">
-      <li class="page-item disabled"><a class="page-link">Previous</a></li>
-      <li class="page-item"><a class="page-link" href="#">1</a></li>
-      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
-      <li class="page-item"><a class="page-link" href="#">3</a></li>
-      <li class="page-item"><a class="page-link" href="#">Next</a></li>
-    </ul>
-  </nav>
-
-  <nav aria-label="Page navigation example">
-    <ul class="pagination pagination-lg">
-      <li class="page-item disabled">
-        <a class="page-link" aria-label="Previous">
-          <span aria-hidden="true">&laquo;</span>
-        </a>
-      </li>
-      <li class="page-item"><a class="page-link" href="#">1</a></li>
-      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
-      <li class="page-item"><a class="page-link" href="#">3</a></li>
-      <li class="page-item">
-        <a class="page-link" href="#" aria-label="Next">
-          <span aria-hidden="true">&raquo;</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</body>

package/templates/pagination/sm.html

@@ -1,31 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="flex-column align-items-center">
-  <nav aria-label="Page navigation example">
-    <ul class="pagination pagination-sm">
-      <li class="page-item disabled"><a class="page-link">Previous</a></li>
-      <li class="page-item"><a class="page-link" href="#">1</a></li>
-      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
-      <li class="page-item"><a class="page-link" href="#">3</a></li>
-      <li class="page-item"><a class="page-link" href="#">Next</a></li>
-    </ul>
-  </nav>
-
-  <nav aria-label="Page navigation example">
-    <ul class="pagination pagination-sm">
-      <li class="page-item disabled">
-        <a class="page-link" aria-label="Previous">
-          <span aria-hidden="true">&laquo;</span>
-        </a>
-      </li>
-      <li class="page-item"><a class="page-link" href="#">1</a></li>
-      <li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li>
-      <li class="page-item"><a class="page-link" href="#">3</a></li>
-      <li class="page-item">
-        <a class="page-link" href="#" aria-label="Next">
-          <span aria-hidden="true">&raquo;</span>
-        </a>
-      </li>
-    </ul>
-  </nav>
-</body>

package/templates/radio/default/off.html

@@ -1,10 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} checkbox flex-column align-items-center preview-body">
-<div class="form-check form-radio m-1">
-    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
-    <label class="form-check-label" for="flexRadioDefault1">
-        {{ parts.label.characters }}
-    </label>
-</div>
-</body>

package/templates/radio/default/on.html

@@ -1,10 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} checkbox flex-column align-items-center preview-body">
-<div class="form-check form-radio m-1">
-    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
-    <label class="form-check-label" for="flexRadioDefault2">
-        {{ parts.label.characters }}
-    </label>
-</div>
-</body>

package/templates/radio/default.html

@@ -1,10 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} preview-body">
-    <div class="form-check form-radio-{{ state }}">
-        <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
-        <label class="form-check-label" for="flexRadioDefault1">
-           {{ parts.label.characters }}
-        </label>
-    </div>
-</body>

package/templates/radio/disabled.html

@@ -1,16 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} checkbox flex-column align-items-center preview-body">
-<div class="form-check form-check-{{ state }} form-radio m-1">
-    <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled1" disabled>
-    <label class="form-check-label" for="flexRadioDisabled1">
-        {{ parts.label.characters }}
-    </label>
-</div>
-<div class="form-check form-check-{{ state }} form-radio m-1">
-    <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled2" checked disabled>
-    <label class="form-check-label" for="flexRadioDisabled2">
-        {{ parts.label.characters }}
-    </label>
-</div>
-</body>

package/templates/select/default.html

@@ -1,10 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} select flex-column preview-body">
-<select class="form-select" aria-label="Default select example">
-    <option selected>Open this select menu</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-</select>
-</body>

package/templates/select/disabled.html

@@ -1,10 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} select flex-column preview-body">
-<select class="form-select" aria-label="Default select example" disabled>
-    <option selected>Open this select menu</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-</select>
-</body>

package/templates/select/error.html

@@ -1,10 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} select flex-column preview-body">
-<select class="form-select is-invalid" aria-label="Default select example">
-    <option selected>Open this select menu</option>
-    <option value="1">One</option>
-    <option value="2">Two</option>
-    <option value="3">Three</option>
-</select>
-</body>

package/templates/switch/default/off.html

@@ -1,10 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} checkbox flex-column align-items-center preview-body">
-<div class="form-check form-switch m-1">
-	<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
-	<label class="form-check-label" for="flexSwitchCheckDefault">
-		Switch Label
-	</label>
-</div>
-</body>

package/templates/switch/default/on.html

@@ -1,10 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} checkbox flex-column align-items-center preview-body">
-<div class="form-check form-switch m-1">
-	<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
-	<label class="form-check-label" for="flexSwitchCheckChecked">
-		Switch Label
-	</label>
-</div>
-</body>

package/templates/switch/default.html

@@ -1,8 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} checkbox flex-column align-items-center preview-body">
-<div class="form-check form-switch">
-	<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
-	<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
-</div>
-</body>

package/templates/switch/disabled.html

@@ -1,16 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="theme-{{ theme }} checkbox flex-column align-items-center preview-body">
-<div class="form-check form-check-{{ state }} form-switch m-1">
-	<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled/>
-	<label class="form-check-label" for="flexSwitchCheckDisabled">
-		Switch Label
-	</label>
-</div>
-<div class="form-check form-check-{{ state }} form-switch m-1">
-	<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled/>
-	<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">
-		Switch Label
-	</label>
-</div>
-</body>

package/templates/tooltip/default.html

@@ -1,16 +0,0 @@
-<script src="/components/bundle.js"></script>
-
-<body class="gap-2 preview-body" style="padding-top:60px;padding-bottom:60px;">
-<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
-	Tooltip on top
-</button>
-<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
-	Tooltip on right
-</button>
-<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
-	Tooltip on bottom
-</button>
-<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
-	Tooltip on left
-</button>
-</body>