react-native-exp-fig 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Weverson-Luan
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,119 @@
+# React Native ExpFig 🎯
+
+Componetes React Native para Android
+
+## Características 🗳️
+
+🚀 Project imperativo </br>
+📦 Muito leve (~xxx kB) </br>
+⌨️ Compatível com android </br>
+🎨 Layouts personalizáveis </br>
+🔧 Configuração flexível </br>
+
+## Documentação 📋
+
+ExpFig é um framework móvel de código fechado para desenvolvimento de componentes de interface e front-end para aplicativos, usando ReactNative, TypeScript, JavaScript, Storybook e React Native Testing Library melhorando a experiência do usuário em um aplicativo amigável e responsivo.
+
+## Contribuidores 👩‍💻
+
+Este projeto está sendo mantido por (02) desenvolvedores, e qualquer ajuda com problemas e solicitações de pull é sempre bem-vinda. Se você puder e quiser contribuir, entre em contato conosco pelo whats (xx) xxxx-xxxx
+
+### Pré-requisitos
+
+Antes de começar, você precisará ter as seguintes ferramentas instaladas em sua máquina:
+
+- [Git](https://git-scm.com)
+- [Node.js 20+](https://nodejs.org/en/)
+- [Java](https://www.java.com/pt-BR/download/manual.jsp)
+
+## Compatibilidades
+
+Compatível com react-native >= 0.72.3
+
+## Instalação 🛠️
+
+```
+ yarn add expfig-ui
+ or
+ npm i expfig-ui
+```
+
+## Projeto Clone 🪞
+
+```# Clone this repository
+$ git clone https://github.com/expfig/expfig-ui.git
+
+# Access the project folder cmd/terminal
+$ cd expfig-ui
+
+# Install the dependencies
+$ yarn install
+
+```
+
+## StoryBook
+
+```
+ yarn storybook
+```
+
+## Testing
+
+```
+ yarn test
+```
+
+## Rodar o projeto de example
+
+```
+ cd example
+ yarn start
+```
+
+## Usando Componente 🎇
+
+```
+
+  <Typography
+    text={`Resultado:${result}`}
+    size={18}
+    fontFamily="Inter-Medium"
+    lineHeight={24}
+    letterSpacing={0.5}
+    marginBottom={8}
+    />
+
+  <Button
+    title="Cliclou"
+    onPress={() => Alert.alert('Cliclou')}
+    width={'100%'}
+    height={45}
+    backgroundColor="#050022"
+    buttonTextStyle={{
+        color: '#fff',
+        fontFamily: 'Inter-Medium',
+        fontSize: 18,
+        fontWeight: '500',
+      }}
+    flexStyle={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    borderStyled={{
+        borderWidth: 1,
+        borderColor: '#050022',
+        borderRadius: 8,
+      }}
+  />
+```
+
+&nbsp;
+
+<!--- Describe the project license --->
+
+## ©️ License
+
+Este projeto está sob a licença [MIT](./LICENSE).
+
+Feito por [Weverson Luan De Sousa](https://www.linkedin.com/in/weverson-luan-de-sousa-1969a81b0/)

package/package.json

@@ -0,0 +1,200 @@
+{
+  "name": "react-native-exp-fig",
+  "version": "0.1.0",
+  "description": "Lib para interfaces",
+  "source": "./src/index.tsx",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/src/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      }
+    }
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-exp-fig-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint:fix": "eslint --fix \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare:bob": "bob build",
+    "release": "release-it",
+    "storybook": "storybook dev -p 6006",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepare": "husky"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Weverson-Luan/react-native-exp-fig.git"
+  },
+  "author": "Weverson-Luan <wltech2022@gmail.com> (https://github.com/Weverson-Luan)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Weverson-Luan/react-native-exp-fig/issues"
+  },
+  "homepage": "https://github.com/Weverson-Luan/react-native-exp-fig#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.7",
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.26.3",
+    "@commitlint/cli": "^19.7.1",
+    "@commitlint/config-conventional": "^19.7.1",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.77.0",
+    "@release-it/conventional-changelog": "^9.0.2",
+    "@storybook/addon-actions": "^8.3.5",
+    "@storybook/addon-controls": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-ondevice-actions": "8.3.10",
+    "@storybook/addon-ondevice-backgrounds": "8.3.10",
+    "@storybook/addon-ondevice-controls": "8.3.10",
+    "@storybook/addon-ondevice-notes": "8.3.10",
+    "@storybook/addon-react-native-web": "^0.0.26",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-native": "^8.5.3",
+    "@storybook/react-webpack5": "^8.3.5",
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react-native": "^12.3.0",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.44",
+    "@typescript-eslint/eslint-plugin": "^8.23.0",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "babel-plugin-react-docgen-typescript": "^1.5.1",
+    "babel-plugin-react-native-web": "^0.19.12",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "commitlint": "^17.0.2",
+    "del-cli": "^5.1.0",
+    "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-storybook": "^0.11.2",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "prettier": "^3.4.2",
+    "react": "18.3.1",
+    "react-native": "0.76.6",
+    "react-native-builder-bob": "^0.32.0",
+    "release-it": "^17.10.0",
+    "storybook": "^8.3.5"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json",
+          "esm": true
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.47.0"
+  },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "^2.0.0",
+    "@react-native-community/datetimepicker": "^8.2.0",
+    "@react-native-community/slider": "^4.5.3",
+    "@storybook/test": "^8.3.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-matcher-utils": "^29.7.0",
+    "react": "18.3.1",
+    "react-dom": "^18.3.1",
+    "react-native": "0.75.4",
+    "react-native-gesture-handler": "^2.19.0",
+    "react-native-reanimated": "^3.16.7",
+    "react-native-safe-area-context": "^4.11.0",
+    "react-native-svg": "^15.6.0",
+    "react-native-web": "^0.19.12",
+    "react-test-renderer": "^18.2.0",
+    "ts-jest": "^29.1.1",
+    "ts-node": "^10.9.1",
+    "typescript": "4.8.4"
+  }
+}

