@phpsoftbox/react-softbox 0.1.1 → 0.3.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 (52) hide show
  1. package/README.md +8 -3
  2. package/dist/components/Badge/Badge.module.css +12 -12
  3. package/dist/components/Button/Button.d.ts +3 -1
  4. package/dist/components/Button/Button.js +16 -17
  5. package/dist/components/Button/Button.js.map +1 -1
  6. package/dist/components/FileUploader/FileUploader.d.ts +22 -0
  7. package/dist/components/FileUploader/FileUploader.js +156 -0
  8. package/dist/components/FileUploader/FileUploader.js.map +1 -0
  9. package/dist/components/FileUploader/FileUploader.module.css +142 -0
  10. package/dist/components/Image/Image.d.ts +7 -0
  11. package/dist/components/Image/Image.js +15 -0
  12. package/dist/components/Image/Image.js.map +1 -0
  13. package/dist/components/Image/Image.module.css +17 -0
  14. package/dist/components/Input/Checkbox/Checkbox.d.ts +8 -0
  15. package/dist/components/Input/Checkbox/Checkbox.js +15 -0
  16. package/dist/components/Input/Checkbox/Checkbox.js.map +1 -0
  17. package/dist/components/Input/Checkbox/Checkbox.module.css +105 -0
  18. package/dist/components/Input/FloatLabel/FloatLabel.module.css +18 -4
  19. package/dist/components/Input/Input.d.ts +2 -0
  20. package/dist/components/Input/Input.js +2 -0
  21. package/dist/components/Input/Input.js.map +1 -1
  22. package/dist/components/Input/NumberInput.d.ts +3 -1
  23. package/dist/components/Input/NumberInput.js +97 -28
  24. package/dist/components/Input/NumberInput.js.map +1 -1
  25. package/dist/components/Input/Select/Select.js +1 -1
  26. package/dist/components/Input/Select/Select.js.map +1 -1
  27. package/dist/components/Menu/Dropdown.d.ts +36 -3
  28. package/dist/components/Menu/Dropdown.js +71 -3
  29. package/dist/components/Menu/Dropdown.js.map +1 -1
  30. package/dist/components/Menu/Menu.d.ts +4 -1
  31. package/dist/components/Menu/Menu.js +10 -3
  32. package/dist/components/Menu/Menu.js.map +1 -1
  33. package/dist/components/Menu/Menu.module.css +50 -4
  34. package/dist/components/Table/Table.d.ts +56 -0
  35. package/dist/components/Table/Table.js +199 -0
  36. package/dist/components/Table/Table.js.map +1 -0
  37. package/dist/components/Table/Table.module.css +203 -0
  38. package/dist/{components/Button/Button.module.css → foundations/buttons.css} +47 -19
  39. package/dist/foundations/index.css +2 -0
  40. package/dist/foundations/tokens.css +31 -22
  41. package/dist/foundations/utilities.css +675 -0
  42. package/dist/index.d.ts +5 -0
  43. package/dist/index.js +4 -0
  44. package/dist/index.js.map +1 -1
  45. package/docs/README.md +2 -1
  46. package/docs/forms.md +36 -0
  47. package/docs/layout.md +31 -0
  48. package/docs/media.md +12 -0
  49. package/docs/navigation.md +29 -1
  50. package/docs/theme.md +28 -0
  51. package/docs/typography.md +11 -0
  52. package/package.json +5 -1
package/docs/forms.md CHANGED
@@ -41,6 +41,13 @@
41
41
  <Input.Radio name="mode" label="Резервный" />
42
42
  ```
43
43
 
44
+ ## Checkbox
45
+
46
+ ```tsx
47
+ <Input.Checkbox label="Согласен с условиями" />
48
+ <Input.Checkbox label="Премиум" description="Расширенные права" />
49
+ ```
50
+
44
51
  ## Switch
45
52
 
46
53
  ```tsx
