@hoodoo/acme
v1.3.0
Published
A tool to generate Storybook stories from AEM content.
Downloads
273
Readme
Introduction
acme
is a simple command-line tool to generate Storybook stories from content defined in an AEM instance.
Usage
npm install @hoodoo/acme
npx acme init
npx acme pull --config acme.settings.json -d storybook-assets
npx acme create -s storybook-assets [--config acme.settings.json]
Set the DEBUG
environment variable to output log messages
DEBUG=acme:* npx acme pull --config <config json file> -d storybook-assets
DEBUG=acme:* npx acme create -s storybook-assets [--config <config json file>]
or
export DEBUG=acme:*
NOTE: config
cli option is optional. This is only required if there are designs to be referenced from Adobe XD.
Configuration File
This is the format for the expected config file. As of now, all fields are required. You can use the acme init
command to trigger a prompt that will automatically create the config file, which is named acme.settings.json
by default.
{
"username": "admin",
"password": "admin",
"baseURL": "https://localhost:4502",
"homePage": "/content/<project appId>/us/en",
"policyPath": "/conf/<project appId>/settings/wcm/policies/<project appId>/components",
"componentsContentPath": "/content/core-components-examples/library",
"pageContentContainerPath": "/jcr:content/root/responsivegrid",
"componentsContainerType": "core-components-examples/components/demo/component",
"titleResourceType": "core/wcm/components/title/v2/title",
"designDocUrl": "<https://xd.adobe.com/view/<home design document id>",
"apiKey": "<XD api key>"
}
Configuration Parameters
username
- Username for AEM instancepassword
- Password for AEM instancebaseURL
- Base url for the AEM instancehomePage
- Home page for the site being developedpolicyPath
- The JCR node that contains all component policiescomponentsContentPath
- Path to the parent page for all Core Component example content pagespageContentContainerPath
- Used for parsing the HTML of the Core Component example pagescomponentsContainerType
- Component type that contains each example componenttitleResourceType
-acme
uses the Title component text on the example content pages to name each of the storiesdesignDocUrl
- The URL of the published XD design (optional)apiKey
- Key for the Adobe XD api (optional)
AEM Content
acme
parses the rendered HTML of the Core Components example pages to generate stories based on those components. acme
uses the Title component before each example to name each story and looks for the Demo container component to know where each individual component begins and ends. The AEM Core Component examples (core.wcm.components.examples
) must be installed on the instance configured in the baseURL
parameter of the acme.settings.json
file.
Instructions for installing the AEM Core Components can be found here: AEM WCM Core Components
Command Line Reference
Usage: acme <command> <options>
Commands:
acme init [file] Generate the configuration file
acme pull Pull content from AEM
acme create Create stories from AEM content
Options:
--help Show help [boolean]
--version Show version number [boolean]
init
acme init [file]
Generate the configuration file
Positionals:
file Configuration file path [string] [default: "acme.settings.json"]
Options:
--help Show help [boolean]
--version Show version number [boolean]
pull
acme pull
Pull content from AEM
Options:
--help Show help [boolean]
--version Show version number [boolean]
--destination, -d Destination directory for AEM assets
[string] [default: "aem-assets"]
--config Path to JSON config file [required]
create
acme create
Create stories from AEM content
Options:
--help Show help [boolean]
--version Show version number [boolean]
--source, -s Path to downloaded AEM assets [string] [default: "aem-assets"]
--config Path to JSON config file
Generated Assets
Running acme pull
"pulls" generated component markup, referenced images, js and css as well as component policies. This command generates the following directories and files under the destination directory provided by the --destination
or -d
option.
components
Contains sub-directories for each component which in turn contains html files of each component variation. These files are referenced as templates in the respective stories.content
This directory contains all image resources referenced in the component variations. The path to the resource will be the same as that used in the component markup to ensure proper rendering in Storybook.policies
All component policies are saved here asjson
files. These policies are referenced in the respective component stories to optionally apply any defined style system.resources
This directory contains theclientlib-base
js and css which includes the AEM Core Component client libraries as well as AEM Grid.
acme create
generates stories for each component variation under the components
directory of the source directory defined by --source
or -s
option. The source directory would be the same as the destination directory in the pull
command. The following assets are created:
stories
Contains
.stories.js
files for each component. Each file in turn contains individual stories for that component..storybook/preview.js
This file imports the assets added to the
resources
directory as well as the entry point to the webpack application at/src/main/webpack/site/main.ts
--this enables storybook to render the components with the default CSS and JavaScript from the AEM Core Components along with your own custom CSS and JavaScript.stories/artboards.json
This file is only created if
designDocUrl
andapiKey
are specified in theacme.settings.json
file AND the settings file is passed to thecreate
command through theconfig
option. It contains a list of all the artboards that are a part of the design document and their public urls.
Example Setup
Steps to get up and running with acme
on a fresh AEM archetype project.
From the
ui.frontend
directory run the following commands:npm install @storybook/aem -D npm install -D storybook-aem-style-system storybook-addon-xd-designs @hoodoo/acme @babel/preset-typescript
Add a
.storybook
directory inside ofui.frontend
and add amain.js
file inside of that. Below is an examplemain.js
that will work with the default archetype setup, however you may need to alter this based on your project needs. Check out the Storybook docs for information on custom webpack configs.const path = require('path'); module.exports = { stories: ['../stories/*.stories.js'], addons: [ 'storybook-addon-xd-designs/register', 'storybook-aem-style-system/register' ], webpackFinal: async (config, { configType }) => { config.module.rules.push({ test: /\.tsx?$/, exclude: [ /(node_modules)/, /stories/ ], use: ['ts-loader', 'webpack-import-glob-loader'], include: path.resolve(__dirname, '../'), }); config.module.rules.push({ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader', 'webpack-import-glob-loader'], include: path.resolve(__dirname, '../'), }); return config; }, };
Run
npx acme init
inside theui.frontend
directory and follow the prompts to create youracme.settings.json
file as described in the "Configuration File" section of this document.Inside your
package.json
add the following commands to thescripts
section"storybook": "start-storybook -s ./storybook-assets -p 9001", "acme": "DEBUG=acme:* acme pull --config acme.settings.json -d storybook-assets && DEBUG=acme:* acme create -s storybook-assets --config acme.settings.json"
Ensure the AEM Core Component packages and sample content is installed on the instance specified in your
acme.settings.json
. The sample content installs to this location:/content/core-components-examples/library
.
With those steps complete you can now run npm run acme
to pull the component markup from your AEM instance and automatically generate Storybook stories inside your project.
Once acme
has finished run npm run storybook
.