feat: implement switch component

example/.ondevice/storybook.requires.js

@@ -6,45 +6,45 @@ import {
   addParameters,
   addArgsEnhancer,
   clearDecorators,
-} from '@storybook/react-native'
+} from "@storybook/react-native";
 
 global.STORIES = [
   {
-    titlePrefix: '',
-    directory: './src',
-    files: '**/*.stories.?(ts|tsx|js|jsx)',
+    titlePrefix: "",
+    directory: "./src",
+    files: "**/*.stories.?(ts|tsx|js|jsx)",
     importPathMatcher:
-      '^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$',
+      "^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
   },
-]
+];
 
-import '@storybook/addon-ondevice-notes/register'
-import '@storybook/addon-ondevice-controls/register'
-import '@storybook/addon-ondevice-backgrounds/register'
-import '@storybook/addon-ondevice-actions/register'
+import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-controls/register";
+import "@storybook/addon-ondevice-backgrounds/register";
+import "@storybook/addon-ondevice-actions/register";
 
-import {argsEnhancers} from '@storybook/addon-actions/dist/modern/preset/addArgs'
+import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs";
 
-import {decorators, parameters} from './preview'
+import { decorators, parameters } from "./preview";
 
 if (decorators) {
   if (__DEV__) {
     // stops the warning from showing on every HMR
-    require('react-native').LogBox.ignoreLogs([
-      '`clearDecorators` is deprecated and will be removed in Storybook 7.0',
-    ])
+    require("react-native").LogBox.ignoreLogs([
+      "`clearDecorators` is deprecated and will be removed in Storybook 7.0",
+    ]);
   }
   // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
-  clearDecorators()
-  decorators.forEach(decorator => addDecorator(decorator))
+  clearDecorators();
+  decorators.forEach((decorator) => addDecorator(decorator));
 }
 
 if (parameters) {
-  addParameters(parameters)
+  addParameters(parameters);
 }
 
 try {
-  argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer))
+  argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
 } catch {}
 
 const getStories = () => {
@@ -56,7 +56,8 @@ const getStories = () => {
     './src/stories/Progress.stories.tsx': require('../src/stories/Progress.stories.tsx'),
     './src/stories/RadioButton.stories.tsx': require('../src/stories/RadioButton.stories.tsx'),
     './src/stories/Text.stories.tsx': require('../src/stories/Text.stories.tsx'),
+    "./src/stories/Switch.stories.tsx": require("../src/stories/Switch.stories.tsx"),
   }
-}
+};
 
-configure(getStories, module, false)
+configure(getStories, module, false);

example/ios/Podfile.lock

@@ -689,4 +689,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 41b345e700f785c9a103f926104c4c507c89b32e
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.12.1

example/src/App.tsx

