stp-ui-kit 0.1.0 → 2.0.1

package/dist/src/components/form/FormItem/FormItem.d.ts

@@ -1,21 +0,0 @@
-import { default as React, PropsWithChildren, ReactNode } from 'react';
-interface FormItemProps {
-    children: ReactNode;
-    error?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-}
-declare const FormItem: {
-    ({ children, error, disabled, readOnly }: FormItemProps): import("react/jsx-runtime").JSX.Element;
-    Label: ({ children, required }: LabelProps) => import("react/jsx-runtime").JSX.Element;
-    Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLElement>>;
-    Message: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element | null;
-};
-interface LabelProps extends PropsWithChildren {
-    required?: boolean;
-}
-interface InputProps extends React.ComponentPropsWithoutRef<"input"> {
-    as?: React.ElementType;
-    className?: string;
-}
-export { FormItem };

package/dist/src/components/form/FormItem/FormItemContext.d.ts

@@ -1,6 +0,0 @@
-export type FormItemState = "default" | "error" | "disabled" | "readOnly";
-export interface FormItemContextValue {
-    state: FormItemState;
-}
-export declare const FormItemContext: import('react').Context<FormItemContextValue>;
-export declare const useFormItem: () => FormItemContextValue;

package/dist/src/components/layout/Banner/Banner.d.ts

@@ -1,11 +0,0 @@
-interface BannerProps {
-    color: string;
-    title: string;
-    bgPattern: string;
-    bgPatternFinished?: string;
-    buttonColor: string;
-    deadline: string;
-    onClick: () => void;
-}
-export declare const Banner: ({ color, title, bgPattern, deadline, bgPatternFinished, buttonColor, onClick, }: BannerProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/components/layout/Banner/Banner.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Banner } from './Banner';
-declare const meta: Meta<typeof Banner>;
-export default meta;
-type Story = StoryObj<typeof Banner>;
-export declare const Default: Story;

package/dist/src/components/layout/Banner/utils/utils.d.ts

@@ -1 +0,0 @@
-export declare const formatDeadline: (date: string | Date) => string;

package/dist/src/components/navigation/CourseCollapse/CourseCollapse.d.ts

@@ -1,14 +0,0 @@
-export interface CourseNavItem {
-    id: string;
-    name: string;
-    icon?: React.ReactNode;
-    completed?: boolean;
-    children?: CourseNavItem[];
-    disabled?: boolean;
-}
-export interface CourseCollapseProps {
-    activeItemId: string;
-    onChange: (item: CourseNavItem) => void;
-    item: CourseNavItem;
-}
-export declare const CourseCollapse: ({ activeItemId, onChange, item, }: CourseCollapseProps) => import("react/jsx-runtime").JSX.Element;

package/docs/components/form/FormItem.md