@@ -124,6 +131,15 @@ const options = [
124
131
  </Input>
125
132
  ```
126
133
 
134
+ Дополнительно можно задать `min`, `max`, `allowNegative`, `decimalScale`:
135
+
136
+ ```tsx
137
+ <Input>
138
+ <Input.Label>Скидка</Input.Label>
139
+ <Input.Number min={0} max={100} decimalScale={0} />
140
+ </Input>
141
+ ```
142
+
127
143
  ## Date / Time
128
144
 
129
145
  ```tsx
@@ -164,3 +180,23 @@ const options = [
164
180
  </Input.Group>
165
181
  </Input>
166
182
  ```
183
+
184
+ ## FileUploader
185
+
186
+ ```tsx
187
+ <FileUploader
188
+ allowedTypes={['.jpg', '.png', '.pdf']}
189
+ maxFileSizeKb={2048}
190
+ multiple
191
+ showPreview
192
+ onChange={(files) => console.log(files)}
193
+ onUpload={(files) => api.upload(files)}
194
+ />;
195
+ ```
196
+
197
+ Параметры:
198
+ - `allowedTypes` — допустимые типы (расширения `.png` или MIME `image/*`)
199
+ - `maxFileSizeKb` — ограничение размера
200
+ - `multiple` — разрешить множественный выбор
201
+ - `showPreview` — превью для изображений
202
+ - `onUpload` — колбэк загрузки (опционально)
package/docs/layout.md CHANGED
@@ -37,3 +37,34 @@
37
37
  - `gap` — шаг между элементами
38
38
  - `align`, `justify` — соответствуют flex‑свойствам
39
39
  - `wrap` — управление переносом для `Row`
40
+
41
+ ## Утилитарные отступы
42
+
43
+ Глобальные классы для отступов и gap основаны на `--spacing-1…10`.
44
+
45
+ ```tsx
46
+ <div className="p-4">Внутренний отступ</div>
47
+ <div className="px-6 py-3">Отступы по осям</div>
48
+ <div className="gap-3">Gap для flex/grid контейнера</div>
49
+ ```
50
+
51
+ Доступны варианты:
52
+ - `p-`, `px-`, `py-`, `pt-`, `pr-`, `pb-`, `pl-`
53
+ - `m-`, `mx-`, `my-`, `mt-`, `mr-`, `mb-`, `ml-`
54
+ - `gap-`
55
+
56
+ ## Классы кнопок
57
+
58
+ Глобальные классы для кнопок, которые можно применять к `a`/`button`.
59
+
60
+ ```tsx
61
+ <a className="btn btn-primary btn-solid" href="/create">Создать</a>
62
+ <a className="btn btn-info btn-outline" href="/details">Подробнее</a>
63
+ <button className="btn btn-danger btn-ghost">Удалить</button>
64
+ ```
65
+
66
+ Доступны:
67
+ - базовый класс: `btn`
68
+ - варианты: `btn-default`, `btn-primary`, `btn-info`, `btn-success`, `btn-warning`, `btn-danger`
69
+ - внешность: `btn-solid`, `btn-outline`, `btn-ghost`
70
+ - размеры: `btn-sm`, `btn-md`, `btn-lg`
package/docs/media.md ADDED
@@ -0,0 +1,12 @@
1
+ # Media
2
+
3
+ ## Image
4
+
5
+ `Image` — обертка над `<img>` с преднастроенными вариантами скругления.
6
+
7
+ ```tsx
8
+ <Image src="/images/avatar.png" alt="Avatar" width={64} height={64} />
9
+ <Image src="/images/avatar.png" alt="Avatar" width={64} height={64} shape="circle" />
10
+ ```
11
+
12
+ По умолчанию используется `shape="rounded"`.
package/docs/navigation.md CHANGED
@@ -64,7 +64,35 @@ const topMenu = [
64
64
  Отдельный dropdown‑компонент, если нужен произвольный триггер.
65
65
 
66
66
  ```tsx
67
- <Dropdown trigger={<span>Открыть</span>} items={items} orientation="vertical" align="left" />
67
+ <Dropdown trigger={<span>Открыть</span>} orientation="vertical" align="left">
68
+ <Dropdown.Header>Профиль</Dropdown.Header>
69
+ <Dropdown.Item>Настройки</Dropdown.Item>
70
+ <Dropdown.Separator />
71
+ <Dropdown.Item href="/logout">Выход</Dropdown.Item>
72
+ </Dropdown>
73
+ ```
74
+
75
+ Для ширины dropdown используйте `Dropdown.Nav`:
76
+
77
+ ```tsx
78
+ <Dropdown
79
+ trigger={<Button appearance="outline">Профиль</Button>}
80
+ align="right"
81
+ >
82
+ <Dropdown.Nav className="dropdownWide">
83
+ <Dropdown.Header className="f-6">Профиль</Dropdown.Header>
84
+ <Dropdown.Item static>Строка без кнопки</Dropdown.Item>
85
+ </Dropdown.Nav>
86
+ </Dropdown>
87
+ ```
88
+
89
+ Если нужен не кликабельный текст внутри списка, используйте `Dropdown.Item` с `static`.
90
+
91
+ ```tsx
92
+ <Dropdown trigger={<span>Открыть</span>}>
93
+ <Dropdown.Header>Уведомления</Dropdown.Header>
94
+ <Dropdown.Item static>Пока пусто</Dropdown.Item>
95
+ </Dropdown>
68
96
  ```
69
97
 
70
98
  ## CollapseButton
package/docs/theme.md CHANGED
@@ -47,3 +47,31 @@ setThemeMode('dark', { storageKey: 'my-app-theme' });
47
47
  ```html
48
48
  <html data-theme="light"></html>
49
49
  ```
50
+
51
+ ## Кастомизация тем
52
+
53
+ Все цвета и размеры задаются через CSS‑переменные в `tokens.css`.
54
+ Можно переопределить их в своем CSS:
55
+
56
+ ```css
57
+ :root {
58
+ --color-text: #0b1626;
59
+ --surface-panel: rgba(255, 255, 255, 0.98);
60
+ --radius-md: 14px;
61
+ --spacing-4: 18px;
62
+ }
63
+
64
+ :root[data-theme="light"] {
65
+ --color-text: #0b1626;
66
+ --surface-panel: rgba(255, 255, 255, 0.98);
67
+ }
68
+
69
+ :root[data-theme="dark"] {
70
+ --color-text: #e6f0ff;
71
+ --surface-panel: rgba(12, 24, 42, 0.98);
72
+ }
73
+ ```
74
+
75
+ Рекомендуемый подход:
76
+ 1. Скопировать нужные переменные из `packages-js/ReactSoftBox/src/foundations/tokens.css`.
77
+ 2. Переопределить только отличающиеся значения в своём CSS (до инициализации темы).
package/docs/typography.md CHANGED
@@ -24,3 +24,14 @@
24
24
  ```
25
25
 
26
26
  Поддерживаемые варианты: `default`, `primary`, `info`, `success`, `warning`, `danger`.
27
+
28
+ ## Утилитарные классы размера
29
+
30
+ Можно задавать размер шрифта через классы `f-1`…`f-9`.
31
+
32
+ ```tsx
33
+ <Dropdown.Header className="f-6">Уведомления</Dropdown.Header>
34
+ <Text className="f-3">Подпись</Text>
35
+ ```
36
+
37
+ Шкала (px): `11, 12, 13, 14, 16, 18, 20, 24, 28`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phpsoftbox/react-softbox",
3
- "version": "0.1.1",
3
+ "version": "0.3.0",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -42,6 +42,10 @@
42
42
  "axios": "^1.12.2"
43
43
  },
44
44
  "devDependencies": {
45
+ "@testing-library/dom": "^10.4.1",
46
+ "@testing-library/jest-dom": "^6.9.1",
47
+ "@testing-library/react": "^16.3.2",
48
+ "@types/jest": "^30.0.0",
45
49
  "@types/react": "^19.2.0",
46
50
  "@types/react-dom": "^19.2.0",
47
51
  "typescript": "^5.9.3"