@holper/react-native-holper-storybook 0.7.0 → 0.7.1

package/eslint.config.mjs

@@ -1,205 +0,0 @@
-import { default as eslintJs } from '@eslint/js';
-import importPlugin from 'eslint-plugin-import';
-import perfectionistPlugin from 'eslint-plugin-perfectionist';
-import reactPlugin from 'eslint-plugin-react';
-import reactHooksPlugin from 'eslint-plugin-react-hooks';
-import unusedImportsPlugin from 'eslint-plugin-unused-imports';
-import globals from 'globals';
-import eslintTs from 'typescript-eslint';
-import { defineConfig, globalIgnores } from 'eslint/config';
-
-/**
- * @rules common
- * from 'react', 'eslint-plugin-react-hooks'...
- */
-const commonRules = () => ({
-  ...reactHooksPlugin.configs.recommended.rules,
-  'arrow-body-style': [2, 'as-needed', { requireReturnForObjectLiteral: false }],
-  'class-methods-use-this': 0,
-  'consistent-return': 2,
-  'default-case-last': 2,
-  'default-case': [2, { commentPattern: '^no default$' }],
-  'func-names': 1,
-  'jsx-a11y/anchor-is-valid': 0,
-  'jsx-a11y/control-has-associated-label': 0,
-  'lines-around-directive': [2, { before: 'always', after: 'always' }],
-  'no-alert': 0,
-  'no-bitwise': 2,
-  'no-console': 0,
-  'no-constant-condition': 1,
-  'no-param-reassign': 0,
-  'no-promise-executor-return': 0,
-  'no-restricted-exports': 0,
-  'no-restricted-syntax': ['error', 'WithStatement'],
-  'no-underscore-dangle': 0,
-  'no-unused-vars': 0,
-  'no-useless-rename': 1,
-  'object-shorthand': 1,
-  'prefer-destructuring': [1, { object: true, array: false }],
-
-  camelcase: 0,
-  // react
-  'react/display-name': 0,
-  'react/function-component-definition': 0,
-  'react/jsx-boolean-value': 2,
-  'react/jsx-curly-brace-presence': [2, { props: 'never', children: 'never' }],
-  'react/jsx-key': 0,
-  'react/jsx-no-duplicate-props': [1, { ignoreCase: false }],
-  'react/jsx-no-useless-fragment': [1, { allowExpressions: true }],
-  'react/jsx-props-no-spreading': 0,
-  'react/no-array-index-key': 0,
-  'react/no-children-prop': 0,
-  'react/no-unstable-nested-components': [1, { allowAsProps: true }],
-  'react/prop-types': 0,
-  'react/react-in-jsx-scope': 0,
-  'react/require-default-props': 0,
-  'react/self-closing-comp': 2,
-  // typescript
-  '@typescript-eslint/await-thenable': 0,
-  '@typescript-eslint/consistent-type-imports': 1,
-  '@typescript-eslint/naming-convention': 0,
-  '@typescript-eslint/no-empty-object-type': 0,
-  '@typescript-eslint/no-explicit-any': 0,
-  '@typescript-eslint/no-floating-promises': 0,
-  '@typescript-eslint/no-require-imports': 0,
-  '@typescript-eslint/no-shadow': 2,
-  '@typescript-eslint/no-unused-vars': [1, { args: 'none' }],
-  '@typescript-eslint/no-use-before-define': 0,
-  '@typescript-eslint/no-duplicate-enum-values': 0,
-});
-
-/**
- * @rules import
- * from 'eslint-plugin-import'.
- */
-const importRules = () => ({
-  ...importPlugin.configs.recommended.rules,
-  'import/named': 0,
-  'import/export': 0,
-  'import/default': 0,
-  'import/namespace': 0,
-  'import/no-named-as-default': 0,
-  'import/newline-after-import': 2,
-  'import/no-named-as-default-member': 0,
-  'import/prefer-default-export': 0,
-  'import/no-cycle': [
-    0, // disabled if slow
-    { maxDepth: '∞', ignoreExternal: false, allowUnsafeDynamicCyclicDependency: false },
-  ],
-});
-
-/**
- * @rules unused imports
- * from 'eslint-plugin-unused-imports'.
- */
-const unusedImportsRules = () => ({
-  'unused-imports/no-unused-imports': 0,
-  'unused-imports/no-unused-vars': [
-    0,
-    { vars: 'all', varsIgnorePattern: '^_', args: 'after-used', argsIgnorePattern: '^_' },
-  ],
-});
-
-/**
- * @rules sort or imports/exports
- * from 'eslint-plugin-perfectionist'.
- */
-const sortImportsRules = () => {
-  return {
-    'perfectionist/sort-named-imports': [1, { order: 'asc' }],
-    'perfectionist/sort-named-exports': [1, { order: 'asc' }],
-    'perfectionist/sort-exports': [
-      1,
-      {
-        order: 'asc',
-
-        groupKind: 'values-first',
-      },
-    ],
-    'perfectionist/sort-imports': [
-      2,
-      {
-        order: 'asc',
-        ignoreCase: true,
-        environment: 'node',
-        maxLineLength: undefined,
-        newlinesBetween: 'always',
-        groups: [
-          'style',
-          'side-effect',
-          'type',
-          ['builtin', 'external'],
-          'internal',
-          ['parent', 'sibling', 'index'],
-          ['parent-type', 'sibling-type', 'index-type'],
-          'object',
-          'unknown',
-        ],
-      },
-    ],
-  };
-};
-
-/**
- * Custom ESLint configuration.
- */
-export const customConfig = {
-  plugins: {
-    'react-hooks': reactHooksPlugin,
-    'unused-imports': unusedImportsPlugin,
-    perfectionist: perfectionistPlugin,
-    import: importPlugin,
-  },
-  settings: {
-    // https://www.npmjs.com/package/eslint-import-resolver-typescript
-    ...importPlugin.configs.typescript.settings,
-    'import/resolver': {
-      typescript: { project: './tsconfig.json', alwaysTryTypes: true },
-      ...importPlugin.configs.typescript.settings['import/resolver'],
-    },
-    react: {
-      version: 'detect',
-    },
-  },
-  rules: { ...commonRules(), ...importRules(), ...unusedImportsRules(), ...sortImportsRules() },
-};
-
-// ----------------------------------------------------------------------
-
-const eslintIgnore = globalIgnores([
-  '.expo/',
-  '.storybook/',
-  '.yarn/',
-  '**/*.d.ts',
-  '**/node_modules',
-  'dist/',
-  'eslint.config.mjs',
-  'prettier.config.mjs',
-]);
-
-export default defineConfig([
-  { files: ['**/*.{ts,tsx}'] },
-  eslintIgnore,
-  {
-    languageOptions: {
-      globals: { ...globals.browser, ...globals.node },
-      parserOptions: {
-        ecmaFeatures: { jsx: true },
-        project: './tsconfig.json',
-        warnOnUnsupportedTypeScriptVersion: true,
-      },
-    },
-    settings: {
-      'import/resolver': {
-        node: {
-          extensions: ['.js', '.jsx', '.ts', '.tsx'],
-        },
-      },
-    },
-  },
-  eslintJs.configs.recommended,
-  ...eslintTs.configs.recommended,
-  reactPlugin.configs.flat.recommended,
-  customConfig,
-  { files: ['*.tsx'], rules: { '@typescript-eslint/no-floating-promises': 0 } },
-]);

