├── src ├── common │ ├── utils │ │ ├── constants.tsx │ │ └── index.tsx │ ├── index.ts │ └── types │ │ └── index.tsx ├── components │ ├── Input │ │ └── types.tsx │ ├── NumPad │ │ ├── NumPad.styles.ts │ │ ├── index.tsx │ │ ├── NumPad.types.ts │ │ └── NumPad.component.tsx │ ├── CodeInput │ │ ├── CodeInput.test.ts │ │ ├── index.ts │ │ ├── CodeInput.types.ts │ │ └── CodeInput.styles.ts │ ├── Calendar │ │ └── types.tsx │ ├── CheckBox │ │ ├── types.tsx │ │ └── index.tsx │ ├── Dropdown │ │ ├── Line.tsx │ │ ├── types.tsx │ │ ├── DropList.tsx │ │ └── index.tsx │ ├── RadioGroup │ │ ├── types.ts │ │ └── index.tsx │ ├── RadioButton │ │ ├── types.tsx │ │ └── index.tsx │ ├── EmptyView │ │ ├── types.tsx │ │ └── index.tsx │ ├── Switch │ │ ├── types.tsx │ │ └── index.tsx │ ├── InfoBox │ │ ├── types.tsx │ │ ├── index.tsx │ │ └── helper.tsx │ ├── Button │ │ ├── types.tsx │ │ ├── helper.tsx │ │ └── index.tsx │ ├── Table │ │ └── types.tsx │ ├── index.tsx │ ├── EmptyState │ │ └── types.tsx │ ├── Searchbar │ │ ├── types.tsx │ │ └── helper.tsx │ └── Tag │ │ └── index.tsx ├── ui │ ├── index.tsx │ ├── types.tsx │ ├── BottomFixedView.tsx │ └── CenteredView.tsx ├── styles │ ├── index.tsx │ ├── basestyles.tsx │ ├── colorPalette.tsx │ └── fonts.tsx ├── index.tsx ├── animated │ ├── Fade │ │ ├── types.tsx │ │ └── index.tsx │ ├── index.tsx │ ├── Scale │ │ └── index.tsx │ ├── Ticker │ │ ├── Tick.tsx │ │ └── index.tsx │ ├── Splash │ │ └── index.tsx │ └── Progress │ │ └── index.tsx ├── package.json └── themes │ ├── index.tsx │ ├── ThemeContext.tsx │ ├── ThemeProvider.tsx │ ├── themeHooks.tsx │ └── withTheme.tsx ├── documentation ├── deploy.sh ├── docs │ ├── slider.md │ ├── ticker.md │ ├── calendar.md │ ├── formfield.md │ ├── doc2.md │ ├── troubleshooting.md │ ├── overview.md │ ├── centeredview.md │ ├── bottomfixedview.md │ ├── useThemeToggle.md │ ├── useTheme.md │ ├── useColors.md │ ├── themecontext.md │ ├── withTheme.md │ ├── installation.md │ ├── themeprovider.md │ ├── doc3.md │ ├── input.md │ ├── checkbox.md │ ├── dropdown.md │ ├── numpad.md │ ├── emptyview.md │ ├── button.md │ ├── infobox.md │ └── switch.md ├── static │ └── img │ │ ├── popup.png │ │ ├── radio.png │ │ ├── table.png │ │ ├── InfoBox.png │ │ ├── favicon.ico │ │ ├── numpad.png │ │ ├── radio_1.png │ │ ├── radio_2.png │ │ ├── switch.png │ │ ├── checkbox.png │ │ ├── checkbox_1.png │ │ ├── checkbox_2.png │ │ ├── code-dark.png │ │ ├── code-light.png │ │ ├── dropdown.png │ │ ├── numpad_2.png │ │ ├── switch_2.png │ │ ├── ButtonScreen.png │ │ ├── EmptyScreen.png │ │ ├── InputScreen.png │ │ ├── NumpadScreen.png │ │ ├── TableScreen.png │ │ ├── button-dark.png │ │ ├── button-light.png │ │ ├── emptyview-1.png │ │ ├── emptyview-2.png │ │ ├── searchbar_1.png │ │ ├── searchbar_2.png │ │ ├── DropdownScreen.png │ │ ├── default-button.png │ │ ├── disabled-button.png │ │ ├── emptyviewdark.png │ │ ├── primary-button.png │ │ ├── radioGroup_dark.png │ │ ├── searchbarentry.png │ │ ├── radioGroup_light.png │ │ ├── searchbar_dark_1.png │ │ ├── searchbar_dark_2.png │ │ ├── secondary-button.png │ │ └── searchbarentry_dark.png ├── .gitignore ├── blog │ ├── 2019-05-28-hola.md │ ├── 2019-05-29-hello-world.md │ └── 2019-05-30-welcome.md ├── src │ ├── pages │ │ └── styles.module.css │ └── css │ │ └── custom.css ├── package.json ├── README.md ├── sidebars.js └── docusaurus.config.js ├── babel.config.js ├── commitlint.config.js ├── .gitattributes ├── release.sh ├── example ├── app.json ├── ios │ ├── File.swift │ ├── ViserionExample │ │ ├── Images.xcassets │ │ │ ├── Contents.json │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── AppDelegate.h │ │ ├── main.m │ │ ├── Info.plist │ │ ├── AppDelegate.m │ │ └── Base.lproj │ │ │ └── LaunchScreen.xib │ ├── ViserionExample-Bridging-Header.h │ ├── ViserionExample.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ └── Podfile ├── android │ ├── .settings │ │ └── org.eclipse.buildship.core.prefs │ ├── app │ │ ├── debug.keystore │ │ ├── src │ │ │ ├── main │ │ │ │ ├── res │ │ │ │ │ ├── values │ │ │ │ │ │ ├── strings.xml │ │ │ │ │ │ └── styles.xml │ │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ └── mipmap-xxxhdpi │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── java │ │ │ │ │ └── com │ │ │ │ │ │ └── example │ │ │ │ │ │ └── viserion │ │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ │ └── MainApplication.java │ │ │ │ └── AndroidManifest.xml │ │ │ └── debug │ │ │ │ ├── AndroidManifest.xml │ │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── example │ │ │ │ └── viserion │ │ │ │ └── ReactNativeFlipper.java │ │ └── proguard-rules.pro │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── settings.gradle │ ├── .project │ ├── gradle.properties │ ├── build.gradle │ └── gradlew.bat ├── index.js ├── src │ ├── examples │ │ ├── colors.ts │ │ ├── SplashExample.tsx │ │ ├── InputExample.tsx │ │ ├── TickerExample.tsx │ │ ├── InfoBoxExample.tsx │ │ ├── FadeExample.tsx │ │ ├── DropdownExample.tsx │ │ ├── CalendarExample.tsx │ │ ├── navigation │ │ │ └── index.tsx │ │ ├── EmptyViewExample.tsx │ │ ├── CheckboxExample.tsx │ │ ├── ButtonExample.tsx │ │ ├── NumPadExample.tsx │ │ ├── TableExample.tsx │ │ ├── fixtures │ │ │ └── index.tsx │ │ └── SearchbarScreen.tsx │ └── App.tsx ├── babel.config.js ├── metro.config.js └── package.json ├── ios ├── Viserion.h └── Viserion.m ├── .buckconfig ├── android └── src │ └── main │ ├── AndroidManifest.xml │ └── java │ └── com │ └── viserion │ ├── ViserionModule.kt │ └── ViserionPackage.kt ├── typings └── index.d.ts ├── .prettierrc.js ├── .editorconfig ├── viserion.podspec ├── tsconfig.json ├── LICENSE ├── .eslintrc.js └── .gitignore /src/common/utils/constants.tsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Input/types.tsx: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/NumPad/NumPad.styles.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/CodeInput/CodeInput.test.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /documentation/deploy.sh: -------------------------------------------------------------------------------- 1 | GIT_USER=vinitraj10 USE_SSH=true yarn deploy 2 | -------------------------------------------------------------------------------- /src/common/index.ts: -------------------------------------------------------------------------------- 1 | export { scaleDimension, customScaleDimension } from './utils'; 2 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { presets: ['module:metro-react-native-babel-preset'] }; 2 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] }; 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | # specific for windows script files 3 | *.bat text eol=crlf 4 | -------------------------------------------------------------------------------- /documentation/docs/slider.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: slider 3 | title: Slider 4 | sidebar_label: Slider 5 | --- -------------------------------------------------------------------------------- /documentation/docs/ticker.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: ticker 3 | title: Ticker 4 | sidebar_label: Ticker 5 | --- -------------------------------------------------------------------------------- /release.sh: -------------------------------------------------------------------------------- 1 | yarn example bundle && cd example/android && ./gradlew assembleRelease && cd ../../ 2 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ViserionExample", 3 | "displayName": "Viserion Example" 4 | } 5 | -------------------------------------------------------------------------------- /documentation/docs/calendar.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: calendar 3 | title: Calendar 4 | sidebar_label: Calendar 5 | --- -------------------------------------------------------------------------------- /example/ios/File.swift: -------------------------------------------------------------------------------- 1 | // 2 | // File.swift 3 | // ViserionExample 4 | // 5 | 6 | import Foundation 7 | -------------------------------------------------------------------------------- /documentation/docs/formfield.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: formfield 3 | title: FormField 4 | sidebar_label: FormField 5 | --- -------------------------------------------------------------------------------- /documentation/static/img/popup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/popup.png -------------------------------------------------------------------------------- /documentation/static/img/radio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/radio.png -------------------------------------------------------------------------------- /documentation/static/img/table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/table.png -------------------------------------------------------------------------------- /example/android/.settings/org.eclipse.buildship.core.prefs: -------------------------------------------------------------------------------- 1 | connection.project.dir= 2 | eclipse.preferences.version=1 3 | -------------------------------------------------------------------------------- /example/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/example/android/app/debug.keystore -------------------------------------------------------------------------------- /documentation/static/img/InfoBox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/InfoBox.png -------------------------------------------------------------------------------- /documentation/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/favicon.ico -------------------------------------------------------------------------------- /documentation/static/img/numpad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/numpad.png -------------------------------------------------------------------------------- /documentation/static/img/radio_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/radio_1.png -------------------------------------------------------------------------------- /documentation/static/img/radio_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/radio_2.png -------------------------------------------------------------------------------- /documentation/static/img/switch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/switch.png -------------------------------------------------------------------------------- /ios/Viserion.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | @interface Viserion : NSObject 4 | 5 | @end 6 | -------------------------------------------------------------------------------- /src/components/NumPad/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as NumPad } from './NumPad.component'; 2 | export * from './NumPad.types'; 3 | -------------------------------------------------------------------------------- /documentation/static/img/checkbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/checkbox.png -------------------------------------------------------------------------------- /documentation/static/img/checkbox_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/checkbox_1.png -------------------------------------------------------------------------------- /documentation/static/img/checkbox_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/checkbox_2.png -------------------------------------------------------------------------------- /documentation/static/img/code-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/code-dark.png -------------------------------------------------------------------------------- /documentation/static/img/code-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/code-light.png -------------------------------------------------------------------------------- /documentation/static/img/dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/dropdown.png -------------------------------------------------------------------------------- /documentation/static/img/numpad_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/numpad_2.png -------------------------------------------------------------------------------- /documentation/static/img/switch_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/switch_2.png -------------------------------------------------------------------------------- /documentation/static/img/ButtonScreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/ButtonScreen.png -------------------------------------------------------------------------------- /documentation/static/img/EmptyScreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/EmptyScreen.png -------------------------------------------------------------------------------- /documentation/static/img/InputScreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/InputScreen.png -------------------------------------------------------------------------------- /documentation/static/img/NumpadScreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/NumpadScreen.png -------------------------------------------------------------------------------- /documentation/static/img/TableScreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/TableScreen.png -------------------------------------------------------------------------------- /documentation/static/img/button-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/button-dark.png -------------------------------------------------------------------------------- /documentation/static/img/button-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/button-light.png -------------------------------------------------------------------------------- /documentation/static/img/emptyview-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/emptyview-1.png -------------------------------------------------------------------------------- /documentation/static/img/emptyview-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/emptyview-2.png -------------------------------------------------------------------------------- /documentation/static/img/searchbar_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/searchbar_1.png -------------------------------------------------------------------------------- /documentation/static/img/searchbar_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/searchbar_2.png -------------------------------------------------------------------------------- /src/components/CodeInput/index.ts: -------------------------------------------------------------------------------- 1 | export { default as CodeInput } from './CodeInput.component'; 2 | export * from './CodeInput.types'; 3 | -------------------------------------------------------------------------------- /documentation/static/img/DropdownScreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/DropdownScreen.png -------------------------------------------------------------------------------- /documentation/static/img/default-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/default-button.png -------------------------------------------------------------------------------- /documentation/static/img/disabled-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/disabled-button.png -------------------------------------------------------------------------------- /documentation/static/img/emptyviewdark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/emptyviewdark.png -------------------------------------------------------------------------------- /documentation/static/img/primary-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/primary-button.png -------------------------------------------------------------------------------- /documentation/static/img/radioGroup_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/radioGroup_dark.png -------------------------------------------------------------------------------- /documentation/static/img/searchbarentry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/searchbarentry.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | Viserion Example 3 | 4 | -------------------------------------------------------------------------------- /documentation/static/img/radioGroup_light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/radioGroup_light.png -------------------------------------------------------------------------------- /documentation/static/img/searchbar_dark_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/searchbar_dark_1.png -------------------------------------------------------------------------------- /documentation/static/img/searchbar_dark_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/searchbar_dark_2.png -------------------------------------------------------------------------------- /documentation/static/img/secondary-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/secondary-button.png -------------------------------------------------------------------------------- /example/ios/ViserionExample/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/ui/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as BottomFixedView } from './BottomFixedView'; 2 | export { default as CenteredView } from './CenteredView'; 3 | -------------------------------------------------------------------------------- /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /documentation/static/img/searchbarentry_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/documentation/static/img/searchbarentry_dark.png -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/ios/ViserionExample-Bridging-Header.h: -------------------------------------------------------------------------------- 1 | // 2 | // Use this file to import your target's public headers that you would like to expose to Swift. 3 | // 4 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /src/styles/index.tsx: -------------------------------------------------------------------------------- 1 | import Fonts from './fonts'; 2 | import BaseStyles from './basestyles'; 3 | import colors from './colorPalette'; 4 | 5 | export { Fonts, BaseStyles, colors }; 6 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GrowwOld/frontatish/HEAD/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './components'; 2 | export * from './animated'; 3 | export * from './styles'; 4 | export * from './themes'; 5 | export * from './ui'; 6 | export * from './common'; 7 | -------------------------------------------------------------------------------- /documentation/docs/doc2.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: doc2 3 | title: Document Number 2 4 | --- 5 | 6 | This is a link to [another document.](doc3.md) This is a link to an [external page.](http://www.example.com) 7 | -------------------------------------------------------------------------------- /src/ui/types.tsx: -------------------------------------------------------------------------------- 1 | import { ViewStyle } from 'react-native'; 2 | import { ReactNode } from 'react'; 3 | 4 | export interface UIViewProps { 5 | children: ReactNode; 6 | style?: ViewStyle; 7 | } 8 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import App from './src/App'; 3 | import { name as appName } from './app.json'; 4 | 5 | AppRegistry.registerComponent(appName, () => App); 6 | -------------------------------------------------------------------------------- /src/components/Calendar/types.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | 3 | export interface CalendarProps { 4 | setDate: (calendarDate: Date) => void; 5 | title: String; 6 | children: ReactNode; 7 | } 8 | -------------------------------------------------------------------------------- /src/animated/Fade/types.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | import { ViewStyle } from 'react-native'; 3 | 4 | export interface FadeProps { 5 | visible: boolean; 6 | children: ReactNode; 7 | containerStyle?: ViewStyle; 8 | } 9 | -------------------------------------------------------------------------------- /example/src/examples/colors.ts: -------------------------------------------------------------------------------- 1 | // contains color object based on the theme provide 2 | const ExampleColors = { 3 | light: { 4 | primary: 'red', 5 | }, 6 | dark: { 7 | primary: 'pink', 8 | }, 9 | }; 10 | 11 | export default ExampleColors; 12 | -------------------------------------------------------------------------------- /src/animated/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Fade } from './Fade'; 2 | export { default as Ticker } from './Ticker'; 3 | export { default as Scale } from './Scale'; 4 | export { default as Splash } from './Splash'; 5 | export { default as Progress } from './Progress'; 6 | -------------------------------------------------------------------------------- /src/components/CheckBox/types.tsx: -------------------------------------------------------------------------------- 1 | import { ViewStyle } from 'react-native'; 2 | 3 | export interface CheckBoxProps { 4 | checkColor?: string; 5 | checked?: boolean; 6 | disabled?: boolean; 7 | containerStyle?: ViewStyle; 8 | size?: 'sm' | 'md' | 'lg'; 9 | } 10 | -------------------------------------------------------------------------------- /typings/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'react-native-material-ripple'; 2 | declare module 'react-native-vector-icons/*'; 3 | declare module 'react-native-reanimated'; 4 | declare module 'react-native-gesture-handler'; 5 | // declare module '@react-native-community/progress-bar-android' 6 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Sat May 15 14:42:39 IST 2021 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-bin.zip 7 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | singleQuote: true, 4 | trailingComma: 'all', 5 | arrowParens: 'always', 6 | }; 7 | 8 | /* "prettier": { 9 | "quoteProps": "consistent", 10 | "singleQuote": true, 11 | "tabWidth": 2, 12 | "trailingComma": "es5", 13 | "useTabs": false 14 | }, */ 15 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/components/Dropdown/Line.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View } from 'react-native'; 3 | import { useColors } from '../../themes'; 4 | 5 | const Line = () => { 6 | const Colors = useColors(); 7 | return ; 8 | }; 9 | 10 | export default Line; 11 | -------------------------------------------------------------------------------- /src/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.0.1", 3 | "license": "MIT", 4 | "dependencies": { 5 | "@react-native-community/progress-bar-android": "^1.0.2", 6 | "@react-native-community/progress-view": "^1.0.2", 7 | "react-native-material-ripple": "^0.9.1", 8 | "@react-navigation/native": "^5.5.1" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /example/ios/ViserionExample.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /example/ios/ViserionExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /documentation/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'ViserionExample' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | 5 | include ':viserion' 6 | project(':viserion').projectDir = new File(rootProject.projectDir, '../../android') 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | indent_style = space 10 | indent_size = 2 11 | 12 | end_of_line = lf 13 | charset = utf-8 14 | trim_trailing_whitespace = true 15 | insert_final_newline = true 16 | -------------------------------------------------------------------------------- /src/themes/index.tsx: -------------------------------------------------------------------------------- 1 | import ThemeProvider from './ThemeProvider'; 2 | import ThemeContext from './ThemeContext'; 3 | import withTheme from './withTheme'; 4 | import { useColors, useTheme, useThemeToggle } from './themeHooks'; 5 | 6 | export { 7 | ThemeProvider, 8 | ThemeContext, 9 | withTheme, 10 | useColors, 11 | useTheme, 12 | useThemeToggle, 13 | }; 14 | -------------------------------------------------------------------------------- /documentation/docs/troubleshooting.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: troubleshooting 3 | title: TroubleShooting 4 | sidebar_label: TroubleShooting 5 | --- 6 | 7 | You can write content using [GitHub-flavored Markdown syntax](https://github.github.com/gfm/). 8 | 9 | ## Markdown Syntax 10 | 11 | To serve as an example page when styling markdown based Docusaurus sites. 12 | 13 | ## test1 14 | -------------------------------------------------------------------------------- /src/components/RadioGroup/types.ts: -------------------------------------------------------------------------------- 1 | import { StyleType } from '../../common/types'; 2 | 3 | export interface RadioGroupProps { 4 | onChange: (selectedValue: string) => void; 5 | defaultValue?: string; 6 | size?: 'xs' | 'sm' | 'md' | 'lg'; 7 | children?: JSX.Element[]; 8 | containerStyle?: StyleType; 9 | labelStyle?: StyleType; 10 | style?: StyleType; 11 | } 12 | -------------------------------------------------------------------------------- /src/components/RadioButton/types.tsx: -------------------------------------------------------------------------------- 1 | import { StyleType } from '../../common/types'; 2 | 3 | export interface RadioButtonProps { 4 | disabled?: boolean; 5 | onPress?: (value: string) => void; 6 | selected?: boolean; 7 | value?: string; 8 | size?: 'xs' | 'sm' | 'md' | 'lg'; 9 | containerStyle?: StyleType; 10 | labelStyle?: StyleType; 11 | customLabel?: JSX.Element; 12 | } 13 | -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const pak = require('../package.json'); 3 | 4 | module.exports = { 5 | presets: ['module:metro-react-native-babel-preset'], 6 | plugins: [ 7 | [ 8 | 'module-resolver', 9 | { 10 | alias: { 11 | [pak.name]: path.join(__dirname, '..', pak.source), 12 | }, 13 | }, 14 | ], 15 | ], 16 | }; 17 | -------------------------------------------------------------------------------- /documentation/docs/overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: overview 3 | title: Overview 4 | sidebar_label: Overview 5 | --- 6 | 7 | 8 | Since now a days there is a lot more demand to provide multiple themes in your app,so that user can customize their screens as per the define color standards given by the app. **frontatish** aims to give you this option with a very less set of configuration to control multiple themes in your single app. 9 | -------------------------------------------------------------------------------- /example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/ui/BottomFixedView.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View } from 'react-native'; 3 | import { UIViewProps } from './types'; 4 | 5 | const BottomFixedView = (props: UIViewProps) => { 6 | const { children, style } = props; 7 | return ( 8 | 9 | {children} 10 | 11 | ); 12 | }; 13 | 14 | export default BottomFixedView; 15 | -------------------------------------------------------------------------------- /src/themes/ThemeContext.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ColorPaletteType, ThemeType } from '../common/types'; 3 | 4 | export type ContextObjType = { 5 | currentTheme: ThemeType; 6 | toggleTheme: (theme: ThemeType) => void; 7 | colors?: ColorPaletteType; 8 | }; 9 | const ThemeContext = React.createContext({ 10 | currentTheme: 'light', 11 | toggleTheme: () => {}, 12 | }); 13 | 14 | export default ThemeContext; 15 | -------------------------------------------------------------------------------- /src/components/EmptyView/types.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | import { TextStyle } from 'react-native'; 3 | 4 | export interface EmptyViewProps { 5 | illustration?: ReactNode; 6 | emptyType?: 'apiError' | 'noData'; 7 | title?: string; 8 | titleStyle?: TextStyle; 9 | subTitle?: string; 10 | subTitleStyle?: TextStyle; 11 | actionTitle?: string; 12 | actionType?: 'primary' | 'secondary' | 'default'; 13 | actionPress?: () => void; 14 | } 15 | -------------------------------------------------------------------------------- /documentation/blog/2019-05-28-hola.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: hola 3 | title: Hola 4 | author: Gao Wei 5 | author_title: Docusaurus Core Team 6 | author_url: https://github.com/wgao19 7 | author_image_url: https://avatars1.githubusercontent.com/u/2055384?v=4 8 | tags: [hola, docusaurus] 9 | --- 10 | 11 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet 12 | -------------------------------------------------------------------------------- /documentation/docs/centeredview.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: centeredview 3 | title: CenteredView 4 | sidebar_label: CenteredView 5 | --- 6 | 7 | 8 | CenteredView extends from View only,and it helps any content under it to place at the center of the screen 9 | 10 | 11 | 12 | 13 | ## Usage 14 | 15 | ```jsx 16 | import { CenteredView } from 'frontatish'; 17 | 18 | 19 | 20 | Fixed at the center 21 | 22 | 23 | ``` 24 | -------------------------------------------------------------------------------- /src/components/Switch/types.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | import { StyleType } from '../../common/types'; 3 | 4 | export interface SwitchProps { 5 | isOn: boolean; 6 | onColor?: string; 7 | offColor?: string; 8 | onToggle: () => void; 9 | size?: 'sm' | 'lg' | 'md'; 10 | icon?: ReactNode; 11 | disabled?: boolean; 12 | trackOffStyle: StyleType; 13 | trackOnStyle: StyleType; 14 | thumbOnStyle: StyleType; 15 | thumbOffStyle: StyleType; 16 | } 17 | -------------------------------------------------------------------------------- /example/ios/ViserionExample/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | #import 10 | 11 | @interface AppDelegate : UIResponder 12 | 13 | @property (nonatomic, strong) UIWindow *window; 14 | 15 | @end 16 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/example/viserion/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.example.viserion; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. This is used to schedule 9 | * rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "ViserionExample"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example/ios/ViserionExample/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | 10 | #import "AppDelegate.h" 11 | 12 | int main(int argc, char * argv[]) { 13 | @autoreleasepool { 14 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /documentation/docs/bottomfixedview.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: bottomfixedview 3 | title: BottomFixedView 4 | sidebar_label: BottomFixedView 5 | --- 6 | 7 | BottomFixedView extends from View only,and it helps any content under it to place at the bottom of the screen 8 | 9 | 10 | 11 | 12 | ## Usage 13 | 14 | ```jsx 15 | import { BottomFixedView } from 'frontatish'; 16 | 17 | 18 | 19 | Fixed at the bottom 20 | 21 | 22 | ``` 23 | -------------------------------------------------------------------------------- /example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /example/src/examples/SplashExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { SafeAreaView } from 'react-native-safe-area-context'; 3 | 4 | // eslint-disable-next-line import/no-unresolved 5 | import { Splash, useColors } from 'frontatish'; 6 | 7 | const SplashExample = () => { 8 | const Colors = useColors(); 9 | return ( 10 | 11 | 12 | 13 | ); 14 | }; 15 | 16 | export default SplashExample; 17 | -------------------------------------------------------------------------------- /src/ui/CenteredView.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { View } from 'react-native'; 3 | import { UIViewProps } from './types'; 4 | 5 | const CenteredView = (props: UIViewProps) => { 6 | const { children, style } = props; 7 | return ( 8 | 16 | {children} 17 | 18 | ); 19 | }; 20 | 21 | export default CenteredView; 22 | -------------------------------------------------------------------------------- /example/android/.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | android 4 | Project android created by Buildship. 5 | 6 | 7 | 8 | 9 | org.eclipse.buildship.core.gradleprojectbuilder 10 | 11 | 12 | 13 | 14 | 15 | org.eclipse.buildship.core.gradleprojectnature 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/InfoBox/types.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | Types related to InfoBox component 3 | will be defined here,which can be 4 | used by helper method or the ui-co- 5 | mponent. 6 | */ 7 | import { StyleType } from '../../common/types'; 8 | 9 | export interface InfoBoxProps { 10 | label: string; 11 | backgroundColor: 'info' | 'success' | 'warning' | 'error' | 'transparent'; 12 | icon: boolean | string; 13 | borderColor?: 'info' | 'success' | 'warning' | 'error'; 14 | style?: StyleType; 15 | textStyle?: StyleType; 16 | } 17 | -------------------------------------------------------------------------------- /documentation/blog/2019-05-29-hello-world.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: hello-world 3 | title: Hello 4 | author: Endilie Yacop Sucipto 5 | author_title: Maintainer of Docusaurus 6 | author_url: https://github.com/endiliey 7 | author_image_url: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4 8 | tags: [hello, docusaurus] 9 | --- 10 | 11 | Welcome to this blog. This blog is created with [**Docusaurus 2 alpha**](https://v2.docusaurus.io/). 12 | 13 | 14 | 15 | This is a test post. 16 | 17 | A whole bunch of other information. 18 | -------------------------------------------------------------------------------- /documentation/blog/2019-05-30-welcome.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: welcome 3 | title: Welcome 4 | author: Yangshun Tay 5 | author_title: Front End Engineer @ Facebook 6 | author_url: https://github.com/yangshun 7 | author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4 8 | tags: [facebook, hello, docusaurus] 9 | --- 10 | 11 | Blog features are powered by the blog plugin. Simply add files to the `blog` directory. It supports tags as well! 12 | 13 | Delete the whole directory if you don't want the blog features. As simple as that! 14 | -------------------------------------------------------------------------------- /src/components/NumPad/NumPad.types.ts: -------------------------------------------------------------------------------- 1 | export type keyStrokeType = { 2 | actionType: 'insert' | 'delete'; 3 | actionId: number; 4 | value: string; 5 | }; 6 | 7 | // NumPad component props type 8 | export interface NumPadProps { 9 | // gives all the meta data from numpad key 10 | onItemKeyClick?: (keyStroke?: keyStrokeType) => void; 11 | // get the item value directly 12 | onItemClick?: (input: string) => void; 13 | // if you want to explicitly handle onDeleteItem 14 | onDeleteItem?: () => void; 15 | onSubmit: () => void; 16 | } 17 | -------------------------------------------------------------------------------- /ios/Viserion.m: -------------------------------------------------------------------------------- 1 | #import "Viserion.h" 2 | 3 | @implementation Viserion 4 | 5 | RCT_EXPORT_MODULE() 6 | 7 | // Example method 8 | // See // https://facebook.github.io/react-native/docs/native-modules-ios 9 | RCT_REMAP_METHOD(multiply, 10 | multiplyWithA:(nonnull NSNumber*)a withB:(nonnull NSNumber*)b 11 | withResolver:(RCTPromiseResolveBlock)resolve 12 | withRejecter:(RCTPromiseRejectBlock)reject) 13 | { 14 | NSNumber *result = @([a floatValue] * [b floatValue]); 15 | 16 | resolve(result); 17 | } 18 | 19 | @end 20 | -------------------------------------------------------------------------------- /src/components/Dropdown/types.tsx: -------------------------------------------------------------------------------- 1 | import { TextStyle } from 'react-native'; 2 | 3 | export interface DropItem { 4 | label: string; 5 | value: string | number; 6 | } 7 | 8 | export interface DropdownProps { 9 | items: Array; 10 | active: number; 11 | itemStyle?: TextStyle; 12 | activeItemStyle?: TextStyle; 13 | iconColor?: string; 14 | onChange: (index: number) => void; 15 | } 16 | export interface DropListProps { 17 | items: Array; 18 | active: number; 19 | itemStyle?: TextStyle; 20 | onChange: (index: number) => void; 21 | } 22 | -------------------------------------------------------------------------------- /documentation/docs/useThemeToggle.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useThemeToggle 3 | title: useThemeToggle 4 | sidebar_label: useThemeToggle 5 | --- 6 | 7 | 8 | useThemeToggle is a custom hook,which returns a **setter** to set the active theme in the **ThemeContext**,which can be used to set theme on a user action. 9 | 10 | 11 | ## Usage 12 | 13 | 14 | ```jsx 15 | import { useThemeToggle } from 'frontatish'; 16 | 17 | const ProfileScreen = () => { 18 | const setTheme = useThemeToggle(); 19 | 20 | 21 | return ( 22 | 23 | 24 | 25 | 26 | 27 | ) 28 | 29 | 30 | } 31 | ``` 32 | -------------------------------------------------------------------------------- /src/common/types/index.tsx: -------------------------------------------------------------------------------- 1 | import { LIGHT_MODE_COLORS } from '../../styles/colorPalette'; 2 | 3 | export interface StyleType { 4 | [index: string]: number | string; 5 | } 6 | export type ColorType = typeof LIGHT_MODE_COLORS; 7 | 8 | export interface ColorPaletteType { 9 | light: ColorType; 10 | dark: ColorType; 11 | } 12 | 13 | export type AlignTypes = 14 | | 'flex-start' 15 | | 'center' 16 | | 'flex-end' 17 | | 'space-between' 18 | | 'space-around' 19 | | 'space-evenly' 20 | | undefined; 21 | 22 | export type DimensionType = 'xs' | 'sm' | 'md' | 'lg'; 23 | export type ThemeType = 'light' | 'dark'; 24 | -------------------------------------------------------------------------------- /viserion.podspec: -------------------------------------------------------------------------------- 1 | require "json" 2 | 3 | package = JSON.parse(File.read(File.join(__dir__, "package.json"))) 4 | 5 | Pod::Spec.new do |s| 6 | s.name = "viserion" 7 | s.version = package["version"] 8 | s.summary = package["description"] 9 | s.homepage = package["homepage"] 10 | s.license = package["license"] 11 | s.authors = package["author"] 12 | 13 | s.platforms = { :ios => "9.0" } 14 | s.source = { :git => "https://github.com/groww/viserion.git", :tag => "#{s.version}" } 15 | 16 | 17 | s.source_files = "ios/**/*.{h,m,mm}" 18 | 19 | 20 | s.dependency "React" 21 | end 22 | -------------------------------------------------------------------------------- /src/components/Button/types.tsx: -------------------------------------------------------------------------------- 1 | /* 2 | Types related to button component 3 | will be defined here,which can be 4 | used by helper method or the ui-co- 5 | mponent. 6 | */ 7 | import { ReactNode } from 'react'; 8 | import { StyleType } from '../../common/types'; 9 | 10 | // Button component props type 11 | export interface ButtonProps { 12 | children?: ReactNode; 13 | disabled?: boolean | null; 14 | loading?: boolean; 15 | label: string; 16 | // can be changed 17 | type: 'primary' | 'secondary' | 'default'; 18 | onPress?: () => void; 19 | customStyles: StyleType; 20 | // to show some loading state 21 | // inside the button its self 22 | } 23 | -------------------------------------------------------------------------------- /documentation/docs/useTheme.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useTheme 3 | title: useTheme 4 | sidebar_label: useTheme 5 | --- 6 | 7 | useTheme is a custom hook which uses **ThemeContext** to fetch the current active theme and current color palette based on the active theme 8 | 9 | > useTheme can only be used in a functional components,to get same functionality in class components you can use [withTheme](withTheme) 10 | 11 | ## Usage 12 | 13 | ```jsx 14 | import { useTheme } from 'frontatish'; 15 | 16 | const App = () => { 17 | const { activeTheme, colors } = useTheme(); 18 | return ( 19 | 20 | 21 | 22 | ); 23 | }; 24 | ``` 25 | -------------------------------------------------------------------------------- /src/components/CodeInput/CodeInput.types.ts: -------------------------------------------------------------------------------- 1 | import { TextStyle } from 'react-native'; 2 | import { ColorType } from '../../common/types'; 3 | import { keyStrokeType } from '../NumPad/NumPad.types'; 4 | 5 | export interface CodeInputProps { 6 | value: string; 7 | codeLength: number; 8 | Colors?: ColorType; 9 | inputContainer: 'box' | 'line'; 10 | setCode: (code: string) => void; 11 | keyStroke?: keyStrokeType; 12 | codeError?: string; 13 | Mask?: React.ComponentType; 14 | errorAnimation?: boolean; 15 | errorTextStyle?: TextStyle; 16 | codeTextStyle?: TextStyle; 17 | } 18 | 19 | export interface CodeInputState { 20 | codeInputValue: Array; 21 | activeInput: number; 22 | } 23 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "frontatish": ["./src/index"] 6 | }, 7 | "allowUnreachableCode": false, 8 | "allowUnusedLabels": false, 9 | "esModuleInterop": true, 10 | "jsx": "react", 11 | "lib": ["esnext"], 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "noFallthroughCasesInSwitch": true, 15 | "noImplicitReturns": true, 16 | "noImplicitUseStrict": false, 17 | "noStrictGenericChecks": false, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "resolveJsonModule": true, 21 | "skipLibCheck": true, 22 | "strict": true, 23 | "target": "esnext" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /documentation/docs/useColors.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: useColors 3 | title: useColors(deprecated) 4 | sidebar_label: useColors(deprecated) 5 | --- 6 | 7 | useColors is a custom hook which uses **useContext** to fetch the current active theme and then use that value to get the colors which should be used as per the active theme. 8 | 9 | > useColors can only be used in a functional components,to get same functionality in class components you can use [withTheme](withTheme) 10 | 11 | ## Usage 12 | 13 | ```jsx 14 | import { useColors } from 'frontatish'; 15 | 16 | const App = () => { 17 | const Colors = useColors(); 18 | return ( 19 | 20 | 21 | 22 | ); 23 | }; 24 | ``` 25 | -------------------------------------------------------------------------------- /documentation/src/pages/styles.module.css: -------------------------------------------------------------------------------- 1 | /* stylelint-disable docusaurus/copyright-header */ 2 | /** 3 | * CSS files with the .module.css suffix will be treated as CSS modules 4 | * and scoped locally. 5 | */ 6 | 7 | .heroBanner { 8 | padding: 4rem 0; 9 | text-align: center; 10 | position: relative; 11 | overflow: hidden; 12 | } 13 | 14 | @media screen and (max-width: 966px) { 15 | .heroBanner { 16 | padding: 2rem; 17 | } 18 | } 19 | 20 | .buttons { 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | } 25 | 26 | .features { 27 | display: flex; 28 | align-items: center; 29 | padding: 2rem 0; 30 | width: 100%; 31 | } 32 | 33 | .featureImage { 34 | height: 200px; 35 | width: 200px; 36 | } 37 | -------------------------------------------------------------------------------- /src/themes/ThemeProvider.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import ThemeContext from './ThemeContext'; 3 | import { ColorPaletteType, ThemeType } from '../common/types'; 4 | 5 | interface ThemedProps { 6 | children: any; 7 | theme: ThemeType; 8 | colors?: ColorPaletteType; 9 | } 10 | 11 | const ThemeProvider = (props: ThemedProps) => { 12 | const { children, theme, colors } = props; 13 | const [currentTheme, setCurrentTheme] = useState(theme); 14 | const toggleTheme = (newTheme: ThemeType) => { 15 | setCurrentTheme(newTheme); 16 | }; 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | }; 23 | 24 | export default ThemeProvider; 25 | -------------------------------------------------------------------------------- /android/src/main/java/com/viserion/ViserionModule.kt: -------------------------------------------------------------------------------- 1 | package com.viserion 2 | 3 | import com.facebook.react.bridge.ReactApplicationContext 4 | import com.facebook.react.bridge.ReactContextBaseJavaModule 5 | import com.facebook.react.bridge.ReactMethod 6 | import com.facebook.react.bridge.Promise 7 | 8 | class ViserionModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) { 9 | 10 | override fun getName(): String { 11 | return "Viserion" 12 | } 13 | 14 | // Example method 15 | // See https://facebook.github.io/react-native/docs/native-modules-android 16 | @ReactMethod 17 | fun multiply(a: Int, b: Int, promise: Promise) { 18 | 19 | promise.resolve(a * b) 20 | 21 | } 22 | 23 | 24 | } 25 | -------------------------------------------------------------------------------- /example/src/examples/InputExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // eslint-disable-next-line import/no-unresolved 3 | import { Input, useColors } from 'frontatish'; 4 | import { SafeAreaView } from 'react-native-safe-area-context'; 5 | 6 | const InputExample = () => { 7 | const Colors = useColors(); 8 | return ( 9 | 10 | 15 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default InputExample; 22 | -------------------------------------------------------------------------------- /documentation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "documentation", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "docusaurus start", 7 | "build": "docusaurus build", 8 | "swizzle": "docusaurus swizzle", 9 | "deploy": "docusaurus deploy" 10 | }, 11 | "dependencies": { 12 | "@docusaurus/core": "^2.0.0-alpha.49", 13 | "@docusaurus/preset-classic": "^2.0.0-alpha.49", 14 | "classnames": "^2.2.6", 15 | "react": "^16.8.4", 16 | "react-dom": "^16.8.4" 17 | }, 18 | "browserslist": { 19 | "production": [ 20 | ">0.2%", 21 | "not dead", 22 | "not op_mini all" 23 | ], 24 | "development": [ 25 | "last 1 chrome version", 26 | "last 1 firefox version", 27 | "last 1 safari version" 28 | ] 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/animated/Fade/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Animated } from 'react-native'; 3 | import { FadeProps } from './types'; 4 | 5 | class Fade extends React.PureComponent { 6 | animatedOpacity = new Animated.Value(0); 7 | 8 | componentDidUpdate() { 9 | const { visible } = this.props; 10 | Animated.timing(this.animatedOpacity, { 11 | toValue: visible ? 1 : 0, 12 | duration: 1000, 13 | useNativeDriver: true, 14 | }).start(); 15 | } 16 | 17 | render() { 18 | const { children, containerStyle } = this.props; 19 | return ( 20 | 23 | {children} 24 | 25 | ); 26 | } 27 | } 28 | 29 | export default Fade; 30 | -------------------------------------------------------------------------------- /android/src/main/java/com/viserion/ViserionPackage.kt: -------------------------------------------------------------------------------- 1 | package com.viserion 2 | 3 | import java.util.Arrays 4 | import java.util.Collections 5 | 6 | import com.facebook.react.ReactPackage 7 | import com.facebook.react.bridge.NativeModule 8 | import com.facebook.react.bridge.ReactApplicationContext 9 | import com.facebook.react.uimanager.ViewManager 10 | import com.facebook.react.bridge.JavaScriptModule 11 | 12 | class ViserionPackage : ReactPackage { 13 | override fun createNativeModules(reactContext: ReactApplicationContext): List { 14 | return Arrays.asList(ViserionModule(reactContext)) 15 | } 16 | 17 | override fun createViewManagers(reactContext: ReactApplicationContext): List> { 18 | return emptyList>() 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /example/ios/ViserionExample/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /documentation/docs/themecontext.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: themecontext 3 | title: ThemeContext 4 | sidebar_label: ThemeContext 5 | --- 6 | 7 | ThemeContext is just a React Context Object which holds the values which you pass in ThemeProvider at the root of your app,the usage of ThemeContext is very similar how you consume the value from any other React Context Object. 8 | 9 | [withTheme]() is one of the higher order component and [useColors]() which uses **ThemeContext** to get the current active theme of your app,so you can also directly use this context object and do any extra stuff if you want too. 10 | 11 | ## Usage 12 | 13 | ```jsx 14 | import { ThemeContext } from 'frontatish'; 15 | 16 | 17 | {(value) => { 18 | // value is the object passed at ThemeProvider 19 | }} 20 | ; 21 | ``` 22 | -------------------------------------------------------------------------------- /documentation/docs/withTheme.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: withTheme 3 | title: withTheme 4 | sidebar_label: withTheme 5 | --- 6 | 7 | withTheme is a higher order component which uses **ThemeContext** to fetch the current active themeand then use that value to get the colors which should be used as per the active theme. 8 | 9 | > functionality is very similar to [useTheme](useTheme),the only thing is that it is made to be used in class based components.since hooks are not supported in class based components 10 | 11 | ## Usage 12 | 13 | ```jsx 14 | import { withTheme } from 'frontatish'; 15 | 16 | class App extends React.Component { 17 | render() { 18 | const { Colors } = this.props; 19 | return ( 20 | 21 | 22 | 23 | ); 24 | } 25 | } 26 | export default withTheme(App); 27 | ``` 28 | -------------------------------------------------------------------------------- /documentation/README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator. 4 | 5 | ### Installation 6 | 7 | ``` 8 | $ yarn 9 | ``` 10 | 11 | ### Local Development 12 | 13 | ``` 14 | $ yarn start 15 | ``` 16 | 17 | This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server. 18 | 19 | ### Build 20 | 21 | ``` 22 | $ yarn build 23 | ``` 24 | 25 | This command generates static content into the `build` directory and can be served using any static contents hosting service. 26 | 27 | ### Deployment 28 | 29 | ``` 30 | $ GIT_USER= USE_SSH=true yarn deploy 31 | ``` 32 | 33 | If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. 34 | -------------------------------------------------------------------------------- /documentation/sidebars.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | someSidebar: { 3 | 'Geting Started': ['installation', 'contributing'], 4 | Components: [ 5 | 'button', 6 | 'checkbox', 7 | 'numpad', 8 | 'codeinput', 9 | // 'popup', 10 | 'radiobutton', 11 | 'radioGroup', 12 | 'table', 13 | 'emptyview', 14 | // 'calendar', 15 | // 'slider', 16 | 'switch', 17 | 'dropdown', 18 | 'input', 19 | 'searchbar', 20 | // 'infobox', 21 | // 'ticker', 22 | /* next_doc_id */ 23 | ], 24 | Theme: [ 25 | 'overview', 26 | 'themeprovider', 27 | 'themecontext', 28 | 'useColors', 29 | 'useThemeToggle', 30 | 'useTheme', 31 | 'withTheme', 32 | ], 33 | Layouts: ['bottomfixedview', 'centeredview'], 34 | // Guides: ['Contributing',''], 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/Table/types.tsx: -------------------------------------------------------------------------------- 1 | import { StyleType } from '../../common/types'; 2 | 3 | export interface TableProps { 4 | customLeftItemComponents?: any; 5 | customRightItemComponents?: any; 6 | data: Array; 7 | flatlistKey: string; 8 | leftKey: string; 9 | leftKeyOnPress?: (item: any) => void; 10 | leftItemContainerStyle?: StyleType; 11 | leftItemTextStyle?: StyleType; 12 | rightItemContainerStyle?: StyleType; 13 | rightItemTextStyle?: StyleType; 14 | option: Array | string; 15 | optionLabel: Array | string; 16 | optionTextStyle?: StyleType; 17 | rightKeyOnPress?: (label?: any, item?: any) => void; 18 | title: string; 19 | titleTextStyle?: StyleType; 20 | topContainerStyle?: StyleType; 21 | itemSeparator?: React.ComponentType; 22 | tableItemStyle?: StyleType; 23 | rightOptionIconName?: string; 24 | } 25 | 26 | export interface TableItemProps { 27 | item: StyleType; 28 | index: number; 29 | } 30 | -------------------------------------------------------------------------------- /src/themes/themeHooks.tsx: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import ThemeContext, { ContextObjType } from './ThemeContext'; 3 | import ColorPalette from '../styles/colorPalette'; 4 | 5 | // @deprecated 6 | export const useColors = () => { 7 | const contextObj = useContext(ThemeContext); 8 | return getActiveColors(contextObj); 9 | }; 10 | 11 | export const useTheme = () => { 12 | const contextObj = useContext(ThemeContext); 13 | const colors = getActiveColors(contextObj); 14 | return { 15 | activeTheme: contextObj.currentTheme, 16 | colors, 17 | }; 18 | }; 19 | export const useThemeToggle = () => { 20 | const contextObj = useContext(ThemeContext); 21 | return contextObj.toggleTheme; 22 | }; 23 | 24 | const getActiveColors = (context: ContextObjType) => { 25 | const activeLocalColor = ColorPalette[context.currentTheme]; 26 | const activeCustomColor = context?.colors?.[context.currentTheme]; 27 | return { 28 | ...activeLocalColor, 29 | ...activeCustomColor, 30 | }; 31 | }; 32 | -------------------------------------------------------------------------------- /example/src/examples/TickerExample.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | // eslint-disable-next-line import/no-unresolved 3 | import { Ticker, useColors } from 'frontatish'; 4 | import { SafeAreaView } from 'react-native-safe-area-context'; 5 | 6 | const TickerExample = () => { 7 | const [number, setNumber] = useState(0); 8 | // just a function to mock continous update of 9 | // ticker component,so that we can see the animation 10 | useEffect(() => { 11 | const interval = setInterval(() => { 12 | setNumber((prevNumber) => prevNumber + 1); 13 | }, 1000); 14 | return () => clearInterval(interval); 15 | }, []); 16 | const Colors = useColors(); 17 | return ( 18 | 26 | 27 | 28 | ); 29 | }; 30 | 31 | export default TickerExample; 32 | -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useAndroidX=true 21 | android.enableJetifier=true 22 | FLIPPER_VERSION=0.33.1 23 | -------------------------------------------------------------------------------- /example/src/examples/InfoBoxExample.tsx: -------------------------------------------------------------------------------- 1 | // example usage of button component 2 | import React from 'react'; 3 | import { StyleSheet, View, Text } from 'react-native'; 4 | 5 | // eslint-disable-next-line import/no-unresolved 6 | import { InfoBox, useColors, Fonts } from 'frontatish'; 7 | import { SafeAreaView } from 'react-native-safe-area-context'; 8 | 9 | const ButtonExample = () => { 10 | const Colors = useColors(); 11 | return ( 12 | 13 | 14 | 15 | InfoBox Examples 16 | 17 | 18 | 19 | 20 | ); 21 | }; 22 | 23 | const styles = StyleSheet.create({ 24 | exampleBtnContainer: { 25 | flex: 1, 26 | // justifyContent: 'space-evenly', 27 | margin: 20, 28 | }, 29 | exampleBtnText: {}, 30 | }); 31 | 32 | export default ButtonExample; 33 | -------------------------------------------------------------------------------- /src/components/index.tsx: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-unresolved 2 | import Ripple from 'react-native-material-ripple'; 3 | import Button from './Button'; 4 | import CheckBox from './CheckBox'; 5 | import Calendar from './Calendar'; 6 | import Dropdown from './Dropdown'; 7 | // not for 0.4.1 release 8 | // import InfoBox from './InfoBox'; 9 | import Input from './Input'; 10 | import RadioButton from './RadioButton'; 11 | import RadioGroup from './RadioGroup'; 12 | import Table from './Table'; 13 | import EmptyState from './EmptyState'; 14 | import EmptyView from './EmptyView'; 15 | import Switch from './Switch'; 16 | import Searchbar from './Searchbar'; 17 | import Tag from './Tag'; 18 | 19 | export { 20 | Button, 21 | CheckBox, 22 | Calendar, 23 | EmptyState, 24 | EmptyView, 25 | Dropdown, 26 | RadioButton, 27 | RadioGroup, 28 | Ripple, 29 | Switch, 30 | Searchbar, 31 | Table, 32 | Tag, 33 | Input, 34 | // InfoBox, 35 | }; 36 | export { NumPad, keyStrokeType } from './NumPad'; 37 | export { CodeInput } from './CodeInput'; 38 | -------------------------------------------------------------------------------- /src/styles/basestyles.tsx: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import Fonts from './fonts'; 3 | import { customScaleDimension } from '../common/utils'; 4 | 5 | const BaseStyles = StyleSheet.create({ 6 | borderSecondaryBtn: { 7 | borderWidth: 1, 8 | // borderColor: Colors.GREEN_BLUE 9 | }, 10 | borderTertiary: { 11 | borderWidth: 1, 12 | // borderColor: Colors.DARK_SILVER 13 | }, 14 | grwButton: { 15 | height: customScaleDimension(50, 'height', 0.3), 16 | alignItems: 'center', 17 | justifyContent: 'center', 18 | borderRadius: 5, 19 | }, 20 | grwLabel: { 21 | fontFamily: Fonts.type.gotham_medium, 22 | fontSize: Fonts.size.regular_16, 23 | fontWeight: 'bold', 24 | }, 25 | grwInfoBox: { 26 | minHeight: 50, 27 | flexDirection: 'row', 28 | alignItems: 'center', 29 | borderRadius: 6, 30 | }, 31 | grwInfoBoxLabel: { 32 | fontFamily: Fonts.type.roboto, 33 | fontSize: Fonts.size.medium, 34 | fontWeight: 'normal', 35 | }, 36 | }); 37 | 38 | export default BaseStyles; 39 | -------------------------------------------------------------------------------- /src/components/EmptyState/types.tsx: -------------------------------------------------------------------------------- 1 | import { StyleType } from '../../common/types'; 2 | 3 | // Message Board component props type 4 | 5 | export interface topSectionType { 6 | exists: boolean; 7 | titleText?: string; 8 | supplementaryText?: string; 9 | buttonLabel?: string; 10 | backgroundColor?: string; 11 | fontColor?: string; 12 | customStyles?: StyleType; 13 | } 14 | 15 | export interface middleSectionType { 16 | exists: boolean; 17 | titleText?: string; 18 | supplementaryText?: string; 19 | buttonLabel?: string; 20 | backgroundColor?: string; 21 | splashImageURL?: string; 22 | fontColor?: string; 23 | customStyles?: StyleType; 24 | } 25 | 26 | export interface bottomSectionType { 27 | exists: boolean; 28 | titleText?: string; 29 | buttonLabel?: string; 30 | backgroundColor?: string; 31 | fontColor?: string; 32 | customStyles?: StyleType; 33 | } 34 | 35 | export interface EmptyStatePropsType { 36 | topSection?: topSectionType; 37 | middleSection?: middleSectionType; 38 | bottomSection?: bottomSectionType; 39 | } 40 | -------------------------------------------------------------------------------- /documentation/src/css/custom.css: -------------------------------------------------------------------------------- 1 | /* stylelint-disable docusaurus/copyright-header */ 2 | /** 3 | * Any CSS included here will be global. The classic template 4 | * bundles Infima by default. Infima is a CSS framework designed to 5 | * work well for content-centric websites. 6 | */ 7 | 8 | /* You can override the default Infima variables here. */ 9 | :root { 10 | --ifm-color-primary: #25c2a0; 11 | --ifm-color-primary-dark: rgb(33, 175, 144); 12 | --ifm-color-primary-darker: rgb(31, 165, 136); 13 | --ifm-color-primary-darkest: rgb(26, 136, 112); 14 | --ifm-color-primary-light: rgb(70, 203, 174); 15 | --ifm-color-primary-lighter: rgb(102, 212, 189); 16 | --ifm-color-primary-lightest: rgb(146, 224, 208); 17 | --ifm-code-font-size: 95%; 18 | } 19 | 20 | .docusaurus-highlight-code-line { 21 | background-color: rgb(72, 77, 91); 22 | display: block; 23 | margin: 0 calc(-1 * var(--ifm-pre-padding)); 24 | padding: 0 var(--ifm-pre-padding); 25 | } 26 | 27 | .image-horizontal-preview { 28 | display: flex; 29 | } 30 | 31 | .custom table { 32 | display: flex; 33 | flex:1 34 | } 35 | -------------------------------------------------------------------------------- /src/components/RadioGroup/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { View } from 'react-native'; 3 | import RadioButton from '../RadioButton'; 4 | import { RadioGroupProps } from './types'; 5 | 6 | const RadioGroup = ({ 7 | onChange, 8 | defaultValue, 9 | size, 10 | containerStyle, 11 | labelStyle, 12 | children, 13 | style, 14 | }: RadioGroupProps) => { 15 | const [selectedValue, setSelectedValue] = useState(defaultValue); 16 | 17 | useEffect(() => onChange(selectedValue!), [selectedValue]); 18 | 19 | return ( 20 | 21 | {children?.map((radioButton, index) => ( 22 | setSelectedValue(value)} 29 | selected={radioButton.props?.value === selectedValue} 30 | /> 31 | ))} 32 | 33 | ); 34 | }; 35 | 36 | RadioGroup.defaultProps = { 37 | size: 'sm', 38 | }; 39 | 40 | export default RadioGroup; 41 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | const blacklist = require('metro-config/src/defaults/blacklist'); 4 | const escape = require('escape-string-regexp'); 5 | 6 | const root = path.resolve(__dirname, '..'); 7 | const pak = JSON.parse( 8 | fs.readFileSync(path.join(root, 'package.json'), 'utf8') 9 | ); 10 | 11 | const modules = [ 12 | '@babel/runtime', 13 | ...Object.keys({ 14 | ...pak.dependencies, 15 | ...pak.peerDependencies, 16 | }), 17 | ]; 18 | 19 | module.exports = { 20 | projectRoot: __dirname, 21 | watchFolders: [root], 22 | 23 | resolver: { 24 | blacklistRE: blacklist([ 25 | new RegExp(`^${escape(path.join(root, 'node_modules'))}\\/.*$`), 26 | ]), 27 | 28 | extraNodeModules: modules.reduce((acc, name) => { 29 | acc[name] = path.join(__dirname, 'node_modules', name); 30 | return acc; 31 | }, {}), 32 | }, 33 | 34 | transformer: { 35 | getTransformOptions: async () => ({ 36 | transform: { 37 | experimentalImportSupport: false, 38 | inlineRequires: true, 39 | }, 40 | }), 41 | }, 42 | }; 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 growwdevs 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 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "viserion-example", 3 | "description": "Example app for viserion", 4 | "version": "0.0.1", 5 | "private": true, 6 | "scripts": { 7 | "android": "react-native run-android", 8 | "ios": "react-native run-ios", 9 | "start": "react-native start", 10 | "bundle": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle" 11 | }, 12 | "dependencies": { 13 | "@react-native-community/masked-view": "^0.1.10", 14 | "@react-navigation/native": "^5.5.1", 15 | "@react-navigation/stack": "^5.5.1", 16 | "react": "16.13.1", 17 | "react-native": "0.62.2", 18 | "react-native-gesture-handler": "^1.6.1", 19 | "react-native-reanimated": "^1.9.0", 20 | "react-native-safe-area-context": "^3.0.2", 21 | "react-native-screens": "^2.8.0", 22 | "react-native-vector-icons": "^6.6.0" 23 | }, 24 | "devDependencies": { 25 | "@babel/core": "^7.10.2", 26 | "@babel/runtime": "^7.10.2", 27 | "babel-plugin-module-resolver": "^4.0.0", 28 | "metro-react-native-babel-preset": "^0.59.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "28.0.3" 6 | minSdkVersion = 16 7 | compileSdkVersion = 28 8 | targetSdkVersion = 28 9 | kotlinVersion = "1.4.21" 10 | } 11 | repositories { 12 | google() 13 | jcenter() 14 | } 15 | dependencies { 16 | classpath('com.android.tools.build:gradle:4.1.3') 17 | 18 | // NOTE: Do not place your application dependencies here; they belong 19 | // in the individual module build.gradle files 20 | } 21 | } 22 | 23 | allprojects { 24 | repositories { 25 | mavenLocal() 26 | maven { 27 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 28 | url("$rootDir/../node_modules/react-native/android") 29 | } 30 | maven { 31 | // Android JSC is installed from npm 32 | url("$rootDir/../node_modules/jsc-android/dist") 33 | } 34 | 35 | google() 36 | jcenter() 37 | maven { url 'https://www.jitpack.io' } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /documentation/docs/installation.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: installation 3 | title: Installation 4 | sidebar_label: Installation 5 | --- 6 | 7 | :::info 8 | The library is still under development,create issues [here](https://github.com/Groww/frontatish/issues/new) 9 | ::: 10 | 11 | ```bash 12 | yarn add frontatish 13 | or 14 | npm install frontatish 15 | ``` 16 | 17 | ## Requirements 18 | 19 | This library depends on some third party library like [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons#installation) , [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/#installation) & [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/getting_started) 20 | 21 | If you are at **_>0.60_** react-native versions then you don't need to link these libraries or if you are at below to this version you would need to link it manually these libraries into your project. 22 | 23 | ```bash 24 | react-native link 25 | ``` 26 | 27 | ## Usage 28 | 29 | ```jsx 30 | import React from 'react'; 31 | import { View } from 'react-native'; 32 | import { Button } from 'frontatish'; 33 | 34 | const App = () => { 35 | return ( 36 | 37 |