package/react-native.config.js

@@ -0,0 +1,4 @@
+/* eslint-disable no-undef */
+module.exports = {
+  assets: ["./src/assets/fonts", "./.storybook/fonts"],
+};

package/src/common/icons-svg/arrow-drop-down/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+/**
+ * typings
+ */
+import { ISvgProps } from "../interface";
+
+const SvgIconArrowDropDown: React.FC<ISvgProps> = ({ size, color, ...res }) => (
+  <Svg
+    // @ts-expect-error
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? "10"}
+    height={size ?? "6"}
+    fill="none"
+    viewBox="0 0 10 6"
+    {...res}
+  >
+    <Path fill={color ?? "#868686"} d="M5 5.813L0 0h10L5 5.813z"></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconArrowDropDown };

package/src/common/icons-svg/arrow-left/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconArrowLeft: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 21}
+    height={size ?? 11}
+    fill="none"
+    viewBox="0 0 21 10"
+  >
+    <Path
+      stroke={color ?? "#fff"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M5.078 9L1.067 5m0 0l4.01-4m-4.01 4h18.05"
+    ></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconArrowLeft };

package/src/common/icons-svg/bluetooth/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+import { ISvgProps } from "../interface";
+
+const SvgIconBluetooth: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    // @ts-expect-error
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox={`0 0  ${size ?? 24} ${size ?? 24}`}
+  >
+    <G
+      stroke={color ?? "#050022"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      clipPath="url(#clip0_9131_659)"
+    >
+      <Path d="M12 3l6 4.5-6 4.5V3zM12 12l6 4.5-6 4.5v-9zM6 7.5l6 4.5M6 16.5l6-4.5"></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_9131_659">
+        <Path fill="#fff" d="M0 0H24V24H0z"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconBluetooth };

package/src/common/icons-svg/bluetooth-connected/index.tsx

@@ -0,0 +1,41 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+import { ISvgProps } from "../interface";
+
+const SvgIconBluetoothConnected: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox={`0 0  ${size ?? 24} ${size ?? 24}`}
+  >
+    <G clipPath="url(#clip0_9125_243)">
+      <Path
+        stroke={color ?? "#fff"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M12 3l6 4.5-6 4.5V3zM12 12l6 4.5-6 4.5v-9zM6 7.5l6 4.5M6 16.5l6-4.5"
+      ></Path>
+      <Path
+        fill={color ?? "#fff"}
+        d="M5.625 13.125a1.125 1.125 0 100-2.25 1.125 1.125 0 000 2.25zM19.125 13.125a1.125 1.125 0 100-2.25 1.125 1.125 0 000 2.25z"
+      ></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_9125_243">
+        <Path fill={color ?? "#fff"} d="M0 0H24V24H0z"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconBluetoothConnected };

