@stackone/malachite 0.1.1

package/README.md

@@ -0,0 +1,181 @@
+# Malachite
+
+A modern React component library built with TypeScript, providing a comprehensive set of reusable UI components for building StackOne applications.
+
+## 🚀 Installation
+
+```bash
+npm install malachite
+# or
+yarn add malachite
+# or
+pnpm add malachite
+```
+
+## 📦 What's Included
+
+Malachite provides a set of components to be used in StackOne applications.
+
+### Core Components
+- **Button** - Flexible button component with multiple variants
+- **Card** - Container component for content organization
+- **Input** - Form input component with validation support
+- **Typography** - Text components with consistent styling
+- **Spacer** - Layout component for consistent spacing
+
+### Layout & Structure
+- **Flex** - Flexible layout component with alignment controls
+- **Padded** - Container component with consistent padding
+- **FooterLinks** - Pre-styled footer navigation component
+
+### Interactive Components
+- **Alert** - Notification and alert messages
+- **Tooltip** - Contextual information on hover
+- **ButtonList** - Group of related buttons
+- **Form** - Form wrapper with validation support
+
+### Content & Media
+- **Markdown** - Render markdown content with styling
+- **Spinner** - Loading indicators
+- **CustomIcons** - Comprehensive icon library
+
+### Theme System
+- **ThemeProvider** - Theme context provider
+- **useTheme** - Theme context hook
+
+## 🎯 Quick Start
+
+```tsx
+import React from 'react';
+import { 
+  ThemeProvider, 
+  Button, 
+  Card, 
+  Typography, 
+  Flex 
+} from 'malachite';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <Card>
+        <Flex direction="column" gap="md">
+          <Typography variant="h1">Welcome to Malachite</Typography>
+          <Typography variant="body">
+            Build beautiful UIs with our component library
+          </Typography>
+          <Button variant="primary">
+            Get Started
+          </Button>
+        </Flex>
+      </Card>
+    </ThemeProvider>
+  );
+}
+
+export default App;
+```
+
+## 🎨 Theming
+
+Malachite includes a powerful theming system that allows you to customize the look and feel of all components:
+
+```tsx
+import { ThemeProvider, useTheme } from 'malachite';
+
+// Wrap your app with ThemeProvider
+function App() {
+  return (
+    <ThemeProvider>
+      <YourComponents />
+    </ThemeProvider>
+  );
+}
+
+// Use the theme in your components
+function CustomComponent() {
+  const theme = useTheme();
+  // Access theme values
+  return <div style={{ color: theme.colors.primary }}>Themed content</div>;
+}
+```
+
+## 📚 Storybook
+
+Explore all components and their variants in our interactive Storybook:
+
+```bash
+npm run storybook
+```
+
+This will launch Storybook where you can:
+- Browse all available components
+- See component variations and props
+- Test component interactions
+- Copy code examples
+
+## 🛠️ Development
+
+### Prerequisites
+- Node.js 16+
+- npm, yarn, or pnpm
+
+### Setup
+
+1. Clone the repository
+```bash
+git clone https://github.com/StackOneHQ/malachite.git
+cd malachite
+```
+
+2. Install dependencies
+```bash
+npm install
+```
+
+3. Start development server
+```bash
+npm run dev
+```
+
+4. Run Storybook
+```bash
+npm run storybook
+```
+
+### Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+- `npm run storybook` - Launch Storybook
+- `npm run lint` - Run ESLint
+- `npm run type-check` - Run TypeScript checks
+
+## 📋 Component Reference
+
+### Layout Components
+| Component | Description | Key Props |
+|-----------|-------------|-----------|
+| `Flex` | Flexible layout container | `direction`, `justify`, `align`, `gap` |
+| `Padded` | Container with consistent padding | `size`, `children` |
+| `Spacer` | Adds consistent spacing | `size`, `direction` |
+
+### UI Components
+| Component | Description | Key Props |
+|-----------|-------------|-----------|
+| `Button` | Interactive button | `variant`, `size`, `disabled` |
+| `Card` | Content container | `elevation`, `padding` |
+| `Input` | Form input field | `type`, `placeholder`, `validation` |
+| `Alert` | Notification messages | `type`, `message`, `dismissible` |
+
+### Content Components
+| Component | Description | Key Props |
+|-----------|-------------|-----------|
+| `Typography` | Text elements | `variant`, `color`, `weight` |
+| `Markdown` | Rendered markdown | `content`, `sanitize` |
+| `Tooltip` | Contextual help | `content`, `placement` |
+
+## 📄 License
+
+This project is licensed under the MIT License.

