dengankarya-ui 0.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.
Files changed (8) hide show
  1. package/README.md +258 -0
  2. package/dist/index.cjs +20 -0
  3. package/dist/index.cjs.map +1 -0
  4. package/dist/index.d.cts +12 -0
  5. package/dist/index.d.ts +12 -0
  6. package/dist/index.js +18 -0
  7. package/dist/index.js.map +1 -0
  8. package/package.json +46 -0
package/README.md ADDED
@@ -0,0 +1,258 @@
1
+ # dengankarya-ui
2
+
3
+ A minimal, reusable React component library by [dengankarya.com](https://dengankarya.com). Built with TypeScript, published to npm, and ready to use in any React project.
4
+
5
+ ## Philosophy
6
+
7
+ Components in this library are **style-agnostic**. They don't impose colors, fonts, or spacing. Instead, they inherit all styling from your application, giving you complete control over appearance through your own CSS, Tailwind classes, or inline styles.
8
+
9
+ ## Installation
10
+
11
+ Using `pnpm`:
12
+ ```bash
13
+ pnpm add dengankarya-ui
14
+ ```
15
+
16
+ Using `npm`:
17
+ ```bash
18
+ npm install dengankarya-ui
19
+ ```
20
+
21
+ Using `yarn`:
22
+ ```bash
23
+ yarn add dengankarya-ui
24
+ ```
25
+
26
+ > Requires `react >= 18.0.0` and `react-dom >= 18.0.0`
27
+
28
+ ## Components
29
+
30
+ ### Tagline
31
+
32
+ A simple, semantic footer component that displays "Thoughtfully crafted by dengankarya.com".
33
+
34
+ #### Basic Usage
35
+
36
+ ```tsx
37
+ import { Tagline } from "dengankarya-ui";
38
+
39
+ export default function App() {
40
+ return (
41
+ <>
42
+ <main>Your page content here</main>
43
+ <Tagline />
44
+ </>
45
+ );
46
+ }
47
+ ```
48
+
49
+ #### With Tailwind CSS
50
+
51
+ ```tsx
52
+ <Tagline className="text-xs text-gray-500 py-4 border-t border-gray-200" />
53
+ ```
54
+
55
+ #### With Custom Link
56
+
57
+ ```tsx
58
+ <Tagline href="https://dengankarya.com?utm_source=myapp" />
59
+ ```
60
+
61
+ #### Open Link in New Tab
62
+
63
+ ```tsx
64
+ <Tagline
65
+ anchorProps={{
66
+ target: "_blank",
67
+ rel: "noopener noreferrer"
68
+ }}
69
+ />
70
+ ```
71
+
72
+ #### Full Control
73
+
74
+ ```tsx
75
+ <Tagline
76
+ className="footer-container"
77
+ style={{ marginTop: "2rem", paddingBottom: "1rem" }}
78
+ anchorProps={{
79
+ target: "_blank",
80
+ rel: "noopener noreferrer",
81
+ className: "footer-link hover:underline"
82
+ }}
83
+ />
84
+ ```
85
+
86
+ ## API Reference
87
+
88
+ ### `<Tagline />`
89
+
90
+ #### Props
91
+
92
+ | Prop | Type | Default | Description |
93
+ |------|------|---------|-------------|
94
+ | `href` | `string` | `"https://dengankarya.com"` | URL for the dengankarya.com link |
95
+ | `anchorProps` | `AnchorHTMLAttributes<HTMLAnchorElement>` | `undefined` | Additional attributes to spread onto the `<a>` element (e.g., `target`, `rel`, `className`, `onClick`) |
96
+ | `...props` | `HTMLAttributes<HTMLElement>` | — | All standard HTML attributes for `<footer>` element (e.g., `className`, `style`, `id`, `data-*`, event handlers) |
97
+
98
+ #### TypeScript
99
+
100
+ The component is fully typed. You can import the `TaglineProps` type:
101
+
102
+ ```tsx
103
+ import type { Tagline, TaglineProps } from "dengankarya-ui";
104
+
105
+ const MyFooter = (props: TaglineProps) => {
106
+ return <Tagline {...props} />;
107
+ };
108
+ ```
109
+
110
+ ## Examples
111
+
112
+ ### Next.js App Router
113
+
114
+ ```tsx
115
+ // app/layout.tsx
116
+ import { Tagline } from "dengankarya-ui";
117
+
118
+ export default function RootLayout({
119
+ children,
120
+ }: {
121
+ children: React.ReactNode;
122
+ }) {
123
+ return (
124
+ <html lang="en">
125
+ <body>
126
+ {children}
127
+ <Tagline className="mt-12 pt-8 text-center text-sm text-gray-600" />
128
+ </body>
129
+ </html>
130
+ );
131
+ }
132
+ ```
133
+
134
+ ### React + Vite
135
+
136
+ ```tsx
137
+ // src/App.tsx
138
+ import { Tagline } from "dengankarya-ui";
139
+
140
+ function App() {
141
+ return (
142
+ <div className="min-h-screen flex flex-col">
143
+ <main className="flex-1">Content goes here</main>
144
+ <Tagline className="px-4 py-8 text-gray-500" />
145
+ </div>
146
+ );
147
+ }
148
+
149
+ export default App;
150
+ ```
151
+
152
+ ### Custom Styling with CSS Modules
153
+
154
+ ```tsx
155
+ // App.tsx
156
+ import { Tagline } from "dengankarya-ui";
157
+ import styles from "./App.module.css";
158
+
159
+ export default function App() {
160
+ return (
161
+ <div>
162
+ <main>Your content</main>
163
+ <Tagline className={styles.footer} />
164
+ </div>
165
+ );
166
+ }
167
+ ```
168
+
169
+ ```css
170
+ /* App.module.css */
171
+ .footer {
172
+ margin-top: 3rem;
173
+ padding: 1.5rem;
174
+ text-align: center;
175
+ font-size: 0.875rem;
176
+ color: #9ca3af;
177
+ border-top: 1px solid #e5e7eb;
178
+ }
179
+ ```
180
+
181
+ ## Development
182
+
183
+ ### Setup
184
+
185
+ Clone the repository and install dependencies:
186
+
187
+ ```bash
188
+ git clone https://github.com/dengankarya/dengankarya-ui.git
189
+ cd dengankarya-ui
190
+ pnpm install
191
+ ```
192
+
193
+ ### Build
194
+
195
+ Build the library:
196
+
197
+ ```bash
198
+ pnpm build
199
+ ```
200
+
201
+ Watch mode (rebuilds on file changes):
202
+
203
+ ```bash
204
+ pnpm dev
205
+ ```
206
+
207
+ ### Type Checking
208
+
209
+ Verify TypeScript without emitting output:
210
+
211
+ ```bash
212
+ pnpm exec tsc --noEmit
213
+ ```
214
+
215
+ ### Testing Locally
216
+
217
+ Before publishing to npm, test the package locally:
218
+
219
+ ```bash
220
+ # In the dengankarya-ui directory
221
+ pnpm link --global
222
+
223
+ # In your consumer project
224
+ pnpm link --global dengankarya-ui
225
+ ```
226
+
227
+ Then import and use as normal. When done testing, unlink:
228
+
229
+ ```bash
230
+ pnpm unlink --global dengankarya-ui
231
+ pnpm install dengankarya-ui # Install from npm instead
232
+ ```
233
+
234
+ ### Publishing
235
+
236
+ Publish a new version to npm:
237
+
238
+ ```bash
239
+ # Update version in package.json manually (follow semver)
240
+ pnpm build
241
+ pnpm publish --access public
242
+ ```
243
+
244
+ ## Browser Support
245
+
246
+ This library targets ES2020 and supports all modern browsers. It has zero runtime dependencies beyond React.
247
+
248
+ ## License
249
+
250
+ MIT
251
+
252
+ ## Contributing
253
+
254
+ This is a personal project by dengankarya. Suggestions and feedback are welcome. For issues or feature requests, please open an issue on GitHub.
255
+
256
+ ---
257
+
258
+ Made with ❤️ by [dengankarya.com](https://dengankarya.com)
package/dist/index.cjs ADDED
@@ -0,0 +1,20 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+
5
+ // src/components/Tagline/Tagline.tsx
6
+ function Tagline({
7
+ href = "https://dengankarya.com",
8
+ anchorProps,
9
+ ...props
10
+ }) {
11
+ return /* @__PURE__ */ jsxRuntime.jsxs("footer", { ...props, children: [
12
+ "Thoughtfully crafted by",
13
+ " ",
14
+ /* @__PURE__ */ jsxRuntime.jsx("a", { href, ...anchorProps, children: "dengankarya.com" })
15
+ ] });
16
+ }
17
+
18
+ exports.Tagline = Tagline;
19
+ //# sourceMappingURL=index.cjs.map
20
+ //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Tagline/Tagline.tsx"],"names":["jsxs","jsx"],"mappings":";;;;;AASO,SAAS,OAAA,CAAQ;AAAA,EACtB,IAAA,GAAO,yBAAA;AAAA,EACP,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,uBACEA,eAAA,CAAC,QAAA,EAAA,EAAQ,GAAG,KAAA,EAAO,QAAA,EAAA;AAAA,IAAA,yBAAA;AAAA,IACO,GAAA;AAAA,oBACxBC,cAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAa,GAAG,aAAa,QAAA,EAAA,iBAAA,EAEhC;AAAA,GAAA,EACF,CAAA;AAEJ","file":"index.cjs","sourcesContent":["import type { AnchorHTMLAttributes, HTMLAttributes } from \"react\";\n\nexport interface TaglineProps extends HTMLAttributes<HTMLElement> {\n /** Optional override for the anchor's href. Defaults to \"https://dengankarya.com\". */\n href?: string;\n /** Any attributes to spread onto the <a> tag itself. */\n anchorProps?: AnchorHTMLAttributes<HTMLAnchorElement>;\n}\n\nexport function Tagline({\n href = \"https://dengankarya.com\",\n anchorProps,\n ...props\n}: TaglineProps) {\n return (\n <footer {...props}>\n Thoughtfully crafted by{\" \"}\n <a href={href} {...anchorProps}>\n dengankarya.com\n </a>\n </footer>\n );\n}\n"]}
package/dist/index.d.cts ADDED
@@ -0,0 +1,12 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { HTMLAttributes, AnchorHTMLAttributes } from 'react';
3
+
4
+ interface TaglineProps extends HTMLAttributes<HTMLElement> {
5
+ /** Optional override for the anchor's href. Defaults to "https://dengankarya.com". */
6
+ href?: string;
7
+ /** Any attributes to spread onto the <a> tag itself. */
8
+ anchorProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
9
+ }
10
+ declare function Tagline({ href, anchorProps, ...props }: TaglineProps): react_jsx_runtime.JSX.Element;
11
+
12
+ export { Tagline, type TaglineProps };
package/dist/index.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { HTMLAttributes, AnchorHTMLAttributes } from 'react';
3
+
4
+ interface TaglineProps extends HTMLAttributes<HTMLElement> {
5
+ /** Optional override for the anchor's href. Defaults to "https://dengankarya.com". */
6
+ href?: string;
7
+ /** Any attributes to spread onto the <a> tag itself. */
8
+ anchorProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
9
+ }
10
+ declare function Tagline({ href, anchorProps, ...props }: TaglineProps): react_jsx_runtime.JSX.Element;
11
+
12
+ export { Tagline, type TaglineProps };
package/dist/index.js ADDED
@@ -0,0 +1,18 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+
3
+ // src/components/Tagline/Tagline.tsx
4
+ function Tagline({
5
+ href = "https://dengankarya.com",
6
+ anchorProps,
7
+ ...props
8
+ }) {
9
+ return /* @__PURE__ */ jsxs("footer", { ...props, children: [
10
+ "Thoughtfully crafted by",
11
+ " ",
12
+ /* @__PURE__ */ jsx("a", { href, ...anchorProps, children: "dengankarya.com" })
13
+ ] });
14
+ }
15
+
16
+ export { Tagline };
17
+ //# sourceMappingURL=index.js.map
18
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Tagline/Tagline.tsx"],"names":[],"mappings":";;;AASO,SAAS,OAAA,CAAQ;AAAA,EACtB,IAAA,GAAO,yBAAA;AAAA,EACP,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,uBACE,IAAA,CAAC,QAAA,EAAA,EAAQ,GAAG,KAAA,EAAO,QAAA,EAAA;AAAA,IAAA,yBAAA;AAAA,IACO,GAAA;AAAA,oBACxB,GAAA,CAAC,GAAA,EAAA,EAAE,IAAA,EAAa,GAAG,aAAa,QAAA,EAAA,iBAAA,EAEhC;AAAA,GAAA,EACF,CAAA;AAEJ","file":"index.js","sourcesContent":["import type { AnchorHTMLAttributes, HTMLAttributes } from \"react\";\n\nexport interface TaglineProps extends HTMLAttributes<HTMLElement> {\n /** Optional override for the anchor's href. Defaults to \"https://dengankarya.com\". */\n href?: string;\n /** Any attributes to spread onto the <a> tag itself. */\n anchorProps?: AnchorHTMLAttributes<HTMLAnchorElement>;\n}\n\nexport function Tagline({\n href = \"https://dengankarya.com\",\n anchorProps,\n ...props\n}: TaglineProps) {\n return (\n <footer {...props}>\n Thoughtfully crafted by{\" \"}\n <a href={href} {...anchorProps}>\n dengankarya.com\n </a>\n </footer>\n );\n}\n"]}
package/package.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "name": "dengankarya-ui",
3
+ "version": "0.1.0",
4
+ "description": "Reusable React component library by dengankarya.com",
5
+ "author": "dengankarya.com",
6
+ "license": "MIT",
7
+ "type": "module",
8
+ "main": "./dist/index.cjs",
9
+ "module": "./dist/index.js",
10
+ "types": "./dist/index.d.ts",
11
+ "exports": {
12
+ ".": {
13
+ "import": {
14
+ "types": "./dist/index.d.ts",
15
+ "default": "./dist/index.js"
16
+ },
17
+ "require": {
18
+ "types": "./dist/index.d.cts",
19
+ "default": "./dist/index.cjs"
20
+ }
21
+ }
22
+ },
23
+ "files": [
24
+ "dist"
25
+ ],
26
+ "peerDependencies": {
27
+ "react": ">=18.0.0",
28
+ "react-dom": ">=18.0.0"
29
+ },
30
+ "devDependencies": {
31
+ "@types/react": "^19.0.0",
32
+ "@types/react-dom": "^19.0.0",
33
+ "react": "^19.0.0",
34
+ "react-dom": "^19.0.0",
35
+ "tsup": "^8.0.0",
36
+ "typescript": "^5.7.0"
37
+ },
38
+ "engines": {
39
+ "node": ">=18.0.0",
40
+ "pnpm": ">=9.0.0"
41
+ },
42
+ "scripts": {
43
+ "build": "tsup",
44
+ "dev": "tsup --watch"
45
+ }
46
+ }