@umituz/react-native-design-system 2.6.88 → 2.6.89

package/src/molecules/FormField.README.md

@@ -1,23 +1,23 @@
 # FormField
 
-FormField, form alanları için tam özellikli bir molekül bileşenidir. `AtomicInput` ile birlikte etiket, hata mesajı ve yardımcı metin sunar.
+FormField is a molecule component that combines a label, input field, and validation messages into a complete form input unit. It wraps `AtomicInput` with `AtomicText` for labels and error/helper messages.
 
-## Özellikler
+## Features
 
-- 🏷️ **Label Entegrasyonu**: Otomatik etiket oluşturma
-- ❌ **Error Handling**: Hata mesajı gösterimi
-- ℹ️ **Helper Text**: Yardımcı metin desteği
-- ⭐ **Required Indicator**: Zorunlu alan işareti
-- 🎨 **Tam Özelleştirilebilir**: Stil ve tema desteği
-- ♿ **Erişilebilir**: Tam erişilebilirlik desteği
+- 📝 **Complete Form Input**: Label, input, and messages in one component
+- ✅ **Validation**: Error and helper text support
+- 🔴 **Required Indicator**: Visual required field marker
+- 🎨 **Theme-Aware**: Design token integration
+- ♿ **Accessible**: Full accessibility support
+- 🎯 **Simple API**: Easy to use with minimal props
 
-## Kurulum
+## Installation
 
 ```tsx
 import { FormField } from 'react-native-design-system';
 ```
 
-## Temel Kullanım
+## Basic Usage
 
 ```tsx
 import React, { useState } from 'react';
@@ -30,316 +30,516 @@ export const BasicExample = () => {
   return (
     <View style={{ padding: 16 }}>
       <FormField
-        label="E-posta"
+        label="Email"
         value={email}
         onChangeText={setEmail}
-        placeholder="ornek@email.com"
-        keyboardType="email-address"
+        placeholder="Enter your email"
       />
     </View>
   );
 };
 ```
 
-## Zorunlu Alan
+## Basic Input
 
 ```tsx
 <FormField
-  label="Ad Soyad"
-  required
-  value={name}
-  onChangeText={setName}
-  placeholder="Adınız ve soyadınız"
+  label="Username"
+  value={username}
+  onChangeText={setUsername}
+  placeholder="Enter username"
 />
 ```
 
-## Hata Durumu
+## With Error
 
 ```tsx
 <FormField
-  label="E-posta"
+  label="Email"
   value={email}
   onChangeText={setEmail}
-  placeholder="ornek@email.com"
-  error="Geçerli bir e-posta adresi girin"
-  state="error"
+  placeholder="Enter your email"
+  error="Please enter a valid email address"
 />
 ```
 
-## Helper Text
+## Required Field
 
 ```tsx
 <FormField
-  label="Şifre"
+  label="Password"
   value={password}
   onChangeText={setPassword}
-  placeholder="Şifreniz"
+  placeholder="Enter password"
   secureTextEntry
-  helperText="En az 8 karakter olmalıdır"
+  required
 />
 ```
 
-## İkonlu Form Field
+## Helper Text
 
 ```tsx
 <FormField
-  label="Kullanıcı Adı"
+  label="Username"
   value={username}
   onChangeText={setUsername}
-  placeholder="Kullanıcı adınız"
-  leadingIcon="person-outline"
+  placeholder="Choose a username"
+  helperText="Must be at least 3 characters long"
 />
 ```
 
-## Password Field
+## Custom Required Indicator
 
 ```tsx
 <FormField
-  label="Şifre"
-  value={password}
-  onChangeText={setPassword}
-  placeholder="Şifreniz"
-  secureTextEntry
-  showPasswordToggle
-  helperText="En az 8 karakter, 1 büyük harf ve 1 rakam"
+  label="Email"
+  value={email}
+  onChangeText={setEmail}
+  placeholder="your@email.com"
   required
+  requiredIndicator=" (required)"
 />
 ```
 
