Simdi bir cli gelistirecegiz.

### Step 1

1- npx create-expo-app -e with-router-uniwind calistirilacak

### Step 2

- global bir global.css file yaratilacak
- ```js
  @import 'tailwindcss';
  @import 'uniwind';
  ```

global css dosyasina eklenecek
NOT: We recommend keeping this file in the root of your project.
Location matters! The location of global.css determines your app root - Tailwind will automatically scan for classNames starting from this directory. If you place global.css in a nested folder (like app/global.css), classNames in other directories won’t be detected unless you explicitly include them using the @source directive.

Import the CSS file in your App.tsx (main component).

```js
import "./global.css"; // <-- file from previous step

// other imports

export const App = () => {}; // <-- your app's main component
```

```
Don’t import global.css in the root index.ts/index.js file where you register the Root Component, as any change will trigger a full reload instead of hot reload.
```

### Step 3

`npx expo customize metro.config.js` komutu calistirilacak. Bittikten sonra metro.config.js icerisine:

```js
const { getDefaultConfig } = require("expo/metro-config");
const { withUniwindConfig } = require("uniwind/metro");

const config = getDefaultConfig(__dirname);

// your metro modifications

module.exports = withUniwindConfig(config, {
  // relative path to your global.css file (from previous step)
  cssEntryFile: "./src/global.css",
  // (optional) path where we gonna auto-generate typings
  // defaults to project's root
  dtsFile: "./src/uniwind-types.d.ts",
});
```

```
We recommend placing the uniwind-types.d.ts file in the src or app directory, as it will be automatically included by TypeScript. For custom paths (e.g., root of your project), please include it in your tsconfig.json.
```

You need to run metro server to generate typings and fix all TypeScript errors.

Important: withUniwindConfig must be the outermost wrapper in your Metro config. If you use other Metro config wrappers, make sure withUniwindConfig wraps them all.

```
// ✅ Correct - Uniwind wraps everything
module.exports = withUniwindConfig(
  withOtherConfig(
    withAnotherConfig(config, options),
    moreOptions
  ),
  { cssEntryFile: './src/global.css' }
);

// ❌ Wrong - Uniwind is innermost
module.exports = withOtherConfig(
  withUniwindConfig(config, { cssEntryFile: './src/global.css' }),
  options
);
```

### Step 4

`bun add heroui-native`
Install Mandatory Peer Dependencies
`bun add react-native-screens@~4.16.0 react-native-reanimated@~4.1.1 react-native-gesture-handler@^2.28.0 react-native-worklets@0.5.1 react-native-safe-area-context@~5.6.0 react-native-svg@15.12.1 tailwind-variants@^3.2.2 tailwind-merge@^3.4.0 @gorhom/bottom-sheet@^5`

- It's recommended to use the exact versions specified above to avoid compatibility issues. Version mismatches may cause unexpected bugs.

### Step 5

Inside your global.css file add the following imports:

```scss
@import "tailwindcss";
@import "uniwind";

@import "heroui-native/styles";

/* Path to the heroui-native lib inside node_modules from the root of your project */
@source './node_modules/heroui-native/lib';
```

### Step 6

Wrap Your App with Provider
Wrap your application with HeroUINativeProvider. You must wrap it with GestureHandlerRootView:

```ts
import { HeroUINativeProvider } from "heroui-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <HeroUINativeProvider>{/* Your app content */}</HeroUINativeProvider>
    </GestureHandlerRootView>
  );
}
```

### Step 7

Text Component Configuration

```tsx
import { HeroUINativeProvider } from "heroui-native";
import type { HeroUINativeConfig } from "heroui-native";

const config: HeroUINativeConfig = {
  textProps: {
    // Disable font scaling for accessibility
    allowFontScaling: false,

    // Auto-adjust font size to fit container
    adjustsFontSizeToFit: false,

    // Maximum font size multiplier when scaling
    maxFontSizeMultiplier: 1.5,

    // Minimum font scale (iOS only, 0.01-1.0)
    minimumFontScale: 0.5,
  },
};

export default function App() {
  return <HeroUINativeProvider config={config}>{/* Your app content */}</HeroUINativeProvider>;
}
```

# TASK

ben senden sirasiyla yukaridaki islemleri yapmani istemiyorum.
Tum bunlari yapacak bir cli hazirlamani istiyorum.
Cli'in hangi dilde gelistirilecegini sana birakiyorum. Ama mumkunse mac icin en ideali neyse o olsun.

```bash
npx ahmtshn-create-app
```

komutu ile bu cli'i calistirmak istiyorum.