feat(Docs): add web docs of native-twin

sites/native-twin-docs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

sites/native-twin-docs/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

sites/native-twin-docs/Interface/tailwindClass.ts

@@ -0,0 +1,56 @@
+export interface TailwindClass {
+  class: string;
+  web: boolean;
+  native: boolean;
+}
+
+export interface TailwindClasses {
+  alignmentPositioning: {
+    align: TailwindClass[];
+    position: TailwindClass[];
+    positioning: TailwindClass[];
+  };
+  textTypography: {
+    text: TailwindClass[];
+    font: TailwindClass[];
+  };
+  colorsBackground: {
+    background: TailwindClass[];
+    border: TailwindClass[];
+    textColor: TailwindClass[];
+    shadow: TailwindClass[];
+    zIndex: TailwindClass[];
+  };
+  spacing: {
+    padding: TailwindClass[];
+    margin: TailwindClass[];
+    gap: TailwindClass[];
+  };
+  flexbox: {
+    flex: TailwindClass[];
+  };
+  sizeDimensions: {
+    width: TailwindClass[];
+    height: TailwindClass[];
+    resize: TailwindClass[];
+  };
+  transformations: {
+    translate: TailwindClass[];
+    rotate: TailwindClass[];
+    skew: TailwindClass[];
+    scale: TailwindClass[];
+  };
+  others: {
+    hidden: TailwindClass[];
+    overflow: TailwindClass[];
+    objectFit: TailwindClass[];
+    opacity: TailwindClass[];
+    aspectRatio: TailwindClass[];
+  };
+}
+
+export interface ClassRenderer {
+  title: string;
+  code: string;
+  text: string;
+}

sites/native-twin-docs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

sites/native-twin-docs/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

sites/native-twin-docs/data.ts

