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