Code Monkey home page Code Monkey logo

emulsify-cli's Introduction

Emulsify Design System npm

emulsify-cli

Command line interface for Emulsify.

Installation

This project is deployed to npm. In order to use this CLI, install it as a global dependency:

npm install -g @emulsify/cli

Usage

For more information on how to use emulsify-cli, please see the usage documentation.

Development

Emulsify-cli is developed using TypeScript. You can find all of the source files in the src directory, which is organized in the following manner:

  • src/index.ts - uses Commander to compose the CLI.
  • src/handlers - contains all functions that handle CLI commands, such as emulsify init.
  • src/lib - general definitions and logging tools.
  • src/schemas - contains JSON-Schema files that describe project, system, and variant configuration. These schema files are used to generate TypeScript types.
  • src/scripts - holds utility scripts for the project.
  • src/types - type modules live here, auto-generated ones are prefixed with an underscore (_).
  • src/util - contains utility functions that are used in handlers to do various things, such as caching systems.

Setup

  • Install the version of node as specified in this project's .nvmrc file. If you are using nvm, simply run nvm use.
  • Clone this repository into a directory of your choosing.
  • In the directory, run npm install.
  • Build the project: npm run build, or watch: npm run watch.
  • To test the CLI, run: npm link.

Scripts

  • npm run build: builds the project based on the configuration in tsconfig.dist.json.
  • npm run build-schema-types: Compiles the json-schema definitions within this project into ts types.
  • npm run watch: watches the codebase, and re-compiles every time a change is made.
  • npm run format: uses prettier to format all ts files within the codebase.
  • npm run lint: uses eslint to lint the codebase.
  • npm run test: runs Jest on the codebase. You can specify a path to a single test, and add any flags supported by Jest's CLI.
  • npm run type: uses typescript to check all type signatures.
  • npm run twatch: runs Jest without coverage, in verbose and watch mode. This is useful for running a single test during active development.

Deployment

This project is automatically built and deployed to NPM via a GitHub Actions workflow. In order to deploy changes merged into the develop branch, simply merge develop into main, and call it a day.

Contributors

Patrick
Patrick Coffey
Brian
Brian Lewis
Jeff
Jeff Tomlinson
Callin
Callin Mullaney
Randy
Randy Oest
mikeethedude/
mikeethedude
Andrii
Andrii Shutov
Ryan
Ryan Hagerty
Jim
Jim Vomero
Caleb
Caleb Tucker-Raymond
Igor
Igor R. Plity

emulsify-cli's People

Contributors

amazingrando avatar calebtr-metro avatar callinmullaney avatar dependabot[bot] avatar fertant avatar iryston avatar jefftomlinson avatar karldivad avatar mikeethedude avatar modulesunraveled avatar njim avatar patrickocoffeyo avatar ryanhagerty avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

emulsify-cli's Issues

Add a loading indicator

As of now, if the cli has to perform tasks that take awhile, such as cloning the starter repo, or a system, it simply seems to hang. This task involves adding a progress indicator in order to signal to the developer that something is happening. Perhaps we can use something like this

Progress bar is producing multiple lines

Expected Behavior

The progress bars shown in the attached image should be a single progress bar.

Your Environment

  • Operating System and version (desktop or mobile): macOS Monteray
  • ZSH shell

CleanShot 2021-11-11 at 16 20 06@2x

[BUG] Drupal 9 install theme is incompatible, missing @molecules/tabs/tabs.twig

Describe the bug
I've installed vanilla Drupal 9 and tried to set up emulsify theme:

emulsify init "Diffy Theme"
cd web/themes/custom/diffy_theme
emulsify system install compound
npm run build

When tried to enable the theme got an error:

NOTICE: PHP message: Drupal\Core\Extension\InfoParserException: The 'core_version_requirement' constraint (^9 || ^10) requires the 'core' key not be set in themes/custom/diffy_theme/diffy_theme.info.yml

Also after I've fixed this error (by removing core property) I created a node and when viewed it got another error:

"PHP message: Uncaught PHP Exception Twig\Error\LoaderError: "Template "@molecules/tabs/tabs.twig" is not defined in "themes/custom/diffy_theme/templates/navigation/menu-local-tasks.html.twig" at line 14."

