@ramme-io/ui 1.0.1 → 1.0.2
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 +41 -54
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,92 +1,79 @@
|
|
|
1
|
-
# Ramme
|
|
1
|
+
# Ramme App Starter
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@ramme-io/create-app) [](https://opensource.org/licenses/MIT)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
**The clean-room environment for modern product design.**
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
This repository is the official scaffolding tool for the Ramme ecosystem. It automates the setup of a production-grade frontend environment, pre-wiring the **Ramme UI** component library with the industry's most robust open-source technologies.
|
|
8
|
+
|
|
9
|
+
Designed for speed and structural integrity, this starter kit removes the friction of configuration so you can move from concept to interactive prototype in seconds.
|
|
8
10
|
|
|
9
11
|
---
|
|
10
12
|
|
|
11
13
|
## Quick Start
|
|
12
14
|
|
|
13
|
-
|
|
15
|
+
To scaffold a new project, run the initialization command in your terminal. This will generate a fresh directory with all dependencies linked and configured.
|
|
14
16
|
|
|
15
|
-
|
|
17
|
+
*(Replace `my-new-project` with your desired folder name).*
|
|
16
18
|
|
|
17
19
|
```bash
|
|
18
|
-
npm create @ramme-io/app@latest
|
|
19
|
-
|
|
20
|
+
npm create @ramme-io/app@latest my-new-project
|
|
20
21
|
```
|
|
21
22
|
|
|
23
|
+
This single command will:
|
|
24
|
+
1. **Scaffold** a high-performance Vite project structure.
|
|
25
|
+
2. **Install** React 19, TypeScript, and Tailwind CSS.
|
|
26
|
+
3. **Configure** the `@ramme-io/ui` component library and design tokens.
|
|
27
|
+
4. **Optimize** linting and build settings for immediate deployment.
|
|
28
|
+
|
|
22
29
|
---
|
|
23
30
|
|
|
24
|
-
##
|
|
31
|
+
## Launch Sequence
|
|
25
32
|
|
|
26
|
-
|
|
33
|
+
Once the scaffolding is complete, initialize your local environment:
|
|
27
34
|
|
|
28
|
-
**1.
|
|
29
|
-
|
|
35
|
+
**1. Enter the project directory**
|
|
36
|
+
```bash
|
|
37
|
+
cd my-new-project
|
|
38
|
+
```
|
|
30
39
|
|
|
40
|
+
**2. Install dependencies**
|
|
31
41
|
```bash
|
|
32
42
|
pnpm install
|
|
43
|
+
# or npm install
|
|
33
44
|
```
|
|
34
45
|
|
|
35
|
-
**
|
|
36
|
-
Next, run the Storybook command. This will start a local development server and open a new browser tab where you can view, test, and interact with all of the library's components in isolation.
|
|
37
|
-
|
|
46
|
+
**3. Ignite the dev server**
|
|
38
47
|
```bash
|
|
39
|
-
pnpm run
|
|
48
|
+
pnpm run dev
|
|
40
49
|
```
|
|
41
50
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
## Basic Usage
|
|
45
|
-
|
|
46
|
-
Here's a simple example of how to use a Ramme UI component in your project:
|
|
47
|
-
|
|
48
|
-
```tsx
|
|
49
|
-
import React from 'react';
|
|
50
|
-
import { Button, Card, PageHeader } from '@ramme-io/ui';
|
|
51
|
-
|
|
52
|
-
function MyAwesomePage() {
|
|
53
|
-
return (
|
|
54
|
-
<div>
|
|
55
|
-
<PageHeader
|
|
56
|
-
title="Welcome to Ramme"
|
|
57
|
-
description="This is a page built with our new component library."
|
|
58
|
-
/>
|
|
59
|
-
<Card className="mt-8 p-4">
|
|
60
|
-
<p className="mb-4">Here is some content inside a card.</p>
|
|
61
|
-
<Button variant="primary" onClick={() => alert('Button clicked!')}>
|
|
62
|
-
Get Started
|
|
63
|
-
</Button>
|
|
64
|
-
</Card>
|
|
65
|
-
</div>
|
|
66
|
-
);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
export default MyAwesomePage;
|
|
70
|
-
```
|
|
51
|
+
Your prototype is now live at `http://localhost:5173`.
|
|
71
52
|
|
|
72
53
|
---
|
|
73
54
|
|
|
74
|
-
## The
|
|
55
|
+
## The Tech Stack
|
|
75
56
|
|
|
76
|
-
|
|
57
|
+
This starter kit is not a proprietary framework; it is an opinionated orchestration of the best open-source tools available:
|
|
77
58
|
|
|
78
|
-
*
|
|
59
|
+
* **Vite:** Next-generation tooling for instant server start and lightning-fast HMR (Hot Module Replacement).
|
|
60
|
+
* **React:** The standard library for building composable user interfaces.
|
|
61
|
+
* **TypeScript:** Statically typed JavaScript for scalable, robust application logic.
|
|
62
|
+
* **Tailwind CSS:** A utility-first styling engine configured with Ramme design tokens.
|
|
63
|
+
* **@ramme-io/ui:** A pre-installed suite of accessible, unstyled primitives based on Radix UI.
|
|
79
64
|
|
|
80
|
-
|
|
65
|
+
---
|
|
81
66
|
|
|
82
|
-
|
|
67
|
+
## The Ramme Ecosystem
|
|
83
68
|
|
|
84
|
-
|
|
69
|
+
This tool is part of a suite of developer resources maintained by **Excesspool Limited Liability Company**:
|
|
85
70
|
|
|
86
|
-
|
|
71
|
+
* **`@ramme-io/ui`**: The core library of visual primitives.
|
|
72
|
+
* **`@ramme-io/create-app`** (This Repository): The CLI scaffolding tool.
|
|
87
73
|
|
|
88
|
-
|
|
74
|
+
---
|
|
89
75
|
|
|
90
76
|
## License
|
|
91
77
|
|
|
92
|
-
|
|
78
|
+
Copyright © 2025 Excesspool Limited Liability Company.
|
|
79
|
+
This project is licensed under the [MIT License](LICENSE).
|