Git Product home page Git Product logo

nebula-react's Introduction

Neubla React Components

Build-and-Test

codecov

What is Nebula?

Nebula is the Sonr design system, used in all application and UI components acrros the Sonr ecosystem. See here to learn more about the Nebula Design System.

what is Nebula React

Nebula React is the Nebula design system implemented in the React framework. All components within this repository are implemented with the nebula design system standards.

Components

LoginButton
RegisterButton
RegisterForm

Installation

npm i @sonr-io/nebula-react

Building From Source

    npm run coverage - runs defined unit tests and reports code coverage
    npm run test - runs defined unit tests
    npm run build - Builds components for production
    npm run storybook - Builds and launches storybook dev server
    npm run build-story - Builds storybook assets

nebula-react's People

Contributors

6missedcalls avatar gwelter avatar joshlong145 avatar ntindle avatar prnk28 avatar stefuu avatar tgfassina avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

Forkers

peyton232

nebula-react's Issues

Addition `VerifyJWS` Method in `pkg/Dag-JWE`

Implementation of VerifyJWS which creates a new JSON Web Signature and returns its value to the caller.
Note: should be implemented within sonr/pkg/dag-jose

Acceptance Criteria

  • VerifyJWS should accept a piece of encrypted data and a JWS and be able to assert the validity of the signature.
  • Should contain Unit tests to confirm this behavior.
  • see the following specification for reference: https://datatracker.ietf.org/doc/html/rfc7515

┆Issue is synchronized with this Asana task by Unito

Implement Unit Tests for existing 3 controls

Is your feature request related to a problem? Please describe.
no

Describe the solution you'd like
Additional testing for existing controls with the following areas in mind
- Check module import for definition (component should be defined)
- Check DOM structure matches implementation in the component implementation.
- Check overrides from props change the expected behaviors / style of the control
- Check call backs are invoked at correct times.

Describe alternatives you've considered
Please describe alternative solutions or features you have considered.

Implement reusable root tail wind config with named themes for component consumption

Currently tailwind is set up with a single configuration statically linked in the components barrel export.
Tailwind implementation needs to be updated such that themes are named and components can consume the base tailwind configuration, and extend it's functionality.
Tailwind themes should be swappable through single "Theme" prop on the component .
Example: <Login button theme={"default"}/>

Migrate npm package to @sonr-io/nebula-react

Since refactoring the name of this repository to sonr-io/nebula-react the dependency in sonr-io/highway-sdk has become broken. Assuming publishing to npm once renaming the library in package.json will fix this issue.

Add sonr logo to sso login component

SSO button component should have sonr logo online with button label text.
Position should not be configurable at this time. But should allow for layout resizing to not affect component label orientation.

Update Storybook component files with templating for prop hydration

Is your feature request related to a problem? Please describe.
Please describe the problem you are trying to solve.

  • Refactor current component storybook files to use template wrapper for components to allow for generic props to hydrate. Allowing for easier story creation and reuse.
  • Components should all have Template implementations allowing for arbitrary props to get passed in to the wrapped component instance. Component should then respect the props that are passed through.

Describe the solution you'd like
Please describe the desired behavior.

Describe alternatives you've considered
Please describe alternative solutions or features you have considered.

Create Test Plan For components (unit tests)

Creation of test plan with the following cirteria in mind:

  • Code coverage
  • Component features
    • Individual components should have their own tests
    • dom structure should be asserted on to verify correct behavior (outline what should be asserted on in terms of ids, and tag type)
  • CSS matches design goals (see nebula design in notion)

Create ci/cd build checks

PR submissions should be contingent on the success of react and docz build scripts returning successfully.
Only on the success of both documentation and component builds should a merger be allowed.

[Research] Investigate css spliting for breaking up of index.css file

for themes / style definitions for control that are only used within a single control, we should define them scoped to that control specifically.

  • create a tailwind configuration with all component specific theme defs and attempt to compile, and bundle them in a single css file linked to the 'index.css'

┆Issue is synchronized with this Asana task by Unito

[LOGIC]: Update QuerySchema to hit IPFS and return full Schema Definition

Overviewg
For querying Schemas in x/schema we should hit the IPFS node for Sonr before returning the result. This would offload the actual resolution of the schema from the Developer.

Sequence
Steps involved in the logic sequence:

  1. Refactor QuerySchemaResponse to include SchemaDefinition
  2. Call IPFS on query and return data from CID on chain
  3. Return QuerySchemaResponse with deserialized SchemaDefinition

Resources
Additional reading to help understand this proposal.

┆Issue is synchronized with this Asana task by Unito

Export from Create React App

Repository should be exported from create react app.

  • Refactor npm scripts to no longer depend on create react app (react-scripts)
  • Creation of web pack configuration for storybook

Update build-and-test.yml

Runs the simulation as part of your PR

Changes

  • Item 1
  • Item 2

API Updates

New Features (required)

Deprecations (required)

Enhancements (optional)

Checklist

  • Unit tests
  • Documentation

References (optional)

Fixes
Connects

Mention [stepsize] in a comment if you'd like to report some technical debt. See examples here.

┆Issue is synchronized with this Asana task by Unito

fixed dev

Fixes issue preventing highway from starting

Mention [stepsize] in a comment if you'd like to report some technical debt. See examples here.

┆Issue is synchronized with this Asana task by Unito

Enable test verification in CI

Changes

  • Removes the auto pass for testing and coverage

API Updates

N/A

New Features (required)

N/A

Deprecations (required)

N/A

Enhancements (optional)

Your tests must now pass.

Checklist

  • Unit tests
  • Documentation

References (optional)

Fixes
Connects

Mention [stepsize] in a comment if you'd like to report some technical debt. See examples here.

┆Issue is synchronized with this Asana task by Unito

Configure docz for consuming custom UI components

Created UI components should be included within docz 'docs' folder.

Should be named in the following schema
[COMP-NAME].mdx

Should contain all configurable properties and intent of component within definition.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.