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

arco-clone-react 1.3.0 → 1.3.1

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 (3) 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.
@@ -24,8 +24,8 @@ Test reports are automatically generated and deployed for every pull request.
 ## ~~Installation~~
 🚨 to be configured later.
 ```bash
 npm install design-system-poc
 ```
@@ -61,16 +61,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 +207,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 +226,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,139 +496,65 @@
 }
-/* src/components/Collapse/Collapse.module.css */
+/* src/components/Container/Container.module.css */
 /**
- * Collapse Component Styles
- *
- * Styling for Collapse component with smooth animations.
+ * Container Component Styles
+ * Responsive container with max-widths at each breakpoint
  */
-.collapse {
-  display: block;
-  background-color: #ffffff;
-  overflow: hidden;
-}
-.bordered {
-  border: 1px solid #e5e6eb;
-  border-radius: 4px;
-}
-.disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-/* Header */
-.header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 0.2s ease;
-  font-family:
-    'Nunito Sans',
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    sans-serif;
-  font-weight: 600;
-  color: #1d2129;
-}
-.header:hover:not(.disabled .header) {
-  background-color: #f7f8fa;
-}
-.header:focus-visible {
-  outline: 2px solid #165dff;
-  outline-offset: -2px;
-}
-.disabled .header {
-  cursor: not-allowed;
-}
-/* Sizes */
-.small .header {
-  padding: 8px 12px;
-  font-size: 12px;
-}
-.medium .header {
-  padding: 12px 16px;
-  font-size: 14px;
-}
-.large .header {
-  padding: 16px 20px;
-  font-size: 16px;
-}
-/* Icon */
-.icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  font-size: 10px;
-  color: #86909c;
-  transition: transform 0.3s ease;
-  flex-shrink: 0;
-}
-.expanded .icon {
-  transform: rotate(0deg);
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--container-max-width, 100%);
 }
-.header:not(.expanded) .icon {
-  transform: rotate(-90deg);
+/* Padded variant */
+.container--padded {
+  padding-left: var(--container-padding, 16px);
+  padding-right: var(--container-padding, 16px);
 }
-/* Header content */
-.headerContent {
-  flex: 1;
+/* Fluid variant - no max-width */
+.container--fluid {
+  max-width: none;
 }
-/* Content */
-.content {
-  height: 0;
-  overflow: hidden;
-  transition: height 0.3s ease;
+/* Responsive max-widths (when not fluid) */
+@media (min-width: 576px) {
+  .container:not(.container--fluid) {
+    max-width: 540px;
+  }
 }
-.contentExpanded {
-  overflow: visible;
+@media (min-width: 768px) {
+  .container:not(.container--fluid) {
+    max-width: 720px;
+  }
 }
-.contentInner {
-  padding: 0 16px 16px 16px;
-  color: #4e5969;
-  font-family:
-    'Nunito Sans',
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    sans-serif;
+@media (min-width: 992px) {
+  .container:not(.container--fluid) {
+    max-width: 960px;
+  }
 }
-.small .contentInner {
-  padding: 0 12px 8px 12px;
-  font-size: 12px;
+@media (min-width: 1200px) {
+  .container:not(.container--fluid) {
+    max-width: 1152px;
+  }
 }
-.medium .contentInner {
-  padding: 0 16px 12px 16px;
-  font-size: 14px;
+@media (min-width: 1600px) {
+  .container:not(.container--fluid) {
+    max-width: 1536px;
+  }
 }
-.large .contentInner {
-  padding: 0 20px 16px 20px;
-  font-size: 16px;
+@media (min-width: 2000px) {
+  .container:not(.container--fluid) {
+    max-width: 1920px;
+  }
 }
@@ -1194,65 +1120,139 @@
 }
-/* src/components/Container/Container.module.css */
+/* src/components/Collapse/Collapse.module.css */
 /**
- * Container Component Styles
- * Responsive container with max-widths at each breakpoint
+ * Collapse Component Styles
+ *
+ * Styling for Collapse component with smooth animations.
  */
-.container {
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--container-max-width, 100%);
+.collapse {
+  display: block;
+  background-color: #ffffff;
+  overflow: hidden;
 }
-/* Padded variant */
-.container--padded {
-  padding-left: var(--container-padding, 16px);
-  padding-right: var(--container-padding, 16px);
+.bordered {
+  border: 1px solid #e5e6eb;
+  border-radius: 4px;
 }
-/* Fluid variant - no max-width */
-.container--fluid {
-  max-width: none;
+.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
-/* Responsive max-widths (when not fluid) */
-@media (min-width: 576px) {
-  .container:not(.container--fluid) {
-    max-width: 540px;
-  }
+/* Header */
+.header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s ease;
+  font-family:
+    'Nunito Sans',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  font-weight: 600;
+  color: #1d2129;
 }
-@media (min-width: 768px) {
-  .container:not(.container--fluid) {
-    max-width: 720px;
-  }
+.header:hover:not(.disabled .header) {
+  background-color: #f7f8fa;
 }
-@media (min-width: 992px) {
-  .container:not(.container--fluid) {
-    max-width: 960px;
-  }
+.header:focus-visible {
+  outline: 2px solid #165dff;
+  outline-offset: -2px;
 }
-@media (min-width: 1200px) {
-  .container:not(.container--fluid) {
-    max-width: 1152px;
-  }
+.disabled .header {
+  cursor: not-allowed;
 }
-@media (min-width: 1600px) {
-  .container:not(.container--fluid) {
-    max-width: 1536px;
-  }
+/* Sizes */
+.small .header {
+  padding: 8px 12px;
+  font-size: 12px;
 }
-@media (min-width: 2000px) {
-  .container:not(.container--fluid) {
-    max-width: 1920px;
-  }
+.medium .header {
+  padding: 12px 16px;
+  font-size: 14px;
+}
+.large .header {
+  padding: 16px 20px;
+  font-size: 16px;
+}
+/* Icon */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font-size: 10px;
+  color: #86909c;
+  transition: transform 0.3s ease;
+  flex-shrink: 0;
+}
+.expanded .icon {
+  transform: rotate(0deg);
+}
+.header:not(.expanded) .icon {
+  transform: rotate(-90deg);
+}
+/* Header content */
+.headerContent {
+  flex: 1;
+}
+/* Content */
+.content {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.3s ease;
+}
+.contentExpanded {
+  overflow: visible;
+}
+.contentInner {
+  padding: 0 16px 16px 16px;
+  color: #4e5969;
+  font-family:
+    'Nunito Sans',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+}
+.small .contentInner {
+  padding: 0 12px 8px 12px;
+  font-size: 12px;
+}
+.medium .contentInner {
+  padding: 0 16px 12px 16px;
+  font-size: 14px;
+}
+.large .contentInner {
+  padding: 0 20px 16px 20px;
+  font-size: 16px;
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "arco-clone-react",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A React component library and design system",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",