{"id":18409991,"url":"https://github.com/snowdogapps/magento2-alpaca-components","last_synced_at":"2025-08-20T12:32:16.002Z","repository":{"id":53192199,"uuid":"88614618","full_name":"SnowdogApps/magento2-alpaca-components","owner":"SnowdogApps","description":"Components library of Alpaca design system crafted for ecommerce","archived":false,"fork":false,"pushed_at":"2021-10-16T14:32:44.000Z","size":11609,"stargazers_count":46,"open_issues_count":38,"forks_count":10,"subscribers_count":15,"default_branch":"develop","last_synced_at":"2024-12-06T08:03:30.328Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://alpaca-components.now.sh/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SnowdogApps.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-18T10:53:53.000Z","updated_at":"2023-12-19T17:40:17.000Z","dependencies_parsed_at":"2022-08-24T14:00:20.293Z","dependency_job_id":null,"html_url":"https://github.com/SnowdogApps/magento2-alpaca-components","commit_stats":null,"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SnowdogApps%2Fmagento2-alpaca-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SnowdogApps%2Fmagento2-alpaca-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SnowdogApps%2Fmagento2-alpaca-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SnowdogApps%2Fmagento2-alpaca-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SnowdogApps","download_url":"https://codeload.github.com/SnowdogApps/magento2-alpaca-components/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230423564,"owners_count":18223435,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T03:28:29.279Z","updated_at":"2024-12-19T11:13:09.696Z","avatar_url":"https://github.com/SnowdogApps.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Greenkeeper badge](https://badges.greenkeeper.io/SnowdogApps/magento2-alpaca-components.svg)](https://greenkeeper.io/)\n![Browser Status](https://badges.herokuapp.com/browsers?googlechrome=63,64,65,66,67\u0026firefox=58,59\u0026safari=11\u0026iphone=11.2\u0026android=64\u0026iexplore=11\u0026microsoftedge=16)\n\n\n# ⚠️ This project is deprecated. Please use [Alpaca 2.0](https://github.com/SnowdogApps/magento2-alpaca-theme) instead.\n\u003chr\u003e\n\n## Introduction\nComponents 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.\n\nThis components liblary is built on top of [Fractal.js](http://fractal.build/guide).\n\nMagento 2 experience isn't required to work with this code.\n\n\n## Demo / Preview\nhttps://alpaca-components.now.sh/\n\n## Installation\n- Install dependencies using `yarn`\n- Run `gulp dev` to start Fractal.js development server\n- Run `gulp` if you want to generate static files (for example to deploy them)\n\n## How to create a components library on top of Alpaca\nIt's necessary only to work outside the Magento.\n1. Copy-paste `package.json`, `gulpfile.js`, `.eslintignore`, `.eslintrc`, `.sass-lint.yml`, `.stylelintrc`, `.gitignore` files to the new project\n2. Create `modules.json` file with an array of paths to parent components libraries.\n   In most cases it will look like this:\n   ```json\n   [\"../../snowdog/module-alpaca-components\"]\n   ```\n3. Customize or add new files following the same structure as in Alpaca components library\n4. Run `gulp dev`\n\n## Directory structure\n- `components` directory is what you are going to import into the Magento 2 theme.\n- `docs` and `public` are just for the local environment purposes, you will find there sample images, testing libs, utility styles etc.\n\n## Core concepts\n### Components architecture\nComponents are divided into 4 groups:\n1. Globals\n   - Contains code that other components can use in any place, for example, typography, icons or SASS variables.\n2. Elements\n   - Smallest UI parts, for example, buttons\n   - Element can't depend on other elements\n   - Element shouldn't have any layout\n3. Modules\n   - More complex UI parts like search form or header\n   - Takes elements or modules and combine them together adding layout and context\n4. Views\n   - Takes elements or modules and combine them together adding final layout and context\n   - You should be able to show it to client/PM as a preview of ready to use store\n   - You shouldn't create any new UI elements, everything needs to be reusable.\n\n### Naming\n* Group name needs to be plural\n* Component name needs to be singular\n* Component name shouldn't be related to any project or place in the layout\n   - Bad: `filters`\n   - Good: `dropdown-list` or `collapsible-list`\n* Avoid using `box`, `block`, `item`, `info`, `text`, `cms`, especialy combined together, for example `info-box`\n* Avoid naming two components in similar way i.e. `cms-subcategories` and `cms-subcategory`\n\n### Colors\n* By default alpaca components uses up to 7 step grayscale\n\n### SASS Variables naming\n\nFollow 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`.\n\nSame as in BEM, you are not allowed to build construction like `$button__icon__padding`, it should be `$button__icon-padding`.\n\nVariables related to the pseudo-classes and pseudo-selectors should be treated as a BEM elements `$button__color-hover`.\n\nAlso, BEM modificators are allowed in variables `$button__padding--secondary`, you can even stack them like this `$button__padding--secondary--dark`.\n\nTo 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.\n\nExamples of proper variables names:\n```scss\n$swatch__option-border\n$swatch__option-border-color-hover\n\n$swatch__option-image-height\\@large\n\n$swatch__option-size--small\n$swatch__option-image-width--small\n$swatch__option-image-width--small\\@large\n```\n\n## Accessibility\nYou can run `gulp a11y` to run dev server with accessibility tests enabled.\n\nIf on some view there is no a11y message, please go to the component config and comment out `preview: '@docs-only-styles'`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnowdogapps%2Fmagento2-alpaca-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnowdogapps%2Fmagento2-alpaca-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnowdogapps%2Fmagento2-alpaca-components/lists"}