package/hooks/index.ts

@@ -1,2 +0,0 @@
-export { default as useDebounce } from './useDebounce';
-export { default as useLoadFonts } from './useLoadFonts';

package/hooks/useDebounce.tsx

@@ -1,24 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-const useDebounce = (callback: () => void, delay: number | undefined) => {
-  const latestCallback = useRef<() => void>(null);
-  const latestTimeout = useRef<ReturnType<typeof setTimeout>>(null);
-
-  useEffect(() => {
-    latestCallback.current = callback;
-  }, [callback]);
-
-  return () => {
-    if (latestTimeout.current) {
-      clearTimeout(latestTimeout.current);
-    }
-
-    latestTimeout.current = setTimeout(() => {
-      if (latestCallback.current) {
-        latestCallback.current();
-      }
-    }, delay);
-  };
-};
-
-export default useDebounce;

package/hooks/useLoadFonts.tsx

@@ -1,13 +0,0 @@
-import { useFonts } from 'expo-font';
-
-const useLoadFonts = () => {
-  const [loaded, error] = useFonts({
-    poppins_bold: require('../assets/fonts/Poppins-Bold.ttf'),
-    poppins_regular: require('../assets/fonts/Poppins-Regular.ttf'),
-    poppins_semiBold: require('../assets/fonts/Poppins-SemiBold.ttf'),
-  });
-
-  return { error, loaded };
-};
-
-export default useLoadFonts;

