@emulsify/core 3.4.1 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (110) hide show
  1. package/.cli/init.js +40 -31
  2. package/.storybook/_drupal.js +129 -8
  3. package/.storybook/css-components.js +13 -0
  4. package/.storybook/css-dist.js +5 -0
  5. package/.storybook/emulsifyTheme.js +10 -7
  6. package/.storybook/main.js +417 -65
  7. package/.storybook/manager.js +11 -18
  8. package/.storybook/preview.js +93 -37
  9. package/.storybook/utils.js +70 -69
  10. package/README.md +110 -59
  11. package/config/.stylelintrc.json +2 -6
  12. package/config/a11y.config.js +9 -5
  13. package/config/babel.config.js +5 -0
  14. package/config/eslint.config.js +6 -3
  15. package/config/postcss.config.js +5 -0
  16. package/config/vite/entries.js +227 -0
  17. package/config/vite/environment.js +39 -0
  18. package/config/vite/platforms.js +70 -0
  19. package/config/vite/plugins/copy-src-assets.js +76 -0
  20. package/config/vite/plugins/copy-twig-files.js +84 -0
  21. package/config/vite/plugins/css-asset-relativizer.js +40 -0
  22. package/config/vite/plugins/index.js +105 -0
  23. package/config/vite/plugins/mirror-components.js +358 -0
  24. package/config/vite/plugins/require-context.js +311 -0
  25. package/config/vite/plugins/source-file-index.js +184 -0
  26. package/config/vite/plugins/svg-sprite.js +117 -0
  27. package/config/vite/plugins/twig-extension-installers.js +36 -0
  28. package/config/vite/plugins/twig-module.js +1251 -0
  29. package/config/vite/plugins/virtual-twig-asset-sources.js +404 -0
  30. package/config/vite/plugins/virtual-twig-globs.js +136 -0
  31. package/config/vite/plugins/vituum-patch.js +167 -0
  32. package/config/vite/plugins/yaml-module.js +133 -0
  33. package/config/vite/plugins.js +12 -0
  34. package/config/vite/project-config.js +192 -0
  35. package/config/vite/project-extensions.js +177 -0
  36. package/config/vite/project-structure.js +447 -0
  37. package/config/vite/twig-extensions.js +109 -0
  38. package/config/vite/utils/fs-safe.js +66 -0
  39. package/config/vite/utils/paths.js +40 -0
  40. package/config/vite/utils/react-singleton.js +85 -0
  41. package/config/vite/utils/unique.js +36 -0
  42. package/config/vite/vite.config.js +161 -0
  43. package/package.json +168 -88
  44. package/scripts/a11y.js +70 -16
  45. package/scripts/audit-twig-stories.js +378 -0
  46. package/scripts/audit.js +1602 -0
  47. package/scripts/check-node-version.js +18 -0
  48. package/scripts/loadYaml.js +5 -1
  49. package/src/extensions/index.js +8 -0
  50. package/src/extensions/react/index.js +12 -0
  51. package/src/extensions/react/register.js +45 -0
  52. package/src/extensions/shared/attributes.js +308 -0
  53. package/src/extensions/shared/html.js +41 -0
  54. package/src/extensions/shared/lists.js +38 -0
  55. package/src/extensions/shared/object.js +22 -0
  56. package/src/extensions/twig/function-map.js +20 -0
  57. package/src/extensions/twig/functions/add-attributes.js +39 -0
  58. package/src/extensions/twig/functions/bem.js +166 -0
  59. package/src/extensions/twig/index.js +13 -0
  60. package/src/extensions/twig/register.js +52 -0
  61. package/src/extensions/twig/tag-map.js +16 -0
  62. package/src/extensions/twig/tags/switch.js +266 -0
  63. package/src/storybook/index.js +14 -0
  64. package/src/storybook/main-config.js +132 -0
  65. package/src/storybook/platform-behaviors.js +60 -0
  66. package/src/storybook/preview-parameters.js +81 -0
  67. package/src/storybook/render-twig.js +295 -0
  68. package/src/storybook/twig/drupal-filters.js +7 -0
  69. package/src/storybook/twig/include-function.js +109 -0
  70. package/src/storybook/twig/include.js +28 -0
  71. package/src/storybook/twig/reference-paths.js +294 -0
  72. package/src/storybook/twig/resolver.js +318 -0
  73. package/src/storybook/twig/setup.js +39 -0
  74. package/src/storybook/twig/source-events.js +5 -0
  75. package/src/storybook/twig/source-extensions.js +24 -0
  76. package/src/storybook/twig/source-function.js +239 -0
  77. package/src/storybook/twig/source.js +39 -0
  78. package/.all-contributorsrc +0 -45
  79. package/.editorconfig +0 -5
  80. package/.github/ISSUE_TEMPLATE/BUG_REPORT_TEMPLATE.md +0 -18
  81. package/.github/ISSUE_TEMPLATE/FEATURE_REQUEST_TEMPLATE.md +0 -11
  82. package/.github/PULL_REQUEST_TEMPLATE.md +0 -19
  83. package/.github/dependabot.yml +0 -6
  84. package/.github/workflows/addtoprojects.yml +0 -21
  85. package/.github/workflows/contributors.yml +0 -37
  86. package/.github/workflows/lint.yml +0 -22
  87. package/.github/workflows/semantic-release.yml +0 -24
  88. package/.husky/commit-msg +0 -2
  89. package/.husky/pre-commit +0 -2
  90. package/.nvmrc +0 -1
  91. package/.prettierignore +0 -4
  92. package/.storybook/polyfills/twig-include.js +0 -36
  93. package/.storybook/polyfills/twig-resolver.js +0 -68
  94. package/.storybook/polyfills/twig-source.js +0 -54
  95. package/.storybook/webpack.config.js +0 -193
  96. package/CODE_OF_CONDUCT.md +0 -56
  97. package/commitlint.config.js +0 -5
  98. package/config/jest.config.js +0 -19
  99. package/config/webpack/app.js +0 -1
  100. package/config/webpack/loaders.js +0 -167
  101. package/config/webpack/optimizers.js +0 -17
  102. package/config/webpack/plugins.js +0 -283
  103. package/config/webpack/resolves.js +0 -157
  104. package/config/webpack/sdc-loader.js +0 -16
  105. package/config/webpack/webpack.common.js +0 -268
  106. package/config/webpack/webpack.dev.js +0 -41
  107. package/config/webpack/webpack.prod.js +0 -6
  108. package/release.config.cjs +0 -30
  109. package/scripts/a11y.test.js +0 -172
  110. package/scripts/loadYaml.test.js +0 -30
