README
streda-web-components
Web components repository.
This repo can be found onInstallation
- Clone/download repo
yarn install
Usage
Development with Storybook
Create new component
- Create component in tsx extension
- 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
- Pubish package with beta tag
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