package/metro.config.js

@@ -1,11 +0,0 @@
-const withStorybook = require('@storybook/react-native/metro/withStorybook');
-const { getDefaultConfig } = require('expo/metro-config');
-const path = require('path');
-
-const defaultConfig = getDefaultConfig(__dirname);
-
-module.exports = withStorybook(defaultConfig, {
-  configPath: path.resolve(__dirname, './.storybook'),
-  enabled: true,
-  useJs: true,
-});

package/prettier.config.mjs

@@ -1,23 +0,0 @@
-/**
- * @type {import('prettier').Config}
- * Need to restart IDE after changes.
- * Open command palette and run (Ctrl + Shift + P) and execute the command > Reload Window.
- */
-const config = {
-  semi: true,
-  tabWidth: 2,
-  endOfLine: 'lf',
-  printWidth: 120,
-  singleQuote: true,
-  trailingComma: 'es5',
-  overrides: [
-    {
-      files: '*.json',
-      options: {
-        tabWidth: 2,
-      },
-    },
-  ],
-};
-
-export default config;

package/stories/Button.stories.tsx

@@ -1,181 +0,0 @@
-import { Ionicons } from '@expo/vector-icons';
-
-import { Button, Text } from '../components';
-import { Colors } from '../configs/constants';
-import { ScrollView } from '../utilities';
-
-export default {
-  title: 'Button',
-  component: Button,
-  decorators: [
-    (Story: any) => (
-      <ScrollView>
-        <Story />
-      </ScrollView>
-    ),
-  ],
-};
-
-export const Variants = {
-  render: () => (
-    <>
-      <Button variant="primary">
-        <Text color="white">Primary Button</Text>
-      </Button>
-      <Button variant="secondary">
-        <Text>Secondary Button</Text>
-      </Button>
-      <Button variant="dim">
-        <Text>Button Dim</Text>
-      </Button>
-      <Button variant="light">
-        <Text>Button Light</Text>
-      </Button>
-      <Button variant="brightblue">
-        <Text>Button Bright</Text>
-      </Button>
-      <Button variant="lightgreen">
-        <Text>Button Light Green</Text>
-      </Button>
-      <Button variant="electricblue">
-        <Text>Button Electric Blue</Text>
-      </Button>
-      <Button variant="brightviolet">
-        <Text>Button Bright Violet</Text>
-      </Button>
-      <Button variant="darkyellow">
-        <Text>Button Dark Yellow</Text>
-      </Button>
-      <Button variant="inverted">
-        <Text color="white">Button Inverted</Text>
-      </Button>
-      <Button variant="error">
-        <Text color="white">Button Error</Text>
-      </Button>
-    </>
-  ),
-};
-
-export const Size = {
-  render: () => (
-    <>
-      <Button size="fit">
-        <Text color="white">Fit</Text>
-      </Button>
-      <Button>
-        <Text color="white">Medium</Text>
-      </Button>
-      <Button size="small">
-        <Text color="white">Small</Text>
-      </Button>
-      <Button size="tiny">
-        <Text color="white">Tiny</Text>
-      </Button>
-      <Button size="icon">
-        <Ionicons name="navigate-outline" size={24} color={Colors.white} />
-      </Button>
-    </>
-  ),
-};
-
-export const Bordered = {
-  render: () => (
-    <>
-      <Button bordered>
-        <Text>Button Primary Bordered</Text>
-      </Button>
-      <Button bordered variant="secondary">
-        <Text>Button Secondary Bordered</Text>
-      </Button>
-      <Button bordered variant="dim">
-        <Text>Button Dim Bordered</Text>
-      </Button>
-      <Button bordered variant="light">
-        <Text>Button Light</Text>
-      </Button>
-      <Button bordered variant="inverted">
-        <Text>Button Inverted Bordered</Text>
-      </Button>
-      <Button bordered variant="error">
-        <Text>Button Error Bordered</Text>
-      </Button>
-    </>
-  ),
-};
-
-export const Disabled = {
-  render: () => (
-    <>
-      <Button disabled>
-        <Text color="white">Button Primary Disabled</Text>
-      </Button>
-      <Button disabled variant="secondary">
-        <Text>Button Secondary Disabled</Text>
-      </Button>
-      <Button disabled variant="dim">
-        <Text>Button Dim Disabled</Text>
-      </Button>
-      <Button disabled variant="inverted">
-        <Text color="white">Button Inverted Disabled</Text>
-      </Button>
-      <Button disabled variant="error">
-        <Text color="white">Button Error Disabled</Text>
-      </Button>
-    </>
-  ),
-};
-
-export const NoShadow = {
-  render: () => (
-    <>
-      <Button disabled>
-        <Text color="white">Button Primary Disabled</Text>
-      </Button>
-      <Button disabled variant="secondary">
-        <Text>Button Secondary Disabled</Text>
-      </Button>
-      <Button disabled variant="dim">
-        <Text>Button Dim Disabled</Text>
-      </Button>
-      <Button disabled variant="inverted">
-        <Text color="white">Button Inverted Disabled</Text>
-      </Button>
-      <Button disabled variant="error">
-        <Text color="white">Button Error Disabled</Text>
-      </Button>
-    </>
-  ),
-};
-
-export const Loading = {
-  render: () => (
-    <>
-      <Button isLoading>
-        <Text color="white">Button Primary</Text>
-      </Button>
-      <Button variant="secondary" isLoading>
-        <Text>Button Secondary</Text>
-      </Button>
-      <Button variant="dim" isLoading>
-        <Text>Button Dim</Text>
-      </Button>
-      <Button variant="light" isLoading>
-        <Text>Button Light</Text>
-      </Button>
-      <Button variant="inverted" isLoading>
-        <Text color="white">Button Inverted</Text>
-      </Button>
-      <Button variant="error" isLoading>
-        <Text color="white">Button Error</Text>
-      </Button>
-    </>
-  ),
-};
-
-export const WithDebounce = {
-  render: () => (
-    <Button debounceDelay={2000}>
-      <Text color="white">Button Primary</Text>
-    </Button>
-  ),
-};

