Skip to content

Commit bf42df5

Browse files
adguerniersoyuka
adguernier
authored and
soyuka
committed
chore: add a way to developp with Storybook
1 parent 363202c commit bf42df5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+8191
-13
lines changed

‎.babelrc.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"sourceType": "unambiguous",
3+
"presets": [
4+
[
5+
"@babel/preset-env",
6+
{
7+
"targets": {
8+
"chrome": 100,
9+
"safari": 15,
10+
"firefox": 91
11+
}
12+
}
13+
],
14+
"@babel/preset-typescript",
15+
"@babel/preset-react"
16+
],
17+
"plugins": []
18+
}

‎.env‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# In all environments, the following files are loaded if they exist,
2+
# the latter taking precedence over the former:
3+
#
4+
# * .env contains default values for the environment variables needed by the app
5+
# * .env.local uncommitted file with local overrides
6+
#
7+
# Real environment variables win over .env files.
8+
#
9+
# DO NOT DEFINE PRODUCTION SECRETS IN THIS FILE NOR IN ANY OTHER COMMITTED FILES.
10+
SIMPLE_HTTP_PORT=8000
11+
SIMPLE_HTTPS_PORT=4430
12+
SIMPLE_ENTRYPOINT=https://localhost:${SIMPLE_HTTPS_PORT}/api