package/dist/index.d.ts

@@ -0,0 +1,386 @@
+import { CodeTextProps } from './codeText';
+import { Control } from 'react-hook-form';
+import { createStyles } from 'antd-style';
+import { CSSObject } from 'antd-style';
+import { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+import { default as default_2 } from 'react';
+import { EllipsisTextProps } from './ellipsisText';
+import { FC } from 'react';
+import { FieldPath } from 'react-hook-form';
+import { FieldValues } from 'react-hook-form';
+import { FormInstance } from 'antd';
+import { FormSectionTitleProps } from './formSectionText';
+import { HandWrittenProps } from './handWritten';
+import { JSX as JSX_2 } from 'react';
+import { LinkProps } from './link';
+import { PageTitleProps } from './pageTitle';
+import * as React_2 from 'react';
+import { ReactNode } from 'react';
+import { SecondaryTextProps } from './secondaryText';
+import { SectionTitleProps } from './sectionTitle';
+import { StatisticLabelProps } from './statisticLabel';
+import { StatisticValueProps } from './statisticValue';
+import { TerminalTextProps } from './terminalText';
+import { TextProps } from './text';
+
+export declare const Alert: default_2.FC<AlertProps>;
+
+declare interface AlertProps {
+    type?: AlertType;
+    message: string;
+    hasMargin?: boolean;
+}
+
+declare type AlertType = 'success' | 'error' | 'warning' | 'info';
+
+export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+declare interface ButtonDefinition {
+    label: string;
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => Promise<void> | void;
+    disabled?: boolean;
+    danger?: boolean;
+    icon?: React.ReactNode;
+    tooltip?: string;
+}
+
+export declare const ButtonList: default_2.FC<ButtonListProps>;
+
+declare interface ButtonListProps {
+    buttons: Array<{
+        key: string;
+        children: ReactNode;
+        onClick: () => void;
+    }>;
+}
+
+declare interface ButtonProps {
+    type?: ButtonType;
+    disabled?: boolean;
+    htmlType?: 'button' | 'submit' | 'reset';
+    icon?: default_2.ReactNode;
+    size?: 'xsmall' | 'small' | 'medium' | 'large';
+    flexGrow?: boolean;
+    children?: default_2.ReactNode;
+    loading?: boolean;
+    tooltip?: string;
+    onClick?: (e?: default_2.MouseEvent<HTMLElement, MouseEvent>) => void;
+    fill?: boolean;
+    iconPosition?: 'start' | 'end';
+}
+
+declare type ButtonType = 'filled' | 'outline' | 'destructive' | 'green' | 'orange' | 'red' | 'ghost' | 'no-style';
+
+export declare const Card: default_2.FC<CardProps>;
+
+declare interface CardProps {
+    title?: string | default_2.ReactNode;
+    padding?: string;
+    children?: default_2.ReactNode;
+    size?: 'default' | 'small';
+    width?: string;
+    minWidth?: string;
+    direction?: 'row' | 'column';
+    align?: 'center';
+    dimmed?: boolean;
+    fullHeight?: boolean;
+    border?: 'base' | 'rounded';
+    alignSelf?: 'center';
+    height?: string;
+    footer?: default_2.ReactNode;
+}
+
+declare interface Colors {
+    orangeForeground: string;
+    orangeBackground: string;
+    redForeground: string;
+    redBackground: string;
+    greenForeground: string;
+    greenBackground: string;
+    primaryForeground: string;
+    primaryBackground: string;
+    primaryShadow: string;
+    primaryBorder: string;
+    primaryBorderHover: string;
+    secondaryForeground: string;
+    secondaryBackground: string;
+    secondaryShadow: string;
+    secondaryBorder: string;
+    secondaryBorderHover: string;
+    destructiveBackground: string;
+    destructiveForeground: string;
+    destructiveShadow: string;
+    destructiveBorder: string;
+    background: string;
+    dimmedBackground: string;
+    dimmedForeground: string;
+    dimmedForegroundSecondary: string;
+    quoteBackground: string;
+    quoteForeground: string;
+    linkForeground: string;
+    linkForegroundHover: string;
+}
+
+export declare const CustomIcons: {
+    AccountIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    AccountsIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    AddIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    AdvancedLogsIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    ApiKeysIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    ArrowLeftIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    Authentication: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    BiDirectionalArrowsIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    CaretDownIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    CaretLeftIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    CaretRightIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    CaretUpIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    ChangePasswordIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    CheckCircleFilledIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    ClearIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    CloseIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    CommandKeyIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    CopyIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    CsvIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    CustomFieldIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    DashboardIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    DateIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    DisabledIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    DisableIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    DocIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    DownloadIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    EditIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    EnableIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    EnumIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    ExpandIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    FieldMappingIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    FilledCaretDownIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    FilledCaretRightIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    FilterIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    ForbiddenIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    ForwardArrowIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    InfoIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    IntegrationsIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    KeyIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    LogsIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    MagicWandIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    ManageTeamIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    ManualWebhookIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    MembersIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    ModalIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    NavbarCollapseIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    NavbarExpandIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    NotFoundIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    PlusIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    PreviewIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    ProgrammaticWebhookIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    PulseIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    RefreshIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    RejectIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    ReloadIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    RequiredFieldIndicatorIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    SecurityIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    SettingsIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    SignOutIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    SliderIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    SortIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    SourceIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    SyntheticWebhookIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    TrashIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    UploadIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    WebhookEventsIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    WebhookIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+    WebhookSigningSecretIcon: (props: Partial<CustomIconComponentProps>) => JSX_2.Element;
+};
+
+export declare const Flex: default_2.FC<FlexProps>;
+
+export declare enum FlexAlign {
+    Top = "flex-start",
+    Bottom = "flex-end",
+    Center = "center",
+    Normal = "normal"
+}
+
+export declare enum FlexDirection {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+
+export declare enum FlexGapSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+
+export declare enum FlexJustify {
+    Left = "flex-start",
+    Right = "flex-end",
+    Center = "center",
+    SpaceBetween = "space-between",
+    SpaceAround = "space-around",
+    SpaceEvenly = "space-evenly"
+}
+
+declare interface FlexProps {
+    justify?: FlexJustify;
+    align?: FlexAlign;
+    gapSize?: FlexGapSize;
+    direction?: FlexDirection;
+    fullHeight?: boolean;
+    grow?: boolean;
+    width?: string;
+    id?: string;
+    children?: default_2.ReactNode;
+}
+
+declare type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+
+export declare const FooterLinks: default_2.FC<FooterLinksProps>;
+
+declare interface FooterLinksProps {
+    fullWidth?: boolean;
+    showDocsSupport?: boolean;
+}
+
+export declare const Form: default_2.FC<FormProps>;
+
+declare interface FormProps {
+    children: default_2.ReactNode;
+    onFinish?: () => void;
+    formInstance?: FormInstance;
+    style?: default_2.CSSProperties;
+}
+
+export declare const Input: default_2.FC<InputProps>;
+
+declare interface InputProps {
+    label?: string;
+    hint?: string;
+    tooltip?: string;
+    placeholder?: string;
+    icon?: default_2.ReactNode;
+    readOnly?: boolean;
+    name: FieldPath<FieldValues> | string;
+    type?: 'text' | 'password' | 'number';
+    description?: string;
+    size?: SizeType;
+    required?: boolean;
+    error?: boolean;
+    loading?: boolean;
+    defaultValue?: string;
+    disabled?: boolean;
+    prefixValue?: string;
+    prefixSecondaryValue?: string;
+    ellipsis?: boolean;
+    formControl?: Control<FieldValues, unknown>;
+    buttons?: ButtonDefinition[];
+    onCopyClick?: () => void;
+    onChange?: (value: string) => void;
+}
+
+export declare const Markdown: default_2.FC<MarkdownProps>;
+
+declare interface MarkdownProps {
+    text: string;
+    color?: TextColor;
+    size?: FontSize;
+}
+
+export declare const Padded: default_2.FC<PaddedProps>;
+
+declare interface PaddedProps {
+    vertical: PaddingSize;
+    horizontal: PaddingSize;
+    children: default_2.ReactNode;
+    fullHeight?: boolean;
+}
+
+declare type PaddingSize = 'small' | 'medium' | 'large' | 'none';
+
+declare type SizeType = 'small' | 'middle' | 'large';
+
+export declare const Spacer: default_2.FC<SpacerProps>;
+
+declare interface SpacerProps {
+    direction?: 'horizontal' | 'vertical';
+    size?: number;
+    align?: 'center' | 'start' | 'end' | 'baseline';
+    justifyContent?: 'space-between' | 'end' | 'center';
+    padding?: string;
+    children: default_2.ReactNode;
+    id?: string;
+    fullHeight?: boolean;
+    fullWidth?: boolean;
+}
+
+export declare const Spinner: default_2.FC<SpinnerProps>;
+
+declare interface SpinnerProps {
+    size?: 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large';
+}
+
+declare type TextColor = 'regular' | 'dimmed' | 'primary' | 'secondary' | 'destructive' | 'green' | 'red' | 'orange';
+
+declare type Theme = 'dark' | 'light' | 'system';
+
+export declare function ThemeProvider({ children, theme, ...props }: ThemeProviderProps): React_2.JSX.Element;
+
+declare type ThemeProviderProps = {
+    children: React_2.ReactNode;
+    theme?: Theme;
+};
+
+declare type ThemeProviderState = {
+    theme: Theme;
+    colors: Colors;
+    useStyles: ReturnType<typeof createStyles<{
+        colors: Colors;
+    }, Partial<{
+        'button-orange': CSSObject;
+        'button-red': CSSObject;
+        'button-green': CSSObject;
+        'button-filled': CSSObject;
+        'button-outline': CSSObject;
+        'button-destructive': CSSObject;
+        'button-ghost': CSSObject;
+        'button-no-style': CSSObject;
+        card: CSSObject;
+        'input-wrapper': CSSObject;
+        terminalText: CSSObject;
+        link: CSSObject;
+        buttonList: CSSObject;
+        buttonListItem: CSSObject;
+        'alert-info': CSSObject;
+        'alert-success': CSSObject;
+        'alert-error': CSSObject;
+        'alert-warning': CSSObject;
+    }>>>;
+};
+
+export declare const Tooltip: default_2.FC<TooltipProps>;
+
+declare interface TooltipProps {
+    text: default_2.ReactNode | string;
+    children: default_2.ReactNode;
+    delay?: number;
+    wrapChildren?: boolean;
+}
+
+export declare const Typography: {
+    Text: FC<TextProps>;
+    PageTitle: FC<PageTitleProps>;
+    StatisticLabel: FC<StatisticLabelProps>;
+    StatisticValue: FC<StatisticValueProps>;
+    SectionTitle: FC<SectionTitleProps>;
+    SecondaryText: FC<SecondaryTextProps>;
+    EllipsisText: FC<EllipsisTextProps>;
+    CodeText: FC<CodeTextProps>;
+    FormSectionTitle: FC<FormSectionTitleProps>;
+    TerminalText: FC<TerminalTextProps>;
+    HandWritten: FC<HandWrittenProps>;
+    Link: ({ children, href, target, rel }: LinkProps) => JSX_2.Element;
+};
+
+export declare const useTheme: () => ThemeProviderState;
+
+export { }