package/stories/Card.stories.tsx

@@ -1,22 +0,0 @@
-import { Card, Text } from '../components';
-
-export default {
-  title: 'Card',
-  component: Card,
-};
-
-export const Default = {
-  render: () => (
-    <Card>
-      <Text>The card with some text as content</Text>
-    </Card>
-  ),
-};
-
-export const AsButton = {
-  render: () => (
-    <Card isButton>
-      <Text>The card as text with some text as content</Text>
-    </Card>
-  ),
-};

package/stories/Colors.stories.tsx

@@ -1,57 +0,0 @@
-import { View } from 'react-native';
-
-import { Text } from '../components';
-import { Colors } from '../configs/constants';
-import { lightOrDark, ScrollView } from '../utilities';
-
-const colorList: { key: string; value: string }[] = [];
-for (const [key, value] of Object.entries(Colors)) {
-  colorList.push({ key, value });
-}
-
-export default {
-  title: 'Colors',
-  decorators: [
-    (Story: any) => (
-      <ScrollView
-        contentContainerStyle={{
-          flexDirection: 'row',
-          flexWrap: 'wrap',
-          justifyContent: 'center',
-        }}
-      >
-        <Story />
-      </ScrollView>
-    ),
-  ],
-};
-
-export const Default = {
-  render: () => (
-    <>
-      {colorList.map((color, index) => (
-        <View key={index} style={{ flexDirection: 'column', margin: 5 }}>
-          <View
-            style={{
-              height: 90,
-              width: 90,
-              backgroundColor: color.value,
-            }}
-          >
-            {color.key === 'transparent' ? (
-              <Text color="dark" size="small">
-                {color.key}:{'\n'}
-                {color.value}
-              </Text>
-            ) : (
-              <Text color={lightOrDark(color.value) === 'light' ? 'dark' : 'white'} size="small">
-                {color.key}:{'\n'}
-                {color.value}
-              </Text>
-            )}
-          </View>
-        </View>
-      ))}
-    </>
-  ),
-};

package/stories/ConfirmationModal.stories.tsx

