afrikit-mobile 1.0.18 → 1.0.19

package/.storybook/index.ts

@@ -0,0 +1,11 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { view } from './storybook.requires';
+
+const StorybookUIRoot = view.getStorybookUI({
+  storage: {
+    getItem: AsyncStorage.getItem,
+    setItem: AsyncStorage.setItem,
+  },
+});
+
+export default StorybookUIRoot;

package/.storybook/main.ts

@@ -0,0 +1,11 @@
+import { StorybookConfig } from '@storybook/react-native';
+
+const main: StorybookConfig = {
+	stories: ['./stories/**/*.stories.?(ts|tsx|js|jsx)'],
+	addons: [
+		'@storybook/addon-ondevice-controls',
+		'@storybook/addon-ondevice-actions',
+	],
+};
+
+export default main;

package/.storybook/preview.tsx

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package/.storybook/stories/AppAvatar/AppAvatar.stories.tsx

@@ -0,0 +1,145 @@
+import { Meta, Story } from '@storybook/react'
+import React from 'react'
+import { View } from 'react-native'
+import AppAvatar from '../../../molecules/AppAvatar'
+import { AppAvatarProps } from '../../../molecules/AppAvatar/avatar'
+
+export default {
+  title: 'AppAvatar',
+  component: AppAvatar,
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, padding: 10 }}>
+        <Story />
+      </View>
+    ),
+  ],
+  argTypes: {
+    size: { control: 'select', options: [1, 2, 3, 4, 5, 6, 7, 8, 9] },
+    variant: { control: 'select', options: ['solid', 'soft'] },
+    color: {
+      control: 'select',
+      options: ['accent', 'neutral', 'success', 'error', 'warning', 'info'],
+    },
+    highContrast: { control: 'boolean' },
+    fallBack: { control: 'select', options: ['image', 'initials', 'icon'] },
+    initials: { control: 'text' },
+    imageUrl: { control: 'text' },
+    numberOfInitials: { control: 'select', options: [1, 2] },
+  },
+} as Meta
+
+const Template: Story<AppAvatarProps> = args => <AppAvatar {...args} />
+
+// Variants for different avatar scenarios
+
+export const Default = Template.bind({})
+Default.args = {
+  size: 4,
+  variant: 'solid',
+  color: 'neutral',
+  fallBack: 'initials',
+  initials: 'AB',
+  numberOfInitials: 1,
+}
+
+export const WithImage = Template.bind({})
+WithImage.args = {
+  size: 4,
+  variant: 'solid',
+  color: 'accent',
+  fallBack: 'image',
+  imageUrl: 'https://picsum.photos/seed/picsum/200/300',
+  numberOfInitials: 1,
+}
+
+export const WithIcon = Template.bind({})
+WithIcon.args = {
+  size: 4,
+  variant: 'solid',
+  color: 'success',
+  fallBack: 'icon',
+  numberOfInitials: 1,
+}
+
+export const HighContrast = Template.bind({})
+HighContrast.args = {
+  size: 4,
+  variant: 'solid',
+  color: 'neutral',
+  fallBack: 'initials',
+  initials: 'HK',
+  highContrast: true,
+  numberOfInitials: 1,
+}
+
+export const LargeAvatar = Template.bind({})
+LargeAvatar.args = {
+  size: 9,
+  variant: 'solid',
+  color: 'warning',
+  fallBack: 'initials',
+  initials: 'LG',
+  numberOfInitials: 1,
+}
+
+export const SoftVariant = Template.bind({})
+SoftVariant.args = {
+  size: 4,
+  variant: 'soft',
+  color: 'info',
+  fallBack: 'initials',
+  initials: 'SV',
+  numberOfInitials: 1,
+}
+
+export const AccentAvatar = Template.bind({})
+AccentAvatar.args = {
+  size: 4,
+  variant: 'solid',
+  color: 'accent',
+  fallBack: 'initials',
+  initials: 'Anita',
+  numberOfInitials: 1,
+}
+
+export const SuccessAvatar = Template.bind({})
+SuccessAvatar.args = {
+  size: 4,
+  variant: 'solid',
+  color: 'success',
+  fallBack: 'initials',
+  initials: 'SC',
+  numberOfInitials: 1,
+}
+
+export const ErrorAvatar = Template.bind({})
+ErrorAvatar.args = {
+  size: 4,
+  variant: 'solid',
+  color: 'error',
+  fallBack: 'initials',
+  initials: 'ER',
+  numberOfInitials: 1,
+}
+
+export const WarningAvatar = Template.bind({})
+WarningAvatar.args = {
+  size: 4,
+  variant: 'solid',
+  color: 'warning',
+  fallBack: 'initials',
+  initials: 'WR',
+  numberOfInitials: 1,
+}
+
+export const InfoAvatar = Template.bind({})
+InfoAvatar.args = {
+  size: 4,
+  variant: 'solid',
+  color: 'info',
+  fallBack: 'initials',
+  initials: 'IN',
+  numberOfInitials: 1,
+}