@@ -1,216 +0,0 @@
-# FormItem
-
-> Category: Form
-
-> ⚠️ **DEPRECATED** - This component is deprecated and should not be used in new code. Use individual form components (Input, Select, Checkbox, etc.) which include built-in label, error, and helper text support.
-
-[Figma Design](<!-- FormItem is deprecated, no Figma link available -->)
-
-## Description
-
-FormItem is a compound component pattern that provides a wrapper for form fields with shared state management via Context API. It consists of four sub-components: `FormItem` (root), `FormItem.Label`, `FormItem.Input`, and `FormItem.Message`. The component manages form state (default, error, disabled, readOnly) and propagates it to child components automatically.
-
-**Deprecation Notice:** This component has been superseded by standalone form components (Input, Select, Checkbox, RadioButton, TextArea) which provide label, error, and helper text props directly without needing a wrapper component.
-
-## Import
-
-```tsx
-import { FormItem } from "stp-ui-kit";
-```
-
-## Props
-
-### FormItem (Root Component)
-
-| Prop     | Type        | Default     | Required | Description                                        |
-| -------- | ----------- | ----------- | -------- | -------------------------------------------------- |
-| children | `ReactNode` | -           | Yes      | Child components (Label, Input, Message)           |
-| error    | `boolean`   | `false`     | No       | When `true`, sets error state for child components |
-| disabled | `boolean`   | `false`     | No       | When `true`, disables the input                    |
-| readOnly | `boolean`   | `false`     | No       | When `true`, makes the input read-only             |
-
-### FormItem.Label
-
-| Prop     | Type        | Default | Required | Description                            |
-| -------- | ----------- | ------- | -------- | -------------------------------------- |
-| children | `ReactNode` | -       | Yes      | Label text content                     |
-| required | `boolean`   | `false` | No       | When `true`, shows red asterisk (\*)   |
-
-### FormItem.Input
-
-Extends `React.ComponentPropsWithoutRef<"input">` and forwards ref to the underlying element.
-
-| Prop      | Type                | Default   | Required | Description                                                    |
-| --------- | ------------------- | --------- | -------- | -------------------------------------------------------------- |
-| as        | `React.ElementType` | `"input"` | No       | Render as a different element (e.g., `"textarea"`, `"select"`) |
-| className | `string`            | -         | No       | Additional CSS class names                                     |
-| ...props  | `InputHTMLAttributes` | -       | No       | All standard input attributes                                  |
-
-### FormItem.Message
-
-| Prop     | Type        | Default | Required | Description                                 |
-| -------- | ----------- | ------- | -------- | ------------------------------------------- |
-| children | `ReactNode` | -       | No       | Message text (error or helper text)         |
-
-## Variants
-
-The component has four internal states managed via Context:
-
-- **default**: Normal state with no special styling
-- **error**: Red border on input, red error icon and text in message
-- **disabled**: Grayed out, input disabled
-- **readOnly**: Read-only styling, input cannot be modified
-
-## Code Examples
-
-### Basic form field
-
-```tsx
-<FormItem>
-  <FormItem.Label>Email</FormItem.Label>
-  <FormItem.Input type='email' placeholder='Enter your email' />
-</FormItem>
-```
-
-### Required field with error
-
-```tsx
-<FormItem error={!!errors.username}>
-  <FormItem.Label required>Username</FormItem.Label>
-  <FormItem.Input
-    type='text'
-    value={username}
-    onChange={(e) => setUsername(e.target.value)}
-  />
-  <FormItem.Message>{errors.username || "Choose a unique username"}</FormItem.Message>
-</FormItem>
-```
-
-### Disabled field
-
-```tsx
-<FormItem disabled>
-  <FormItem.Label>Account Type</FormItem.Label>
-  <FormItem.Input value='Premium' readOnly />
-  <FormItem.Message>Contact support to change your account type</FormItem.Message>
-</FormItem>
-```
-
-### Using `as` prop for textarea
-
-```tsx
-<FormItem>
-  <FormItem.Label>Description</FormItem.Label>
-  <FormItem.Input
-    as='textarea'
-    rows={4}
-    placeholder='Enter description...'
-  />
-</FormItem>
-```
-
-## Figma Property Mapping
-
-When implementing from Figma designs, map the component properties as follows:
-
-| Figma Property | Component Prop | Value Mapping | Notes |
-|----------------|----------------|---------------|-------|
-| **Label** text | `FormItem.Label` | Text → `<FormItem.Label>Text</FormItem.Label>` | Label content |
-| **Required** boolean | `required` | `true` → `<FormItem.Label required>` | Required indicator (*) |
-| **Error** boolean | `error` | `true` → `<FormItem error={true}>` | Error state |
-| **Disabled** boolean | `disabled` | `true` → `<FormItem disabled={true}>` | Disabled state |
-| **Read Only** boolean | `readOnly` | `true` → `<FormItem readOnly={true}>` | Read-only state |
-| **Message** text | `FormItem.Message` | Text → `<FormItem.Message>Text</FormItem.Message>` | Helper/error text |
-| **Input Type** | `type` | Text → `<FormItem.Input type="text" />` | Input type |
-| *(Not in Figma)* | `as` | N/A | Render as different element |
-| *(Not in Figma)* | `value/onChange` | N/A | Controlled input props |
-
-### Example Figma → Code
-
-**Figma settings:** Label="Email", Required=true, Error=false, Message="We'll never share your email"
-
-```tsx
-<FormItem>
-  <FormItem.Label required>Email</FormItem.Label>
-  <FormItem.Input
-    type="email"
-    value={email}
-    onChange={(e) => setEmail(e.target.value)}
-  />
-  <FormItem.Message>We'll never share your email</FormItem.Message>
-</FormItem>
-```
-
-**Migration to modern components:**
-
-```tsx
-// ❌ Deprecated: Using FormItem
-<FormItem error={!!errors.email}>
-  <FormItem.Label required>Email</FormItem.Label>
-  <FormItem.Input type="email" value={email} onChange={handleChange} />
-  <FormItem.Message>{errors.email}</FormItem.Message>
-</FormItem>
-
-// ✅ Recommended: Using Input component
-<Input
-  label="Email"
-  type="email"
-  required
-  value={email}
-  onChange={handleChange}
-  error={errors.email}
-/>
-```
-
-## Design Tokens
-
-| Element | Token | Value | Usage |
-|---------|-------|-------|-------|
-| **FormItem Container** | | | |
-| Display | `flex` | - | Vertical layout |
-| Flex Direction | `column` | - | Stacked children |
-| Gap | `$spacing-100` | `4px` | Space between label/input/message |
-| **Label** | | | |
-| Color | `$text-primary-default` | `#000000` | Label text |
-| Font Size | `$font-size-sm` | `14px` | Label size |
-| Font Weight | `$font-weight-medium` | `500` | Medium weight |
-| Margin Bottom | `$spacing-100` | `4px` | Space below label |
-| Disabled Color | `$text-disabled` | `#D1D5DB` | Disabled label |
-| Read-only Color | `$text-secondary-default` | `#6B7280` | Read-only label |
-| **Required Mark** | | | |
-| Color | `$text-critical-default` | `#DC2626` | Red asterisk |
-| Margin Left | `$spacing-50` | `2px` | Space before asterisk |
-| **Input** | | | |
-| Background | `$fill-surface-default` | `#FFFFFF` | Input background |
-| Border | `$border-primary-default` | `#E0E0E0` | Default border |
-| Border Radius | `$border-radius-md` | `8px` | Input corners |
-| Padding | `$spacing-200 $spacing-300` | `8px 12px` | Input padding |
-| Font Size | `$font-size-md` | `16px` | Input text size |
-| Color | `$text-primary-default` | `#000000` | Input text |
-| **Input States** | | | |
-| Focus Border | `$border-focus` | `#0066CC` | Focused state |
-| Error Border | `$border-critical-default` | `#DC2626` | Error state |
-| Disabled Background | `$fill-disabled` | `#F9FAFB` | Disabled input |
-| Disabled Text | `$text-disabled` | `#D1D5DB` | Disabled text |
-| Read-only Background | `$fill-secondary-default` | `#F3F4F6` | Read-only background |
-| **Message** | | | |
-| Color (default) | `$text-secondary-default` | `#6B7280` | Helper text |
-| Color (error) | `$text-critical-default` | `#DC2626` | Error message |
-| Font Size | `$font-size-xs` | `12px` | Message size |
-| Gap | `$spacing-100` | `4px` | Space between icon and text |
-| **Error Icon** | | | |
-| Color | `$icon-critical` | `#DC2626` | Error icon |
-| Size | `16px` | - | Icon dimensions |
-
-## Related Components
-
-- **Input** -- Modern replacement for text inputs with built-in label, error, and helper text.
-- **TextArea** -- Modern replacement for multi-line text inputs.
-- **Checkbox** -- Modern replacement for checkbox inputs.
-- **RadioButton** -- Modern replacement for radio inputs.
-- **Select** -- Modern replacement for select dropdowns.
-- **InlineError** -- Error message component used by modern form components.
-
-## Source
-
-`src/components/form/FormItem/FormItem.tsx`

