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