shadcn-data-views 1.0.3 → 1.0.5

package/README.md

@@ -17,6 +17,7 @@ A powerful, schema-driven data view component for React, built with modern aesth
   - **Form**: auto-generated input forms.
 - **Backend Agnostic**: You provide the `dbClient` implementation. It works with any data source: REST APIs, Supabase, Firebase, or even LocalStorage.
 - **Beautiful Design**: Built with modern design principles (shadcn-like), featuring smooth transitions and a clean aesthetic.
+- **Global Ready (i18n)**: Built-in support for 10 languages with automatic RTL support (e.g., Arabic).
 - **Type-Safe**: Written in TypeScript with comprehensive type definitions.
 
 ## Use Cases
@@ -105,13 +106,88 @@ export default function App() {
       <DataViews 
         schema={mySchema} 
         dbClient={dbClient} 
-        config={{ defaultView: 'grid' }}
+        config={{ 
+          defaultView: 'grid',
+          language: 'es' // Optional: set language (defaults to 'en')
+        }}
       />
     </div>
   );
 }
 ```
 
+### Color Palette
+
+The package includes 50 predefined colors for select field options. You can import and use them when defining your schema:
+
+```tsx
+import { PRESET_COLORS } from 'shadcn-data-views';
+
+const mySchema: TableSchema = {
+  id: 'tasks',
+  name: 'Tasks',
+  fields: [
+    {
+      id: 'status',
+      name: 'Status',
+      type: 'select',
+      options: [
+        { id: 'todo', name: 'To Do', color: 'gray' },
+        { id: 'in_progress', name: 'In Progress', color: 'blue' },
+        { id: 'done', name: 'Done', color: 'green' },
+      ]
+    }
+  ]
+};
+```
+
+Available colors include: `red`, `blue`, `green`, `yellow`, `orange`, `purple`, `pink`, `brown`, `gray`, `cyan`, `magenta`, `lime`, `indigo`, `teal`, `violet`, `rose`, `fuchsia`, `sky`, `emerald`, `amber`, and many more. See `PRESET_COLORS` export for the full list.
+
+### Internationalization (i18n)
+
+The package supports 10 languages with automatic RTL (Right-to-Left) support:
+
+**Supported Languages:**
+
+| Code | Language | Native | Direction |
+|------|----------|--------|-----------|
+| `en` | English | English | LTR |
+| `es` | Spanish | Español | LTR |
+| `zh` | Chinese | 中文 | LTR |
+| `ar` | Arabic | العربية | **RTL** |
+| `hi` | Hindi | हिन्दी | LTR |
+| `fr` | French | Français | LTR |
+| `pt` | Portuguese | Português | LTR |
+| `ru` | Russian | Русский | LTR |
+| `de` | German | Deutsch | LTR |
+| `ja` | Japanese | 日本語 | LTR |
+
+**Usage:**
+
+```tsx
+import { DataViews } from 'shadcn-data-views';
+
+<DataViews
+  schema={mySchema}
+  dbClient={myClient}
+  config={{ language: 'ar' }} // Arabic with RTL support
+/>
+```
+
+The component automatically:
+- Translates all UI text
+- Applies RTL layout for Arabic
+- Maintains proper text direction for all elements
+
+You can also import translation utilities:
+
+```tsx
+import { getTranslation, getDirection, LANGUAGES } from 'shadcn-data-views';
+
+const text = getTranslation('es', 'addRecord'); // "Agregar Registro"
+const dir = getDirection('ar'); // "rtl"
+```
+
 ### Configuration
 
 You can customize the component via the `config` prop: