@smartyweb/ui 1.0.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 +126 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +18 -0
- package/dist/text/H1/H1.d.ts +6 -0
- package/dist/text/H1/index.d.ts +1 -0
- package/dist/text/HExtra/HExtra.d.ts +7 -0
- package/dist/text/HExtra/index.d.ts +2 -0
- package/dist/text/index.d.ts +2 -0
- package/dist/ui.css +1 -0
- package/package.json +47 -0
package/README.md
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
# @smartyweb/ui
|
|
2
|
+
|
|
3
|
+
Shared React component library consumed by multiple Next.js microservices via private npm.
|
|
4
|
+
|
|
5
|
+
## Stack
|
|
6
|
+
|
|
7
|
+
- React 19, TypeScript, SCSS Modules
|
|
8
|
+
- Vite (outputs ESM + CJS + types to `dist/`)
|
|
9
|
+
- Storybook v10 for component development and documentation
|
|
10
|
+
- Changesets for versioning and changelogs
|
|
11
|
+
|
|
12
|
+
## Getting Started
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
### Development
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm run storybook
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Build
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm run build
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
Install the package in your consuming app:
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm install @smartyweb/ui
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Import styles once in your app's entry point:
|
|
39
|
+
|
|
40
|
+
```js
|
|
41
|
+
import "@smartyweb/ui/styles.css";
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Then import components:
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
import { Button } from "@smartyweb/ui";
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Project Structure
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
src/
|
|
54
|
+
components/
|
|
55
|
+
ComponentName/
|
|
56
|
+
ComponentName.tsx # "use client" at top
|
|
57
|
+
ComponentName.module.scss
|
|
58
|
+
ComponentName.stories.tsx
|
|
59
|
+
index.ts # named export
|
|
60
|
+
index.ts # barrel export
|
|
61
|
+
styles/
|
|
62
|
+
_variables.scss
|
|
63
|
+
_mixins.scss
|
|
64
|
+
global.scss
|
|
65
|
+
index.ts # main entry point
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Publishing
|
|
69
|
+
|
|
70
|
+
This package uses [Changesets](https://github.com/changesets/changesets) for versioning and changelog management.
|
|
71
|
+
|
|
72
|
+
### 1. Document your changes (on your feature branch)
|
|
73
|
+
|
|
74
|
+
After making changes, create a changeset to describe what changed and the bump type (patch/minor/major):
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
npm run changeset
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
This opens an interactive prompt. Select the bump type and write a summary. Commit the generated `.changeset/*.md` file along with your code changes.
|
|
81
|
+
|
|
82
|
+
### 2. Version the package (on master, before publishing)
|
|
83
|
+
|
|
84
|
+
After merging your feature branch, bump the version and update `CHANGELOG.md`:
|
|
85
|
+
|
|
86
|
+
```bash
|
|
87
|
+
npx changeset version
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
Commit the result:
|
|
91
|
+
|
|
92
|
+
```bash
|
|
93
|
+
git add .
|
|
94
|
+
git commit -m "chore: version bump"
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### 3. Publish to npm
|
|
98
|
+
|
|
99
|
+
Make sure your npm token is set, then build and publish:
|
|
100
|
+
|
|
101
|
+
```bash
|
|
102
|
+
NPM_TOKEN=<your-token> npm run build && NPM_TOKEN=<your-token> npm run release
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
Or set it once for the session:
|
|
106
|
+
|
|
107
|
+
```bash
|
|
108
|
+
export NPM_TOKEN=<your-token>
|
|
109
|
+
npm run build && npm run release
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
`npm run release` runs `changeset publish`, which publishes any packages whose version in `package.json` is not yet on the registry.
|
|
113
|
+
|
|
114
|
+
### 4. Push the version commit and tags
|
|
115
|
+
|
|
116
|
+
```bash
|
|
117
|
+
git push && git push --tags
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Architecture
|
|
121
|
+
|
|
122
|
+
- **Component library only** — no routing, no pages, no app logic.
|
|
123
|
+
- **All components include `"use client"`** for compatibility with Next.js App Router and Pages Router.
|
|
124
|
+
- **CSS is compiled to a single file at build time.** No runtime CSS injection.
|
|
125
|
+
- **React is a peerDependency**, not bundled.
|
|
126
|
+
- **Stories are co-located with components.**
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o="_hExtra_1on9j_1",a={hExtra:o};function c({as:s="h1",children:t,className:e}){const r=[a.hExtra,e].filter(Boolean).join(" ");return n.jsx(s,{className:r,children:t})}const h="_h1_ilnrk_1",i={h1:h};function l({children:s,className:t}){return n.jsx("h1",{className:`${i.h1}${t?` ${t}`:""}`,children:s})}exports.H1=l;exports.HExtra=c;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './text';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
const a = "_hExtra_1on9j_1", h = {
|
|
3
|
+
hExtra: a
|
|
4
|
+
};
|
|
5
|
+
function x({ as: s = "h1", children: t, className: o }) {
|
|
6
|
+
const r = [h.hExtra, o].filter(Boolean).join(" ");
|
|
7
|
+
return /* @__PURE__ */ n(s, { className: r, children: t });
|
|
8
|
+
}
|
|
9
|
+
const c = "_h1_ilnrk_1", e = {
|
|
10
|
+
h1: c
|
|
11
|
+
};
|
|
12
|
+
function i({ children: s, className: t }) {
|
|
13
|
+
return /* @__PURE__ */ n("h1", { className: `${e.h1}${t ? ` ${t}` : ""}`, children: s });
|
|
14
|
+
}
|
|
15
|
+
export {
|
|
16
|
+
i as H1,
|
|
17
|
+
x as HExtra
|
|
18
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { H1 } from './H1';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface HExtraProps {
|
|
3
|
+
as?: "h1" | "h2" | "h3" | "span";
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare function HExtra({ as: Tag, children, className }: HExtraProps): import("react/jsx-runtime").JSX.Element;
|
package/dist/ui.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._hExtra_1on9j_1{font-family:TT Hoves Pro,sans-serif;font-weight:600;font-size:96px;line-height:106px;letter-spacing:-.03em;font-feature-settings:"dlig" 1;margin:0}._h1_ilnrk_1{font-family:TT Hoves Pro,sans-serif;font-weight:500;font-size:64px;line-height:64px;letter-spacing:-.02em;font-feature-settings:"dlig" 1;margin:0}
|
package/package.json
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@smartyweb/ui",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Shared React component library",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "dist/index.cjs",
|
|
7
|
+
"module": "dist/index.js",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.js",
|
|
13
|
+
"require": "./dist/index.cjs"
|
|
14
|
+
},
|
|
15
|
+
"./styles.css": "./dist/ui.css"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist"
|
|
19
|
+
],
|
|
20
|
+
"scripts": {
|
|
21
|
+
"build": "vite build",
|
|
22
|
+
"typecheck": "tsc --noEmit",
|
|
23
|
+
"changeset": "changeset",
|
|
24
|
+
"release": "changeset publish",
|
|
25
|
+
"storybook": "storybook dev -p 6006",
|
|
26
|
+
"build-storybook": "storybook build"
|
|
27
|
+
},
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"react": "^19.0.0",
|
|
30
|
+
"react-dom": "^19.0.0"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@changesets/cli": "^2.29.8",
|
|
34
|
+
"@storybook/react-vite": "^10.2.8",
|
|
35
|
+
"@types/react": "^19.2.13",
|
|
36
|
+
"@types/react-dom": "^19.2.3",
|
|
37
|
+
"@vitejs/plugin-react": "^5.1.3",
|
|
38
|
+
"prettier": "^3.8.1",
|
|
39
|
+
"react": "^19.2.4",
|
|
40
|
+
"react-dom": "^19.2.4",
|
|
41
|
+
"sass": "^1.97.3",
|
|
42
|
+
"storybook": "^10.2.8",
|
|
43
|
+
"typescript": "^5.9.3",
|
|
44
|
+
"vite": "^7.3.1",
|
|
45
|
+
"vite-plugin-dts": "^4.5.4"
|
|
46
|
+
}
|
|
47
|
+
}
|