@tetjana/flowmakers-ds 0.1.7 → 0.1.9

package/guidelines/components/widgetcard.md

@@ -0,0 +1,187 @@
+# WidgetCard — Dashboard widget components
+
+## Import
+```tsx
+import {
+  WidgetCard,
+  WidgetHeader,
+  PlatformNewsWidget,
+  GeneralNewsWidget,
+  NotesWidget,
+  PersonalAdviceWidget,
+  CalendarWidget,
+} from '@tetjana/flowmakers-ds';
+import '@tetjana/flowmakers-ds/styles';
+```
+
+---
+
+## WidgetCard — Container wrapper
+
+Wraps a `WidgetHeader` + any widget content.
+
+```tsx
+<WidgetCard
+  header={<WidgetHeader title="Новини платформи" color="purple" />}
+>
+  <PlatformNewsWidget
+    title="Оновлення платформи"
+    text="Нова функція вже доступна"
+  />
+</WidgetCard>
+```
+
+### WidgetCard props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `header` | `ReactNode` | — | `<WidgetHeader>` element |
+| `children` | `ReactNode` | — | Widget content |
+| `width` | `number \| string` | — | Optional fixed width |
+
+---
+
+## WidgetHeader — Widget title bar
+
+```tsx
+// Purple (default)
+<WidgetHeader title="Персональна порада" color="purple" />
+
+// Grey
+<WidgetHeader title="Загальні новини" color="grey" />
+
+// With subtitle and actions
+<WidgetHeader
+  title="Календар"
+  subtitle="Лютий 2024"
+  color="purple"
+  leftAction={<IconButton icon="arrow-left" size="small" />}
+  rightAction={<IconButton icon="arrow-right" size="small" />}
+/>
+```
+
+### WidgetHeader props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | required | Widget title |
+| `subtitle` | `string` | — | Secondary text |
+| `color` | `'purple' \| 'grey'` | `'purple'` | Header background color |
+| `leftAction` | `ReactNode` | — | Icon/button on the left |
+| `rightAction` | `ReactNode` | — | Icon/button on the right |
+
+---
+
+## PlatformNewsWidget — Platform update news item
+
+```tsx
+<PlatformNewsWidget
+  tag={<Tag color="purple">Оновлення</Tag>}
+  title="Нова функція: Аналітика ризиків"
+  text="Тепер ви можете переглядати детальну аналітику своїх ризиків у реальному часі"
+/>
+```
+
+---
+
+## GeneralNewsWidget — Industry news with image
+
+```tsx
+<GeneralNewsWidget
+  image="/news/article-cover.jpg"
+  tag={<Tag color="grey">Ринок праці</Tag>}
+  title="Попит на React-розробників зріс на 40% у 2024 році"
+/>
+```
+
+---
+
+## NotesWidget — Personal notes
+
+```tsx
+<NotesWidget
+  title="Мої нотатки"
+  text="Записати головні думки з лекції про TypeScript generics..."
+  date="21.02.2024"
+/>
+```
+
+---
+
+## PersonalAdviceWidget — AI-generated advice
+
+```tsx
+<PersonalAdviceWidget
+  tag={<Tag color="purple">AI порада</Tag>}
+  text="Пройди тест з TypeScript, щоб підвищити рівень до Middle. Це підвищить твої шанси на ринку праці."
+  action={<Button variant="ghost">Переглянути тест</Button>}
+/>
+```
+
+---
+
+## CalendarWidget — Weekly calendar with events
+
+```tsx
+<CalendarWidget
+  days={[
+    { dayLabel: 'Пн', date: 19 },
+    { dayLabel: 'Вт', date: 20, hasEvent: true },
+    { dayLabel: 'Ср', date: 21, active: true },
+    { dayLabel: 'Чт', date: 22 },
+    { dayLabel: 'Пт', date: 23 },
+    { dayLabel: 'Сб', date: 24 },
+    { dayLabel: 'Нд', date: 25 },
+  ]}
+  events={[
+    { title: 'Менторська сесія', time: '10:00', color: '#9076dc' },
+    { title: 'Вебінар з React',  time: '14:00', color: '#4CAF50' },
+  ]}
+/>
+```
+
+### CalendarDayItem fields
+| Field | Type | Description |
+|-------|------|-------------|
+| `dayLabel` | `string` | Short day name: 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Нд' |
+| `date` | `number` | Day of month |
+| `active` | `boolean` | Highlights today |
+| `hasEvent` | `boolean` | Shows a dot indicator under the date |
+
+### CalendarEvent fields
+| Field | Type | Description |
+|-------|------|-------------|
+| `title` | `string` | Event name |
+| `time` | `string` | Time string, e.g. '14:00' |
+| `color` | `string` | CSS color for the left accent bar |
+
+---
+
+## Dashboard layout example
+
+```tsx
+<div className="dashboard-grid">
+  <WidgetCard header={<WidgetHeader title="Новини платформи" color="purple" />}>
+    <PlatformNewsWidget title="Оновлення" text="..." />
+  </WidgetCard>
+
+  <WidgetCard header={<WidgetHeader title="Загальні новини" color="grey" />}>
+    <GeneralNewsWidget title="Ринок праці" image="/news.jpg" />
+  </WidgetCard>
+
+  <WidgetCard header={<WidgetHeader title="Мої нотатки" color="purple" />}>
+    <NotesWidget title="Нотатка" text="..." date="21.02.2024" />
+  </WidgetCard>
+
+  <WidgetCard header={<WidgetHeader title="Порада" color="purple" />}>
+    <PersonalAdviceWidget text="Пройди тест..." />
+  </WidgetCard>
+
+  <WidgetCard header={<WidgetHeader title="Календар" subtitle="Лютий 2024" color="grey" />}>
+    <CalendarWidget days={[...]} events={[...]} />
+  </WidgetCard>
+</div>
+```
+
+## Rules
+- Always wrap widget content in `<WidgetCard>` with a `<WidgetHeader>`
+- Use `color="purple"` for primary/featured widgets, `color="grey"` for secondary
+- One content component per `WidgetCard` — do not stack multiple widgets inside one card

