@emulsify/core 0.0.0-development → 1.1.1

package/.storybook/setupTwig.js

@@ -5,34 +5,18 @@ const twigAddAttributes = require('add-attributes-twig-extension');
 
 /**
  * Fetches project-based variant configuration. If no such configuration
- * exists, returns default values.
+ * exists, returns default values as a flat component structure.
  *
  * @returns project-based variant configuration, or default config.
  */
 const fetchVariantConfig = () => {
   try {
-    return require('../../../project.emulsify.json').variant.structureImplementations;
+    return require('../../../../project.emulsify.json').variant.structureImplementations;
   } catch (e) {
     return [
       {
-        name: 'base',
-        directory: '../../components/00-base',
-      },
-      {
-        name: 'atoms',
-        directory: '../../components/01-atoms',
-      },
-      {
-        name: 'molecules',
-        directory: '../../components/02-molecules',
-      },
-      {
-        name: 'organisms',
-        directory: '../../components/03-organisms',
-      },
-      {
-        name: 'templates',
-        directory: '../../components/04-templates',
+        name: 'components',
+        directory: '../../../../components',
       },
     ];
   }
@@ -40,7 +24,7 @@ const fetchVariantConfig = () => {
 
 module.exports.namespaces = {};
 for (const { name, directory } of fetchVariantConfig()) {
-  module.exports.namespaces[name] = resolve(__dirname, '../../../', directory);
+  module.exports.namespaces[name] = resolve(__dirname, '../../../../', directory);
 }
 
 /**

package/.storybook/setupTwig.test.js

@@ -23,11 +23,11 @@ describe('setupTwig', () => {
 
   it('exports emulsifys namespaces', () => {
     expect(namespaces).toEqual({
-      base: '../../../components/00-base',
-      atoms: '../../../components/01-atoms',
-      molecules: '../../../components/02-molecules',
-      organisms: '../../../components/03-organisms',
-      templates: '../../../components/04-templates',
+      base: '../../../../components/00-base',
+      atoms: '../../../../components/01-atoms',
+      molecules: '../../../../components/02-molecules',
+      organisms: '../../../../components/03-organisms',
+      templates: '../../../../components/04-templates',
     });
   });
 });

package/README.md

@@ -1,24 +1,46 @@
-> [!WARNING]  
-> Work in progress.
-
 ![Emulsify Core Design System](https://github.com/emulsify-ds/.github/blob/6bd435be881bd820bddfa05d88905efe29176a0a/assets/images/header.png)
 
 # Emulsify Core
 
 An open-source toolset for creating and implementing design systems.
 
-### Storybook development and Webpack build
-
 **Emulsify Core** provides a [Storybook](https://storybook.js.org/) component library and a [Webpack](https://webpack.js.org/) development environment. It is meant to make project setup and ongoing development easier by bundling all necessary configuration and providing it as an extendable package for your theme or standalone project.
 
-## Documentation
+## Installation and usage
+Installation and configuration is setup by the provided base theme project(s). As of this writing, Emulsify Drupal is the only base theme project [with this integration](https://github.com/emulsify-ds/emulsify-drupal/blob/main/whisk/package.json#L36).
+
+### Manual installation
+- `npm install @emulsify/core` within your repository or project theme.
+- Copy the provided `npm run` scripts from [Emulsify Drupal's package.json](https://github.com/emulsify-ds/emulsify-drupal/blob/main/whisk/package.json#L15)
+- Copy the contents of `whisk/config/emulsify-core/` from [Emulsify Drupal](https://github.com/emulsify-ds/emulsify-drupal/tree/main/whisk/config/emulsify-core) into your project so `config/` exists at the root of your repository or project theme. The files within `config/` allow you to extend or overwrite configuration provided by Emulsify Core.
+
+### Common Scripts
+
+Run `nvm use` prior to running any of the following commands to verify you are using Node 20.
+(Each is prefixed with `npm run `)
+
+**develop**
+Starts and instance of storybook, watches for any files changes, recompiles CSS/JS, and live reloads storybook assets.
+
+**lint**
+Lints all JS/SCSS within your components and reports any violations.
+
+**lint-fix**
+Automatically fixes any simple violations.
+
+**prettier**
+Outputs any code formatting violations.
+
+**prettier-fix**
+Automatically fixes any simple code formatting violations.
+
+**storybook-build**
+Builds a static output of the storybook instance.
 
-[docs.emulsify.info](https://emulsify.info/docs)
 
 ### Quick Links
 
-1. [Installation](https://www.emulsify.info/docs/emulsify-drupal)
-2. [Usage](https://www.emulsify.info/docs/emulsify-drupal/basic-usage/commands)
+- [Emulsify Homepage](https://www.emulsify.info/)
 
 ## Demo
 

package/config/a11y.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  storybookBuildDir: '../../../.out',
+  storybookBuildDir: '../../../../.out',
   pa11y: {
     includeNotices: false,
     includeWarnings: false,

package/config/webpack/css/style.js

@@ -1 +1 @@
-import '../../../../../components/style.scss';
+import '../../../../../../components/style.scss';

package/config/webpack/css.js

@@ -1 +1 @@
-import '../../../../components/style.scss';
+import '../../../../../../components/style.scss';

package/config/webpack/plugins.js

@@ -7,7 +7,7 @@ const _ImageminPlugin = require('imagemin-webpack-plugin').default;
 const _SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
 const glob = require('glob');
 
-const imagePath = path.resolve(__dirname, '../../../../assets/images');
+const imagePath = path.resolve(__dirname, '../../../../../assets/images');
 
 const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
   filename: '[name].css',

package/config/webpack/svgSprite.js

@@ -2,4 +2,4 @@ function requireAll(r) {
   r.keys().forEach(r);
 }
 
-requireAll(require.context('../../../../assets/icons/', true, /\.svg$/));
+requireAll(require.context('../../../../../assets/icons/', true, /\.svg$/));

package/config/webpack/webpack.common.js

@@ -4,8 +4,8 @@ const loaders = require('./loaders');
 const plugins = require('./plugins');
 
 const webpackDir = path.resolve(__dirname);
-const rootDir = path.resolve(__dirname, '../../../..');
-const distDir = path.resolve(__dirname, '../../../../dist');
+const rootDir = path.resolve(__dirname, '../../../../..');
+const distDir = path.resolve(__dirname, '../../../../../dist');
 
 // Glob pattern for scss files that ignore file names prefixed with underscore.
 const scssPattern = path.resolve(rootDir, 'components/**/!(_*).scss');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emulsify/core",
-  "version": "0.0.0-development",
+  "version": "1.1.1",
   "description": "Bundled tooling for Storybook development + Webpack Build",
   "keywords": [
     "component library",
@@ -131,6 +131,5 @@
   },
   "overrides": {
     "graceful-fs": "^4.2.11"
-  },
-  "main": "commitlint.config.js"
+  }
 }