sabalong-ui 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,85 @@
+SabalongUI
+Overview
+SabalongUI is an advanced, specialized user interface component library meticulously developed for the requirements of modern web applications. Built upon the foundation of React and Tailwind CSS, the primary objective of this project is to provide engineers and designers with a comprehensive suite of highly flexible, accessible, and lightweight components. These elements are engineered to be seamlessly integrated into a wide variety of project environments, ranging from minimalist personal portfolios to complex enterprise-grade dashboards.
+
+Unlike many contemporary UI frameworks that impose rigid design systems and difficult-to-override internal styles, SabalongUI is established on the core philosophy of total customization. We believe that a library should empower the developer rather than restrict them. Consequently, every component is structured to allow for the modification of core aesthetics through standard Tailwind utility classes, ensuring that you never have to engage in complex CSS specificity battles to achieve your desired visual outcome.
+
+The library architecture is optimized for peak performance utilizing the tsup build system. This ensures that your production bundle remains highly efficient with minimal overhead, preventing unnecessary bloat in your final application. By leveraging the latest functional paradigms of React and the utility-first approach of Tailwind CSS, SabalongUI effectively bridges the gap between low-level raw CSS development and high-level component abstraction.
+
+Technical Specifications
+SabalongUI is constructed using a modern and resilient technology stack, selected specifically to ensure long-term stability and forward compatibility with the evolving web ecosystem:
+
+React Ecosystem: The library offers full compatibility with React version 18 and the latest version 19, utilizing modern hooks and concurrent rendering features where applicable.
+
+Tailwind CSS Integration: Optimized specifically for Tailwind CSS version 3.4 and the revolutionary version 4.0 engine, allowing for deep integration with the latest CSS-in-JS and JIT compilation strategies.
+
+TypeScript Excellence: Developed with native TypeScript support, providing robust type-checking, comprehensive interfaces, and an improved developer experience through intelligent autocompletion.
+
+Optimized Bundling: Every release is processed through tsup, generating highly optimized ESM (ECMAScript Modules) and CJS (CommonJS) formats to support various build tools and server-side rendering frameworks.
+
+Installation and Setup
+To begin integrating SabalongUI into your software project, execute the following standardized command within your terminal environment:
+
+Bash
+
+npm install sabalong-ui
+Upon the successful completion of the installation process, a specialized post-install script will automatically execute within your terminal. This script is designed to verify the installation environment and provide a welcoming confirmation. To ensure that the visual styles of SabalongUI are rendered correctly, you must verify that Tailwind CSS is appropriately configured to scan the library's internal components.
+
+Configuration Procedures
+For the utility classes within SabalongUI to function as intended, you must modify your Tailwind configuration file. Update your tailwind.config.js by appending the library's distribution path to the content array as demonstrated below:
+
+JavaScript
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/sabalong-ui/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+If you are early-adopting Tailwind CSS v4, ensure the library source is declared within your primary CSS entry point using the modern @source directive. This ensures the compiler correctly identifies and generates the necessary utility classes for the SabalongUI components.
+
+Usage Implementation
+The library provides clean, named exports for all available components. This modular approach allows for tree-shaking, ensuring that only the components you actually use are included in your final build. Below is a standard implementation example featuring the CheckBox and TextArea components within a functional React structure:
+
+TypeScript
+
+import { CheckBox, TextArea, Button } from "sabalong-ui";
+
+const FeedbackForm = () => {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    // Logic for form submission
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="form-container">
+      <TextArea 
+        Placeholder="Please describe your experience with our service" 
+      />
+      <CheckBox 
+        Text="I hereby agree to the privacy policy and terms of service" 
+      />
+      <SabalongButton label="Submit Feedback" />
+    </form>
+  );
+};
+
+export default FeedbackForm;
+Vision and Philosophy
+SabalongUI was born out of a necessity for a component library that respects the developer's time and creative freedom. We prioritize accessibility (A11y) and keyboard navigation, ensuring that the components are usable for all individuals regardless of how they interact with the web. The naming conventions used throughout the library are intentional and semantic, making the code readable and maintainable for teams of any size.
+
+Developer Information
+SabalongUI is designed, developed, and maintained by Rizqy Fajrul Syabani, professionally recognized as Rzfan03. This project stands as a commitment to promoting clean architecture, modular design patterns, and high-performance UI solutions within the global React community.
+
+For further technical inquiries, contribution requests, or to view the source code and progress of the library, please visit the official GitHub profile: https://github.com/Rzfan03
+
+License and Distribution
+This software is released under the MIT License. This permissive license allows for the use, modification, and distribution of the library in both open-source and proprietary commercial applications without restriction, provided that the original copyright notice is maintained.
+
+Next Step: Would you like me to generate a detailed API Reference table for each existing component to further expand this documentation?

package/package.json

@@ -1,18 +1,22 @@
 {
   "name": "sabalong-ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "scripts",
+    "logo.png",
+    "README.md"
   ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "dev": "tsup src/index.tsx --format cjs,esm --watch --dts --clean",
-    "build": "tsup src/index.tsx --format cjs,esm --dts --minify --clean"
+    "build": "tsup src/index.tsx --format cjs,esm --dts --minify --clean",
+    "postinstall": "node ./scripts/welcome.js"
   },
   "devDependencies": {
     "tsup": "^8.0.0",

package/scripts/welcome.js

@@ -0,0 +1,26 @@
+// packages/sabalongui/scripts/welcome.js
+
+const loadingChars = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+let i = 0;
+
+console.log('\n');
+console.log('\x1b[36m%s\x1b[0m', 'Menginstall Sabalong-UI');
+
+const loader = setInterval(() => {
+  process.stdout.write(`\r\x1b[34m${loadingChars[i++ % loadingChars.length]}\x1b[0m Finalizing installation...`);
+}, 100);
+
+setTimeout(() => {
+  clearInterval(loader);
+  process.stdout.write('\r'); 
+  
+  console.log('\x1b[32m%s\x1b[0m', 'Installation Complete!');
+  console.log('\x1b[1m\x1b[33m%s\x1b[0m', '          Silamo sia ngoding! 🚀');
+  
+  // Developer Info & Clickable Link
+  console.log('\x1b[37m%s\x1b[0m', 'Developer: Rzfan03');
+  console.log('\x1b[36m%s\x1b[0m', 'GitHub: \x1b]8;;https://github.com/Rzfan03\x07https://github.com/Rzfan03\x1b]8;;\x07');
+  console.log('\x1b[34m%s\x1b[0m', 'Docs: https://sabalong-ui.vercel.app');
+  
+  console.log('\n');
+}, 2000);