package/guidelines/design-tokens/colors.md

@@ -6,8 +6,8 @@ All colors are CSS variables. Import `@tetjana/flowmakers-ds/styles` to use them
 | Token                       | Value     | Use for                              |
 |-----------------------------|-----------|--------------------------------------|
 | `--primary-fill-100`        | `#eeecfb` | Light purple backgrounds, tag bg     |
-| `--primary-fill-500`        | `#7d65e1` | Focus rings, active checkboxes       |
-| `--primary-fill-600`        | `#6d45bc` | Hover states on purple elements      |
+| `--primary-fill-500`        | `#9076dc` | Focus rings, active checkboxes       |
+| `--primary-fill-600`        | `#754ccc` | Hover states on purple elements      |
 | `--primary-fill-700`        | `#6d45bc` | Purple tag text                      |
 
 ## Black & White
@@ -29,7 +29,7 @@ All colors are CSS variables. Import `@tetjana/flowmakers-ds/styles` to use them
 | `--pink-fill-300`           | `#ffa8f1` | Hero button hover border             |
 | `--pink-fill-700`           | `#b51692` | Pink tag text                        |
 | `--green-fill-100`          | `#d9f2e7` | Green tag background, success tint   |
-| `--green-fill-500`          | `#27a872` | Success input border                 |
+| `--green-fill-500`          | `#31987f` | Success input border                 |
 | `--green-fill-700`          | `#1b6153` | Green tag text                       |
 | `--yellow-fill-100`         | `#fff0d4` | Yellow tag background, warning tint  |
 | `--yellow-fill-700`         | `#c54e09` | Yellow tag text                      |

package/guidelines/overview-components.md

@@ -3,17 +3,56 @@
 All components are imported from `@tetjana/flowmakers-ds`.
 Always import the CSS too: `import '@tetjana/flowmakers-ds/styles'`
 
