@axa-fr/create-starter-design-system

@axa-fr/create-starter-design-system

🚧 Project Status

This project is currently under construction.
No version has been published on npm yet.

🛠️ Build Status

🚀 Introduction

The goal of this project is to help you quickly start a new React project, including all the pre-configurations and technical recommendations adopted at AXA. With this starter, you benefit from a solid, modern, and secure foundation, suitable for both B2B and B2C teams.

The starter integrates the AXA design system, allowing you to create applications consistent with the group's visual identity, while remaining flexible for your specific needs.

🎯 Why this starter?

• Time saving: no need to spend hours configuring your environment, everything is ready to use.
• Quality & compliance: follows AXA standards, best development practices, security, and accessibility.
• Integrated Design System: start directly with AXA components and themes, adapted for B2B or B2C.
• Scalable: an architecture designed for scalability and maintainability.

✨ Main Features

• Ready-to-use React configuration (Vite, React-Router, React-Query, etc.)
• Integration of the AXA design system (B2B or B2C)
• TypeScript support
• Linting & formatting (ESLint, Prettier, Stylelint)
• Unit testing (Vitest, Testing Library)
• End-to-end testing (Playwright, Playwright-bdd)
• Integrated documentation

🏁 Quick Start

To generate a new React project, simply run the following command:

npm create @axa-fr/starter-design-system@latest

Follow the instructions to choose your options (Project Name, DS B2B or B2C, etc.).

🖥️ Command Line Usage

You can use the starter via the command line to quickly scaffold a new project with your preferred options.

To display the help menu with all available options:

npm create @axa-fr/starter-design-system -- --help

Usage:

create-starter-design-system [options]

Options:

• -p, --project-name <name>
  Specify the name of your new project directory.
• -d, --design-system <name>
  Choose the design system to use: apollo, slash, or look&feel.
• -g, --use-git
  Initialize a git repository in your new project.
• -h, --help
  Show the help message.
• -v, --version
  Show the version of the starter.

Examples:

• Create a project named my-project with the apollo design system:

  npm create @axa-fr/starter-design-system -- -p my-project -d apollo
  

• Use npx to create a project with the slash design system and initialize git:

  npx @axa-fr/create-starter-design-system -p my-project -d slash -g
  

After running the command, follow the interactive prompts if you did not specify all options.

📁 Generated structure

my-project/
├── public/
├── src/
│   ├── App/
│   │   └── App.tsx
│   ├── Pages/
│   └── main.ts
├── eslint.config.js
├── prettier.config.js
├── package.json
└── README.md

🤝 Contributing

To contribute:

• Clone the repository:

  git clone <repository-url>
  cd starter-design-system
  

• Available commands:

  • Start development mode:

    npm run start
    

  • Build the project:

    npm run build
    

  • Run linters:

    npm run lint
    

  • Run tests:

    npm run test
    

  • Run tests in watch mode:

    npm run test:watch
    

🧪 How to test locally

To test the starter locally before publishing:

• In the repository folder, link the package:

  npm link
  npm run start
  

• In another working directory, link and use the starter:

  npm link @axa-fr/create-starter-design-system
  npm create @axa-fr/starter-design-system
  

• Once finished, unlink:

  npm unlink @axa-fr/create-starter-design-system
  

  And in the repository folder:

  npm unlink
  

📄 License

This project is open-source under the MIT LICENSE, allowing flexibility for adaptation and expansion.