Skip to content

Commit 78bf380

Browse files
Chibuzor-NwemambuChibuzor-Nwemambu
authored
chore(lint): Configure ESLint and fix TypeScript errors (#68)
- Configure ESLint with better rules - Resolve existing linting issues and type mismatches docs(readme): Updated the root and storybook readme to reflect current requirements
1 parent d468f08 commit 78bf380

49 files changed

Lines changed: 445 additions & 3657 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@ out/
2727
build
2828
dist
2929

30+
# Expo prebuild (at root level - storybook ios/android are tracked)
31+
/ios/
32+
/android/
33+
/.expo/
34+
/app.json
3035

3136
# Debug
3237
npm-debug.log*

‎README.md‎

Lines changed: 149 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,204 @@
1-
# Design System Mobile
1+
# EDS Mobile — Equinor Design System for React Native
22

3-
Welcome to the Design System Mobile project! This monorepo contains a set of reusable components and utilities for building consistent mobile user interfaces.
3+
[![npm version](https://img.shields.io/npm/v/@equinor/eds-mobile-components)](https://www.npmjs.com/package/@equinor/eds-mobile-components)
4+
[![license](https://img.shields.io/npm/l/@equinor/eds-mobile-components)](./LICENSE)
45

5-
## Project Structure
6-
7-
- **/apps**: Contains application projects (e.g., documentation site, web app).
8-
- **/packages/components**: Core component library with reusable UI components, hooks, and styling utilities.
9-
- **/scripts**: Utility scripts for project maintenance.
6+
A React Native component library implementing the [Equinor Design System](https://eds.equinor.com/). Build consistent mobile experiences that match Equinor's design language.
107

118
## Packages
129

13-
### components
14-
15-
Reusable React Native components, hooks, and utilities for mobile UI development.
10+
| Package | Description |
11+
| ------------------------------------------------------- | ---------------------- |
12+
| [@equinor/eds-mobile-components](./packages/components) | Core component library |
1613

17-
- Located in `packages/components`
18-
- Includes: Accordion, Autocomplete, Button, Dialog, Icon, Input, Menu, Tabs, Typography, and more.
14+
## Apps
1915

20-
For detailed component documentation, see the files in this `/docs` folder or the README in each package.
16+
| App | Description |
17+
| ----------------------------- | ---------------------------------- |
18+
| [storybook](./apps/storybook) | Interactive component showcase app |
2119

22-
This is a library of EDS components for React Native. Using this library should feel similar as for
23-
[EDS for React](https://www.npmjs.com/package/@equinor/eds-core-react).
20+
## Quick Start
2421

25-
## 🧑‍🏫 How to use
22+
### Install the component library
2623

27-
### Installation
28-
29-
---
30-
31-
#### **_NOTE:_**
24+
```bash
25+
pnpm add @equinor/eds-mobile-components
26+
```
3227

33-
THIS LIBRARY IS NOT YET AVAILABLE FOR USE.
28+
### Peer dependencies
3429

35-
The component library requires the following libraries to properly function:
30+
```bash
31+
pnpm add expo-font react-native-gesture-handler react-native-reanimated react-native-svg
32+
```
3633

37-
- [`react-native-svg`](https://github.com/software-mansion/react-native-svg#installation)
38-
- [`react-native-reanimated`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)
39-
- [`react-native-gesture-handler`](https://docs.swmansion.com/react-native-gesture-handler/docs/installation/)
34+
Follow the installation guides for each:
4035

41-
Please make sure to follow these installation instructions before using this package.
36+
- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation/)
37+
- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/)
38+
- [react-native-svg](https://github.com/software-mansion/react-native-svg#installation)
4239

43-
### Getting started
40+
### Basic usage
4441

45-
Before using the components in your app, make sure to load the fonts and assets required by the
46-
library somewhere in your root component. It is also recommended that you wrap your app in the
47-
`EDSProvider`. This will give you access to dynamically switching between `tablet` and `phone` mode
48-
as well as `dark` and `light` mode support:
42+
Wrap your app in `EDSProvider` and load fonts with `useEDS`:
4943

5044
```tsx
45+
import { EDSProvider, useEDS } from "@equinor/eds-mobile-components";
46+
import { SafeAreaProvider } from "react-native-safe-area-context";
47+
5148
export default function App() {
5249
const [hasLoadedEds, edsLoadError] = useEDS();
50+
5351
if (!hasLoadedEds) {
5452
return null;
55-
} else {
56-
return (
57-
<SafeAreaProvider>
58-
<EDSProvider colorScheme="light" density="phone">
59-
<Navigation colorScheme="light" />
60-
<StatusBar />
61-
</EDSProvider>
62-
</SafeAreaProvider>
63-
);
6453
}
54+
55+
return (
56+
<SafeAreaProvider>
57+
<EDSProvider colorScheme="light" density="phone">
58+
<YourApp />
59+
</EDSProvider>
60+
</SafeAreaProvider>
61+
);
6562
}
6663
```
6764

68-
### 🖼️ Theming
65+
## Components
66+
67+
The library includes 25+ components:
68+
69+
| Category | Components |
70+
| -------------- | ------------------------------------------------------------------------------- |
71+
| **Layout** | Paper, Spacer, Scrim |
72+
| **Inputs** | Button, TextField, Input, Search, Select, Autocomplete, SelectionControls, Chip |
73+
| **Feedback** | Dialog, Progress, ProgressIndicator, OfflineBanner |
74+
| **Navigation** | Tabs, Menu, Accordion, Cell |
75+
| **Display** | Typography, Icon, Label, Popover, Environment |
76+
| **Utilities** | EDSProvider, Portal, ErrorBoundary, PressableHighlight |
77+
78+
## Theming
6979

70-
Creating stylesheets that use EDS values is made to be easy and performant. Start by creating a
71-
`EDSStyleSheet`, almost just like for a normal React Native StyleSheet:
80+
Create theme-aware stylesheets with `EDSStyleSheet`:
7281

7382
```tsx
83+
import { EDSStyleSheet, useStyles } from "@equinor/eds-mobile-components";
84+
7485
const themeStyles = EDSStyleSheet.create((theme) => ({
7586
container: {
7687
backgroundColor: theme.colors.container.background,
7788
borderRadius: theme.geometry.border.containerBorderRadius,
7889
},
7990
}));
80-
```
81-
82-
Notice that we pass `theme` into our style sheet. This is a resolved token based on the current
83-
configuration of the app. This means that the value for `theme.colors.container` can change between
84-
light/dark mode without you having to worry about anything 😎
8591

86-
We resolve our stylesheet in our components using the provided `useStyles` hook:
87-
88-
```tsx
8992
const MyComponent = () => {
9093
const styles = useStyles(themeStyles);
9194
return <View style={styles.container} />;
9295
};
9396
```
9497

95-
Ideally, all styling, be it conditional or not should happen outside of our components to reduce
96-
clutter. The `EDSStyleSheet.create` callback method accepts a second optional argument which allows
97-
you to pass any additional props into the style sheet:
98+
Styles automatically adapt to light/dark mode and phone/tablet density.
99+
100+
### Conditional styling with props
98101

99102
```tsx
100-
// Notice that we type our second argument!
101-
const themeStylesWithProps = EDSStyleSheet.create(
102-
(theme, props: { color?: string }) => {
103-
const backgroundColor = color ?? theme.colors.container.background;
104-
105-
return {
106-
container: {
107-
backgroundColor,
108-
},
109-
};
110-
}
103+
const themeStyles = EDSStyleSheet.create(
104+
(theme, props: { highlight?: boolean }) => ({
105+
container: {
106+
backgroundColor: props.highlight
107+
? theme.colors.interactive.primary
108+
: theme.colors.container.background,
109+
},
110+
})
111111
);
112-
```
113-
114-
We are then required by our `useStyle` hook to pass these props in with the `EDSStyleSheet`:
115112

116-
```tsx
117-
const MyOtherComponent = () => {
118-
// Normally you'd pass some of your component props into this hook.
119-
const styles = useStyles(themeStylesWithProps, { color: "red" });
113+
const MyComponent = ({ highlight }: { highlight?: boolean }) => {
114+
const styles = useStyles(themeStyles, { highlight });
120115
return <View style={styles.container} />;
121116
};
122117
```
123118

119+
---
120+
121+
## Development
122+
123+
This monorepo uses [pnpm](https://pnpm.io/) and [Turborepo](https://turbo.build/).
124+
125+
### Prerequisites
126+
127+
- [Node.js](https://nodejs.org/) v22 or higher
128+
- [pnpm](https://pnpm.io/) v10 or higher
129+
- For iOS: [Xcode](https://developer.apple.com/xcode/) and CocoaPods
130+
- For Android: [Android Studio](https://developer.android.com/studio)
131+
132+
### Setup
133+
134+
```bash
135+
# Clone the repository
136+
git clone https://github.com/equinor/design-system-mobile.git
137+
cd design-system-mobile
138+
139+
# Install dependencies
140+
pnpm install
141+
142+
# Build the component library
143+
pnpm build
144+
```
145+
146+
### Scripts
147+
148+
| Command | Description |
149+
| --------------------- | --------------------------------------- |
150+
| `pnpm install` | Install all dependencies |
151+
| `pnpm build` | Build all packages |
152+
| `pnpm dev:storybook` | Run the storybook app |
153+
| `pnpm dev:components` | Watch mode for component library |
154+
| `pnpm lint` | Run ESLint |
155+
| `pnpm format` | Format code with Prettier |
156+
| `pnpm clean` | Remove build artifacts and node_modules |
157+
| `pnpm build:docs` | Serve documentation locally |
158+
159+
### Project structure
160+
161+
```
162+
design-system-mobile/
163+
├── apps/
164+
│ └── storybook/ # Expo app showcasing components
165+
├── packages/
166+
│ ├── components/ # @equinor/eds-mobile-components
167+
│ ├── eslint-config-eds-mobile/ # Shared ESLint config
168+
│ └── tsconfig/ # Shared TypeScript config
169+
├── docs/ # Component documentation (MkDocs)
170+
└── scripts/ # Maintenance scripts
171+
```
172+
173+
### Running the storybook app
174+
175+
```bash
176+
# Build components first
177+
pnpm build
178+
179+
# Start the storybook app
180+
pnpm dev:storybook
181+
182+
# For iOS, install pods (first time only)
183+
cd apps/storybook/ios && pod install
184+
```
185+
186+
## Documentation
187+
188+
- [Component documentation](./docs/) — Detailed docs for each component
189+
- [Storybook app](./apps/storybook/) — Interactive examples
190+
- [Equinor Design System](https://eds.equinor.com/) — Design guidelines
191+
124192
## Contributing
125193

126-
- Please read the [CODE_OF_CONDUCT.md](../packages/components/CODE_OF_CONDUCT.md) before contributing.
127-
- Open issues or pull requests for bugs, features, or improvements.
194+
We welcome contributions! Please read our [Code of Conduct](./packages/components/CODE_OF_CONDUCT.md) before contributing.
128195

129-
## License
196+
1. Fork the repository
197+
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
198+
3. Commit your changes (`git commit -m 'Add amazing feature'`)
199+
4. Push to the branch (`git push origin feature/amazing-feature`)
200+
5. Open a Pull Request
130201

131-
This project is licensed under the [MIT License](../LICENSE).
202+
## License
132203

133-
---
204+
This project is licensed under the [MIT License](./LICENSE).

‎apps/storybook/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ dist/
99
web-build/
1010
expo-env.d.ts
1111

12+
# Native - Using Continuous Native Generation (CNG)
13+
# These folders are generated by `npx expo prebuild` and should not be committed
14+
ios/
15+
android/
16+
1217
# Native
1318
.kotlin/
1419
*.orig.*

0 commit comments

Comments
 (0)