@@ -0,0 +1,196 @@
+export interface TailwindClass {
+  class: string;
+  web: boolean;
+  native: boolean;
+}
+export const TAILWIND_CLASSES = {
+  flexbox: {
+    flexProperties: [
+      { class: 'flex', web: true, native: true },
+      { class: 'flex-1', web: true, native: true },
+      { class: 'flex-{cols}', web: true, native: true },
+      { class: 'flex-{direction}', web: true, native: true },
+      { class: 'flex-wrap', web: true, native: true },
+      { class: 'flex-nowrap', web: true, native: true },
+      { class: 'grow-{factor}', web: true, native: true },
+      { class: 'basis-{size}', web: true, native: true },
+    ],
+  },
+  alignmentPositioning: {
+    alignment: [
+      { class: 'align-baseline', web: true, native: true },
+      { class: 'align-top', web: true, native: true },
+      { class: 'align-middle', web: true, native: true },
+      { class: 'align-bottom', web: true, native: true },
+      { class: 'align-text-top', web: true, native: true },
+      { class: 'align-text-bottom', web: true, native: true },
+      { class: 'justify-{alignment}', web: true, native: true },
+      { class: 'items-{alignment}', web: true, native: true },
+      { class: 'self-{alignment}', web: true, native: true },
+      { class: 'content-{alignment}', web: true, native: true },
+    ],
+    positioning: [
+      { class: 'static', web: true, native: true },
+      { class: 'fixed', web: true, native: true },
+
+      { class: 'absolute', web: true, native: true },
+
+      { class: 'relative', web: true, native: true },
+      { class: 'sticky', web: true, native: true },
+
+      { class: 'top-{size}', web: true, native: true },
+      { class: 'left-{size}', web: true, native: true },
+      { class: 'bottom-{size}', web: true, native: true },
+      { class: 'right-{size}', web: true, native: true },
+    ],
+  },
+
+  spacing: {
+    paddingMargin: [
+      { class: 'p-{size}', web: true, native: true },
+      { class: 'px-{size}', web: true, native: true },
+      { class: 'py-{size}', web: true, native: true },
+      { class: 'm-{size}', web: true, native: true },
+      { class: 'mx-{size}', web: true, native: true },
+      { class: 'my-{size}', web: true, native: true },
+    ],
+    gap: [{ class: 'gap-{size}', web: true, native: true }],
+  },
+  sizeDimensions: {
+    dimensions: [
+      { class: 'w-{size}', web: true, native: true },
+      { class: 'max-w-{size}', web: true, native: true },
+      { class: 'min-w-{size}', web: true, native: true },
+      { class: 'h-{size}', web: true, native: true },
+      { class: 'max-h-{size}', web: true, native: true },
+      { class: 'min-h-{size}', web: true, native: true },
+    ],
+    resize: [
+      { class: 'resize', web: true, native: true },
+      { class: 'resize-x', web: true, native: true },
+      { class: 'resize-y', web: true, native: true },
+      { class: 'resize-none', web: true, native: true },
+    ],
+  },
+  textTypography: {
+    textStyles: [
+      { class: 'text-{size}', web: true, native: true },
+      { class: 'text-left', web: true, native: true },
+      { class: 'text-center', web: true, native: true },
+      { class: 'text-right', web: true, native: true },
+      { class: 'text-justify', web: true, native: true },
+      { class: 'font-{weight}', web: true, native: true },
+      { class: 'capitalize', web: true, native: true },
+      { class: 'uppercase', web: true, native: true },
+      { class: 'lowercase', web: true, native: true },
+      { class: 'italic', web: true, native: true },
+      { class: 'not-italic', web: true, native: true },
+      { class: 'leading-{size}', web: true, native: true },
+    ],
+    decorationAndColor: [
+      { class: 'decoration-{style}', web: true, native: true },
+      { class: 'decoration-{color}', web: true, native: true },
+      { class: 'text-{color}', web: true, native: true },
+    ],
+  },
+  colorsBackground: {
+    background: [
+      { class: 'bg-{color}', web: true, native: true },
+      { class: 'border-{size}', web: true, native: true },
+      { class: 'border-{color}', web: true, native: true },
+    ],
+    shadowZIndex: [
+      { class: 'shadow-{size}', web: true, native: true },
+      { class: 'z-{index}', web: true, native: true },
+    ],
+  },
+  transformations: {
+    transform: [
+      { class: 'translate-{axis}-{value}', web: true, native: true },
+      { class: 'rotate-{degrees}', web: true, native: true },
+      { class: 'skew-{axis}-{value}', web: true, native: true },
+      { class: 'scale-{value}', web: true, native: true },
+    ],
+  },
+  others: {
+    visibility: [
+      { class: 'hidden', web: true, native: true },
+      { class: 'overflow-{behavior}', web: true, native: true },
+    ],
+    objectProperties: [
+      { class: 'object-{fit}', web: true, native: true },
+      { class: 'opacity-{value}', web: true, native: true },
+      { class: 'aspect-{ratio}', web: true, native: true },
+    ],
+  },
+};
+export const TAILWIND_GLOSSARY = {
+  setUp: {
+    title: 'SetUp',
+    categories: [
+      { name: 'Expo App', route: 'setup/expo-app' },
+      { name: 'Expo Route', route: 'setup/expo-router' },
+      { name: 'Next App', route: 'setup/next-app' },
+      { name: 'Next App Dir', route: 'setup/next-app-dir' },
+    ],
+  },
+  flexbox: {
+    title: 'Flexbox',
+    categories: [{ name: 'Flex Properties', route: 'flex-box/#flexProperties' }],
+  },
+  alignmentPositioning: {
+    title: 'Alignment & Positioning',
+    categories: [
+      { name: 'Alignment Classes', route: 'alignment-position/#alignment' },
+      { name: 'Positioning Classes', route: 'alignment-position/#positioning' },
+    ],
+  },
+
+  spacing: {
+    title: 'Spacing',
+    categories: [
+      { name: 'Padding and Margin', route: 'spacing/#paddingMargin' },
+      { name: 'Gap Classes', route: 'spacing/#gap' },
+    ],
+  },
+  sizeDimensions: {
+    title: 'Size & Dimensions',
+    categories: [
+      { name: 'Width and Height', route: 'size-dimensions/#dimensions' },
+      { name: 'Resize Classes', route: 'size-dimensions/#resize' },
+    ],
+  },
+  textTypography: {
+    title: 'Text & Typography',
+    categories: [
+      { name: 'Text Styles', route: 'text-typography/#textStyles' },
+      {
+        name: 'Text Decoration and Colors',
+        route: 'text-typography/#decorationAndColor',
+      },
+    ],
+  },
+  colorsBackground: {
+    title: 'Colors & Background',
+    categories: [
+      {
+        name: 'Background and Borders',
+        route: 'colors-background/#background',
+      },
+      { name: 'Shadows and Z-Index', route: 'colors-background/#shadowZIndex' },
+    ],
+  },
+  transformations: {
+    title: 'Transformations',
+    categories: [{ name: 'Transform Functions', route: 'transformations/#transform' }],
+  },
+  others: {
+    title: 'Others',
+    categories: [
+      { name: 'Visibility and Overflow', route: 'other/#visibility' },
+      { name: 'Object Fit and Properties', route: 'other/#objectProperties' },
+    ],
+  },
+};
+
+export default TAILWIND_CLASSES;

sites/native-twin-docs/next.config.mjs

@@ -0,0 +1,8 @@
+// next.config.mjs
+const nextConfig = {
+  images: {
+    domains: ['avatars.githubusercontent.com'],
+  },
+};
+
+export default nextConfig;