alosada7/edene

Edene is a Design System with all you need to create efficient and eye catching user interfaces. It has been written entirely in Typescript

Edene

Edene aims to give you everything you need to create and build top class products. It contains completely customizable and reusable React components, animations and hooks. It has been entirely written in Typescript.

Edene also comes with another library called foundations, a serie of guidelines and tokens, which give programmers all the necessary to create efficient and eye catching user interfaces, following design principles, and with a focus on user experience. It's a dependency, so you don't need to worry about installing it

Edene is not just a component library, it goes far beyond that.

Documentation index

Please familiarise yourself with our:

• Contributing Guidelines
• Changelog

Getting started

We recommend usig edene with react applications

$ yarn add @edene/components

Edene also uses Emotion:

See Using Emotion for guidance on how to configure Babel to use Emotion's css prop.

We publish the library with components written in React and Emotion. You can use your favourite package manager.

Then, wrap your application with ThemeProvider, which comes from @edene/foudations. You can also override the theme using the theme prop. See more on Theme docs.

Finally, to use a components in your application, you just have to import and use it:

import { Accordion, AccordionRow } from '@edene/components';

For most of the components you also need to add support for Google Icons. Add to your HTML.

<link
    rel="stylesheet"
    type="text/css"
    href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
/>

Or optionally to your SCSS.

@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined');

Developer Guide

• Overriding Styles
• Theme
• Colors

Use it anywhere

Following is a project application working in different modern environments

Environment	App name	Github repository	Notes
create-react-app (Js)	Todo-list	Todo-list on Github
Next.js	My personal webpage	My personal webpage on Github	Next.js v13+ components using Edene need to add 'use client' at the begging of the file
React app (Nx)	food-delivery	Food-delivery on Github

edene's Issues

Wrapper providers

Or at least doc:

• ThemeProvider
• ToastProvider
• ModalProvider
• ...

Investigate className & css issues

Look at another libraries that uses emotion. For example:

• The Guardian Source
• Material UI

Results list page

• Register new page in template. Also make routes more dynamic
• Create mocks (2 results)
• Component which renders a list with mocks data
• No results template

Storybook Badge under title in README

Use the following Badge but with the actual link to add Storybook to your README

Add documentation index

Use the same documentation you have in the Storybook.
Present it as a list

Example: https://github.com/vercel-labs/simorgh

Remove icon as string wherever is possible

We want to reduce the number of cases in which icon is passed as a string to a component. The reason to do this is be able to use both fixed & outlined icons.

For the cases a fixed size is necessary, the best solution would be override it

Incompatible API changes might occur. For that is the case,add the new behaviour, log a warning when a string is being passed as parameter, and mark this ticket with a label called v2

Remove vStack & hStack from Col

Use Stack & Group components instead

Add polimorfism to Image

To allow it use Next Image component, for example

@edene/foundations & @emotion/react as dependencies

When building, Nx takes @edene/foundations & @emotion/react as peer-dependencies, which means that the consumer has to install them individually.

We can skip this step and make easy for the user start working with our library

Move edene-pro-labs pages to template

We are moving all template pages to Storybook, so we have more control on the responsiveness.

To do this, we will move it under a template folder following the same structure they already have. We will export them and make the library publishable (@edene/pro-labs)

We will import them into their actual component so we conserve laziness.

In Storybook, other folders will keep components, charts, forms, tricks, ... try to organise them as clear as possible

All that is not using edene components should be in the Laboratory folder. Remember to review that the same happens to edene components which still have not been published (in components)

Modal

Two stories that do the same
Update provider

Fix Largest Contentful Paint image was lazily loaded in Carousel

For consumers to be able to reduce their LCP, we need to ensure the first image is loaded eagerly in carousel.

It would be good to add stories to the Carousel component in order to be able to check different states

SchemeColor

Possible values are

• info
• success
• danger
• warning
• grey

ThemeDecorator not to wrap all stories

Remove it from preview.js once it is possible. Also pass this files to ts and clean them