Just Another React UI Framework
npm install @appbuckets/react-ui

An Old School React UI Framework based on TypeScript and SCSS, fully customizable




AppBuckets UI is a npm package, available through NPM or Yarn.
The Latest stable release could be downloaded using your preferred package manager
``sh
// with yarn
yarn install @appbuckets/react-ui
// with npm
npm install -S @appbuckets/react-ui
`
A quick example of how can you use AppBuckets UI is the following:
`tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// Import the base CSS file
// using SCSS could be done to, check documentation below
import '@appbuckets/react-ui/styles/index.css';
// BucketTheme is the Theme Provider, use this to change the
// default prop of each single component.
// This Provider is not required, and it's optional
import BucketTheme from '@appbuckets/react-ui/BucketTheme';
import Box from '@appbuckets/react-ui/Box';
import Button from '@appbuckets/react-ui/Button';
// Obviously, you could import all components in one statement,
// keeping in mind that the following statements would include
// all source files into your build.
// This could slow down your first page load
// import { BucketTheme, Button, Box } from '@appbuckets/react-ui';
function App() {
return (
primary
icon={'rocket'}
content={'Launch to the Moon'}
tooltip={'Write wonderful Code'}
/>
);
}
ReactDOM.render(
document.getElementById('root')
);
`

Full documentation is still to write.
To view Storybook download repo and launch yarn start from storybook folder.
Storybook has been used to check the develop process, it is not fully documented and components doesn't have all style and props table.
The source files that define the style of AppBuckets UI can be used in any project, but with some tweaks. PostCSS must be used to recompile the style correctly without errors. AppBuckets UI uses a number of plugins, which are essential primarily for redefining and repositioning media queries.
PAY ATTENTION You cannot use postcss@^8 with this methods.
The plugins used by AppBuckets UI are:
- postcss-importpostcss-momentum-scrolling
- postcss-merge-rules
- postcss-import-url
- postcss-discard-duplicates
- postcss-sort-media-queries
- postcss-single-charset
- postcss-discard-comments
- in production mode onlypostcss-single-line
- in production mode onlyautoprefixer
- css-declaration-sorter
- in production mode onlycssnano
- in production mode only
Instead of having to manually include individual plugins within the postcss.config.js file, you can download an additional repository that includes the configuration necessary to build the stylesheet.
`shellUsing YARN
yarn add -D @appbuckets/postcss-appbuckets-react-ui
and used the
getPostCSSPlugins function in your postcss.config.js:`javascript
const { getPostCSSPlugins } = require('@appbuckets/postcss-appbuckets-react-ui');module.exports = {
plugins: [
...getPostCSSPlugins()
]
}
`A configuration object could be passed to the function to adjust settings or exclude some plugins. Don't exclude plugins from compiling unless you really need them.
The configuration object can have one or more of the following options:
| Property | Type | Description |
|------------------------|:-------------------------------------------------:|:--------------------------------------------------------------------|
|
browserslist | { development: string[], production: string[] } | Override default BrowsersList in development or production mode |
| cssDeclarationSorter | alphabetical - smacss - concentric-css | Set declaration sort order. Default is alphabetical |
| exclude | string[] | Exclude some plugin from build |
| mediaQueriesSorting | mobile-first - desktop-first | Set media queries order. Default is mobile-first |
| mode | development - production | Set the build mode. If none the NODE_ENV variable will be used |$3
Unfortunately react-script does not allow you to override or change the app creation settings until you use the eject function. If you don't want to use the eject function you will have to use an external dependency, called craco to add the necessary plugins
#### 1. Install Craco Package
`shell
Using YARN
yarn add -D @craco/cracoUsing NPM
npm install -D @craco/craco
`#### 2. Replace package.json Scripts
`json
{
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}
}
`#### 3. Add the
craco.config.js`javascript
const { getPostCSSPlugins } = require('@appbuckets/postcss-appbuckets-react-ui');module.exports = {
/* Extends PostCSS Plugins to Build AppBuckets UI Style /
style: {
postcss: {
mode : 'extends',
plugins: [
...getPostCSSPlugins()
]
}
}
};
``- [ ] Update the CreateReactApp Template
- [ ] Optimize Icon library
- [ ] Think about convert .SCSS style using @emotion
- [ ] Write Docs and Demos
- [ ] Complete Tests
- [ ] Refactor Storybook
- [ ] Try to remove all possible external dependencies
Read the contributing guide to learn about our development process, how to propose bugfixes and improvements.
This project is licensed under the terms of the
MIT license.