mcr-design-systems 1.0.0

package/README.md

@@ -0,0 +1,210 @@
+# MCR Design Systems
+
+A React component library built with TypeScript, Vite, and Tailwind CSS V4.
+
+## Goal
+
+Build design system for mcbr web app for the support tool and web app
+
+## Prerequisites
+
+Before running this project, make sure you have the following installed:
+
+- **Node.js** (version 16 or higher)
+- **npm** or **yarn** package manager
+- **Git** (for cloning the repository)
+
+## Installation
+
+1. Clone the repository:
+
+```bash
+git clone <repository-url>
+cd mcbr-design-system
+```
+
+2. Install dependencies:
+
+```bash
+npm install
+# or
+yarn install
+```
+
+## Running the Project
+
+### Development Mode
+
+To start the development server with hot reload:
+
+Test UI at localhost:
+
+```bash
+# or
+yarn dev
+```
+
+### Building the Project
+
+To build the project for production at the library:
+
+```bash
+# or
+yarn build
+```
+
+To implement the link library to use at local source
+Open another terminal run your fe source
+
+```bash
+cd "source/name-source-fe"
+yarn link "project-name"
+```
+
+Thess command will:
+
+- Build source code
+- Go to your local front-end source code
+- Stay at your local source and link to the library "mcr-design-systems" you have built
+
+### Building Library Only
+
+To build only the library components:
+
+```bash
+yarn build
+```
+
+### Preview Production Build
+
+To preview the production build locally:
+
+```bash
+yarn preview
+```
+
+### Code Quality
+
+#### Linting
+
+To check for code quality issues:
+
+```bash
+yarn lint
+```
+
+## Project Structure
+
+```
+src/
+├── App.tsx                        # Main application component
+├── main.tsx                       # Application entry point
+├── index.css                      # Global styles
+├── lib/                           # Library components
+│   ├── components/                # React components
+│   │   └── [ComponentName]/
+│   │       ├── index.tsx          # Component implementation
+│   │       └── helper/            # Component-specific utilities
+│   └── shared/                    # Shared utilities
+│       ├── icons/                 # Icon components
+│       └── utils/                 # Utility functions
+├────── tokens/                    # Design system tokens
+        ├── index.ts               # Token system exports
+        ├── context.ts             # React context for tokens
+        ├── hooks.ts               # Custom hooks for token access
+        ├── semantic.ts            # Semantic token definitions
+        ├── tailwind-config.ts     # Tailwind configuration
+        ├── theme.tsx              # Theme provider component
+        ├── utils.ts               # Token utility functions
+        └── primitives/            # Core design tokens
+            ├── index.ts           # Primitive token exports
+            ├── colors.ts          # Color palette definitions
+            ├── typography.ts      # Font, size, weight definitions
+            └── layout.ts          # Spacing, sizing definitions
+```
+
+## Design Token Usage
+
+### Token Workflow
+
+1. Export tokens from Figma as JSON → `tools/tokenVariant.json`
+2. Run: `node tools/convert-token.js` to update semantic tokens
+3. Use semantic tokens in components via Tailwind classes
+
+### Token Usage Patterns
+
+- **Colors**: `bg-bg-surface-level-1`, `text-neutral-main`
+- **Borders**: Use `border-neutral` (not `border-neutral-100` or `border-border-neutral`)
+- **Spacing**: Use semantic tokens like `p-sm-2`, `m-md` (not `p-3`, `m-4`)
+
+### Component Styling Conventions
+
+- Use `tv()` from `tailwind-variants` for component variants (not conditional classNames)
+- Use `cn()` utility for className concatenation
+- Use `dataTestId()` for consistent test selectors
+- Use `@app/` alias for internal imports
+
+## Development Guidelines
+
+1. **Components**: All reusable components should be placed in `src/lib/components/`
+2. **Styling**: Use Tailwind CSS with semantic design tokens for styling components
+3. **TypeScript**: Maintain type safety across all components
+4. **Design Tokens**: Always use semantic tokens instead of hardcoded values
+5. **Testing**: Run linting before committing changes
+
+## Publishing
+
+To publish the library: (TO BE DETERMINE)
+
+```bash
+npm run publish-lib
+# or
+yarn publish-lib
+```
+
+Note: This will automatically run the build process before publishing.
+
+## Dependencies
+
+### Main Dependencies
+
+- React 19.x
+- React DOM 19.x
+- Tailwind CSS 4.x
+- TypeScript 5.x
+- Vite 7.x
+
+### Development Tools
+
+- ESLint for code linting
+- Husky for git hooks
+- Vite Plugin DTS for TypeScript declarations
+
+## Browser Support
+
+This project supports modern browsers that are compatible with React 18+ and ES2020+ features.
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Run `yarn lint` to ensure code quality
+5. Submit a pull request
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Port already in use**: If port 5173 is busy, Vite will automatically use the next available port
+2. **Node version**: Ensure you're using Node.js version 16 or higher
+3. **Dependencies**: Delete `node_modules` and `package-lock.json`, then run `yarn install` if you encounter dependency issues
+
+### Getting Help
+
+If you encounter issues:
+
+1. Check the console for error messages
+2. Ensure all dependencies are properly installed
+3. Verify Node.js version compatibility
+4. Check the Vite documentation for additional configuration options

