)/g,
26 | template: '"./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
27 | },
28 | ],
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/packages/babel-plugin-universal-image/turbo/generators/templates/component.hbs:
--------------------------------------------------------------------------------
1 | export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
2 | return (
3 |
4 |
{{ pascalCase name }} Component
5 | {children}
6 |
7 | );
8 | };
9 |
--------------------------------------------------------------------------------
/packages/fonts-loader/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | root: true,
4 | extends: ["./react-internal.js"],
5 | parser: "@typescript-eslint/parser",
6 | parserOptions: {
7 | project: "./tsconfig.lint.json",
8 | tsconfigRootDir: __dirname,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/packages/fonts-loader/README.md:
--------------------------------------------------------------------------------
1 | # @unitools/metro-config [ALPHA]
2 |
3 | ### This is the official documentation for the @unitools/metro-config package.
4 |
5 | ## Features
6 |
7 | - Support for .expo-web.{js|ts|jsx|tsx} file extensions.
8 |
9 | ### Installation
10 |
11 | To install `@unitools/metro-config`, use either of the following commands:
12 |
13 | ```bash
14 | npm install @unitools/metro-config
15 | ```
16 |
17 | or
18 |
19 | ```bash
20 | yarn add @unitools/metro-config
21 | ```
22 |
23 | ## Usage
24 |
25 | Add following to your `metro.config.js` file.
26 |
27 | ```jsx
28 | const { getDefaultConfig } = require("expo/metro-config");
29 | const { withUnitools } = require("@unitools/metro-config");
30 |
31 | const projectRoot = __dirname;
32 |
33 | const config = getDefaultConfig(projectRoot, {});
34 |
35 | module.exports = withUnitools(config);
36 | ```
37 |
--------------------------------------------------------------------------------
/packages/fonts-loader/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unitools/fonts",
3 | "version": "0.0.1",
4 | "private": false,
5 | "main": "src",
6 | "files": [
7 | "src"
8 | ],
9 | "exports": {
10 | "./next": {
11 | "import": "./src/index.next-web.js",
12 | "require": "./src/index.next-web.js"
13 | },
14 | "./expo": {
15 | "import": "./src/index.js",
16 | "require": "./src/index.js"
17 | }
18 | },
19 | "scripts": {
20 | "build": "tsc"
21 | },
22 | "devDependencies": {
23 | "eslint": "^8.57.0"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/packages/fonts-loader/src/index.js:
--------------------------------------------------------------------------------
1 | import { useFonts as useExpoFonts } from "expo-font";
2 | export const useFonts = (params) => {
3 | const [loaded, error] = useExpoFonts(params);
4 | const result = []
5 | Object.keys(params).forEach((item) => {
6 | result.push({
7 | [item]: {
8 | className: item,
9 | variable: item,
10 | style: {
11 | fontFamily: item,
12 | }
13 | }
14 | })
15 | })
16 | return {
17 | loaded,
18 | error,
19 | result
20 | };
21 | }
--------------------------------------------------------------------------------
/packages/fonts-loader/src/index.next-web.js:
--------------------------------------------------------------------------------
1 | export const useFonts = (params) => {
2 | let loaded = true;
3 | let error = false
4 | let variableString = "";
5 |
6 | params.forEach((font) => {
7 | variableString = variableString + " " + font?.variable;
8 | });
9 |
10 | return {
11 | loaded,
12 | error,
13 | variables: variableString
14 | };
15 | };
16 |
17 |
18 |
--------------------------------------------------------------------------------
/packages/fonts-plugin/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | root: true,
4 | extends: ["./react-internal.js"],
5 | parser: "@typescript-eslint/parser",
6 | parserOptions: {
7 | project: "./tsconfig.lint.json",
8 | tsconfigRootDir: __dirname,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/packages/fonts-plugin/README.md:
--------------------------------------------------------------------------------
1 | # @unitools/metro-config [ALPHA]
2 |
3 | ### This is the official documentation for the @unitools/metro-config package.
4 |
5 | ## Features
6 |
7 | - Support for .expo-web.{js|ts|jsx|tsx} file extensions.
8 |
9 | ### Installation
10 |
11 | To install `@unitools/metro-config`, use either of the following commands:
12 |
13 | ```bash
14 | npm install @unitools/metro-config
15 | ```
16 |
17 | or
18 |
19 | ```bash
20 | yarn add @unitools/metro-config
21 | ```
22 |
23 | ## Usage
24 |
25 | Add following to your `metro.config.js` file.
26 |
27 | ```jsx
28 | const { getDefaultConfig } = require("expo/metro-config");
29 | const { withUnitools } = require("@unitools/metro-config");
30 |
31 | const projectRoot = __dirname;
32 |
33 | const config = getDefaultConfig(projectRoot, {});
34 |
35 | module.exports = withUnitools(config);
36 | ```
37 |
--------------------------------------------------------------------------------
/packages/fonts-plugin/helpers/index.js:
--------------------------------------------------------------------------------
1 | function splitFontWeight(fontWeight) {
2 | const regex = /^([1-9]00)([a-zA-Z]+)$/;
3 | const match = fontWeight.match(regex);
4 |
5 | if (match) {
6 | return {
7 | numericWeight: match[1],
8 | textWeight: match[2],
9 | };
10 | }
11 | }
12 |
13 | function parseFontExpoString(fontString) {
14 | if (typeof fontString !== "string") return fontString;
15 |
16 | const regex = /^([^_]+)(?:_([^_]+))?(?:_([^_]+))?$/;
17 | const match = fontString.match(regex);
18 |
19 | if (match) {
20 | let fontConfiguration = {};
21 | if (match[1]) {
22 | fontConfiguration.fontFamily = `${match[1].replace(" ", "-").toLowerCase()}`;
23 | }
24 | if (match[2]) {
25 | const splittedFontWeight = splitFontWeight(match[2]);
26 | fontConfiguration.fontWeight = splittedFontWeight.numericWeight;
27 | }
28 | if (match[3]) {
29 | fontConfiguration.fontStyle = match[3].toLowerCase();
30 | }
31 | return fontConfiguration;
32 | }
33 | }
34 | function parseFontNextString(fontString) {
35 | if (typeof fontString !== "string") return fontString;
36 |
37 | const regex = /^([^_]+)(?:_([^_]+))?(?:_([^_]+))?$/;
38 | const match = fontString.match(regex);
39 |
40 | if (match) {
41 | let fontConfiguration = {};
42 | if (match[1]) {
43 | fontConfiguration.fontFamily = `var(--${match[1].replace(" ", "-").toLowerCase()})`;
44 | }
45 | if (match[2]) {
46 | const splittedFontWeight = splitFontWeight(match[2]);
47 | fontConfiguration.fontWeight = splittedFontWeight.numericWeight;
48 | }
49 | if (match[3]) {
50 | fontConfiguration.fontStyle = match[3].toLowerCase();
51 | }
52 | return fontConfiguration;
53 | }
54 | }
55 |
56 | export { parseFontExpoString,parseFontNextString }
--------------------------------------------------------------------------------
/packages/fonts-plugin/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unitools/tailwindcss-fonts",
3 | "version": "0.0.1",
4 | "private": false,
5 | "exports": {
6 | "./next": {
7 | "import": "./src/next.js",
8 | "require": "./src/next.js"
9 | },
10 | "./expo": {
11 | "import": "./src/expo.js",
12 | "require": "./src/expo.js"
13 | }
14 | },
15 | "devDependencies": {
16 | "eslint": "^8.57.0"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/packages/fonts-plugin/src/expo.js:
--------------------------------------------------------------------------------
1 | const plugin = require("tailwindcss/plugin");
2 | const { parseFontExpoString } = require("../helpers");
3 |
4 |
5 | module.exports = plugin(function ({ matchUtilities, theme, e }) {
6 | matchUtilities(
7 | {
8 | font: (val) => {
9 | const parsedFonts = parseFontExpoString(val)
10 | return parsedFonts;
11 | },
12 | },
13 | {
14 | values: theme("fontFamily"),
15 | }
16 | );
17 | });
18 |
--------------------------------------------------------------------------------
/packages/fonts-plugin/src/next.js:
--------------------------------------------------------------------------------
1 | const plugin = require("tailwindcss/plugin");
2 | const { parseFontNextString } = require("../helpers");
3 |
4 |
5 | module.exports = plugin(function ({ matchUtilities, theme, e }) {
6 | matchUtilities(
7 | {
8 | font: (val) => {
9 | const parsedFonts = parseFontNextString(val);
10 | return parsedFonts;
11 | },
12 | },
13 | {
14 | values: theme("fontFamily"),
15 | }
16 | );
17 | });
18 |
--------------------------------------------------------------------------------
/packages/image-expo/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | root: true,
4 | extends: ["./react-internal.js"],
5 | parser: "@typescript-eslint/parser",
6 | parserOptions: {
7 | project: "./tsconfig.lint.json",
8 | tsconfigRootDir: __dirname,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/packages/image-expo/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "incremental": false,
9 | "isolatedModules": true,
10 | "lib": ["es2022", "DOM", "DOM.Iterable"],
11 | "module": "NodeNext",
12 | "moduleDetection": "force",
13 | "moduleResolution": "NodeNext",
14 | "noUncheckedIndexedAccess": true,
15 | "resolveJsonModule": true,
16 | "skipLibCheck": true,
17 | "strict": true,
18 | "target": "ES2022"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/image-expo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unitools/image-expo",
3 | "version": "0.0.5",
4 | "private": false,
5 | "main": "dist/index.js",
6 | "types": "dist/index.d.ts",
7 | "exports": {
8 | ".": "./dist/index.js"
9 | },
10 | "scripts": {
11 | "type-check": "tsc --noEmit",
12 | "build": "yarn type-check && tsc",
13 | "prepare": "yarn type-check && tsc",
14 | "lint": "eslint . --max-warnings 0"
15 | },
16 | "devDependencies": {
17 | "@babel/core": "^7.24.3",
18 | "@babel/preset-env": "^7.24.3",
19 | "@babel/preset-react": "^7.24.1",
20 | "@babel/preset-typescript": "^7.24.1",
21 | "@turbo/gen": "^1.12.4",
22 | "@types/eslint": "^8.56.5",
23 | "@types/node": "^20.11.24",
24 | "@types/react": "^18.2.61",
25 | "@types/react-dom": "^18.2.19",
26 | "babel-loader": "^9.1.3",
27 | "esbuild": "^0.20.2",
28 | "eslint": "^8.57.0",
29 | "react": "^18.2.0",
30 | "ts-loader": "^9.5.1",
31 | "typescript": "^5.3.3",
32 | "webpack": "^5.91.0",
33 | "webpack-cli": "^5.1.4"
34 | },
35 | "peerDependencies": {
36 | "@unitools/image": "*",
37 | "expo-image": "^1.10.6"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/packages/image-expo/react-internal.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require("node:path");
2 |
3 | const project = resolve(process.cwd(), "tsconfig.json");
4 |
5 | /*
6 | * This is a custom ESLint configuration for use with
7 | * internal (bundled by their consumer) libraries
8 | * that utilize React.
9 | *
10 | * This config extends the Vercel Engineering Style Guide.
11 | * For more information, see https://github.com/vercel/style-guide
12 | *
13 | */
14 |
15 | /** @type {import("eslint").Linter.Config} */
16 | module.exports = {
17 | extends: ["eslint:recommended", "prettier", "eslint-config-turbo"],
18 | plugins: ["only-warn"],
19 | globals: {
20 | React: true,
21 | JSX: true,
22 | },
23 | env: {
24 | browser: true,
25 | },
26 | settings: {
27 | "import/resolver": {
28 | typescript: {
29 | project,
30 | },
31 | },
32 | },
33 | ignorePatterns: [
34 | // Ignore dotfiles
35 | ".*.js",
36 | "node_modules/",
37 | "dist/",
38 | ],
39 | overrides: [
40 | // Force ESLint to detect .tsx files
41 | { files: ["*.js?(x)", "*.ts?(x)"] },
42 | ],
43 | };
44 |
--------------------------------------------------------------------------------
/packages/image-expo/react-library.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "React Library",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "jsx": "react-jsx"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/image-expo/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { Image as ExpoImage } from "expo-image";
2 | import { forwardRef } from "react";
3 |
4 | const Image = forwardRef((props: any, ref: any) => {
5 | const { height, width, style, ...restProps } = props;
6 |
7 | let updatedStyles = Array.isArray(style) ? [...style] : [{ ...style }];
8 |
9 | if (Array.isArray(updatedStyles)) {
10 | updatedStyles.unshift({ height, width });
11 | } else {
12 | updatedStyles = [{ height, width }, style];
13 | }
14 |
15 | return ;
16 | });
17 |
18 | Image.displayName = "ExpoImage";
19 |
20 | export default Image;
21 |
--------------------------------------------------------------------------------
/packages/image-expo/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": [
7 | "src"
8 | ],
9 | "exclude": [
10 | "node_modules",
11 | "dist"
12 | ]
13 | }
--------------------------------------------------------------------------------
/packages/image-expo/tsconfig.lint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": [
7 | "src",
8 | "turbo"
9 | ],
10 | "exclude": [
11 | "node_modules",
12 | "dist"
13 | ]
14 | }
--------------------------------------------------------------------------------
/packages/image-expo/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports = {
4 | mode: "production",
5 | entry: "./src/index.tsx",
6 | output: {
7 | path: path.resolve(__dirname, "dist"),
8 | filename: "index.js",
9 | libraryTarget: "commonjs",
10 | },
11 | resolve: {
12 | extensions: [".ts", ".tsx", ".js", ".json"],
13 | },
14 | module: {
15 | rules: [
16 | {
17 | test: /\.(ts|tsx)$/,
18 | exclude: /(node_modules|bower_components)/,
19 | use: {
20 | loader: "babel-loader",
21 | options: {
22 | presets: [
23 | "@babel/preset-env",
24 | "@babel/preset-react",
25 | "@babel/preset-typescript",
26 | ],
27 | },
28 | },
29 | },
30 | {
31 | test: /\.(ts|tsx)$/,
32 | exclude: /(node_modules|bower_components)/,
33 | use: {
34 | loader: "ts-loader",
35 | },
36 | },
37 | ],
38 | },
39 | externals: {
40 | react: "commonjs react",
41 | "react-native": "commonjs react-native",
42 | "expo-image": "commonjs expo-image",
43 | },
44 | };
45 |
--------------------------------------------------------------------------------
/packages/image-next/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | root: true,
4 | extends: ["./react-internal.js"],
5 | parser: "@typescript-eslint/parser",
6 | parserOptions: {
7 | project: "./tsconfig.lint.json",
8 | tsconfigRootDir: __dirname,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/packages/image-next/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "incremental": false,
9 | "isolatedModules": true,
10 | "lib": ["es2022", "DOM", "DOM.Iterable"],
11 | "module": "NodeNext",
12 | "moduleDetection": "force",
13 | "moduleResolution": "NodeNext",
14 | "noUncheckedIndexedAccess": true,
15 | "resolveJsonModule": true,
16 | "skipLibCheck": true,
17 | "strict": true,
18 | "target": "ES2022"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/image-next/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unitools/image-next",
3 | "version": "0.0.6",
4 | "private": false,
5 | "main": "dist/index.js",
6 | "types": "dist/index.d.ts",
7 | "exports": {
8 | ".": "./dist/index.js"
9 | },
10 | "scripts": {
11 | "type-check": "tsc --noEmit",
12 | "build": "yarn type-check && tsc",
13 | "prepare": "yarn type-check && tsc",
14 | "lint": "eslint . --max-warnings 0"
15 | },
16 | "devDependencies": {
17 | "@babel/core": "^7.24.3",
18 | "@babel/preset-env": "^7.24.3",
19 | "@babel/preset-react": "^7.24.1",
20 | "@babel/preset-typescript": "^7.24.1",
21 | "@turbo/gen": "^1.12.4",
22 | "@types/eslint": "^8.56.5",
23 | "@types/node": "^20.11.24",
24 | "@types/react": "^18.2.61",
25 | "@types/react-dom": "^18.2.19",
26 | "babel-loader": "^9.1.3",
27 | "esbuild": "^0.20.2",
28 | "eslint": "^8.57.0",
29 | "react": "^18.2.0",
30 | "ts-loader": "^9.5.1",
31 | "typescript": "^5.3.3",
32 | "webpack": "^5.91.0",
33 | "webpack-cli": "^5.1.4"
34 | },
35 | "peerDependencies": {
36 | "expo-image": "^1.10.6"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/image-next/react-internal.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require("node:path");
2 |
3 | const project = resolve(process.cwd(), "tsconfig.json");
4 |
5 | /*
6 | * This is a custom ESLint configuration for use with
7 | * internal (bundled by their consumer) libraries
8 | * that utilize React.
9 | *
10 | * This config extends the Vercel Engineering Style Guide.
11 | * For more information, see https://github.com/vercel/style-guide
12 | *
13 | */
14 |
15 | /** @type {import("eslint").Linter.Config} */
16 | module.exports = {
17 | extends: ["eslint:recommended", "prettier", "eslint-config-turbo"],
18 | plugins: ["only-warn"],
19 | globals: {
20 | React: true,
21 | JSX: true,
22 | },
23 | env: {
24 | browser: true,
25 | },
26 | settings: {
27 | "import/resolver": {
28 | typescript: {
29 | project,
30 | },
31 | },
32 | },
33 | ignorePatterns: [
34 | // Ignore dotfiles
35 | ".*.js",
36 | "node_modules/",
37 | "dist/",
38 | ],
39 | overrides: [
40 | // Force ESLint to detect .tsx files
41 | { files: ["*.js?(x)", "*.ts?(x)"] },
42 | ],
43 | };
44 |
--------------------------------------------------------------------------------
/packages/image-next/react-library.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "React Library",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "jsx": "react-jsx"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/image-next/src/index.tsx:
--------------------------------------------------------------------------------
1 | import NextImage from "next/image";
2 | import { forwardRef } from "react";
3 |
4 | const Image = forwardRef((props: any, ref: any) => {
5 | let { source, placeholder, contentFit, contentPosition, ...restProps } =
6 | props;
7 |
8 | let nextImageProps: any = {
9 | src: source,
10 | };
11 |
12 | if (restProps?.height === "100%" && restProps?.width === "100%") {
13 | nextImageProps.fill = true;
14 | delete restProps.height;
15 | delete restProps.width;
16 | }
17 |
18 | if (source?.uri) {
19 | nextImageProps.src = source?.uri;
20 | }
21 |
22 | return (
23 |
34 | );
35 | });
36 |
37 | Image.displayName = "NextImage";
38 |
39 | export default Image;
40 |
--------------------------------------------------------------------------------
/packages/image-next/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": [
7 | "src"
8 | ],
9 | "exclude": [
10 | "node_modules",
11 | "dist"
12 | ]
13 | }
--------------------------------------------------------------------------------
/packages/image-next/tsconfig.lint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": [
7 | "src",
8 | "turbo"
9 | ],
10 | "exclude": [
11 | "node_modules",
12 | "dist"
13 | ]
14 | }
--------------------------------------------------------------------------------
/packages/image-next/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports = {
4 | mode: "production",
5 | entry: "./src/index.tsx",
6 | output: {
7 | path: path.resolve(__dirname, "dist"),
8 | filename: "index.js",
9 | libraryTarget: "commonjs",
10 | },
11 | resolve: {
12 | extensions: [".ts", ".tsx", ".js", ".json"],
13 | },
14 | module: {
15 | rules: [
16 | {
17 | test: /\.(ts|tsx)$/,
18 | exclude: /(node_modules|bower_components)/,
19 | use: {
20 | loader: "babel-loader",
21 | options: {
22 | presets: [
23 | "@babel/preset-env",
24 | "@babel/preset-react",
25 | "@babel/preset-typescript",
26 | ],
27 | },
28 | },
29 | },
30 | {
31 | test: /\.(ts|tsx)$/,
32 | exclude: /(node_modules|bower_components)/,
33 | use: {
34 | loader: "ts-loader",
35 | },
36 | },
37 | ],
38 | },
39 | externals: {
40 | react: "commonjs react",
41 | "react-native": "commonjs react-native",
42 | "expo-image": "commonjs expo-image",
43 | },
44 | };
45 |
--------------------------------------------------------------------------------
/packages/image/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | root: true,
4 | extends: ["./react-internal.js"],
5 | parser: "@typescript-eslint/parser",
6 | parserOptions: {
7 | project: "./tsconfig.lint.json",
8 | tsconfigRootDir: __dirname,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/packages/image/README.md:
--------------------------------------------------------------------------------
1 | # @unitools/image [ALPHA]
2 |
3 | This is the official documentation of the `@unitools/image` package.
4 |
5 | ## For Next.js
6 |
7 | ### Installation
8 |
9 | ```bash
10 | npm install @unitools/image
11 | npm install -D @unitools/babel-plugin-image
12 | ```
13 |
14 | or
15 |
16 | ```bash
17 | yarn add @unitools/image
18 | yarn add -D @unitools/babel-plugin-image
19 | ```
20 |
21 | Add module resolver to your `next.config.js` file.
22 |
23 | ```js
24 | // next.config.js
25 |
26 | module.exports = {
27 | webpack(config) {
28 | config.resolve.alias["@unitools/image"] = "next/image";
29 | return config;
30 | },
31 | };
32 | ```
33 |
34 | ## For Expo
35 |
36 | ### Installation
37 |
38 | ```bash
39 | npm install @unitools/image expo-image
40 | npm install -D @unitools/babel-plugin-image
41 | ```
42 |
43 | or
44 |
45 | ```bash
46 | yarn add @unitools/image expo-image
47 | yarn add -D @unitools/babel-plugin-image
48 | ```
49 |
50 | Add babel plugin to your `babel.config.js` file.
51 |
52 | ```js
53 | // babel.config.js
54 |
55 | module.exports = {
56 | plugins: [
57 | [
58 | "@unitools/babel-plugin-image",
59 | {
60 | assets: "src/assets", // Path to your assets folder where images are stored
61 | },
62 | ],
63 | ],
64 | };
65 | ```
66 |
67 | ## Usage
68 |
69 | ```jsx
70 | import Image from "@unitools/image";
71 |
72 | export default function Home() {
73 | return (
74 |
75 |
76 |
77 | );
78 | }
79 | ```
80 |
81 | ## Props
82 |
83 | | Prop | Type | Default | Description | Status | Support Status |
84 | | ----------------- | ------------------------ | ------- | ----------------- | -------- | -------------- |
85 | | src | string \| NextImage Type | | Image source | required | ✅ |
86 | | alt | string | | Image alt text | required | ✅ |
87 | | width | number | | Image width | required | ✅ |
88 | | height | number | | Image height | required | ✅ |
89 | | loader | string | | Image loader | - | ❌ |
90 | | fill | string | | Image fill | - | ❌ |
91 | | sizes | string | | Image sizes | - | ❌ |
92 | | quality | number (integer 1-100) | | Image quality | - | ❌ |
93 | | priority | boolean | | Image priority | - | ✅ |
94 | | placeholder | string | | Image placeholder | - | ✅ |
95 | | style | object | | Image style | - | ✅ |
96 | | onError | function | | Error function | - | ✅ |
97 | | onLoad | function | | Load function | - | ✅ |
98 | | onLoadingComplete | function | | Callback function | - | ❌ |
99 | | loading | string | | Image loading | - | ❌ |
100 | | blurDataURL | string | | Image blur data | - | ❌ |
101 |
--------------------------------------------------------------------------------
/packages/image/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "incremental": false,
9 | "isolatedModules": true,
10 | "lib": ["es2022", "DOM", "DOM.Iterable"],
11 | "module": "NodeNext",
12 | "moduleDetection": "force",
13 | "moduleResolution": "NodeNext",
14 | "noUncheckedIndexedAccess": true,
15 | "resolveJsonModule": true,
16 | "skipLibCheck": true,
17 | "strict": true,
18 | "target": "ES2022"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/image/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unitools/image",
3 | "version": "0.0.5",
4 | "private": false,
5 | "main": "dist/index.js",
6 | "types": "dist/index.d.ts",
7 | "exports": {
8 | ".": "./dist/index.js"
9 | },
10 | "scripts": {
11 | "type-check": "tsc --noEmit",
12 | "build": "yarn type-check && tsc",
13 | "prepare": "yarn type-check && tsc",
14 | "lint": "eslint . --max-warnings 0"
15 | },
16 | "devDependencies": {
17 | "@babel/core": "^7.24.3",
18 | "@babel/preset-env": "^7.24.3",
19 | "@babel/preset-react": "^7.24.1",
20 | "@babel/preset-typescript": "^7.24.1",
21 | "@turbo/gen": "^1.12.4",
22 | "@types/eslint": "^8.56.5",
23 | "@types/node": "^20.11.24",
24 | "@types/react": "^18.2.61",
25 | "@types/react-dom": "^18.2.19",
26 | "babel-loader": "^9.1.3",
27 | "eslint": "^8.57.0",
28 | "react": "^18.2.0",
29 | "ts-loader": "^9.5.1",
30 | "typescript": "^5.3.3"
31 | },
32 | "peerDependencies": {
33 | "expo-image": "^1.10.6"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/packages/image/react-internal.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require("node:path");
2 |
3 | const project = resolve(process.cwd(), "tsconfig.json");
4 |
5 | /*
6 | * This is a custom ESLint configuration for use with
7 | * internal (bundled by their consumer) libraries
8 | * that utilize React.
9 | *
10 | * This config extends the Vercel Engineering Style Guide.
11 | * For more information, see https://github.com/vercel/style-guide
12 | *
13 | */
14 |
15 | /** @type {import("eslint").Linter.Config} */
16 | module.exports = {
17 | extends: ["eslint:recommended", "prettier", "eslint-config-turbo"],
18 | plugins: ["only-warn"],
19 | globals: {
20 | React: true,
21 | JSX: true,
22 | },
23 | env: {
24 | browser: true,
25 | },
26 | settings: {
27 | "import/resolver": {
28 | typescript: {
29 | project,
30 | },
31 | },
32 | },
33 | ignorePatterns: [
34 | // Ignore dotfiles
35 | ".*.js",
36 | "node_modules/",
37 | "dist/",
38 | ],
39 | overrides: [
40 | // Force ESLint to detect .tsx files
41 | { files: ["*.js?(x)", "*.ts?(x)"] },
42 | ],
43 | };
44 |
--------------------------------------------------------------------------------
/packages/image/react-library.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "React Library",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "jsx": "react-jsx"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/image/src/index.tsx:
--------------------------------------------------------------------------------
1 | import type { ImageStyle, ImageContentFit } from "expo-image";
2 |
3 | export type ImageSource = {
4 | /**
5 | * A string representing the resource identifier for the image,
6 | * which could be an http address, a local file path, or the name of a static image resource.
7 | */
8 | uri: string;
9 | };
10 |
11 | export interface IImageProps {
12 | /**
13 | * An image to display while loading the proper image and no image has been displayed yet or the source is unset.
14 | */
15 | placeholder?: ImageSource | string;
16 | /**
17 | * The text that's read by the screen reader when the user interacts with the image. Sets the the `alt` tag on web which is used for web crawlers and link traversal. Is an alias for `accessibilityLabel`.
18 | *
19 | * @alias accessibilityLabel
20 | * @default undefined
21 | */
22 | alt: string;
23 |
24 | /**
25 | * The image source, either a remote URL, a local file resource or a number that is the result of the `require()` function.
26 | * When provided as an array of sources, the source that fits best into the container size and is closest to the screen scale
27 | * will be chosen. In this case it is important to provide `width`, `height` and `scale` properties.
28 | */
29 | source?: ImageSource | number | string;
30 | height?: number | string;
31 | width?: number | string;
32 | style?: ImageStyle | ImageStyle[] | any;
33 | contentFit?: ImageContentFit;
34 | contentPosition?: string;
35 | onError?: (error: any) => void;
36 | priority?: any;
37 | }
38 |
39 | function Image(_: IImageProps) {
40 | return null;
41 | }
42 |
43 | export default Image;
44 |
--------------------------------------------------------------------------------
/packages/image/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": [
7 | "src"
8 | ],
9 | "exclude": [
10 | "node_modules",
11 | "dist"
12 | ]
13 | }
--------------------------------------------------------------------------------
/packages/image/tsconfig.lint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": [
7 | "src",
8 | "turbo"
9 | ],
10 | "exclude": [
11 | "node_modules",
12 | "dist"
13 | ]
14 | }
--------------------------------------------------------------------------------
/packages/image/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports = {
4 | mode: "production",
5 | entry: "./src/index.tsx",
6 | output: {
7 | path: path.resolve(__dirname, "dist"),
8 | filename: "index.js",
9 | libraryTarget: "commonjs",
10 | },
11 | resolve: {
12 | extensions: [".ts", ".tsx", ".js", ".json"],
13 | },
14 | module: {
15 | rules: [
16 | {
17 | test: /\.(ts|tsx)$/,
18 | exclude: /(node_modules|bower_components)/,
19 | use: {
20 | loader: "babel-loader",
21 | options: {
22 | presets: [
23 | "@babel/preset-env",
24 | "@babel/preset-react",
25 | "@babel/preset-typescript",
26 | ],
27 | },
28 | },
29 | },
30 | {
31 | test: /\.(ts|tsx)$/,
32 | exclude: /(node_modules|bower_components)/,
33 | use: {
34 | loader: "ts-loader",
35 | },
36 | },
37 | ],
38 | },
39 | externals: {
40 | react: "commonjs react",
41 | "react-native": "commonjs react-native",
42 | "expo-image": "commonjs expo-image",
43 | },
44 | };
45 |
--------------------------------------------------------------------------------
/packages/link-expo/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | root: true,
4 | extends: ["./react-internal.js"],
5 | parser: "@typescript-eslint/parser",
6 | parserOptions: {
7 | project: "./tsconfig.lint.json",
8 | tsconfigRootDir: __dirname,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/packages/link-expo/README.md:
--------------------------------------------------------------------------------
1 | # @unitools/link [ALPHA]
2 |
3 | This is the official documentation of the `@unitools/link` package.
4 |
5 | ## For Next.js
6 |
7 | ### Installation
8 |
9 | ```bash
10 | npm install @unitools/link
11 | ```
12 |
13 | or
14 |
15 | ```bash
16 | yarn add @unitools/link
17 | ```
18 |
19 | Add module resolver to your `next.config.js` file.
20 |
21 | ```js
22 | // next.config.js
23 |
24 | module.exports = {
25 | webpack(config) {
26 | config.resolve.alias["@unitools/link"] = "next/link";
27 | return config;
28 | },
29 | };
30 | ```
31 |
32 | ## For Expo
33 |
34 | ### Installation
35 |
36 | Install `@unitools/link` and the peer dependency `@react-navigation/native`.
37 |
38 | ```bash
39 | npm install @unitools/link @react-navigation/native
40 | ```
41 |
42 | or
43 |
44 | ```bash
45 | yarn add @unitools/link @react-navigation/native
46 | ```
47 |
48 | ## Usage
49 |
50 | ```jsx
51 | import Link from "@unitools/link";
52 |
53 | export default function Home() {
54 | return (
55 |
56 |
57 | About
58 |
59 |
60 | );
61 | }
62 | ```
63 |
64 | ## Props
65 |
66 | | Prop | Type | Default | Description | status | Support Status |
67 | | -------- | ---------------- | ------- | -------------------------------------------------- | -------- | -------------- |
68 | | href | String or Object | | href url | required | ✅ |
69 | | replace | Boolean | | Replace the current history state | - | ✅ |
70 | | scroll | Boolean | | - | - | ❌ |
71 | | prefetch | Boolean | | If true, this will prefetch the url | - | ❌ |
72 | | passHref | Boolean | | Forces Link to send the href property to its child | - | ❌ |
73 | | shallow | Boolean | | - | - | ❌ |
74 | | locale | Boolean | | If true, the active locale is automatically | - | ❌ |
75 |
--------------------------------------------------------------------------------
/packages/link-expo/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "incremental": false,
9 | "isolatedModules": true,
10 | "lib": ["es2022", "DOM", "DOM.Iterable"],
11 | "module": "NodeNext",
12 | "moduleDetection": "force",
13 | "moduleResolution": "NodeNext",
14 | "noUncheckedIndexedAccess": true,
15 | "resolveJsonModule": true,
16 | "skipLibCheck": true,
17 | "strict": true,
18 | "target": "ES2022"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/link-expo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unitools/link-expo",
3 | "version": "0.0.5",
4 | "private": false,
5 | "main": "dist/index.js",
6 | "types": "dist/index.d.ts",
7 | "exports": {
8 | ".": "./dist/index.js"
9 | },
10 | "scripts": {
11 | "type-check": "tsc --noEmit",
12 | "lint": "eslint . --max-warnings 0",
13 | "build": "webpack",
14 | "build:tsc": "yarn type-check && tsc",
15 | "prepare": "yarn type-check && tsc",
16 | "build-old": "yarn type-check && esbuild src/index.tsx --loader:.tsx=ts --bundle --minify --platform=node --outfile=dist/index.js"
17 | },
18 | "devDependencies": {
19 | "@babel/core": "^7.24.3",
20 | "@babel/preset-env": "^7.24.3",
21 | "@babel/preset-react": "^7.24.1",
22 | "@babel/preset-typescript": "^7.24.1",
23 | "@turbo/gen": "^1.12.4",
24 | "@types/eslint": "^8.56.5",
25 | "@types/node": "^20.12.3",
26 | "@types/react": "^18.2.74",
27 | "@types/react-dom": "^18.2.23",
28 | "babel-loader": "^9.1.3",
29 | "esbuild": "^0.20.2",
30 | "eslint": "^8.57.0",
31 | "expo-router": "^3.4.8",
32 | "react": "^18.2.0",
33 | "ts-loader": "^9.5.1",
34 | "typescript": "^5.4.3",
35 | "webpack": "^5.91.0",
36 | "webpack-cli": "^5.1.4"
37 | },
38 | "peerDependencies": {
39 | "@react-navigation/native": "^6.1.16",
40 | "@unitools/link": "*",
41 | "react": "^18.2.0"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/packages/link-expo/react-internal.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require("node:path");
2 |
3 | const project = resolve(process.cwd(), "tsconfig.json");
4 |
5 | /*
6 | * This is a custom ESLint configuration for use with
7 | * internal (bundled by their consumer) libraries
8 | * that utilize React.
9 | *
10 | * This config extends the Vercel Engineering Style Guide.
11 | * For more information, see https://github.com/vercel/style-guide
12 | *
13 | */
14 |
15 | /** @type {import("eslint").Linter.Config} */
16 | module.exports = {
17 | extends: ["eslint:recommended", "prettier", "eslint-config-turbo"],
18 | plugins: ["only-warn"],
19 | globals: {
20 | React: true,
21 | JSX: true,
22 | },
23 | env: {
24 | browser: true,
25 | },
26 | settings: {
27 | "import/resolver": {
28 | typescript: {
29 | project,
30 | },
31 | },
32 | },
33 | ignorePatterns: [
34 | // Ignore dotfiles
35 | ".*.js",
36 | "node_modules/",
37 | "dist/",
38 | ],
39 | overrides: [
40 | // Force ESLint to detect .tsx files
41 | { files: ["*.js?(x)", "*.ts?(x)"] },
42 | ],
43 | };
44 |
--------------------------------------------------------------------------------
/packages/link-expo/react-library.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "React Library",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "jsx": "react-jsx"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/link-expo/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { Link as ExpoLink } from "expo-router";
2 | import React from "react";
3 | import type { LinkProps } from "@unitools/link";
4 | import { forwardRef } from "react";
5 |
6 | // ExpoLink doesn't support have ref prop
7 | export const Link = forwardRef((props: LinkProps, _?: any) => {
8 | return ;
9 | });
10 |
11 | export default Link;
12 |
--------------------------------------------------------------------------------
/packages/link-expo/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "target": "es5",
5 | "module": "NodeNext",
6 | "jsx": "react",
7 | "outDir": "./dist",
8 | },
9 | "include": [
10 | "src"
11 | ],
12 | "exclude": [
13 | "node_modules",
14 | "dist"
15 | ]
16 | }
--------------------------------------------------------------------------------
/packages/link-expo/tsconfig.lint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": [
7 | "src",
8 | "turbo"
9 | ],
10 | "exclude": [
11 | "node_modules",
12 | "dist"
13 | ]
14 | }
--------------------------------------------------------------------------------
/packages/link-expo/turbo/generators/config.ts:
--------------------------------------------------------------------------------
1 | import type { PlopTypes } from "@turbo/gen";
2 |
3 | // Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
4 |
5 | export default function generator(plop: PlopTypes.NodePlopAPI): void {
6 | // A simple generator to add a new React component to the internal UI library
7 | plop.setGenerator("react-component", {
8 | description: "Adds a new react component",
9 | prompts: [
10 | {
11 | type: "input",
12 | name: "name",
13 | message: "What is the name of the component?",
14 | },
15 | ],
16 | actions: [
17 | {
18 | type: "add",
19 | path: "src/{{kebabCase name}}.tsx",
20 | templateFile: "templates/component.hbs",
21 | },
22 | {
23 | type: "append",
24 | path: "package.json",
25 | pattern: /"exports": {(?)/g,
26 | template: '"./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
27 | },
28 | ],
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/packages/link-expo/turbo/generators/templates/component.hbs:
--------------------------------------------------------------------------------
1 | export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
2 | return (
3 |
4 |
{{ pascalCase name }} Component
5 | {children}
6 |
7 | );
8 | };
9 |
--------------------------------------------------------------------------------
/packages/link-expo/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports = {
4 | mode: "production",
5 | entry: "./src/index.tsx",
6 | output: {
7 | path: path.resolve(__dirname, "dist"),
8 | filename: "index.js",
9 | libraryTarget: "commonjs",
10 | },
11 | resolve: {
12 | extensions: [".ts", ".tsx", ".js", ".json"],
13 | },
14 | module: {
15 | rules: [
16 | {
17 | test: /\.(ts|tsx)$/,
18 | exclude: /(node_modules|bower_components)/,
19 | use: {
20 | loader: "babel-loader",
21 | options: {
22 | presets: [
23 | "@babel/preset-env",
24 | "@babel/preset-react",
25 | "@babel/preset-typescript",
26 | ],
27 | },
28 | },
29 | },
30 | {
31 | test: /\.(ts|tsx)$/,
32 | exclude: /(node_modules|bower_components)/,
33 | use: {
34 | loader: "ts-loader",
35 | },
36 | },
37 | ],
38 | },
39 | externals: {
40 | react: "commonjs react",
41 | "react-native": "commonjs react-native",
42 | },
43 | };
44 |
--------------------------------------------------------------------------------
/packages/link-next/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | root: true,
4 | extends: ["./react-internal.js"],
5 | parser: "@typescript-eslint/parser",
6 | parserOptions: {
7 | project: "./tsconfig.lint.json",
8 | tsconfigRootDir: __dirname,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/packages/link-next/README.md:
--------------------------------------------------------------------------------
1 | # @unitools/link [ALPHA]
2 |
3 | This is the official documentation of the `@unitools/link` package.
4 |
5 | ## For Next.js
6 |
7 | ### Installation
8 |
9 | ```bash
10 | npm install @unitools/link
11 | ```
12 |
13 | or
14 |
15 | ```bash
16 | yarn add @unitools/link
17 | ```
18 |
19 | Add module resolver to your `next.config.js` file.
20 |
21 | ```js
22 | // next.config.js
23 |
24 | module.exports = {
25 | webpack(config) {
26 | config.resolve.alias["@unitools/link"] = "next/link";
27 | return config;
28 | },
29 | };
30 | ```
31 |
32 | ## For Expo
33 |
34 | ### Installation
35 |
36 | Install `@unitools/link` and the peer dependency `@react-navigation/native`.
37 |
38 | ```bash
39 | npm install @unitools/link @react-navigation/native
40 | ```
41 |
42 | or
43 |
44 | ```bash
45 | yarn add @unitools/link @react-navigation/native
46 | ```
47 |
48 | ## Usage
49 |
50 | ```jsx
51 | import Link from "@unitools/link";
52 |
53 | export default function Home() {
54 | return (
55 |
56 |
57 | About
58 |
59 |
60 | );
61 | }
62 | ```
63 |
64 | ## Props
65 |
66 | | Prop | Type | Default | Description | status | Support Status |
67 | | -------- | ---------------- | ------- | -------------------------------------------------- | -------- | -------------- |
68 | | href | String or Object | | href url | required | ✅ |
69 | | replace | Boolean | | Replace the current history state | - | ✅ |
70 | | scroll | Boolean | | - | - | ❌ |
71 | | prefetch | Boolean | | If true, this will prefetch the url | - | ❌ |
72 | | passHref | Boolean | | Forces Link to send the href property to its child | - | ❌ |
73 | | shallow | Boolean | | - | - | ❌ |
74 | | locale | Boolean | | If true, the active locale is automatically | - | ❌ |
75 |
--------------------------------------------------------------------------------
/packages/link-next/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "incremental": false,
9 | "isolatedModules": true,
10 | "lib": ["es2022", "DOM", "DOM.Iterable"],
11 | "module": "NodeNext",
12 | "moduleDetection": "force",
13 | "moduleResolution": "NodeNext",
14 | "noUncheckedIndexedAccess": true,
15 | "resolveJsonModule": true,
16 | "skipLibCheck": true,
17 | "strict": true,
18 | "target": "ES2022"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/link-next/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unitools/link-next",
3 | "version": "0.0.6",
4 | "private": false,
5 | "main": "dist/index.js",
6 | "types": "dist/index.d.ts",
7 | "exports": {
8 | ".": "./dist/index.js"
9 | },
10 | "scripts": {
11 | "type-check": "tsc --noEmit",
12 | "lint": "eslint . --max-warnings 0",
13 | "build": "webpack",
14 | "build:tsc": "yarn type-check && tsc",
15 | "prepare": "yarn type-check && tsc",
16 | "build-old": "yarn type-check && esbuild src/index.tsx --loader:.tsx=ts --bundle --minify --platform=node --outfile=dist/index.js"
17 | },
18 | "devDependencies": {
19 | "@babel/core": "^7.24.3",
20 | "@babel/preset-env": "^7.24.3",
21 | "@babel/preset-react": "^7.24.1",
22 | "@babel/preset-typescript": "^7.24.1",
23 | "@turbo/gen": "^1.12.4",
24 | "@types/eslint": "^8.56.5",
25 | "@types/node": "^20.12.3",
26 | "@types/react": "^18.2.74",
27 | "@types/react-dom": "^18.2.23",
28 | "babel-loader": "^9.1.3",
29 | "esbuild": "^0.20.2",
30 | "eslint": "^8.57.0",
31 | "react": "^18.2.0",
32 | "ts-loader": "^9.5.1",
33 | "typescript": "^5.4.3",
34 | "webpack": "^5.91.0",
35 | "webpack-cli": "^5.1.4"
36 | },
37 | "peerDependencies": {
38 | "@react-navigation/native": "^6.1.16",
39 | "next": "*",
40 | "react": "^18.2.0"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/packages/link-next/react-internal.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require("node:path");
2 |
3 | const project = resolve(process.cwd(), "tsconfig.json");
4 |
5 | /*
6 | * This is a custom ESLint configuration for use with
7 | * internal (bundled by their consumer) libraries
8 | * that utilize React.
9 | *
10 | * This config extends the Vercel Engineering Style Guide.
11 | * For more information, see https://github.com/vercel/style-guide
12 | *
13 | */
14 |
15 | /** @type {import("eslint").Linter.Config} */
16 | module.exports = {
17 | extends: ["eslint:recommended", "prettier", "eslint-config-turbo"],
18 | plugins: ["only-warn"],
19 | globals: {
20 | React: true,
21 | JSX: true,
22 | },
23 | env: {
24 | browser: true,
25 | },
26 | settings: {
27 | "import/resolver": {
28 | typescript: {
29 | project,
30 | },
31 | },
32 | },
33 | ignorePatterns: [
34 | // Ignore dotfiles
35 | ".*.js",
36 | "node_modules/",
37 | "dist/",
38 | ],
39 | overrides: [
40 | // Force ESLint to detect .tsx files
41 | { files: ["*.js?(x)", "*.ts?(x)"] },
42 | ],
43 | };
44 |
--------------------------------------------------------------------------------
/packages/link-next/react-library.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "React Library",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "jsx": "react-jsx"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/link-next/src/index.tsx:
--------------------------------------------------------------------------------
1 | import NextLink from "next/link";
2 | import React from "react";
3 | import type { LinkProps } from "@unitools/link";
4 | import { forwardRef } from "react";
5 |
6 | export const Link = forwardRef(
7 | ({ asChild, children, ...props }: LinkProps, ref?: any) => {
8 | if (asChild) {
9 | return (
10 |
18 | {children}
19 |
20 | );
21 | }
22 |
23 | return {children};
24 | }
25 | );
26 |
27 | Link.displayName = "NextLink";
28 | export default Link;
29 |
--------------------------------------------------------------------------------
/packages/link-next/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "target": "es5",
5 | "module": "NodeNext",
6 | "jsx": "react",
7 | "outDir": "./dist",
8 | },
9 | "include": [
10 | "src"
11 | ],
12 | "exclude": [
13 | "node_modules",
14 | "dist"
15 | ]
16 | }
--------------------------------------------------------------------------------
/packages/link-next/tsconfig.lint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": [
7 | "src",
8 | "turbo"
9 | ],
10 | "exclude": [
11 | "node_modules",
12 | "dist"
13 | ]
14 | }
--------------------------------------------------------------------------------
/packages/link-next/turbo/generators/config.ts:
--------------------------------------------------------------------------------
1 | import type { PlopTypes } from "@turbo/gen";
2 |
3 | // Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
4 |
5 | export default function generator(plop: PlopTypes.NodePlopAPI): void {
6 | // A simple generator to add a new React component to the internal UI library
7 | plop.setGenerator("react-component", {
8 | description: "Adds a new react component",
9 | prompts: [
10 | {
11 | type: "input",
12 | name: "name",
13 | message: "What is the name of the component?",
14 | },
15 | ],
16 | actions: [
17 | {
18 | type: "add",
19 | path: "src/{{kebabCase name}}.tsx",
20 | templateFile: "templates/component.hbs",
21 | },
22 | {
23 | type: "append",
24 | path: "package.json",
25 | pattern: /"exports": {(?)/g,
26 | template: '"./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
27 | },
28 | ],
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/packages/link-next/turbo/generators/templates/component.hbs:
--------------------------------------------------------------------------------
1 | export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
2 | return (
3 |
4 |
{{ pascalCase name }} Component
5 | {children}
6 |
7 | );
8 | };
9 |
--------------------------------------------------------------------------------
/packages/link-next/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports = {
4 | mode: "production",
5 | entry: "./src/index.tsx",
6 | output: {
7 | path: path.resolve(__dirname, "dist"),
8 | filename: "index.js",
9 | libraryTarget: "commonjs",
10 | },
11 | resolve: {
12 | extensions: [".ts", ".tsx", ".js", ".json"],
13 | },
14 | module: {
15 | rules: [
16 | {
17 | test: /\.(ts|tsx)$/,
18 | exclude: /(node_modules|bower_components)/,
19 | use: {
20 | loader: "babel-loader",
21 | options: {
22 | presets: [
23 | "@babel/preset-env",
24 | "@babel/preset-react",
25 | "@babel/preset-typescript",
26 | ],
27 | },
28 | },
29 | },
30 | {
31 | test: /\.(ts|tsx)$/,
32 | exclude: /(node_modules|bower_components)/,
33 | use: {
34 | loader: "ts-loader",
35 | },
36 | },
37 | ],
38 | },
39 | externals: {
40 | react: "commonjs react",
41 | "react-native": "commonjs react-native",
42 | },
43 | };
44 |
--------------------------------------------------------------------------------
/packages/link/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | root: true,
4 | extends: ["./react-internal.js"],
5 | parser: "@typescript-eslint/parser",
6 | parserOptions: {
7 | project: "./tsconfig.lint.json",
8 | tsconfigRootDir: __dirname,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/packages/link/README.md:
--------------------------------------------------------------------------------
1 | # @unitools/link [ALPHA]
2 |
3 | This is the official documentation of the `@unitools/link` package.
4 |
5 | ## For Next.js
6 |
7 | ### Installation
8 |
9 | ```bash
10 | npm install @unitools/link
11 | ```
12 |
13 | or
14 |
15 | ```bash
16 | yarn add @unitools/link
17 | ```
18 |
19 | Add module resolver to your `next.config.js` file.
20 |
21 | ```js
22 | // next.config.js
23 |
24 | module.exports = {
25 | webpack(config) {
26 | config.resolve.alias["@unitools/link"] = "next/link";
27 | return config;
28 | },
29 | };
30 | ```
31 |
32 | ## For Expo
33 |
34 | ### Installation
35 |
36 | Install `@unitools/link` and the peer dependency `@react-navigation/native`.
37 |
38 | ```bash
39 | npm install @unitools/link @react-navigation/native
40 | ```
41 |
42 | or
43 |
44 | ```bash
45 | yarn add @unitools/link @react-navigation/native
46 | ```
47 |
48 | ## Usage
49 |
50 | ```jsx
51 | import Link from "@unitools/link";
52 |
53 | export default function Home() {
54 | return (
55 |
56 |
57 | About
58 |
59 |
60 | );
61 | }
62 | ```
63 |
64 | ## Props
65 |
66 | | Prop | Type | Default | Description | status | Support Status |
67 | | -------- | ---------------- | ------- | -------------------------------------------------- | -------- | -------------- |
68 | | href | String or Object | | href url | required | ✅ |
69 | | replace | Boolean | | Replace the current history state | - | ✅ |
70 | | scroll | Boolean | | - | - | ❌ |
71 | | prefetch | Boolean | | If true, this will prefetch the url | - | ❌ |
72 | | passHref | Boolean | | Forces Link to send the href property to its child | - | ❌ |
73 | | shallow | Boolean | | - | - | ❌ |
74 | | locale | Boolean | | If true, the active locale is automatically | - | ❌ |
75 |
--------------------------------------------------------------------------------
/packages/link/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "incremental": false,
9 | "isolatedModules": true,
10 | "lib": ["es2022", "DOM", "DOM.Iterable"],
11 | "module": "NodeNext",
12 | "moduleDetection": "force",
13 | "moduleResolution": "NodeNext",
14 | "noUncheckedIndexedAccess": true,
15 | "resolveJsonModule": true,
16 | "skipLibCheck": true,
17 | "strict": true,
18 | "target": "ES2022"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/link/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unitools/link",
3 | "version": "0.0.4",
4 | "private": false,
5 | "main": "dist/index.js",
6 | "types": "dist/index.d.ts",
7 | "exports": {
8 | ".": "./dist/index.js"
9 | },
10 | "scripts": {
11 | "type-check": "tsc --noEmit",
12 | "lint": "eslint . --max-warnings 0",
13 | "build": "yarn type-check && tsc",
14 | "prepare": "yarn type-check && tsc"
15 | },
16 | "devDependencies": {
17 | "@babel/core": "^7.24.3",
18 | "@babel/preset-env": "^7.24.3",
19 | "@babel/preset-react": "^7.24.1",
20 | "@babel/preset-typescript": "^7.24.1",
21 | "@turbo/gen": "^1.12.4",
22 | "@types/eslint": "^8.56.5",
23 | "@types/node": "^20.12.3",
24 | "@types/react": "^18.2.74",
25 | "@types/react-dom": "^18.2.23",
26 | "babel-loader": "^9.1.3",
27 | "esbuild": "^0.20.2",
28 | "eslint": "^8.57.0",
29 | "react": "^18.2.0",
30 | "ts-loader": "^9.5.1",
31 | "typescript": "^5.4.3",
32 | "webpack": "^5.91.0",
33 | "webpack-cli": "^5.1.4"
34 | },
35 | "peerDependencies": {
36 | "react": "^18.2.0"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/link/react-internal.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require("node:path");
2 |
3 | const project = resolve(process.cwd(), "tsconfig.json");
4 |
5 | /*
6 | * This is a custom ESLint configuration for use with
7 | * internal (bundled by their consumer) libraries
8 | * that utilize React.
9 | *
10 | * This config extends the Vercel Engineering Style Guide.
11 | * For more information, see https://github.com/vercel/style-guide
12 | *
13 | */
14 |
15 | /** @type {import("eslint").Linter.Config} */
16 | module.exports = {
17 | extends: ["eslint:recommended", "prettier", "eslint-config-turbo"],
18 | plugins: ["only-warn"],
19 | globals: {
20 | React: true,
21 | JSX: true,
22 | },
23 | env: {
24 | browser: true,
25 | },
26 | settings: {
27 | "import/resolver": {
28 | typescript: {
29 | project,
30 | },
31 | },
32 | },
33 | ignorePatterns: [
34 | // Ignore dotfiles
35 | ".*.js",
36 | "node_modules/",
37 | "dist/",
38 | ],
39 | overrides: [
40 | // Force ESLint to detect .tsx files
41 | { files: ["*.js?(x)", "*.ts?(x)"] },
42 | ],
43 | };
44 |
--------------------------------------------------------------------------------
/packages/link/react-library.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "React Library",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "jsx": "react-jsx"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/link/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { Link as RNLink } from "@react-navigation/native";
2 | import React from "react";
3 |
4 | export interface LinkProps {
5 | href: string;
6 | children: React.ReactNode;
7 | push?: boolean;
8 | replace?: boolean;
9 | asChild?: boolean;
10 | target?: string;
11 | }
12 |
13 | export default function Link(_: LinkProps) {
14 | return null;
15 | }
16 |
--------------------------------------------------------------------------------
/packages/link/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "target": "es5",
5 | "module": "NodeNext",
6 | "jsx": "react",
7 | "outDir": "./dist",
8 | },
9 | "include": [
10 | "src"
11 | ],
12 | "exclude": [
13 | "node_modules",
14 | "dist"
15 | ]
16 | }
--------------------------------------------------------------------------------
/packages/link/tsconfig.lint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": [
7 | "src",
8 | "turbo"
9 | ],
10 | "exclude": [
11 | "node_modules",
12 | "dist"
13 | ]
14 | }
--------------------------------------------------------------------------------
/packages/link/turbo/generators/config.ts:
--------------------------------------------------------------------------------
1 | import type { PlopTypes } from "@turbo/gen";
2 |
3 | // Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
4 |
5 | export default function generator(plop: PlopTypes.NodePlopAPI): void {
6 | // A simple generator to add a new React component to the internal UI library
7 | plop.setGenerator("react-component", {
8 | description: "Adds a new react component",
9 | prompts: [
10 | {
11 | type: "input",
12 | name: "name",
13 | message: "What is the name of the component?",
14 | },
15 | ],
16 | actions: [
17 | {
18 | type: "add",
19 | path: "src/{{kebabCase name}}.tsx",
20 | templateFile: "templates/component.hbs",
21 | },
22 | {
23 | type: "append",
24 | path: "package.json",
25 | pattern: /"exports": {(?)/g,
26 | template: '"./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
27 | },
28 | ],
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/packages/link/turbo/generators/templates/component.hbs:
--------------------------------------------------------------------------------
1 | export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
2 | return (
3 |
4 |
{{ pascalCase name }} Component
5 | {children}
6 |
7 | );
8 | };
9 |
--------------------------------------------------------------------------------
/packages/link/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports = {
4 | mode: "production",
5 | entry: "./src/index.tsx",
6 | output: {
7 | path: path.resolve(__dirname, "dist"),
8 | filename: "index.js",
9 | libraryTarget: "commonjs",
10 | },
11 | resolve: {
12 | extensions: [".ts", ".tsx", ".js", ".json"],
13 | },
14 | module: {
15 | rules: [
16 | {
17 | test: /\.(ts|tsx)$/,
18 | exclude: /(node_modules|bower_components)/,
19 | use: {
20 | loader: "babel-loader",
21 | options: {
22 | presets: [
23 | "@babel/preset-env",
24 | "@babel/preset-react",
25 | "@babel/preset-typescript",
26 | ],
27 | },
28 | },
29 | },
30 | {
31 | test: /\.(ts|tsx)$/,
32 | exclude: /(node_modules|bower_components)/,
33 | use: {
34 | loader: "ts-loader",
35 | },
36 | },
37 | ],
38 | },
39 | externals: {
40 | react: "commonjs react",
41 | "react-native": "commonjs react-native",
42 | },
43 | };
44 |
--------------------------------------------------------------------------------
/packages/metro-config/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | root: true,
4 | extends: ["./react-internal.js"],
5 | parser: "@typescript-eslint/parser",
6 | parserOptions: {
7 | project: "./tsconfig.lint.json",
8 | tsconfigRootDir: __dirname,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/packages/metro-config/README.md:
--------------------------------------------------------------------------------
1 | # @unitools/metro-config [ALPHA]
2 |
3 | ### This is the official documentation for the @unitools/metro-config package.
4 |
5 | ## Features
6 |
7 | - Support for .expo-web.{js|ts|jsx|tsx} file extensions.
8 |
9 | ### Installation
10 |
11 | To install `@unitools/metro-config`, use either of the following commands:
12 |
13 | ```bash
14 | npm install @unitools/metro-config
15 | ```
16 |
17 | or
18 |
19 | ```bash
20 | yarn add @unitools/metro-config
21 | ```
22 |
23 | ## Usage
24 |
25 | Add following to your `metro.config.js` file.
26 |
27 | ```jsx
28 | const { getDefaultConfig } = require("expo/metro-config");
29 | const { withUnitools } = require("@unitools/metro-config");
30 |
31 | const projectRoot = __dirname;
32 |
33 | const config = getDefaultConfig(projectRoot, {});
34 |
35 | module.exports = withUnitools(config);
36 | ```
37 |
--------------------------------------------------------------------------------
/packages/metro-config/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "incremental": false,
9 | "isolatedModules": true,
10 | "lib": ["es2022", "DOM", "DOM.Iterable"],
11 | "module": "NodeNext",
12 | "moduleDetection": "force",
13 | "moduleResolution": "NodeNext",
14 | "noUncheckedIndexedAccess": true,
15 | "resolveJsonModule": true,
16 | "skipLibCheck": true,
17 | "strict": true,
18 | "target": "ES2022"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/metro-config/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unitools/metro-config",
3 | "version": "0.0.1",
4 | "private": false,
5 | "main": "dist/index.js",
6 | "types": "dist/index.d.ts",
7 | "exports": {
8 | ".": "./dist/index.js"
9 | },
10 | "scripts": {
11 | "type-check": "tsc --noEmit",
12 | "lint": "eslint . --max-warnings 0",
13 | "build": "yarn type-check && tsc",
14 | "prepare": "yarn type-check && tsc"
15 | },
16 | "devDependencies": {
17 | "@babel/core": "^7.24.3",
18 | "@babel/preset-typescript": "^7.24.1",
19 | "@types/eslint": "^8.56.5",
20 | "babel-loader": "^9.1.3",
21 | "eslint": "^8.57.0",
22 | "typescript": "^5.4.3"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/metro-config/react-internal.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require("node:path");
2 |
3 | const project = resolve(process.cwd(), "tsconfig.json");
4 |
5 | /*
6 | * This is a custom ESLint configuration for use with
7 | * internal (bundled by their consumer) libraries
8 | * that utilize React.
9 | *
10 | * This config extends the Vercel Engineering Style Guide.
11 | * For more information, see https://github.com/vercel/style-guide
12 | *
13 | */
14 |
15 | /** @type {import("eslint").Linter.Config} */
16 | module.exports = {
17 | extends: ["eslint:recommended", "prettier", "eslint-config-turbo"],
18 | plugins: ["only-warn"],
19 | globals: {
20 | React: true,
21 | JSX: true,
22 | },
23 | env: {
24 | browser: true,
25 | },
26 | settings: {
27 | "import/resolver": {
28 | typescript: {
29 | project,
30 | },
31 | },
32 | },
33 | ignorePatterns: [
34 | // Ignore dotfiles
35 | ".*.js",
36 | "node_modules/",
37 | "dist/",
38 | ],
39 | overrides: [
40 | // Force ESLint to detect .tsx files
41 | { files: ["*.js?(x)", "*.ts?(x)"] },
42 | ],
43 | };
44 |
--------------------------------------------------------------------------------
/packages/metro-config/react-library.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "React Library",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "jsx": "react-jsx"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/metro-config/src/index.ts:
--------------------------------------------------------------------------------
1 | import { resolver } from "./resolver";
2 | import type { MetroConfig } from "metro-config";
3 |
4 | export const withUnitools = (config: MetroConfig): MetroConfig => {
5 | return {
6 | ...config,
7 | resolver: {
8 | ...config?.resolver,
9 | resolveRequest: resolver,
10 | },
11 | };
12 | };
13 |
--------------------------------------------------------------------------------
/packages/metro-config/src/resolver.ts:
--------------------------------------------------------------------------------
1 | import path from "path";
2 | import fs from "fs";
3 | import { resolve } from "metro-resolver";
4 |
5 | export const resolver = (context: any, moduleName: any, platform: any) => {
6 | try {
7 | if (platform === "web") {
8 | const resolution = resolve(
9 | {
10 | ...context,
11 | originModulePath: context.originModulePath,
12 | },
13 | moduleName,
14 | platform
15 | );
16 |
17 | if (resolution?.type === "sourceFile") {
18 | const filepath = resolution?.filePath;
19 |
20 | if (filepath) {
21 | const directory = path.dirname(filepath);
22 | const filename = path.basename(filepath, path.extname(filepath));
23 | const fileExt = `.expo-web${path.extname(filepath)}`;
24 | const platformResolveFilePath = path.join(
25 | directory,
26 | `${filename}${fileExt}`
27 | );
28 |
29 | if (fs.existsSync(platformResolveFilePath)) {
30 | return context.resolveRequest(
31 | context,
32 | platformResolveFilePath,
33 | platform
34 | );
35 | }
36 | }
37 | }
38 |
39 | return context.resolveRequest(context, moduleName, platform);
40 | }
41 |
42 | return context.resolveRequest(context, moduleName, platform);
43 | } catch (err) {
44 | return context.resolveRequest(context, moduleName, platform);
45 | }
46 | };
47 |
--------------------------------------------------------------------------------
/packages/metro-config/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "target": "es5",
5 | "module": "NodeNext",
6 | "jsx": "react",
7 | "outDir": "./dist",
8 | },
9 | "include": [
10 | "src"
11 | ],
12 | "exclude": [
13 | "node_modules",
14 | "dist"
15 | ]
16 | }
--------------------------------------------------------------------------------
/packages/metro-config/tsconfig.lint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": [
7 | "src",
8 | "turbo"
9 | ],
10 | "exclude": [
11 | "node_modules",
12 | "dist"
13 | ]
14 | }
--------------------------------------------------------------------------------
/packages/navigation/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | root: true,
4 | extends: ["./react-internal.js"],
5 | parser: "@typescript-eslint/parser",
6 | parserOptions: {
7 | project: "./tsconfig.lint.json",
8 | tsconfigRootDir: __dirname,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/packages/navigation/README.md:
--------------------------------------------------------------------------------
1 | # @unitools/navigation [ALPHA]
2 |
3 | This is the official documentation of the `@unitools/navigation` package.
4 |
5 | ## For Next.js
6 |
7 | ### Installation
8 |
9 | ```bash
10 | npm install @unitools/navigation
11 | ```
12 |
13 | or
14 |
15 | ```bash
16 | yarn add @unitools/navigation
17 | ```
18 |
19 | Add module resolver to your `next.config.js` file.
20 |
21 | ```js
22 | // next.config.js
23 |
24 | module.exports = {
25 | webpack(config) {
26 | config.resolve.alias["@unitools/navigation"] = "next/navigation";
27 | return config;
28 | },
29 | };
30 | ```
31 |
32 | ## For Expo
33 |
34 | ### Installation
35 |
36 | Install `@unitools/navigation` and the peer dependency `@react-navigation/native`.
37 |
38 | ```bash
39 | npm install @unitools/navigation @react-navigation/native
40 | ```
41 |
42 | or
43 |
44 | ```bash
45 | yarn add @unitools/navigation @react-navigation/native
46 | ```
47 |
48 | ## Usage
49 |
50 | ```jsx
51 | import { usePathname, useSearchParams, useRouter } from "@unitools/navigation";
52 |
53 | export default function Home() {
54 | // usePathname
55 | const pathname = usePathname();
56 |
57 | // useSearchParams
58 | const searchParams = useSearchParams();
59 |
60 | const search = searchParams.get("search");
61 |
62 | // useRouter
63 | const router = useRouter();
64 |
65 | return (
66 |
67 | About
68 |
69 | );
70 | }
71 | ```
72 |
--------------------------------------------------------------------------------
/packages/navigation/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "incremental": false,
9 | "isolatedModules": true,
10 | "lib": ["es2022", "DOM", "DOM.Iterable"],
11 | "module": "NodeNext",
12 | "moduleDetection": "force",
13 | "moduleResolution": "NodeNext",
14 | "noUncheckedIndexedAccess": true,
15 | "resolveJsonModule": true,
16 | "skipLibCheck": true,
17 | "strict": true,
18 | "target": "ES2022"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/navigation/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unitools/navigation",
3 | "version": "0.0.1",
4 | "private": false,
5 | "main": "dist/index.js",
6 | "types": "dist/index.d.ts",
7 | "exports": {
8 | ".": "./dist/index.js"
9 | },
10 | "scripts": {
11 | "type-check": "tsc --noEmit",
12 | "lint": "eslint . --max-warnings 0",
13 | "build": "webpack",
14 | "build-old": "yarn type-check && esbuild src/index.tsx --loader:.tsx=ts --bundle --minify --platform=node --outfile=dist/index.js"
15 | },
16 | "devDependencies": {
17 | "@babel/core": "^7.24.3",
18 | "@babel/preset-env": "^7.24.3",
19 | "@babel/preset-react": "^7.24.1",
20 | "@babel/preset-typescript": "^7.24.1",
21 | "@turbo/gen": "^1.12.4",
22 | "@types/eslint": "^8.56.5",
23 | "@types/node": "^20.12.3",
24 | "@types/react": "^18.2.74",
25 | "@types/react-dom": "^18.2.23",
26 | "babel-loader": "^9.1.3",
27 | "esbuild": "^0.20.2",
28 | "eslint": "^8.57.0",
29 | "react": "^18.2.0",
30 | "ts-loader": "^9.5.1",
31 | "typescript": "^5.4.3",
32 | "webpack": "^5.91.0",
33 | "webpack-cli": "^5.1.4"
34 | },
35 | "peerDependencies": {
36 | "@react-navigation/native": "^6.1.16",
37 | "react": "^18.2.0"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/packages/navigation/react-internal.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require("node:path");
2 |
3 | const project = resolve(process.cwd(), "tsconfig.json");
4 |
5 | /*
6 | * This is a custom ESLint configuration for use with
7 | * internal (bundled by their consumer) libraries
8 | * that utilize React.
9 | *
10 | * This config extends the Vercel Engineering Style Guide.
11 | * For more information, see https://github.com/vercel/style-guide
12 | *
13 | */
14 |
15 | /** @type {import("eslint").Linter.Config} */
16 | module.exports = {
17 | extends: ["eslint:recommended", "prettier", "eslint-config-turbo"],
18 | plugins: ["only-warn"],
19 | globals: {
20 | React: true,
21 | JSX: true,
22 | },
23 | env: {
24 | browser: true,
25 | },
26 | settings: {
27 | "import/resolver": {
28 | typescript: {
29 | project,
30 | },
31 | },
32 | },
33 | ignorePatterns: [
34 | // Ignore dotfiles
35 | ".*.js",
36 | "node_modules/",
37 | "dist/",
38 | ],
39 | overrides: [
40 | // Force ESLint to detect .tsx files
41 | { files: ["*.js?(x)", "*.ts?(x)"] },
42 | ],
43 | };
44 |
--------------------------------------------------------------------------------
/packages/navigation/react-library.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "React Library",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "jsx": "react-jsx"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/navigation/src/index.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | NavigationRouteContext,
3 | useNavigation,
4 | useLinkTo,
5 | StackActions,
6 | } from "@react-navigation/native";
7 | import { useContext, useMemo } from "react";
8 |
9 | // useRouter
10 | function usePathname() {
11 | let route = useContext(NavigationRouteContext);
12 | return route?.path;
13 | }
14 |
15 | function useSearchParams() {
16 | let route = useContext(NavigationRouteContext);
17 | let params = route?.params;
18 | // @ts-ignore
19 | let paramsURLString = new URLSearchParams(params).toString();
20 | return useMemo(
21 | () => params && new URLSearchParams(paramsURLString),
22 | [paramsURLString]
23 | );
24 | }
25 |
26 | function useRouter() {
27 | let navigation = useNavigation();
28 | let navRoute = useContext(NavigationRouteContext);
29 | const to = useLinkTo();
30 | // events, prefetch, beforePopState
31 | let route = {
32 | push: (path: string) => {
33 | to(path);
34 | },
35 | back: navigation.goBack,
36 | // @ts-ignore
37 | reload: () => navigation.navigate(navRoute.name),
38 | // events: navigation.addListener,
39 | prefetch: () => null,
40 | replace: (url: string, as?: string, _options?: any) => {
41 | let href = as || url;
42 | if (href.startsWith("/")) {
43 | href = href.slice(1);
44 | }
45 | // get params from url
46 | let params = {};
47 | let urlParts = href.split("?");
48 | if (urlParts.length > 1) {
49 | const searchParams = new URLSearchParams(urlParts[1]);
50 | searchParams.forEach((value, key) => {
51 | // @ts-ignore
52 | params[key] = value;
53 | });
54 | }
55 | navigation.dispatch(StackActions.replace(href, params));
56 | },
57 | beforePopState: navigation.addListener,
58 | };
59 | return route;
60 | }
61 |
62 | export { usePathname, useSearchParams, useRouter };
63 |
--------------------------------------------------------------------------------
/packages/navigation/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "target": "es5",
5 | "module": "NodeNext",
6 | "jsx": "react",
7 | "outDir": "./dist",
8 | },
9 | "include": [
10 | "src"
11 | ],
12 | "exclude": [
13 | "node_modules",
14 | "dist"
15 | ]
16 | }
--------------------------------------------------------------------------------
/packages/navigation/tsconfig.lint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": [
7 | "src",
8 | "turbo"
9 | ],
10 | "exclude": [
11 | "node_modules",
12 | "dist"
13 | ]
14 | }
--------------------------------------------------------------------------------
/packages/navigation/turbo/generators/config.ts:
--------------------------------------------------------------------------------
1 | import type { PlopTypes } from "@turbo/gen";
2 |
3 | // Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
4 |
5 | export default function generator(plop: PlopTypes.NodePlopAPI): void {
6 | // A simple generator to add a new React component to the internal UI library
7 | plop.setGenerator("react-component", {
8 | description: "Adds a new react component",
9 | prompts: [
10 | {
11 | type: "input",
12 | name: "name",
13 | message: "What is the name of the component?",
14 | },
15 | ],
16 | actions: [
17 | {
18 | type: "add",
19 | path: "src/{{kebabCase name}}.tsx",
20 | templateFile: "templates/component.hbs",
21 | },
22 | {
23 | type: "append",
24 | path: "package.json",
25 | pattern: /"exports": {(?)/g,
26 | template: '"./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
27 | },
28 | ],
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/packages/navigation/turbo/generators/templates/component.hbs:
--------------------------------------------------------------------------------
1 | export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
2 | return (
3 |
4 |
{{ pascalCase name }} Component
5 | {children}
6 |
7 | );
8 | };
9 |
--------------------------------------------------------------------------------
/packages/navigation/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports = {
4 | mode: "production",
5 | entry: "./src/index.tsx",
6 | output: {
7 | path: path.resolve(__dirname, "dist"),
8 | filename: "index.js",
9 | libraryTarget: "commonjs",
10 | },
11 | resolve: {
12 | extensions: [".ts", ".tsx", ".js", ".json"],
13 | },
14 | module: {
15 | rules: [
16 | {
17 | test: /\.(ts|tsx)$/,
18 | exclude: /(node_modules|bower_components)/,
19 | use: {
20 | loader: "babel-loader",
21 | options: {
22 | presets: [
23 | "@babel/preset-env",
24 | "@babel/preset-react",
25 | "@babel/preset-typescript",
26 | ],
27 | },
28 | },
29 | },
30 | {
31 | test: /\.(ts|tsx)$/,
32 | exclude: /(node_modules|bower_components)/,
33 | use: {
34 | loader: "ts-loader",
35 | },
36 | },
37 | ],
38 | },
39 | externals: {
40 | react: "commonjs react",
41 | "react-native": "commonjs react-native",
42 | },
43 | };
44 |
--------------------------------------------------------------------------------
/packages/next-adapter/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | root: true,
4 | extends: ["./react-internal.js"],
5 | parser: "@typescript-eslint/parser",
6 | parserOptions: {
7 | project: "./tsconfig.lint.json",
8 | tsconfigRootDir: __dirname,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/packages/next-adapter/README.md:
--------------------------------------------------------------------------------
1 | # @unitools/next-adapter [ALPHA]
2 |
3 | ### This is the official documentation for the @unitools/next-adapter package.
4 |
5 | ## Features
6 |
7 | - Support for .unitools.{js|ts|jsx|tsx} file extensions.
8 | - Automatic aliasing of @unitools/_ packages to @unitools/_-next and react-native to react-native-web.
9 | - Transpilation support for react-native, @unitools/_-next, @expo, and expo-_ packages.
10 |
11 | ### Installation
12 |
13 | To install the package, use either of the following commands:
14 |
15 | ```bash
16 | npm install @unitools/next-adapter
17 | ```
18 |
19 | or
20 |
21 | ```bash
22 | yarn add @unitools/next-adapter
23 | ```
24 |
25 | Then, add the following configuration to your next.config.js file:
26 |
27 | ```js
28 | /** @type {import('next').NextConfig} */
29 | const { withUnitools } = require("@unitools/next-adapter");
30 | const config = withUnitools({});
31 |
32 | module.exports = config;
33 | ```
34 |
--------------------------------------------------------------------------------
/packages/next-adapter/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "incremental": false,
9 | "isolatedModules": true,
10 | "lib": ["es2022", "DOM", "DOM.Iterable"],
11 | "module": "NodeNext",
12 | "moduleDetection": "force",
13 | "moduleResolution": "NodeNext",
14 | "noUncheckedIndexedAccess": true,
15 | "resolveJsonModule": true,
16 | "skipLibCheck": true,
17 | "strict": true,
18 | "target": "ES2022"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/next-adapter/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unitools/next-adapter",
3 | "version": "0.0.1",
4 | "private": false,
5 | "main": "dist/index.js",
6 | "types": "dist/index.d.ts",
7 | "exports": {
8 | ".": "./dist/index.js"
9 | },
10 | "scripts": {
11 | "type-check": "tsc --noEmit",
12 | "lint": "eslint . --max-warnings 0",
13 | "build": "yarn type-check && tsc",
14 | "prepare": "yarn type-check && tsc"
15 | },
16 | "devDependencies": {
17 | "@babel/core": "^7.24.3",
18 | "@babel/preset-typescript": "^7.24.1",
19 | "@types/eslint": "^8.56.5",
20 | "@types/fs-extra": "^11.0.4",
21 | "babel-loader": "^9.1.3",
22 | "eslint": "^8.57.0",
23 | "next": "*",
24 | "typescript": "^5.4.3"
25 | },
26 | "dependencies": {
27 | "fs-extra": "^11.2.0"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/packages/next-adapter/react-internal.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require("node:path");
2 |
3 | const project = resolve(process.cwd(), "tsconfig.json");
4 |
5 | /*
6 | * This is a custom ESLint configuration for use with
7 | * internal (bundled by their consumer) libraries
8 | * that utilize React.
9 | *
10 | * This config extends the Vercel Engineering Style Guide.
11 | * For more information, see https://github.com/vercel/style-guide
12 | *
13 | */
14 |
15 | /** @type {import("eslint").Linter.Config} */
16 | module.exports = {
17 | extends: ["eslint:recommended", "prettier", "eslint-config-turbo"],
18 | plugins: ["only-warn"],
19 | globals: {
20 | React: true,
21 | JSX: true,
22 | },
23 | env: {
24 | browser: true,
25 | },
26 | settings: {
27 | "import/resolver": {
28 | typescript: {
29 | project,
30 | },
31 | },
32 | },
33 | ignorePatterns: [
34 | // Ignore dotfiles
35 | ".*.js",
36 | "node_modules/",
37 | "dist/",
38 | ],
39 | overrides: [
40 | // Force ESLint to detect .tsx files
41 | { files: ["*.js?(x)", "*.ts?(x)"] },
42 | ],
43 | };
44 |
--------------------------------------------------------------------------------
/packages/next-adapter/react-library.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "React Library",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "jsx": "react-jsx"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/next-adapter/src/index.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 | import findWorkspaceRoot from "find-yarn-workspace-root";
3 | import { DefinePlugin } from "webpack";
4 | import {
5 | checkIfWorkspace,
6 | getDependenciesFromNodeModules,
7 | getExactDependenciesFromNodeModules,
8 | } from "./utils";
9 |
10 | const unitoolsDeps = ["@unitools", "@expo", "expo-"];
11 |
12 | const reactNativeDeps = [
13 | "react-native",
14 | "react-native-web",
15 | "react-native-svg",
16 | ];
17 |
18 | export const withUnitools = (nextConfig: NextConfig) => {
19 | const currDir = process.cwd();
20 | let rootDependencyList = [];
21 | try {
22 | rootDependencyList = getDependenciesFromNodeModules(currDir, unitoolsDeps);
23 | } catch (e) {}
24 |
25 | let rootExactDependencyList = [];
26 | try {
27 | rootExactDependencyList = getExactDependenciesFromNodeModules(
28 | currDir,
29 | reactNativeDeps
30 | );
31 | } catch (e) {}
32 |
33 | const workspaceRoot = findWorkspaceRoot(currDir); // Absolute path or null
34 | const metaWorkspace = checkIfWorkspace(currDir);
35 | let parentDependencyList = [];
36 | let parentExactDependencyList = [];
37 |
38 | if (metaWorkspace.isWorkspace) {
39 | try {
40 | parentDependencyList = getDependenciesFromNodeModules(
41 | metaWorkspace.workspacePath,
42 | unitoolsDeps
43 | );
44 | parentExactDependencyList = getExactDependenciesFromNodeModules(
45 | metaWorkspace.workspacePath,
46 | reactNativeDeps
47 | );
48 | } catch (e) {}
49 | }
50 |
51 | if (workspaceRoot) {
52 | try {
53 | parentDependencyList = getDependenciesFromNodeModules(
54 | workspaceRoot,
55 | unitoolsDeps
56 | );
57 | parentExactDependencyList = getExactDependenciesFromNodeModules(
58 | workspaceRoot,
59 | reactNativeDeps
60 | );
61 | } catch (e) {}
62 | }
63 | let unitoolsUITranspileModules = Array.from(
64 | new Set([
65 | ...rootDependencyList,
66 | ...parentDependencyList,
67 | ...rootExactDependencyList,
68 | ...parentExactDependencyList,
69 | ...(nextConfig.transpilePackages || []),
70 | ])
71 | );
72 |
73 | const updatedNextConfig = {
74 | ...nextConfig,
75 | transpilePackages: unitoolsUITranspileModules,
76 | webpack: (config: any, ctx: any) => {
77 | config = nextConfig.webpack ? nextConfig.webpack(config, ctx) : config;
78 |
79 | config.resolve.alias = {
80 | ...(config.resolve.alias || {}),
81 | "react-native$": "react-native-web",
82 | "@unitools/link": "@unitools/link-next",
83 | "@unitools/router": "@unitools/router-next",
84 | "@unitools/image": "@unitools/image-next",
85 | };
86 |
87 | config.resolve.extensions = [
88 | ".next-web.js",
89 | ".next-web.jsx",
90 | ".next-web.ts",
91 | ".next-web.tsx",
92 | ".web.js",
93 | ".web.jsx",
94 | ".web.ts",
95 | ".web.tsx",
96 | ...config.resolve.extensions,
97 | ];
98 |
99 | config.module.rules.push({
100 | test: /\.ttf$/,
101 | loader: "url-loader",
102 | });
103 |
104 | config.plugins.push(
105 | new DefinePlugin({
106 | __DEV__: JSON.stringify(process.env.NODE_ENV !== "production"),
107 | })
108 | );
109 |
110 | return config;
111 | },
112 | };
113 |
114 | return updatedNextConfig;
115 | };
116 |
--------------------------------------------------------------------------------
/packages/next-adapter/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "target": "es5",
5 | "module": "NodeNext",
6 | "jsx": "react",
7 | "outDir": "./dist",
8 | },
9 | "include": [
10 | "src"
11 | ],
12 | "exclude": [
13 | "node_modules",
14 | "dist"
15 | ]
16 | }
--------------------------------------------------------------------------------
/packages/next-adapter/tsconfig.lint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": [
7 | "src",
8 | "turbo"
9 | ],
10 | "exclude": [
11 | "node_modules",
12 | "dist"
13 | ]
14 | }
--------------------------------------------------------------------------------
/packages/router-expo/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | root: true,
4 | extends: ["./react-internal.js"],
5 | parser: "@typescript-eslint/parser",
6 | parserOptions: {
7 | project: "./tsconfig.lint.json",
8 | tsconfigRootDir: __dirname,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/packages/router-expo/README.md:
--------------------------------------------------------------------------------
1 | # @unitools/link [ALPHA]
2 |
3 | This is the official documentation of the `@unitools/link` package.
4 |
5 | ## For Next.js
6 |
7 | ### Installation
8 |
9 | ```bash
10 | npm install @unitools/link
11 | ```
12 |
13 | or
14 |
15 | ```bash
16 | yarn add @unitools/link
17 | ```
18 |
19 | Add module resolver to your `next.config.js` file.
20 |
21 | ```js
22 | // next.config.js
23 |
24 | module.exports = {
25 | webpack(config) {
26 | config.resolve.alias["@unitools/link"] = "next/link";
27 | return config;
28 | },
29 | };
30 | ```
31 |
32 | ## For Expo
33 |
34 | ### Installation
35 |
36 | Install `@unitools/link` and the peer dependency `@react-navigation/native`.
37 |
38 | ```bash
39 | npm install @unitools/link @react-navigation/native
40 | ```
41 |
42 | or
43 |
44 | ```bash
45 | yarn add @unitools/link @react-navigation/native
46 | ```
47 |
48 | ## Usage
49 |
50 | ```jsx
51 | import Link from "@unitools/link";
52 |
53 | export default function Home() {
54 | return (
55 |
56 |
57 | About
58 |
59 |
60 | );
61 | }
62 | ```
63 |
64 | ## Props
65 |
66 | | Prop | Type | Default | Description | status | Support Status |
67 | | -------- | ---------------- | ------- | -------------------------------------------------- | -------- | -------------- |
68 | | href | String or Object | | href url | required | ✅ |
69 | | replace | Boolean | | Replace the current history state | - | ✅ |
70 | | scroll | Boolean | | - | - | ❌ |
71 | | prefetch | Boolean | | If true, this will prefetch the url | - | ❌ |
72 | | passHref | Boolean | | Forces Link to send the href property to its child | - | ❌ |
73 | | shallow | Boolean | | - | - | ❌ |
74 | | locale | Boolean | | If true, the active locale is automatically | - | ❌ |
75 |
--------------------------------------------------------------------------------
/packages/router-expo/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "incremental": false,
9 | "isolatedModules": true,
10 | "lib": ["es2022", "DOM", "DOM.Iterable"],
11 | "module": "NodeNext",
12 | "moduleDetection": "force",
13 | "moduleResolution": "NodeNext",
14 | "noUncheckedIndexedAccess": true,
15 | "resolveJsonModule": true,
16 | "skipLibCheck": true,
17 | "strict": true,
18 | "target": "ES2022"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/router-expo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unitools/router-expo",
3 | "version": "0.0.5",
4 | "private": false,
5 | "main": "dist/index.js",
6 | "types": "dist/index.d.ts",
7 | "exports": {
8 | ".": "./dist/index.js"
9 | },
10 | "scripts": {
11 | "type-check": "tsc --noEmit",
12 | "lint": "eslint . --max-warnings 0",
13 | "build": "webpack",
14 | "build:tsc": "yarn type-check && tsc",
15 | "prepare": "yarn type-check && tsc",
16 | "build-old": "yarn type-check && esbuild src/index.tsx --loader:.tsx=ts --bundle --minify --platform=node --outfile=dist/index.js"
17 | },
18 | "devDependencies": {
19 | "@babel/core": "^7.24.3",
20 | "@babel/preset-env": "^7.24.3",
21 | "@babel/preset-react": "^7.24.1",
22 | "@babel/preset-typescript": "^7.24.1",
23 | "@turbo/gen": "^1.12.4",
24 | "@types/eslint": "^8.56.5",
25 | "@types/node": "^20.12.3",
26 | "@types/react": "^18.2.74",
27 | "@types/react-dom": "^18.2.23",
28 | "babel-loader": "^9.1.3",
29 | "esbuild": "^0.20.2",
30 | "eslint": "^8.57.0",
31 | "expo-router": "^3.4.8",
32 | "react": "^18.2.0",
33 | "ts-loader": "^9.5.1",
34 | "typescript": "^5.4.3",
35 | "webpack": "^5.91.0",
36 | "webpack-cli": "^5.1.4"
37 | },
38 | "peerDependencies": {
39 | "@react-navigation/native": "^6.1.16",
40 | "@unitools/link": "*",
41 | "react": "^18.2.0"
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/packages/router-expo/react-internal.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require("node:path");
2 |
3 | const project = resolve(process.cwd(), "tsconfig.json");
4 |
5 | /*
6 | * This is a custom ESLint configuration for use with
7 | * internal (bundled by their consumer) libraries
8 | * that utilize React.
9 | *
10 | * This config extends the Vercel Engineering Style Guide.
11 | * For more information, see https://github.com/vercel/style-guide
12 | *
13 | */
14 |
15 | /** @type {import("eslint").Linter.Config} */
16 | module.exports = {
17 | extends: ["eslint:recommended", "prettier", "eslint-config-turbo"],
18 | plugins: ["only-warn"],
19 | globals: {
20 | React: true,
21 | JSX: true,
22 | },
23 | env: {
24 | browser: true,
25 | },
26 | settings: {
27 | "import/resolver": {
28 | typescript: {
29 | project,
30 | },
31 | },
32 | },
33 | ignorePatterns: [
34 | // Ignore dotfiles
35 | ".*.js",
36 | "node_modules/",
37 | "dist/",
38 | ],
39 | overrides: [
40 | // Force ESLint to detect .tsx files
41 | { files: ["*.js?(x)", "*.ts?(x)"] },
42 | ],
43 | };
44 |
--------------------------------------------------------------------------------
/packages/router-expo/react-library.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "React Library",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "jsx": "react-jsx"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/router-expo/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { useRouter as useExpoRouter } from "expo-router";
2 | import { usePathname as useExpoPathname } from "expo-router";
3 | import type { RouterProps } from "@unitools/router";
4 |
5 | function useRouter(): RouterProps {
6 | const router = useExpoRouter();
7 |
8 | const routerProps = {
9 | push: router.push,
10 | replace: router.replace,
11 | back: router.back,
12 | navigate: router.navigate,
13 | };
14 |
15 | return routerProps;
16 | }
17 |
18 | function usePathname(): string {
19 | return useExpoPathname();
20 | }
21 |
22 | export { useRouter, usePathname };
23 |
--------------------------------------------------------------------------------
/packages/router-expo/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "target": "es5",
5 | "module": "NodeNext",
6 | "jsx": "react",
7 | "outDir": "./dist",
8 | },
9 | "include": [
10 | "src"
11 | ],
12 | "exclude": [
13 | "node_modules",
14 | "dist"
15 | ]
16 | }
--------------------------------------------------------------------------------
/packages/router-expo/tsconfig.lint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": [
7 | "src",
8 | "turbo"
9 | ],
10 | "exclude": [
11 | "node_modules",
12 | "dist"
13 | ]
14 | }
--------------------------------------------------------------------------------
/packages/router-expo/turbo/generators/config.ts:
--------------------------------------------------------------------------------
1 | import type { PlopTypes } from "@turbo/gen";
2 |
3 | // Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
4 |
5 | export default function generator(plop: PlopTypes.NodePlopAPI): void {
6 | // A simple generator to add a new React component to the internal UI library
7 | plop.setGenerator("react-component", {
8 | description: "Adds a new react component",
9 | prompts: [
10 | {
11 | type: "input",
12 | name: "name",
13 | message: "What is the name of the component?",
14 | },
15 | ],
16 | actions: [
17 | {
18 | type: "add",
19 | path: "src/{{kebabCase name}}.tsx",
20 | templateFile: "templates/component.hbs",
21 | },
22 | {
23 | type: "append",
24 | path: "package.json",
25 | pattern: /"exports": {(?)/g,
26 | template: '"./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
27 | },
28 | ],
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/packages/router-expo/turbo/generators/templates/component.hbs:
--------------------------------------------------------------------------------
1 | export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
2 | return (
3 |
4 |
{{ pascalCase name }} Component
5 | {children}
6 |
7 | );
8 | };
9 |
--------------------------------------------------------------------------------
/packages/router-expo/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports = {
4 | mode: "production",
5 | entry: "./src/index.tsx",
6 | output: {
7 | path: path.resolve(__dirname, "dist"),
8 | filename: "index.js",
9 | libraryTarget: "commonjs",
10 | },
11 | resolve: {
12 | extensions: [".ts", ".tsx", ".js", ".json"],
13 | },
14 | module: {
15 | rules: [
16 | {
17 | test: /\.(ts|tsx)$/,
18 | exclude: /(node_modules|bower_components)/,
19 | use: {
20 | loader: "babel-loader",
21 | options: {
22 | presets: [
23 | "@babel/preset-env",
24 | "@babel/preset-react",
25 | "@babel/preset-typescript",
26 | ],
27 | },
28 | },
29 | },
30 | {
31 | test: /\.(ts|tsx)$/,
32 | exclude: /(node_modules|bower_components)/,
33 | use: {
34 | loader: "ts-loader",
35 | },
36 | },
37 | ],
38 | },
39 | externals: {
40 | react: "commonjs react",
41 | "react-native": "commonjs react-native",
42 | },
43 | };
44 |
--------------------------------------------------------------------------------
/packages/router-next/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | root: true,
4 | extends: ["./react-internal.js"],
5 | parser: "@typescript-eslint/parser",
6 | parserOptions: {
7 | project: "./tsconfig.lint.json",
8 | tsconfigRootDir: __dirname,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/packages/router-next/README.md:
--------------------------------------------------------------------------------
1 | # @unitools/link [ALPHA]
2 |
3 | This is the official documentation of the `@unitools/link` package.
4 |
5 | ## For Next.js
6 |
7 | ### Installation
8 |
9 | ```bash
10 | npm install @unitools/link
11 | ```
12 |
13 | or
14 |
15 | ```bash
16 | yarn add @unitools/link
17 | ```
18 |
19 | Add module resolver to your `next.config.js` file.
20 |
21 | ```js
22 | // next.config.js
23 |
24 | module.exports = {
25 | webpack(config) {
26 | config.resolve.alias["@unitools/link"] = "next/link";
27 | return config;
28 | },
29 | };
30 | ```
31 |
32 | ## For Expo
33 |
34 | ### Installation
35 |
36 | Install `@unitools/link` and the peer dependency `@react-navigation/native`.
37 |
38 | ```bash
39 | npm install @unitools/link @react-navigation/native
40 | ```
41 |
42 | or
43 |
44 | ```bash
45 | yarn add @unitools/link @react-navigation/native
46 | ```
47 |
48 | ## Usage
49 |
50 | ```jsx
51 | import Link from "@unitools/link";
52 |
53 | export default function Home() {
54 | return (
55 |
56 |
57 | About
58 |
59 |
60 | );
61 | }
62 | ```
63 |
64 | ## Props
65 |
66 | | Prop | Type | Default | Description | status | Support Status |
67 | | -------- | ---------------- | ------- | -------------------------------------------------- | -------- | -------------- |
68 | | href | String or Object | | href url | required | ✅ |
69 | | replace | Boolean | | Replace the current history state | - | ✅ |
70 | | scroll | Boolean | | - | - | ❌ |
71 | | prefetch | Boolean | | If true, this will prefetch the url | - | ❌ |
72 | | passHref | Boolean | | Forces Link to send the href property to its child | - | ❌ |
73 | | shallow | Boolean | | - | - | ❌ |
74 | | locale | Boolean | | If true, the active locale is automatically | - | ❌ |
75 |
--------------------------------------------------------------------------------
/packages/router-next/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "incremental": false,
9 | "isolatedModules": true,
10 | "lib": ["es2022", "DOM", "DOM.Iterable"],
11 | "module": "NodeNext",
12 | "moduleDetection": "force",
13 | "moduleResolution": "NodeNext",
14 | "noUncheckedIndexedAccess": true,
15 | "resolveJsonModule": true,
16 | "skipLibCheck": true,
17 | "strict": true,
18 | "target": "ES2022"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/router-next/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unitools/router-next",
3 | "version": "0.0.5",
4 | "private": false,
5 | "main": "dist/index.js",
6 | "types": "dist/index.d.ts",
7 | "exports": {
8 | ".": "./dist/index.js"
9 | },
10 | "scripts": {
11 | "type-check": "tsc --noEmit",
12 | "lint": "eslint . --max-warnings 0",
13 | "build": "yarn type-check && tsc",
14 | "prepare": "yarn type-check && tsc"
15 | },
16 | "devDependencies": {
17 | "@babel/core": "^7.24.3",
18 | "@babel/preset-env": "^7.24.3",
19 | "@babel/preset-react": "^7.24.1",
20 | "@babel/preset-typescript": "^7.24.1",
21 | "@turbo/gen": "^1.12.4",
22 | "@types/eslint": "^8.56.5",
23 | "@types/node": "^20.12.3",
24 | "@types/react": "^18.2.74",
25 | "@types/react-dom": "^18.2.23",
26 | "babel-loader": "^9.1.3",
27 | "esbuild": "^0.20.2",
28 | "eslint": "^8.57.0",
29 | "expo-router": "^3.4.8",
30 | "react": "^18.2.0",
31 | "ts-loader": "^9.5.1",
32 | "typescript": "^5.4.3",
33 | "webpack": "^5.91.0",
34 | "webpack-cli": "^5.1.4"
35 | },
36 | "peerDependencies": {
37 | "@unitools/router": "*",
38 | "react": "^18.2.0"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/packages/router-next/react-internal.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require("node:path");
2 |
3 | const project = resolve(process.cwd(), "tsconfig.json");
4 |
5 | /*
6 | * This is a custom ESLint configuration for use with
7 | * internal (bundled by their consumer) libraries
8 | * that utilize React.
9 | *
10 | * This config extends the Vercel Engineering Style Guide.
11 | * For more information, see https://github.com/vercel/style-guide
12 | *
13 | */
14 |
15 | /** @type {import("eslint").Linter.Config} */
16 | module.exports = {
17 | extends: ["eslint:recommended", "prettier", "eslint-config-turbo"],
18 | plugins: ["only-warn"],
19 | globals: {
20 | React: true,
21 | JSX: true,
22 | },
23 | env: {
24 | browser: true,
25 | },
26 | settings: {
27 | "import/resolver": {
28 | typescript: {
29 | project,
30 | },
31 | },
32 | },
33 | ignorePatterns: [
34 | // Ignore dotfiles
35 | ".*.js",
36 | "node_modules/",
37 | "dist/",
38 | ],
39 | overrides: [
40 | // Force ESLint to detect .tsx files
41 | { files: ["*.js?(x)", "*.ts?(x)"] },
42 | ],
43 | };
44 |
--------------------------------------------------------------------------------
/packages/router-next/react-library.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "React Library",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "jsx": "react-jsx"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/router-next/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import type { RouterProps } from "@unitools/router";
3 | import { useRouter as useNextRouter } from "next/navigation";
4 | import { usePathname as useNextPathname } from "next/navigation";
5 |
6 | function useRouter(): RouterProps {
7 | const router = useNextRouter();
8 |
9 | const routerProps = {
10 | push: router.push,
11 | replace: router.replace,
12 | back: router.back,
13 | navigate: router.push,
14 | };
15 |
16 | return routerProps;
17 | }
18 |
19 | function usePathname(): string {
20 | return useNextPathname();
21 | }
22 |
23 | export { useRouter, usePathname };
24 |
--------------------------------------------------------------------------------
/packages/router-next/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "target": "es5",
5 | "module": "NodeNext",
6 | "jsx": "react",
7 | "outDir": "./dist",
8 | },
9 | "include": [
10 | "src"
11 | ],
12 | "exclude": [
13 | "node_modules",
14 | "dist"
15 | ]
16 | }
--------------------------------------------------------------------------------
/packages/router-next/tsconfig.lint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": [
7 | "src",
8 | "turbo"
9 | ],
10 | "exclude": [
11 | "node_modules",
12 | "dist"
13 | ]
14 | }
--------------------------------------------------------------------------------
/packages/router-next/turbo/generators/config.ts:
--------------------------------------------------------------------------------
1 | import type { PlopTypes } from "@turbo/gen";
2 |
3 | // Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
4 |
5 | export default function generator(plop: PlopTypes.NodePlopAPI): void {
6 | // A simple generator to add a new React component to the internal UI library
7 | plop.setGenerator("react-component", {
8 | description: "Adds a new react component",
9 | prompts: [
10 | {
11 | type: "input",
12 | name: "name",
13 | message: "What is the name of the component?",
14 | },
15 | ],
16 | actions: [
17 | {
18 | type: "add",
19 | path: "src/{{kebabCase name}}.tsx",
20 | templateFile: "templates/component.hbs",
21 | },
22 | {
23 | type: "append",
24 | path: "package.json",
25 | pattern: /"exports": {(?)/g,
26 | template: '"./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
27 | },
28 | ],
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/packages/router-next/turbo/generators/templates/component.hbs:
--------------------------------------------------------------------------------
1 | export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
2 | return (
3 |
4 |
{{ pascalCase name }} Component
5 | {children}
6 |
7 | );
8 | };
9 |
--------------------------------------------------------------------------------
/packages/router-next/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports = {
4 | mode: "production",
5 | entry: "./src/index.tsx",
6 | output: {
7 | path: path.resolve(__dirname, "dist"),
8 | filename: "index.js",
9 | libraryTarget: "commonjs",
10 | },
11 | resolve: {
12 | extensions: [".ts", ".tsx", ".js", ".json"],
13 | },
14 | module: {
15 | rules: [
16 | {
17 | test: /\.(ts|tsx)$/,
18 | exclude: /(node_modules|bower_components)/,
19 | use: {
20 | loader: "babel-loader",
21 | options: {
22 | presets: [
23 | "@babel/preset-env",
24 | "@babel/preset-react",
25 | "@babel/preset-typescript",
26 | ],
27 | },
28 | },
29 | },
30 | {
31 | test: /\.(ts|tsx)$/,
32 | exclude: /(node_modules|bower_components)/,
33 | use: {
34 | loader: "ts-loader",
35 | },
36 | },
37 | ],
38 | },
39 | externals: {
40 | react: "commonjs react",
41 | "react-native": "commonjs react-native",
42 | },
43 | };
44 |
--------------------------------------------------------------------------------
/packages/router/.eslintrc.js:
--------------------------------------------------------------------------------
1 | /** @type {import("eslint").Linter.Config} */
2 | module.exports = {
3 | root: true,
4 | extends: ["./react-internal.js"],
5 | parser: "@typescript-eslint/parser",
6 | parserOptions: {
7 | project: "./tsconfig.lint.json",
8 | tsconfigRootDir: __dirname,
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/packages/router/README.md:
--------------------------------------------------------------------------------
1 | # @unitools/link [ALPHA]
2 |
3 | This is the official documentation of the `@unitools/link` package.
4 |
5 | ## For Next.js
6 |
7 | ### Installation
8 |
9 | ```bash
10 | npm install @unitools/link
11 | ```
12 |
13 | or
14 |
15 | ```bash
16 | yarn add @unitools/link
17 | ```
18 |
19 | Add module resolver to your `next.config.js` file.
20 |
21 | ```js
22 | // next.config.js
23 |
24 | module.exports = {
25 | webpack(config) {
26 | config.resolve.alias["@unitools/link"] = "next/link";
27 | return config;
28 | },
29 | };
30 | ```
31 |
32 | ## For Expo
33 |
34 | ### Installation
35 |
36 | Install `@unitools/link` and the peer dependency `@react-navigation/native`.
37 |
38 | ```bash
39 | npm install @unitools/link @react-navigation/native
40 | ```
41 |
42 | or
43 |
44 | ```bash
45 | yarn add @unitools/link @react-navigation/native
46 | ```
47 |
48 | ## Usage
49 |
50 | ```jsx
51 | import Link from "@unitools/link";
52 |
53 | export default function Home() {
54 | return (
55 |
56 |
57 | About
58 |
59 |
60 | );
61 | }
62 | ```
63 |
64 | ## Props
65 |
66 | | Prop | Type | Default | Description | status | Support Status |
67 | | -------- | ---------------- | ------- | -------------------------------------------------- | -------- | -------------- |
68 | | href | String or Object | | href url | required | ✅ |
69 | | replace | Boolean | | Replace the current history state | - | ✅ |
70 | | scroll | Boolean | | - | - | ❌ |
71 | | prefetch | Boolean | | If true, this will prefetch the url | - | ❌ |
72 | | passHref | Boolean | | Forces Link to send the href property to its child | - | ❌ |
73 | | shallow | Boolean | | - | - | ❌ |
74 | | locale | Boolean | | If true, the active locale is automatically | - | ❌ |
75 |
--------------------------------------------------------------------------------
/packages/router/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "incremental": false,
9 | "isolatedModules": true,
10 | "lib": ["es2022", "DOM", "DOM.Iterable"],
11 | "module": "NodeNext",
12 | "moduleDetection": "force",
13 | "moduleResolution": "NodeNext",
14 | "noUncheckedIndexedAccess": true,
15 | "resolveJsonModule": true,
16 | "skipLibCheck": true,
17 | "strict": true,
18 | "target": "ES2022"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/router/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unitools/router",
3 | "version": "0.0.6",
4 | "private": false,
5 | "main": "dist/index.js",
6 | "types": "dist/index.d.ts",
7 | "exports": {
8 | ".": "./dist/index.js"
9 | },
10 | "scripts": {
11 | "type-check": "tsc --noEmit",
12 | "lint": "eslint . --max-warnings 0",
13 | "build": "webpack",
14 | "build:tsc": "yarn type-check && tsc",
15 | "prepare": "yarn type-check && tsc"
16 | },
17 | "devDependencies": {
18 | "@babel/core": "^7.24.3",
19 | "@babel/preset-env": "^7.24.3",
20 | "@babel/preset-react": "^7.24.1",
21 | "@babel/preset-typescript": "^7.24.1",
22 | "@turbo/gen": "^1.12.4",
23 | "@types/eslint": "^8.56.5",
24 | "@types/node": "^20.12.3",
25 | "@types/react": "^18.2.74",
26 | "@types/react-dom": "^18.2.23",
27 | "babel-loader": "^9.1.3",
28 | "esbuild": "^0.20.2",
29 | "eslint": "^8.57.0",
30 | "react": "^18.2.0",
31 | "ts-loader": "^9.5.1",
32 | "typescript": "^5.4.3",
33 | "webpack": "^5.91.0",
34 | "webpack-cli": "^5.1.4"
35 | },
36 | "peerDependencies": {
37 | "react": "^18.2.0"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/packages/router/react-internal.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require("node:path");
2 |
3 | const project = resolve(process.cwd(), "tsconfig.json");
4 |
5 | /*
6 | * This is a custom ESLint configuration for use with
7 | * internal (bundled by their consumer) libraries
8 | * that utilize React.
9 | *
10 | * This config extends the Vercel Engineering Style Guide.
11 | * For more information, see https://github.com/vercel/style-guide
12 | *
13 | */
14 |
15 | /** @type {import("eslint").Linter.Config} */
16 | module.exports = {
17 | extends: ["eslint:recommended", "prettier", "eslint-config-turbo"],
18 | plugins: ["only-warn"],
19 | globals: {
20 | React: true,
21 | JSX: true,
22 | },
23 | env: {
24 | browser: true,
25 | },
26 | settings: {
27 | "import/resolver": {
28 | typescript: {
29 | project,
30 | },
31 | },
32 | },
33 | ignorePatterns: [
34 | // Ignore dotfiles
35 | ".*.js",
36 | "node_modules/",
37 | "dist/",
38 | ],
39 | overrides: [
40 | // Force ESLint to detect .tsx files
41 | { files: ["*.js?(x)", "*.ts?(x)"] },
42 | ],
43 | };
44 |
--------------------------------------------------------------------------------
/packages/router/react-library.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "React Library",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "jsx": "react-jsx"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/router/src/index.tsx:
--------------------------------------------------------------------------------
1 | export interface RouterProps {
2 | push: (path: string) => void;
3 | replace: (path: string) => void;
4 | back: () => void;
5 | navigate: (path: string) => void;
6 | }
7 |
8 | export function useRouter(): RouterProps {
9 | const routerProps = {
10 | push: (path: string) => {},
11 | replace: (path: string) => {},
12 | back: () => {},
13 | navigate: (path: string) => {},
14 | };
15 |
16 | return routerProps;
17 | }
18 |
19 | export function usePathname(): string {
20 | return "";
21 | }
22 |
--------------------------------------------------------------------------------
/packages/router/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "target": "es5",
5 | "module": "NodeNext",
6 | "jsx": "react",
7 | "outDir": "./dist",
8 | },
9 | "include": [
10 | "src"
11 | ],
12 | "exclude": [
13 | "node_modules",
14 | "dist"
15 | ]
16 | }
--------------------------------------------------------------------------------
/packages/router/tsconfig.lint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": [
7 | "src",
8 | "turbo"
9 | ],
10 | "exclude": [
11 | "node_modules",
12 | "dist"
13 | ]
14 | }
--------------------------------------------------------------------------------
/packages/router/turbo/generators/config.ts:
--------------------------------------------------------------------------------
1 | import type { PlopTypes } from "@turbo/gen";
2 |
3 | // Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
4 |
5 | export default function generator(plop: PlopTypes.NodePlopAPI): void {
6 | // A simple generator to add a new React component to the internal UI library
7 | plop.setGenerator("react-component", {
8 | description: "Adds a new react component",
9 | prompts: [
10 | {
11 | type: "input",
12 | name: "name",
13 | message: "What is the name of the component?",
14 | },
15 | ],
16 | actions: [
17 | {
18 | type: "add",
19 | path: "src/{{kebabCase name}}.tsx",
20 | templateFile: "templates/component.hbs",
21 | },
22 | {
23 | type: "append",
24 | path: "package.json",
25 | pattern: /"exports": {(?)/g,
26 | template: '"./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
27 | },
28 | ],
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/packages/router/turbo/generators/templates/component.hbs:
--------------------------------------------------------------------------------
1 | export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
2 | return (
3 |
4 |
{{ pascalCase name }} Component
5 | {children}
6 |
7 | );
8 | };
9 |
--------------------------------------------------------------------------------
/packages/router/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | module.exports = {
4 | mode: "production",
5 | entry: "./src/index.tsx",
6 | output: {
7 | path: path.resolve(__dirname, "dist"),
8 | filename: "index.js",
9 | libraryTarget: "commonjs",
10 | },
11 | resolve: {
12 | extensions: [".ts", ".tsx", ".js", ".json"],
13 | },
14 | module: {
15 | rules: [
16 | {
17 | test: /\.(ts|tsx)$/,
18 | exclude: /(node_modules|bower_components)/,
19 | use: {
20 | loader: "babel-loader",
21 | options: {
22 | presets: [
23 | "@babel/preset-env",
24 | "@babel/preset-react",
25 | "@babel/preset-typescript",
26 | ],
27 | },
28 | },
29 | },
30 | {
31 | test: /\.(ts|tsx)$/,
32 | exclude: /(node_modules|bower_components)/,
33 | use: {
34 | loader: "ts-loader",
35 | },
36 | },
37 | ],
38 | },
39 | externals: {
40 | react: "commonjs react",
41 | "react-native": "commonjs react-native",
42 | },
43 | };
44 |
--------------------------------------------------------------------------------
/packages/utils/.npmignore:
--------------------------------------------------------------------------------
1 | !dist
--------------------------------------------------------------------------------
/packages/utils/.npmrc:
--------------------------------------------------------------------------------
1 |
2 | dist
3 | src
4 | package.json
5 | README.md
--------------------------------------------------------------------------------
/packages/utils/README.md:
--------------------------------------------------------------------------------
1 | # @unitools/utils [ALPHA]
2 |
3 | This is the official documentation of the `@unitools/utils` package.
4 |
5 | ## Installation
6 |
7 | ```bash
8 | npm install @unitools/utils
9 | ```
10 |
11 | or
12 |
13 | ```bash
14 | yarn add -D @unitools/utils
15 | ```
16 |
17 | ## Usage
18 |
19 | ```jsx
20 | import { Platform } from "@unitools/utils";
21 |
22 | export default function Home() {
23 | return (
24 |
32 | );
33 | }
34 | ```
35 |
--------------------------------------------------------------------------------
/packages/utils/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@unitools/utils",
3 | "version": "0.0.1-alpha.11",
4 | "private": false,
5 | "module": "dist/index.js",
6 | "main": "dist/index.js",
7 | "typings": "dist/index.d.ts",
8 | "exports": {
9 | ".": "./dist/index.js"
10 | },
11 | "scripts": {
12 | "lint": "eslint . --max-warnings 0",
13 | "build": "esbuild ./src/*.js --bundle --platform=node --packages=external --outdir=dist && esbuild ./src/*.ts --bundle --sourcemap --tsconfig=tsconfig.json --platform=node --loader:.ts=ts --packages=external --outdir=dist && tsc --emitDeclarationOnly --outDir dist"
14 | },
15 | "devDependencies": {
16 | "@turbo/gen": "^1.12.4",
17 | "@types/eslint": "^8.56.5",
18 | "@types/node": "^20.11.24",
19 | "@types/react": "^18.2.61",
20 | "@types/react-dom": "^18.2.19",
21 | "eslint": "^8.57.0",
22 | "react": "^18.2.0",
23 | "typescript": "^5.3.3",
24 | "esbuild": "^0.20.2"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/packages/utils/src/index.ts:
--------------------------------------------------------------------------------
1 | var Platform: "unknown" | "next" | "expo" = "unknown";
2 |
3 | try {
4 | const platform = require("./platform.js");
5 | Platform = platform.value;
6 | } catch (e) {
7 | console.error(e);
8 | }
9 |
10 | export { Platform };
11 |
--------------------------------------------------------------------------------
/packages/utils/src/postinstall.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs");
2 | const path = require("path");
3 | const os = require("os");
4 | // Read the package.json file
5 | const packageJson = JSON.parse(
6 | fs.readFileSync(
7 | path.resolve(process.cwd(), "..", "..", "..", "package.json"),
8 | "utf8"
9 | )
10 | );
11 |
12 | // Get the value of the start script
13 | const startScript = packageJson.scripts.start;
14 |
15 | // Determine the value to set in the index.js file
16 | let valueToSet;
17 | if (startScript.includes("next")) {
18 | valueToSet = "next";
19 | } else if (startScript.includes("expo")) {
20 | valueToSet = "expo";
21 | } else {
22 | // Handle other cases if needed
23 | valueToSet = "unkown";
24 | }
25 |
26 | // Set the value in the node_modules/@unitools/utils/dist/index.js file
27 | fs.writeFileSync(
28 | path.resolve(process.cwd(), "dist", "platform.js"),
29 | `module.exports = {value:"${valueToSet}"};`
30 | );
31 |
--------------------------------------------------------------------------------
/packages/utils/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "declaration": true,
4 | "module": "commonjs"
5 | },
6 | "exclude": [
7 | "node_modules"
8 | ],
9 | "include": [
10 | "src"
11 | ]
12 | }
--------------------------------------------------------------------------------
/packages/utils/turbo/generators/config.ts:
--------------------------------------------------------------------------------
1 | import type { PlopTypes } from "@turbo/gen";
2 |
3 | // Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
4 |
5 | export default function generator(plop: PlopTypes.NodePlopAPI): void {
6 | // A simple generator to add a new React component to the internal UI library
7 | plop.setGenerator("react-component", {
8 | description: "Adds a new react component",
9 | prompts: [
10 | {
11 | type: "input",
12 | name: "name",
13 | message: "What is the name of the component?",
14 | },
15 | ],
16 | actions: [
17 | {
18 | type: "add",
19 | path: "src/{{kebabCase name}}.tsx",
20 | templateFile: "templates/component.hbs",
21 | },
22 | {
23 | type: "append",
24 | path: "package.json",
25 | pattern: /"exports": {(?)/g,
26 | template: '"./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
27 | },
28 | ],
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/packages/utils/turbo/generators/templates/component.hbs:
--------------------------------------------------------------------------------
1 | export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
2 | return (
3 |
4 |
{{ pascalCase name }} Component
5 | {children}
6 |
7 | );
8 | };
9 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./base.json"
3 | }
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "globalDependencies": ["**/.env.*local"],
4 | "pipeline": {
5 | "build": {
6 | "dependsOn": ["^build"],
7 | "outputs": [".next/**", "!.next/cache/**"]
8 | },
9 | "lint": {
10 | "dependsOn": ["^lint"]
11 | },
12 | "dev": {
13 | "cache": false,
14 | "persistent": true
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------