@solice/ui-kit v1.0.3
Solice UI Component Library
These components will eventually grow to be Solice's one stop shop for anything frontend:
For Official Solice Branding specifics please see the following
UI Dev Stack
- Vite
- RollupConfig
- Styled Components
- TypeScript
- ESLint to catch run time errors aot
- Prettier to make code so gorgeous
Development
Installing
npm install
Building For Test
npm run build
(this will build into the dist folder and copy the package.json)
cd dist
npm link
cd ..
npm run watch
(if you want to link directly to dist remove all instances of ./dist from the package.json that just got copied over)
open any other project in your user workspace and run
npm ls -g --depth=0 --link=true
(this shows what modules this newly opened project is linked to)
npm link @soliceio/ui-kit/dist
You can now import this package to test before publish and since watch is running, any changes made to the library code will auto build and hot refresh in your other project reference via npm link
Building For Publish
npm run build
npm login
npm publish (dont forget to change the version in package.json)
Component Usage
Most components extend base component with all of your basic html directives, but in order to speed things up, we have the prop values 'primary' and 'secondary' and other starter values to give color and size.
<Button text='React Medium Secondary Button' primary={false} size='medium' />
Wrap anything you need styled in the Flex component, this uses flexbox.
<Flex container={false} alignItems='center' flexDirection='column' justifyContent="space-between">
<button className="active">Non Solice Button W/ Solice Global Styles</button>
<Button text='React Small Primary Button' primary={true} size='small' />
<Button text='React Medium Primary Button' primary={true} size='medium' />
<Button text='React Large Primary Button' primary={true} size='large' />
</Flex>
We also have mobile sizes where media query can split
const sizes = {
mobileS: '320px',
mobileM: '375px',
mobileL: '425px',
tablet: '768px',
laptop: '1024px',
laptopL: '1440px',
desktop: '1441px',
};
Theme Usage
You can wrap the entire app in styled-components "ThemeProvider" and provide a theme(we have 2 basic ones). Within this you can use the GlobalStyles component to overwrite or store any global styles you need. The theme will be saved in local storage for the user when they come back
1 year ago