Please remove core from *.info.yml file and maybe ship tabs component when setting up the design system.

Thank you very much for this awesome project!

Configuration File Validation

Resolving this issue involves creating an AJV-based validation step in relevant cli command handlers, so we can be confident that configuration files are structured correctly before using them within the rest of the handlers.

[BUG] Emulsify Init should grab the latest version of the starter without

Describe the bug
We may have a bug or at least a hiccup in documentation.
emulsify init "theme_name" does not seem to produce the same result as emulsify init "Theme Name" --starter https://github.com/emulsify-ds/emulsify-drupal.git --platform drupal. Passing the repo directly should get the latest tag which I would expect to be equivalent to not passing it when we auto-detect the platform. Some wires may be crossed there.

To Reproduce
Steps to reproduce the behavior:

  1. Set up a new drupal site
  2. `emuslify init "theme_name"
  3. go to the installed theme
  4. Install compound with a branch

Expected behavior
The latest tagged version of emulsify-drupal should be installed when not specifying the repo and drupal is detected.

Desktop (please complete the following information):

  • OS: Ubuntu and MacOs for sure.

Additional context
This was noticed when looking for a specific component from compound that should auto install.

[BUG] Emulsify init not working on 1.8.0

Describe the bug
Emulsify init command is not working properly

To Reproduce
Steps to reproduce the behavior:

  1. Execute emulsify init
  2. It will throw and error:
throw new Error(`Cannot add option '${option.flags}'${this._name && ` to command '${this._name}'`} due to conflicting flag '${matchingFlag}'
      ^

Error: Cannot add option '-c --checkout <commit/branch/tag>' due to conflicting flag '--checkout'

Desktop (please complete the following information):

  • OS: MacOS 14.4.1
  • Node: 20.13.0

Error handling when you pass a named system and a repository url

Currently, if you install a named system and pass a repository, the repository is ignored. We should add help text to say "Only pass one or the other"

e.g. emulsify system install compound --repository https://github.com/emulsify-ds/compound.git --checkout 1.0.0 will appear to work, but will install the latest from main rather than 1.0.0 since the name compound is also passed. It seems to ignore the stuff that comes after it.

Properly namespace component attachments after installation

Expected Behavior

When installing a component in Emulsify Drupal if the component includes a library to be attached like a JavaScript file, then the attachment should be names-spaced under the theme.

Additionally, the attachment should be defined in THEME_NAME.libraries.yml file if it is not already defined.

Current Behavior

The emulsify namespace is used and causes JavaScript functionality to fail.

Possible Solution

After adding the component, Emulsify CLI should replace emulsify with the specific theme name much like how it does it in .cli/init.js:89.

Steps to Reproduce (for bugs)

  1. Add the tabs component from compound; emulsify component install tabs
  2. Look into the twig file of the newly added component: @components/02-molecules/tabs/tabs.twig
  3. You will see the attached library is name-spaced under emulsify not the actual theme.

Your Environment

  • Version used: 1.5.0
  • Browser Name and version: Google Chrome v96.0.4664.110
  • Operating System and version (desktop or mobile): macOS Big Sur v11.6.1

Starter instruction

Hi Emlusify team,

Is there some kind of starter instructions or starter repository which uses the cli?
I can install it run test etc. but I miss the link how to use it install my first component set.

Thanks!

Replace stand-in logging tools with consola

Right now, we have a logging utility that allows for us to log/exit in a relatively simple way. However, we need to spice up our logs a bit, and make them look a little better.

Solving this issue involves replacing our console based utility with consola. We want to keep our current log utility, as it does some nice things like adding color to messages, but rather than using console, we should use consola.

[BUG] Cannot install the Emulsify UI Kit with the CLI

Describe the bug
I'm trying to install the Emulsify UI Kit component library with the Emulsify CLI and I cannot.

To Reproduce
Steps to reproduce the behavior:

  1. Go to the Standalone installation instructions
  2. Change the following
    emulsify system install --repository https://github.com/emulsify-ds/compound.git --checkout [branch/tag/commit] to emulsify system install --repository https://github.com/emulsify-ds/emulsify-ui-kit.git --checkout main
  3. Get the error Unable to install system assets and/or required components: Error: ENOENT: no such file or directory, lstat '/Users/oest/.emulsify/cache/systems/aafceee31da1cd49aa7dc52ebb708c40/compound/src/components/00-base/01-colors'

