@coinswap-libs/uikit NPM

streda-web-components

Installation

Clone/download repo
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

Storybook package will be looking for the files with *.stories.tsx extensions

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
    },
};

Export component with dafined component's properties:

export const ComponentStorybookName: Story<{ComponentProps}> = (props) => {
    return <Component {...props}/>
};

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

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
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}
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
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

streda-web-components

This repo can be found on Web components repository.

Installation

Usage

Making changes