Nuclear Planning Manual

    @coinswap-libs/uikit
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.57 • Public • Published

    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
    1. 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
          },
      };
      
    2. Export component with dafined component's properties:
      export const ComponentStorybookName: Story<{ComponentProps}> = (props) => {
          return <Component {...props}/>
      };
      
    3. 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

    Keywords

    none

    Install

    npm i @coinswap-libs/uikit

    DownloadsWeekly Downloads

    10

    Version

    0.5.57

    License

    ISC

    Unpacked Size

    3.42 MB

    Total Files

    621

    Last publish

    Collaborators

    • narrorek0xdddd
    • otrendowska98
    • pawelgozdz
    • kubazalewski
    • filzyg
    • dawidnpm
    • jakubsnpm