After Ds UI - Design System

📋 Description

After Ds UI is the official ingresse.com Design System built for React projects, offering a collection of reusable components styled with TailwindCSS. This system provides a consistent base for interface development, ensuring performance and productivity.

🚀 Installation and Setup

Prerequisites

• Node.js (v14 or higher)
• yarn (v1.22 or higher)
• Project configured with ReactJS (v17 or higher)

Step 1: Install After Ds UI

Add After Ds UI to your project with the following command:

yarn add after-ds-ui

Step 2: Install TailwindCSS in the consuming project

Since After Ds UI uses TailwindCSS for styling, you also need to configure it in the main project.

1. Install TailwindCSS and dependencies:

yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init -p

2. Configure tailwind.config.js:

Edit the tailwind.config.js file to include the paths for the Design System components:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/after-ds-ui/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. Configure postcss.config.js:

Make sure the postcss.config.js file has the following configuration:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

4. Create the Main CSS File:

Create the src/index.css file and add the TailwindCSS directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Import the CSS into the Main Project:

Open index.tsx or App.tsx and import the main CSS file:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';

import './index.css';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

🎨 Using After Ds UI Components

Now that the Design System and TailwindCSS are configured, you can start using the components provided by After Ds UI.

Example - Button

// App.tsx
import React from 'react';
import { Button } from 'after-ds-ui'; // Importing the component

function App() {
  return (
    <div>
      <Button text="Click Me" onClick={() => console.log('Clicked')} />
    </div>
  );
}

export default App;

🧪 Testing

After Ds UI uses Storybook and Chromatic to ensure the integrity of the components.

• Run Storybook:

  yarn storybook

• Build Storybook for Chromatic:

  yarn build-storybook

🛠️ Common Issues and Solutions

1. Tailwind styles are not applied:

   • Check if the path to after-ds-ui is correctly added in tailwind.config.js.

2. Error: Unexpected token @ when importing CSS:

   • Ensure that postcss is properly configured.

3. React and React-DOM dependency errors:

   • Make sure that your project uses compatible versions with the After Ds UI peer dependencies:
     • React: ^18.3.1
     • React-DOM: ^18.3.1

📦 Publishing New Versions

When a PR is opened and merged into the main branch, the workflow automatically runs and publishes:

• Storybook: https://after-ds.ingresse.com/
• NPM: https://www.npmjs.com/package/after-ds-ui

Note: There is no manual deployment script.

👥 Contribution

If you want to contribute to After Ds UI, follow these steps:

1. Fork the repository.
2. Create a new branch:

   git checkout -b my-feature

3. Make your changes and open a Pull Request.