aragon / ui Goto Github PK
View Code? Open in Web Editor NEWπ¦ UI kit for decentralized apps
Home Page: https://ui.aragon.org/
License: MIT License
π¦ UI kit for decentralized apps
Home Page: https://ui.aragon.org/
License: MIT License
Discussion started in this PR: aragon/client#68 (comment)
@sohkai What do you think?
It could be cool if we had a provider-like component (think react-redux) to connect components more easily to Aragon.js.
We could explore what Truffle did in drizzle-react.
This is a tomorrow issue.
There seems to be a ton of flow errors right now. Not sure how difficult they are to fix (maybe just updating some typings for most of them?), but it'd be nice to investigate.
Note: we will likely want to include a two-panel DateInput
as well.
Normal:
Expanded:
Range:
Location: src/Form/DateInput.js
Potential components: react-datepicker, react-dates, react-day-picker
aragon-ui has the most updated config, so we can go off of this.
See discussion: https://github.com/aragon/aragon-ui/pull/34#issue-278579277
There's a lot of components we more or less reuse across all the aragon-apps (e.g. the app's layout, an app provider, top-level connector) that could live here :).
It should be possible to switch between multiple organizations in the Electron client, much like on Slack. The switcher should approximately look the same too, where the badge on the organization icon is the number of unread notifications in that organization.
Related to aragon/client#47.
See most app side panels.
Location: src/Form/Form.js
Opening an issue after having discussed this with @izqui.
Our icon set is composed of actions (notifications, wallet,Β β¦) and app icons (tokens, fundraising,Β β¦). Some icons used for apps are also used to represent actions. At the moment, their name is describing the app they represent.
This is the Identity app icon, which is named IconIdentity
:
You can see it being used in the Aragon menu:
And this same icon is also used as a βTransfer tokenβ action in the Tokens app:
A consumer of this package could want to use their own instance (or version) of styled-components
. It'd be nice if they could install and provide their own instance of styled-components
.
According to https://github.com/aragon/aragon-ui/blob/master/LICENSE , the license area in package.json should be MIT
This seems to be due to flexbox not giving flex containers the full width of their children when the viewport is small (and the content is larger than the viewport; i.e. a horizontal scrollbar is needed). I've noticed this while working on the wrapper as well.
@bpierre Do you know of a good solution? I've only been able to mitigate this by using relatively unsupported width
values (fit-content
and min-content
).
E.g. SidePanel
could pass down opened
via a render prop, most HOCs should have a render prop equivalent exposed.
Source: src/Donut/Donut.js
Similar examples: rebass/donut
Some full-width components are now responsive and should be rendered in an iframe to make the media queries work properly.
We should replace springConf
with a springs
object that contains each of the configurations.
It would be nice to have an autocomplete feature for e.g. address fields, displaying different entities and apps in and outside your organisation.
I imagine something like this (excuse the non-jpg):
ββββββββββββββββββββββββββββββββββββ
β 0xdeadbeef β <- What you type
ββββββββββββββββββββββββββββββββββββ‘
β 0xdeadbeef β <- Autocomplete of what you type
ββββββββββββββββββββββββββββββββββββ€
β APPS β <- Label
β Permissions (0xddadbeef) β <- Apps in DAO
ββββββββββββββββββββββββββββββββββββ€
β ENTITIES β <- Label
β satoshi.aragonid.eth (0xdddbeef) β <- Interesting entities in DAO
ββββββββββββββββββββββββββββββββββββ
shared-utils
and math-utils
should live under a utils/
directory.
It would also be nice to move some of the related code in shared-utils
to their own file, e.g. a utils/styled/breakpoints.js
.
Wide:
Expanded (with search capability):
Location: src/Form/Select.js
Example: react-select
The normal and wide options may be serviceable via the DropDown
component, but we'd have to figure out if it'll work with the form.
The SidePanel scroll need to take over the app scroll when opened.
These components still need their READMEs and gallery pages:
We need to define the kind of animations we want to apply to different cases, and expose their parameters in Aragon UI.
We could split them in two groups:
spring()
CSS timing function is still at the proposal stage) and will mostly consist of guidelines about when and how to use them. We could also decide to not use any transition at all in these cases, depending on the kind of feeling we want to express.[1] If you are not familiar with spring based animations, I recommend reading βCreating Animations and Interactions with Physical Modelsβ and/or watching this talk by Cheng Lou (author of React Motion) to understand why they are awesome β¨
We need to design / implement focus, disabled and pressed states for these components:
Question: do we want hover effects?
Add https://github.com/gajus/create-index and autogenerate index.js
files for each component folder.
@bpierre and I were also discussing what we should do when we need to use "internal" components in more than one place. One idea would be to allow named exports (i.e. export { ... }
) from a component so that internal components could access them, but then to not export them to consumers by only re-exporting the default export from each component.
An example, for better clarity:
// in component.js
const InternalComponent = {}
const Component = {} // requires InternalComponent
export { InternalComponent } // this export would be accessible to components inside the library, in case they wanted to restyle it slightly or reuse it
export default Component // this export would be the only component available to outside consumers of the library
// in index.js
export { default as Component } from "component.js"
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.