rn-vs-lb 1.0.3 → 1.0.5

package/.storybook/stories/Button/Button.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Button, { ButtonProps } from '../../../src/components/buttons/Button'; // Убедитесь, что путь правильный
+
+export default {
+  title: 'Buttons/Button',
+  component: Button,
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Text displayed on the button',
+    },
+    type: {
+      control: { type: 'radio' },
+      options: ['primary', 'gray'],
+      description: 'Type of button (primary or gray)',
+    },
+    onPress: { action: 'pressed' },
+  },
+} as Meta;
+
+const Template: Story<ButtonProps> = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  title: 'Update Profile',
+  type: 'primary',
+};
+
+export const Gray = Template.bind({});
+Gray.args = {
+  title: 'Cancel',
+  type: 'gray',
+};

package/.storybook/stories/Button/ButtonsGroup.stories.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { View, StyleSheet } from 'react-native';
+import Button from '../../../src/components/buttons/Button'; // Убедитесь, что путь правильный
+
+// Определение компонента ButtonGroup
+const ButtonGroup = () => {
+  const handleUpdateProfile = () => {
+    console.log('Update Profile Pressed');
+  };
+
+  const handleCancel = () => {
+    console.log('Cancel Pressed');
+  };
+
+  return (
+    <View style={styles.container}>
+      <Button
+        title="Update Profile"
+        onPress={handleUpdateProfile}
+        type="primary"
+        style={styles.button}
+      />
+      <Button
+        title="Cancel"
+        onPress={handleCancel}
+        type="gray"
+        style={styles.button}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  button: {
+    width: '48%',
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  primaryButton: {
+    backgroundColor: '#6f2da8',
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 25,
+  },
+  primaryButtonText: {
+    color: '#fff',
+  },
+  grayButton: {
+    backgroundColor: '#f5f5f5',
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 25,
+  },
+  grayButtonText: {
+    color: '#333',
+  },
+});
+
+export default {
+  title: 'Buttons/ButtonGroup',
+  component: ButtonGroup,
+} as Meta;
+
+const Template: Story = () => <ButtonGroup />;
+
+export const Default = Template.bind({});
+Default.args = {};

package/.storybook/stories/Form/AutoComplete.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { View } from 'react-native';
+import { useForm } from 'react-hook-form';
+import { AutoComplete, AutoCompleteProps } from '../../../src/components/form';
+
+export default {
+  title: 'Form/AutoComplete',
+  component: AutoComplete,
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label for the location field',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text for the location field',
+    },
+    required: {
+        control: 'boolean',
+    },
+  },
+} as Meta;
+
+const Template: Story<AutoCompleteProps> = (args) => {
+  const { control } = useForm();
+  return (
+    <View style={{ padding: 20 }}>
+      <AutoComplete {...args} control={control} />
+    </View>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  name: 'location',
+  label: 'City',
+  placeholder: 'Enter a city',
+  required: true,
+};

package/.storybook/stories/Form/DatePickerForm.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { View } from 'react-native';
+import { useForm } from 'react-hook-form';
+import { DatePicker, DatePickerProps } from '../../../src/components/form';
+
+export default {
+  title: 'Form/DatePicker',
+  component: DatePicker,
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label for the date picker',
+    },
+    style: {
+      control: 'object',
+      description: 'Custom style for the date picker button',
+    },
+    containerStyle: {
+      control: 'object',
+      description: 'Custom style for the container',
+    },
+    required: {
+        control: 'boolean',
+    },
+  },
+} as Meta;
+
+const Template: Story<DatePickerProps> = (args) => {
+  const { control } = useForm();
+
+  return (
+    <View style={{ padding: 20 }}>
+      <DatePicker {...args} control={control} />
+    </View>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  name: 'datetime',
+  label: 'Select Date and Time',
+  rules: { required: 'Date and Time are required!' },
+  defaultValue: new Date(),
+};
+
+export const WithCustomStyles = Template.bind({});
+WithCustomStyles.args = {
+  name: 'datetime',
+  label: 'Custom Date Picker',
+  containerStyle: { margin: 20, padding: 10, backgroundColor: '#f0f0f0' },
+  rules: { required: 'Please select a date and time!' },
+  defaultValue: new Date(),
+};

package/.storybook/stories/Form/ImageUploader.stories.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { View } from 'react-native';
+import { useForm } from 'react-hook-form';
+import { ImageUploader, ImageUploaderProps } from '../../../src/components/form';
+
+export default {
+  title: 'Form/ImageUploader',
+  component: ImageUploader,
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label for the image uploader',
+    },
+    style: {
+      control: 'object',
+      description: 'Custom style for the upload button',
+    },
+    containerStyle: {
+      control: 'object',
+      description: 'Custom style for the container',
+    },
+    required: {
+        control: 'boolean',
+    },
+  },
+} as Meta;
+
+const Template: Story<ImageUploaderProps> = (args) => {
+  const { control } = useForm();
+
+  return (
+    <View style={{ padding: 20 }}>
+      <ImageUploader {...args} control={control} />
+    </View>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  name: 'images',
+  label: 'Upload Images',
+  rules: { required: 'At least one image is required!' },
+  defaultValue: [],
+};

package/.storybook/stories/Form/MultiSelect.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { View } from 'react-native';
+import { useForm } from 'react-hook-form';
+import { MultiSelect, MultiSelectProps } from '../../../src/components/form';
+
+export default {
+  title: 'Form/MultiSelect',
+  component: MultiSelect,
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label for the multi-select',
+    },
+    options: {
+      control: 'object',
+      description: 'Options for the multi-select',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text for the multi-select',
+    },
+    required: {
+      control: 'boolean',
+    },
+  },
+} as Meta;
+
+const Template: Story<MultiSelectProps> = (args) => {
+  const { control } = useForm();
+  return (
+    <View style={{ padding: 20 }}>
+      <MultiSelect {...args} control={control} />
+    </View>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  name: 'categories',
+  label: 'Выберите категории',
+  options: [
+    { label: 'Выставки', value: 'Выставки' },
+    { label: 'С детьми', value: 'С детьми' },
+    { label: 'Активный отдых', value: 'Активный отдых' },
+    { label: 'Стендап', value: 'Стендап' },
+    { label: 'Образование', value: 'Образование' },
+    { label: 'Театры', value: 'Театры' },
+    { label: 'Игры', value: 'Игры' },
+    { label: 'Кино', value: 'Кино' },
+    { label: 'Концерты', value: 'Концерты' },
+  ],
+  placeholder: 'Выберите...',
+};

package/.storybook/stories/Form/Select.stories.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { View } from 'react-native';
+import { useForm } from 'react-hook-form';
+import { Select, SelectProps } from '../../../src/components/form';
+
+export default {
+  title: 'Form/Select',
+  component: Select,
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label for the select',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder option text',
+    },
+    options: {
+      control: 'object',
+      description: 'Options for the select',
+    },
+    style: {
+      control: 'object',
+      description: 'Custom style for the select',
+    },
+    containerStyle: {
+      control: 'object',
+      description: 'Custom style for the container',
+    },
+    required: {
+      control: 'boolean',
+    },
+  },
+} as Meta;
+
+const Template: Story<SelectProps> = (args) => {
+  const { control } = useForm();
+
+  return (
+    <View style={{ padding: 10 }}>
+      <Select {...args} control={control} />
+    </View>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  name: 'category',
+  label: 'Category',
+  placeholder: 'Select a category',
+  options: [
+    { label: 'Technology', value: 'tech' },
+    { label: 'Health', value: 'health' },
+    { label: 'Finance', value: 'finance' },
+  ],
+  containerStyle: { margin: 10 },
+  rules: { required: 'Category is required!' },
+  defaultValue: '',
+};
+
+export const WithCustomStyles = Template.bind({});
+WithCustomStyles.args = {
+  name: 'category',
+  label: 'Custom Select',
+  placeholder: 'Choose an option',
+  options: [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+    { label: 'Option 3', value: '3' },
+  ],
+  style: { borderColor: 'blue', borderWidth: 2 },
+  containerStyle: { margin: 20, padding: 10, backgroundColor: '#f0f0f0' },
+  rules: { required: 'Please select an option!' },
+  defaultValue: '1',
+};

package/.storybook/stories/Form/TextArea.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { View } from 'react-native';
+import { useForm } from 'react-hook-form';
+import { TextArea, TextAreaProps } from '../../../src/components/form';
+
+export default {
+  title: 'Form/TextArea',
+  component: TextArea,
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Label for the textarea',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text',
+    },
+    numberOfLines: {
+      control: 'number',
+      description: 'Number of lines for the textarea',
+    },
+    style: {
+      control: 'object',
+      description: 'Custom style for the textarea',
+    },
+    containerStyle: {
+      control: 'object',
+      description: 'Custom style for the container',
+    },
+    required: {
+      control: 'boolean',
+    },
+  },
+} as Meta;
+
+const Template: Story<TextAreaProps> = (args) => {
+  const { control } = useForm();
+
+  return (
+    <View style={{ padding: 20 }}>
+      <TextArea {...args} control={control} />
+    </View>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  name: 'description',
+  label: 'Description',
+  placeholder: 'Enter your description...',
+  numberOfLines: 4,
+  style: { height: 150, borderColor: 'gray' },
+  rules: { required: 'Description is required!' },
+  defaultValue: '',
+  required: true,
+};
+
+export const WithCustomStyles = Template.bind({});
+WithCustomStyles.args = {
+  name: 'description',
+  label: 'Custom TextArea',
+  placeholder: 'Enter custom text...',
+  numberOfLines: 6,
+  style: { height: 200, borderColor: 'blue', borderWidth: 2 },
+  containerStyle: { margin: 20, padding: 10, backgroundColor: '#f0f0f0' },
+  rules: { required: 'This field is required!' },
+  defaultValue: 'Default value here...',
+};

package/.storybook/stories/Form/TextInput.stories.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { View } from 'react-native';
+import InputWithValidation, { InputWithValidationProps } from '../../../src/components/form/TextInput';
+
+
+export default {
+    title: 'Form/InputWithValidation',
+    component: InputWithValidation,
+    parameters: {
+        controls: { expanded: true },
+    },
+    argTypes: {
+      required: {
+        control: 'boolean',
+      },
+    },
+  } as Meta;
+
+const Template: Story<InputWithValidationProps> = (args) => (
+    <View style={{ padding: 20 }}>
+        <InputWithValidation {...args} />
+    </View>
+);
+
+
+export const TextField = Template.bind({});
+TextField.args = {
+    name: 'Name',
+    label: 'Name',
+    placeholder: 'Enter your name',
+    keyboardType: 'default',
+    required: true,
+    rules: {
+        required: 'Name is required!',
+    },
+};
+
+export const EmailField = Template.bind({});
+EmailField.args = {
+    name: 'email',
+    label: 'Email',
+    placeholder: 'Enter your email',
+    keyboardType: 'email-address',
+    required: true,
+    rules: {
+        required: 'Email is required!',
+        pattern: {
+            value: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
+            message: 'Invalid email address!',
+        },
+    },
+    defaultValue: "example@example.com"
+};
+
+export const PhoneField = Template.bind({});
+PhoneField.args = {
+    name: 'phone',
+    label: 'Phone Number',
+    placeholder: 'Enter your phone number',
+    keyboardType: 'phone-pad',
+    rules: {
+        required: 'Phone number is required!',
+        pattern: {
+            value: /^[0-9]{10,15}$/,
+            message: 'Invalid phone number!',
+        },
+    },
+};
+
+export const PasswordField = Template.bind({});
+PasswordField.args = {
+  name: 'password',
+  label: 'Password',
+  placeholder: 'Enter your password',
+  secureTextEntry: true,
+  required: true,
+  rules: {
+    required: 'Password is required!',
+    minLength: {
+      value: 6,
+      message: 'Password must be at least 6 characters!',
+    },
+  },
+};

package/.storybook/stories/Forms/FormExample.stories copy.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { FormProvider, useForm } from 'react-hook-form';
+import { Meta, Story } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import Button from '../../../src/components/buttons/Button';
+import { AutoComplete, TextInput, DatePicker, TextArea, MultiSelect, Select } from '../../../src/components/form';
+
+// Основной компонент формы
+const FormExample = ({ onSubmitAction, onCancelAction }) => {
+  const methods = useForm();
+
+  const handleSubmit = methods.handleSubmit((data: any) => {
+    onSubmitAction(data); // Передаем данные формы в экшен Storybook при отправке
+  });
+
+  const handleCancel = () => {
+    const formData = methods.getValues(); // Получаем текущие данные формы
+    methods.reset(); // Сбрасываем форму до начальных значений
+    onCancelAction(formData); // Передаем данные формы в экшен Storybook при отмене
+  };
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <FormProvider {...methods}>
+        <Text style={styles.title}>Example Form</Text>
+        
+        <DatePicker
+          name="dob"
+          control={methods.control}
+          label="Date of Birth"
+          rules={{ required: 'Date of birth is required!' }}
+          required={true}
+        />
+
+        <View style={styles.buttonContainer}>
+          <Button
+            title="Submit"
+            onPress={handleSubmit}
+            type="primary"
+          />
+          <Button
+            title="Cancel"
+            onPress={handleCancel}
+            type="gray"
+          />
+        </View>
+      </FormProvider>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+    backgroundColor: '#fff',
+    flexGrow: 1,
+  },
+  title: {
+    fontSize: 24,
+    marginBottom: 20,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 20,
+  },
+});
+
+// Экспорт конфигурации для Storybook
+export default {
+  title: 'Forms/FormExample',
+  component: FormExample,
+  argTypes: {
+    onSubmitAction: { action: 'submit' }, // Экшен для кнопки Submit
+    onCancelAction: { action: 'cancel' }, // Экшен для кнопки Cancel
+  },
+} as Meta;
+
+const Template: Story = (args) => <FormExample {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  onSubmitAction: action('submit'), // Вызов экшена при отправке
+  onCancelAction: action('cancel'), // Вызов экшена при отмене
+};