@bodynarf/react.components 1.14.0 → 1.14.2

package/components/timeline/component/style.css

@@ -0,0 +1,416 @@
+@keyframes timeline-fade-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes timeline-fade-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.bbr-timeline {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.bbr-timeline .bbr-timeline-item {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  padding-bottom: 2rem;
+}
+.bbr-timeline .bbr-timeline-item:last-child {
+  padding-bottom: 0;
+}
+.bbr-timeline .bbr-timeline-item:last-child .bbr-timeline-connector {
+  display: none;
+}
+.bbr-timeline .bbr-timeline-marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  min-width: 1.5rem;
+  border-radius: 50%;
+  background: var(--bulma-primary, #00d1b2);
+  border: 2px solid var(--bulma-primary, #00d1b2);
+  color: var(--bulma-white, #fff);
+  font-size: 0.75rem;
+  font-weight: 600;
+  z-index: 1;
+  flex-shrink: 0;
+}
+.bbr-timeline .bbr-timeline-icon,
+.bbr-timeline .bbr-timeline-marker-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.65rem;
+}
+.bbr-timeline .bbr-timeline-content {
+  flex: 1;
+  background: var(--bulma-white, #fff);
+  border: 1px solid var(--bulma-grey-lighter, #dbdbdb);
+  border-radius: 4px;
+  padding: 1rem;
+  margin-left: 1rem;
+  box-shadow: 0 2px 4px rgba(var(--bulma-black, #0a0a0a), 0.05);
+}
+.bbr-timeline .bbr-timeline-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--bulma-grey-darker, #363636);
+  line-height: 1.25;
+}
+.bbr-timeline .bbr-timeline-text {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--bulma-grey, #7a7a7a);
+  line-height: 1.5;
+}
+.bbr-timeline .bbr-timeline-timestamp {
+  font-size: 0.75rem;
+  color: var(--bulma-grey-light, #b5b5b5);
+  margin-bottom: 0.25rem;
+}
+.bbr-timeline .bbr-timeline-connector {
+  position: absolute;
+  left: calc(0.75rem - 1px);
+  top: 1.5rem;
+  width: 2px;
+  height: calc(100% - 1.5rem);
+  background: var(--bulma-grey-lighter, #dbdbdb);
+  z-index: 0;
+}
+.bbr-timeline.is-left-aligned .bbr-timeline-item {
+  padding-left: 0;
+}
+.bbr-timeline.is-centered .bbr-timeline-item {
+  width: 50%;
+  margin-left: 50%;
+}
+.bbr-timeline.is-centered .bbr-timeline-item:nth-child(odd) {
+  margin-left: 0;
+  flex-direction: row-reverse;
+  text-align: right;
+}
+.bbr-timeline.is-centered .bbr-timeline-item:nth-child(odd) .bbr-timeline-content {
+  margin-left: 0;
+  margin-right: 1rem;
+}
+.bbr-timeline.is-centered .bbr-timeline-item:nth-child(odd) .bbr-timeline-connector {
+  left: auto;
+  right: calc(0.75rem - 1px);
+}
+.bbr-timeline.is-centered .bbr-timeline-marker {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bbr-timeline.is-centered .bbr-timeline-item:nth-child(odd) .bbr-timeline-marker {
+  left: auto;
+  right: 0;
+  transform: translateX(50%);
+}
+.bbr-timeline.is-centered .bbr-timeline-item:nth-child(even) .bbr-timeline-marker {
+  left: 0;
+  transform: translateX(-50%);
+}
+.bbr-timeline.is-centered .bbr-timeline-connector {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bbr-timeline.is-centered .bbr-timeline-item:nth-child(odd) .bbr-timeline-connector {
+  left: auto;
+  right: 0;
+  transform: translateX(50%);
+}
+.bbr-timeline.is-centered .bbr-timeline-item:nth-child(even) .bbr-timeline-connector {
+  left: 0;
+  transform: translateX(-50%);
+}
+.bbr-timeline.is-centered.has-separate-timestamps .bbr-timeline-timestamp {
+  position: absolute;
+  width: 100%;
+  margin-bottom: 0;
+}
+.bbr-timeline.is-centered.has-separate-timestamps .bbr-timeline-timestamp.is-left {
+  right: calc(50% + 0.75rem + 1rem);
+  left: auto;
+  text-align: right;
+}
+.bbr-timeline.is-centered.has-separate-timestamps .bbr-timeline-timestamp.is-right {
+  left: calc(50% + 0.75rem + 1rem);
+  right: auto;
+  text-align: left;
+}
+.bbr-timeline.is-centered.has-separate-timestamps .bbr-timeline-item:nth-child(odd) .bbr-timeline-timestamp.is-left {
+  display: none;
+}
+.bbr-timeline.is-centered.has-separate-timestamps .bbr-timeline-item:nth-child(even) .bbr-timeline-timestamp.is-right {
+  display: none;
+}
+.bbr-timeline.is-hollow .bbr-timeline-marker {
+  background: var(--bulma-white, #fff);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-primary .bbr-timeline-marker {
+  background: var(--bulma-white, #fff);
+  border-color: var(--bulma-primary, #00d1b2);
+  color: var(--bulma-primary, #00d1b2);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-link .bbr-timeline-marker {
+  background: var(--bulma-white, #fff);
+  border-color: var(--bulma-link, #485fc7);
+  color: var(--bulma-link, #485fc7);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-info .bbr-timeline-marker {
+  background: var(--bulma-white, #fff);
+  border-color: var(--bulma-info, #3e8ed0);
+  color: var(--bulma-info, #3e8ed0);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-success .bbr-timeline-marker {
+  background: var(--bulma-white, #fff);
+  border-color: var(--bulma-success, #48c78e);
+  color: var(--bulma-success, #48c78e);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-warning .bbr-timeline-marker {
+  background: var(--bulma-white, #fff);
+  border-color: var(--bulma-warning, #ffe08a);
+  color: var(--bulma-warning, #ffe08a);
+}
+.bbr-timeline.is-hollow .bbr-timeline-item.is-danger .bbr-timeline-marker {
+  background: var(--bulma-white, #fff);
+  border-color: var(--bulma-danger, #f14668);
+  color: var(--bulma-danger, #f14668);
+}
+.bbr-timeline.is-animated .bbr-timeline-item {
+  opacity: 0;
+}
+.bbr-timeline.is-animated .bbr-timeline-item.is-animated-left {
+  animation: timeline-fade-in-left 0.5s ease forwards;
+}
+.bbr-timeline.is-animated .bbr-timeline-item.is-animated-right {
+  animation: timeline-fade-in-right 0.5s ease forwards;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(1) {
+  animation-delay: 0s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(3) {
+  animation-delay: 0.3s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(4) {
+  animation-delay: 0.45s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(5) {
+  animation-delay: 0.6s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(6) {
+  animation-delay: 0.75s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(7) {
+  animation-delay: 0.9s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(8) {
+  animation-delay: 1.05s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(9) {
+  animation-delay: 1.2s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(10) {
+  animation-delay: 1.35s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(11) {
+  animation-delay: 1.5s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(12) {
+  animation-delay: 1.65s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(13) {
+  animation-delay: 1.8s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(14) {
+  animation-delay: 1.95s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(15) {
+  animation-delay: 2.1s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(16) {
+  animation-delay: 2.25s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(17) {
+  animation-delay: 2.4s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(18) {
+  animation-delay: 2.55s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(19) {
+  animation-delay: 2.7s;
+}
+.bbr-timeline.is-animated .bbr-timeline-item:nth-child(20) {
+  animation-delay: 2.85s;
+}
+.bbr-timeline.is-small .bbr-timeline-marker {
+  width: 1.25rem;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  font-size: 0.625rem;
+}
+.bbr-timeline.is-small .bbr-timeline-icon,
+.bbr-timeline.is-small .bbr-timeline-marker-content {
+  font-size: 0.55rem;
+}
+.bbr-timeline.is-small .bbr-timeline-title {
+  font-size: 0.875rem;
+}
+.bbr-timeline.is-small .bbr-timeline-text {
+  font-size: 0.75rem;
+}
+.bbr-timeline.is-small .bbr-timeline-timestamp {
+  font-size: 0.625rem;
+}
+.bbr-timeline.is-small .bbr-timeline-content {
+  padding: 0.75rem;
+}
+.bbr-timeline.is-small .bbr-timeline-connector {
+  left: calc(0.625rem - 1px);
+  top: 1.25rem;
+  height: calc(100% - 1.25rem);
+}
+.bbr-timeline.is-medium .bbr-timeline-marker {
+  width: 1.75rem;
+  height: 1.75rem;
+  min-width: 1.75rem;
+  font-size: 0.875rem;
+}
+.bbr-timeline.is-medium .bbr-timeline-icon,
+.bbr-timeline.is-medium .bbr-timeline-marker-content {
+  font-size: 0.75rem;
+}
+.bbr-timeline.is-medium .bbr-timeline-title {
+  font-size: 1.125rem;
+}
+.bbr-timeline.is-medium .bbr-timeline-text {
+  font-size: 1rem;
+}
+.bbr-timeline.is-medium .bbr-timeline-connector {
+  left: calc(0.875rem - 1px);
+  top: 1.75rem;
+  height: calc(100% - 1.75rem);
+}
+.bbr-timeline.is-large .bbr-timeline-marker {
+  width: 2rem;
+  height: 2rem;
+  min-width: 2rem;
+  font-size: 1rem;
+}
+.bbr-timeline.is-large .bbr-timeline-icon,
+.bbr-timeline.is-large .bbr-timeline-marker-content {
+  font-size: 0.875rem;
+}
+.bbr-timeline.is-large .bbr-timeline-title {
+  font-size: 1.25rem;
+}
+.bbr-timeline.is-large .bbr-timeline-text {
+  font-size: 1.125rem;
+}
+.bbr-timeline.is-large .bbr-timeline-content {
+  padding: 1.25rem;
+}
+.bbr-timeline.is-large .bbr-timeline-connector {
+  left: calc(1rem - 1px);
+  top: 2rem;
+  height: calc(100% - 2rem);
+}
+.bbr-timeline.is-primary .bbr-timeline-marker {
+  background: var(--bulma-primary, #00d1b2);
+  border-color: var(--bulma-primary, #00d1b2);
+  color: var(--bulma-white, #fff);
+}
+.bbr-timeline.is-primary .bbr-timeline-connector {
+  background: rgba(var(--bulma-primary, #00d1b2), 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-primary .bbr-timeline-marker {
+  background: var(--bulma-primary, #00d1b2);
+  border-color: var(--bulma-primary, #00d1b2);
+  color: var(--bulma-white, #fff);
+}
+.bbr-timeline.is-link .bbr-timeline-marker {
+  background: var(--bulma-link, #485fc7);
+  border-color: var(--bulma-link, #485fc7);
+  color: var(--bulma-white, #fff);
+}
+.bbr-timeline.is-link .bbr-timeline-connector {
+  background: rgba(var(--bulma-link, #485fc7), 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-link .bbr-timeline-marker {
+  background: var(--bulma-link, #485fc7);
+  border-color: var(--bulma-link, #485fc7);
+  color: var(--bulma-white, #fff);
+}
+.bbr-timeline.is-info .bbr-timeline-marker {
+  background: var(--bulma-info, #3e8ed0);
+  border-color: var(--bulma-info, #3e8ed0);
+  color: var(--bulma-white, #fff);
+}
+.bbr-timeline.is-info .bbr-timeline-connector {
+  background: rgba(var(--bulma-info, #3e8ed0), 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-info .bbr-timeline-marker {
+  background: var(--bulma-info, #3e8ed0);
+  border-color: var(--bulma-info, #3e8ed0);
+  color: var(--bulma-white, #fff);
+}
+.bbr-timeline.is-success .bbr-timeline-marker {
+  background: var(--bulma-success, #48c78e);
+  border-color: var(--bulma-success, #48c78e);
+  color: var(--bulma-white, #fff);
+}
+.bbr-timeline.is-success .bbr-timeline-connector {
+  background: rgba(var(--bulma-success, #48c78e), 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-success .bbr-timeline-marker {
+  background: var(--bulma-success, #48c78e);
+  border-color: var(--bulma-success, #48c78e);
+  color: var(--bulma-white, #fff);
+}
+.bbr-timeline.is-warning .bbr-timeline-marker {
+  background: var(--bulma-warning, #ffe08a);
+  border-color: var(--bulma-warning, #ffe08a);
+  color: rgba(0, 0, 0, 0.7);
+}
+.bbr-timeline.is-warning .bbr-timeline-connector {
+  background: rgba(var(--bulma-warning, #ffe08a), 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-warning .bbr-timeline-marker {
+  background: var(--bulma-warning, #ffe08a);
+  border-color: var(--bulma-warning, #ffe08a);
+  color: rgba(0, 0, 0, 0.7);
+}
+.bbr-timeline.is-danger .bbr-timeline-marker {
+  background: var(--bulma-danger, #f14668);
+  border-color: var(--bulma-danger, #f14668);
+  color: var(--bulma-white, #fff);
+}
+.bbr-timeline.is-danger .bbr-timeline-connector {
+  background: rgba(var(--bulma-danger, #f14668), 0.3);
+}
+.bbr-timeline .bbr-timeline-item.is-danger .bbr-timeline-marker {
+  background: var(--bulma-danger, #f14668);
+  border-color: var(--bulma-danger, #f14668);
+  color: var(--bulma-white, #fff);
+}

package/components/timeline/component/style.scss

@@ -1,3 +1,29 @@
+@use "sass:list";
+
+// Bulma variables - compatible with v0.9.x and v1.x
+// Uses CSS variables with fallbacks matching Bulma 0.9.4 defaults
+// v1.x: CSS variables (--bulma-*) will be used if defined
+// v0.9.x: Fallback values will be used (no CSS variables in 0.9.x)
+
+// Colors
+$primary: var(--bulma-primary, #00d1b2);
+$white: var(--bulma-white, #fff);
+$black: var(--bulma-black, #0a0a0a);
+$grey-lighter: var(--bulma-grey-lighter, #dbdbdb);
+$grey-light: var(--bulma-grey-light, #b5b5b5);
+$grey: var(--bulma-grey, #7a7a7a);
+$grey-darker: var(--bulma-grey-darker, #363636);
+
+// Color map for variations
+$colors: (
+    "primary": ($primary, $white),
+    "link": (var(--bulma-link, #485fc7), $white),
+    "info": (var(--bulma-info, #3e8ed0), $white),
+    "success": (var(--bulma-success, #48c78e), $white),
+    "warning": (var(--bulma-warning, #ffe08a), rgba(0, 0, 0, 0.7)),
+    "danger": (var(--bulma-danger, #f14668), $white)
+);
+
 $timeline-marker-size: 1.5rem !default;
 $timeline-marker-size-small: 1.25rem !default;
 $timeline-marker-size-medium: 1.75rem !default;
@@ -239,7 +265,7 @@ $timeline-item-spacing: 2rem !default;
         }
 
         @each $name, $pair in $colors {
-            $color: nth($pair, 1);
+            $color: list.nth($pair, 1);
 
             .bbr-timeline-item.is-#{$name} .bbr-timeline-marker {
                 background: $timeline-marker-hollow-bg;
@@ -369,8 +395,8 @@ $timeline-item-spacing: 2rem !default;
 
     // Color variations
     @each $name, $pair in $colors {
-        $color: nth($pair, 1);
-        $color-invert: nth($pair, 2);
+        $color: list.nth($pair, 1);
+        $color-invert: list.nth($pair, 2);
 
         &.is-#{$name} {
             .bbr-timeline-marker {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.14.0",
+    "version": "1.14.2",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"
@@ -21,19 +21,25 @@
         "bulma"
     ],
     "scripts": {
+        "dev": "cd examples && npm run dev",
+        "examples:install": "cd examples && npm install",
         "build": "npx tsc && tsc-alias -p tsconfig.json",
         "copy_styles": "copyfiles -u 1 src/**/*.scss dist",
         "copy_main": "copyfiles package.json *.md .npmignore dist",
         "transfer": "npm run copy_styles && npm run copy_main",
         "build_transfer": "npm run build && npm run transfer",
         "prepublish": "npm run build_transfer && cd dist && npm pack",
-        "publish_pkg": "npm run build_transfer && cd dist && npm publish --access=public",
-        "lint": "npx eslint src/**/*.ts src/**/*.tsx"
+        "publish_pkg": "npm run lint && npm run validate:scss && npm run build_transfer && cd dist && npm publish --access=public",
+        "lint": "npx eslint src/**/*.ts src/**/*.tsx",
+        "lint:scss": "npx stylelint \"src/**/*.scss\"",
+        "build:scss": "npx sass --load-path=node_modules src/:dist/ --no-source-map",
+        "validate:scss": "npm run lint:scss && npm run build:scss"
     },
     "devDependencies": {
         "@eslint/js": "^9.30.1",
         "@types/react": "^18.0.11",
         "@types/react-dom": "^18.0.5",
+        "bulma": "^0.9.4",
         "copyfiles": "^2.4.1",
         "eslint": "^9.32.0",
         "eslint-plugin-import": "^2.32.0",
@@ -41,9 +47,13 @@
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.20",
         "react": ">=18.1.0",
+        "sass": "^1.77.0",
+        "stylelint": "^16.6.0",
+        "stylelint-config-standard-scss": "^13.1.0",
         "tsc-alias": "^1.8.6",
         "typescript": "~5.8.3",
-        "typescript-eslint": "^8.35.1"
+        "typescript-eslint": "^8.35.1",
+        "vite-tsconfig-paths": "^6.1.1"
     },
     "peerDependencies": {
         "@bodynarf/utils": "latest",