@stredadev/webuikit v1.0.1

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

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

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

4. Export component with dafined component's properties:

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

5. 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

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

3. 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

4. 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

All commands

Tests & Coverage

Tests are stored in separate tests folder in the project. To run tests and analyze code coverage please use the npm run test command. Coverage results are stored in tests/__coverage__ folder as static HTML.

CI

In test Jenkinsfile we have stages:

• Test that runs npm run test-ci to check if tha all test go through
• Linter tests that runs npm run lint looking for linters problems
• Sonar analysis to run sonar with the given package version

Test results can be exported to JUnit.xml file. Please run the npm run test-ci to create file in the ./tests/__CI__ directory. You can also create OpenClover file stored in ./tests/__coverage__ directory or another file, using npx jest --coverage --config=configs/jest.json --coverageReporters=<reporter_name>. Form more details see:

• https://github.com/istanbuljs/istanbuljs/tree/master/packages/istanbul-reports/lib
• https://openclover.org/
• https://plugins.jenkins.io/clover/