@@ -5,6 +5,7 @@ import StorybookUIRoot from '../.ondevice/Storybook'
 const theme = extendTheme({
   colors: {
     cardPrimaryBackground: 'green',
+    primary: 'grey',
   },
   darkColors: {
     cardPrimaryBackground: 'gray',

example/src/stories/Switch.stories.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable react-native/no-inline-styles */
+import type {ComponentMeta, ComponentStory} from '@storybook/react'
+import React, {useState} from 'react'
+
+import {View} from 'react-native'
+import {Switch, useTheme} from 'rn-base-component'
+
+export default {
+  title: 'components/Switch',
+  component: Switch,
+} as ComponentMeta<typeof Switch>
+
+export const Basic: ComponentStory<typeof Switch> = rest => {
+  const [isActive, setIsActive] = useState(false)
+  const theme = useTheme()
+
+  const onValueChange = () => {
+    setIsActive(prev => !prev)
+  }
+
+  return (
+    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+      <Switch
+        {...rest}
+        variant="outside"
+        value={isActive}
+        onValueChange={onValueChange}
+        thumbColor="green"
+        trackColor={{active: theme.colors.blue, inActive: theme.colors.red}}
+      />
+    </View>
+  )
+}
+
+export const Inside: ComponentStory<typeof Switch> = rest => {
+  const [isActive, setIsActive] = useState(false)
+  const theme = useTheme()
+
+  const onValueChange = () => {
+    setIsActive(prev => !prev)
+  }
+
+  return (
+    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+      <Switch
+        {...rest}
+        variant="inside"
+        value={isActive}
+        onValueChange={onValueChange}
+        trackColor={{active: theme.colors.gray, inActive: theme.colors.red}}
+      />
+    </View>
+  )
+}

example/src/stories/Text.stories.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
 import type {ComponentMeta, ComponentStory} from '@storybook/react'
+import React from 'react'
 
-import {Text, TextBold, TextItalic} from 'rn-base-component'
 import {StyleSheet, View} from 'react-native'
+import {Text, TextBold, TextItalic} from 'rn-base-component'
 import {metrics} from '../../../src/helpers'
 
 export default {
-  title: 'Text',
+  title: 'components/Text',
   component: Text,
 } as ComponentMeta<typeof Text>
 

src/__tests__/switch.test.tsx

@@ -0,0 +1,127 @@
+import {fireEvent, render} from '@testing-library/react-native'
+import React from 'react'
+import {Switch} from '../components'
+
+describe('Switch', () => {
+  const value = true
+  const onValueChange = jest.fn()
+
+  it('renders without errors', () => {
+    const {getByTestId} = render(<Switch value={value} onValueChange={onValueChange} />)
+    const switchContainer = getByTestId('switch-container')
+
+    expect(switchContainer).toBeDefined()
+  })
+
+  it('calls onValueChange when pressed', () => {
+    const {getByTestId} = render(<Switch value={value} onValueChange={onValueChange} />)
+    const switchContainer = getByTestId('switch-container')
+
+    fireEvent.press(switchContainer)
+    expect(onValueChange).toHaveBeenCalled()
+  })
+
+  it('renders with the correct track color', () => {
+    const trackColor = 'red'
+    const {getByTestId} = render(
+      <Switch value={value} onValueChange={onValueChange} trackColor={trackColor} />,
+    )
+    const trackActive = getByTestId('track-active')
+    const trackInActive = getByTestId('track-in-active')
+
+    expect(trackActive.props.style.backgroundColor).toBe(trackColor)
+    expect(trackInActive.props.style.backgroundColor).toBe(trackColor)
+  })
+
+  it('renders with the correct object track color', () => {
+    const trackColor = {active: 'red', inActive: 'grey'}
+    const {getByTestId} = render(
+      <Switch value={value} onValueChange={onValueChange} trackColor={trackColor} />,
+    )
+    const trackActive = getByTestId('track-active')
+    const trackInActive = getByTestId('track-in-active')
+
+    expect(trackActive.props.style.backgroundColor).toBe(trackColor.active)
+    expect(trackInActive.props.style.backgroundColor).toBe(trackColor.inActive)
+  })
+
+  it('renders with the thembSize prop', () => {
+    const thumbSize = 20
+    const {getByTestId} = render(<Switch value={value} onValueChange={onValueChange} thumbSize={thumbSize} />)
+    const trackActive = getByTestId('track-active')
+    const trackInActive = getByTestId('track-in-active')
+    const thumb = getByTestId('thumb')
+
+    expect(trackActive.props.thumbSize).toBe(thumbSize)
+    expect(trackInActive.props.thumbSize).toBe(thumbSize)
+    expect(thumb.props.thumbSize).toBe(thumbSize)
+  })
+
+  it('renders with the thumbColor prop', () => {
+    const thumbColor = 'red'
+    const {getByTestId} = render(
+      <Switch value={value} onValueChange={onValueChange} thumbColor={thumbColor} />,
+    )
+    const thumb = getByTestId('thumb')
+
+    expect(thumb.props.thumbColor).toBe(thumbColor)
+  })
+
+  it('disables the component when disabled prop is true', () => {
+    const {getByTestId} = render(<Switch value={value} onValueChange={onValueChange} disabled />)
+    const switchContainer = getByTestId('switch-container')
+
+    fireEvent.press(switchContainer)
+    expect(onValueChange).toHaveBeenCalled()
+  })
+
+  it('renders with the correct text inside for active and inactive states', () => {
+    const textInside = {
+      active: 'Active',
+      inActive: 'Inactive',
+    }
+    const {getByText} = render(
+      <Switch value={value} onValueChange={onValueChange} textInside={textInside} variant="inside" />,
+    )
+    const labelActive = getByText(textInside.active)
+    const labelInActive = getByText(textInside.inActive)
+
+    expect(labelActive).toBeDefined()
+    expect(labelInActive).toBeDefined()
+  })
+
+  it('renders with custom text inside color', () => {
+    const textInsideColor = {
+      active: 'green',
+      inActive: 'red',
+    }
+    const {getByTestId} = render(
+      <Switch
+        value={value}
+        onValueChange={onValueChange}
+        textInsideColor={textInsideColor}
+        variant="inside"
+      />,
+    )
+    const labelActive = getByTestId('label-active')
+    const labelInActive = getByTestId('label-in-active')
+
+    expect(labelActive.props.color).toBe(textInsideColor.active)
+    expect(labelInActive.props.color).toBe(textInsideColor.inActive)
+  })
+
+  it('renders with the trackPaddingInside prop with variant inside', () => {
+    const trackPaddingInside = 4
+    const {getByTestId} = render(
+      <Switch
+        value={value}
+        onValueChange={onValueChange}
+        trackPaddingInside={trackPaddingInside}
+        variant="inside"
+      />,
+    )
+    const switchContainer = getByTestId('switch-container')
+
+    expect(switchContainer.props.trackMargin).toBe(trackPaddingInside)
+  })
+})