trek 0.1.15 → 0.1.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b09da98ecaf56b2d61965f064a51258bc84dced5267977541a810f33416ee2f
-  data.tar.gz: ad5b3dfc7aaaeef7c8d996fd7ba89ee3f5057c5b93d9c40bcba859c37035b2d0
+  metadata.gz: dc939de6d6cc669e8faa27134dd868b9523bafa0236e1cf025673e0abb84d833
+  data.tar.gz: 6abb5b7e49ee16d38619f6831d62dda2a05871b09a81f9ea8d44021254a91774
 SHA512:
-  metadata.gz: ee62982045c3a349abfe75033fe60731cffb498408af1c6375afde95ef4477a7476f8781c4a206f72d4e04565e886165b652c9da488d0f8c3eb97c0a2c9b256b
-  data.tar.gz: dcb6b91baad0d783cefcf01c3afb15b54292d105844c291738e2a5972d96905c3c23e6d83435b35a78d0857eb7c12088d01ed21de3a595e8677002c26e214a29
+  metadata.gz: 69f4c70a9471eb21966c377cb419e98a314ecac4aeac31dc1f78501e8241450870de557ab77eadc2acc11fa5532193b8db3646406b8dbdee7780355c1e255483
+  data.tar.gz: 0c71c307f076c1c601ac37a1b016cc2508fcc78b56fbd114fd7769dce928581ff0daffb22c2f62c011e85fb6a9b8cf6445616c7d47b793538af516f15d01f781

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    trek (0.1.15)
+    trek (0.1.16)
       action_policy (~> 0.6)
       actioncable
       acts_as_list (~> 1.1)

data/README.md

