Merge branch 'main' of github.com:emulsify-ds/emulsify-core into depe…

…ndabot/npm_and_yarn/semantic-release/release-notes-generator-14.0.0

* 'main' of github.com:emulsify-ds/emulsify-core:
  chore: change github-token key to token
  fix: paths to project files given new npm published structure
  feat: add npm details to package.json
  feat: adjust package.json details for npm publishing
  feat: refine available run commands

.github/workflows/addtoprojects.yml

@@ -18,4 +18,4 @@ jobs:
           # You can target a repository in a different organization
           # to the issue
           project-url: https://github.com/orgs/emulsify-ds/projects/6
-          github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}
+          token: ${{ secrets.ADD_TO_PROJECT_PAT }}

.github/workflows/semantic-release.yml

@@ -17,8 +17,6 @@ jobs:
           node-version: 20
       - name: Install
         run: npm install
-      - name: Build
-        run: npm run build
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.storybook/main.js

@@ -1,6 +1,6 @@
 module.exports = {
   stories: [
-    '../../../components/**/*.stories.@(js|jsx|ts|tsx)',
+    '../../../../components/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: [
     '../../@storybook/addon-a11y',

.storybook/manager.js

@@ -2,7 +2,7 @@ import { addons } from '@storybook/addons';
 
 import emulsifyTheme from './emulsifyTheme';
 
-import('../../../config/emulsify-core/storybook/theme')
+import('../../../../config/emulsify-core/storybook/theme')
 .then((customTheme) => {
   addons.setConfig({
     theme: customTheme.default,

.storybook/preview.js

@@ -6,15 +6,15 @@ import { setupTwig } from './setupTwig';
 (async () => {
   let compiled;
   try {
-    compiled = await import('../../../dist/css/style.css');
+    compiled = await import('../../../../dist/css/style.css');
   } catch (e) {}
 })();
 
 // Custom theme preview config if it exists.
 (async () => {
   let preview;
   try {
-    preview = await import('../../../config/emulsify-core/storybook/preview');
+    preview = await import('../../../../config/emulsify-core/storybook/preview');
   } catch (e) {}
 })();
 

.storybook/setupTwig.js

@@ -5,42 +5,26 @@ 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',
       },
     ];
   }
 };
 
 module.exports.namespaces = {};
 for (const { name, directory } of fetchVariantConfig()) {
-  module.exports.namespaces[name] = resolve(__dirname, '../../../', directory);
+  module.exports.namespaces[name] = resolve(__dirname, '../../../../', directory);
 }
 
 /**

.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',
     });
   });
 });

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
 

config/a11y.config.js

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

config/webpack/css.js

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

config/webpack/css/style.js

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

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',

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$/));

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.json

@@ -1,7 +1,7 @@
 {
-  "name": "emulsify-core",
-  "version": "1.0.4",
-  "description": "Storybook development + Webpack Build",
+  "name": "@emulsify/core",
+  "version": "1.1.1",
+  "description": "Bundled tooling for Storybook development + Webpack Build",
   "keywords": [
     "component library",
     "design system",
@@ -11,12 +11,23 @@
     "styleguide"
   ],
   "author": "Four Kitchens <[email protected]>",
-  "license": "ISC",
+  "license": "GPL-2.0",
+  "engines": {
+    "node": ">=20"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/emulsify-ds/emulsify-core.git"
+  },
+  "bugs": {
+    "url": "https://github.com/emulsify-ds/emulsify-core/issues"
+  },
+  "homepage": "https://github.com/emulsify-ds/emulsify-core#readme",
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
-    "a11y": "npm run storybook-build && ./scripts/a11y.js -r",
-    "build": "webpack --config ./config/webpack/webpack.prod.js",
     "coverage": "npm run test && open-cli .coverage/lcov-report/index.html",
-    "develop": "concurrently --raw \"npm run webpack\" \"npm run storybook\"",
     "format": "npm run lint-fix; npm run prettier-fix",
     "husky:commit-msg": "commitlint --edit $1",
     "husky:pre-commit": "npm run lint",
@@ -32,8 +43,7 @@
     "storybook-build": "storybook build -s ../../dist,../../assets/images,../../assets/icons,../../assets/videos -o .out",
     "storybook-deploy": "storybook-to-ghpages -o .out",
     "test": "jest --coverage  --config ./config/jest.config.js",
-    "twatch": "jest --no-coverage --watch --verbose",
-    "webpack": "webpack --watch --config ./config/webpack/webpack.dev.js"
+    "twatch": "jest --no-coverage --watch --verbose"
   },
   "dependencies": {
     "@babel/core": "^7.24.0",