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

• BRAND GUIDELINE

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