npm - arco-clone-react - Versions diffs - 1.3.0 → 1.5.0 - Mend

arco-clone-react 1.3.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md CHANGED Viewed

@@ -5,7 +5,7 @@
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.7-blue.svg)](https://www.typescriptlang.org/)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-# ⚠️ This is just a proof of concept, its purpose is to showcase my design-system implementation/tooling skills, not really intended to be used in production.
+## ⚠️ This is just a proof of concept, not really intended to be used in production.
 A React component library and design system built with TypeScript and CSS Modules (using figma tokens, based on [Arco Design system](https://www.figma.com/community/file/1053233047330321743/arco-design-system) )
 Test reports are automatically generated and deployed for every pull request.
@@ -22,12 +22,10 @@ Test reports are automatically generated and deployed for every pull request.
 - Semantic versioning with automated releases
 - GitHub Actions CI/CD pipeline
-## ~~Installation~~
+## Installation
-🚨 to be configured later.
 ```bash
-npm install design-system-poc
+npm install arco-clone-react
 ```
 ## Usage
@@ -61,16 +59,27 @@ This will automatically load the Nunito Sans font from Google Fonts and apply th
 If you prefer to manage fonts yourself, add this to your HTML `<head>`:
 ```html
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap"
+  rel="stylesheet"
+/>
 ```
 Then set the font family in your CSS:
 ```css
 body {
-  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family:
+    'Nunito Sans',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
 }
 ```
@@ -196,13 +205,13 @@ This project uses [Conventional Commits](https://www.conventionalcommits.org/):
 Every pull request and push to `main` triggers automated checks:
-| Job | Description | Artifacts |
-|-----|-------------|-----------|
-| **Lint** | ESLint checks for code quality | - |
-| **Type Check** | TypeScript compilation and type safety | - |
-| **Test** | Unit tests with Vitest + Storybook tests | Test results, coverage |
-| **Visual Regression** | Playwright screenshot comparison | Visual diffs, HTML report |
-| **Build** | Library and Storybook build verification | Build output |
+| Job                   | Description                              | Artifacts                 |
+| --------------------- | ---------------------------------------- | ------------------------- |
+| **Lint**              | ESLint checks for code quality           | -                         |
+| **Type Check**        | TypeScript compilation and type safety   | -                         |
+| **Test**              | Unit tests with Vitest + Storybook tests | Test results, coverage    |
+| **Visual Regression** | Playwright screenshot comparison         | Visual diffs, HTML report |
+| **Build**             | Library and Storybook build verification | Build output              |
 ### Pull Request Workflow
@@ -215,15 +224,18 @@ Every pull request and push to `main` triggers automated checks:
 ### Viewing Test Results
 **Option 1: GitHub Actions UI**
 1. Go to the "Actions" tab in GitHub
 2. Click on the workflow run for your PR
 3. Download artifacts (visual-regression-results, test-results, build-output)
 **Option 2: PR Comments**
 - Visual regression results are automatically commented on PRs
 - Includes links to artifacts and instructions for updating snapshots
 **Option 3: Local Testing**
 ```bash
 # Run all checks locally before pushing
 npm run lint

package/dist/index.css CHANGED Viewed

@@ -1,90 +1,3 @@
-/* src/components/Stack/Stack.module.css */
-/**
- * Stack Component Styles
- * One-directional flex container with consistent spacing
- */
-.stack {
-  display: flex;
-  gap: var(--stack-spacing, 16px);
-}
-/* Direction */
-.stack--vertical {
-  flex-direction: column;
-}
-.stack--horizontal {
-  flex-direction: row;
-}
-/* Wrap */
-.stack--wrap {
-  flex-wrap: wrap;
-}
-/* Alignment */
-.stack--align-start {
-  align-items: start;
-}
-.stack--align-center {
-  align-items: center;
-}
-.stack--align-end {
-  align-items: end;
-}
-.stack--align-stretch {
-  align-items: stretch;
-}
-.stack--align-baseline {
-  align-items: baseline;
-}
-/* Justify */
-.stack--justify-start {
-  justify-content: start;
-}
-.stack--justify-center {
-  justify-content: center;
-}
-.stack--justify-end {
-  justify-content: end;
-}
-.stack--justify-space-between {
-  justify-content: space-between;
-}
-.stack--justify-space-around {
-  justify-content: space-around;
-}
-.stack--justify-space-evenly {
-  justify-content: space-evenly;
-}
-/* Divider */
-.stackDivider {
-  flex-shrink: 0;
-}
-.stack--vertical .stackDivider {
-  width: 100%;
-  height: 1px;
-}
-.stack--horizontal .stackDivider {
-  width: 1px;
-  height: 100%;
-}
 /* src/components/Tabs/Tabs.module.css */
 /* Tabs Component Styles */
@@ -270,6 +183,93 @@
 }
+/* src/components/Stack/Stack.module.css */
+/**
+ * Stack Component Styles
+ * One-directional flex container with consistent spacing
+ */
+.stack {
+  display: flex;
+  gap: var(--stack-spacing, 16px);
+}
+/* Direction */
+.stack--vertical {
+  flex-direction: column;
+}
+.stack--horizontal {
+  flex-direction: row;
+}
+/* Wrap */
+.stack--wrap {
+  flex-wrap: wrap;
+}
+/* Alignment */
+.stack--align-start {
+  align-items: start;
+}
+.stack--align-center {
+  align-items: center;
+}
+.stack--align-end {
+  align-items: end;
+}
+.stack--align-stretch {
+  align-items: stretch;
+}
+.stack--align-baseline {
+  align-items: baseline;
+}
+/* Justify */
+.stack--justify-start {
+  justify-content: start;
+}
+.stack--justify-center {
+  justify-content: center;
+}
+.stack--justify-end {
+  justify-content: end;
+}
+.stack--justify-space-between {
+  justify-content: space-between;
+}
+.stack--justify-space-around {
+  justify-content: space-around;
+}
+.stack--justify-space-evenly {
+  justify-content: space-evenly;
+}
+/* Divider */
+.stackDivider {
+  flex-shrink: 0;
+}
+.stack--vertical .stackDivider {
+  width: 100%;
+  height: 1px;
+}
+.stack--horizontal .stackDivider {
+  width: 1px;
+  height: 100%;
+}
 /* src/components/Inline/Inline.module.css */
 /**
  * Inline Component Styles
@@ -496,6 +496,329 @@
 }
+/* src/components/Drawer/Drawer.module.css */
+/* Drawer Component Styles */
+.drawerContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+.drawerContainer > * {
+  pointer-events: auto;
+}
+/* Overlay */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  animation: fadeIn 0.3s ease;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+/* Drawer */
+.drawer {
+  position: fixed;
+  background: var(--color-bg-white, #fff);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  outline: none;
+}
+/* Placement: Right (default) */
+.drawer.right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  animation: slideInRight 0.3s ease;
+}
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+/* Placement: Left */
+.drawer.left {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  animation: slideInLeft 0.3s ease;
+}
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+/* Placement: Top */
+.drawer.top {
+  top: 0;
+  left: 0;
+  right: 0;
+  animation: slideInTop 0.3s ease;
+}
+@keyframes slideInTop {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+/* Placement: Bottom */
+.drawer.bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  animation: slideInBottom 0.3s ease;
+}
+@keyframes slideInBottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+/* Size: Small */
+.drawer.right.small,
+.drawer.left.small {
+  width: 320px;
+}
+.drawer.top.small,
+.drawer.bottom.small {
+  height: 240px;
+}
+/* Size: Medium (default) */
+.drawer.right.medium,
+.drawer.left.medium {
+  width: 480px;
+}
+.drawer.top.medium,
+.drawer.bottom.medium {
+  height: 360px;
+}
+/* Size: Large */
+.drawer.right.large,
+.drawer.left.large {
+  width: 640px;
+}
+.drawer.top.large,
+.drawer.bottom.large {
+  height: 480px;
+}
+/* Size: Full */
+.drawer.right.full,
+.drawer.left.full {
+  width: 100%;
+}
+.drawer.top.full,
+.drawer.bottom.full {
+  height: 100%;
+}
+/* Header */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--color-border, #e0e0e0);
+  flex-shrink: 0;
+}
+.title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary, #333);
+}
+.closeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  background: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  color: var(--color-text-secondary, #666);
+  transition: all 0.2s ease;
+  margin-left: auto;
+}
+.closeButton:hover {
+  background: var(--color-bg-hover, rgba(0, 0, 0, 0.04));
+  color: var(--color-text-primary, #333);
+}
+.closeButton:focus-visible {
+  outline: 2px solid var(--color-primary, #1890ff);
+  outline-offset: 2px;
+}
+.closeButton:active {
+  transform: scale(0.95);
+}
+/* Body */
+.body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+/* Footer */
+.footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--color-border, #e0e0e0);
+  flex-shrink: 0;
+}
+/* Responsive */
+@media (max-width: 768px) {
+  .drawer.right.small,
+  .drawer.left.small,
+  .drawer.right.medium,
+  .drawer.left.medium {
+    width: 100%;
+  }
+  .drawer.top.small,
+  .drawer.bottom.small,
+  .drawer.top.medium,
+  .drawer.bottom.medium {
+    height: 80%;
+  }
+  .drawer.right.large,
+  .drawer.left.large {
+    width: 100%;
+  }
+  .drawer.top.large,
+  .drawer.bottom.large {
+    height: 90%;
+  }
+  .header {
+    padding: 1rem;
+  }
+  .body {
+    padding: 1rem;
+  }
+  .footer {
+    padding: 0.75rem 1rem;
+  }
+  .title {
+    font-size: 1.125rem;
+  }
+}
+/* src/components/Container/Container.module.css */
+/**
+ * Container Component Styles
+ * Responsive container with max-widths at each breakpoint
+ */
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--container-max-width, 100%);
+}
+/* Padded variant */
+.container--padded {
+  padding-left: var(--container-padding, 16px);
+  padding-right: var(--container-padding, 16px);
+}
+/* Fluid variant - no max-width */
+.container--fluid {
+  max-width: none;
+}
+/* Responsive max-widths (when not fluid) */
+@media (min-width: 576px) {
+  .container:not(.container--fluid) {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container:not(.container--fluid) {
+    max-width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  .container:not(.container--fluid) {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container:not(.container--fluid) {
+    max-width: 1152px;
+  }
+}
+@media (min-width: 1600px) {
+  .container:not(.container--fluid) {
+    max-width: 1536px;
+  }
+}
+@media (min-width: 2000px) {
+  .container:not(.container--fluid) {
+    max-width: 1920px;
+  }
+}
 /* src/components/Collapse/Collapse.module.css */
 /**
  * Collapse Component Styles
@@ -1194,65 +1517,3 @@
 }
-/* src/components/Container/Container.module.css */
-/**
- * Container Component Styles
- * Responsive container with max-widths at each breakpoint
- */
-.container {
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--container-max-width, 100%);
-}
-/* Padded variant */
-.container--padded {
-  padding-left: var(--container-padding, 16px);
-  padding-right: var(--container-padding, 16px);
-}
-/* Fluid variant - no max-width */
-.container--fluid {
-  max-width: none;
-}
-/* Responsive max-widths (when not fluid) */
-@media (min-width: 576px) {
-  .container:not(.container--fluid) {
-    max-width: 540px;
-  }
-}
-@media (min-width: 768px) {
-  .container:not(.container--fluid) {
-    max-width: 720px;
-  }
-}
-@media (min-width: 992px) {
-  .container:not(.container--fluid) {
-    max-width: 960px;
-  }
-}
-@media (min-width: 1200px) {
-  .container:not(.container--fluid) {
-    max-width: 1152px;
-  }
-}
-@media (min-width: 1600px) {
-  .container:not(.container--fluid) {
-    max-width: 1536px;
-  }
-}
-@media (min-width: 2000px) {
-  .container:not(.container--fluid) {
-    max-width: 1920px;
-  }
-}