New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@protacon/arrow-ui-react-components

Package Overview
Dependencies
Maintainers
6
Versions
41
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@protacon/arrow-ui-react-components

Common ui components that can be shared across projects

  • 6.1.0
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
1
decreased by-97.83%
Maintainers
6
Weekly downloads
 
Created
Source

Arrow ui

Common ui components that can be shared across projects

Development

getting started

npm install to install dependencies

then

npm run develop

to watch for file changes and compile sass and launch storybook.

then go to localhost:6006 to see changes in live to components

file structure

/src/lib contains all components which are structured in following way:

folder name: component name
index.tsx : component related code
component_name.sass: component related styles

/stories includes all storybook related code

Development workflow

  1. Create new component in lib folder as so:
src
└───lib
│   └───ComponentName
│       │   index.tsx
│       │   ComponentName.sass
  1. After creating initial component, add it to storybook to watch live updates with following file name: ComponentName.stories.js. See Button.stories.js for example how to use storybook.

  2. Update types.d.ts to export types for newly created component so that other projects consuming this library can find it.

Building library

run npm run build

Usage in other projects

Run npm install --save @protacon/arrow-ui-components

Note: After updating components here you need to update this package in the other project by running npm update @protacon/arrow-ui-components

Remember to change version in package.json accordingly.

Using development version

You can use unpublished version of this project by setting git repository url to package.json or from your local development environment by npm link.

Publishing package to npm

Publishing is handled by Jenkins. It publishes this package to the npm when Git tag is created and pushed.

NOTE! Tag is used as the version in npm, so it overrides the version in package.json. Version in package.json should still be kept up to date.

TODO

  • input fields
    • text field
    • text area field
    • checkbox
    • select
    • color select
    • fileupload
    • time picker
    • date time picker
    • date range field
    • error notification for errors
  • full screen modal
  • bordered rows
  • breadcrumb
  • typography components with defined sizes

known issues

  • Storybook components must be imported from build folder because of mismatch between typescript and javascript. Adding typescript support to storybook would mean ejecting CRA app and might bring additional difficulties
  • sass usage could be refactored
  • declaration of function components is tricky

FAQs

Package last updated on 27 Apr 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc