frankdugan3 / pyro Goto Github PK
View Code? Open in Web Editor NEWCompose extensible components for Phoenix.
License: MIT License
Compose extensible components for Phoenix.
License: MIT License
Any ERP will not use more than 20 screen types. We call them archetypes. This is a human factor not a technical factor
Lets express it in functionnal programming (dsl design can wait)
Assuming we have 100 resource and 10 archetypes
#count | function | Language |
---|---|---|
10 | archetypes() | Language: Spark DSL |
1000 | view = archetype(resource, architecture) | Language: Spark DSL |
1000 | architecture = tree of components | Language: Php/HEEX/JSX/PHP |
50 | component | Language: HTML/JS Function (JSX) / Ideally One Tag. |
1M | view_request = view(resource_instance) | . |
200 | navigation_item = tree of {title, ui_action} | . |
2000 | ui_action = see the action spec bellow. | . |
an architecture is an adaptation of the view archetype to the resource, it's the device used for customizing an archetype to a specific resource.
There is a clear separation between this 2 levels
--------------------------
archetype <- view types any app should have less that 20. This is a Human factor not a technical factor
archetype_config <- usage may dictate different type of configuraton
view <- an instance of call to the archetype function
--------------------------
architecture. <- built with the bricks of the design system. Hence the term architecture
components. <- provided by the design system
--------------------------
UI Actions are defined here:
https://gist.github.com/couhajjou/abe2c01ea24d5d48db52ec84c0eed987#gistcomment-4824306
will follow
...
...
Describe the bug
Links to AshPyro and PyroComponents are broken in readme
To Reproduce
Expected behavior
Additional context
Are AshPyro and PyroComponents open source and available?
We need a component to select dark/light/system theme. Should be flexible, providing various layouts, such as list of buttons, drop down menu, etc.
As always, plenty of overrides to customize it as well.
Check out priv/static/pyro.js
to see the client-side API.
hi! I'm following the install instructions, and I've run into a situation I can't seem to find my way out of. I can compile tails
without setting colors_file
, but when I try to do mix phlegethon.setup
after setting the colors file, I get:
== Compilation error in file lib/tails.ex ==
** (File.Error) could not read file "/home/axe/src/garage/assets/tailwind.phlegethon.colors.json": no such file or directory
(elixir 1.14.3) lib/file.ex:358: File.read!/1
lib/tails.ex:3: (module)
could not compile dependency :tails, "mix compile" failed. Errors may have been logged above. You can recompile this dependency with "mix deps.compile tails", update it with "mix deps.update tails" or clean it with "mix deps.clean tails"
Do I need to generate a default first?
Describe the bug
In on_definition,
Module.get_attribute(env.module, :__components__)[name][:attrs]
is returning null for my component
I'm not sure why. Does it mean my component doesn't have any attributes declared?
This causes:
** (Protocol.UndefinedError) protocol Enumerable not implemented for nil of type Atom
(elixir 1.15.0-rc.1) lib/enum.ex:1: Enumerable.impl_for!/1
(elixir 1.15.0-rc.1) lib/enum.ex:166: Enumerable.reduce/3
(elixir 1.15.0-rc.1) lib/enum.ex:4384: Enum.map/2
(pyro 0.2.0) lib/pyro/component.ex:343: Pyro.Component.__on_definition__/6
lib/kantan_web/controllers/auth_html.ex:2: (module)
To Reproduce
git clone https://github.com/dev-guy/phoenix-ash-svelte-flowbite.git
phoenix-ash-svelte-flowbite
git checkout lv8-issue2
mix setup
mix phx.server
Expected behavior
No error
Additional context
If you comment out this line:
The problem goes away. This line of code is turning everything under assets/svelte/*.svelte into a component, and it's possible that it's creating components that aren't following the rules, which would require woutdp/live_svelte#56 to be fixed.
I can't tell which project has the bug. Perhaps live_svelte needs to add an empty list to components' metadata. Or maybe Pyro's on_definition needs to check for nil.
I'm happy to create a PR for Pyro if that's OK with you, @frankdugan3
It would be good to be able to programmatically generate classes for things like colors. Lots of components will have repetitive classes for each color, but Tailwind requires those classes to be literal to be included by the compiler.
We can work around this because we already have a custom compiler, so we could create some kind of generator macro to accumulate the literal classes and add them to a safelist to ensure Tailwind picks them up.
Describe the bug
On following the steps to setup the project I called mix setup
and got a compilation error:
== Compilation error in file lib/phlegethon/components/core.ex ==
** (File.Error) could not list directory "/Users/bryan/open_source/phlegethon/priv/hero_icons/optimized/24/outline": no such file or directory
(elixir 1.14.3) lib/file.ex:1637: File.ls!/1
lib/phlegethon/components/core.ex:934: (module)
To Reproduce
git clone [email protected]:frankdugan3/phlegethon.git
cd phlegethon
mix setup
Wait a long time...........
Compilation error
Expected behavior
NO compilation error.
Additional context
Nope.
Compiling with import MyAppWeb.CoreComponents
removed (as suggested in the installation guide) fails 'cause show/2
and hide/2
are missing.
The call to show/2
and hide/2
happen in app.html.heex
It would be great to add several options for override presets. That would make it much easier to provide end-users to pick a good starting point for their overrides.
Not just different color schemes, but differing spacing, borders, layout etc. as well. This is important not only for a quick start, but also for demonstrating/validating the flexibility of the library.
Part of this would be to rename the current default
override to ash
and create a more generically appealing/unbranded theme as the default.
There are a lot of great theme inspirations on Hugo.
Describe the use case for this component
We need a generic SlideOver
component.
Additional context
Petal has a good implementation to use as inspiration.
Once Igniter is a little further along and documented, Pyro should define some patchers/generators to ease installation and use of Pyro.
Depending on the feature set Igniter settles on, it may be desirable to add some interactive TUI on top to guide through the options.
Currently, there are a ton of steps to install. Would be good to toss around ideas about how to minimize those and work toward a smoother experience for the end user.
#1 is one way forward by using code patching. This issue is about making a better API and instructions.
I am using the code in the main branch which includes the fix for #26. I found another place where a similar error occurs.
** (KeyError) key :line not found in: nil
If you are using the dot syntax, such as map.field, make sure the left-hand side of the dot is a map
(pyro 0.2.0) lib/pyro/component.ex:357: Pyro.Component.__on_definition__/6
first_attr = List.first(attrs)
# Automatically mark the doc type as a component
Module.put_attribute(env.module, :doc, {first_attr.line - 1, type: :component})
I'm not super happy with Phlegethon
as the project name (although it is growing on my). I'm open to any suggestions on better branding, as well as a logo (I have 0 design skill).
Phoenix's new <.link>
component is a great implementation that covers all the bases, but it might be convenient to wrap it in order to provide override classes. Would be trivial to do and probably worth the effort to provide consistency across the framework.
One goofy alternative is to name the wrapper something like <.plink>
.
Interested in how people feel about this.
Describe the use case/problems solved for this component revision
It would be very convenient to add a copy-to-clipboard button to the <.code />
component.
This would add the following overridables
:
Additional context
This PhoenixFiles blog is a pretty good example implementation.
See assets/css/phlegethon.css
@layer root {
::selection,
::-moz-selection {
@apply text-white bg-sky-500 bg-opacity-100;
}
ETC.
'root' should probably be 'base'. See: https://tailwindcss.com/docs/functions-and-directives
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.