-## Custom Required Indicator
+## With Icons
 
 ```tsx
 <FormField
-  label="Telefon"
-  value={phone}
-  onChangeText={setPhone}
-  placeholder="+90 555 123 4567"
-  required
-  requiredIndicator=" *"
-  keyboardType="phone-pad"
+  label="Email"
+  value={email}
+  onChangeText={setEmail}
+  placeholder="your@email.com"
+  leftIcon="mail-outline"
+  rightIcon="checkmark-circle-outline"
 />
 ```
 
-## Örnek Kullanımlar
+## Example Usages
 
-### Kayıt Formu
+### Login Form
 
 ```tsx
-import React, { useState } from 'react';
-import { View, ScrollView, Button } from 'react-native';
-import { FormField } from 'react-native-design-system';
+export const LoginForm = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [errors, setErrors] = useState({});
+
+  const validate = () => {
+    const newErrors = {};
+
+    if (!email) {
+      newErrors.email = 'Email is required';
+    } else if (!isValidEmail(email)) {
+      newErrors.email = 'Please enter a valid email';
+    }
+
+    if (!password) {
+      newErrors.password = 'Password is required';
+    } else if (password.length < 6) {
+      newErrors.password = 'Password must be at least 6 characters';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = () => {
+    if (validate()) {
+      login({ email, password });
+    }
+  };
+
+  return (
+    <View style={{ padding: 16 }}>
+      <FormField
+        label="Email"
+        value={email}
+        onChangeText={setEmail}
+        placeholder="your@email.com"
+        keyboardType="email-address"
+        autoCapitalize="none"
+        error={errors.email}
+        required
+      />
+
+      <FormField
+        label="Password"
+        value={password}
+        onChangeText={setPassword}
+        placeholder="Enter password"
+        secureTextEntry
+        error={errors.password}
+        required
+      />
+
+      <Button title="Login" onPress={handleSubmit} />
+    </View>
+  );
+};
+```
 
