Amirfounder-ui NPM

Amir Sharapov (@amirfounder) Component Library

NOTE: Breaking Changes released WEEKLY if not DAILY! Do not install and use on production website unless you know what you are getting yourself into. (...and there is 99.99% chance you don't).

Backlog → https://github.com/orgs/amirfounder/projects/1

Usage

A component library for the ReactJS Framework, built to be used by the @amirfounder brand.

Dependencies:

Storybook: Used for viewing components
Rollup: Used to compress all libraries into a single file (See below for plugins)

Rollup Plugins:

rollup-plugin-terser: Used to minify the js
rollup-plugin-poscss: Used to allow css files in rollup
...

Storybook Plugins:

@storybook/preset-scss
css-loader
sass
sass-loader
style-loader

Developers:

TODO:

Write tests
Mobile friendliness
Text/Select/Radio... Input Components
Header 'position: fixed' ability
Variants
Write JSDocs
Rewrite functions to follow code styleguide
Look into javascript destructuring to pass unnamed props to styled component
Page and paragraph components need styled components as well

Publishing Steps

If new components were created, export them via the /src/index.js file
Run npm run build-lib to run rollup and minify file
Update the readme.md file to account for the changes in the latest version
Commit
Run npm version patch / minor / major to update the package version
Run npm publish to publish package!

Coding Styleguide

When writing code for this guide, follow the following code guidelines

Writing '...StylesService.js' functions:

Paramaters should be in the following order for easier readability and maintanability:

Custom (i.e. 'variant', 'size', etc.) → determines multiple styles
Actual (i.e. padding : paddingProp, color: colorProp, etc) → The actual attribute if it exists
Other → Any other prop that can help determine the return value of the function

Version History:

V 1

V 1.0: Semi-Failed Attempts

1.0.0: First attempt

Version should NOT be used. Test version.

Did not target the minified js file
Did not have support for ECMAScript support.

1.0.1: Second attempt

Version targets the correct js file + ECMAScript support. Still a test version.

Added Components:

Button
Header
Input (incomplete...)
Link
Logo
Menu (incoomplete...)
Modal (incomplete...)

1.1.0: More Components

All components now allow a size to be configured when calling. All components are no longer 'incomplete'

Refactored Components:

All previous...

Added Components:

Column
Section
Page
Paragraph
Heading
Container

1.1.1 - 1.1.11 - Bug Fixes

Fixed bug where components were not being exported
Fixed bug from previous fix
Testing bug fix where react-router-dom link throws error
Rebuilding Library
(blank)
Rebuilt Package after another import fix
LinkPro component for testing
Beta release of every component using styled components
Updated logo and menu to not require column to align selfnpm
Tried another fix with the logo onclick
Fixed history import from 'react-router-dom' in the header

1.2.0: Refactored components

Components no longer use an external .css file for styling and depend fully on styled components.

1.2.1 - 1.2.x

Updated README Installation Warning and Publishing Steps for developers
Fixed Link Bug
Allows Link to redirect to external sites
Allows Link to redirect to external site in new tab

1.3.0 Global styles

Components can now accept global styles into their styling services by using the GlobalStyles context provider.

1.3.1 - 1.3.x

Added JSdocs to each component
Added the Text component
Added export to index.js
Fixed bug with Text component
Converted global to theme
Theme bug fix attempt #1
Theme bug fix attempt #2
Removed terser
Theme bug fix attempt #3

V 2

V 2.0.0

<< BREAKING CHANGES! >>

Test Deployment. Every component implement SCSS as their primary style source. Many of the previous attributes and props have been removed, as using the 'style' prop is a far simpler solution to custom styles.