@stackone/malachite 0.1.1 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -181
- package/dist/index.d.ts +553 -178
- package/dist/index.js +4307 -30762
- package/dist/index.js.map +1 -1
- package/package.json +50 -63
package/README.md
CHANGED
|
@@ -1,181 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
A modern React component library built with TypeScript, providing a comprehensive set of reusable UI components for building StackOne applications.
|
|
4
|
-
|
|
5
|
-
## 🚀 Installation
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install malachite
|
|
9
|
-
# or
|
|
10
|
-
yarn add malachite
|
|
11
|
-
# or
|
|
12
|
-
pnpm add malachite
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## 📦 What's Included
|
|
16
|
-
|
|
17
|
-
Malachite provides a set of components to be used in StackOne applications.
|
|
18
|
-
|
|
19
|
-
### Core Components
|
|
20
|
-
- **Button** - Flexible button component with multiple variants
|
|
21
|
-
- **Card** - Container component for content organization
|
|
22
|
-
- **Input** - Form input component with validation support
|
|
23
|
-
- **Typography** - Text components with consistent styling
|
|
24
|
-
- **Spacer** - Layout component for consistent spacing
|
|
25
|
-
|
|
26
|
-
### Layout & Structure
|
|
27
|
-
- **Flex** - Flexible layout component with alignment controls
|
|
28
|
-
- **Padded** - Container component with consistent padding
|
|
29
|
-
- **FooterLinks** - Pre-styled footer navigation component
|
|
30
|
-
|
|
31
|
-
### Interactive Components
|
|
32
|
-
- **Alert** - Notification and alert messages
|
|
33
|
-
- **Tooltip** - Contextual information on hover
|
|
34
|
-
- **ButtonList** - Group of related buttons
|
|
35
|
-
- **Form** - Form wrapper with validation support
|
|
36
|
-
|
|
37
|
-
### Content & Media
|
|
38
|
-
- **Markdown** - Render markdown content with styling
|
|
39
|
-
- **Spinner** - Loading indicators
|
|
40
|
-
- **CustomIcons** - Comprehensive icon library
|
|
41
|
-
|
|
42
|
-
### Theme System
|
|
43
|
-
- **ThemeProvider** - Theme context provider
|
|
44
|
-
- **useTheme** - Theme context hook
|
|
45
|
-
|
|
46
|
-
## 🎯 Quick Start
|
|
47
|
-
|
|
48
|
-
```tsx
|
|
49
|
-
import React from 'react';
|
|
50
|
-
import {
|
|
51
|
-
ThemeProvider,
|
|
52
|
-
Button,
|
|
53
|
-
Card,
|
|
54
|
-
Typography,
|
|
55
|
-
Flex
|
|
56
|
-
} from 'malachite';
|
|
57
|
-
|
|
58
|
-
function App() {
|
|
59
|
-
return (
|
|
60
|
-
<ThemeProvider>
|
|
61
|
-
<Card>
|
|
62
|
-
<Flex direction="column" gap="md">
|
|
63
|
-
<Typography variant="h1">Welcome to Malachite</Typography>
|
|
64
|
-
<Typography variant="body">
|
|
65
|
-
Build beautiful UIs with our component library
|
|
66
|
-
</Typography>
|
|
67
|
-
<Button variant="primary">
|
|
68
|
-
Get Started
|
|
69
|
-
</Button>
|
|
70
|
-
</Flex>
|
|
71
|
-
</Card>
|
|
72
|
-
</ThemeProvider>
|
|
73
|
-
);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
export default App;
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
## 🎨 Theming
|
|
80
|
-
|
|
81
|
-
Malachite includes a powerful theming system that allows you to customize the look and feel of all components:
|
|
82
|
-
|
|
83
|
-
```tsx
|
|
84
|
-
import { ThemeProvider, useTheme } from 'malachite';
|
|
85
|
-
|
|
86
|
-
// Wrap your app with ThemeProvider
|
|
87
|
-
function App() {
|
|
88
|
-
return (
|
|
89
|
-
<ThemeProvider>
|
|
90
|
-
<YourComponents />
|
|
91
|
-
</ThemeProvider>
|
|
92
|
-
);
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
// Use the theme in your components
|
|
96
|
-
function CustomComponent() {
|
|
97
|
-
const theme = useTheme();
|
|
98
|
-
// Access theme values
|
|
99
|
-
return <div style={{ color: theme.colors.primary }}>Themed content</div>;
|
|
100
|
-
}
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
## 📚 Storybook
|
|
104
|
-
|
|
105
|
-
Explore all components and their variants in our interactive Storybook:
|
|
106
|
-
|
|
107
|
-
```bash
|
|
108
|
-
npm run storybook
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
This will launch Storybook where you can:
|
|
112
|
-
- Browse all available components
|
|
113
|
-
- See component variations and props
|
|
114
|
-
- Test component interactions
|
|
115
|
-
- Copy code examples
|
|
116
|
-
|
|
117
|
-
## 🛠️ Development
|
|
118
|
-
|
|
119
|
-
### Prerequisites
|
|
120
|
-
- Node.js 16+
|
|
121
|
-
- npm, yarn, or pnpm
|
|
122
|
-
|
|
123
|
-
### Setup
|
|
124
|
-
|
|
125
|
-
1. Clone the repository
|
|
126
|
-
```bash
|
|
127
|
-
git clone https://github.com/StackOneHQ/malachite.git
|
|
128
|
-
cd malachite
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
2. Install dependencies
|
|
132
|
-
```bash
|
|
133
|
-
npm install
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
3. Start development server
|
|
137
|
-
```bash
|
|
138
|
-
npm run dev
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
4. Run Storybook
|
|
142
|
-
```bash
|
|
143
|
-
npm run storybook
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
### Available Scripts
|
|
147
|
-
|
|
148
|
-
- `npm run dev` - Start development server
|
|
149
|
-
- `npm run build` - Build for production
|
|
150
|
-
- `npm run preview` - Preview production build
|
|
151
|
-
- `npm run storybook` - Launch Storybook
|
|
152
|
-
- `npm run lint` - Run ESLint
|
|
153
|
-
- `npm run type-check` - Run TypeScript checks
|
|
154
|
-
|
|
155
|
-
## 📋 Component Reference
|
|
156
|
-
|
|
157
|
-
### Layout Components
|
|
158
|
-
| Component | Description | Key Props |
|
|
159
|
-
|-----------|-------------|-----------|
|
|
160
|
-
| `Flex` | Flexible layout container | `direction`, `justify`, `align`, `gap` |
|
|
161
|
-
| `Padded` | Container with consistent padding | `size`, `children` |
|
|
162
|
-
| `Spacer` | Adds consistent spacing | `size`, `direction` |
|
|
163
|
-
|
|
164
|
-
### UI Components
|
|
165
|
-
| Component | Description | Key Props |
|
|
166
|
-
|-----------|-------------|-----------|
|
|
167
|
-
| `Button` | Interactive button | `variant`, `size`, `disabled` |
|
|
168
|
-
| `Card` | Content container | `elevation`, `padding` |
|
|
169
|
-
| `Input` | Form input field | `type`, `placeholder`, `validation` |
|
|
170
|
-
| `Alert` | Notification messages | `type`, `message`, `dismissible` |
|
|
171
|
-
|
|
172
|
-
### Content Components
|
|
173
|
-
| Component | Description | Key Props |
|
|
174
|
-
|-----------|-------------|-----------|
|
|
175
|
-
| `Typography` | Text elements | `variant`, `color`, `weight` |
|
|
176
|
-
| `Markdown` | Rendered markdown | `content`, `sanitize` |
|
|
177
|
-
| `Tooltip` | Contextual help | `content`, `placement` |
|
|
178
|
-
|
|
179
|
-
## 📄 License
|
|
180
|
-
|
|
181
|
-
This project is licensed under the MIT License.
|
|
1
|
+
📄 License
|
|
2
|
+
This project is licensed under the MIT License.
|