-export const RegisterForm = () => {
+### Registration Form
+
+```tsx
+export const RegistrationForm = () => {
   const [formData, setFormData] = useState({
-    name: '',
+    firstName: '',
+    lastName: '',
     email: '',
     password: '',
     confirmPassword: '',
   });
+
   const [errors, setErrors] = useState({});
 
-  const handleInputChange = (field) => (value) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-    // Clear error when user types
+  const handleChange = (field, value) => {
+    setFormData({ ...formData, [field]: value });
+    // Clear error when user starts typing
     if (errors[field]) {
-      setErrors(prev => ({ ...prev, [field]: null }));
+      setErrors({ ...errors, [field]: null });
     }
   };
 
   const validate = () => {
     const newErrors = {};
 
-    if (!formData.name) {
-      newErrors.name = 'Ad soyad zorunludur';
-    }
-
-    if (!formData.email) {
-      newErrors.email = 'E-posta zorunludur';
-    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
-      newErrors.email = 'Geçerli bir e-posta adresi girin';
-    }
-
-    if (!formData.password) {
-      newErrors.password = 'Şifre zorunludur';
-    } else if (formData.password.length < 8) {
-      newErrors.password = 'Şifre en az 8 karakter olmalıdır';
-    }
-
+    if (!formData.firstName) newErrors.firstName = 'First name is required';
+    if (!formData.lastName) newErrors.lastName = 'Last name is required';
+    if (!formData.email) newErrors.email = 'Email is required';
+    if (!formData.password) newErrors.password = 'Password is required';
     if (formData.password !== formData.confirmPassword) {
-      newErrors.confirmPassword = 'Şifreler eşleşmiyor';
+      newErrors.confirmPassword = 'Passwords do not match';
     }
 
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
 
-  const handleSubmit = () => {
-    if (validate()) {
-      console.log('Form submitted:', formData);
-    }
-  };
-
   return (
     <ScrollView style={{ padding: 16 }}>
       <FormField
-        label="Ad Soyad"
-        value={formData.name}
-        onChangeText={handleInputChange('name')}
-        placeholder="Adınız ve soyadınız"
-        error={errors.name}
+        label="First Name"
+        value={formData.firstName}
+        onChangeText={(value) => handleChange('firstName', value)}
+        placeholder="John"
+        error={errors.firstName}
+        required
+      />
+
+      <FormField
+        label="Last Name"
+        value={formData.lastName}
+        onChangeText={(value) => handleChange('lastName', value)}
+        placeholder="Doe"
+        error={errors.lastName}
         required
       />
 
       <FormField
-        label="E-posta"
+        label="Email"
         value={formData.email}
-        onChangeText={handleInputChange('email')}
-        placeholder="ornek@email.com"
+        onChangeText={(value) => handleChange('email', value)}
+        placeholder="john.doe@example.com"
         keyboardType="email-address"
         autoCapitalize="none"
         error={errors.email}
-        helperText="Size ulaşmak için kullanacağız"
         required
       />
 
       <FormField
-        label="Şifre"
+        label="Password"
         value={formData.password}
-        onChangeText={handleInputChange('password')}
-        placeholder="En az 8 karakter"
+        onChangeText={(value) => handleChange('password', value)}
+        placeholder="Create a password"
         secureTextEntry
-        showPasswordToggle
         error={errors.password}
-        helperText="En az 8 karakter, 1 büyük harf ve 1 rakam"
+        helperText="Must be at least 8 characters"
         required
       />
 
       <FormField
-        label="Şifre Tekrar"
+        label="Confirm Password"
         value={formData.confirmPassword}
-        onChangeText={handleInputChange('confirmPassword')}
-        placeholder="Şifrenizi tekrar girin"
+        onChangeText={(value) => handleChange('confirmPassword', value)}
+        placeholder="Confirm your password"
         secureTextEntry
-        showPasswordToggle
         error={errors.confirmPassword}
         required
       />
 
-      <Button title="Kayıt Ol" onPress={handleSubmit} />
+      <Button title="Create Account" onPress={validate} />
     </ScrollView>
   );
 };
 ```
 
-### Giriş Formu
+### Profile Settings
 
 ```tsx
-export const LoginForm = () => {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
-
-  const handleLogin = () => {
-    if (!email || !password) {
-      setError('Lütfen tüm alanları doldurun');
-      return;
-    }
-    // Login logic
-  };
+export const ProfileSettings = () => {
+  const [profile, setProfile] = useState({
+    displayName: '',
+    username: '',
+    bio: '',
+    location: '',
+    website: '',
+  });
 
   return (
-    <View style={{ padding: 16 }}>
+    <ScrollView style={{ padding: 16 }}>
       <FormField
-        label="E-posta"
-        value={email}
-        onChangeText={setEmail}
-        placeholder="ornek@email.com"
-        keyboardType="email-address"
-        autoCapitalize="none"
+        label="Display Name"
+        value={profile.displayName}
+        onChangeText={(value) => setProfile({ ...profile, displayName: value })}
+        placeholder="John Doe"
+        helperText="This is how you'll appear on your profile"
       />
 
       <FormField
-        label="Şifre"
-        value={password}
-        onChangeText={setPassword}
-        placeholder="Şifreniz"
-        secureTextEntry
-        showPasswordToggle
+        label="Username"
+        value={profile.username}
+        onChangeText={(value) => setProfile({ ...profile, username: value })}
+        placeholder="johndoe"
+        helperText="https://example.com/username"
+        leftIcon="at-outline"
+      />
+
+      <FormField
+        label="Bio"
+        value={profile.bio}
+        onChangeText={(value) => setProfile({ ...profile, bio: value })}
+        placeholder="Tell us about yourself"
+        multiline
+        numberOfLines={4}
+        helperText="Maximum 150 characters"
       />
 
-      {error ? (
-        <AtomicText color="error" style={{ marginBottom: 16 }}>
-          {error}
-        </AtomicText>
-      ) : null}
+      <FormField
+        label="Location"
+        value={profile.location}
+        onChangeText={(value) => setProfile({ ...profile, location: value })}
+        placeholder="New York, NY"
+        leftIcon="location-outline"
+      />
 
-      <Button title="Giriş Yap" onPress={handleLogin} />
-    </View>
+      <FormField
+        label="Website"
+        value={profile.website}
+        onChangeText={(value) => setProfile({ ...profile, website: value })}
+        placeholder="https://yourwebsite.com"
+        keyboardType="url"
+        autoCapitalize="none"
+        leftIcon="link-outline"
+      />
+
+      <Button title="Save Changes" onPress={handleSave} />
+    </ScrollView>
   );
 };
 ```
 
-### Profil Formu
+### Address Form
 
 ```tsx
-export const ProfileForm = () => {
-  const [profile, setProfile] = useState({
-    firstName: 'Ahmet',
-    lastName: 'Yılmaz',
-    email: 'ahmet@example.com',
-    phone: '+90 555 123 4567',
-    bio: '',
+export const AddressForm = () => {
+  const [address, setAddress] = useState({
+    street: '',
+    apartment: '',
+    city: '',
+    state: '',
+    zipCode: '',
+    country: '',
   });
 
   return (
-    <ScrollView style={{ padding: 16 }}>
+    <View style={{ padding: 16 }}>
       <FormField
-        label="Ad"
-        value={profile.firstName}
-        onChangeText={(text) => setProfile({ ...profile, firstName: text })}
-        placeholder="Adınız"
+        label="Street Address"
+        value={address.street}
+        onChangeText={(value) => setAddress({ ...address, street: value })}
+        placeholder="123 Main St"
         required
       />
 
       <FormField
-        label="Soyad"
-        value={profile.lastName}
-        onChangeText={(text) => setProfile({ ...profile, lastName: text })}
-        placeholder="Soyadınız"
+        label="Apartment/Suite (optional)"
+        value={address.apartment}
+        onChangeText={(value) => setAddress({ ...address, apartment: value })}
+        placeholder="Apt 4B"
+      />
+
+      <FormField
+        label="City"
+        value={address.city}
+        onChangeText={(value) => setAddress({ ...address, city: value })}
+        placeholder="New York"
         required
       />
 
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        <View style={{ flex: 1 }}>
+          <FormField
+            label="State"
+            value={address.state}
+            onChangeText={(value) => setAddress({ ...address, state: value })}
+            placeholder="NY"
+            required
+          />
+        </View>
+
+        <View style={{ flex: 1 }}>
+          <FormField
+            label="ZIP Code"
+            value={address.zipCode}
+            onChangeText={(value) => setAddress({ ...address, zipCode: value })}
+            placeholder="10001"
+            keyboardType="number-pad"
+            required
+          />
+        </View>
+      </View>
+
       <FormField
-        label="E-posta"
-        value={profile.email}
-        onChangeText={(text) => setProfile({ ...profile, email: text })}
-        placeholder="ornek@email.com"
-        keyboardType="email-address"
-        autoCapitalize="none"
-        leadingIcon="mail-outline"
+        label="Country"
+        value={address.country}
+        onChangeText={(value) => setAddress({ ...address, country: value })}
+        placeholder="United States"
         required
       />
+    </View>
+  );
+};
+```
+
+### Credit Card Form
+
+```tsx
+export const CreditCardForm = () => {
+  const [card, setCard] = useState({
+    cardNumber: '',
+    cardHolder: '',
+    expiryDate: '',
+    cvv: '',
+  });
+
+  const formatCardNumber = (text) => {
+    return text.replace(/\s/g, '').replace(/(.{4})/g, '$1 ').trim();
+  };
+
+  const formatExpiry = (text) => {
+    if (text.length === 2 && !text.includes('/')) {
+      return text + '/';
+    }
+    return text;
+  };
 
+  return (
+    <View style={{ padding: 16 }}>
       <FormField
-        label="Telefon"
-        value={profile.phone}
-        onChangeText={(text) => setProfile({ ...profile, phone: text })}
-        placeholder="+90 555 123 4567"
-        keyboardType="phone-pad"
-        leadingIcon="call-outline"
+        label="Card Number"
+        value={card.cardNumber}
+        onChangeText={(value) => setCard({ ...card, cardNumber: formatCardNumber(value) })}
+        placeholder="1234 5678 9012 3456"
+        keyboardType="number-pad"
+        maxLength={19}
+        leftIcon="card-outline"
+        required
       />
 
       <FormField
-        label="Hakkımda"
-        value={profile.bio}
-        onChangeText={(text) => setProfile({ ...profile, bio: text })}
-        placeholder="Kendinizden bahsedin"
-        multiline
-        numberOfLines={4}
-        maxLength={200}
-        showCharacterCount
+        label="Cardholder Name"
+        value={card.cardHolder}
+        onChangeText={(value) => setCard({ ...card, cardHolder: value })}
+        placeholder="JOHN DOE"
+        autoCapitalize="characters"
+        required
       />
-    </ScrollView>
+
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        <View style={{ flex: 1 }}>
+          <FormField
+            label="Expiry Date"
+            value={card.expiryDate}
+            onChangeText={(value) => setCard({ ...card, expiryDate: formatExpiry(value) })}
+            placeholder="MM/YY"
+            keyboardType="number-pad"
+            maxLength={5}
+            required
+          />
+        </View>
+
+        <View style={{ flex: 1 }}>
+          <FormField
+            label="CVV"
+            value={card.cvv}
+            onChangeText={(value) => setCard({ ...card, cvv: value })}
+            placeholder="123"
+            keyboardType="number-pad"
+            maxLength={4}
+            secureTextEntry
+            helperText="3 or 4 digits on back of card"
+            required
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+```
+
+### Search Form
+
+```tsx
+export const SearchForm = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filters, setFilters] = useState({
+    category: '',
+    minPrice: '',
+    maxPrice: '',
+  });
+
+  return (
+    <View style={{ padding: 16 }}>
+      <FormField
+        label="Search"
+        value={searchTerm}
+        onChangeText={setSearchTerm}
+        placeholder="What are you looking for?"
+        leftIcon="search-outline"
+      />
+
+      <FormField
+        label="Category"
+        value={filters.category}
+        onChangeText={(value) => setFilters({ ...filters, category: value })}
+        placeholder="Select a category"
+        rightIcon="chevron-down-outline"
+      />
+
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        <View style={{ flex: 1 }}>
+          <FormField
+            label="Min Price"
+            value={filters.minPrice}
+            onChangeText={(value) => setFilters({ ...filters, minPrice: value })}
+            placeholder="$0"
+            keyboardType="number-pad"
+          />
+        </View>
+
+        <View style={{ flex: 1 }}>
+          <FormField
+            label="Max Price"
+            value={filters.maxPrice}
+            onChangeText={(value) => setFilters({ ...filters, maxPrice: value })}
+            placeholder="$1000"
+            keyboardType="number-pad"
+          />
+        </View>
+      </View>
+
+      <Button title="Search" onPress={handleSearch} />
+    </View>
   );
 };
 ```
@@ -348,139 +548,90 @@ export const ProfileForm = () => {
 
 ### FormFieldProps
 
-`FormField`, `AtomicInputProps`'ın tüm props'larını alır ve aşağıdakileri ekler:
-
-| Prop | Tip | Varsayılan | Açıklama |
-|------|-----|------------|----------|
-| `label` | `string` | - | Alan etiketi |
-| `error` | `string` | - | Hata mesajı |
-| `helperText` | `string` | - | Yardımcı metin |
-| `required` | `boolean` | `false` | Zorunlu alan |
-| `requiredIndicator` | `string` | `' *'` | Zorunlu alan işareti |
-| `containerStyle` | `ViewStyle` | - | Container stili |
-| `style` | `ViewStyle` | - | Container stili (alias) |
+Extends `Omit<AtomicInputProps, 'state' | 'label'>`
 
-## Stil Özelleştirme
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | - | Field label |
+| `error` | `string` | - | Error message |
+| `helperText` | `string` | - | Helper text |
+| `required` | `boolean` | `false` | Show required indicator |
+| `containerStyle` | `ViewStyle` | - | Container style |
+| `style` | `ViewStyle` | - | Alias for containerStyle |
+| `requiredIndicator` | `string` | `' *'` | Required indicator text |
 
-```tsx
-<FormField
-  label="Özel Alan"
-  value={value}
-  onChangeText={setValue}
-  containerStyle={{
-    marginBottom: 24,
-    backgroundColor: '#f9fafb',
-    padding: 16,
-    borderRadius: 8,
-  }}
-/>
-```
+Plus all AtomicInput props:
+- `value`, `onChangeText`, `placeholder`, `secureTextEntry`, `keyboardType`, etc.
 
 ## Best Practices
 
 ### 1. Error Handling
 
 ```tsx
-// Hataları state'de tutun
-const [errors, setErrors] = useState({});
-
-// Form submit'da validate edin
-const validate = () => {
-  const newErrors = {};
-  if (!email) newErrors.email = 'Bu alan zorunludur';
-  setErrors(newErrors);
-  return Object.keys(newErrors).length === 0;
-};
+// ✅ Good: Clear specific errors
+<FormField
+  error="Email must be in format: user@example.com"
+/>
 
-// Form field'da gösterin
+// ❌ Bad: Vague errors
 <FormField
-  error={errors.email}
-  // ...
+  error="Invalid"
 />
 ```
 
-### 2. Helper Text Kullanımı
+### 2. Helper Text
 
 ```tsx
-// Kullanıcıya rehberlik edin
+// ✅ Good: Helpful guidance
+<FormField
+  helperText="Must be at least 8 characters with 1 number"
+/>
+
+// ❌ Bad: Obvious info
 <FormField
-  label="Şifre"
-  helperText="En az 8 karakter, 1 büyük harf ve 1 rakam içermelidir"
-  // ...
+  helperText="Enter text here"
 />
 ```
 
 ### 3. Required Fields
 
 ```tsx
-// Zorunlu alanları işaretleyin
+// ✅ Good: Use sparingly
 <FormField
-  label="E-posta"
+  label="Email"
   required
-  // ...
 />
-```
-
-## Erişilebilirlik
-
-FormField, tam erişilebilirlik desteği sunar:
-
-- ✅ Label ilişkilendirmesi
-- ✅ Error state anonsu
-- ✅ Required field göstergesi
-- ✅ Screen reader desteği
-
-## Form Validasyon Örneği
-
-```tsx
-const useFormValidation = (schema) => {
-  const [errors, setErrors] = useState({});
 
-  const validate = (data) => {
-    const newErrors = {};
+// ❌ Bad: Overuse
+<FormField
+  label="Optional Field"
+  required
+/>
+```
 
-    Object.keys(schema).forEach((key) => {
-      const rules = schema[key];
-      const value = data[key];
+## Accessibility
 
-      if (rules.required && !value) {
-        newErrors[key] = `${rules.label} zorunludur`;
-      } else if (rules.pattern && !rules.pattern.test(value)) {
-        newErrors[key] = rules.message || 'Geçersiz değer';
-      } else if (rules.minLength && value.length < rules.minLength) {
-        newErrors[key] = `${rules.label} en az ${rules.minLength} karakter olmalıdır`;
-      }
-    });
+FormField provides full accessibility support:
 
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
+- ✅ Screen reader labels
+- ✅ Error announcements
+- ✅ Required field indicators
+- ✅ Helper text
+- ✅ Auto-focus handling
 
-  return { errors, validate };
-};
+## Performance Tips
 
-// Kullanım
-const { errors, validate } = useFormValidation({
-  email: {
-    required: true,
-    label: 'E-posta',
-    pattern: /\S+@\S+\.\S+/,
-    message: 'Geçerli bir e-posta adresi girin',
-  },
-  password: {
-    required: true,
-    label: 'Şifre',
-    minLength: 8,
-  },
-});
-```
+1. **Controlled Inputs**: Always use controlled inputs with state
+2. **Validation Debounce**: Debounce validation for better UX
+3. **Memoization**: Memo validation functions
 
-## İlgili Bileşenler
+## Related Components
 
-- [`AtomicInput`](../atoms/input/README.md) - Input bileşeni
-- [`AtomicButton`](../atoms/button/README.md) - Form butonu
-- [`BaseModal`](./BaseModal/README.md) - Modal form
+- [`AtomicInput`](../atoms/input/README.md) - Base input component
+- [`AtomicText`](../atoms/AtomicText/README.md) - Text component
+- [`Button`](../atoms/button/README.md) - Button component
+- [`AlertInline`](../alerts/README.md) - Inline alert component
 
-## Lisans
+## License
 
 MIT