Dubl-shared-components NPM

Dubl Shared Components

A reusable React Native component library for the Dubl project. Built with React Native and Tailwind via tailwind-rn.

Overview
Features
Installation
Usage
Development
Scripts
Project Structure
License

Overview

The Dubl Shared Components repository provides a set of React Native UI components that can be consumed by multiple Dubl apps (e.g., Android-only and iOS-only apps).

TypeScript for type safety
ESLint + Prettier for consistent code formatting and linting
Jest for unit testing
Tailwind styling via tailwind-rn

Features

Reusable Components: Common UI elements (buttons, inputs, forms, etc.) shared across Dubl apps.
Tailwind-based: Consistent, utility-first styling for React Native.
Modular: Exported as a library for easy consumption in other projects.
Type Declarations: Ships .d.ts files for seamless integration with TypeScript apps.

Installation

Clone the repository or include it as a submodule in your monorepo.
Install dependencies:
```
yarn
```
Build the library to generate TypeScript declaration files:
```
yarn build
```

Consuming in Another Project

If you’re linking locally:

# From the main app
yarn add file:../dubl-shared-components

You can then import shared components as:

import { Button } from 'dubl-shared-components';

Usage

In your React Native application:

Install the library (local or via a private registry).

Import the component you need:

import React from 'react';
import { View } from 'react-native';
import { Button } from 'dubl-shared-components';

export function HomeScreen() {
  return (
    <View>
      <Button label="Click Me" onPress={() => alert('Hello from Dubl!')} />
    </View>
  );
}

Run your React Native app (yarn android or yarn ios) to see the shared component in action.

Development

Clone or open the dubl-shared-components repo.
Install Dependencies:
```
yarn
```

3. **Start coding**. All source files live in the `src/` folder.

### Creating New Components

To create a new component:

1. **Create the component structure**:

src/components/your-component/ ├─ YourComponent.tsx # Main component file ├─ YourComponent.styles.ts # Component styles └─ your-component.stories.tsx # Storybook stories

2. **Implement the component** (`YourComponent.tsx`):
```tsx
import React from 'react';
import { View } from 'react-native';
import { styles } from './YourComponent.styles';

interface YourComponentProps {
// Define your props here
testID?: string;
}

export function YourComponent({ testID }: YourComponentProps) {
return (
<View style={styles.container} testID={testID}>
    {/* Your component content */}
</View>
);
}

Add styles (YourComponent.styles.ts):

import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
container: {
// Your styles here
},
});

Create Storybook stories (your-component.stories.tsx):

import type { Meta, StoryObj } from '@storybook/react';
import { YourComponent } from './YourComponent';

const meta: Meta<typeof YourComponent> = {
title: 'Components/YourComponent',
component: YourComponent,
};

export default meta;
type Story = StoryObj<typeof YourComponent>;

export const Default: Story = {
args: {
// Your default props
},
};

Export the component in src/index.ts:

export * from './components/your-component/YourComponent';

Testing in Storybook

Start Storybook:

yarn storybook

View your component:

Open http://localhost:6006
Find your component under the Components section
Interact with different stories and props
Test various states and configurations

Testing tips:

Use the Controls panel to modify props in real-time
Create multiple stories for different states/variations
Test edge cases and error states
Verify responsive behavior using the viewport controls

Linting & Formatting

Lint your code:
```
yarn lint
```
Auto-format with Prettier:
```
yarn format
```

Testing

Run all tests with Jest:
```
yarn test
```
Write your unit tests in __tests__ directories or alongside components as *.test.ts or *.spec.ts.

Building

Generate .d.ts files (and optionally .js if you remove emitDeclarationOnly) in dist/:
```
yarn build
```

Scripts

Below are the main npm/yarn scripts defined in package.json:

Script	Command	Description
`lint`	`eslint 'src/*/.{js,ts,tsx}'`	Runs ESLint on all source files.
`format`	`prettier --write 'src/*/.{js,ts,tsx}'`	Formats all source files with Prettier.
`test`	`jest`	Runs the unit test suite using Jest.
`build`	`tsc`	Compiles TypeScript and emits declaration files to `dist/`.

Project Structure

dubl-shared-components/
├─ .vscode/                # VS Code workspace settings (optional)
│   ├─ extensions.json
│   └─ settings.json
├─ src/
│   ├─ components/
│   │   └─ Button.tsx      # Example shared Button component
│   └─ tailwind.ts         # tailwind-rn config
├─ __tests__/              # Jest tests (optional structure)
├─ dist/                   # Output folder (after build)
├─ .gitignore
├─ .nvmrc                  # Optional Node version file for nvm
├─ package.json
├─ tsconfig.json
└─ yarn.lock