-| Component   | Purpose                                      | Guidelines file                          |
-|-------------|----------------------------------------------|------------------------------------------|
-| `Button`    | All clickable actions                        | [button.md](components/button.md)        |
-| `Input`     | Text fields, email, password, search         | [input.md](components/input.md)          |
-| `Tag`       | Labels, badges, status indicators            | [tag.md](components/tag.md)              |
-| `Toggle`    | Boolean on/off switches                      | [toggle.md](components/toggle.md)        |
-| `Checkbox`  | Multi-select options                         | [checkbox.md](components/checkbox.md)    |
-| `Header`    | Widget/card header with title and subtitle   | [header.md](components/header.md)        |
-| `Footer`    | Page footer with links and CTA               | [footer.md](components/footer.md)        |
+## Primitives
+
+| Component | Purpose | Guidelines |
+|-----------|---------|------------|
+| `Button` | All clickable actions (hero, secondary, ghost) | [button.md](components/button.md) |
+| `Input` | Text fields, email, password, search | [input.md](components/input.md) |
+| `Tag` | Labels, badges, status indicators | [tag.md](components/tag.md) |
+| `Toggle` | Boolean on/off switches | [toggle.md](components/toggle.md) |
+| `Checkbox` | Multi-select options, agreements | [checkbox.md](components/checkbox.md) |
+| `IconButton` | Icon-only action buttons (arrows, plus, pen) | [iconbutton.md](components/iconbutton.md) |
+
+## Navigation
+
+| Component | Purpose | Guidelines |
+|-----------|---------|------------|
+| `NavItem`, `NavBar` | Sidebar navigation menu | [navmenu.md](components/navmenu.md) |
+| `SegmentedControl` | Tab/filter switcher (2–5 options) | [segmentedcontrol.md](components/segmentedcontrol.md) |
+| `Pagination` | Prev/next navigation with dots or numbers | [pagination.md](components/pagination.md) |
+
+## Layout
+
+| Component | Purpose | Guidelines |
+|-----------|---------|------------|
+| `Header` | Widget/card header with title and subtitle | [header.md](components/header.md) |
+| `Footer` | Page footer with links, CTA, and copyright | [footer.md](components/footer.md) |
+
+## Cards
+
+| Component | Purpose | Guidelines |
+|-----------|---------|------------|
+| `CardTest` | Test/quiz card with state (available/in-progress/completed/unavailable) | [cardtest.md](components/cardtest.md) |
+| `CardCareer` | Accordion card showing career level + task progress | [cardcareer.md](components/cardcareer.md) |
+
+## Dashboard widgets
+
+| Component | Purpose | Guidelines |
+|-----------|---------|------------|
+| `WidgetCard` | Dashboard card container | [widgetcard.md](components/widgetcard.md) |
+| `WidgetHeader` | Widget title bar (purple or grey) | [widgetcard.md](components/widgetcard.md) |
+| `PlatformNewsWidget` | Platform update news item | [widgetcard.md](components/widgetcard.md) |
+| `GeneralNewsWidget` | Industry news with cover image | [widgetcard.md](components/widgetcard.md) |
+| `NotesWidget` | Personal notes snippet | [widgetcard.md](components/widgetcard.md) |
+| `PersonalAdviceWidget` | AI-generated advice card | [widgetcard.md](components/widgetcard.md) |
+| `CalendarWidget` | Weekly calendar with event list | [widgetcard.md](components/widgetcard.md) |
+
+---
 
 ## General rules
-- Do NOT add `className` to override colors — use CSS variables instead
+- Do NOT add `className` to override colors — use CSS variables from design tokens
 - All components accept standard HTML attributes via spread props
 - Disabled state: always pass `disabled` prop, never CSS-only
+- Always prefer FlowMakers components over native HTML elements
+- Read the component's `.md` file before using it

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tetjana/flowmakers-ds",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "FlowMakers UI Design System — React components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",