question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Create basic elements

See original GitHub issue

Build a set of basic elements.

Elements are found in the packages/components/src/elements folder. Each element should have working

  • tsx file
  • storybook file
  • test file

Example of a basic element is the Button element inside the elements folder.

Please choice one of the elements from the list to work on by commenting below. After completing an element, create a PR with feat: and name of the element.

  • Avatar
  • Badge/Tag
  • Card
  • Checkbox
  • Dropdown Menu
  • Modal
  • Link
  • Radio
  • Sheet
  • Switch
  • TextField
  • Textarea
  • Tooltip
  • Skeleton - Avatar
  • Skeleton - Text Block

Please see the playground environment for resources. To start a playground environment run in your terminal yarn dev This will run Next JS environment on localhost:3000 for building the element, and also run a watch script on the library.

No need to be overly concerned about the css because a figma design hasn’t been made yet.

An example of each component can be found here copy and pasting from here is acceptable, because the focus is to get more structure in place and also for contributors to get more familiar with the project and tech stack.

If you have any questions or problems, please ask in the web3-ui channel in the D_D discord

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:9 (8 by maintainers)

github_iconTop GitHub Comments

3reactions
diegoalzatecommented, Jul 24, 2022

@e-roy I can do the Avatar

2reactions
shindeajinkyacommented, Aug 27, 2022

Adding Modal and Link

Read more comments on GitHub >

github_iconTop Results From Across the Web

10 Basic Elements of Design - Creative Market Blog
1. Line ... The first and most basic element of design is that of the line. In drawing, a liene is the stroke...
Read more >
The Basic Elements of Design
Elements of Design: Shape · Geometric shapes have structure and are often mathematical and precise (squares, circles, triangles). · Organic shapes ...
Read more >
Elements of Design: Understanding the 7 Elements of Design
The elements of design are the fundamental aspects of any visual design which include shape, color, space, form, line, value, and texture.
Read more >
11 Basic Design Elements and How to Use Them - MakeUseOf
11 Basic Design Elements and How to Use Them · 1. Color · 2. Shape · 3. Line · 4. Space · 5....
Read more >
What Are The 6 Elements of Design? | Adobe XD Ideas
The first and most basic element of design is the line. In design, a line is any two connected points. These lines can...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found