@stamcat/craftsman 0.0.23 → 0.0.25
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 +49 -2
- package/package.json +1 -1
- package/src/components/Button.esm.js +8 -8
- package/src/components/Input.esm.js +14 -14
- package/src/components/Loader.esm.js +6 -6
package/README.md
CHANGED
|
@@ -1,5 +1,52 @@
|
|
|
1
1
|
# @stamcat/craftsman
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Craftsman design system components and styling utilities.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @stamcat/craftsman
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## RSC-safe setup
|
|
12
|
+
|
|
13
|
+
Use this pattern in React Server Component architectures (for example Next.js App Router):
|
|
14
|
+
|
|
15
|
+
1. Import package global styles once at the application root.
|
|
16
|
+
2. Render `ThemeProvider` at the root with your theme object.
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
import { ThemeProvider } from "@stamcat/craftsman/styles";
|
|
20
|
+
import "@stamcat/craftsman/styles";
|
|
21
|
+
|
|
22
|
+
const appTheme = {
|
|
23
|
+
root: {
|
|
24
|
+
"--w-gutter": "16px",
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
29
|
+
return (
|
|
30
|
+
<html lang="en">
|
|
31
|
+
<body>
|
|
32
|
+
<ThemeProvider theme={appTheme}>{children}</ThemeProvider>
|
|
33
|
+
</body>
|
|
34
|
+
</html>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Component imports
|
|
40
|
+
|
|
41
|
+
Use component entry points:
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import { Button } from "@stamcat/craftsman/Button";
|
|
45
|
+
import { Input } from "@stamcat/craftsman/Input";
|
|
46
|
+
import { Modal } from "@stamcat/craftsman/Modal";
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Styling notes
|
|
50
|
+
|
|
51
|
+
- `ThemeProvider` injects theme CSS variables and component override rules.
|
|
52
|
+
- Global styles should be loaded once at app root.
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { width as n } from "../styles/utilities/layout.esm.js";
|
|
1
|
+
import { isEmpty as e } from "../utilities/validations.esm.js";
|
|
2
|
+
import { width as t } from "../styles/utilities/layout.esm.js";
|
|
4
3
|
import "../../Styles.esm.js";
|
|
5
|
-
import
|
|
4
|
+
import n from "./Button.module.esm.js";
|
|
5
|
+
import r from "clsx";
|
|
6
6
|
import { Fragment as i, jsx as a } from "react/jsx-runtime";
|
|
7
7
|
//#region src/components/Button.tsx
|
|
8
8
|
var o = (o) => {
|
|
9
|
-
let { type: s = "button", variant: c = "default", size: l, styles: u, className: d, style: f, ...p } = o, m = typeof l == "number" ? Math.min(10, Math.max(.1, l)) : void 0, h =
|
|
9
|
+
let { type: s = "button", variant: c = "default", size: l, styles: u, className: d, style: f, ...p } = o, m = typeof l == "number" ? Math.min(10, Math.max(.1, l)) : void 0, h = e(u) ? void 0 : u, g = m ? {
|
|
10
10
|
borderRadius: `calc(var(--btn-border-radius) * ${m})`,
|
|
11
11
|
padding: `calc(var(--btn-pad-y) * ${m}) calc(var(--btn-pad-x) * ${m})`,
|
|
12
|
-
fontSize: `max(10px, calc(${
|
|
12
|
+
fontSize: `max(10px, calc(${t("text")} * ${m}))`
|
|
13
13
|
} : {};
|
|
14
|
-
return
|
|
14
|
+
return e(o.children) ? /* @__PURE__ */ a(i, {}) : /* @__PURE__ */ a("button", {
|
|
15
15
|
type: s,
|
|
16
16
|
"data-variant": c,
|
|
17
|
-
className:
|
|
17
|
+
className: r(n.button, "button", d),
|
|
18
18
|
style: {
|
|
19
19
|
...g,
|
|
20
20
|
...h,
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import n from "
|
|
1
|
+
import { isEmpty as e } from "../utilities/validations.esm.js";
|
|
2
|
+
import t from "./Input.module.esm.js";
|
|
3
|
+
import n from "clsx";
|
|
4
4
|
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
5
5
|
import { useId as a } from "react";
|
|
6
6
|
//#region src/components/Input.tsx
|
|
7
7
|
var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, type: u = "text", error: d, styles: f, className: p, style: m, endAdornment: h, ...g }) => {
|
|
8
|
-
let _ = a(), v = s || _, y = !
|
|
9
|
-
className:
|
|
10
|
-
"data-has-end-adornment": !
|
|
8
|
+
let _ = a(), v = s || _, y = !e(g.value) || !e(g.defaultValue), b = e(f) ? void 0 : f, x = /* @__PURE__ */ i("span", {
|
|
9
|
+
className: t.inputField,
|
|
10
|
+
"data-has-end-adornment": !e(h),
|
|
11
11
|
children: [/* @__PURE__ */ r("input", {
|
|
12
12
|
id: v,
|
|
13
13
|
type: u,
|
|
14
|
-
className:
|
|
14
|
+
className: t.input,
|
|
15
15
|
...g
|
|
16
|
-
}), !
|
|
17
|
-
className:
|
|
16
|
+
}), !e(h) && /* @__PURE__ */ r("span", {
|
|
17
|
+
className: t.inputAdornment,
|
|
18
18
|
children: h
|
|
19
19
|
})]
|
|
20
20
|
});
|
|
@@ -22,16 +22,16 @@ var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, type: u
|
|
|
22
22
|
"data-label-position": c,
|
|
23
23
|
"data-required": l,
|
|
24
24
|
"data-has-input": y,
|
|
25
|
-
className:
|
|
25
|
+
className: n(t.wrapper, p),
|
|
26
26
|
style: {
|
|
27
27
|
...b,
|
|
28
28
|
...m
|
|
29
29
|
},
|
|
30
|
-
children: [
|
|
31
|
-
className:
|
|
30
|
+
children: [e(o) ? x : /* @__PURE__ */ i("label", { children: [c !== "hidden" && /* @__PURE__ */ r("div", {
|
|
31
|
+
className: t.inputLabel,
|
|
32
32
|
children: o
|
|
33
|
-
}), x] }), !
|
|
34
|
-
className:
|
|
33
|
+
}), x] }), !e(d) && /* @__PURE__ */ r("div", {
|
|
34
|
+
className: t.error,
|
|
35
35
|
children: d
|
|
36
36
|
})]
|
|
37
37
|
});
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import r from "
|
|
1
|
+
import { isEmpty as e } from "../utilities/validations.esm.js";
|
|
2
|
+
import { loaders as t } from "../styles/global/components/loaders.esm.js";
|
|
3
|
+
import n from "../styles/global/components/loaders.module.esm.js";
|
|
4
|
+
import r from "clsx";
|
|
5
5
|
import { jsx as i } from "react/jsx-runtime";
|
|
6
6
|
//#region src/components/Loader.tsx
|
|
7
7
|
var a = (a) => {
|
|
8
|
-
let { type: o, color: s = "black", width: c, styles: l, className: u, style: d, ...f } = a, p =
|
|
8
|
+
let { type: o, color: s = "black", width: c, styles: l, className: u, style: d, ...f } = a, p = e(l) ? void 0 : l, m = t[o](s, c);
|
|
9
9
|
return /* @__PURE__ */ i("div", {
|
|
10
|
-
className:
|
|
10
|
+
className: r(n[o], u),
|
|
11
11
|
style: {
|
|
12
12
|
...m,
|
|
13
13
|
...p,
|