diff --git a/.node-version b/.node-version deleted file mode 100644 index b6a7d89c..00000000 --- a/.node-version +++ /dev/null @@ -1 +0,0 @@ -16 diff --git a/.ruby-version b/.ruby-version index a603bb50..be94e6f5 100644 --- a/.ruby-version +++ b/.ruby-version @@ -1 +1 @@ -2.7.5 +3.2.2 diff --git a/Gemfile b/Gemfile index 5efda89f..dd64cb27 100644 --- a/Gemfile +++ b/Gemfile @@ -1,6 +1,6 @@ source 'https://rubygems.org' # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version -ruby '2.7.5' +ruby '3.2.2' gem 'cocoapods', '~> 1.11', '>= 1.11.2' diff --git a/index.web.js b/index.web.js index 572a613e..e6091590 100644 --- a/index.web.js +++ b/index.web.js @@ -4,10 +4,10 @@ import { AppRegistry } from "react-native"; import App from "./App"; import { name as appName } from "./app.json"; -import sfBold from "./assets/fonts/SFProText-Bold.ttf"; -import sfMedium from "./assets/fonts/SFProText-Medium.ttf"; -import sfRegular from "./assets/fonts/SFProText-Regular.ttf"; -import sfSemiBold from "./assets/fonts/SFProText-Semibold.ttf"; +import sfBold from "./src/assets/fonts/SFProText-Bold.ttf"; +import sfMedium from "./src/assets/fonts/SFProText-Medium.ttf"; +import sfRegular from "./src/assets/fonts/SFProText-Regular.ttf"; +import sfSemiBold from "./src/assets/fonts/SFProText-Semibold.ttf"; if (module.hot) { module.hot.accept(); diff --git a/src/components/AnimatedImage.jsx b/src/components/AnimatedImage.jsx index 12ff69ee..7a68138e 100644 --- a/src/components/AnimatedImage.jsx +++ b/src/components/AnimatedImage.jsx @@ -13,7 +13,9 @@ import styled from "styled-components/native"; import { flexbox, space, border, color, layout } from "styled-system"; import ImagePlaceholder from "@assets/images/image-placeholder.svg"; -import { Container, Loader } from "@components"; + +import { Container } from "./Container"; +import { Loader } from "./Loader"; import { theme } from "../theme"; diff --git a/src/components/BottomTabBar.jsx b/src/components/BottomTabBar.jsx index acdc0093..ce824442 100644 --- a/src/components/BottomTabBar.jsx +++ b/src/components/BottomTabBar.jsx @@ -12,7 +12,8 @@ import Animated, { import { useSafeAreaInsets } from "react-native-safe-area-context"; import { moderateScale } from "react-native-size-matters"; -import { Container, Typography } from "@components"; +import { Container } from "./Container"; +import { Typography } from "./Typography"; const TabElement = ({ isFocused, diff --git a/src/components/Button.jsx b/src/components/Button.jsx index 8833f4a4..b17197d2 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -9,6 +9,7 @@ import { Container } from "./Container"; import { Loader } from "./Loader"; import { Touchable } from "./Touchable"; import { Typography } from "./Typography"; + // eslint-disable-next-line @bigbinary/neeto/no-dangling-constants export const BUTTON_VARIANTS = Object.freeze({ SOLID: "solid", diff --git a/src/components/ButtonGroup.jsx b/src/components/ButtonGroup.jsx index 67ab3795..c2cb9291 100644 --- a/src/components/ButtonGroup.jsx +++ b/src/components/ButtonGroup.jsx @@ -3,31 +3,33 @@ import * as React from "react"; import PropTypes from "prop-types"; import { moderateScale } from "react-native-size-matters"; -import { Container, Typography, Touchable } from "@components"; +import { Container } from "./Container"; +import { Touchable } from "./Touchable"; +import { Typography } from "./Typography"; /** * ButtonGroup is a linear set of segments, each of which function as a button that can display a different view/or perform a different action. *
* *
- * + * * ## Usage * ```js * import React, { useState } from 'react'; * import { ButtonGroup } from '@bigbinary/neetoui-rn'; - * + * * export default function Main(){ * const buttonItems = ["Button1", "Button2"]; * const [activeButton, setActiveButton] = useState(buttonItems[0]); - * + * * return( * + * /> * ); - * } + * } * ``` */ diff --git a/src/components/Card.jsx b/src/components/Card.jsx index a7f06753..74e9e536 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -13,9 +13,9 @@ import { getShadowStyles } from "../utils"; const StyledTouchableOpacity = styled(TouchableOpacity)` ${flexbox} ${space} - ${border} - ${color} - ${layout} + ${border} + ${color} + ${layout} `; /** diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx index 4a3f1f41..78f86efe 100644 --- a/src/components/Carousel.jsx +++ b/src/components/Carousel.jsx @@ -5,7 +5,7 @@ import PropTypes from "prop-types"; import { moderateScale } from "react-native-size-matters"; import CarouselParent, { Pagination } from "react-native-snap-carousel"; -import { Container } from "@components"; +import { Container } from "./Container"; const { width } = Dimensions.get("screen"); diff --git a/src/components/ChatInput/Badge.jsx b/src/components/ChatInput/Badge.jsx index 9cacb93f..937903aa 100644 --- a/src/components/ChatInput/Badge.jsx +++ b/src/components/ChatInput/Badge.jsx @@ -3,7 +3,8 @@ import React from "react"; import PropTypes from "prop-types"; import { moderateScale } from "react-native-size-matters"; -import { Container, Typography } from "@components"; +import { Container } from "../Container"; +import { Typography } from "../Typography"; export const Badge = ({ text, isNoteOptionSelected }) => ( { const theme = useContext(ThemeContext); diff --git a/src/components/ChatInput/MentionsInputWrapper.jsx b/src/components/ChatInput/MentionsInputWrapper.jsx index 4eac2c18..10bd4a8f 100644 --- a/src/components/ChatInput/MentionsInputWrapper.jsx +++ b/src/components/ChatInput/MentionsInputWrapper.jsx @@ -6,14 +6,12 @@ import { MentionInput } from "react-native-controlled-mentions"; import { moderateScale } from "react-native-size-matters"; import { ThemeContext } from "styled-components/native"; -import { - Touchable, - Avatar, - Typography, - Card, - Divider, - Container, -} from "@components"; +import { Avatar } from "../Avatar"; +import { Card } from "../Card"; +import { Container } from "../Container"; +import { Divider } from "../Divider"; +import { Touchable } from "../Touchable"; +import { Typography } from "../Typography"; export const MentionsInputWrapper = forwardRef( ({ suggestions, shouldShowSuggestions, ...rest }, ref) => { diff --git a/src/components/CheckBox.jsx b/src/components/CheckBox.jsx index 428f291c..c5efc2c6 100644 --- a/src/components/CheckBox.jsx +++ b/src/components/CheckBox.jsx @@ -10,6 +10,7 @@ import { ThemeContext } from "styled-components/native"; import { Touchable } from "./Touchable"; import { Typography } from "./Typography"; + /** * *
diff --git a/src/components/Chip.jsx b/src/components/Chip.jsx index 3c691d11..3b9bad30 100644 --- a/src/components/Chip.jsx +++ b/src/components/Chip.jsx @@ -4,7 +4,9 @@ import { Close } from "@bigbinary/neeto-icons-rn"; import PropTypes from "prop-types"; import { moderateScale } from "react-native-size-matters"; -import { Typography, Touchable, Container } from "@components"; +import { Container } from "./Container"; +import { Touchable } from "./Touchable"; +import { Typography } from "./Typography"; const variantStyleObj = { solid: { diff --git a/src/components/FAB.jsx b/src/components/FAB.jsx index 8000363f..3208e6bb 100644 --- a/src/components/FAB.jsx +++ b/src/components/FAB.jsx @@ -4,8 +4,10 @@ import propTypes from "@styled-system/prop-types"; import PropTypes from "prop-types"; import { moderateScale } from "react-native-size-matters"; -import { Touchable } from "@components"; import { theme } from "@theme"; + +import { Touchable } from "./Touchable"; + /** * FAB component is a floating action button which represents the primary action in an application and is built on top of styled-system. * diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx index 13b00f70..e6a5e5c4 100644 --- a/src/components/ListItem.jsx +++ b/src/components/ListItem.jsx @@ -4,7 +4,8 @@ import propTypes from "@styled-system/prop-types"; import PropTypes from "prop-types"; import { moderateScale } from "react-native-size-matters"; -import { Typography, Container } from "@components"; +import { Container } from "./Container"; +import { Typography } from "./Typography"; /** * ListItems are components that displays a label with different values like string, toggle, button etc. diff --git a/src/components/NotificationPreferenceList.jsx b/src/components/NotificationPreferenceList.jsx index d3e550cb..eda86b0b 100644 --- a/src/components/NotificationPreferenceList.jsx +++ b/src/components/NotificationPreferenceList.jsx @@ -3,13 +3,11 @@ import React from "react"; import PropTypes from "prop-types"; import { moderateScale } from "react-native-size-matters"; -import { - Container, - Typography, - Divider, - ToggleSwitch, - Loader, -} from "@components"; +import { Container } from "./Container"; +import { Divider } from "./Divider"; +import { Loader } from "./Loader"; +import { ToggleSwitch } from "./ToggleSwitch"; +import { Typography } from "./Typography"; /** * @@ -26,7 +24,7 @@ import { * * export default function Main() { * const [data, setData] = useState([]); - * + * * const handleSwitch = (item, index) => { * setData(prevData => { * const newData = [...prevData]; diff --git a/src/components/OnBoarding.jsx b/src/components/OnBoarding.jsx index 1a623d14..df189322 100644 --- a/src/components/OnBoarding.jsx +++ b/src/components/OnBoarding.jsx @@ -4,7 +4,10 @@ import PropTypes from "prop-types"; import { useSafeAreaInsets } from "react-native-safe-area-context"; import { moderateScale } from "react-native-size-matters"; -import { Button, Carousel, Container, Typography } from "@components"; +import { Button } from "./Button"; +import { Carousel } from "./Carousel"; +import { Container } from "./Container"; +import { Typography } from "./Typography"; /** * diff --git a/src/components/OtpInputs.jsx b/src/components/OtpInputs.jsx index d342f9d3..8c665482 100644 --- a/src/components/OtpInputs.jsx +++ b/src/components/OtpInputs.jsx @@ -13,7 +13,8 @@ import { color, } from "styled-system"; -import { Container, Typography } from "@components"; +import { Container } from "./Container"; +import { Typography } from "./Typography"; import { theme } from "../theme"; diff --git a/src/components/ParentView.jsx b/src/components/ParentView.jsx index 4b442da1..e22ef198 100644 --- a/src/components/ParentView.jsx +++ b/src/components/ParentView.jsx @@ -8,7 +8,7 @@ import { } from "react-native-safe-area-context"; import { ThemeContext } from "styled-components/native"; -import { Container } from "@components"; +import { Container } from "./Container"; import { useKeyboard } from "../hooks/useKeyboard"; diff --git a/src/components/Popover.jsx b/src/components/Popover.jsx index 8130143b..d969183e 100644 --- a/src/components/Popover.jsx +++ b/src/components/Popover.jsx @@ -7,7 +7,8 @@ import { moderateScale } from "react-native-size-matters"; import styled from "styled-components/native"; import { flexbox, space, border, color, layout } from "styled-system"; -import { Typography, Divider } from "@components"; +import { Divider } from "./Divider"; +import { Typography } from "./Typography"; export const TouchableOpacity = styled.TouchableOpacity` ${space} diff --git a/src/components/SegmentedTopBar/Tab.jsx b/src/components/SegmentedTopBar/Tab.jsx index 72b3871d..8d9e0bc7 100644 --- a/src/components/SegmentedTopBar/Tab.jsx +++ b/src/components/SegmentedTopBar/Tab.jsx @@ -4,7 +4,8 @@ import { View, StyleSheet } from "react-native"; import PropTypes from "prop-types"; import { moderateScale } from "react-native-size-matters"; -import { Typography, Touchable } from "@components"; +import { Touchable } from "../Touchable"; +import { Typography } from "../Typography"; export const Tab = forwardRef( ({ label, value, navigation, flex, count }, ref) => { diff --git a/src/components/SocialButton.jsx b/src/components/SocialButton.jsx index 55060ccc..4dc07165 100644 --- a/src/components/SocialButton.jsx +++ b/src/components/SocialButton.jsx @@ -7,7 +7,11 @@ import { ThemeContext } from "styled-components/native"; import AppleLogo from "@assets/icons/apple-logo.svg"; import GoogleLogo from "@assets/icons/google-logo.svg"; -import { Container, Typography, Touchable, Loader } from "@components"; + +import { Container } from "./Container"; +import { Loader } from "./Loader"; +import { Touchable } from "./Touchable"; +import { Typography } from "./Typography"; /** * diff --git a/src/components/Toast.jsx b/src/components/Toast.jsx index 7a1bd386..093bd247 100644 --- a/src/components/Toast.jsx +++ b/src/components/Toast.jsx @@ -13,10 +13,13 @@ import ErrorIcon from "@assets/icons/error.svg"; import InfoIcon from "@assets/icons/info.svg"; import SuccessIcon from "@assets/icons/success.svg"; import WarningIcon from "@assets/icons/warning.svg"; -// eslint-disable-next-line import/no-cycle -import { Container, Typography, Card, Touchable } from "@components"; import { defaultToasterConfig } from "@config"; +import { Card } from "./Card"; +import { Container } from "./Container"; +import { Touchable } from "./Touchable"; +import { Typography } from "./Typography"; + const ToastComponent = ({ type, text1, text2, hide, isVisible }) => { const theme = useContext(ThemeContext); const { width } = useWindowDimensions(); diff --git a/src/components/TopBar.jsx b/src/components/TopBar.jsx index 0a26ba07..1d3cdb84 100644 --- a/src/components/TopBar.jsx +++ b/src/components/TopBar.jsx @@ -4,9 +4,12 @@ import { ScrollView, StyleSheet } from "react-native"; import PropTypes from "prop-types"; import { moderateScale } from "react-native-size-matters"; -import { Container, Touchable, Typography } from "@components"; import { theme } from "@theme"; +import { Container } from "./Container"; +import { Touchable } from "./Touchable"; +import { Typography } from "./Typography"; + /** * * Buttons are touchable elements used to interact with the screen and to trigger an action. diff --git a/storybook/stories/Accordion.stories.jsx b/storybook/stories/Accordion.stories.jsx index f1b469be..bebaa607 100644 --- a/storybook/stories/Accordion.stories.jsx +++ b/storybook/stories/Accordion.stories.jsx @@ -48,8 +48,8 @@ A component used to display an expandable list item. > > ); > } -` - } +`, + }, }; export default AccordionStories; diff --git a/storybook/stories/Alert.stories.jsx b/storybook/stories/Alert.stories.jsx index b104f60b..bcaa2083 100644 --- a/storybook/stories/Alert.stories.jsx +++ b/storybook/stories/Alert.stories.jsx @@ -74,8 +74,9 @@ By default, the only button will be an 'OK' button. > }} > /> > ); -} -`} +} +`, + }, }; export default AlertStories; diff --git a/storybook/stories/AnimatedImage.stories.jsx b/storybook/stories/AnimatedImage.stories.jsx index 3776d8f5..edef266b 100644 --- a/storybook/stories/AnimatedImage.stories.jsx +++ b/storybook/stories/AnimatedImage.stories.jsx @@ -1,4 +1,5 @@ import React from "react"; +import { Platform } from "react-native"; import { Container, AnimatedImage, Typography } from "@components"; @@ -20,7 +21,7 @@ AnimatedImage can be used to display a placeholder before image is loaded with a ![image](assets/screenshots/avatar/texts.png) -## Usage +## Usage >import * as React from 'react'; >import { Typography, Avatar } from '@bigbinary/neetoui-rn'; @@ -37,24 +38,49 @@ AnimatedImage can be used to display a placeholder before image is loaded with a > > ); >} -`} +`}, }; export default AnimatedImageStories; -export const AnimatedImageDemo = args => ( - - - -); - -export const AnimatedImages = () => ( - - - Image with Placeholder - -); +export const AnimatedImageDemo = args => { + if (Platform.OS === "web") { + return ( + + + This story is disabled on web due to animation compatibility issues. + + + ); + } + + return ( + + + + ); +}; + +export const AnimatedImages = () => { + // Disable on web platform + if (Platform.OS === "web") { + return ( + + + This story is disabled on web due to animation compatibility issues. + + + ); + } + + return ( + + + Image with Placeholder + + ); +}; diff --git a/storybook/stories/Avatar.stories.jsx b/storybook/stories/Avatar.stories.jsx index 526bd378..3c0b238b 100644 --- a/storybook/stories/Avatar.stories.jsx +++ b/storybook/stories/Avatar.stories.jsx @@ -64,7 +64,8 @@ Avatars can be used to represent people in a graphical way. > > ); > } -`} +`, + }, }; export default AvatarStories; diff --git a/storybook/stories/Badge.stories.jsx b/storybook/stories/Badge.stories.jsx index 89bc53d2..12ac17f5 100644 --- a/storybook/stories/Badge.stories.jsx +++ b/storybook/stories/Badge.stories.jsx @@ -1,7 +1,6 @@ import React from "react"; -import { Badge, Container } from "@components"; -import { Typography } from "@components"; +import { Badge, Container, Typography } from "@components"; import { theme } from "../../src/theme"; @@ -56,10 +55,10 @@ const BadgeMetaData = { }, }, }, - parameters:{ + parameters: { notes: ` This component supports below props categories from styled-system. - + - flexbox - space - border @@ -67,7 +66,7 @@ This component supports below props categories from styled-system. - layout ![image](assets/screenshots/badge/badges.png) - + ## Usage >import * as React from 'react'; @@ -86,8 +85,8 @@ This component supports below props categories from styled-system. > > ); > } -` - } +`, + }, }; export default BadgeMetaData; diff --git a/storybook/stories/BottomSheet.stories.jsx b/storybook/stories/BottomSheet.stories.jsx index 2ea7ce0b..eba52eda 100644 --- a/storybook/stories/BottomSheet.stories.jsx +++ b/storybook/stories/BottomSheet.stories.jsx @@ -71,7 +71,8 @@ BottomSheet can be used to select an item from list of items like a DropDown > > ); > } -`}, +`, + }, }; export default TypographyStories; diff --git a/storybook/stories/BottomTabBar.stories.jsx b/storybook/stories/BottomTabBar.stories.jsx index 8c70cc31..cbe12177 100644 --- a/storybook/stories/BottomTabBar.stories.jsx +++ b/storybook/stories/BottomTabBar.stories.jsx @@ -13,7 +13,7 @@ const BottomTabBarMetaData = { args: {}, parameters: { notes: ` -BottomTabBar is animated custom tabbar component which needs to used along with +BottomTabBar is animated custom tabbar component which needs to used along with [React Navigation & Bottom Tabs Navigator](https://reactnavigation.org/docs/bottom-tab-navigator/) @@ -73,7 +73,8 @@ BottomTabBar is animated custom tabbar component which needs to used along with > > ); > } -`} +`, + }, }; export default BottomTabBarMetaData; diff --git a/storybook/stories/Button.stories.jsx b/storybook/stories/Button.stories.jsx index 1a19863c..91dfbd31 100644 --- a/storybook/stories/Button.stories.jsx +++ b/storybook/stories/Button.stories.jsx @@ -92,16 +92,11 @@ export default function Main() { export default ButtonMetaData; -export const ButtonDemo = args => { - console.log({args}) - - return ( +export const ButtonDemo = args => ( -