I updated system.emulsify.json using the instructions in the docs.

Any help would be appreciated. TY.

Starter-based init success messages

Right now, when emulsify init themeName is run, a Drupal-specific success message is logged. This is not good, because the CLI needs to support all platforms generically.

In order to resolve this issue, the following things must be completed:

  • Add configuration to platform objects that allows for initialization success messages to be defined.
  • Adjust the init command handler so it logs based on the instructions given by the platform.

External Variant Support

Resolving this issue involves adding support for system variants that are defined in external repositories, meaning repositories that are not within the system's own repository.

Default system install should pin to the latest available version (tag)

Right now by default, when installing a system, we check out the main branch, and pin the project's system to the main branch. This is problematic because it will result in people accidentally updating their systems, so instead we should fetch the latest tag, and pin the user to that.

Writing files takes forever

When running certain commands that include writing to files (init for example), fs.writeFile is taking forever to actually write. Need to look into why this is happening, and resolve.

How to initialize Emulsify on an existing theme project?

Hey y'all. I'm taking Emulsify out for a test drive but I'm having some issues with how to install all existing Compound components.

I've gone through the documentation and initializing a NEW theme project works like a charm. However, I've inherited an existing Drupal theme project that uses Emulsify but I don't see anywhere where it shows how to "initialize" an existing project and install all component files inside the "components" folder (it's currently empty). I've tried running 'emulsify system install compound' but I get the following error:

"ERROR No Emulsify project detected. You must run this command within an existing Emulsify project. For more information about creating Emulsify projects, run "emulsify init --help"

Hope somebody can throw me a rope here. :)

Feature request: add flag to report version of emulsify-cli

It would be great to have a flag for emulsify-cli that reported the version of the tool.

emulsify -v or emulsify --version should report the version of tool, similar to other command-line tools.

This will allow developers to quickly determine the version of emulsify-cli when they are troubleshooting, reporting bugs and contributing to the project.

We would need to:

  • add the flag
  • add tests for the flag (?)
  • update inline help
  • update documentation website

[Feature] Emulsify Init command should be reworked for the new version

Is your feature request related to a problem? Please describe.
Emulsify is moving to a base_theme structure with the 5.x release. However, we want to keep Emulsify platform agnostic so the --starter argument should be retooled to account for the new structure.

Describe the solution you'd like
The starter version should essential consist of the "whisk" theme template except for the following drupal files: https://github.com/emulsify-ds/emulsify-drupal/tree/main/whisk

  • screenshot.png
  • whisk.breakpoints.yml
  • whisk.info.emulsify.yml
  • whisk.libraries.yml
  • whisk.theme
  • templates/ directory
  • config/install directory
  • config/schema` directory

Additional context
Add any other context or screenshots about the feature request here.

Can't update to a new version of a system

Need:

There needs to be a way to specify and install a new system version after initial install. So that a project can update from v1.7.0 to v1.8.0 to get new components, for example.

Issue

Something wonky is happening when we install systems... we're choosing a version, and it's being captured in the project.emulsify.json file. But once it's installed, it doesn't seem to care about that file for subsequent CLI calls.

Steps to reproduce

  • Create a drupal project composer create-project drupal/recommended-project cli-update
  • Initialize a theme `emulsify init "My Theme"
  • cd into the theme cd web/themes/custom/my_theme
  • Install a system emulsify system install --repository https://github.com/yalesites-org/component-library-twig.git --checkout v1.7.0
  • Verify you do not have access to the "accordion" component (it's not in the list when you run emulsify component list)
  • Edit the theme's project.emulsify.json and change the "checkout" from v1.7.0 to v1.8.0
  • Verify you still don't have access to the "accordion" component (even though it is included with v1.8.0) emulsify component list
  • Delete your systems cache rm -rf ~/.emulsify/cache/systems/*
  • Verify you now DO have access to the accordion component emulsify component list
  • Edit the theme's project.emulsify.json and change the "checkout" from v1.8.0 back to v1.7.0
  • Verify you still have access to the accordion (even though you shouldn't because you're back to v1.7.0) emulsify component list

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.