Skip to content

Commit cea8c95

Browse files
landonwjohnsonlandonwjohnson
committed
changes
1 parent 163bf2d commit cea8c95

30 files changed

+9765
-16935
lines changed

‎App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from "react-native";
33
function App() {
44
return (
55
<View style={styles.container}>
6-
<Text>Open up App.tsx to start working on your app!</Text>
6+
<Text></Text>
77
</View>
88
);
99
}

‎README.md‎

Lines changed: 103 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,126 @@
1-
![picture of storybook](https://github.com/user-attachments/assets/cf98766d-8b90-44ab-b718-94ab16e63205)
21

3-
# getting started
2+
# @devlander/ui
43

5-
```sh
6-
npx create-expo-app --template expo-template-storybook AwesomeStorybook
7-
```
4+
**`@devlander/ui`** is a comprehensive UI package that provides reliable, customizable, and cross-platform components. Designed to streamline development, it helps you kickstart projects with consistent and reusable elements that work seamlessly across iOS, Android, React Native Web, React Native TV, Next.js, Xbox, and more.
85

9-
or
6+
---
107

11-
```sh
12-
yarn create expo-app --template expo-template-storybook AwesomeStorybook
13-
```
8+
## 🚀 Why Use @devlander/ui?
149

15-
# app
10+
- **Functionality First**: Reliable, prebuilt components designed to handle core functionality out of the box.
11+
- **Cross-Platform Compatibility**: Works seamlessly across multiple platforms, including mobile, web, and TV.
12+
- **Cohesion Across Projects**: Ensures consistency in UI/UX and functionality across different projects.
13+
- **Customizable Styling**: Fully customizable to match any design system or branding.
1614

17-
```sh
18-
yarn start
19-
```
15+
This package was born out of the need to avoid repetitive coding of similar components—like form inputs or password fields with toggle functionality—by providing tested, reusable building blocks.
2016

21-
# Ondevice
17+
---
2218

23-
In this template you can now run `yarn storybook` to start ondevice storybook or `yarn start` to start your expo app.
24-
This works via env variables and expo constants.
19+
## 📦 Installation
2520

26-
```sh
27-
# either
28-
yarn storybook
21+
Install the package via npm or yarn:
2922

30-
# ios
31-
yarn storybook:ios
23+
### Using npm:
24+
```bash
25+
npm install @devlander/ui
26+
```
3227

33-
# android
34-
yarn storybook:android
28+
### Using yarn:
29+
```bash
30+
yarn add @devlander/ui
3531
```
3632

37-
If you add new stories on the native (ondevice version) you either need to have the watcher running or run the stories loader
33+
---
3834

39-
To update the stories one time
35+
## 📚 Components
4036

41-
```sh
42-
yarn storybook-generate
43-
```
37+
### **Atoms**
38+
- **Inputs**: `Button`, `Checkbox`, `Input`
39+
- **Feedback**: `Spinner`, `Alert`
40+
- **Display**: `Icon`, `Badge`
41+
- **Controls**: `Slider`, `Switch`
42+
43+
### **Molecules**
44+
- `Dropdown`, `AvatarGroup`, `MenuItem`, `Tooltip`, `Divider`
45+
46+
### **Organisms**
47+
- `Carousel` (with subcomponents: `Slide`, `Dot`, `PaginationStatus`)
48+
- `Card`, `Accordion`, `Navbar`, `Form`, `Table`
4449

45-
# Web
50+
### **Templates**
51+
- `Breadcrumbs`, `Stepper`
4652

47-
Start react native web storybook:
53+
All components are highly customizable to suit your specific needs.
4854

55+
---
56+
57+
## 🎨 Theming
58+
59+
**`@devlander/ui`** includes pre-configured themes:
60+
- **Default Theme**: A clean, modern style.
61+
- **Dark Theme**: Optimized for low-light environments.
62+
63+
Themes can be extended or replaced. Example:
64+
65+
```tsx
66+
import { ThemeProvider, createTheme } from '@devlander/ui';
67+
68+
const customTheme = createTheme({
69+
palette: {
70+
primary: '#007BFF',
71+
secondary: '#6C757D',
72+
},
73+
});
74+
75+
const App = () => (
76+
<ThemeProvider theme={customTheme}>
77+
<YourComponent />
78+
</ThemeProvider>
79+
);
4980
```
50-
yarn storybook:web
81+
82+
---
83+
84+
## 🛠️ Usage
85+
86+
Here’s how to get started with **`@devlander/ui`**:
87+
88+
### Example: Button and Input Components
89+
```tsx
90+
import React from 'react';
91+
import { Button, Input } from '@devlander/ui';
92+
93+
const App = () => (
94+
<div>
95+
<Input
96+
placeholder="Enter your password"
97+
type="password"
98+
onChange={(e) => console.log(e.target.value)}
99+
/>
100+
<Button onClick={() => alert('Button clicked!')}>Submit</Button>
101+
</div>
102+
);
103+
104+
export default App;
51105
```
52106

53-
build react native web storybook:
107+
---
108+
109+
## 👨‍💻 Contributing
110+
111+
Contributions are welcome! If you’d like to improve this package, feel free to fork the repository and submit a pull request. Please ensure all tests pass before submitting.
54112

55-
```sh
56-
yarn build-storybook
113+
---
114+
115+
## 📞 Support
116+
117+
For issues or feature requests, please open an [issue](https://github.com/Devlander-Software/ui/issues) or contact us directly.
118+
119+
---
120+
121+
Start building today by installing **`@devlander/ui`**:
122+
123+
```bash
124+
npm install @devlander/ui
57125
```
126+

‎ROADMAP.md‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
If you had a component called `ResponsiveText`, it would likely fit under the `atoms/` category within the `display/` subcategory. Here is the updated markdown content:
2+
3+
# Folder Structure for UI Package
4+
5+
```
6+
src/
7+
components/
8+
atoms/
9+
inputs/
10+
Button/
11+
Button.tsx
12+
Button.types.ts
13+
Button.styles.ts
14+
Button.test.tsx
15+
index.ts
16+
Checkbox/
17+
Checkbox.tsx
18+
Checkbox.types.ts
19+
Checkbox.styles.ts
20+
Checkbox.test.tsx
21+
index.ts
22+
Input/
23+
Input.tsx
24+
Input.types.ts
25+
Input.styles.ts
26+
Input.test.tsx
27+
index.ts
28+
feedback/
29+
Spinner/
30+
Spinner.tsx
31+
Spinner.types.ts
32+
Spinner.styles.ts
33+
Spinner.test.tsx
34+
index.ts
35+
Alert/
36+
Alert.tsx
37+
Alert.types.ts
38+
Alert.styles.ts
39+
Alert.test.tsx
40+
index.ts
41+
display/
42+
Icon/
43+
Icon.tsx
44+
Icon.types.ts
45+
Icon.styles.ts
46+
Icon.test.tsx
47+
index.ts
48+
Badge/
49+
Badge.tsx
50+
Badge.types.ts
51+
Badge.styles.ts
52+
Badge.test.tsx
53+
index.ts
54+
ResponsiveText/
55+
ResponsiveText.tsx
56+
ResponsiveText.types.ts
57+
ResponsiveText.styles.ts
58+
ResponsiveText.test.tsx
59+
index.ts
60+
controls/
61+
Slider/
62+
Slider.tsx
63+
Slider.types.ts
64+
Slider.styles.ts
65+
Slider.test.tsx
66+
index.ts
67+
Switch/
68+
Switch.tsx
69+
Switch.types.ts
70+
Switch.styles.ts
71+
Switch.test.tsx
72+
index.ts
73+
molecules/
74+
Dropdown/
75+
Dropdown.tsx
76+
Dropdown.types.ts
77+
Dropdown.styles.ts
78+
Dropdown.test.tsx
79+
index.ts
80+
AvatarGroup/
81+
AvatarGroup.tsx
82+
AvatarGroup.types.ts
83+
AvatarGroup.styles.ts
84+
AvatarGroup.test.tsx
85+
index.ts
86+
MenuItem/
87+
MenuItem.tsx
88+
MenuItem.types.ts
89+
MenuItem.styles.ts
90+
MenuItem.test.tsx
91+
index.ts
92+
Tooltip/
93+
Tooltip.tsx
94+
Tooltip.types.ts
95+
Tooltip.styles.ts
96+
Tooltip.test.tsx
97+
index.ts
98+
Divider/
99+
Divider.tsx
100+
Divider.types.ts
101+
Divider.styles.ts
102+
Divider.test.tsx
103+
index.ts
104+
organisms/
105+
Carousel/
106+
Carousel.tsx
107+
Carousel.types.ts
108+
Carousel.styles.ts
109+
Carousel.test.tsx
110+
index.ts
111+
Slide/
112+
Slide.tsx
113+
Slide.types.ts
114+
Slide.styles.ts
115+
Slide.test.tsx
116+
index.ts
117+
Dot/
118+
Dot.tsx
119+
Dot.types.ts
120+
Dot.styles.ts
121+
Dot.test.tsx
122+
index.ts
123+
PaginationStatus/
124+
PaginationStatus.tsx
125+
PaginationStatus.types.ts
126+
PaginationStatus.styles.ts
127+
PaginationStatus.test.tsx
128+
index.ts
129+
Card/
130+
Card.tsx
131+
Card.types.ts
132+
Card.styles.ts
133+
Card.test.tsx
134+
index.ts
135+
Accordion/
136+
Accordion.tsx
137+
Accordion.types.ts
138+
Accordion.styles.ts
139+
Accordion.test.tsx
140+
index.ts
141+
Navbar/
142+
Navbar.tsx
143+
Navbar.types.ts
144+
Navbar.styles.ts
145+
Navbar.test.tsx
146+
index.ts
147+
Form/
148+
Form.tsx
149+
Form.types.ts
150+
Form.styles.ts
151+
Form.test.tsx
152+
index.ts
153+
Table/
154+
Table.tsx
155+
Table.types.ts
156+
Table.styles.ts
157+
Table.test.tsx
158+
index.ts
159+
templates/
160+
Breadcrumbs/
161+
Breadcrumbs.tsx
162+
Breadcrumbs.types.ts
163+
Breadcrumbs.styles.ts
164+
Breadcrumbs.test.tsx
165+
index.ts
166+
Stepper/
167+
Stepper.tsx
168+
Stepper.types.ts
169+
Stepper.styles.ts
170+
Stepper.test.tsx
171+
index.ts
172+
themes/
173+
default/
174+
palette.ts
175+
typography.ts
176+
spacing.ts
177+
shadows.ts
178+
index.ts
179+
dark/
180+
palette.ts
181+
typography.ts
182+
spacing.ts
183+
shadows.ts
184+
index.ts
185+
hooks/
186+
state/
187+
useDebounce.ts
188+
layout/
189+
useMediaQuery.ts
190+
theming/
191+
useTheme.ts
192+
utils/
193+
accessibility/
194+
ariaHelpers.ts
195+
styling/
196+
mergeClasses.ts
197+
ids/
198+
generateId.ts
199+
constants/
200+
colors.ts
201+
sizes.ts
202+
tests/
203+
setupTests.ts
204+
utils/
205+
renderWithProviders.ts
206+
examples/
207+
basic-usage/
208+
App.tsx
209+
theming/
210+
CustomThemeExample.tsx
211+
index.ts
212+
```
213+
214+
## Folder Descriptions
215+
216+
### `components/`
217+
- **`atoms/`**: Small, reusable components that cannot be broken down further. Subcategories include `inputs`, `feedback`, `display`, and `controls`.
218+
- **`display/`**: Includes components like `Icon`, `Badge`, and `ResponsiveText`.
219+
- **`molecules/`**: Composed of multiple atoms, providing more complex functionalities like dropdowns, grouped avatars, tooltips, and dividers.
220+
- **`organisms/`**: Higher-level components composed of atoms and molecules. The `Carousel` component is categorized here as it encapsulates the `Slide`, `Dot`, and `PaginationStatus` components.
221+
- **`Carousel/`**: Contains the main `Carousel` logic, and subcomponents like `Slide`, `Dot`, and `PaginationStatus` are nested within it.
222+
- **`templates/`**: Pre-configured layouts or complex patterns, like breadcrumbs and steppers.

0 commit comments

Comments
 (0)