-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5a83931
commit 497bc26
Showing
1 changed file
with
112 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -14,7 +14,7 @@ Core-UI is a component library containing all components, layouts, icons and the | |
"@scality/core-ui": "github:scality/core-ui#0.113.0", | ||
``` | ||
|
||
- ```@scality/core-ui``` requires some peerDependencies below. Make sure that you have them in the ```package.json```'s dependencies. | ||
- ```@scality/core-ui``` requires the peerDependencies below. Make sure that you have them in the ```package.json```'s dependencies. | ||
|
||
```json | ||
"@fortawesome/fontawesome-free": "^5.10.2", | ||
|
@@ -128,35 +128,89 @@ export type CoreUITheme = { | |
|
||
This project is built with [React](https://react.dev/) and [TypeScript](https://www.typescriptlang.org/), and styled with [styled-components](https://styled-components.com/). | ||
|
||
Project structure : | ||
To start contributing to core-ui, clone the repository : | ||
|
||
```sh | ||
git clone [email protected]:scality/core-ui.git | ||
``` | ||
|
||
then install the dependancies : | ||
|
||
```sh | ||
npm install | ||
``` | ||
|
||
### Create a new branch | ||
|
||
Give your branch an explicit name with the reference to the Jira ticket or issue if it exists, and prefix it with : | ||
|
||
- feature/ : for new component or major component update | ||
- improvement/ : for code improvement, component update, polishing | ||
- bugfix/ : for bug related issue | ||
|
||
If it exist refer the ticket name with your branch name | ||
|
||
```sh | ||
git checkout -b <prefix/TICKET-new-branch> | ||
``` | ||
|
||
### Creating a new component | ||
|
||
Create a new folder in `src/lib/components` for the component file and test file. | ||
Depending on your component, it can be useful to create more files for the style, hooks, or utility functions that are necessary for your component. It will make the code more readable and easier to maintain. | ||
|
||
Create a new folder in `stories` for the documentation files. | ||
|
||
You should end with something like below : | ||
|
||
```text | ||
- src/ | ||
- lib/ | ||
- components/ | ||
- MyComponent/ | ||
- MyComponent.component.tsx | ||
- MyComponent.test.tsx | ||
- example/ | ||
- Example.component.tsx | ||
- Example.test.tsx | ||
- stories/ | ||
- MyComponent/ | ||
- mycomponent.stories.tsx | ||
- mycomponent.guideline.mdx | ||
- example/ | ||
- example.stories.tsx | ||
- example.guideline.mdx | ||
``` | ||
|
||
### Creating a new component | ||
Expose your component in `src/lib/index.ts`. | ||
When creating a new version of an existing component, expose it in `src/lib/next.ts` instead to avoid conflict. | ||
|
||
### Use Storybook | ||
|
||
You can use storybook to help with the development. | ||
If it doesn't exist, write a [story](https://storybook.js.org/docs/get-started/whats-a-story) for the component : | ||
|
||
```jsx | ||
// in stories/example/example.stories.tsx | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
import { Example } from '../src/lib/components/example/Example.component.tsx'; | ||
|
||
const meta: Meta<typeof Example> = { | ||
component: Example, | ||
}; | ||
|
||
When creating a new component, you can use storybook to help with the development. | ||
Write a [story](https://storybook.js.org/docs/get-started/whats-a-story) with your component and launch storybook : | ||
export default meta; | ||
type Story = StoryObj<typeof Example>; | ||
|
||
export const Default: Story = { | ||
render: () => <Example />, | ||
}; | ||
|
||
``` | ||
|
||
then launch storybook : | ||
|
||
```sh | ||
npm run storybook | ||
``` | ||
|
||
Storybook will be launched on `http://localhost:3000`. | ||
|
||
After creating or updating a component, make sure to lint, test and document your code : | ||
|
||
#### Lint | ||
### Lint | ||
|
||
To make sure your code is correctly lint, run : | ||
|
||
|
@@ -166,18 +220,57 @@ npm run lint | |
|
||
It will run ESLint by using `eslint-config-react-app` which is a shareable ESLint configuration used by [Create React App](https://github.com/facebook/create-react-app). | ||
|
||
#### Test | ||
### Test | ||
|
||
Build tests with [jest](https://jestjs.io/) | ||
|
||
Build tests with [jest](https://jestjs.io/) and run them with : | ||
Make sure to write tests that cover all cases, then you can run all tests with : | ||
|
||
```sh | ||
npm run test | ||
``` | ||
|
||
#### Documentation | ||
or run only one test with : | ||
|
||
```sh | ||
npm run test Example.test.tsx | ||
``` | ||
|
||
### Documentation | ||
|
||
Core-UI uses [storybook](https://storybook.js.org/) for its documentation. \ | ||
Illustrate use cases and state variations with [stories](https://storybook.js.org/docs/writing-stories). | ||
All stories should be type. | ||
|
||
If possible create or update the component guideline. | ||
This guideline is an MDX file containing details about the component usage and is illustrated with the stories | ||
write in stories.tsx file. | ||
|
||
```md | ||
import { Canvas, Meta } from '@storybook/blocks'; | ||
|
||
import * as ExampleStories from './Example.stories'; | ||
|
||
<Meta of={ExampleStories} /> | ||
|
||
# Example Component | ||
|
||
An Example component is used for example | ||
|
||
<Canvas of={ExampleStories.Default} /> | ||
|
||
``` | ||
|
||
### Pull request | ||
|
||
Push your code on the repository | ||
|
||
```sh | ||
git push origin <branch-name> | ||
``` | ||
|
||
then create a `Pull Request`. | ||
Pull request need to to be approved by at least one reviewer. | ||
|
||
### Release process | ||
|
||
|
@@ -188,6 +281,8 @@ In the Core-UI repo, follow these steps : | |
3. You can now `Generate release notes` : it will add all the PR infos since the last release. \ | ||
You can add details if necessary. | ||
4. `Publish release` | ||
5. It will create a PR that need to be approve | ||
6. Congratulations you releases a new version of Core-UI | ||
|
||
### Build | ||
|
||
|