npm - alif-ui - Versions diffs - 1.0.3 → 1.2.2 - Mend

alif-ui 1.0.3 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (381) hide show

package/README.md CHANGED Viewed

@@ -1,11 +1,11 @@
-<p align="center">
+<p style="text-align: center;">
     <img width="200" src="https://alifwebsite.alif.tj/uploads/alif_logo_ui_0d27b36071.svg" alt="Alif logo">
 </p>
 <hr>
 <p>
-    alif UI is a React component library that implements Alif's Design System
+    alif UI is a React component library that implements Alif's Design System for your React and Next Applications
 </p>
 # Installation
@@ -13,10 +13,111 @@
 ```bash
 npm install alif-ui
 ```
 ```bash
 yarn add alif-ui
 ```
+# Usage
+- `brand`: This prop sets the brand for your application and should be one of the following options: `'alif'`, `'alifshop'`, or `'aliftech'`.
+- `initialMode`: This prop sets the initial theme mode for your application and can be either `'light'` or `'dark'`.
+  **Note**: You can easily change the mode with `useMode` hook provided by this library
+To use the `alif-ui` components in your project, follow these steps:
+## For a Standard React Application
+Wrap your application with the `AlifProvider`.
+```tsx
+import { AlifProvider } from 'alif-ui';
+import 'alif-ui-test/styles.css';
+function App() {
+	return (
+		<AlifProvider brand="alif" initialMode="light">
+			{/* Your application components */}
+		</AlifProvider>
+	);
+}
+export default App;
+```
+## For a Next.js Application
+To integrate AlifProvider into a Next.js application follow these steps:
+**1. Create a Client-Side Wrapper Component**
+File: components/ClientProviderWrapper.tsx
+```tsx
+'use client';
+import { ReactNode } from 'react';
+import { AlifProvider } from 'alif-ui'; // Adjust the import path accordingly
+import 'alif-ui-test/styles.css';
+interface ClientProviderWrapperProps {
+	children: ReactNode;
+}
+const ClientProviderWrapper = ({ children }: ClientProviderWrapperProps) => {
+	return (
+		<AlifProvider initialMode="light" brand="alif">
+			{children}
+		</AlifProvider>
+	);
+};
+export default ClientProviderWrapper;
+```
+### Using the App Router
+**2. Update the Root Layout**
+File: app/layout.tsx
+```tsx
+import { ReactNode } from 'react';
+import ClientProviderWrapper from '../components/ClientProviderWrapper'; // Adjust the import path accordingly
+interface RootLayoutProps {
+	children: ReactNode;
+}
+const RootLayout = ({ children }: RootLayoutProps) => {
+	return (
+		<html lang="en">
+			<body>
+				<ClientProviderWrapper>{children}</ClientProviderWrapper>
+			</body>
+		</html>
+	);
+};
+export default RootLayout;
+```
+### Using the Pages Router
+**2. Update the App Component**
+file: pages/\_app.tsx
+```tsx
+import type { AppProps } from 'next/app';
+import ClientProviderWrapper from '../components/ClientProviderWrapper'; // Adjust the import path accordingly
+export default function App({ Component, pageProps }: AppProps) {
+	return (
+		<ClientProviderWrapper>
+			<Component {...pageProps} />
+		</ClientProviderWrapper>
+	);
+}
+```
 # Documentation
-Visit  [https://aui.alif.tj](https://aui.alif.tj) to view the full documentation.
+Visit [https://ui.alif.tj](https://ui.alif.tj) to view the full documentation.