├── packages ├── theming │ ├── .gitignore │ ├── src │ │ ├── index.ts │ │ └── ThemeProvider.tsx │ ├── package.json │ ├── README.md │ └── tsconfig.json ├── base-edge │ ├── README.md │ ├── package.json │ └── tsconfig.json ├── themed-edge │ ├── README.md │ ├── package.json │ └── tsconfig.json ├── kit │ ├── babel.config.js │ ├── src │ │ ├── index.ts │ │ └── AvatarGroup │ │ │ ├── index.ts │ │ │ └── AvatarGroup.tsx │ ├── README.md │ ├── tsconfig.json │ ├── LICENSE │ └── package.json └── envinfo │ ├── package.json │ ├── envinfo.js │ └── README.md ├── .gitignore ├── .yarnrc.yml ├── .yarn ├── install-state.gz └── plugins │ └── @yarnpkg │ └── plugin-workspace-tools.cjs ├── .editorconfig ├── package.json ├── lerna.json ├── .github └── FUNDING.yml ├── scripts └── build.mjs └── README.md /packages/theming/.gitignore: -------------------------------------------------------------------------------- 1 | !src 2 | -------------------------------------------------------------------------------- /packages/base-edge/README.md: -------------------------------------------------------------------------------- 1 | # @rneui/base@edge 2 | -------------------------------------------------------------------------------- /packages/themed-edge/README.md: -------------------------------------------------------------------------------- 1 | # @rneui/themed@edge 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | 4 | .yarn/cache 5 | 6 | *.log 7 | .DS_Store 8 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | 3 | yarnPath: .yarn/releases/yarn-3.2.0.cjs 4 | -------------------------------------------------------------------------------- /packages/kit/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /.yarn/install-state.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arpitBhalla/react-native-elements-utils/HEAD/.yarn/install-state.gz -------------------------------------------------------------------------------- /packages/kit/src/index.ts: -------------------------------------------------------------------------------- 1 | import AvatarGroup, { AvatarGroupProps } from './AvatarGroup'; 2 | 3 | export { AvatarGroup }; 4 | 5 | export { AvatarGroupProps }; 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | end_of_line = lf 5 | insert_final_newline = true 6 | 7 | [*.{js,json,yml}] 8 | charset = utf-8 9 | indent_style = space 10 | indent_size = 2 11 | -------------------------------------------------------------------------------- /packages/kit/src/AvatarGroup/index.ts: -------------------------------------------------------------------------------- 1 | import AvatarGroup, { AvatarGroupProps } from './AvatarGroup'; 2 | import withTheme from '@rneui/themed/dist/config/withTheme'; 3 | 4 | export { AvatarGroupProps }; 5 | 6 | export default withTheme(AvatarGroup, 'AvatarGroup'); 7 | -------------------------------------------------------------------------------- /packages/envinfo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@rneui/envinfo", 3 | "publishConfig": { 4 | "access": "public" 5 | }, 6 | "license": "MIT", 7 | "description": "Logs infos about the environment for React Native Elements", 8 | "version": "1.0.0", 9 | "bin": "./envinfo.js", 10 | "dependencies": { 11 | "envinfo": "^7.8.1" 12 | }, 13 | "author": "RNE Core Team" 14 | } 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@rneui/utils", 3 | "packageManager": "yarn@3.2.0", 4 | "workspaces": { 5 | "packages": [ 6 | "packages/*" 7 | ] 8 | }, 9 | "private": true, 10 | "scripts": { 11 | "build": "node scripts/build.mjs && echo 'Running tsc' && lerna run build && echo 'Done'", 12 | "edge-release": "lerna run release" 13 | }, 14 | "dependencies": { 15 | "fs-extra": "^10.1.0", 16 | "lerna": "^4.0.0", 17 | "node-fetch": "^3.2.4" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": ["packages/*"], 3 | "npmClient": "yarn", 4 | "useWorkspaces": true, 5 | "version": "independent", 6 | "command": { 7 | "publish": { 8 | "allowBranch": "main", 9 | "conventionalCommits": true, 10 | "createRelease": "github", 11 | "message": "chore: publish", 12 | "ignoreChanges": [ 13 | "**/__fixtures__/**", 14 | "**/__tests__/**", 15 | "**/*.md", 16 | "**/example/**", 17 | "**/*json" 18 | ] 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/kit/README.md: -------------------------------------------------------------------------------- 1 | # @rneui/kit 2 | 3 | > Not production ready! Do not use 4 | 5 | ## Components 6 | 7 | ### AvatarGroup 8 | 9 | ```tsx 10 | 11 | 12 | 16 | 17 | 18 | 19 | ``` 20 | -------------------------------------------------------------------------------- /packages/base-edge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@rneui/base", 3 | "version": "0.0.0-edge.2", 4 | "main": "dist/index.js", 5 | "types": "dist/index.d.ts", 6 | "files": [ 7 | "dist" 8 | ], 9 | "publishConfig": { 10 | "access": "public" 11 | }, 12 | "scripts": { 13 | "build": "tsc", 14 | "release": "yarn npm publish --tag edge" 15 | }, 16 | "author": "RNE Core Team", 17 | "license": "MIT", 18 | "dependencies": { 19 | "@rneui/base-edge": "github:react-native-elements/react-native-elements#base" 20 | }, 21 | "description": "" 22 | } 23 | -------------------------------------------------------------------------------- /packages/envinfo/envinfo.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | const envinfo = require("envinfo"); 3 | 4 | envinfo 5 | .run( 6 | { 7 | npmPackages: `{${[ 8 | "@rneui/*", 9 | "react-native-elements", 10 | "expo", 11 | "typescript", 12 | "react-native", 13 | ]}}`, 14 | npmGlobalPackages: ["expo", "typescript", "react-native-cli"], 15 | }, 16 | { 17 | json: false, 18 | showNotFound: true, 19 | markdown: true, 20 | duplicates: false, 21 | } 22 | ) 23 | .then((env) => console.log(env)); 24 | -------------------------------------------------------------------------------- /packages/themed-edge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@rneui/themed", 3 | "version": "0.0.0-edge.2", 4 | "main": "dist/index.js", 5 | "types": "dist/index.d.ts", 6 | "files": [ 7 | "dist" 8 | ], 9 | "publishConfig": { 10 | "access": "public" 11 | }, 12 | "scripts": { 13 | "build": "tsc", 14 | "release": "yarn npm publish --tag edge" 15 | }, 16 | "author": "RNE Core Team", 17 | "license": "MIT", 18 | "dependencies": { 19 | "@rneui/themed-edge": "github:react-native-elements/react-native-elements#themed" 20 | }, 21 | "description": "" 22 | } 23 | -------------------------------------------------------------------------------- /packages/kit/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig", 3 | "references": [ 4 | { 5 | "path": "../base" 6 | } 7 | ], 8 | "compilerOptions": { 9 | "allowJs": true /* Allow javascript files to be compiled. */, 10 | "outDir": "dist", 11 | "declaration": true, 12 | "composite": true 13 | }, 14 | "include": ["src/**/*.tsx", "src/**/*.ts", "src/index.ts"], 15 | "exclude": [ 16 | ".ci", 17 | "dist", 18 | "node_modules", 19 | "babel.config.js", 20 | "jest.config.js", 21 | "src/index.d.ts", 22 | "src/**/__tests__" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /packages/theming/src/index.ts: -------------------------------------------------------------------------------- 1 | import { 2 | makeTheming, 3 | RecursivePartial, 4 | THEME, 5 | ThemeMode, 6 | } from "./ThemeProvider"; 7 | 8 | export { makeTheming }; 9 | export type { RecursivePartial, ThemeMode, THEME }; 10 | 11 | interface Theme { 12 | spacing?: { 13 | sm: number; 14 | md: number; 15 | lg: number; 16 | }; 17 | border?: { 18 | sm: number; 19 | md: number; 20 | lg: number; 21 | }; 22 | } 23 | 24 | interface Pallette { 25 | light: string; 26 | main: string; 27 | dark: string; 28 | } 29 | 30 | interface Colors { 31 | primary: Pallette; 32 | secondary: Pallette; 33 | } 34 | 35 | interface MyComponentProps { 36 | disabled?: boolean; 37 | } 38 | -------------------------------------------------------------------------------- /packages/envinfo/README.md: -------------------------------------------------------------------------------- 1 | # @rneui/env 2 | 3 | Prints information about the current environment relevant to packages to the console. 4 | 5 | ```md 6 | ## npmPackages: 7 | 8 | - @rneui/base: ^0.0.0-edge.2 => 0.0.0-edge.2 9 | - expo: ~45.0.0 => 45.0.1 10 | - react-native: 0.68.1 => 0.68.1 11 | 12 | ## npmGlobalPackages: 13 | 14 | - typescript: 4.6.3 15 | - expo: Not Found 16 | - react-native-cli: Not Found 17 | ``` 18 | 19 | - type: textarea 20 | attributes: 21 | label: Your environment 🌎 22 | description: Run `npx @rneui/envinfo` and paste the results. 23 | value: | 24 |
25 | `npx @rneui/envinfo` 26 | 27 | ``` 28 | Output from `npx @rneui/envinfo` goes here. 29 | ``` 30 | 31 |
32 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: arpitbhalla # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: arpitbhalla # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 14 | -------------------------------------------------------------------------------- /packages/kit/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2023 React Native Elements core team 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /scripts/build.mjs: -------------------------------------------------------------------------------- 1 | import fetch from "node-fetch"; 2 | import fs from "fs-extra"; 3 | import { join } from "path"; 4 | 5 | const rootPath = join(""); 6 | 7 | async function main(pkg) { 8 | const srcPath = join(rootPath, "packages", `${pkg}-edge`, "src"); 9 | 10 | const BASE_PATH = 11 | "https://api.github.com/repos/react-native-elements/react-native-elements/git/trees/" + 12 | pkg; 13 | 14 | if (fs.existsSync(srcPath)) { 15 | fs.rmSync(srcPath, { recursive: true }); 16 | } 17 | 18 | fs.mkdirpSync(srcPath); 19 | 20 | const root = await fetch(BASE_PATH) 21 | .then((res) => res.json()) 22 | .catch(console.log); 23 | console.log(root); 24 | const { url } = root.tree?.find(({ path }) => { 25 | return path === "dist"; 26 | }); 27 | const { tree } = await fetch(url + "?recursive=1").then((res) => res.json()); 28 | tree.forEach(({ type, path = "" }) => { 29 | if (type === "blob" && !path.endsWith("d.ts")) { 30 | const fileName = path.pop().replace(".js", ""); 31 | fs.outputFile( 32 | join(srcPath, `${path.replace(".js", ".tsx")}`), 33 | `export * from "@rneui/${pkg}-edge/dist/${fileName}";` 34 | ); 35 | } 36 | }); 37 | } 38 | 39 | console.log("fetching tree..."); 40 | 41 | ["base", "themed"].map(main); 42 | -------------------------------------------------------------------------------- /packages/theming/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@rneui/theming", 3 | "version": "0.1.1", 4 | "description": "Custom Theming for React / React Native apps", 5 | "main": "dist/index.js", 6 | "types": "dist/index.d.ts", 7 | "prepublish": "tsc", 8 | "files": [ 9 | "dist" 10 | ], 11 | "publishConfig": { 12 | "access": "public" 13 | }, 14 | "funding": { 15 | "type": "github", 16 | "url": "https://github.com/sponsors/react-native-elements" 17 | }, 18 | "keywords": [ 19 | "reactjs", 20 | "react-native", 21 | "theming" 22 | ], 23 | "scripts": { 24 | "build": "tsc", 25 | "lint": "eslint . --ext .js,.jsx,.ts,.tsx", 26 | "clean-install": "rimraf node_modules && yarn" 27 | }, 28 | "author": "RNE Core team", 29 | "contributors": [ 30 | { 31 | "name": "Arpit Bhalla", 32 | "url": "https://github.com/arpitBhalla" 33 | } 34 | ], 35 | "license": "MIT", 36 | "bugs": { 37 | "url": "https://github.com/react-native-elements/react-native-elements/issues" 38 | }, 39 | "homepage": "https://reactnativeelements.com/", 40 | "collective": { 41 | "type": "opencollective", 42 | "url": "https://opencollective.com/react-native-elements", 43 | "logo": "https://opencollective.com/react-native-elements/logo.txt" 44 | }, 45 | "repository": { 46 | "type": "git", 47 | "url": "git+https://github.com/react-native-elements/react-native-elements.git" 48 | }, 49 | "dependencies": { 50 | "deepmerge": "^4.2.2", 51 | "hoist-non-react-statics": "^3.3.2" 52 | }, 53 | "devDependencies": { 54 | "@types/hoist-non-react-statics": "^3.3.1" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /packages/kit/src/AvatarGroup/AvatarGroup.tsx: -------------------------------------------------------------------------------- 1 | import { Avatar } from '@rneui/base/dist/Avatar'; 2 | import * as React from 'react'; 3 | import { StyleSheet, View } from 'react-native'; 4 | 5 | export interface AvatarGroupProps { 6 | size?: number; 7 | rounded?: boolean; 8 | children: any; 9 | max: any; 10 | } 11 | 12 | const AvatarGroup = ({ 13 | size = 32, 14 | rounded = true, 15 | children, 16 | max, 17 | }: AvatarGroupProps) => { 18 | const childCount = React.Children.count(children); 19 | return ( 20 | 21 | {[ 22 | ...React.Children.toArray(children), 23 | childCount > max ? ( 24 | 30 | ) : undefined, 31 | ] 32 | .slice(max) 33 | .map((child, index) => { 34 | if (!child) { 35 | return null; 36 | } 37 | return ( 38 | 48 | {React.cloneElement(child as any, { 49 | size, 50 | rounded, 51 | })} 52 | 53 | ); 54 | })} 55 | 56 | ); 57 | }; 58 | 59 | const styles = StyleSheet.create({ 60 | container: { 61 | flexDirection: 'row', 62 | }, 63 | }); 64 | 65 | export default React.forwardRef(AvatarGroup); 66 | -------------------------------------------------------------------------------- /packages/kit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@rneui/kit", 3 | "version": "0.0.0-alpha.2", 4 | "packageManager": "yarn@3.2.4", 5 | "description": "UI Kit based on RNE UI", 6 | "main": "dist/index.js", 7 | "types": "dist/index.d.ts", 8 | "prepublish": "tsc --composite false", 9 | "files": [ 10 | "dist" 11 | ], 12 | "publishConfig": { 13 | "access": "public" 14 | }, 15 | "funding": { 16 | "type": "github", 17 | "url": "https://github.com/sponsors/react-native-elements" 18 | }, 19 | "keywords": [ 20 | "react", 21 | "native", 22 | "react native", 23 | "react native elements", 24 | "rneui", 25 | "themed", 26 | "react native ui", 27 | "react native components", 28 | "ui library", 29 | "ios", 30 | "android", 31 | "bootstrap" 32 | ], 33 | "scripts": { 34 | "build": "tsc --composite false", 35 | "test": "jest", 36 | "test:update": "jest -u", 37 | "test:ci": "jest --runInBand", 38 | "test:watch": "jest --watch", 39 | "lint": "eslint . --ext .js,.jsx,.ts,.tsx", 40 | "clean-install": "rimraf node_modules && yarn" 41 | }, 42 | "author": "RNE Core Team", 43 | "license": "MIT", 44 | "bugs": { 45 | "url": "https://github.com/react-native-elements/react-native-elements/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22pkg%3A+themed%22+" 46 | }, 47 | "repository": { 48 | "type": "git", 49 | "url": "git+https://github.com/react-native-elements/react-native-elements.git", 50 | "directory": "packages/layout" 51 | }, 52 | "homepage": "https://reactnativeelements.com/", 53 | "collective": { 54 | "type": "opencollective", 55 | "url": "https://opencollective.com/react-native-elements", 56 | "logo": "https://opencollective.com/react-native-elements/logo.txt" 57 | }, 58 | "devDependencies": { 59 | "@rneui/base": "4.0.0-rc.7", 60 | "@rneui/themed": "4.0.0-rc.7" 61 | }, 62 | "peerDependencies": { 63 | "@rneui/base": "4.0.0-rc.7", 64 | "@rneui/themed": "4.0.0-rc.7" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /packages/theming/README.md: -------------------------------------------------------------------------------- 1 | # @rneui/theming 2 | 3 | - [Installation](#installation) 4 | - [Usage](#usage) 5 | - [Declare types (if using typescript)](#declare-types-if-using-typescript) 6 | - [Using use-theme hook](#using-use-theme-hook) 7 | - [Using with-theme HOC](#using-with-theme-hoc) 8 | - [Using default props for components](#using-default-props-for-components) 9 | 10 | Your components with our theme provider 11 | 12 | ## Installation 13 | 14 | ```bash 15 | npm install @rneui/theming 16 | ``` 17 | 18 | ```bash 19 | yarn add @rneui/theming 20 | ``` 21 | 22 | ## Usage 23 | 24 | ### Declare types (if using typescript) 25 | 26 | ```tsx 27 | interface Theme { 28 | spacing?: { 29 | sm: number; 30 | md: number; 31 | lg: number; 32 | }; 33 | border?: { 34 | sm: number; 35 | md: number; 36 | lg: number; 37 | }; 38 | } 39 | 40 | interface Pallette { 41 | light: string; 42 | main: string; 43 | dark: string; 44 | } 45 | 46 | interface Colors { 47 | primary: Pallette; 48 | secondary: Pallette; 49 | } 50 | ``` 51 | 52 | ```tsx 53 | const { createTheme, useTheme, ThemeProvider } = makeTheming({ 54 | spacing: { sm: 8, md: 10, lg: 12 }, 55 | border: { sm: 8, md: 10, lg: 12 }, 56 | }); 57 | 58 | export { createTheme, useTheme, ThemeProvider }; 59 | ``` 60 | 61 | ```tsx 62 | const theme = createTheme({ 63 | darkColors: { 64 | primary: { 65 | main: "#02f300", 66 | }, 67 | }, 68 | lightColors: { 69 | primary: { 70 | main: "#000", 71 | }, 72 | secondary: { 73 | main: "", 74 | }, 75 | }, 76 | spacing: { 77 | sm: 10, 78 | md: 20, 79 | lg: 30, 80 | }, 81 | }); 82 | 83 | const App = () => ( 84 | 85 | ; 143 | }); 144 | ``` 145 | -------------------------------------------------------------------------------- /packages/theming/src/ThemeProvider.tsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useContext, useMemo } from "react"; 2 | import deepmerge, { Options } from "deepmerge"; 3 | // @ts-ignore 4 | import hoistNonReactStatics from "hoist-non-react-statics"; 5 | 6 | export type RecursivePartial = { [P in keyof T]?: RecursivePartial }; 7 | 8 | export enum THEME { 9 | LIGHT = "light", 10 | DARK = "dark", 11 | } 12 | 13 | export type ThemeMode = `${THEME}`; 14 | 15 | export const makeTheming = ( 16 | defaultTheme?: { 17 | mode?: ThemeMode; 18 | lightColors?: RecursivePartial; 19 | darkColors?: RecursivePartial; 20 | } & Theme, 21 | customMerge?: deepmerge.Options["customMerge"] 22 | ) => { 23 | type ComponentFunctionProps = { 24 | [Key in keyof Components]?: 25 | | Components[Key] 26 | | ((props: Components[Key]) => Components[Key]); 27 | }; 28 | 29 | type CreateThemeOptions = Partial & 30 | Partial & { 31 | mode?: ThemeMode; 32 | lightColors?: RecursivePartial; 33 | darkColors?: RecursivePartial; 34 | }; 35 | 36 | type FullTheme = T & 37 | Theme & { 38 | mode: ThemeMode; 39 | colors: Colors; 40 | }; 41 | 42 | type UpdateTheme = ( 43 | myNewTheme: 44 | | CreateThemeOptions 45 | | ((myTheme: CreateThemeOptions) => CreateThemeOptions) 46 | ) => void; 47 | 48 | type ReplaceTheme = ( 49 | updates: 50 | | CreateThemeOptions 51 | | ((myTheme: CreateThemeOptions) => CreateThemeOptions) 52 | ) => void; 53 | 54 | type ThemeOptions = FullTheme; 55 | 56 | type ThemeProviderProps = { 57 | theme: T; 58 | updateTheme: UpdateTheme; 59 | replaceTheme: ReplaceTheme; 60 | }; 61 | 62 | const ThemeContext = React.createContext( 63 | {} as ThemeProviderProps 64 | ); 65 | 66 | const createTheme = (theme: CreateThemeOptions): CreateThemeOptions => { 67 | return { 68 | ...theme, 69 | ...deepmerge( 70 | defaultTheme as CreateThemeOptions, 71 | { 72 | lightColors: theme.lightColors || ({} as Colors), 73 | darkColors: theme.darkColors || ({} as Colors), 74 | mode: theme.mode || "light", 75 | } as CreateThemeOptions 76 | ), 77 | }; 78 | }; 79 | 80 | const separateColors = ( 81 | theme: CreateThemeOptions, 82 | themeMode?: ThemeMode 83 | ): ThemeOptions => { 84 | const { 85 | darkColors: themeDarkColors = {}, 86 | lightColors: themeLightColors = {}, 87 | mode = themeMode, 88 | ...restTheme 89 | } = theme; 90 | 91 | const themeColors = 92 | mode === THEME.DARK ? themeDarkColors : themeLightColors; 93 | return { 94 | colors: themeColors as Colors, 95 | mode, 96 | ...restTheme, 97 | } as ThemeOptions; 98 | }; 99 | 100 | const ThemeProvider: React.FC<{ 101 | theme?: CreateThemeOptions; 102 | children?: React.ReactNode; 103 | }> = ({ theme = createTheme({}), children }) => { 104 | const [themeState, setThemeState] = 105 | React.useState(theme); 106 | 107 | const updateTheme: UpdateTheme = React.useCallback((updatedTheme) => { 108 | setThemeState((oldTheme) => { 109 | const newTheme = 110 | typeof updatedTheme === "function" 111 | ? updatedTheme(oldTheme) 112 | : updatedTheme; 113 | return deepmerge({ ...oldTheme }, newTheme); 114 | }); 115 | }, []); 116 | 117 | const replaceTheme: ReplaceTheme = React.useCallback((replacedTheme) => { 118 | setThemeState((oldTheme) => { 119 | const newTheme = 120 | typeof replacedTheme === "function" 121 | ? replacedTheme(oldTheme) 122 | : replacedTheme; 123 | return deepmerge( 124 | createTheme(defaultTheme as CreateThemeOptions), 125 | newTheme 126 | ); 127 | }); 128 | }, []); 129 | 130 | const ThemeContextValue = React.useMemo( 131 | () => ({ 132 | theme: separateColors(themeState, themeState.mode), 133 | updateTheme, 134 | replaceTheme, 135 | }), 136 | [themeState, updateTheme, replaceTheme] 137 | ); 138 | 139 | return ( 140 | 141 | {children} 142 | 143 | ); 144 | }; 145 | 146 | const ThemeConsumer = ThemeContext.Consumer; 147 | 148 | type UseTheme = { 149 | replaceTheme: ReplaceTheme; 150 | updateTheme: UpdateTheme; 151 | theme: ThemeOptions; 152 | }; 153 | 154 | const useTheme = (): UseTheme => { 155 | return useContext(ThemeContext); 156 | }; 157 | 158 | function useThemeMode() { 159 | const { updateTheme, theme } = useTheme(); 160 | 161 | const setMode = useCallback( 162 | (mode: ThemeMode) => { 163 | updateTheme({ mode } as CreateThemeOptions); 164 | }, 165 | [updateTheme] 166 | ); 167 | 168 | return { mode: theme.mode, setMode }; 169 | } 170 | 171 | function ThemedComponent( 172 | WrappedComponent: any, 173 | themeKey: keyof ComponentFunctionProps, 174 | displayName?: string 175 | ) { 176 | return Object.assign( 177 | (props: any, forwardedRef: any) => { 178 | const { children, ...rest } = props; 179 | 180 | const { theme, updateTheme, replaceTheme } = useTheme(); 181 | 182 | if (!theme) { 183 | const newProps = { 184 | ...rest, 185 | children, 186 | }; 187 | return isClassComponent(WrappedComponent) ? ( 188 | 189 | ) : ( 190 | 191 | ); 192 | } 193 | 194 | const themedProps = useMemo(() => { 195 | const props = theme[themeKey]; 196 | return typeof props === "function" ? props?.(rest) : props; 197 | }, []); 198 | 199 | const newProps = { 200 | theme: { colors: theme.colors, mode: theme.mode }, 201 | updateTheme, 202 | replaceTheme, 203 | ...deepmerge(themedProps || {}, rest, { 204 | customMerge, 205 | clone: false, 206 | }), 207 | children, 208 | }; 209 | 210 | if (isClassComponent(WrappedComponent)) { 211 | return ; 212 | } 213 | return ; 214 | }, 215 | { displayName: displayName } 216 | ); 217 | } 218 | 219 | function withTheme

