v2.0.0

bilaleren · Jan 6, 2024 · 0ecfef0 · 0ecfef0
1 parent 5679269
commit 0ecfef0
Show file tree

Hide file tree

Showing 241 changed files with 14,716 additions and 42,895 deletions.
diff --git a/.babelrc.cjs.json b/.babelrc.cjs.json
@@ -0,0 +1,27 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "modules": "commonjs",
+        "browserslistEnv": "node"
+      }
+    ],
+    "@babel/flow",
+    "@babel/react",
+    "@babel/typescript"
+  ],
+  "plugins": [
+    [
+      "module-resolver",
+      {
+        "root": ["."],
+        "alias": {
+          "@utils": "./src/utils/",
+          "@assets": "./assets/"
+        }
+      }
+    ],
+    "@babel/plugin-transform-runtime"
+  ]
+}
diff --git a/.babelrc.esm.json b/.babelrc.esm.json
@@ -0,0 +1,27 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "modules": false,
+        "browserslistEnv": "modern"
+      }
+    ],
+    "@babel/flow",
+    "@babel/react",
+    "@babel/typescript"
+  ],
+  "plugins": [
+    [
+      "module-resolver",
+      {
+        "root": ["."],
+        "alias": {
+          "@utils": "./src/utils/",
+          "@assets": "./assets/"
+        }
+      }
+    ],
+    "@babel/plugin-transform-runtime"
+  ]
+}
diff --git a/.browserslistrc b/.browserslistrc
@@ -1,32 +1,12 @@
 [postcss]
-last 3 versions
-> 5%
-not dead
+last 4 versions
 
 [modern]
 last 1 chrome version
 last 1 edge version
 last 1 firefox version
 last 1 safari version
-node 14
+node 16
 
-# snapshot of `npx browserslist "maintained node versions"`
-# On update check all #stable-snapshot markers
 [node]
-node 12.0
-
-# same as `node`
-[coverage]
-node 12.0
-
-# same as `node`
-[development]
-node 12.0
-
-# same as `node`
-[test]
-node 12.0
-
-# same as `node`
-[benchmark]
-node 12.0
+node 12
diff --git a/.env.example b/.env.example
@@ -0,0 +1,2 @@
+GH_TOKEN=
+GH_PAGES_BRANCH=example
diff --git a/.eslintignore b/.eslintignore
@@ -1,5 +1,4 @@
-build/
-dist/
+lib/
+examples/
 node_modules/
 .snapshots/
