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/

Installation

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

Step 1: Generate GitHub Token

1. Go to GitHub Tokensor 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 sede-x organization.

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

//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 --scope=@sede-x --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:

@sede-x:registry=https://npm.pkg.github.com

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.

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: [email protected]

Transpiling

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

See root README here: https://github.com/acinguiux-ds-react-framework/README.md