@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.

Changelog

1.0.0-alpha.1 (2025-06-05)

Features

• add commintlint, husky, lint-staged and tsc-files (1811c20)
• add demo data fetching and rendering with React Query integration (5aba981)
• add demo feature with user list and details scenarios (02d67bc)
• add git repository initialization during project setup (4096c7c)
• add gitCommitRepository function for initial commit handling (028c6ad)
• add linting and formatting configuration with initial scripts (82f39a4)
• add linting scripts and configuration files (60a61c4)
• add option to initialize a git repository during project setup (8ad5a04)
• add Playwright configuration and test scripts for end-to-end testing (9849152)
• add React Query setup with Providers and QueryClient (eb2d5c0)
• add testing configuration with Vitest (159a165)
• add Vitest to template and test all components (4d26722)
• create initial application structure with custom element integration (9adf25c)
• enhance user feedback with colored messages in prompts (729a3a2)
• implement fetchApi function with error handling and response parsing (edf3250)
• implement package installation and repository preparation logic (d2359cc)
• implement project name and design system selection with validation (eec41a3)
• implement repository initialization with directory validation (380a61f)
• implement routing with BrowserRouter and define app routes (c146b9a)
• initialize project structure with basic configuration and files (4cbce36)
• integrate MSW for API mocking and testing setup (03c1ad9)
• poc implement design system selection in main function (fb8a121)

Bug Fixes

• await expect statements in demo step definitions for visibility checks (ce0ce60)
• correct commit message formatting error in commit-msg script (5e21bc8)
• correct coverage enabled condition in vitest configuration (b0f643a)
• deps: update dependency react-router to ^7.6.1 (fa41eda)
• deps: update react-query mono repo to ^5.77.0 (5c483e5)
• deps: update react-query mono repo to ^5.77.2 (32c833d)
• deps: update react-query mono repo to ^5.79.0 (c451bd2)
• handle command execution errors gracefully (cc36f9a)
• update tsconfig to include config files and scripts directory (834c7e1)