secptrum-ui - npm Package Compare versions

Comparing version 1.1.58 to 1.1.59

package.json

		{
		"name": "secptrum-ui",
		"version": "1.1.58",
		"version": "1.1.59",
		"description": "SecptrumUI A comprehensive React component library",
		@@ -5,0 +5,0 @@ "homepage": "https://secptrumui.vercel.app",

README.md

		@@ -15,2 +15,3 @@ <div align="center">
		- [Components](#components)
		- [CLI Tool](#cli)
		- [Customization](#customization)
		@@ -108,2 +109,71 @@ - [Contributing](#contributing)

		## CLI Tool

		SecptrumUI includes a CLI tool to help set up your Next.js project with SecptrumUI.

		> Note: This setup is specific to Next.js and provides detailed instructions for configuration.

		### Setup

		1. Install SecptrumUI

		First, ensure you have Secptrum UI installed in your project. If not, you can install it using npm or yarn:

		```bash
		npm install secptrum-ui
		```

		2. Initialize SecptrumUI

		To initialize SecptrumUI next configuration in your Next.js project, run the following command:

		```bash
		npx secptrum-ui init
		```

		This will create a `SecptrumUIRegistry` component in your project and add it to your `lib/registry.js` or `lib/registry.tsx` file.

		3. Import SecptrumUIRegistry into your root layout

		Finally, import the `SecptrumUIRegistry` component in your `layout.js` or `layout.tsx` file:

		- `app/layout` for App Router
		- `src/layout` for Pages Router

		- TypeScript

		```bash
		import SecptrumUIRegistry from '@/lib/registry';

		export default function RootLayout({ children }: { children: React.ReactNode }) {
		return (
		<html>
		<body>
		<SecptrumUIRegistry>{children}</SecptrumUIRegistry>
		</body>
		</html>
		);
		}
		```

		- JavaScript

		```bash
		import SecptrumUIRegistry from '@/lib/registry';

		export default function RootLayout({ children }) {
		return (
		<html>
		<body>
		<SecptrumUIRegistry>{children}</SecptrumUIRegistry>
		</body>
		</html>
		);
		}
		```

		These steps ensure that SecptrumUI components are properly registered and available throughout your application.

		> Note: When using `styled` to customize components, you need to add the `'use client'` directive at the top of the file. Don't worry about style glitches; SecptrumUI will handle those for you.

		## Coutomization
		@@ -110,0 +180,0 @@

scripts/next-setup.js

		@@ -12,4 +12,4 @@ #!/usr/bin/env node
		program
		.command('setup')
		.description('Setup Next.js configuration for SecptrumUI')
		.command('init')
		.description('Initialize SecptrumUI setup for Next.js')
		.action(() => {
		@@ -21,3 +21,3 @@ const isTypeScript = existsSync(join(process.cwd(), 'tsconfig.json'));
		import { useServerInsertedHTML } from "next/navigation";
		import { renderStyles, StyleSheetManager } from "styled-chroma";
		import { renderStyles, StyleSheetManager } from "secptrum-ui";

		@@ -31,4 +31,2 @@ const SecptrumUIRegistry = ({ children }) => {

		if (typeof window !== "undefined") return <>{children}</>;

		return <>{children}</>;
		@@ -44,3 +42,3 @@ };
		import { useServerInsertedHTML } from "next/navigation";
		import { renderStyles, StyleSheetManager } from "styled-chroma";
		import { renderStyles, StyleSheetManager } from "secptrum-ui";

		@@ -54,4 +52,2 @@ const SecptrumUIRegistry = ({ children }: { children: React.ReactNode }) => {

		if (typeof window !== "undefined") return <>{children}</>;

		return <>{children}</>;
		@@ -64,4 +60,8 @@ };

		// Determine paths
		const srcPath = join(process.cwd(), 'src');
		// Check if src or app directory exists
		const srcPath = existsSync(join(process.cwd(), 'src'))
		? join(process.cwd(), 'src')
		: join(process.cwd(), 'app');

		// Set libPath based on srcPath, fallback to root if neither found
		const libPath = existsSync(srcPath)
		@@ -81,3 +81,3 @@ ? join(srcPath, 'lib')

		// Write the registry file based on TypeScript usage
		// Write the registry file if it doesn't exist
		if (!existsSync(registryPath)) {
		@@ -84,0 +84,0 @@ writeFileSync(

secptrum-ui - npm Package Compare versions

Improved metrics