@@ -1,193 +0,0 @@
1
- import { dirname, resolve } from 'path';
2
- import globImporter from 'node-sass-glob-importer';
3
- import _StyleLintPlugin from 'stylelint-webpack-plugin';
4
- import ESLintPlugin from 'eslint-webpack-plugin';
5
- import resolves from '../config/webpack/resolves.js';
6
- import emulsifyConfig from '../../../../project.emulsify.json' with { type: 'json' };
7
-
8
- // Create __filename from import.meta.url without fileURLToPath
9
- let _filename = decodeURIComponent(new URL(import.meta.url).pathname);
10
-
11
- // On Windows, remove the leading slash (e.g. "/C:/path" -> "C:/path")
12
- if (process.platform === 'win32' && _filename.startsWith('/')) {
13
- _filename = _filename.slice(1);
14
- }
15
-
16
- /**
17
- * Directory name of the current file.
18
- * @type {string}
19
- */
20
- const _dirname = dirname(_filename);
21
-
22
- /**
23
- * Absolute path to the project root directory.
24
- * @type {string}
25
- */
26
- const projectDir = resolve(_dirname, '../../../../..');
27
-
28
- /**
29
- * Webpack plugin to resolve custom namespace imports.
30
- * Transforms `<prefix>:<component>` into `<prefix>/<component>` paths.
31
- */
32
- class ProjectNameResolverPlugin {
33
- /**
34
- * @param {object} options - Plugin options.
35
- * @param {string} options.projectName - Prefix for the project namespace.
36
- */
37
- constructor(options = {}) {
38
- this.prefix = options.projectName;
39
- }
40
-
41
- /**
42
- * Apply the webpack resolver hook.
43
- * @param {object} resolver - The webpack resolver instance.
44
- */
45
- apply(resolver) {
46
- const target = resolver.ensureHook('resolve');
47
- resolver.getHook('before-resolve').tapAsync(
48
- 'ProjectNameResolverPlugin',
49
- /**
50
- * @param {object} request - The resolve request object.
51
- * @param {object} resolveContext - Context for resolving.
52
- * @param {Function} callback - Callback to continue resolution.
53
- */
54
- (request, resolveContext, callback) => {
55
- const requestPath = request.request;
56
-
57
- if (
58
- requestPath &&
59
- requestPath.startsWith(`${this.prefix}:`)
60
- ) {
61
- const newRequestPath = requestPath.replace(
62
- `${this.prefix}:`,
63
- `${this.prefix}/`
64
- );
65
- const newRequest = {
66
- ...request,
67
- request: newRequestPath,
68
- };
69
-
70
- resolver.doResolve(
71
- target,
72
- newRequest,
73
- `Resolved ${this.prefix} URI: ${resolves.TwigResolve.alias[requestPath]}`,
74
- resolveContext,
75
- callback
76
- );
77
- } else {
78
- callback();
79
- }
80
- }
81
- );
82
- }
83
- }
84
-
85
- /**
86
- * Export a function to customize the Webpack config for Storybook.
87
- * @param {object} param0 - The Storybook configuration object.
88
- * @param {object} param0.config - The existing webpack config to modify.
89
- * @returns {object} The updated webpack config.
90
- */
91
- export default async function ({ config }) {
92
- // Alias
93
- Object.assign(config.resolve.alias, resolves.TwigResolve.alias);
94
-
95
- // Twig loader
96
- config.module.rules.push({
97
- /**
98
- * @type {RegExp}
99
- */
100
- test: /\.twig$/,
101
- use: [
102
- {
103
- /**
104
- * Custom loader for svg/spritemap integration.
105
- * @type {string}
106
- */
107
- loader: resolve(_dirname, '../config/webpack/sdc-loader.js'),
108
- options: {
109
- /**
110
- * Name of the Emulsify project for resolving.
111
- * @type {string}
112
- */
113
- projectName: emulsifyConfig.project.name,
114
- },
115
- },
116
- {
117
- /**
118
- * Standard Twig JS loader.
119
- * @type {string}
120
- */
121
- loader: 'twigjs-loader',
122
- },
123
- ],
124
- });
125
-
126
- // SCSS Loader configuration
127
- config.module.rules.push({
128
- test: /\.s[ac]ss$/i,
129
- use: [
130
- 'style-loader',
131
- {
132
- loader: 'css-loader',
133
- options: {
134
- /**
135
- * Enable source maps for CSS.
136
- * @type {boolean}
137
- */
138
- sourceMap: true,
139
- },
140
- },
141
- {
142
- loader: 'sass-loader',
143
- options: {
144
- sourceMap: true,
145
- sassOptions: {
146
- importer: globImporter(),
147
- },
148
- },
149
- },
150
- ],
151
- });
152
-
153
- // YAML loader
154
- config.module.rules.push({
155
- /**
156
- * @type {RegExp}
157
- */
158
- test: /\.ya?ml$/,
159
- loader: 'js-yaml-loader',
160
- });
161
-
162
- // StyleLint and ESLint plugins
163
- config.plugins.push(
164
- new _StyleLintPlugin({
165
- configFile: resolve(projectDir, '../', '.stylelintrc.json'),
166
- context: resolve(projectDir, '../', 'src'),
167
- files: '**/*.scss',
168
- failOnError: false,
169
- quiet: false,
170
- }),
171
- new ESLintPlugin({
172
- context: resolve(projectDir, '../', 'src'),
173
- extensions: ['js'],
174
- }),
175
- );
176
-
177
- // Custom resolver plugin for namespaced imports
178
- config.resolve.plugins = [
179
- new ProjectNameResolverPlugin({
180
- projectName: emulsifyConfig.project.name,
181
- }),
182
- ];
183
-
184
- // Fallback for optional modules
185
- config.resolve.fallback = {
186
- /**
187
- * Prevent resolution of components directory if missing.
188
- */
189
- '../../../../components': false,
190
- };
191
-
192
- return config;
193
- }
@@ -1,56 +0,0 @@
1
- # Code of Conduct
2
-
3
- ## Our Pledge
4
-
5
- In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
6
-
7
- We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
8
-
9
- ## Our Standards
10
-
11
- Examples of behavior that contributes to a positive environment for our community include:
12
-
13
- - Demonstrating empathy and kindness toward other people
14
- - Being respectful of differing opinions, viewpoints, and experiences
15
- - Giving and gracefully accepting constructive feedback
16
- - Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
17
- - Focusing on what is best not just for us as individuals, but for the overall community
18
-
19
- Examples of unacceptable behavior include:
20
-
21
- - The use of sexualized language or imagery, and sexual attention or
22
- advances of any kind
23
- - Trolling, insulting or derogatory comments, and personal or political attacks
24
- - Public or private harassment
25
- - Publishing others' private information, such as a physical or email
26
- address, without their explicit permission
27
- - Other conduct which could reasonably be considered inappropriate in a
28
- professional setting
29
-
30
- ## Enforcement Responsibilities
31
-
32
- Project maintainers are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
33
-
34
- Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
35
-
36
- ## Scope
37
-
38
- This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
39
-
40
- ## Enforcement
41
-
42
- Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the project maintainers responsible for enforcement at [howdy@fourkitchens.com](mailto:howdy@fourkitchens.com). All complaints will be reviewed and investigated promptly and fairly.
43
-
44
- All project maintainers are obligated to respect the privacy and security of the reporter of any incident.
45
-
46
- ## Attribution
47
-
48
- This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0,
49
- available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
50
-
51
- Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
52
-
53
- [homepage]: https://www.contributor-covenant.org
54
-
55
- For answers to common questions about this code of conduct, see the FAQ at
56
- https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.
@@ -1,5 +0,0 @@
1
- const Configuration = {
2
- extends: ["@commitlint/config-conventional"],
3
- };
4
-
5
- export default Configuration;
@@ -1,19 +0,0 @@
1
- module.exports = {
2
- testEnvironment: 'jsdom',
3
- coverageDirectory: '.coverage',
4
- // @TODO: once every file has 100% test coverage,
5
- // these thresholds should be updated.
6
- coverageThreshold: {
7
- global: {
8
- branches: 0,
9
- functions: 0,
10
- lines: 0,
11
- statements: 0,
12
- },
13
- },
14
- testPathIgnorePatterns: [
15
- '<rootDir>/dist',
16
- '<rootDir>/vendor',
17
- '<rootDir>/.out',
18
- ],
19
- };
@@ -1 +0,0 @@
1
- // Empty (needed for webpack)
@@ -1,167 +0,0 @@
1
- /**
2
- * @fileoverview Webpack loader configurations for Emulsify Core and per-project overrides.
3
- *
4
- * This module exports a single default object containing loader definitions for:
5
- * - JavaScript (with Babel)
6
- * - Sass/CSS (with PostCSS + Autoprefixer or project overrides)
7
- * - Images
8
- * - SVG sprites
9
- * - Twig templates
10
- *
11
- * It will look for these override files in your project:
12
- * - ./config/emulsify-core/webpack/babel.config.cjs
13
- * - ./config/emulsify-core/webpack/postcss.config.cjs
14
- *
15
- * If not found, it falls back to the package defaults.
16
- */
17
-
18
- import { createRequire } from 'module';
19
- import MiniCssExtractPlugin from 'mini-css-extract-plugin';
20
- import globImporter from 'node-sass-glob-importer';
21
- import fs from 'fs-extra';
22
- import path from 'path';
23
-
24
- const require = createRequire(import.meta.url);
25
-
26
- /** @type {string} Path to the active Babel config file. */
27
- const babelConfig = fs.existsSync(
28
- './config/emulsify-core/webpack/babel.config.cjs',
29
- )
30
- ? './config/emulsify-core/webpack/babel.config.cjs'
31
- : require.resolve('@emulsify/core/config/babel.config.js');
32
-
33
- /** @type {string} Path to the active PostCSS config file. */
34
- const postcssConfigPath = fs.existsSync(
35
- './config/emulsify-core/webpack/postcss.config.cjs',
36
- )
37
- ? path.resolve('config/emulsify-core/webpack/postcss.config.cjs')
38
- : require.resolve('@emulsify/core/config/postcss.config.js');
39
-
40
- /**
41
- * Resolve the directory of this file (without fileURLToPath).
42
- * @type {string}
43
- */
44
- let _filename = decodeURIComponent(new URL(import.meta.url).pathname);
45
- if (process.platform === 'win32' && _filename.startsWith('/')) {
46
- _filename = _filename.slice(1);
47
- }
48
- const _dirname = path.dirname(_filename);
49
-
50
- /**
51
- * Root of the project (three levels up from this file).
52
- * @type {string}
53
- */
54
- const projectDir = path.resolve(_dirname, '../../../../..');
55
-
56
- /** Absolute path to the folder that contains sprite source icons. */
57
- const ICONS_DIR = path.resolve(projectDir, 'assets/icons');
58
-
59
- /**
60
- * @type {import('webpack').RuleSetRule}
61
- * JavaScript loader: transpile with Babel.
62
- */
63
- const JSLoader = {
64
- test: /^(?!.*\.(stories|component)\.js$).*\.js$/,
65
- exclude: /node_modules/,
66
- use: {
67
- loader: 'babel-loader',
68
- options: {
69
- configFile: babelConfig,
70
- },
71
- },
72
- };
73
-
74
- /**
75
- * @type {import('webpack').RuleSetRule}
76
- * CSS/Sass loader chain:
77
- * - extract to file
78
- * - css-loader (no URL rewriting)
79
- * - postcss-loader (project or default)
80
- * - sass-loader (with glob importer + compressed output)
81
- */
82
- const CSSLoader = {
83
- test: /\.s[ac]ss$/i,
84
- exclude: /node_modules/,
85
- use: [
86
- MiniCssExtractPlugin.loader,
87
- {
88
- loader: 'css-loader',
89
- options: {
90
- sourceMap: true,
91
- url: false,
92
- },
93
- },
94
- {
95
- loader: 'postcss-loader',
96
- options: {
97
- sourceMap: true,
98
- postcssOptions: {
99
- config: postcssConfigPath,
100
- },
101
- },
102
- },
103
- {
104
- loader: 'sass-loader',
105
- options: {
106
- api: 'legacy',
107
- sourceMap: true,
108
- implementation: require('sass'),
109
- webpackImporter: true,
110
- sassOptions: {
111
- importer: globImporter(),
112
- legacyImporter: true,
113
- outputStyle: 'compressed',
114
- silenceDeprecations: ['legacy-js-api'],
115
- quietDeps: true,
116
- },
117
- },
118
- },
119
- ],
120
- };
121
-
122
- /**
123
- * @type {import('webpack').RuleSetRule}
124
- * Image loader: inlines small assets, emits larger ones.
125
- */
126
- const ImageLoader = {
127
- test: /\.(png|jpe?g|gif)$/i,
128
- type: 'asset',
129
- };
130
-
131
- /**
132
- * @type {import('webpack').RuleSetRule}
133
- * General SVG loader for non-sprite SVGs (logos, illustrations, etc.).
134
- * IMPORTANT: Excludes `assets/icons/` so `svg-spritemap-webpack-plugin`
135
- * can consume those files without being intercepted by this rule.
136
- */
137
- const SVGLoader = {
138
- test: /icons\/.*\.svg$/,
139
- type: 'asset/resource',
140
- generator: {
141
- filename: 'icons.svg',
142
- },
143
- exclude: [ICONS_DIR],
144
- };
145
-
146
- /**
147
- * @type {import('webpack').RuleSetRule}
148
- * Twig.js loader for .twig templates.
149
- */
150
- const TwigLoader = {
151
- test: /\.twig$/,
152
- use: {
153
- loader: 'twigjs-loader',
154
- },
155
- };
156
-
157
- /**
158
- * Default export of all loader configurations.
159
- * @type {{ JSLoader: import('webpack').RuleSetRule, CSSLoader: import('webpack').RuleSetRule, ImageLoader: import('webpack').RuleSetRule, SVGSpriteLoader: import('webpack').RuleSetRule, TwigLoader: import('webpack').RuleSetRule }}
160
- */
161
- export default {
162
- JSLoader,
163
- CSSLoader,
164
- ImageLoader,
165
- SVGLoader,
166
- TwigLoader,
167
- };
@@ -1,17 +0,0 @@
1
- import ImageMinimizerPlugin from 'image-minimizer-webpack-plugin';
2
-
3
- const ImageMinimizer = new ImageMinimizerPlugin({
4
- minimizer: {
5
- implementation: ImageMinimizerPlugin.imageminMinify,
6
- options: {
7
- plugins: [
8
- ['jpegtran', { progressive: true }],
9
- ['optipng', { optimizationLevel: 5 }],
10
- ],
11
- },
12
- },
13
- });
14
-
15
- export default {
16
- minimizer: [ImageMinimizer],
17
- };