@madecki/ui 0.1.0 → 1.1.0
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 +450 -43
- package/cursor-rule-template.md +95 -0
- package/dist/index.cjs +210 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +57 -1
- package/dist/index.d.ts +57 -1
- package/dist/index.js +205 -8
- package/dist/index.js.map +1 -1
- package/llm-context.md +104 -0
- package/package.json +30 -24
package/llm-context.md
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# @madecki/ui - AI Context
|
|
2
|
+
|
|
3
|
+
This file provides context for AI assistants building apps with the @madecki/ui component library.
|
|
4
|
+
|
|
5
|
+
## IMPORTANT: Always use @madecki/ui components
|
|
6
|
+
|
|
7
|
+
When building UI, ALWAYS check if @madecki/ui has a component before creating custom ones.
|
|
8
|
+
|
|
9
|
+
## Available Components
|
|
10
|
+
|
|
11
|
+
### Layout
|
|
12
|
+
- `Container` - Page wrapper. Props: `size?: "sm"|"md"|"lg"|"xl"|"full"`, `centered?: boolean`
|
|
13
|
+
- `Stack` - Flex layout. Props: `direction?: "vertical"|"horizontal"`, `gap?: "1"-"10"`, `align?: "start"|"center"|"end"|"stretch"`, `justify?: "start"|"center"|"end"|"between"|"around"`, `wrap?: boolean`
|
|
14
|
+
- `Grid` - Grid layout. Props: `cols?: 1|2|3|4|5|6|12`, `gap?: "1"-"10"`
|
|
15
|
+
- `GridItem` - Grid child. Props: `colSpan?: 1|2|3|4|5|6|12|"full"`
|
|
16
|
+
|
|
17
|
+
### Typography
|
|
18
|
+
- `Heading` - Headings h1-h6. Props: `level?: 1-6`, `size?: "xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"3xl"|"4xl"`, `weight?: "normal"|"medium"|"semibold"|"bold"`, `color?: "default"|"muted"|"primary"|"success"|"warning"|"danger"`
|
|
19
|
+
- `Text` - Body text. Props: `as?: "p"|"span"|"div"|"label"`, `size?: "xs"|"sm"|"md"|"lg"`, `weight?: "normal"|"medium"|"semibold"|"bold"`, `color?: "default"|"muted"|"primary"|"success"|"warning"|"danger"`
|
|
20
|
+
|
|
21
|
+
### Buttons
|
|
22
|
+
- `Button` - Primary button. Props: `variant?: "primary"|"success"|"warning"|"danger"|"info"`, `size?: "sm"|"md"|"lg"`
|
|
23
|
+
- `ButtonTransparent` - Outlined button. Same props as Button.
|
|
24
|
+
- `GradientButton` - Gradient border button. Props: `size?: "sm"|"md"|"lg"`
|
|
25
|
+
- `RadioButtons` - Radio group. Props: `name: string`, `options: {label, value}[]`, `onChange: (value) => void`
|
|
26
|
+
|
|
27
|
+
### Forms
|
|
28
|
+
- `Input` - Text input. Props: `name: string`, `label?: string`, `placeholder?: string`, `type?: string`, `variant?: "primary"|"secondary"|"tertiary"`, `onChange: (value) => void`
|
|
29
|
+
|
|
30
|
+
### Navigation
|
|
31
|
+
- `Tabs` - Tab navigation. Props: `tabs: {label, value}[]`, `onTabClick: (value) => void`
|
|
32
|
+
|
|
33
|
+
### Feedback
|
|
34
|
+
- `Spinner` - Loading spinner. Props: `size?: "sm"|"md"|"lg"`
|
|
35
|
+
- `SpinnerOverlay` - Full-screen loader. Props: `isVisible: boolean`
|
|
36
|
+
- `ContentBox` - Info/warning boxes. Props: `variant?: "info"|"warning"|"success"|"danger"`, `icon?: ReactNode`
|
|
37
|
+
|
|
38
|
+
### Content
|
|
39
|
+
- `BlockQuote` - Styled quote. Props: `children: ReactNode`
|
|
40
|
+
- `Hr` - Horizontal rule. Props: `className?: string`
|
|
41
|
+
|
|
42
|
+
### Icons
|
|
43
|
+
- `Heart` - Props: `variant?: "outline"|"filled"|"gradient"`
|
|
44
|
+
- `Share` - Props: `variant?: "default"|"gradient"`
|
|
45
|
+
- `Search`, `Info`, `Warning` - Utility icons
|
|
46
|
+
- `TwitterIcon`, `LinkedInIcon`, `InstagramIcon` - Social icons. Props: `withWrapper?: boolean`
|
|
47
|
+
|
|
48
|
+
## Design Tokens (Use these, not arbitrary values)
|
|
49
|
+
|
|
50
|
+
### Colors
|
|
51
|
+
`primary` (#1E1E1E), `darkgray` (#272727), `gray` (#3A3A3A), `lightgray` (#6D6D6D), `icongray` (#BFBFBF), `white` (#FCFAF7), `success` (#87BB54), `danger` (#CB5065), `warning` (#EDA867), `info` (#714E8E), `blue` (#2084E1), `neutral` (#E1E1E1)
|
|
52
|
+
|
|
53
|
+
### Spacing
|
|
54
|
+
`1`=4px, `2`=8px, `3`=12px, `4`=14px, `5`=16px, `6`=20px, `7`=24px, `8`=28px, `9`=32px, `10`=40px
|
|
55
|
+
|
|
56
|
+
### Typography
|
|
57
|
+
`xs`=12px, `sm`=14px, `md`=16px, `lg`=18px, `xl`=20px, `2xl`=24px, `3xl`=29px, `4xl`=34px
|
|
58
|
+
|
|
59
|
+
### Border Radius
|
|
60
|
+
`sm`=10px, `md`=20px, `circle`=50%
|
|
61
|
+
|
|
62
|
+
## Usage Patterns
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
// Page layout
|
|
66
|
+
import { Container, Stack, Heading, Text, Button } from "@madecki/ui";
|
|
67
|
+
|
|
68
|
+
function Page() {
|
|
69
|
+
return (
|
|
70
|
+
<Container size="lg">
|
|
71
|
+
<Stack gap="6">
|
|
72
|
+
<Heading level={1}>Title</Heading>
|
|
73
|
+
<Text color="muted">Description</Text>
|
|
74
|
+
<Button variant="primary">Action</Button>
|
|
75
|
+
</Stack>
|
|
76
|
+
</Container>
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// Grid layout
|
|
81
|
+
import { Grid, GridItem } from "@madecki/ui";
|
|
82
|
+
|
|
83
|
+
<Grid cols={3} gap="5">
|
|
84
|
+
<GridItem>Item 1</GridItem>
|
|
85
|
+
<GridItem colSpan={2}>Wide item</GridItem>
|
|
86
|
+
</Grid>
|
|
87
|
+
|
|
88
|
+
// Form
|
|
89
|
+
import { Input, Button, Stack } from "@madecki/ui";
|
|
90
|
+
|
|
91
|
+
<Stack gap="4">
|
|
92
|
+
<Input name="email" label="Email" type="email" onChange={setEmail} />
|
|
93
|
+
<Button variant="primary">Submit</Button>
|
|
94
|
+
</Stack>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## Rules
|
|
98
|
+
|
|
99
|
+
1. ALWAYS import from "@madecki/ui" not create custom components
|
|
100
|
+
2. ALWAYS use design tokens (e.g., `bg-primary`, `p-5`, `text-lg`) not arbitrary values
|
|
101
|
+
3. ALWAYS use `Container` for page-level wrappers
|
|
102
|
+
4. ALWAYS use `Stack` or `Grid` for layouts
|
|
103
|
+
5. ALWAYS use `Heading` and `Text` for typography
|
|
104
|
+
6. Support dark mode with `dark:` prefix when adding custom styles
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@madecki/ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Reusable React UI components with Tailwind CSS",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -27,11 +27,15 @@
|
|
|
27
27
|
"types": "./dist/tailwind-preset.d.cts",
|
|
28
28
|
"default": "./dist/tailwind-preset.cjs"
|
|
29
29
|
}
|
|
30
|
-
}
|
|
30
|
+
},
|
|
31
|
+
"./llm-context": "./llm-context.md",
|
|
32
|
+
"./cursor-rule-template": "./cursor-rule-template.md"
|
|
31
33
|
},
|
|
32
34
|
"files": [
|
|
33
35
|
"dist",
|
|
34
|
-
"README.md"
|
|
36
|
+
"README.md",
|
|
37
|
+
"llm-context.md",
|
|
38
|
+
"cursor-rule-template.md"
|
|
35
39
|
],
|
|
36
40
|
"sideEffects": [
|
|
37
41
|
"**/*.css"
|
|
@@ -42,38 +46,40 @@
|
|
|
42
46
|
"lint": "eslint src",
|
|
43
47
|
"typecheck": "tsc --noEmit",
|
|
44
48
|
"prepublishOnly": "npm run build",
|
|
45
|
-
"publish:npm": "./scripts/publish.sh",
|
|
46
49
|
"storybook": "storybook dev -p 6006",
|
|
47
|
-
"build-storybook": "storybook build"
|
|
50
|
+
"build-storybook": "storybook build",
|
|
51
|
+
"prepare": "husky"
|
|
48
52
|
},
|
|
49
53
|
"peerDependencies": {
|
|
50
|
-
"react": "
|
|
51
|
-
"react-dom": "
|
|
52
|
-
"tailwindcss": ">=
|
|
54
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
55
|
+
"react-dom": "^18.0.0 || ^19.0.0",
|
|
56
|
+
"tailwindcss": ">=4.0.0"
|
|
53
57
|
},
|
|
54
58
|
"devDependencies": {
|
|
59
|
+
"@commitlint/cli": "^20.4.1",
|
|
60
|
+
"@commitlint/config-conventional": "^20.4.1",
|
|
55
61
|
"@eslint/js": "^9.39.2",
|
|
56
|
-
"@
|
|
57
|
-
"@
|
|
58
|
-
"@storybook/addon-links": "
|
|
59
|
-
"@storybook/addon-themes": "
|
|
60
|
-
"@storybook/
|
|
61
|
-
"@storybook/react": "
|
|
62
|
-
"@
|
|
63
|
-
"@
|
|
64
|
-
"@types/react": "^
|
|
65
|
-
"@types/react-dom": "^18.2.4",
|
|
62
|
+
"@semantic-release/changelog": "^6.0.3",
|
|
63
|
+
"@semantic-release/git": "^10.0.1",
|
|
64
|
+
"@storybook/addon-links": "^10.2.8",
|
|
65
|
+
"@storybook/addon-themes": "^10.2.8",
|
|
66
|
+
"@storybook/react": "^10.2.8",
|
|
67
|
+
"@storybook/react-vite": "^10.2.8",
|
|
68
|
+
"@tailwindcss/postcss": "^4.1.18",
|
|
69
|
+
"@types/react": "^19.0.0",
|
|
70
|
+
"@types/react-dom": "^19.0.0",
|
|
66
71
|
"@typescript-eslint/eslint-plugin": "^8.55.0",
|
|
67
72
|
"@typescript-eslint/parser": "^8.55.0",
|
|
68
|
-
"autoprefixer": "^10.4.17",
|
|
69
73
|
"eslint": "^9.39.2",
|
|
70
74
|
"eslint-plugin-react": "^7.37.5",
|
|
71
75
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
76
|
+
"husky": "^9.1.7",
|
|
72
77
|
"postcss": "^8.4.35",
|
|
73
|
-
"react": "^
|
|
74
|
-
"react-dom": "^
|
|
75
|
-
"
|
|
76
|
-
"
|
|
78
|
+
"react": "^19.2.4",
|
|
79
|
+
"react-dom": "^19.2.4",
|
|
80
|
+
"semantic-release": "^25.0.3",
|
|
81
|
+
"storybook": "^10.2.8",
|
|
82
|
+
"tailwindcss": "^4.1.18",
|
|
77
83
|
"tsup": "^8.0.1",
|
|
78
84
|
"typescript": "^5.3.3",
|
|
79
85
|
"typescript-eslint": "^8.55.0",
|
|
@@ -90,7 +96,7 @@
|
|
|
90
96
|
"license": "MIT",
|
|
91
97
|
"repository": {
|
|
92
98
|
"type": "git",
|
|
93
|
-
"url": "https://github.com/madecki/
|
|
99
|
+
"url": "https://github.com/madecki/ui"
|
|
94
100
|
},
|
|
95
101
|
"publishConfig": {
|
|
96
102
|
"access": "public"
|