Light

snappmarket / frontend-toolbox Goto Github PK

View Code? Open in Web Editor NEW

37.0 3.0 7.0 8.78 MB

Frontend tools which we used in snappmarket v2

Home Page: https://ft-box.netlify.com/

License: MIT License

JavaScript 94.48% CSS 3.96% Shell 1.56%

hooks ui componenets component react-hooks react-components react js design-language

frontend-toolbox's Introduction

⚙ SnappMarket frontend powerful tools

hooks, helpers, ui components and icons that we used in new version of snappmarket website

demo

You can see demo at : https://ft-box.netlify.com/

get started

npm i @snappmarket/ui
npm i @snappmarket/hooks
npm i @snappmarket/helpers
npm i @snappmarket/icons
npm i @snappmarket/config

// OR 

yarn add @snappmarket/ui
yarn add @snappmarket/hooks
yarn add @snappmarket/helpers
yarn add @snappmarket/icons
yarn add @snappmarket/config

⚒ Hooks Found Here

Hook Name	Description
useDebounce	🔂 Change rapidly, do once
useDidUpdateEffect	🧵 Do not worry about render phase effect calls
useFocus	😵 Focus on every thing you want
useForceUpdate	👿 force update component
useGeoLocation	🗺 easily deal with navigator location API
useRouteChange	🏹 detect when react router dom route changes
useTimer	⏱ easily handle timing

💈 UI Components found here

Component	Description
Accordion	Accordion Ui component
Alert	Alert Ui component
Breadcrumb	Breadcrumb Ui component
Button	Button Ui component
Checkbox	CheckBox Ui component
ConfirmDialog	ConfirmDialog Ui component
Dialog	Dialog Ui component
Grid	Grid Ui component
GridSystem	GridSystem Ui component
Icon	Icon Ui component
Image	Image Ui component
Input	Input Ui component
InputRange	InputRange Ui component
Range	Range Ui component
Range	Range Ui component
Json	Json Ui component
Label	Label Ui component
LinedText	LinedText Ui component
Loading	Loading Ui component
Modal	Modal Ui component
OptionGroup	OptionGroup Ui component
Radio	Radio Ui component
Pagination	Pagination Ui component
ProgressBar	ProgressBar Ui component
Skeleton	Skeleton Ui component
Slider	Slider Ui component
TabSwitcher	TabSwitcher Ui component
TextWrap	TextWrap Ui component
Toggle	Toggle Ui component
Tooltip	Tooltip Ui component

💊 Helpers Found Here

Helper	Methods
ArrayHelpers	`arrayItemAddProp` ,f`lattenArray` ,s`erializeObject` ,s`tringifyArray` ,d`eepFlatten`
CookieHelpers	`getCookie`, `setCookie`
DebugHelpers	`delog`, `ApiError`, `globalErrorCatcher`
HttpHelpers	`fetchWithTimeOut`, `universalCall`
JsonHelpers	`recursiveJsonParse`
MapHelpers	`isLocationInIran`
NumberHelpers	`persianNumber`, `englishNumber`, `generateKey`, `cellphoneValidate`, `cellphoneValidatePattern`, `currencyPrice`
ObjectHelpers	`removeByKey`, `flattenObject`, `makeCookieString`, `safeObjectPropertyRead`, `getNextProp`
OSHelpers	`getOSName`, `getAgent`
PromiseHelpers	`racePromise`, `makeTimeout`, `emptyPromise`
ProxyHelpers	`onChangeReflector`
ReduxHelpers	`actionMaker`, `normalizeActionType`, `configPersistor`
StorageHelpers	`getLocalStorageData`
StringHelpers	`stringReplace`, `bulkStringReplace`
TemplateHelpers	`HexToRgb`, `defineForegroundColor`, `makeRgba`, `decideMeasurement`, `makeShadow`
WindowHelpers	`getPathName`, `getWindowSize`

💎 Icons found here

All icons has svg file, react component, and an special sprite svg

💯 100% tested react 100+ svg icon components

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Jafar Rezaei}
🚇

📖 💻 🤔 🚧 📦 👀

_{Reza Erami}
🚇

_{mahsa mesbah}

_{Mostafa Rastegar}
🤔

This project follows the all-contributors specification. Contributions of any kind welcome!

frontend-toolbox's People

Contributors

Stargazers

Watchers

Forkers

mesbah68 ajangi seyyedhesam miladhamzelou rezaerami behroodrzdr milad7212

frontend-toolbox's Issues

Demo is not working

Demo returns not found, please update it.

generic way to create action and type together

⚠️ Greenkeeper is no longer available for new installations

Hello!

Greenkeeper is no longer available for new installations.

The service will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020. Find out more at greenkeeper.io.

If this is your only Greenkeeper installation, you can just sign up for Snyk directly, it’s free for Open Source even has free features for private projects as well.

Nevertheless, thanks for your interest in Greenkeeper! We’re sure your repositories will find a good home at Snyk ☀️🏡💜

All the best from everyone at Greenkeeper! 👋🤖🌴

Add title and description to icons

We should add <title> and tags in our svg icons

Accordion onOpen is useless

It should be onSwitch or sth

implement tests

every package folder should have a test file at lease with a simple test, then we could try to complete them, but the first need is adding simple test files to each package and implement test code coverage.

add rest props to all of ui components

This is so useful on testing components

skeleton animation on GPU

Add more components

Component Needs:

Versioning issue on parent package releases

there's an issue on releasing parents with versioning.
when you release the parents with --patch tag, it shows npm error that you can't publish the package on the previous version, then after you run it again it works but it also increases the patch number again, so for example if it was 0.2.4, on 0.2.5 you'll get the publishing error, and by publishing again, it you'll see the 0.2.5 version on npm but 0.2.6 on pavkage json of parent packages

⚠️ Greenkeeper is no longer available for new installations

Hello!

Greenkeeper is no longer available for new installations.

The service will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020. Find out more at greenkeeper.io.

If this is your only Greenkeeper installation, you can just sign up for Snyk directly, it’s free for Open Source even has free features for private projects as well.

Nevertheless, thanks for your interest in Greenkeeper! We’re sure your repositories will find a good home at Snyk ☀️🏡💜

All the best from everyone at Greenkeeper! 👋🤖🌴

add more icons

Should add a command to publish child packages

As we mentioned before we use release:tops script on root to make a alpha (for now).
lerna publish is not so reliable command so we need to publish parent and child packages in separate ways. this could be a command like release:tops and could have name release:childs , then we could have a release script to run this two scripts and even decide between versioning.

make documentation site, based on mdx files with docz

we could make a site for documentation and use docz build directory to show them, it need a little ci/cd and deployment flow.
A little note will be the size of docz bundle and trying to lazy load components maybe.(not for first step)

Button should have a href to be a link

delete 1254 release and use CHANGELOG generator

we should delete that use less releases and try to add a automation command to generate chanagelog and make a release with changelog note.

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.