@@ -1,142 +0,0 @@
-import { useState } from 'react';
-
-import { Button, ConfirmationModal, Text } from '../components';
-
-export default {
-  title: 'Confirmation Modal',
-  component: ConfirmationModal,
-};
-
-const DefaultComponent = () => {
-  const [showDefault, setShowDefault] = useState<boolean>(false);
-  const [showAlert, setShowAlert] = useState<boolean>(false);
-
-  return (
-    <>
-      <Button onPress={() => setShowDefault(true)}>
-        <Text color="white">Default modal</Text>
-      </Button>
-      <Button variant="inverted" onPress={() => setShowAlert(true)}>
-        <Text color="white">Alert modal</Text>
-      </Button>
-
-      <ConfirmationModal
-        visible={showDefault}
-        title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-        confirmText="Accept"
-        cancelText="Cancel"
-        onConfirm={() => setShowDefault(false)}
-        onCancel={() => setShowDefault(false)}
-      >
-        <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in urna vel velit faucibus commodo.
-          Quisque eget arcu ut metus consectetur cursus eget eu magna. Pellentesque habitant morbi tristique senectus et
-          netus et malesuada fames ac turpis egestas. Integer tristique dui posuere turpis ultrices aliquet. Nulla
-          facilisi. Nulla molestie nisl et purus facilisis tempor.
-        </Text>
-      </ConfirmationModal>
-
-      <ConfirmationModal
-        visible={showAlert}
-        title="Lorem ipsum dolor sit amet"
-        confirmText="Accept"
-        onConfirm={() => setShowAlert(false)}
-        alertMode
-      >
-        <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in urna vel velit faucibus commodo.
-          Quisque eget arcu ut metus consectetur cursus eget eu magna. Pellentesque habitant morbi tristique senectus et
-          netus et malesuada fames ac turpis egestas. Integer tristique dui posuere turpis ultrices aliquet. Nulla
-          facilisi. Nulla molestie nisl et purus facilisis tempor.
-        </Text>
-      </ConfirmationModal>
-    </>
-  );
-};
-
-const InvertedComponent = () => {
-  const [showDefault, setShowDefault] = useState(false);
-  const [showAlert, setShowAlert] = useState(false);
-
-  return (
-    <>
-      <Button onPress={() => setShowDefault(true)}>
-        <Text color="white">Default modal</Text>
-      </Button>
-      <Button variant="inverted" onPress={() => setShowAlert(true)}>
-        <Text color="white">Alert modal</Text>
-      </Button>
-
-      <ConfirmationModal
-        inverted
-        visible={showDefault}
-        title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-        confirmText="Accept"
-        cancelText="Cancel"
-        onConfirm={() => setShowDefault(false)}
-        onCancel={() => setShowDefault(false)}
-      >
-        <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in urna vel velit faucibus commodo.
-          Quisque eget arcu ut metus consectetur cursus eget eu magna. Pellentesque habitant morbi tristique senectus et
-          netus et malesuada fames ac turpis egestas. Integer tristique dui posuere turpis ultrices aliquet. Nulla
-          facilisi. Nulla molestie nisl et purus facilisis tempor.
-        </Text>
-      </ConfirmationModal>
-
-      <ConfirmationModal
-        inverted
-        visible={showAlert}
-        title="Lorem ipsum dolor sit amet"
-        confirmText="Accept"
-        onConfirm={() => setShowAlert(false)}
-        alertMode
-      >
-        <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in urna vel velit faucibus commodo.
-          Quisque eget arcu ut metus consectetur cursus eget eu magna. Pellentesque habitant morbi tristique senectus et
-          netus et malesuada fames ac turpis egestas. Integer tristique dui posuere turpis ultrices aliquet. Nulla
-          facilisi. Nulla molestie nisl et purus facilisis tempor.
-        </Text>
-      </ConfirmationModal>
-    </>
-  );
-};
-
-const InfoModeComponent = () => {
-  const [showAlert, setShowAlert] = useState(false);
-
-  return (
-    <>
-      <Button variant="inverted" onPress={() => setShowAlert(true)}>
-        <Text color="white">Default modal</Text>
-      </Button>
-
-      <ConfirmationModal
-        visible={showAlert}
-        title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-        infoMode
-        onClose={() => setShowAlert(false)}
-      >
-        <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in urna vel velit faucibus commodo.
-          Quisque eget arcu ut metus consectetur cursus eget eu magna. Pellentesque habitant morbi tristique senectus et
-          netus et malesuada fames ac turpis egestas. Integer tristique dui posuere turpis ultrices aliquet. Nulla
-          facilisi. Nulla molestie nisl et purus facilisis tempor.
-        </Text>
-      </ConfirmationModal>
-    </>
-  );
-};
-
-export const Default = {
-  render: DefaultComponent,
-};
-
-export const Inverted = {
-  render: InvertedComponent,
-};
-
-export const InfoMode = {
-  render: InfoModeComponent,
-};