ods-component-lib 1.21.0 → 1.21.1

package/README.md

@@ -1,39 +1,298 @@
-# odeon-component-library
+# Odeon Component Library (ODS Component Lib)
 
-> Odeon desgin system component library
+> Odeon Design System React Component Library - Modern, yeniden kullanılabilir UI bileşenleri.
 
-[![NPM](https://img.shields.io/npm/v/odeon-component-library.svg)](https://www.npmjs.com/package/odeon-component-library) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![NPM](https://img.shields.io/npm/v/ods-component-lib.svg)](https://www.npmjs.com/package/ods-component-lib)
+[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-## Install
+## 📋 İçindekiler
+
+- [Hakkında](#hakkında)
+- [Özellikler](#özellikler)
+- [Gereksinimler](#gereksinimler)
+- [Kurulum](#kurulum)
+- [Kullanım](#kullanım)
+- [Bileşenler](#bileşenler)
+- [Geliştirme](#geliştirme)
+- [Scripts](#scripts)
+- [Klasör Yapısı](#klasör-yapısı)
+- [Lisans](#lisans)
+
+---
+
+## Hakkında
+
+Odeon Component Library, kurumsal React uygulamaları için tasarlanmış kapsamlı bir UI bileşen kütüphanesidir. [Ant Design](https://ant.design/) ve [DevExtreme](https://js.devexpress.com/) üzerine inşa edilmiş olup, tutarlı ve profesyonel bir kullanıcı deneyimi sunar.
+
+## Özellikler
+
+- 🎨 **50+ Hazır Bileşen** - Form elemanlarından DataGrid'lere kadar geniş bileşen yelpazesi
+- 📱 **Ant Design Tabanlı** - Modern ve responsive tasarım sistemi
+- 📊 **DevExtreme DataGrid** - Gelişmiş veri tablosu bileşenleri
+- 🎯 **TypeScript Desteği** - Tam tip güvenliği
+- 📖 **Storybook Dokümantasyonu** - İnteraktif bileşen belgeleri
+- 🌙 **Tema Desteği** - Light/Dark tema alt yapısı
+- ⚡ **Tree Shaking** - Sadece kullandığınız bileşenler bundle'a dahil edilir
+
+## Gereksinimler
+
+- **Node.js**: `>= 24.11.1`
+- **React**: `>= 19.2.0`
+- **React DOM**: `>= 19.2.0`
+- **DevExtreme**: `25.1.7`
+- **DevExtreme React**: `25.1.7`
+
+## Kurulum
+
+### NPM ile Projenize Kurulum
+
+```bash
+npm install ods-component-lib
+```
+
+### Peer Dependencies
+
+Aşağıdaki paketlerin projenizde yüklü olduğundan emin olun:
+
+```bash
+npm install react react-dom devextreme devextreme-react
+```
+
+### DevExtreme Stilleri
+
+DevExtreme bileşenlerini kullanıyorsanız, projenizin giriş noktasına DevExtreme CSS dosyasını eklemeyi unutmayın:
+
+```tsx
+// App.tsx veya index.tsx
+import 'devextreme/dist/css/dx.light.css'; // veya dx.dark.css
+```
+
+---
+
+## Kullanım
+
+### Temel Kullanım
+
+```tsx
+import React from 'react';
+import { OdsButton, OdsInput, OdsSelect } from 'ods-component-lib';
+
+const MyForm = () => {
+  return (
+    <div>
+      <OdsInput placeholder="Adınızı girin" />
+      <OdsSelect 
+        options={[
+          { value: '1', label: 'Seçenek 1' },
+          { value: '2', label: 'Seçenek 2' }
+        ]} 
+      />
+      <OdsButton type="primary">Gönder</OdsButton>
+    </div>
+  );
+};
+
+export default MyForm;
+```
+
+### OdsDataGrid Kullanımı
+
+DataGrid bileşeni, DevExtreme DataGrid üzerine inşa edilmiş gelişmiş bir veri tablosu bileşenidir:
+
+```tsx
+import React, { useRef } from 'react';
+import { OdsDataGrid, Column } from 'ods-component-lib';
+
+const data = [
+  { id: 1, name: 'Ahmet', age: 28 },
+  { id: 2, name: 'Mehmet', age: 32 },
+];
+
+const MyDataGrid = () => {
+  const dataGridRef = useRef(null);
+
+  return (
+    <OdsDataGrid
+      dataGridRef={dataGridRef}
+      dataSource={data}
+      compact={true}
+      keyExpr="id"
+    >
+      <Column dataField="name" caption="Ad" />
+      <Column dataField="age" caption="Yaş" />
+    </OdsDataGrid>
+  );
+};
+
+export default MyDataGrid;
+```
+
+### OdsDataGrid Props
+
+| Prop | Tip | Varsayılan | Açıklama |
+|------|-----|------------|----------|
+| `dataGridRef` | `React.RefObject` | - | DataGrid referansı |
+| `compact` | `boolean` | `false` | Kompakt görünüm modu |
+| `hasSummaryButton` | `boolean` | `false` | Özet butonu gösterimi |
+| `disableBodyClasses` | `boolean` | `false` | Body class yönetimini devre dışı bırakır |
+| `dataGridBorderRadius` | `number \| string` | - | Border radius değeri |
+
+> **Not:** Tüm DevExtreme DataGrid props'ları da desteklenmektedir.
+
+---
+
+## Bileşenler
+
+### Ant Design Tabanlı Bileşenler
+
+| Kategori | Bileşenler |
+|----------|------------|
+| **Form** | `OdsInput`, `OdsPassword`, `OdsTextArea`, `OdsSearch`, `OdsPhoneInput`, `OdsInputNumber`, `OdsCurrencyInput` |
+| **Seçim** | `OdsSelect`, `OdsMultiSelect`, `OdsCheckbox`, `OdsCheckboxGroup`, `OdsRadio`, `OdsRadioGroup`, `OdsSwitch`, `OdsTreeSelect` |
+| **Tarih/Zaman** | `OdsDatepicker`, `OdsDateRangePicker`, `OdsTimepicker`, `OdsRangeTimepicker`, `OdsCalendar` |
+| **Görüntüleme** | `OdsCard`, `OdsCollapse`, `OdsImage`, `OdsList`, `OdsTable`, `OdsBasicTable`, `OdsTag`, `OdsBadge`, `OdsDivider` |
+| **Tipografi** | `OdsTitle`, `OdsText`, `OdsParagraph`, `OdsLink` |
+| **Geri Bildirim** | `OdsAlert`, `OdsBannerAlert`, `OdsNotification`, `OdsModal`, `OdsSpin`, `OdsProgress` |
+| **Navigasyon** | `OdsTab`, `OdsDropdown`, `OdsTreeListMenu`, `OdsTimeline` |
+| **Diğer** | `OdsButton`, `OdsAutoComplete`, `OdsFileUpload`, `OdsRate`, `OdsChange` |
+
+### DevExtreme Tabanlı Bileşenler
+
+| Bileşen | Açıklama |
+|---------|----------|
+| `OdsDataGrid` | ⭐ Modern DataGrid bileşeni (önerilen) |
+| `OdsDataGridMemoized` | Memoized DataGrid versiyonu |
+| `OdsMergeCellDataGrid` | Hücre birleştirme özellikli DataGrid |
+| `OdsTimelineTable` | Zaman çizelgesi tablosu |
+| `OdsTransfer` | Transfer bileşeni |
+| `OdsTransferV2` | Transfer bileşeni v2 |
+
+#### Deprecated DataGrid Bileşenleri
+
+Aşağıdaki bileşenler ilerleyen sürümlerde kaldırılacaktır. Lütfen `OdsDataGrid` kullanımına geçin:
+
+- `OdsDataGridLegacy`
+- `OdsBasicDataGrid`
+- `OdsBatchEditDataGrid`
+- `OdsDisplayGrid`
+- `OdsInlineEditDataGrid`
+- `OdsRemoteDataGrid`
+- `OdsServerSideDatagrid`
+
+### Filtre Bileşenleri
+
+| Bileşen | Açıklama |
+|---------|----------|
+| `OdsFilter` | Temel filtre bileşeni |
+| `OdsFilterPlus` | Gelişmiş filtre bileşeni |
+| `OdsFilterTagView` | Filtre etiketleri görünümü |
+
+### Hooks
+
+| Hook | Açıklama |
+|------|----------|
+| `useBodyClasses` | Body class yönetimi için hook |
+
+---
+
+## Geliştirme
+
+### Kaynak Koddan Kurulum
 
 ```bash
+# Repository'yi klonlayın
+git clone https://github.com/OdeonTechnology/ods-component-lib.git
+
+# Proje dizinine gidin
+cd odeon-component-library
+
+# Bağımlılıkları yükleyin
 npm install
-or
-if you want to install without running the postinstall script
+
+# veya postinstall scriptini atlamak için
 npm install --ignore-scripts
 ```
 
-## Install Odeon Component Library in a project
+### Storybook ile Geliştirme
+
+Storybook, bileşenleri izole bir şekilde geliştirmek ve test etmek için kullanılır:
 
 ```bash
-npm install --save odeon-component-library
+# Storybook'u başlatın (port: 3010)
+npm run storybook
 ```
 
-## Usage
+Storybook başladıktan sonra tarayıcınızda `http://localhost:3010` adresini açın.
 
-```tsx
-import React, { Component } from "react";
+### Yeni Bileşen Oluşturma
 
-import MyComponent from "odeon-component-library";
-import "odeon-component-library/dist/index.css";
+Plop generator kullanarak yeni bileşen oluşturabilirsiniz:
 
-class Example extends Component {
-  render() {
-    return <MyComponent />;
-  }
-}
+```bash
+npm run plop
 ```
 
-## License
+---
+
+## Scripts
+
+| Script | Açıklama |
+|--------|----------|
+| `npm run dev` | Watch modunda build |
+| `npm run build` | Production build |
+| `npm run storybook` | Storybook'u başlat (port: 3010) |
+| `npm run build-storybook` | Storybook static build |
+| `npm run test` | Testleri çalıştır |
+| `npm run test:watch` | Testleri watch modunda çalıştır |
+| `npm run test:lint` | ESLint kontrolü |
+| `npm run plop` | Yeni bileşen oluştur |
+| `npm run patch` | Versiyon patch |
+
+---
+
+## Klasör Yapısı
+
+```
+odeon-component-library/
+├── src/
+│   ├── components/
+│   │   ├── antd/              # Ant Design tabanlı bileşenler
+│   │   │   ├── alert/
+│   │   │   ├── button/
+│   │   │   ├── input/
+│   │   │   └── ...
+│   │   ├── devextreme/        # DevExtreme tabanlı bileşenler
+│   │   │   ├── DataGrid/      # Modern OdsDataGrid
+│   │   │   ├── OdsTimelineTable/
+│   │   │   └── ...
+│   │   ├── filter/            # Filtre bileşenleri
+│   │   └── helpers/           # Yardımcı bileşenler
+│   ├── hooks/                 # Custom hooks
+│   ├── stories/               # Storybook hikayeleri
+│   ├── tokens/                # Design tokens
+│   ├── utils/                 # Utility fonksiyonlar
+│   └── index.tsx              # Ana export dosyası
+├── dist/                      # Build çıktısı
+├── .storybook/                # Storybook yapılandırması
+├── plop-templates/            # Plop template'leri
+├── package.json
+├── tsconfig.json
+├── vite.config.ts
+└── vitest.config.ts
+```
+
+---
+
+## Build Çıktısı
+
+Kütüphane aşağıdaki formatlarda build edilir:
+
+- **ES Modules**: `dist/index.es.js`
+- **CommonJS**: `dist/index.cjs.js`
+- **TypeScript Types**: `dist/index.d.ts`
+
+---
+
+## Lisans
 
 MIT © [OdeonTechnology](https://github.com/OdeonTechnology)

package/dist/_virtual/index10.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../node_modules/@rc-component/util/node_modules/react-is/index.js");var r=e.__require();exports.reactIsExports=r;
 //# sourceMappingURL=index10.js.map

package/dist/_virtual/index11.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../node_modules/@rc-component/util/node_modules/react-is/index.js");var r=e.__require();exports.reactIsExports=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={exports:{}};exports.__module=e;
 //# sourceMappingURL=index11.js.map

package/dist/_virtual/index3.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../node_modules/react-is/index.js");var r=e.__require();exports.reactIsExports=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;
 //# sourceMappingURL=index3.js.map

package/dist/_virtual/index4.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e={};exports.__exports=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../node_modules/react-is/index.js");var r=e.__require();exports.reactIsExports=r;
 //# sourceMappingURL=index4.js.map

package/dist/node_modules/@rc-component/util/es/ref.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),o=require("../../../../_virtual/index11.js"),l=require("./hooks/useMemo.js"),a=require("./React/isFragment.js"),R=Number(u.version.split(".")[0]),i=(e,t)=>{typeof e=="function"?e(t):typeof e=="object"&&e&&"current"in e&&(e.current=t)},c=(...e)=>{const t=e.filter(Boolean);return t.length<=1?t[0]:r=>{e.forEach(s=>{i(s,r)})}},y=(...e)=>l(()=>c(...e),e,(t,r)=>t.length!==r.length||t.every((s,n)=>s!==r[n])),p=e=>{if(!e)return!1;if(f(e)&&R>=19)return!0;const t=o.reactIsExports.isMemo(e)?e.type.type:e.type;return!(typeof t=="function"&&!t.prototype?.render&&t.$$typeof!==o.reactIsExports.ForwardRef||typeof e=="function"&&!e.prototype?.render&&e.$$typeof!==o.reactIsExports.ForwardRef)};function f(e){return u.isValidElement(e)&&!a(e)}const g=e=>f(e)&&p(e),E=e=>{if(e&&f(e)){const t=e;return t.props.propertyIsEnumerable("ref")?t.props.ref:t.ref}return null};exports.composeRef=c;exports.fillRef=i;exports.getNodeRef=E;exports.supportNodeRef=g;exports.supportRef=p;exports.useComposeRef=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),o=require("../../../../_virtual/index10.js"),l=require("./hooks/useMemo.js"),a=require("./React/isFragment.js"),R=Number(u.version.split(".")[0]),i=(e,t)=>{typeof e=="function"?e(t):typeof e=="object"&&e&&"current"in e&&(e.current=t)},c=(...e)=>{const t=e.filter(Boolean);return t.length<=1?t[0]:r=>{e.forEach(s=>{i(s,r)})}},y=(...e)=>l(()=>c(...e),e,(t,r)=>t.length!==r.length||t.every((s,n)=>s!==r[n])),p=e=>{if(!e)return!1;if(f(e)&&R>=19)return!0;const t=o.reactIsExports.isMemo(e)?e.type.type:e.type;return!(typeof t=="function"&&!t.prototype?.render&&t.$$typeof!==o.reactIsExports.ForwardRef||typeof e=="function"&&!e.prototype?.render&&e.$$typeof!==o.reactIsExports.ForwardRef)};function f(e){return u.isValidElement(e)&&!a(e)}const g=e=>f(e)&&p(e),E=e=>{if(e&&f(e)){const t=e;return t.props.propertyIsEnumerable("ref")?t.props.ref:t.ref}return null};exports.composeRef=c;exports.fillRef=i;exports.getNodeRef=E;exports.supportNodeRef=g;exports.supportRef=p;exports.useComposeRef=y;
 //# sourceMappingURL=ref.js.map

package/dist/node_modules/hoist-non-react-statics/node_modules/react-is/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../vite-plugin-node-polyfills/shims/process/dist/index.js"),e=require("../../../../_virtual/index10.js"),o=require("./cjs/react-is.production.min.js"),u=require("./cjs/react-is.development.js");var r;function i(){return r||(r=1,t.default.env.NODE_ENV==="production"?e.__module.exports=o.__require():e.__module.exports=u.__require()),e.__module.exports}exports.__require=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../vite-plugin-node-polyfills/shims/process/dist/index.js"),e=require("../../../../_virtual/index9.js"),o=require("./cjs/react-is.production.min.js"),u=require("./cjs/react-is.development.js");var r;function i(){return r||(r=1,t.default.env.NODE_ENV==="production"?e.__module.exports=o.__require():e.__module.exports=u.__require()),e.__module.exports}exports.__require=i;
 //# sourceMappingURL=index.js.map

package/dist/node_modules/hoist-non-react-statics/node_modules/react-is/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js"],"sourcesContent":["'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n  module.exports = require('./cjs/react-is.production.min.js');\n} else {\n  module.exports = require('./cjs/react-is.development.js');\n}\n"],"names":["process","reactIsModule","require$$0","require$$1"],"mappings":"2UAEIA,UAAQ,IAAI,WAAa,aAC3BC,EAAAA,SAAA,QAAiBC,YAAA,EAEjBD,EAAAA,SAAA,QAAiBE,YAAA","x_google_ignoreList":[0]}
+{"version":3,"file":"index.js","sources":["../../../../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js"],"sourcesContent":["'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n  module.exports = require('./cjs/react-is.production.min.js');\n} else {\n  module.exports = require('./cjs/react-is.development.js');\n}\n"],"names":["process","reactIsModule","require$$0","require$$1"],"mappings":"0UAEIA,UAAQ,IAAI,WAAa,aAC3BC,EAAAA,SAAA,QAAiBC,YAAA,EAEjBD,EAAAA,SAAA,QAAiBE,YAAA","x_google_ignoreList":[0]}