@coinswap-libs/uikit

Set of UI components for CoinSwap projects

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@coinswap-libs/uikit
0.5.574 months ago2 years agoMinified + gzip package size for @coinswap-libs/uikit in KB

Readme

streda-web-components
This repo can be found on Web components repository.

Installation

  1. Clone/download repo
  2. yarn install

Usage

Development with Storybook
Create new component
  1. Create component in tsx extension
  2. Create new file in the component folder named {ComponentName}/index.stories.tsx
  3. Storybook package will be looking for the files with .stories.tsx extensions
  4. Export storybook config inside created file with:
```
export default {
    title: '{storybookFolder/components}/{ComponentName}',
    component: ComponentName,
    argTypes: {
        Here we define all arguments that we will be using with storybook
        Mosty we can define props to play around with them
    },
};
```
  1. Export component with dafined component's properties:
```
export const ComponentStorybookName: Story<{ComponentProps}> = (props) => {
    return <Component {...props}/>
};
```
  1. Run yarn storybook to compile the project on http://localhost:6006/

Styled components
Create new StyledComponent with html element
const StyledComponentName = styled.{div, p, h1, etc...}`
    display: flex;
    box-sizing: border-box;
    border-radius: 4px;
    // Use theme prop to get access to declared variables for the given theme
    background: ${({ theme }) => theme.colors.background};
    margin-left: 16px;
    padding: 0 12px;
    margin-bottom: 4px;
`;

Create new StyledComponent with html element and custom props
const StyledComponentName = styled.{div, p, h1, etc...}<{prop: propType}>`
    display: flex;
    box-sizing: border-box;
    border-radius: 4px;
    // To check truthiness of the given prop
    background: ${({ prop }) => prop ? "red" : "green"};
    margin-left: 16px;
    padding: 0 12px;
    margin-bottom: 4px;
`;

Create new StyledComponent that extends already created styled-component
const StyledComponentName = styled(StyledComponentName)`
    // All styles that we want the creating component will be extended of
    display: flex;
`;

More info about styled-components liblary StyledComponents Lib.

Making changes

  1. Versioning:
* MajorVer -> Changes that break backward compatibility
* MinorVer -> Backward compatible new features
* PatchVer -> Backward compatible bug fixes
* BetaVer -> Aren't considered major releases, so the package version number doesn't change
  1. After every change we need to increase package version
* For beta version we type {MajorVer}.{MinorVer}.{PatchVer}-{TaskNumber}.{BetaVer}
* For stable version we use {MajorVer}.{MinorVer}.{PatchVer}
  1. Once we made some changes in the projects we do have two options
* Pubish package with beta tag `npm run build` && `npm publish --tag beta`    
* Pubish package with stable version `npm run build` && `npm publish`
  1. Once the version is tested on the FE project we need to make PR with stable version of the package

  • After PR is approved we can change the package version in our FE projects