package/docs/components/navigation/CourseCollapse.md

@@ -1,103 +0,0 @@
-# CourseCollapse
-
-> Category: Navigation
-
-[Figma Design](<!-- Figma URL -->)
-
-## Description
-
-A specialized collapsible navigation component designed for course content navigation. It extends the behavior of `Collapse` with additional support for completion and disabled states on child items. Each child item displays a contextual secondary icon: a lock icon when disabled, a checkmark icon when completed, or an unlocked icon when available but not yet completed.
-
-## Import
-
-```tsx
-import { CourseCollapse } from "stp-ui-kit";
-```
-
-## Props
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| activeItemId | `string` | - | Yes | The `id` of the currently active/selected navigation item. Used to highlight the active child and determine initial open state. |
-| onChange | `(item: CourseNavItem) => void` | - | Yes | Callback invoked when a navigation item (parent or child) is clicked. Receives the clicked `CourseNavItem` object. |
-| item | `CourseNavItem` | - | Yes | The course navigation item data for the parent node, including its optional children. |
-
-### CourseNavItem Type
-
-```tsx
-interface CourseNavItem {
-  id: string;
-  name: string;
-  icon?: React.ReactNode;
-  completed?: boolean;
-  children?: CourseNavItem[];
-  disabled?: boolean;
-}
-```
-
-## Code Examples
-
-**Basic course navigation:**
-
-```tsx
-const courseModule: CourseNavItem = {
-  id: "module-1",
-  name: "Introduction to React",
-  icon: <BookIcon />,
-  children: [
-    { id: "lesson-1", name: "What is React?", completed: true },
-    { id: "lesson-2", name: "JSX Basics", completed: true },
-    { id: "lesson-3", name: "Components", completed: false },
-    { id: "lesson-4", name: "Advanced Patterns", disabled: true },
-  ],
-};
-
-<CourseCollapse
-  activeItemId="lesson-3"
-  onChange={(item) => navigate(`/course/${item.id}`)}
-  item={courseModule}
-/>
-```
-
-**Multiple course modules:**
-
-```tsx
-const modules: CourseNavItem[] = [
-  {
-    id: "mod-1",
-    name: "Getting Started",
-    icon: <StartIcon />,
-    children: [
-      { id: "1-1", name: "Setup", completed: true },
-      { id: "1-2", name: "First App", completed: false },
-    ],
-  },
-  {
-    id: "mod-2",
-    name: "Advanced Topics",
-    icon: <AdvancedIcon />,
-    children: [
-      { id: "2-1", name: "State Management", disabled: true },
-      { id: "2-2", name: "Performance", disabled: true },
-    ],
-  },
-];
-
-{modules.map((mod) => (
-  <CourseCollapse
-    key={mod.id}
-    activeItemId={currentLessonId}
-    onChange={(item) => setCurrentLessonId(item.id)}
-    item={mod}
-  />
-))}
-```
-
-## Related Components
-
-- Collapse
-- NavigationItem
-
-## Source
-
-`src/components/navigation/CourseCollapse/CourseCollapse.tsx`