sawyer-ui 0.0.0-stage → 0.4.0

package/README.md

@@ -1,3 +1,109 @@
-# Temporary Holding Version
+# sawyer-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Ui-Kit для Next.js на React и [Mantine](https://mantine.dev/). Документация и примеры компонентов — в Storybook: [anton-sergeenkov.github.io/sawyer-ui](https://anton-sergeenkov.github.io/sawyer-ui/)
+
+## Установка
+
+```bash
+npm install sawyer-ui
+```
+
+В приложении должны быть установлены `next` версии 15 и выше, `react` и `react-dom` версии 19.2 и выше (peerDependencies). Mantine (`@mantine/core`, `@mantine/hooks`), иконки [Phosphor](https://phosphoricons.com/) (`@phosphor-icons/react`) и `classnames` устанавливаются вместе с пакетом.
+
+Версия Mantine в пакете закреплена точно: CSS Mantine собран в `sawyer-ui/styles.css`, и имена классов в нём должны совпадать с установленным JS Mantine.
+
+## Подключение
+
+Шрифт, стили пакета (CSS-переменные, базовые глобальные стили, стили Mantine и компонентов) и провайдер `UiProvider` подключаются один раз — в корневом layout приложения:
+
+```tsx
+// app/layout.tsx (Next.js, App Router)
+import { UiProvider } from "sawyer-ui"
+import { robotoRegular } from "sawyer-ui/fonts"
+import "sawyer-ui/styles.css"
+
+const RootLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <html lang="en" className={robotoRegular.className}>
+    <body>
+      <UiProvider>{children}</UiProvider>
+    </body>
+  </html>
+)
+
+export default RootLayout
+```
+
+`UiProvider` — провайдер Mantine (`MantineProvider`) с темой sawyer-ui: без него компоненты пакета не работают.
+
+Стили Mantine лежат в `@layer mantine`, поэтому любые стили приложения без слоя переопределяют их независимо от порядка подключения. Глобальный сброс Mantine (`baseline.css`, стили `body`) в пакет не входит — базовые стили задаёт sawyer-ui.
+
+Чтобы `className`, переданный компоненту со страницы, переопределял стили пакета, CSS должен подключаться в порядке импорта. По умолчанию Next.js объединяет CSS-файлы и может поставить стили пакета из layout после стилей страницы, поэтому в `next.config.js` включается строгий порядок:
+
+```js
+// next.config.js
+const nextConfig = {
+  experimental: {
+    cssChunking: "strict",
+  },
+}
+```
+
+Компоненты, хуки и типы импортируются из пакета по имени:
+
+```tsx
+import { UiLayoutSection, UiHeaderSection, UiChips } from "sawyer-ui"
+import type { IMenuItem, IStaticImageData } from "sawyer-ui"
+```
+
+Все компоненты пакета клиентские (бандл помечен директивой `"use client"`), поэтому их можно импортировать и в серверных компонентах Next.js.
+
+## Шрифты
+
+Шрифты Roboto (latin и cyrillic) подключаются через `next/font/google` и экспортируются из отдельной точки входа `sawyer-ui/fonts`:
+
+```ts
+import { robotoThin, robotoLight, robotoRegular } from "sawyer-ui/fonts" // 100, 300, 400
+```
+
+```tsx
+<span className={robotoThin.className}>Text</span>
+```
+
+`sawyer-ui/fonts` собран без `"use client"`, поэтому шрифты можно использовать и в серверных компонентах, например в `app/layout.tsx`.
+
+## Иконки
+
+Компоненты используют иконки [Phosphor](https://phosphoricons.com/) (`@phosphor-icons/react`). Иконку можно передать и в проп компонента, например `endIcon` у `UiButton`: для этого приложению нужно установить `@phosphor-icons/react` (или другой набор иконок).
+
+```ts
+import { ArrowCircleDown } from "@phosphor-icons/react"
+```
+
+```tsx
+<UiButton endIcon={<ArrowCircleDown weight="bold" />} onClick={onClick}>
+  Download
+</UiButton>
+```
+
+## Навигация
+
+`UiMenuItemRoutes` и `UiMenuItemGroup` с `type="routes"` используют `Link` из `next/link` и `usePathname()` из `next/navigation`: переход по пунктам меню идёт без перезагрузки страницы, активный пункт подсвечивается по текущему пути.
+
+```tsx
+<UiMenuItemRoutes
+  theme="light-blue"
+  item={{ title: "Stack", path: "/stack" }}
+/>
+```
+
+## Разработка
+
+```bash
+npm i                 # установка зависимостей
+npm run storybook     # Storybook для Next.js (@storybook/nextjs-vite) на http://localhost:6006
+npm run build         # сборка пакета в dist: index.js, fonts.js, styles.css и типы
+npm run lint          # ESLint
+npm run deploy        # сборка Storybook и публикация на GitHub Pages
+```
+
+Публикация новой версии: увеличить `version` в `package.json` и выполнить `npm publish` — перед публикацией автоматически запустится `npm run build`.

package/dist/fonts.d.ts

@@ -0,0 +1,4 @@
+export declare const robotoThin: import("next/dist/compiled/@next/font").NextFont;
+export declare const robotoLight: import("next/dist/compiled/@next/font").NextFont;
+export declare const robotoRegular: import("next/dist/compiled/@next/font").NextFont;
+//# sourceMappingURL=fonts.d.ts.map

package/dist/fonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../src/fonts.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,kDAIrB,CAAA;AAEF,eAAO,MAAM,WAAW,kDAItB,CAAA;AAEF,eAAO,MAAM,aAAa,kDAIxB,CAAA"}

package/dist/fonts.js

@@ -0,0 +1,18 @@
+import { Roboto } from "next/font/google";
+// src/fonts.ts
+const robotoThin = Roboto({
+	weight: "100",
+	subsets: ["latin", "cyrillic"],
+	display: "swap"
+});
+const robotoLight = Roboto({
+	weight: "300",
+	subsets: ["latin", "cyrillic"],
+	display: "swap"
+});
+const robotoRegular = Roboto({
+	weight: "400",
+	subsets: ["latin", "cyrillic"],
+	display: "swap"
+});
+export { robotoLight, robotoRegular, robotoThin };

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+import { useMobile } from "./useMobile";
+export { useMobile };
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/hooks/useMobile.d.ts

@@ -0,0 +1,2 @@
+export declare const useMobile: () => boolean;
+//# sourceMappingURL=useMobile.d.ts.map

package/dist/hooks/useMobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMobile.d.ts","sourceRoot":"","sources":["../../src/hooks/useMobile.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,SAAS,eAgBrB,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+import "./styles/mantine.css";
+import "./styles/tokens.css";
+import "./styles/globals.css";
+export { default as UiProvider } from "./provider/UiProvider";
+export { default as UiChips } from "./ui/basic/UiChips";
+export { default as UiLink } from "./ui/basic/UiLink";
+export { default as UiModal } from "./ui/basic/UiModal";
+export { default as UiTypography } from "./ui/basic/UiTypography";
+export { default as UiTextGradient } from "./ui/basic/UiTextGradient";
+export { default as UiHeaderSection } from "./ui/basic/UiHeaderSection";
+export { default as UiDetails } from "./ui/basic/UiDetails";
+export { default as UiJsonFormatter } from "./ui/basic/UiJsonFormatter";
+export { default as UiAlert } from "./ui/basic/UiAlert";
+export { default as UiAlertSimple } from "./ui/basic/UiAlertSimple";
+export { default as UiList } from "./ui/basic/UiList";
+export { default as UiTable, UiTableRecord } from "./ui/basic/UiTable";
+export { default as UiTabs } from "./ui/basic/UiTabs";
+export { default as UiButton } from "./ui/form/UiButton";
+export { default as UiInput } from "./ui/form/UiInput";
+export { default as UiSelect } from "./ui/form/UiSelect";
+export { default as UiLayoutCards } from "./ui/layout/UiLayoutCards";
+export { default as UiLayoutSection } from "./ui/layout/UiLayoutSection";
+export { default as UiLayoutPaper } from "./ui/layout/UiLayoutPaper";
+export { default as UiLayoutHeader } from "./ui/layout/UiLayoutHeader";
+export { default as UiMenuItemGroup } from "./ui/menu/UiMenuItemGroup";
+export { default as UiMenuItemHash } from "./ui/menu/UiMenuItemHash";
+export { default as UiMenuItemRoutes } from "./ui/menu/UiMenuItemRoutes";
+export { default as UiMenuNavButton } from "./ui/menu/UiMenuNavButton";
+export { default as UiOptions } from "./ui/surfaces/UiOptions";
+export { default as UiSocialLinks } from "./ui/surfaces/UiSocialLinks";
+export { useMobile } from "./hooks";
+export type { IUiLayoutCardsItems } from "./ui/layout/UiLayoutCards";
+export type { IUiSocialLinksList } from "./ui/surfaces/UiSocialLinks";
+export type { IUiSelectItem } from "./ui/form/UiSelect";
+export type { IUiTableData, IUiTableRecordRow } from "./ui/basic/UiTable";
+export type { IUiTabsData } from "./ui/basic/UiTabs";
+export type { IStaticImageData, IMenuItem, IListCommon, TOnClick, } from "./types/common";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,qBAAqB,CAAA;AAC5B,OAAO,sBAAsB,CAAA;AAG7B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,4BAA4B,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAExD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAEtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AACxE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAEtE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAGtE,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAGnC,YAAY,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAA;AACpE,YAAY,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AACrE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AACvD,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACzE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AACpD,YAAY,EACV,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,QAAQ,GACT,MAAM,gBAAgB,CAAA"}