package/.storybook/stories/AppBottomSheet/AppBottomSheet.stories.tsx

@@ -0,0 +1,165 @@
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'
+import type { Meta, StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+import { Text, View } from 'react-native'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import Icon from 'react-native-remix-icon'
+import AppBottomSheet from '../../../molecules/AppBottomSheet'
+import AppButton from '../../../molecules/AppButton'
+import { AppBottomSheetProps } from '../../../types/molecules'
+
+const meta: Meta<typeof AppBottomSheet> = {
+  title: 'AppBottomSheet',
+  component: AppBottomSheet,
+  argTypes: {
+    isDetached: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    showModal: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    backdropClose: {
+      control: 'boolean',
+      defaultValue: true,
+    },
+    index: {
+      control: 'select',
+      options: [0, 1, 2, 3, 4, 5],
+      if: { arg: 'isDetached', truthy: false },
+    },
+    height: {
+      control: 'number',
+      if: { arg: 'index', exists: false },
+    },
+    title: {
+      control: 'object',
+    },
+    isSwipeable: {
+      control: 'boolean',
+      if: { arg: 'isDetached', truthy: false },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof AppBottomSheet>
+
+const BottomSheetWrapper = (props: AppBottomSheetProps<boolean>) => {
+  const [showModal, setShowModal] = useState(false)
+  return (
+    <GestureHandlerRootView className={'flex-1'}>
+      <BottomSheetModalProvider>
+        <View className={'flex-1 items-center justify-center'}>
+          <AppButton
+            size={4}
+            text={'Open Bottom Sheet'}
+            color={'neutral'}
+            variant={'solid'}
+            highContrast
+            onPress={() => setShowModal(true)}
+          />
+          <AppBottomSheet {...props} showModal={showModal} setShowModal={setShowModal} />
+        </View>
+      </BottomSheetModalProvider>
+    </GestureHandlerRootView>
+  )
+}
+
+export const Default: Story = {
+  render: args => <BottomSheetWrapper {...args} />,
+  args: {
+    isDetached: false,
+    backdropClose: true,
+    index: 2,
+    title: { text: 'Default Bottom Sheet', align: 'center' },
+    isSwipeable: true,
+    children: (
+      <Text className={'text-light-type-gray-muted dark:text-dark-type-gray-muted'}>
+        This is the content of the bottom sheet.
+      </Text>
+    ),
+    actionButton: {
+      text: 'Close',
+      action: () => {},
+    },
+  },
+}
+
+export const DetachedSheet: Story = {
+  render: args => <BottomSheetWrapper {...args} />,
+  args: {
+    isDetached: true,
+    backdropClose: true,
+    height: 300,
+    title: 'Detached Bottom Sheet',
+    content: 'This is a detached bottom sheet with fixed content.',
+    icon: <Icon name={'search-line'} size="76" color="#000" />,
+    actionButton: {
+      text: 'Confirm',
+      action: () => {},
+    },
+    secondaryActionButton: {
+      text: 'Cancel',
+      action: () => {},
+    },
+  },
+}
+
+export const CustomHeightSheet: Story = {
+  render: args => <BottomSheetWrapper {...args} />,
+  args: {
+    isDetached: false,
+    backdropClose: true,
+    height: 400,
+    title: { text: 'Custom Height Sheet', align: 'left' },
+    isSwipeable: true,
+    children: (
+      <Text className={'text-light-type-accent dark:text-dark-type-accent-bold'}>
+        This bottom sheet has a custom height of 400.
+      </Text>
+    ),
+  },
+}
+
+export const NonSwipeableSheet: Story = {
+  render: args => <BottomSheetWrapper {...args} />,
+  args: {
+    isDetached: false,
+    backdropClose: false,
+    index: 3,
+    title: { text: 'Non-Swipeable Sheet', align: 'center' },
+    isSwipeable: false,
+    children: (
+      <Text className={'text-light-type-accent dark:text-dark-type-accent-bold'}>
+        This bottom sheet cannot be swiped.
+      </Text>
+    ),
+    actionButton: {
+      text: 'Close',
+      action: () => {},
+    },
+  },
+}
+
+export const SheetWithSubtitle: Story = {
+  render: args => <BottomSheetWrapper {...args} />,
+  args: {
+    isDetached: false,
+    backdropClose: true,
+    index: 1,
+    title: {
+      text: 'Sheet with Subtitle',
+      align: 'left',
+      subtitle: 'This is a subtitle for the bottom sheet',
+    },
+    isSwipeable: true,
+    children: (
+      <Text className={'text-light-type-accent dark:text-dark-type-accent-bold'}>
+        Content with a title and subtitle.
+      </Text>
+    ),
+  },
+}

package/.storybook/stories/AppButton/AppButton.stories.tsx

@@ -0,0 +1,242 @@
+import { Meta, Story } from '@storybook/react'
+import React from 'react'
+import { View } from 'react-native'
+import AppButton, { AppButtonProps } from '../../../molecules/AppButton'
+
+export default {
+  title: 'AppButton',
+  component: AppButton,
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
+        <Story />
+      </View>
+    ),
+  ],
+  argTypes: {
+    size: { control: 'select', options: [1, 2, 3, 4] },
+    variant: { control: 'select', options: ['solid', 'soft', 'surface', 'outline', 'ghost'] },
+    color: { control: 'select', options: ['accent', 'neutral', 'error'] },
+    state: { control: 'select', options: ['default', 'active', 'disabled'] },
+    highContrast: { control: 'boolean' },
+    iconStart: { control: 'boolean' },
+    iconEnd: { control: 'boolean' },
+    text: { control: 'text' },
+    accessibilityLabel: { control: 'text' },
+    accessibilityHint: { control: 'text' },
+  },
+} as Meta
+
+const Template: Story<AppButtonProps> = args => <AppButton {...args} />
+
+// Accent Variants
+export const AccentSolidVariant = Template.bind({})
+AccentSolidVariant.args = {
+  size: 4,
+  variant: 'solid',
+  color: 'accent',
+  highContrast: false,
+  state: 'default',
+  text: 'Accent Solid Button',
+  accessibilityLabel: 'Accent Solid Button',
+  accessibilityHint: 'Press to select the accent solid button',
+}
+
+export const AccentSoftVariant = Template.bind({})
+AccentSoftVariant.args = {
+  size: 4,
+  variant: 'soft',
+  color: 'accent',
+  highContrast: false,
+  state: 'default',
+  text: 'Accent Soft Button',
+  accessibilityLabel: 'Accent Soft Button',
+  accessibilityHint: 'Press to select the accent soft button',
+}
+
+export const AccentSurfaceVariant = Template.bind({})
+AccentSurfaceVariant.args = {
+  size: 4,
+  variant: 'surface',
+  color: 'accent',
+  highContrast: false,
+  state: 'default',
+  text: 'Accent Surface Button',
+  accessibilityLabel: 'Accent Surface Button',
+  accessibilityHint: 'Press to select the accent surface button',
+}
+
+export const AccentOutlineVariant = Template.bind({})
+AccentOutlineVariant.args = {
+  size: 4,
+  variant: 'outline',
+  color: 'accent',
+  highContrast: false,
+  state: 'default',
+  text: 'Accent Outline Button',
+  accessibilityLabel: 'Accent Outline Button',
+  accessibilityHint: 'Press to select the accent outline button',
+}
+
+export const AccentGhostVariant = Template.bind({})
+AccentGhostVariant.args = {
+  size: 4,
+  variant: 'ghost',
+  color: 'accent',
+  highContrast: false,
+  state: 'default',
+  text: 'Accent Ghost Button',
+  accessibilityLabel: 'Accent Ghost Button',
+  accessibilityHint: 'Press to select the accent ghost button',
+}
+
+// Neutral Variants
+export const NeutralSolidVariant = Template.bind({})
+NeutralSolidVariant.args = {
+  size: 4,
+  variant: 'solid',
+  color: 'neutral',
+  highContrast: false,
+  state: 'default',
+  text: 'Neutral Solid Button',
+  accessibilityLabel: 'Neutral Solid Button',
+  accessibilityHint: 'Press to select the neutral solid button',
+}
+
+export const NeutralSoftVariant = Template.bind({})
+NeutralSoftVariant.args = {
+  size: 4,
+  variant: 'soft',
+  color: 'neutral',
+  highContrast: false,
+  state: 'default',
+  text: 'Neutral Soft Button',
+  accessibilityLabel: 'Neutral Soft Button',
+  accessibilityHint: 'Press to select the neutral soft button',
+}
+
+export const NeutralSurfaceVariant = Template.bind({})
+NeutralSurfaceVariant.args = {
+  size: 4,
+  variant: 'surface',
+  color: 'neutral',
+  highContrast: false,
+  state: 'default',
+  text: 'Neutral Surface Button',
+  accessibilityLabel: 'Neutral Surface Button',
+  accessibilityHint: 'Press to select the neutral surface button',
+}
+
+export const NeutralOutlineVariant = Template.bind({})
+NeutralOutlineVariant.args = {
+  size: 4,
+  variant: 'outline',
+  color: 'neutral',
+  highContrast: false,
+  state: 'default',
+  text: 'Neutral Outline Button',
+  accessibilityLabel: 'Neutral Outline Button',
+  accessibilityHint: 'Press to select the neutral outline button',
+}
+
+export const NeutralGhostVariant = Template.bind({})
+NeutralGhostVariant.args = {
+  size: 4,
+  variant: 'ghost',
+  color: 'neutral',
+  highContrast: false,
+  state: 'default',
+  text: 'Neutral Ghost Button',
+  accessibilityLabel: 'Neutral Ghost Button',
+  accessibilityHint: 'Press to select the neutral ghost button',
+}
+
+// Error Variants
+export const ErrorSolidVariant = Template.bind({})
+ErrorSolidVariant.args = {
+  size: 4,
+  variant: 'solid',
+  color: 'error',
+  highContrast: false,
+  state: 'default',
+  text: 'Error Solid Button',
+  accessibilityLabel: 'Error Solid Button',
+  accessibilityHint: 'Press to select the error solid button',
+}
+
+export const ErrorSoftVariant = Template.bind({})
+ErrorSoftVariant.args = {
+  size: 4,
+  variant: 'soft',
+  color: 'error',
+  highContrast: false,
+  state: 'default',
+  text: 'Error Soft Button',
+  accessibilityLabel: 'Error Soft Button',
+  accessibilityHint: 'Press to select the error soft button',
+}
+
+export const ErrorSurfaceVariant = Template.bind({})
+ErrorSurfaceVariant.args = {
+  size: 4,
+  variant: 'surface',
+  color: 'error',
+  highContrast: false,
+  state: 'default',
+  text: 'Error Surface Button',
+  accessibilityLabel: 'Error Surface Button',
+  accessibilityHint: 'Press to select the error surface button',
+}
+
+export const ErrorOutlineVariant = Template.bind({})
+ErrorOutlineVariant.args = {
+  size: 4,
+  variant: 'outline',
+  color: 'error',
+  highContrast: false,
+  state: 'default',
+  text: 'Error Outline Button',
+  accessibilityLabel: 'Error Outline Button',
+  accessibilityHint: 'Press to select the error outline button',
+}
+
+export const ErrorGhostVariant = Template.bind({})
+ErrorGhostVariant.args = {
+  size: 4,
+  variant: 'ghost',
+  color: 'error',
+  highContrast: false,
+  state: 'default',
+  text: 'Error Ghost Button',
+  accessibilityLabel: 'Error Ghost Button',
+  accessibilityHint: 'Press to select the error ghost button',
+}
+
+// Button with icons stories to be added after remix icon configurations
+
+// export const WithIconStart = Template.bind({});
+// WithIconStart.args = {
+//   size: 2,
+//   variant: 'solid',
+//   color: 'accent',
+//   highContrast: false,
+//   state: 'default',
+//   iconStart: true,
+//   text: 'Button with Icon Start',
+//   accessibilityLabel: 'Button with Icon Start',
+//   accessibilityHint: 'Press to select the button with icon start',
+// };
+
+// export const WithIconEnd = Template.bind({});
+// WithIconEnd.args = {
+//   size: 2,
+//   variant: 'solid',
+//   color: 'accent',
+//   highContrast: false,
+//   state: 'default',
+//   iconEnd: true,
+//   text: 'Button with Icon End',
+//   accessibilityLabel: 'Button with Icon End',
+//   accessibilityHint: 'Press to select the button with icon end',
+// };

package/.storybook/stories/AppDateInput/AppDateInput.stories.tsx

@@ -0,0 +1,94 @@
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'
+import { Meta, Story } from '@storybook/react'
+import React from 'react'
+import { View } from 'react-native'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+import AppDateInput, { AppDateInputProps } from '../../../molecules/AppDateInput'
+
+export default {
+  title: 'AppDateInput',
+  component: AppDateInput,
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <GestureHandlerRootView>
+        <BottomSheetModalProvider>
+          <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1, width: '100%' }}>
+            <View style={{ width: '80%' }}>
+              <Story />
+            </View>
+          </View>
+        </BottomSheetModalProvider>
+      </GestureHandlerRootView>
+    ),
+  ],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label for the date input component',
+      defaultValue: 'Select a date',
+    },
+    state: {
+      control: 'select',
+      options: ['default', 'disabled'],
+      description: 'State of the date input component',
+      defaultValue: 'default',
+    },
+    hasError: {
+      control: 'boolean',
+      description: 'Display error state',
+      defaultValue: false,
+    },
+    errorText: {
+      control: 'text',
+      description: 'Error message text',
+      defaultValue: 'This is an error message',
+    },
+    hintText: {
+      control: 'text',
+      description: 'Hint text for the input component',
+      defaultValue: 'Select your date of birth',
+    },
+    onDateChange: {
+      action: 'dateChanged',
+      description: 'Callback function when the date is changed',
+    },
+  },
+} as Meta
+
+const Template: Story<AppDateInputProps> = args => <AppDateInput {...args} />
+
+// Default story
+export const Default = Template.bind({})
+Default.args = {
+  label: 'Select a date',
+  state: 'default',
+  hasError: false,
+  hintText: 'Select your date of birth',
+}
+
+// Hint Text story
+export const WithHintText = Template.bind({})
+WithHintText.args = {
+  label: 'Select a date',
+  state: 'default',
+  hintText: 'Info hint text',
+}
+
+// Disabled state story
+export const Disabled = Template.bind({})
+Disabled.args = {
+  label: 'Select a date',
+  state: 'disabled',
+  hasError: false,
+  hintText: 'This input is disabled',
+}
+
+// Error state story
+export const WithError = Template.bind({})
+WithError.args = {
+  label: 'Select a date',
+  state: 'default',
+  hasError: true,
+  errorText: 'Invalid date selected',
+}