ocean-ds / ocean-android Goto Github PK
View Code? Open in Web Editor NEWBlu's Design System for Android
License: GNU General Public License v3.0
Blu's Design System for Android
License: GNU General Public License v3.0
"Ocean" is the design system for Blu. There's no need to enforce "ds" in packages' names. Making more longer and redundant.
My suggestions
This org "ocean-ds" embraces GitHub actions as our main continuous integration and delivery tool.
So, we must change replaces the configuration written for circleci with Github actions.
Creates a transaction list component follow this figma handoff
Creates a checkbox component follow this figma handoff
Create a new Heading component. The only difference from Heading 4 is the font size, it should be 14px ($font-size-xxs).
๐ Handoff
Is your feature request related to a problem? Please describe.
We must create a minimal guide for installation and usage on the readme.
Describe the solution you'd like
ocean-tokens
and ocean-icons
as related projectsAdditional context
Example for a related projects section: https://github.com/ocean-ds/ocean-web#related-projects
Creates templates for issues and pull requests that make the most sense for this project (Design-System > Android > Kotlin).
You can find examples created in a similar scenario:
External Examples:
Guide:
Change font-weight from $font-weight-regular to $font-weight-medium.
Is your feature request related to a problem? Please describe.
The blu iconography must be unique for all platforms, for that reason there's a project ocean-icons that centralizes the SVGs.
Describe the solution you'd like
Like we did for ocean-tokens
we can integrate this project with the ocean-icons
and export an android version of these icons.
Create the Link component following the Handoff sheet
Creates a text button critical component follow this figma handoff
Is your feature request related to a problem? Please describe.
Our contribution guide file is a little bit vague with "todos" spread everywhere. Besides that the prerequisites are wrong.
Describe the solution you'd like
Remove Neutral 02
Tag, we are not using it
Change Neutral 03 to Complementary
Change Neutral 01 to Neutral
Add Tag Highlight (former Badge Text)
๐ Hand-off here.
I've written some specs about this issue in this Notion link: https://judesignblu.notion.site/Ajustes-Modal-Drawer-30a8e031064d467bbef2d7ddedf54159
Creates a card base component follow this figma handoff
Create a new Heading component. The only difference from Heading 4 is the font size, it should be 14px ($font-size-xxs).
๐ Handoff
HEADING 1, 2, 3 ๐
font-family: fontFamilyBase
font-weight: fontWeightExtraBold
line-height: lineHeightMedium
HEADING 4, 5 ๐
font-family: fontFamilyBase
font-weight: fontWeightBold
line-height: lineHeightLoose
SUBTITLE 1,2 ๐
line-heigt: lineHeightLoose
CAPTION ๐
font-weight: fontWeightRegular
CAPTION BOLD ๐
font-weight: fontWeightSemiBold
EYEBROW ๐
๐ Hand-off here.
it would be nice if developers could customize the color of the component instead of just sticking to the default one. That way, the component could work with different designs and needs.
Connecting this repo with Blu slack to notify issues, pull requests, and releases.
We need to make a few adjustments on the Top Bar component:
๐ Follow this hand-off.
Creates an icon button component follow this figma handoff
This new variant has an action/a button. Follow specs here.
The actual readme is not attractive to new users or possible contributors. It must be refactored!
You can check ocean-web project for reference.
Other resources:
This component has gone through a few changes in order to ensure consistency among all the list components. Here's what's changed:
Icon Background / States: Hover e Focused
background-color: $brand-primary-up
opacity: $opacity-level-light
Level 1 text
font-weight: $font-weight-regular
font-color: $interface-dark-pure
Transaction Value
Change names:
Positive -> Inflow
Negative -> Outflow
Value (outflow and default)
font-weight: $font-weight-medium
font-color: $interface-dark-pure
Value (inflow and cancelled)
font-weight: $font-weight-medium
Full handoff can be found at this link
We need to include a contribution guide if we want external contributions.
You can check how was made in the ocean-web project for reference.
Other resources:
Is your feature request related to a problem? Please describe.
We must consider tests when developing a library that supports other applications, because this brings some quality and facilitates new changes. So, I propose to configure this project to require 100% test coverage of what we are delivering.
Describe the solution you'd like
Describe alternatives you've considered
https://about.codecov.io/blog/code-coverage-for-android-development-using-kotlin-jacoco-github-actions-and-codecov/
Additional context
You can take what we've made in this project as a reference:
https://github.com/ocean-ds/ocean-web/blob/master/.github/workflows/ci.yml
The Conventional Commits specification is a lightweight convention on top of commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of. This convention dovetails with SemVer, by describing the features, fixes, and breaking changes made in commit messages.
https://www.conventionalcommits.org/en/v1.0.0/#summary
There are many adoptions of this convention in web open-source projects. Maybe it's common in other platforms too. So why not include it in this repo?
How we can implement it?
We got rid of the shadow in every variation of this component ;P
Creates a caroussel component follow this figma handoff
๐ Hand-off here.
Is your feature request related to a problem? Please describe.
All changes merged on master generate a new version of packages and in some cases, this shouldn't happen.
Changes that do not affect the API must not be deployed (examples: changes on non-source files). This brings minimal versions, changelog, and costumers package updates.
Describe the solution you'd like
As we have already used conventionalcommits pattern we can determine through the commit message what change this commit represents. If that change represents a major, minor, or patch we can generate and deploy a new version following the semver specification.
Describe alternatives you've considered
Creates an input currency component follow this figma handoff
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.