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 tonode_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 commandnpm run release
- Release process is starting. New branch will be created called
release
- Will be running
lint
build
andtests
- You can select between
patch
,minor
ormajor
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
- Release process is starting. New branch will be created called
- Create a
new pull request
pointing tomain
based onrelease
branch and merge it