@@ -172,12 +172,16 @@ Then, configure the project to use the local version of Trek (both the gem and t
 
 #### Linking to the local gem with bundler
 
-Let's use [Bundler `local` feature](https://bundler.io/v2.4/man/bundle-config.1.html#LOCAL-GIT-REPOS).
+Let's use [Bundler `local` feature](https://bundler.io/v2.7/man/bundle-config.1.html#LOCAL-GIT-REPOS).
+
+First, make sure you're pointing to Trek's git repo main branch in your `Gemfile`:
+
+    gem "trek", git: "git@git.etaminstud.io:etaminstudio/trek.git", branch: :main
 
 Navigate to your project, then configure the local version of Trek:
 
     cd /local/path/to/yourproject
-    bundle config local.trek /local/path/to/trek
+    bundle config set --local local.trek ~/projects/trek
 
 Install the gem and restart the Rails server:
 
@@ -190,17 +194,21 @@ When you're done, disable the local version:
 
     bundle config --delete local.trek
 
+Don't forget to revert to a released verion in your `Gemfile`:
+
+    gem "trek", "~> 0.1"
+
 #### Linking to the local NPM package with Yarn
 
 Let's use [Yarn `link` feature](https://yarnpkg.com/cli/link).
 
-    yarn link /local/path/to/trek
+    yarn link ~/projects/trek
 
 You don't need to restart the server when you change CSS or JS files in Trek.
 
 When you're done, disable the local package:
 
-    yarn unlink /local/path/to/trek
+    yarn unlink ~/projects/trek
 
 ### Publishing a new version
 

data/app/components/trek/button_group_component/button_group_component.css

@@ -0,0 +1,46 @@
+.root {
+  display: flex;
+  margin: 2.4rem 0;
+}
+
+.-button-root {
+  appearance: none;
+  background-color: var(--slate-1);
+  border: 1px solid var(--slate-6);
+  border-radius: 0;
+  color: var(--slate-11);
+  cursor: pointer;
+  font-size: 1.3rem;
+  font-weight: var(--semibold);
+  padding: 0.8rem 1.2rem;
+  text-decoration: none;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+
+  &:hover {
+    background-color: var(--accent-3);
+    border-color: var(--accent-8);
+    color: var(--slate-12);
+    position: relative;
+  }
+}
+
+.-button-root + .-button-root {
+  margin-left: -1px;
+}
+
+.root > .-button-root:first-child {
+  border-radius: 0.8rem 0 0 0.8rem;
+}
+
+.root > .-button-root:last-child {
+  border-radius: 0 0.8rem 0.8rem 0;
+}
+
+.-button-root.-button-active {
+  background-color: var(--accent-5);
+  border-color: var(--accent-8);
+  color: var(--accent-12);
+  cursor: default;
+  position: relative;
+}

data/app/components/trek/button_group_component/button_group_component.js

@@ -0,0 +1 @@
+import "./button_group_component.css";

data/app/components/trek/button_group_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class Trek::ButtonGroupComponent < Trek::Component
+  renders_many :buttons, "Button"
+
+  def call
+    tag.div(class: root_class) do
+      safe_join(buttons)
+    end
+  end
+
+  class Button < Trek::Component
+    option :active, default: proc { false }
+    option :color, optional: true
+    option :data, default: proc { {} }
+    option :href
+    option :text
+
+    def call
+      link_to(
+        text,
+        href,
+        class: classnames
+      )
+    end
+
+    def classnames
+      class_names_for(
+        root_class,
+        active:,
+        map_args: true
+      )
+    end
+  end
+end

data/app/components/trek/entries/item_component/item_component.css

@@ -0,0 +1,120 @@
+/* Use component-local class names and add them to HTML via #class_for(name) helper */
+
+.root {
+  align-items: center;
+  border-top: 1px solid var(--slate-6);
+  display: flex;
+  gap: 1rem;
+  padding: 1.5rem 0;
+  position: relative;
+  transition: background-color 0.2s ease-in-out;
+
+  &:only-child {
+    border-bottom: 1px solid var(--slate-6);
+  }
+
+  &:hover {
+    background-color: var(--slate-2);
+  }
+}
+
+table .root {
+  border: none !important;
+}
+
+.content {
+  align-items: center;
+  color: var(--slate-12);
+  flex-grow: 1;
+  line-height: 1.25;
+}
+
+.image {
+  --icon-size: 1.6rem;
+
+  align-items: center;
+  background-color: var(--slate-3);
+  border: 1px solid var(--slate-a3);
+  border-radius: 0.2rem;
+  color: var(--slate-8);
+  display: flex;
+  aspect-ratio: 16/9;
+  justify-content: center;
+  margin-right: 2rem;
+  overflow: hidden;
+  width: 10rem;
+
+  & img {
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+  }
+}
+
+.color-dot {
+  background-color: var(--color);
+  border-radius: 0.2rem;
+  display: inline-block;
+  height: 0.8rem;
+  margin-right: 1rem;
+  width: 0.8rem;
+}
+
+.title {
+  align-items: center;
+  display: flex;
+
+  &,
+  & a {
+    color: var(--slate-12);
+  }
+
+  & a {
+    text-decoration: none;
+  }
+
+  & a:hover {
+    color: var(--accent-10);
+    text-decoration: underline;
+  }
+
+  & a::after {
+    content: "";
+    inset: 0;
+    position: absolute;
+  }
+}
+
+.root > .root {
+  margin-left: 3rem;
+}
+
+.details {
+  color: var(--slate-9);
+  display: flex;
+  font-size: 1.3rem;
+  line-height: 1.2;
+  list-style: none;
+  margin: 0.2rem 0 0;
+  padding: 0;
+
+  & a {
+    color: var(--slate-10);
+    position: relative;
+    text-decoration: none;
+  }
+
+  & a:hover {
+    color: var(--accent-10);
+    text-decoration: underline;
+  }
+
+  & code {
+    line-height: 1;
+  }
+}
+
+.detail:not(:last-child)::after {
+  content: "•";
+  margin: 0 1rem;
+}

data/app/components/trek/entries/item_component/item_component.html.slim

@@ -0,0 +1,26 @@
+div(
+  class=classes
+  data=data.merge(id: item.id)
+  id=id
+)
+  - if image?
+    span(class=class_for("image")) = image
+
+  div(class=class_for("content"))
+    div(class=class_for("title"))
+      - if color?
+        = color_dot
+      - if title?
+        = title
+      - else
+        = item.to_s
+
+    - if details?
+      ul(class=class_for("details"))
+        - details.each do |detail|
+          - if detail.to_s.present?
+            li(class=class_for("detail")) = detail
+
+  - if status?
+    span(class=class_for("status"))
+      = status

data/app/components/trek/entries/item_component/item_component.js

@@ -0,0 +1 @@
+import "./item_component.css";

data/app/components/trek/entries/item_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Trek
+  class Entries::ItemComponent < Trek::Component
+    option :action, type: proc(&:to_sym), default: proc { :edit }
+    option :classnames, default: proc { {} }
+    option :data, default: proc { {} }
+    option :id, optional: true
+    option :item
+
+    renders_one :title, ->(href:, &block) { href ? link_to(href, &block) : tag.span(block&.call) }
+    renders_one :image, ->(src) { src ? image_tag(src, loading: "lazy") : render(Trek::IconComponent.new("trek/pic")) }
+    renders_one :status
+    renders_many :buttons, Trek::ButtonComponent
+    renders_many :details
+
+    delegate :allowed_to?, to: :helpers
+
+    private
+
+    def classes
+      class_names_for(
+        root_class,
+        (item.status if item.respond_to?(:status)),
+        map_args: true,
+        **classnames
+      )
+    end
+
+    def color?
+      item.respond_to?(:color)
+    end
+
+    def color_dot
+      tag.span(
+        class: class_for("color-dot"),
+        style: item.color ? "--color: var(--list-dot-#{item.color}, var(--#{item.color}, #{item.color}))" : "--color: var(--list-dot-empty, darkgrey);"
+      )
+    end
+  end
+end

data/app/components/trek/entries_component/entries_component.css

@@ -0,0 +1,7 @@
+/* Use component-local class names and add them to HTML via #class_for(name) helper */
+
+.root {
+  margin: 0;
+  max-width: 120rem;
+  padding: 0;
+}

data/app/components/trek/entries_component/entries_component.js

@@ -0,0 +1,2 @@
+import "./entries_component.css";
+import "../entries/item_component/item_component.js";

data/app/components/trek/entries_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Trek
+  class EntriesComponent < Trek::Component
+    renders_many :items, Trek::Entries::ItemComponent
+
+    def before_render
+      content
+    end
+
+    def call
+      tag.div(
+        joined_content,
+        class: root_class
+      )
+    end
+
+    def joined_content
+      return t(".empty") if items.empty?
+
+      safe_join(items)
+    end
+  end
+end

data/config/locales/trek.en.yml

@@ -32,6 +32,7 @@ en:
         theme: Theme
   admin:
     actions:
+      all: All
       browse: Browse…
       cancel: Cancel
       delete: Delete
@@ -201,6 +202,8 @@ en:
     dialog_component:
       text: This action cannot be undone.
       title: Are you sure?
+    entries_component:
+      empty: No items found
     form:
       content_editor_component:
         blockquote: Quote

data/config/locales/trek.fr.yml

@@ -32,6 +32,7 @@ fr:
         theme: Thème
   admin:
     actions:
+      all: Tout
       browse: Parcourir…
       cancel: Annuler
       delete: Supprimer
@@ -203,6 +204,8 @@ fr:
     dialog_component:
       text: Cette action ne peut pas être annulée.
       title: Êtes-vous sûr·e ?
+    entries_component:
+      empty: Aucun élément
     form:
       content_editor_component:
         blockquote: Citation

data/lib/trek/typography_formatter.rb

@@ -69,7 +69,7 @@ module Trek
     end
 
     def add_nbsp_before_chars
-      regexp = /\b(\p{Zs}?(#{NBSP_BEFORE_CHARS.join("|")}))/
+      regexp = /(?<=\S)(\p{Zs}?(#{NBSP_BEFORE_CHARS.join("|")}))/
       @output.gsub!(regexp, "#{NBSP}\\2")
     end
 

data/lib/trek/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Trek
-  VERSION = "0.1.15"
+  VERSION = "0.1.16"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etaminstudio/trek",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "A modern CMS for Ruby on Rails",
   "main": "app/javascript/trek.js",
   "repository": {

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: trek
 version: !ruby/object:Gem::Version
-  version: 0.1.15
+  version: 0.1.16
 platform: ruby
 authors:
 - Mohamed Bengrich
@@ -499,6 +499,9 @@ files:
 - app/components/trek/button_component.rb
 - app/components/trek/button_component/button_component.css
 - app/components/trek/button_component/button_component.js
+- app/components/trek/button_group_component.rb
+- app/components/trek/button_group_component/button_group_component.css
+- app/components/trek/button_group_component/button_group_component.js
 - app/components/trek/component.rb
 - app/components/trek/dashboard/section_component.rb
 - app/components/trek/dashboard/section_component/section_component.css
@@ -512,6 +515,13 @@ files:
 - app/components/trek/dialog_component/dialog_component.css
 - app/components/trek/dialog_component/dialog_component.html.slim
 - app/components/trek/dialog_component/dialog_component.js
+- app/components/trek/entries/item_component.rb
+- app/components/trek/entries/item_component/item_component.css
+- app/components/trek/entries/item_component/item_component.html.slim
+- app/components/trek/entries/item_component/item_component.js
+- app/components/trek/entries_component.rb
+- app/components/trek/entries_component/entries_component.css
+- app/components/trek/entries_component/entries_component.js
 - app/components/trek/form/actions_component.rb
 - app/components/trek/form/actions_component/actions_component.css
 - app/components/trek/form/actions_component/actions_component.html.slim