‎.eslintrc.cjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ module.exports = {
77
'airbnb/hooks',
88
'prettier',
99
'plugin:markdown/recommended',
10+
'plugin:storybook/recommended'
1011
],
1112
rules: {
1213
'prettier/prettier': 'error',

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
/lib/
22
node_modules/
3+
/yarn.lock
4+
.vscode/
5+
.env.local

‎.storybook/main.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import type { StorybookConfig } from '@storybook/react-webpack5';
2+
3+
const config: StorybookConfig = {
4+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
5+
addons: [
6+
'@storybook/addon-links',
7+
'@storybook/addon-essentials',
8+
'@storybook/addon-onboarding',
9+
'@storybook/addon-interactions',
10+
],
11+
framework: {
12+
name: '@storybook/react-webpack5',
13+
options: {},
14+
},
15+
docs: {
16+
autodocs: 'tag',
17+
},
18+
env: (config) => ({
19+
...config,
20+
ENTRYPOINT: process.env.ENTRYPOINT ?? 'https://localhost/api',
21+
}),
22+
async webpackFinal(config, { configType }) {
23+
config.resolve = {
24+
...config.resolve,
25+
extensionAlias: {
26+
'.js': ['.ts', '.js', '.tsx'],
27+
},
28+
};
29+
return config;
30+
},
31+
};
32+
33+
export default config;

‎.storybook/preview.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import type { Preview } from '@storybook/react';
2+
3+
const preview: Preview = {
4+
parameters: {
5+
actions: { argTypesRegex: '^on[A-Z].*' },
6+
controls: {
7+
matchers: {
8+
color: /(background|color)$/i,
9+
date: /Date$/i,
10+
},
11+
},
12+
},
13+
};
14+
15+
export default preview;

‎CONTRIBUTING.md‎

Lines changed: 57 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,25 @@ Then, if it appears that it's a real bug, you may report it using GitHub by foll
2222

2323
### Writing a Pull Request
2424

25-
Please base your changes on the `master` branch.
25+
Please base your changes on the `main` branch.
2626

27-
### Installing the Source Version
27+
### Two ways to write your patch
2828

29-
To install the source version of API Platform Admin in your project and contribute a patch, follow the instructions below.
29+
You can patch `@api-platform/admin` by two different ways:
30+
- by linking `@api-platform/admin` sources to an existing project;
31+
- by installing this project and running it through Storybook.
3032

31-
Create your client that will use `api-platform-admin` (replace `<yourproject>` by your project's name):
33+
> Prerequiste: running Api-Platform backend. See the [Getting Started guide](https://api-platform.com/docs/distribution/) to learn more.
3234
33-
```shell
34-
yarn create react-app <yourproject>
35-
cd <yourproject>
36-
yarn add @api-platform/admin
37-
```
35+
#### Linking the Source Version to an existing project
36+
37+
If you already have a project in progress, you can develop directly from it.
38+
39+
The instructions below explain how to install the source version of API Platform Admin in your project and contribute a patch.
3840

39-
Replace `src/App.js` by this one:
41+
Your client should already uses `@api-platform/admin` and its bootstrap file (usually: `src/App.tsx`) should at least contains:
4042

41-
```javascript
43+
```tsx
4244
import React from 'react';
4345
import { HydraAdmin } from '@api-platform/admin';
4446

@@ -86,7 +88,50 @@ cd ../<yourproject>/
8688
yarn start
8789
```
8890

89-
You can now hack in the cloned repository of `api-platform-admin`.
91+
> You can now hack in the cloned repository of `api-platform-admin`.
92+
93+
#### Running Admin through Storybook
94+
95+
If you don't have an existing API Platform application, you can use one of the bundled example APIs, and visualize the admin through [Storybook](https://storybook.js.org/).
96+
97+
Get the source of `@api-platform/admin`:
98+
99+
```shell
100+
cd ..
101+
git clone https://github.com/api-platform/admin.git
102+
```
103+
104+
Install everything:
105+
106+
```shell
107+
cd admin
108+
# Install JS dependencies
109+
make install
110+
# (optional) Initizalize a .env containing the URL of the API
111+
make cp-env
112+
```
113+
114+
The default API URL is in the `.env`. You can customize it according to your needs:
115+
116+
```env
117+
SIMPLE_HTTP_PORT=8000
118+
SIMPLE_HTTPS_PORT=4430
119+
SIMPLE_ENTRYPOINT=https://localhost:${SIMPLE_HTTPS_PORT}/api
120+
```
121+
122+
Run the simple API Platform backend (uses docker) and launch Storybook:
123+
124+
```shell
125+
make start-simple
126+
```
127+
128+
Go to http://localhost:4430, accept the self-signed certificate, visit http://localhost:6006 to see the running Admin.
129+
130+
To stop and prune the simple API Platform backend:
131+
132+
```shell
133+
make stop-simple
134+
```
90135

91136
### Testing Your Changes
92137

‎Makefile‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
include .env
2+
3+
.PHONY : help cp-env start-simple stop-simple
4+
5+
help: ## Outputs this help screen
6+
@grep -E '(^[a-zA-Z0-9\./_-]+:.*?##.*$$)|(^##)' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}{printf "\033[32m%-30s\033[0m %s\n", $$1, $$2}' | sed -e 's/\[32m##/[33m/'
7+
8+
install: ## Install the dependencies
9+
yarn install
10+
11+
cp-env: ## Copy the .env file to .env.local
12+
cp .env .env.local
13+
14+
start-simple: ## Start the simple Api-Platform backend and the Storybook frontend
15+
cd backend/simple && make build && make up HTTP_PORT=${SIMPLE_HTTP_PORT} HTTP3_PORT=${SIMPLE_HTTPS_PORT} HTTPS_PORT=${SIMPLE_HTTPS_PORT} && cd .. && yarn run storybook
16+
17+
stop-simple: ## Stop and prune the simple Api-Platform backend
18+
cd backend/simple && make prune

‎backend/simple/.dockerignore‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
**/*.log
2+
**/*.md
3+
**/*.php~
4+
**/*.dist.php
5+
**/*.dist
6+
**/*.cache
7+
**/._*
8+
**/.dockerignore
9+
**/.DS_Store
10+
**/.git/
11+
**/.gitattributes
12+
**/.gitignore
13+
**/.gitmodules
14+
**/compose.*.yaml
15+
**/compose.*.yml
16+
**/compose.yaml
17+
**/compose.yml
18+
**/docker-compose.*.yaml
19+
**/docker-compose.*.yml
20+
**/docker-compose.yaml
21+
**/docker-compose.yml
22+
**/Dockerfile
23+
**/Thumbs.db
24+
.github/
25+
docs/
26+
public/bundles/
27+
tests/
28+
var/
29+
vendor/
30+
.editorconfig
31+
.env.*.local
32+
.env.local
33+
.env.local.php
34+
.env.test

‎backend/simple/.editorconfig‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# EditorConfig helps developers define and maintain consistent
2+
# coding styles between different editors and IDEs
3+
# editorconfig.org
4+
5+
root = true
6+
7+
[*]
8+
# Change these settings to your own preference
9+
indent_style = space
10+
indent_size = 4
11+
12+
# We recommend you to keep these unchanged
13+
end_of_line = lf
14+
charset = utf-8
15+
trim_trailing_whitespace = true
16+
insert_final_newline = true
17+
18+
[*.{js,html,ts,tsx}]
19+
indent_size = 2
20+
21+
[*.json]
22+
indent_size = 2
23+
24+
[*.md]
25+
trim_trailing_whitespace = false
26+
27+
[*.sh]
28+
indent_style = tab
29+
30+
[*.xml{,.dist}]
31+
indent_style = space
32+
indent_size = 4
33+
34+
[*.{yaml,yml}]
35+
trim_trailing_whitespace = false
36+
37+
[.github/workflows/*.yml]
38+
indent_size = 2
39+
40+
[.gitmodules]
41+
indent_style = tab
42+
43+
[.php_cs{,.dist}]
44+
indent_style = space
45+
indent_size = 4
46+
47+
[composer.json]
48+
indent_size = 4
49+
50+
[{,docker-}compose{,.*}.{yaml,yml}]
51+
indent_style = space
52+
indent_size = 2
53+
54+
[{,*.*}Dockerfile]
55+
indent_style = tab
56+
57+
[{,*.*}Caddyfile]
58+
indent_style = tab

0 commit comments

Comments
 (0)