@aurora-ds/components 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,233 @@
+import { PropsWithChildren, FC, ReactNode, CSSProperties } from 'react';
+import { Theme } from '@aurora-ds/theme';
+
+type IconProps = PropsWithChildren<{
+    /** Icon size based on theme font sizes */
+    size?: keyof Theme['fontSize'];
+    /** Icon stroke/line color from theme */
+    color?: keyof Theme['colors'];
+    /** Background color from theme */
+    backgroundColor?: keyof Theme['colors'];
+    /** Padding from theme spacing */
+    padding?: keyof Theme['spacing'];
+    /** Border radius from theme */
+    borderRadius?: keyof Theme['radius'];
+}>;
+
+/**
+ * Icon component - Wrapper for SVG icons with theme-aware styling
+ *
+ * **Features:**
+ * - Theme-aware sizing via font sizes
+ * - Color and fill support from theme
+ * - Optional background with padding and border radius
+ * - Transition animation on color changes
+ *
+ * **Usage:**
+ * ```tsx
+ * import { SomeIcon } from 'some-icon-library'
+ *
+ * <Icon size="md" color="primary">
+ *   <SomeIcon />
+ * </Icon>
+ * ```
+ *
+ * **With background:**
+ * ```tsx
+ * <Icon
+ *   size="lg"
+ *   color="onPrimary"
+ *   backgroundColor="primary"
+ *   padding="sm"
+ *   borderRadius="full"
+ * >
+ *   <SomeIcon />
+ * </Icon>
+ * ```
+ */
+declare const Icon: FC<IconProps>;
+
+type TextVariants = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label';
+type TextVariantStyle = {
+    tag: TextVariants;
+    fontSize: string;
+    fontWeight: number;
+    lineHeight: number;
+};
+
+type TextProps = PropsWithChildren<{
+    /** Text variant that determines the HTML tag and default styling */
+    variant?: TextVariants;
+    /** Text color from theme */
+    color?: keyof Theme['colors'];
+    /** Maximum number of lines before truncation with ellipsis */
+    maxLines?: number;
+    /** Add underline text decoration */
+    underline?: boolean;
+}>;
+
+/**
+ * Text component - Renders semantic HTML elements based on variant
+ *
+ * **Variants:**
+ * - `h1-h6`: Heading elements with appropriate styling
+ * - `p`: Paragraph element with relaxed line height
+ * - `span`: Inline text element (default)
+ * - `label`: Label element with medium font weight
+ *
+ * **Features:**
+ * - Automatic HTML tag selection based on variant
+ * - Theme-aware colors
+ * - Text truncation with `maxLines`
+ * - Underline support
+ */
+declare const Text: FC<TextProps>;
+
+type ButtonVariants = 'contained' | 'outlined' | 'text';
+type ButtonVariantStyle = {
+    default: {
+        backgroundColor: string;
+        color: string;
+        border: string;
+    };
+    hover: {
+        backgroundColor: string;
+    };
+    pressed: {
+        backgroundColor: string;
+    };
+    disabled: {
+        color: string;
+        cursor: string;
+        backgroundColor: string;
+        borderColor?: string;
+    };
+    textColor: keyof Theme['colors'];
+};
+
+type ButtonProps = {
+    /** Button text label */
+    label: string;
+    /** Optional icon to display before label */
+    startIcon?: ReactNode;
+    /** Optional icon to display after label */
+    endIcon?: ReactNode;
+    /** Click handler */
+    onClick?: () => void;
+    /** Visual variant of the button */
+    variant?: ButtonVariants;
+    /** Button type attribute */
+    type?: 'button' | 'submit';
+    /** Active/pressed state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+};
+
+/**
+ * Button component
+ *
+ * **Variants:**
+ * - `contained`: Solid background button (default)
+ * - `outlined`: Border only button
+ * - `text`: Text only button without background
+ */
+declare const Button: FC<ButtonProps>;
+
+/** Stack wrap options */
+type StackWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+/** Stack justify options */
+type StackJustify = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+/** Stack alignment options */
+type StackAlign = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type StackDirection = 'row' | 'column';
+
+/** Card direction - reuses StackDirection */
+type CardDirection = StackDirection;
+
+type IconButtonProps = {
+    /** IconButton icon */
+    icon?: ReactNode;
+    /** Click handler */
+    onClick?: () => void;
+    /** Visual variant of the button */
+    variant?: ButtonVariants;
+    /** Button type attribute */
+    type?: 'button' | 'submit';
+    /** Active/pressed state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+};
+
+declare const IconButton: FC<IconButtonProps>;
+
+type StackProps = {
+    /** Stack children elements */
+    children: ReactNode;
+    /** Flex direction of the stack */
+    direction?: StackDirection;
+    /** Gap between children (theme spacing or CSS value) */
+    gap?: keyof Theme['spacing'];
+    /** Width of the stack container */
+    width?: CSSProperties['width'];
+    /** Height of the stack container */
+    height?: CSSProperties['height'];
+    /** Alignment of items on the cross axis */
+    align?: StackAlign;
+    /** Justification of items on the main axis */
+    justify?: StackJustify;
+    /** Whether items should wrap */
+    wrap?: StackWrap;
+    /** Padding inside the stack */
+    padding?: keyof Theme['spacing'];
+};
+
+/**
+ * Stack component
+ *
+ * A flexbox container for laying out children in a row or column.
+ *
+ * **Direction:**
+ * - `row`: Horizontal layout (default)
+ * - `column`: Vertical layout
+ */
+declare const Stack: FC<StackProps>;
+
+type CardProps = {
+    /** Card children elements */
+    children: ReactNode;
+    /** Flex direction of the card content */
+    direction?: CardDirection;
+    /** Padding inside the card (theme spacing key) */
+    padding?: keyof Theme['spacing'];
+    /** Width of the card */
+    width?: CSSProperties['width'];
+    /** Height of the card */
+    height?: CSSProperties['height'];
+    /** Gap between children (theme spacing key) */
+    gap?: keyof Theme['spacing'];
+    /** Border radius of the card */
+    radius?: keyof Theme['radius'];
+    /** Shadow depth of the card */
+    shadow?: keyof Theme['shadows'];
+    /** Alignment of items on the cross axis */
+    align?: StackAlign;
+    /** Justification of items on the main axis */
+    justify?: StackJustify;
+};
+
+/**
+ * Card component
+ *
+ * A container component with a background, border radius, and optional shadow.
+ * Uses a Stack layout internally for organizing children.
+ *
+ * **Direction:**
+ * - `column`: Vertical layout (default)
+ * - `row`: Horizontal layout
+ */
+declare const Card: FC<CardProps>;
+
+export { Button, Card, Icon, IconButton, Stack, Text };
+export type { ButtonProps, ButtonVariantStyle, ButtonVariants, CardDirection, CardProps, IconButtonProps, IconProps, StackAlign, StackDirection, StackJustify, StackProps, StackWrap, TextProps, TextVariantStyle, TextVariants };

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@aurora-ds/components",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Aurora Design System - React Components Library",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "start": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "yarn build"
+  },
+  "peerDependencies": {
+    "@aurora-ds/theme": "^1.0.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@aurora-ds/theme": "^1.0.3",
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@babel/preset-react": "^7.23.0",
+    "@babel/preset-typescript": "^7.23.0",
+    "@eslint/js": "^9.39.2",
+    "@rollup/plugin-alias": "^6.0.0",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@storybook/addon-links": "^10.1.10",
+    "@storybook/blocks": "^9.0.0-alpha.17",
+    "@storybook/react": "^10.1.10",
+    "@storybook/react-vite": "^10.1.10",
+    "@types/node": "^25.0.2",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@vitejs/plugin-react": "^5.1.2",
+    "eslint": "^9.0.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "postcss": "^8.5.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.0.0",
+    "rollup-plugin-dts": "^6.0.0",
+    "rollup-plugin-postcss": "^4.0.0",
+    "storybook": "^10.1.10",
+    "typescript": "^5.2.0",
+    "vite": "^5.0.0",
+    "vitest": "^2.0.0",
+    "eslint-plugin-storybook": "10.1.10",
+    "@storybook/addon-docs": "^10.1.10"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "keywords": [
+    "react",
+    "components",
+    "design-system",
+    "aurora"
+  ]
+}