package/src/common/icons-svg/calendar/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+
+// typings
+import { ISvgProps } from "../interface";
+
+const SvgIconCalendar: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 16 16"
+  >
+    <G
+      stroke={color ?? "#050022"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      clipPath="url(#clip0_686_587)"
+    >
+      <Path d="M13 2.5H3a.5.5 0 00-.5.5v10a.5.5 0 00.5.5h10a.5.5 0 00.5-.5V3a.5.5 0 00-.5-.5zM11 1.5v2M5 1.5v2M2.5 5.5h11"></Path>
+      <Path d="M5.5 8l1-.5v4M8.634 8a1 1 0 111.665 1.102L8.5 11.5h2"></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_686_587">
+        <Path fill="#fff" d="M0 0H16V16H0z"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconCalendar };

package/src/common/icons-svg/call-bell/index.tsx

@@ -0,0 +1,29 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconCallBell: React.FC<ISvgProps> = ({ color, size }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <Path
+      fill={color ?? "#050022"}
+      d="M2.25 17.25h19.5a.75.75 0 1 0 0-1.5H21v-1.5a9.01 9.01 0 0 0-8.25-8.968V3.75h1.5a.75.75 0 1 0 0-1.5h-4.5a.75.75 0 0 0 0 1.5h1.5v1.532A9.01 9.01 0 0 0 3 14.25v1.5h-.75a.75.75 0 1 0 0 1.5m2.25-3a7.5 7.5 0 0 1 15 0v1.5h-15zm18 5.25a.75.75 0 0 1-.75.75H2.25a.75.75 0 1 1 0-1.5h19.5a.75.75 0 0 1 .75.75"
+    ></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconCallBell };

package/src/common/icons-svg/camera-plus/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path, Defs, G, ClipPath } from "react-native-svg";
+
+//typings
+import { ISvgProps } from "../interface";
+
+const SvgIconCameraPlus: React.FC<ISvgProps> = ({ color, size, ...res }) => (
+  <Svg
+    {...res}
+    // @ts-expect-error
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 24}
+    height={size ?? 24}
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <G
+      stroke={color ?? "#050022"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      clipPath="url(#clip0_862_99)"
+    >
+      <Path d="M19.5 19.5h-15A1.5 1.5 0 013 18V7.5A1.5 1.5 0 014.5 6h3L9 3.75h6L16.5 6h3A1.5 1.5 0 0121 7.5V18a1.5 1.5 0 01-1.5 1.5zM12 9.75v6M9 12.75h6"></Path>
+    </G>
+    <Defs>
+      <ClipPath id="clip0_862_99">
+        <Path fill="#fff" d="M0 0H24V24H0z"></Path>
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconCameraPlus };

package/src/common/icons-svg/check-box-fill/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+/**
+ * typings
+ */
+import { ISvgProps } from "../interface";
+
+const SvgIconCheckBoxFill: React.FC<ISvgProps> = ({ color, size, ...res }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ? size : 24}
+    height={size ? size : 24}
+    fill="none"
+    {...res}
+  >
+    <Path
+      fill={color ? color : "#F3F3F3 "}
+      d="M16.28 9.22a.748.748 0 0 1 0 1.06l-5.25 5.25a.747.747 0 0 1-1.06 0l-2.25-2.25a.75.75 0 1 1 1.06-1.06l1.72 1.72 4.72-4.72a.749.749 0 0 1 1.06 0ZM21 4.5v15a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19.5v-15A1.5 1.5 0 0 1 4.5 3h15A1.5 1.5 0 0 1 21 4.5Zm-1.5 15v-15h-15v15h15Z"
+    />
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconCheckBoxFill };

package/src/common/icons-svg/check-box-outline/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+/**
+ * typings
+ */
+import { ISvgProps } from "../interface";
+
+const SvgIconCheckBoxOutline: React.FC<ISvgProps> = ({ color, size, ...res }) => (
+  <Svg
+    //@ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ? size : 24}
+    height={size ? size : 24}
+    fill="none"
+    {...res}
+  >
+    <Path
+      fill={color ? color : "#F3F3F3 "}
+      d="M19.5 3h-15A1.5 1.5 0 0 0 3 4.5v15A1.5 1.5 0 0 0 4.5 21h15a1.5 1.5 0 0 0 1.5-1.5v-15A1.5 1.5 0 0 0 19.5 3Zm-3.22 7.28-5.25 5.25a.747.747 0 0 1-1.06 0l-2.25-2.25a.75.75 0 1 1 1.06-1.06l1.72 1.72 4.72-4.72a.751.751 0 0 1 1.06 1.06Z"
+    />
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconCheckBoxOutline };