@tempworkssoftware/react-web-ui NPM

Tempworks React Web UI + Material UI

This repository will be handling cross-components between projects.

Architecture

Vite: https://vitejs.dev/guide/
Storybook: https://storybook.js.org/
Release it: https://github.com/release-it/release-it

Test your component with Storybook

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.

To view our stories in the browser, run npm run storybook.

What's a Story

A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support.

Let’s start with an example Button component. A story is a function that describes how to render the component in question. Here’s how to render Button in the “primary” state and export a story called Primary.

// Button.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';

import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
};

export default meta;
type Story = StoryObj<typeof Button>;

/*
 *👇 Render functions are a framework specific feature to allow you control on how the component renders.
 * See https://storybook.js.org/docs/react/api/csf
 * to learn how to use render functions.
 */
export const Primary: Story = {
  render: () => <Button primary label="Button" />,
};

run storybook npm run storybook

Test your package/component in local environments

Go under tempworks-react-web-ui folder
run npm run build
run npm link (we are creating a new link to this package called tempworks-react-web-ui)
Go to your project folder and run npm link @tempworkssoftware/react-web-ui package will be added to node_modules
test it

example

import Button from '@tempworkssoftware/react-web-ui/Button'

NPM Config

Create your account on npm: https://www.npmjs.com/
Request access to the tempworkssoftware organization on npm (IT ticket)
https://tempworks.atlassian.net/servicedesk/customer/portal/1
Identity & Access management -> Change Security Permissions or Group Memberships
Select Add Individual(s) to Non-SSO Cloud Service
Require access to npm tempworkssoftware as a member
Configure access token: create new file under root folder called .npmrc and the next code inside the file

//registry.npmjs.org/:_authToken={access_token}

Work process

Source branch main
Create a new branch based on main to develop your feature
Merge your new PR into main

Release process

Once you are ready to make a new release:

Go to main and run the next command npm run release
- Release process is starting. New branch will be created called release
- Will be running lint build and tests
- You can select between patch, minor or major version
- Tags must be pushed
- Changelog file will be created with new version and commit messages
- npm publish is executed
- Once that release process it's ready will be pushed to release branch
Create a new pull request pointing to main based on release branch and merge it