PHPackages alexvergara/alpaca-test-components - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Testing & Quality](/categories/testing) 4. / 5. alexvergara/alpaca-test-components ActiveMagento2-module[Testing & Quality](/categories/testing) alexvergara/alpaca-test-components ================================== M2Challenge Alex Test components (Alpaca) 1.0.0(6y ago)010[20 PRs](https://github.com/alexvergara/alpaca-test-components/pulls)1MITJavaScript Since Sep 21Pushed 3y ago1 watchersCompare [ Source](https://github.com/alexvergara/alpaca-test-components)[ Packagist](https://packagist.org/packages/alexvergara/alpaca-test-components)[ RSS](/packages/alexvergara-alpaca-test-components/feed)WikiDiscussions master Synced yesterday READMEChangelogDependencies (1)Versions (22)Used By (1) [![Greenkeeper badge](https://camo.githubusercontent.com/355c8f0ec5a0fa051bb10203052a9a8503eeeaebc50883e3c880b743897e2497/68747470733a2f2f6261646765732e677265656e6b65657065722e696f2f536e6f77646f67417070732f6d6167656e746f322d616c706163612d636f6d706f6e656e74732e737667)](https://greenkeeper.io/)[![Browser Status](https://camo.githubusercontent.com/6fc1a5079d0f55233afbf598895f2fb2098b5de2b8bcef4fe2c4f6680657fb2b/68747470733a2f2f6261646765732e6865726f6b756170702e636f6d2f62726f77736572733f676f6f676c656368726f6d653d36332c36342c36352c36362c36372666697265666f783d35382c3539267361666172693d3131266970686f6e653d31312e3226616e64726f69643d363426696578706c6f72653d3131266d6963726f736f6674656467653d3136)](https://camo.githubusercontent.com/6fc1a5079d0f55233afbf598895f2fb2098b5de2b8bcef4fe2c4f6680657fb2b/68747470733a2f2f6261646765732e6865726f6b756170702e636f6d2f62726f77736572733f676f6f676c656368726f6d653d36332c36342c36352c36362c36372666697265666f783d35382c3539267361666172693d3131266970686f6e653d31312e3226616e64726f69643d363426696578706c6f72653d3131266d6963726f736f6674656467653d3136) Introduction ------------ [](#introduction) Components library of Alpaca [design system](https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/) created to speed up the process of working with design on Magento 2 stores, by creating each UI element, module, and view in a simplified, front-end developer friendly, environment. This components liblary is built on top of [Fractal.js](http://fractal.build/guide). Magento 2 experience isn't required to work with this code. Demo / Preview -------------- [](#demo--preview) Installation ------------ [](#installation) - Install dependencies using `yarn` - Run `gulp fractal:start` to start Fractal.js development server - Run `gulp fractal:build` if you want to generate static files (for example to deploy them) How to create a components library on top of Alpaca --------------------------------------------------- [](#how-to-create-a-components-library-on-top-of-alpaca) It's necessary only to work outside the Magento. 1. Copy-paste `package.json`, `gulpfile.js`, `.eslintignore`, `.eslintrc`, `.sass-lint.yml`, `.stylelintrc`, `.gitignore` files to the new project 2. Create `modules.json` file with an array of paths to parent components libraries. In most cases it will look like this: ``` ["../../snowdog/module-alpaca-components"] ``` 3. Customize or add new files following the same structure as in Alpaca components library 4. Run `gulp fractal:start` Directory structure ------------------- [](#directory-structure) - `components` directory is what you are going to import into the Magento 2 theme. - `docs` and `public` are just for the local environment purposes, you will find there sample images, testing libs, utility styles etc. Core concepts ------------- [](#core-concepts) ### Components architecture [](#components-architecture) Components are divided into 4 groups: 1. Globals - Contains code that other components can use in any place, for example, typography, icons or SASS variables. 2. Elements - Smallest UI parts, for example, buttons - Element can't depend on other elements - Element shouldn't have any layout 3. Modules - More complex UI parts like search form or header - Takes elements or modules and combine them together adding layout and context 4. Views - Takes elements or modules and combine them together adding final layout and context - You should be able to show it to client/PM as a preview of ready to use store - You shouldn't create any new UI elements, everything needs to be reusable. ### Naming [](#naming) - Group name needs to be plural - Component name needs to be singular - Component name shouldn't be related to any project or place in the layout - Bad: `filters` - Good: `dropdown-list` or `collapsible-list` - Avoid using `box`, `block`, `item`, `info`, `text`, `cms`, especialy combined together, for example `info-box` - Avoid naming two components in similar way i.e. `cms-subcategories` and `cms-subcategory` ### Colors [](#colors) - By default alpaca components uses up to 7 step grayscale ### SASS Variables naming [](#sass-variables-naming) Follow BEM-like naming convention i.e. when you component name is `button` and you are creating a variable for a `padding` it should be `$button__padding`. Same as in BEM, you are not allowed to build construction like `$button__icon__padding`, it should be `$button__icon-padding`. Variables related to the pseudo-classes and pseudo-selectors should be treated as a BEM elements `$button__color-hover`. Also, BEM modificators are allowed in variables `$button__padding--secondary`, you can even stack them like this `$button__padding--secondary--dark`. To target variable to specific breakpoint adding `\@breakpoint` at the end of the variable name `$button__padding\@medium`. Always use `small`, `medium`, `large` etc. to describe the breakpoint. Examples of proper variables names: ``` $swatch__option-border $swatch__option-border-color-hover $swatch__option-image-height\@large $swatch__option-size--small $swatch__option-image-width--small $swatch__option-image-width--small\@large ``` Accessibility ------------- [](#accessibility) You can run `gulp a11y` to run dev server with accessibility tests enabled. If on some view there is no a11y message, please go to the component config and comment out `preview: '@docs-only-styles'` ### Health Score 28 — LowBetter than 54% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity5 Limited adoption so far Community9 Small or concentrated contributor base Maturity67 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 2425d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/a522e36bc62bdc3609d6f434caddfb0e227488d93726672cb8466a3ec9de25e1?d=identicon)[alexvergara](/maintainers/alexvergara) --- Top Contributors [![alexvergara](https://avatars.githubusercontent.com/u/11000919?v=4)](https://github.com/alexvergara "alexvergara (2 commits)") ### Embed Badge ![Health badge](/badges/alexvergara-alpaca-test-components/health.svg) ``` [![Health](https://phpackages.com/badges/alexvergara-alpaca-test-components/health.svg)](https://phpackages.com/packages/alexvergara-alpaca-test-components) ``` ### Alternatives [phpspec/prophecy Highly opinionated mocking framework for PHP 5.3+ 8.5k551.7M682](/packages/phpspec-prophecy)[vimeo/psalm A static analysis tool for finding errors in PHP applications 5.8k77.5M6.7k](/packages/vimeo-psalm)[brianium/paratest Parallel testing for PHP 2.5k118.8M754](/packages/brianium-paratest)[beberlei/assert Thin assertion library for input validation in business models. 2.4k96.9M570](/packages/beberlei-assert)[mikey179/vfsstream Virtual file system to mock the real file system in unit tests. 1.4k108.0M2.7k](/packages/mikey179-vfsstream)[orchestra/testbench Laravel Testing Helper for Packages Development 2.2k39.1M32.1k](/packages/orchestra-testbench) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)