-*.min.js
diff --git a/.eslintrc b/.eslintrc
@@ -12,13 +12,6 @@
   "env": {
     "node": true
   },
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "ecmaFeatures": {
-      "legacyDecorators": true,
-      "jsx": true
-    }
-  },
   "settings": {
     "react": {
       "version": "16"

diff --git a/.gitignore b/.gitignore
@@ -11,41 +11,42 @@
 # testing
 /coverage
 
-# Android
-**/.gradle
-**/local.properties
-**/*.iml
-**/*.tgz
-
 # BUCK
 **/buck-out/
 **/\.buckd/
-**/*.keystore
-!debug.keystore
 
 # production
+**/lib/
 **/dist/
 **/build/
 
+# Android/IntelliJ
+#
+**/.gradle
+**/local.properties
+**/*.iml
+**/*.hprof
+**/.cxx/
+**/*.keystore
+!**/debug.keystore
+
+# Ruby / CocoaPods
+**/ios/Pods/
+**/vendor/bundle/
+
 # misc
-.DS_Store
-*.pem
+**/.DS_Store
+**/*.pem
 
 # debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+**/npm-debug.log*
+**/yarn-debug.log*
+**/yarn-error.log*
 
 # local env files
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+**/.env
+**/.env*
+!**/.env.example
 
 # typescript
 *.tsbuildinfo
-
-# CocoaPods
-**/ios/Pods/
-
diff --git a/.prettierrc b/.prettierrc
@@ -2,7 +2,6 @@
   "singleQuote": true,
   "jsxSingleQuote": false,
   "semi": false,
-  "tabWidth": 2,
   "bracketSpacing": true,
   "arrowParens": "always",
   "trailingComma": "none"

diff --git a/NATIVE_README.md b/NATIVE_README.md
@@ -2,20 +2,6 @@
 
 MUI Tabs is now available with React Native. [See example](https://snack.expo.dev/@bilaleren/mui-tabs?platform=android).
 
-### Installation of requirements
-
-The **color** package is required for the RippleButton. You don't need to install this package if you don't want to use [RippleButton](#ripple-button-example-only-android).
-
-```shell
-yarn add react-native-svg
-```
-
-if you want to use the RippleButton
-
-```shell
-yarn add color react-native-svg
-```
-
 ### Examples
 
 #### Basic example
@@ -41,36 +27,35 @@ const App = () => {
 ```tsx
 import * as React from 'react'
 import { Tab, Tabs } from 'mui-tabs/native'
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
+import IonIcon from 'react-native-vector-icons/Ionicons'
 
 const App = () => {
   const [value, setValue] = React.useState(0)
 
   return (
     <Tabs
       value={value}
-      centered={true}
-      onChange={(value) => setValue(value)}
+      variant="scrollable"
+      onChange={onChange}
     >
       <Tab
-        label="Top"
-        icon={<MaterialCommunityIcons name="home" size={25} />}
-        iconPosition="top"
+        icon={<IonIcon name="home-outline" size={24} />}
+        label="Top (Default)"
       />
       <Tab
-        label="Start"
-        icon={<MaterialCommunityIcons name="heart" size={25} />}
-        iconPosition="start"
+        icon={<IonIcon name="heart-outline" size={24} />}
+        label="Bottom"
+        iconPosition="bottom"
       />
       <Tab
+        icon={<IonIcon name="person-outline" size={24} />}
         label="End"
-        icon={<MaterialCommunityIcons name="magnify" size={25} />}
         iconPosition="end"
       />
       <Tab
-        label="Bottom"
-        icon={<MaterialCommunityIcons name="phone" size={25} />}
-        iconPosition="bottom"
+        icon={<IonIcon name="settings-outline" size={24} />}
+        label="Start"
+        iconPosition="start"
       />
     </Tabs>
   )
@@ -79,6 +64,14 @@ const App = () => {
 
 #### Ripple Button example (only android)
 
+You need to install the **color** package.
+
+```bash
+yarn add color
+```
+
+**Example**
+
 ```tsx
 import * as React from 'react'
 import { Tab, Tabs } from 'mui-tabs/native'
@@ -101,92 +94,50 @@ const App = () => {
 }
 ```
 
-#### Custom tab width example
-
-```tsx
-import * as React from 'react'
-import { Tab, Tabs } from 'mui-tabs/native'
-
-const App = () => {
-  const [value, setValue] = React.useState(0)
-
-  return (
-    <Tabs
-      value={value}
-      variant="scrollable"
-      tabProps={{
-        width: 100 // Default tab width
-      }}
-      onChange={(value) => setValue(value)}
-    >
-      <Tab label="Tab 1" width={120} />
-      <Tab label="Tab 2" width={150} />
-      <Tab label="Tab 3" width={100} />
-      <Tab label="Tab 4" width={90} />
-      <Tab label="Tab 5" width={200} />
-      <Tab label="Tab 6" width={160} />
-    </Tabs>
-  )
-}
-```
-
 #### Custom indicator example
 
 ```tsx
 import * as React from 'react'
 import { Tab, Tabs } from 'mui-tabs/native'
-import RippleButton from 'mui-tabs/native/RippleButton'
 
 const App = () => {
   const [value, setValue] = React.useState(0)
 
   return (
     <Tabs
       value={value}
-      insets={10}
       variant="scrollable"
       onChange={(value) => setValue(value)}
-      scrollButtons={true}
       style={{
         backgroundColor: '#f2f2f2',
-        borderRadius: 99,
-        maxHeight: 58
+        borderRadius: 99
+      }}
+      tabProps={{
+        color: '#000000',
+        selectedColor: '#000000'
       }}
       indicatorProps={{
-        color: '#fff',
-        size: '100%', // indicator height
+        color: '#ffffff',
+        size: '100%',
         style: {
-          borderRadius: 99,
-          bottom: 5,
-          zIndex: 1
+          zIndex: -1,
+          borderRadius: 99
         }
       }}
-      tabProps={{
-        color: '#000',
-        selectedColor: '#000',
+      scrollButtons={true}
+      scrollViewContainerProps={{
         style: {
-          borderRadius: 99,
-          zIndex: 2
-        }
-      }}
-      scrollViewProps={{
-        contentContainerStyle: {
-          paddingHorizontal: 10,
           paddingVertical: 5
         }
       }}
-      scrollButtonsProps={{
-        iconColor: '#000',
-        iconSize: 21
-      }}
-      ScrollButtonComponent={RippleButton}
     >
-      <Tab label="1" />
-      <Tab label="2" />
-      <Tab label="3" />
-      <Tab label="4" />
-      <Tab label="5" />
-      <Tab label="6" />
+      <Tab label="Tab 1" />
+      <Tab label="Tab 2" />
+      <Tab label="Tab 3" />
+      <Tab label="Tab 4" />
+      <Tab label="Tab 5" />
+      <Tab label="Tab 6" />
+      <Tab label="Tab 7" />
     </Tabs>
   )
 }