Fixes storybook

.ruby-version

@@ -1 +1 @@
-2.7.5
+3.2.2

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'

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();

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";
 

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,

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",

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.
  * <div class="screenshots">
  *   <img src="screenshots/buttonGroup/buttonGroup.png" />
  * </div>
- * 
+ *
  * ## 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(
  *   <ButtonGroup
  *     buttonItems={buttonItems}
  *     onPress={setActiveButton}
  *     currentActiveBtn={activeButton}
- *    />    
+ *    />
  *  );
- * } 
+ * }
 
  * ```
  */

src/components/Card.jsx

@@ -13,9 +13,9 @@ import { getShadowStyles } from "../utils";
 const StyledTouchableOpacity = styled(TouchableOpacity)`
   ${flexbox}
   ${space}
- ${border}
- ${color}
- ${layout}
+  ${border}
+  ${color}
+  ${layout}
 `;
 
 /**

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");
 

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 }) => (
   <Container

src/components/ChatInput/EmailFields.jsx

@@ -4,10 +4,10 @@ import PropTypes from "prop-types";
 import Animated, { FadeInDown, FadeInUp } from "react-native-reanimated";
 import { moderateScale } from "react-native-size-matters";
 
-import { InputEmailChip } from "@components";
-
 import { Badge } from "./Badge";
 
+import { InputEmailChip } from "../InputEmailChip";
+
 export const EmailFields = ({
   shouldShowEmailFields,
   setIsEmailFieldsVisible,

src/components/ChatInput/IconButton.jsx

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { moderateScale } from "react-native-size-matters";
 import { ThemeContext } from "styled-components/native";
 
-import { Touchable } from "@components";
+import { Touchable } from "../Touchable";
 
 export const IconButton = ({ Icon, iconProps, ...rest }) => {
   const theme = useContext(ThemeContext);

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) => {

src/components/CheckBox.jsx

@@ -10,6 +10,7 @@ import { ThemeContext } from "styled-components/native";
 
 import { Touchable } from "./Touchable";
 import { Typography } from "./Typography";
+
 /**
  *
  * <div class="screenshots">

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: {

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.
  *

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.

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];

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";
 
 /**
  *

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";
 

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";
 

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}

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) => {

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";
 
 /**
  *

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();

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.

storybook/stories/Accordion.stories.jsx

@@ -48,8 +48,8 @@ A component used to display an expandable list item.
 >    </Container>
 >  );
 > }
-`
-  }
+`,
+  },
 };
 export default AccordionStories;
 

storybook/stories/Alert.stories.jsx

@@ -74,8 +74,9 @@ By default, the only button will be an 'OK' button.
 >      }}
 >    />
 >  );
-} 
-`}
+}
+`,
+  },
 };
 export default AlertStories;