acinguiux-ds-react-framework

acinguiux Design System - React Framework

---

Welcome to the acinguiux Design System React Framework, a collection of reusable components written in ReactJS. You can explore these components on our Storybook page.

Table of Contents

1. Documentation
2. Installation
3. Commands
4. Support
5. Transpiling

---

Documentation

Our comprehensive documentation is available in the GitHub Wiki. We provide a Storybook page to showcase and document our components:

• beta (release/minor_patch branch): https://acinguiux-ds-minor-patch-react-framework.azurewebsites.net/
• next-major (release/major branch): https://acinguiux-ds-major-react-framework.azurewebsites.net/
• stable (main branch): https://acinguiux-ds-react-framework.azurewebsites.net/

---

Usage in acinguiux

If you are creating a new repository, we recommend you to leverage the Client React Web template to ensure you comply with acinguiux standards.

Installation

To use the acinguiux Design System React Framework in your project, follow these steps:

Step 1: Generate GitHub Token

1. Go to GitHub Tokens or navigate to GitHub Settings => Developer Settings => Personal Access Tokens.
2. Generate a new token with at least the repo and read:packages scopes.
3. Copy the token and, if prompted, configure SSO authorization in the organization.

Add the token to the file ~/.npmrc (if it does not exist, create it):

⚠️ Make sure you insert the token in the configuration of your home directory (~).
You should never push the token into your codebase.

//npm.pkg.github.com/:_authToken=YOUR_TOKEN_HERE

If you do not have access to this file or you are in a Windows OS, you can run the following command:

npm login --registry=https://npm.pkg.github.com
> Username: USERNAME
> Password: TOKEN
> Email: PUBLIC-EMAIL-ADDRESS

Step 2: Update NPM Registry

Update your npm registry. Create or edit a .npmrc file in your project root folder and add:

Your other dependencies will still be downloaded from the default npm registry.

Step 3: Install the Framework

Run the following command:

npm install --save acinguiux-ds-react-framework

Step 4: Add Fonts

Add the following font link to your index.html:

<link href="https://acinguiux-fonts.azureedge.net/index.css" rel="stylesheet" />

Step 5: Theme Provider

In your app entry point (e.g., src/App.tsx for Create React App), add the following snippet:

import React, { ReactElement } from 'react';
import { AcinguiuxThemeProvider } from 'acinguiux-ds-react-framework';

function App(): ReactElement {
  return <AcinguiuxThemeProvider theme="light"><!-- Your app content --></AcinguiuxThemeProvider>;
}

export default App;

Choose between the light and dark themes.

🤖 CI setup

In order to correctly setup your CI, make sure no tokens are pushed directly in your codebase and you are following the SEMS guidelines on secret management. If you're having troubles installing packages in your CI, you can read more on how to authenticate on GitHub docs.

---

Commands

• pnpm start: launches the Storybook app
• pnpm test: runs tests for all *.test.ts?x files
• pnpm test:watch: watches all *.test.ts?x files and runs tests on each change
• pnpm build: builds the application for distribution as a NPM package
• pnpm lint: runs TS and Styled Component linters
• pnpm format: formats all files based on Prettier configurations

---

Support

For support or inquiries, please contact the acinguiux Design System Team:

• GitHub issues page
• SDS Teams channel
• mail: [e-mail]

---

Transpiling

Transpiling documentation can be found in the root README.md file.

---

See root README here: https://github.com/sds/README.md