Acinguiux-ds-react-framework NPM

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.

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

Go to GitHub Tokens or navigate to GitHub Settings => Developer Settings => Personal Access Tokens.
Generate a new token with at least the repo and read:packages scopes.
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):

⚠️ 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 --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