( 220 | WrappedComponent: React.ComponentType

>, 221 | themeKey?: string 222 | ): React.FunctionComponent

| React.ForwardRefExoticComponent

{ 223 | const name = themeKey 224 | ? `Themed.${themeKey}` 225 | : `Themed.${ 226 | WrappedComponent.displayName || WrappedComponent.name || "Component" 227 | }`; 228 | 229 | const Component = ThemedComponent( 230 | WrappedComponent, 231 | themeKey as keyof ComponentFunctionProps, 232 | name 233 | ); 234 | 235 | if (isClassComponent(WrappedComponent)) { 236 | return hoistNonReactStatics( 237 | React.forwardRef(Component), 238 | WrappedComponent 239 | ); 240 | } 241 | 242 | return Component; 243 | } 244 | 245 | return { 246 | ThemeProvider, 247 | ThemeConsumer, 248 | useTheme, 249 | useThemeMode, 250 | createTheme, 251 | withTheme, 252 | }; 253 | }; 254 | 255 | const isClassComponent = (Component: any) => 256 | Boolean(Component?.prototype?.isReactComponent); 257 | -------------------------------------------------------------------------------- /packages/base-edge/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Enable incremental compilation */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */, 15 | // "lib": [], 16 | "moduleResolution": "node" /* Specify a set of bundled library declaration files that describe the target runtime environment. */, 17 | // "jsx": "preserve", 18 | "declaration": true, 19 | "outDir": "dist" /* Specify what JSX code is generated. */, 20 | // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ 21 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 22 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ 23 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 24 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ 25 | // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ 26 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 27 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 28 | 29 | /* Modules */ 30 | "module": "ESNext" /* Specify what module code is generated. */, 31 | // "rootDir": "./", /* Specify the root folder within your source files. */ 32 | // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ 33 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 34 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 35 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 36 | // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ 37 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 38 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 39 | // "resolveJsonModule": true, /* Enable importing .json files */ 40 | // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ 41 | 42 | /* JavaScript Support */ 43 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */ 44 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 45 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ 46 | 47 | /* Emit */ 48 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 49 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 50 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 51 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 52 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ 53 | // "outDir": "./", /* Specify an output folder for all emitted files. */ 54 | // "removeComments": true, /* Disable emitting comments. */ 55 | // "noEmit": true, /* Disable emitting files from a compilation. */ 56 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 57 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ 58 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 59 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 60 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 61 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 62 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 63 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 64 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 65 | // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ 66 | // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */ 67 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 68 | // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ 69 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 70 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 71 | 72 | /* Interop Constraints */ 73 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 74 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 75 | "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */, 76 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 77 | "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */, 78 | 79 | /* Type Checking */ 80 | "strict": true /* Enable all strict type-checking options. */, 81 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ 82 | // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ 83 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 84 | // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ 85 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 86 | // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */ 87 | // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ 88 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 89 | // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ 90 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ 91 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 92 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 93 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 94 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ 95 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 96 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ 97 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 98 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 99 | 100 | /* Completeness */ 101 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 102 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /packages/themed-edge/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Enable incremental compilation */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */, 15 | // "lib": [], 16 | "moduleResolution": "node" /* Specify a set of bundled library declaration files that describe the target runtime environment. */, 17 | // "jsx": "preserve", 18 | "declaration": true, 19 | "outDir": "dist" /* Specify what JSX code is generated. */, 20 | // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ 21 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 22 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ 23 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 24 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ 25 | // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ 26 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 27 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 28 | 29 | /* Modules */ 30 | "module": "ESNext" /* Specify what module code is generated. */, 31 | // "rootDir": "./", /* Specify the root folder within your source files. */ 32 | // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ 33 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 34 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 35 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 36 | // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ 37 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 38 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 39 | // "resolveJsonModule": true, /* Enable importing .json files */ 40 | // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ 41 | 42 | /* JavaScript Support */ 43 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */ 44 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 45 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ 46 | 47 | /* Emit */ 48 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 49 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 50 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 51 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 52 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ 53 | // "outDir": "./", /* Specify an output folder for all emitted files. */ 54 | // "removeComments": true, /* Disable emitting comments. */ 55 | // "noEmit": true, /* Disable emitting files from a compilation. */ 56 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 57 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ 58 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 59 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 60 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 61 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 62 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 63 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 64 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 65 | // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ 66 | // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */ 67 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 68 | // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ 69 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 70 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 71 | 72 | /* Interop Constraints */ 73 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 74 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 75 | "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */, 76 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 77 | "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */, 78 | 79 | /* Type Checking */ 80 | "strict": true /* Enable all strict type-checking options. */, 81 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ 82 | // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ 83 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 84 | // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ 85 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 86 | // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */ 87 | // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ 88 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 89 | // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ 90 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ 91 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 92 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 93 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 94 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ 95 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 96 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ 97 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 98 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 99 | 100 | /* Completeness */ 101 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 102 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /packages/theming/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 4 | 5 | /* Projects */ 6 | // "incremental": true, /* Enable incremental compilation */ 7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ 8 | // "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */ 9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ 10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ 11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ 12 | 13 | /* Language and Environment */ 14 | "outDir": "dist", 15 | "declaration": true, 16 | "target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */, 17 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ 18 | // "jsx": "preserve", /* Specify what JSX code is generated. */ 19 | // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ 20 | "jsx": "react", 21 | 22 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ 23 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ 24 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ 25 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ 26 | // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ 27 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ 28 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ 29 | 30 | /* Modules */ 31 | "module": "commonjs" /* Specify what module code is generated. */, 32 | // "rootDir": "./", /* Specify the root folder within your source files. */ 33 | // "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ 34 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ 35 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ 36 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ 37 | // "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */ 38 | // "types": [], /* Specify type package names to be included without being referenced in a source file. */ 39 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 40 | // "resolveJsonModule": true, /* Enable importing .json files */ 41 | // "noResolve": true, /* Disallow `import`s, `require`s or ``s from expanding the number of files TypeScript should add to a project. */ 42 | 43 | /* JavaScript Support */ 44 | // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */ 45 | // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ 46 | // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ 47 | 48 | /* Emit */ 49 | // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ 50 | // "declarationMap": true, /* Create sourcemaps for d.ts files. */ 51 | // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ 52 | // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ 53 | // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */ 54 | // "outDir": "./", /* Specify an output folder for all emitted files. */ 55 | // "removeComments": true, /* Disable emitting comments. */ 56 | // "noEmit": true, /* Disable emitting files from a compilation. */ 57 | // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ 58 | // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ 59 | // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ 60 | // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ 61 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 62 | // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ 63 | // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ 64 | // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ 65 | // "newLine": "crlf", /* Set the newline character for emitting files. */ 66 | // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ 67 | // "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */ 68 | // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ 69 | // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ 70 | // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ 71 | // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ 72 | 73 | /* Interop Constraints */ 74 | // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ 75 | // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ 76 | "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */, 77 | // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ 78 | "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */, 79 | 80 | /* Type Checking */ 81 | "strict": true /* Enable all strict type-checking options. */, 82 | // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */ 83 | // "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */ 84 | // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ 85 | // "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */ 86 | // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ 87 | // "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */ 88 | // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ 89 | // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ 90 | // "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ 91 | // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ 92 | // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ 93 | // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ 94 | // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ 95 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ 96 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ 97 | // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ 98 | // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ 99 | // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ 100 | 101 | /* Completeness */ 102 | // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ 103 | "skipLibCheck": true /* Skip type checking all .d.ts files. */ 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | react-native-elements 4 | 5 |

6 | 7 |

8 | Cross Platform React Native UI Toolkit 9 |

10 | 11 |

12 | 13 | 14 | 15 | 16 | 17 | 18 |

19 | 20 |
21 | 22 | 23 | 24 | 25 |
26 | 27 |

28 | 29 | 30 | 31 |

32 | 33 |
34 | 35 | ![React Native Elements UI Toolkit](https://user-images.githubusercontent.com/5962998/37248832-a7060286-24b1-11e8-94a8-847ab6ded4ec.png) 36 | 37 | ## Installation 38 | 39 | ```bash 40 | npm install @rneui/base 41 | ``` 42 | 43 | Follow 44 | [these instructions](https://reactnativeelements.com/docs/) 45 | to install React Native Elements! 46 | 47 | ## Usage 48 | 49 | Start using the components or try it on Snack 50 | [here](https://snack.expo.io/rJu6gJfBZ). 51 | 52 | ```js 53 | import { Button } from '@rneui/base'; 54 | 55 | const App = () =>