package/dist/components/Alert/helper/variants.d.ts

@@ -0,0 +1,115 @@
+export declare const alertVariants: import('tailwind-variants').TVReturnType<{
+    type: {
+        default: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    emphasize: {
+        false: string;
+        true: string;
+    };
+}, undefined, string[], {
+    type: {
+        default: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    emphasize: {
+        false: string;
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    type: {
+        default: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    emphasize: {
+        false: string;
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const alertContentVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const alertHeaderVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const alertIconVariants: import('tailwind-variants').TVReturnType<{
+    type: {
+        default: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    emphasize: {
+        false: string;
+        true: string;
+    };
+}, undefined, string[], {
+    type: {
+        default: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    emphasize: {
+        false: string;
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    type: {
+        default: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    emphasize: {
+        false: string;
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const alertTextVariants: import('tailwind-variants').TVReturnType<{
+    type: {
+        default: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    emphasize: {
+        false: string;
+        true: string;
+    };
+}, undefined, string[], {
+    type: {
+        default: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    emphasize: {
+        false: string;
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    type: {
+        default: string;
+        info: string;
+        success: string;
+        warning: string;
+        error: string;
+    };
+    emphasize: {
+        false: string;
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const alertBodyVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const alertBodyContentVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;

package/dist/components/Alert/helper/variants.js

@@ -0,0 +1,267 @@
+import { tv as e } from "../../../node_modules/tailwind-variants/dist/index.js";
+const t = e({
+  base: ["relative", "rounded-lg", "w-full", "border", "border-solid"],
+  variants: {
+    type: {
+      default: "",
+      info: "",
+      success: "",
+      warning: "",
+      error: ""
+    },
+    emphasize: {
+      false: "",
+      // Light background
+      true: ""
+      // Solid background
+    }
+  },
+  compoundVariants: [
+    // Default variants
+    {
+      type: "default",
+      emphasize: !1,
+      class: ["bg-bg-neutral-bold-rest", "border-neutral-strong"]
+    },
+    {
+      type: "default",
+      emphasize: !0,
+      class: ["bg-bg-neutral-boldest-rest", "border-bg-neutral-boldest-rest"]
+    },
+    // Info variants
+    {
+      type: "info",
+      emphasize: !1,
+      class: ["bg-bg-accent-info-subtle", "border-info-light"]
+    },
+    {
+      type: "info",
+      emphasize: !0,
+      class: ["bg-bg-accent-info-rest", "border-bg-accent-info-rest"]
+    },
+    // Success variants
+    {
+      type: "success",
+      emphasize: !1,
+      class: ["bg-bg-accent-success-subtle", "border-success-light"]
+    },
+    {
+      type: "success",
+      emphasize: !0,
+      class: ["bg-bg-accent-success-rest", "border-bg-accent-success-rest"]
+    },
+    // Warning variants
+    {
+      type: "warning",
+      emphasize: !1,
+      class: ["bg-bg-accent-warning-subtle", "border-warning-light"]
+    },
+    {
+      type: "warning",
+      emphasize: !0,
+      class: ["bg-bg-accent-warning-rest", "border-bg-accent-warning-rest"]
+    },
+    // Error variants
+    {
+      type: "error",
+      emphasize: !1,
+      class: ["bg-bg-accent-error-subtle", "border-error-light"]
+    },
+    {
+      type: "error",
+      emphasize: !0,
+      class: ["bg-bg-accent-error-rest", "border-bg-accent-error-rest"]
+    }
+  ],
+  defaultVariants: {
+    type: "default",
+    emphasize: !1
+  }
+}), a = e({
+  base: [
+    "flex",
+    "flex-col",
+    "gap-sm-2",
+    "items-start",
+    "justify-start",
+    "px-sm-2",
+    "py-xs",
+    "relative",
+    "w-full"
+  ]
+}), r = e({
+  base: [
+    "flex",
+    "flex-row",
+    "gap-xs",
+    "items-center",
+    "justify-center",
+    "relative",
+    "w-full"
+  ]
+}), n = e({
+  base: ["relative", "shrink-0"],
+  variants: {
+    type: {
+      default: "",
+      info: "",
+      success: "",
+      warning: "",
+      error: ""
+    },
+    emphasize: {
+      false: "",
+      true: ""
+    }
+  },
+  compoundVariants: [
+    // Default icon colors
+    {
+      type: "default",
+      emphasize: !1,
+      class: "text-fg-neutral-subtle"
+    },
+    {
+      type: "default",
+      emphasize: !0,
+      class: "text-fg-neutral-inverse"
+    },
+    // Info icon colors
+    {
+      type: "info",
+      emphasize: !1,
+      class: "text-fg-accent-info"
+    },
+    {
+      type: "info",
+      emphasize: !0,
+      class: "text-fg-neutral-inverse"
+    },
+    // Success icon colors
+    {
+      type: "success",
+      emphasize: !1,
+      class: "text-fg-accent-success"
+    },
+    {
+      type: "success",
+      emphasize: !0,
+      class: "text-fg-neutral-inverse"
+    },
+    // Warning icon colors
+    {
+      type: "warning",
+      emphasize: !1,
+      class: "text-fg-accent-warning"
+    },
+    {
+      type: "warning",
+      emphasize: !0,
+      class: "text-fg-neutral-inverse"
+    },
+    // Error icon colors
+    {
+      type: "error",
+      emphasize: !1,
+      class: "text-fg-accent-error"
+    },
+    {
+      type: "error",
+      emphasize: !0,
+      class: "text-fg-neutral-inverse"
+    }
+  ]
+}), l = e({
+  base: ["flex-1", "min-w-0"],
+  variants: {
+    type: {
+      default: "",
+      info: "",
+      success: "",
+      warning: "",
+      error: ""
+    },
+    emphasize: {
+      false: "",
+      true: ""
+    }
+  },
+  compoundVariants: [
+    // Default text colors
+    {
+      type: "default",
+      emphasize: !1,
+      class: "text-fg-neutral-subtle"
+    },
+    {
+      type: "default",
+      emphasize: !0,
+      class: "text-fg-neutral-inverse"
+    },
+    // Info text colors
+    {
+      type: "info",
+      emphasize: !1,
+      class: "text-fg-accent-info-strong"
+    },
+    {
+      type: "info",
+      emphasize: !0,
+      class: "text-fg-neutral-inverse"
+    },
+    // Success text colors
+    {
+      type: "success",
+      emphasize: !1,
+      class: "text-fg-accent-success-strong"
+    },
+    {
+      type: "success",
+      emphasize: !0,
+      class: "text-fg-neutral-inverse"
+    },
+    // Warning text colors
+    {
+      type: "warning",
+      emphasize: !1,
+      class: "text-fg-accent-warning-strong"
+    },
+    {
+      type: "warning",
+      emphasize: !0,
+      class: "text-fg-neutral-inverse"
+    },
+    // Error text colors
+    {
+      type: "error",
+      emphasize: !1,
+      class: "text-fg-accent-error-strong"
+    },
+    {
+      type: "error",
+      emphasize: !0,
+      class: "text-fg-neutral-inverse"
+    }
+  ]
+}), c = e({
+  base: ["relative", "w-full"]
+}), i = e({
+  base: [
+    "flex",
+    "flex-col",
+    "justify-center",
+    "relative",
+    "w-full",
+    "pl-7"
+    // Align with text after icon
+  ]
+});
+export {
+  i as alertBodyContentVariants,
+  c as alertBodyVariants,
+  a as alertContentVariants,
+  r as alertHeaderVariants,
+  n as alertIconVariants,
+  l as alertTextVariants,
+  t as alertVariants
+};

package/dist/components/Alert/index.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { IconName } from '../Icon';
+import { alertVariants } from './helper/variants';
+export type AlertVariants = VariantProps<typeof alertVariants>;
+export interface AlertProps extends AlertVariants, Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * The title text for the alert (optional)
+     */
+    title?: string;
+    /**
+     * The body/description text for the alert
+     */
+    children: React.ReactNode;
+    /**
+     * Custom icon name to override the default type-based icon
+     */
+    icon?: IconName;
+    /**
+     * Whether to show an icon (defaults to true)
+     */
+    showIcon?: boolean;
+}
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export { Alert };

package/dist/components/Alert/index.js

@@ -0,0 +1,91 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import { cn as n } from "../../shared/utils/cn.js";
+import { dataTestId as p } from "../../shared/utils/dataTestId.js";
+import { Typography as s } from "../Typography/index.js";
+import g from "../Icon/Icon.js";
+import { alertContentVariants as V, alertHeaderVariants as h, alertIconVariants as w, alertTextVariants as c, alertBodyVariants as I, alertBodyContentVariants as A, alertVariants as C } from "./helper/variants.js";
+const T = (a) => {
+  switch (a) {
+    case "info":
+      return "info-circle";
+    case "success":
+      return "check-circle";
+    case "warning":
+      return "alert-triangle";
+    case "error":
+      return "alert-octagon";
+    default:
+      return "info-circle";
+  }
+}, b = v(
+  ({
+    type: a = "default",
+    emphasize: e = !1,
+    title: t,
+    children: i,
+    icon: o,
+    showIcon: d = !0,
+    className: m,
+    ...f
+  }, u) => {
+    const x = o || T(a), N = a === "default" ? "line" : "solid";
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: u,
+        className: n(C({ type: a, emphasize: e }), m),
+        role: "alert",
+        ...p("Alert"),
+        ...f,
+        children: /* @__PURE__ */ l("div", { className: V(), children: [
+          /* @__PURE__ */ l("div", { className: h(), children: [
+            d && /* @__PURE__ */ r(
+              g,
+              {
+                name: x,
+                variant: N,
+                size: 20,
+                className: w({ type: a, emphasize: e }),
+                color: "currentColor"
+              }
+            ),
+            /* @__PURE__ */ r("div", { className: n(c({ type: a, emphasize: e })), children: t ? /* @__PURE__ */ r(
+              s,
+              {
+                variants: "action",
+                size: "md",
+                className: "leading-[20px] text-[14px]",
+                children: t
+              }
+            ) : /* @__PURE__ */ r(
+              s,
+              {
+                variants: "body",
+                size: "md",
+                className: "leading-[20px] text-[14px]",
+                children: i
+              }
+            ) })
+          ] }),
+          t && /* @__PURE__ */ r("div", { className: I(), children: /* @__PURE__ */ r("div", { className: A(), children: /* @__PURE__ */ r(
+            s,
+            {
+              variants: "body",
+              size: "md",
+              className: n(
+                "leading-[20px] text-[14px] w-full",
+                c({ type: a, emphasize: e })
+              ),
+              children: i
+            }
+          ) }) })
+        ] })
+      }
+    );
+  }
+);
+b.displayName = "Alert";
+export {
+  b as Alert
+};