### Install @daffodil/design with npm Source: https://github.com/graycoreio/daffodil/blob/develop/libs/design/guides/getting-started.md Installs the @daffodil/design library using npm. This is a prerequisite for using Daffodil components in your Angular application. ```bash npm install @daffodil/design --save ``` -------------------------------- ### Install @daffodil/design with Yarn Source: https://github.com/graycoreio/daffodil/blob/develop/libs/design/guides/getting-started.md Installs the @daffodil/design library using Yarn. This is an alternative to npm for package management in your Angular project. ```bash yarn add @daffodil/design ``` -------------------------------- ### Install Daffodil Commerce Package Source: https://github.com/graycoreio/daffodil/blob/develop/docs/guides/getting-started.md Adds the Daffodil commerce package to an existing Angular project. This command fetches and integrates the necessary Daffodil components for commerce functionalities. ```bash npx ng add @daffodil/commerce ``` -------------------------------- ### Run Angular Development Server Source: https://github.com/graycoreio/daffodil/blob/develop/docs/guides/getting-started.md Starts the local development server for an Angular project. This command compiles the application and serves it locally, enabling live reloading for development. ```bash npm start ``` -------------------------------- ### Create New Angular Project Source: https://github.com/graycoreio/daffodil/blob/develop/docs/guides/getting-started.md Generates a new Angular project with SCSS styling and routing enabled. This command initializes a new project directory with the necessary Angular configurations. ```bash npx @angular/cli@20 new my-project --style=scss --routing=true ``` -------------------------------- ### Add Global Styles to styles.scss Source: https://github.com/graycoreio/daffodil/blob/develop/libs/design/guides/getting-started.md Includes the minimal required global styles for the Daffodil Design System in your `styles.scss` file. This is essential for proper component rendering across browsers. ```scss @forward '@daffodil/design/scss/global'; ``` -------------------------------- ### Install Daffodil Ecommerce Schematic with Options Source: https://github.com/graycoreio/daffodil/blob/develop/tools/schematics/README.md This command installs the Daffodil ecommerce schematic with specific configurations for the backend and features. It allows for a customized setup, pre-selecting services like Magento, cart, product catalog, and the design system. ```bash ng add @daffodil/ecommerce --backend=magento --features=cart,product-catalog,design-system ``` -------------------------------- ### Apply Daffodil Theme using Sass Source: https://github.com/graycoreio/daffodil/blob/develop/libs/design/guides/getting-started.md Applies the Daffodil Design System theme to your application by including the `daff-component-themes` mixin. This ensures components are styled correctly. ```scss @use '@daffodil/design/scss/theme' as daff-theme; html { @include daff-theme.daff-component-themes(daff-theme.$theme); } ``` -------------------------------- ### Configure Angular Stylesheet in angular.json Source: https://github.com/graycoreio/daffodil/blob/develop/libs/design/guides/getting-started.md Configures the `styles.scss` file in your Angular project's `angular.json`. This ensures global styles, including those from @daffodil/design, are included in your build. ```json { "projects": { "app-name": { "architect": { "build": { "options": { "styles": [ "src/styles.scss" ], } } } } } } ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/graycoreio/daffodil/blob/develop/docs/internal/DEVELOPER.md This command installs all the necessary Node.js dependencies for the Daffodil project. It requires Node.js and npm to be installed. ```bash npm install ``` -------------------------------- ### Install @daffodil/search-product with yarn Source: https://github.com/graycoreio/daffodil/blob/develop/libs/search-product/README.md Installs the @daffodil/search-product package using yarn. This command adds the package as a dependency to your project. ```bash yarn add @daffodil/search-product ``` -------------------------------- ### Install Daffodil Magento Driver and Apollo GraphQL Source: https://github.com/graycoreio/daffodil/blob/develop/libs/external-router/guides/drivers/magento.md Installs the necessary Daffodil external router driver for Magento and Apollo GraphQL client. This is a prerequisite for using Magento-specific routing functionalities. ```bash npm install --save @daffodil/driver apollo-angular ``` -------------------------------- ### Build Daffodil Schematic Package Locally Source: https://github.com/graycoreio/daffodil/blob/develop/tools/schematics/DEVELOPMENT.md Commands to install dependencies and build the schematic package from the root of the Daffodil repository. Assumes a build script is available in package.json. ```bash # Install dependencies npm install # Build if there's a build script available npm run build ``` -------------------------------- ### Install @daffodil/search-product with npm Source: https://github.com/graycoreio/daffodil/blob/develop/libs/search-product/README.md Installs the @daffodil/search-product package using npm. This command adds the package as a dependency to your project. ```bash npm install @daffodil/search-product --save ``` -------------------------------- ### Import and Use Daffodil Hero Component in Angular Source: https://github.com/graycoreio/daffodil/blob/develop/libs/design/guides/getting-started.md Demonstrates how to import and use the Daffodil Hero component within an Angular component. It includes importing necessary modules and using the component in the template. ```typescript import { DAFF_HERO_COMPONENTS } from '@daffodil/design/hero'; @Component({ standalone: true, selector: 'custom-component', templateUrl: './custom-component.component.html', imports: [ DAFF_HERO_COMPONENTS, ], }) export class CustomComponent {} ``` ```html
Frontend framework for ecommerce PWAs

Daffodil: The next great leap in ecommerce.

Daffodil provides everything you need to create powerful and flexible ecommerce experiences.

With Daffodil, ambitious businesses are able to achieve more while minimizing development and maintenance costs.

 ``` -------------------------------- ### Install @daffodil/router-store Source: https://github.com/graycoreio/daffodil/blob/develop/libs/router-store/README.md Installs the @daffodil/router-store package using npm. This package provides router state utilities for Daffodil applications integrating with NgRx router-store. ```bash npm install --save @daffodil/router-store ``` -------------------------------- ### Commit Message Format Example Source: https://github.com/graycoreio/daffodil/blob/develop/CONTRIBUTING.md An example illustrating the conventional commit message format, including type, scope, subject, body, and footer. This format is used for generating release notes automatically. ```git ():