Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: make the development process easier with Storybook #541

Merged
Merged
Show file tree
Hide file tree
Changes from 61 commits
Commits
Show all changes
68 commits
Select commit Hold shift + click to select a range
6d267e8
chore: add auth storie and test
adguernier Mar 25, 2024
c288451
fix: Auth test did not use correct endpoint
adguernier Mar 26, 2024
0360d52
fix: TS warning
adguernier Mar 26, 2024
93f6641
fix: use env for storybook tests
adguernier Mar 26, 2024
bdeaee8
CI: run interaction test in CI
adguernier Mar 27, 2024
76e4c20
fix: NODE_ENV does not exist and expect is declared but its value is …
adguernier Mar 27, 2024
bb524d8
fix: expect is declared but its value is never read in check build
adguernier Mar 27, 2024
3346b0b
fix: unexpected any in checking code standards
adguernier Mar 27, 2024
c37676c
fix: remove useless test
adguernier Mar 27, 2024
95cb317
fix: check PWA reachability fails
adguernier Mar 28, 2024
3f2b8dd
fix: try to fix check PWA reachability fails
adguernier Mar 28, 2024
e15b7d4
fix: uncomment reachability steps
adguernier Mar 28, 2024
81fd9aa
fix: try to fix reachability steps
adguernier Mar 28, 2024
500ce1f
fix: try to fix reachability steps by healthchecking pwa
adguernier Mar 28, 2024
9087b62
fix: try to fix Timeout error in interactions tests by setting maxWor…
adguernier Mar 28, 2024
037241a
fix: try to fix Timeout error in interactions tests by setting maxWor…
adguernier Mar 28, 2024
e48682a
fix: try to fix Timeout error in interactions tests by setting maxWor…
adguernier Mar 28, 2024
4b7f486
fix: try to fix Timeout error in interactions tests by adding timeout…
adguernier Mar 28, 2024
140834e
chore: remove useless type
adguernier Mar 28, 2024
b71151e
chore: add @types/node to fix Failed to parse the TypeScript config f…
adguernier Mar 28, 2024
083c018
chore: try to fix test by setting a hight testTimeout
adguernier Mar 28, 2024
474eacc
chore: try to fix test by waiting for page ready
adguernier Mar 28, 2024
5c1ec91
chore: try to fix test by waiting for page ready
adguernier Mar 28, 2024
a04727d
chore: try to fix test
adguernier Mar 28, 2024
9e2b476
chore: upgrade storybook to version 8
adguernier Mar 28, 2024
16f7c45
chore: try to get playwright artifact
adguernier Mar 29, 2024
1e267f4
chore: try to fix storybook tests
adguernier Apr 3, 2024
dade8fb
chore: retry to build and bake
adguernier Apr 3, 2024
f7fda1a
chore: compose up without build
adguernier Apr 3, 2024
45acfa7
chore: add yarn install to CMD
adguernier Apr 3, 2024
e487570
chore: update yarn.lock
adguernier Apr 4, 2024
d4eacbb
switch back to nodeLinker node-modules
slax57 Apr 4, 2024
9573e03
update gitignore to ignore storybook build result
slax57 Apr 5, 2024
48710b7
re-enable playwright install
slax57 Apr 5, 2024
77804a4
disable reverse_proxy
slax57 Apr 5, 2024
39025f5
re-enable reverse proxy and fix its config
slax57 Apr 5, 2024
bfca4e5
re-enable reachability checks
slax57 Apr 5, 2024
5befd5b
re-remove reverse proxy
slax57 Apr 5, 2024
6405534
attempt to fix yarn playwright install
slax57 Apr 5, 2024
acd11d2
check health more frquently and output logs in case of failure
slax57 Apr 5, 2024
23e0760
Merge branch 'main' into chore/add-jwt-backend-and-stories
slax57 Apr 5, 2024
7528365
fix merge mistake
slax57 Apr 5, 2024
e781ebe
try to fix yarn settings
slax57 Apr 5, 2024
92e168e
improve debug logs
slax57 Apr 5, 2024
d9bfd83
remove broken checks and fix volumes config
slax57 Apr 5, 2024
4f03e4b
fix node_modules volume should only be declared for ci
slax57 Apr 5, 2024
8e347fc
fix runtime error in hydra dataProvider
slax57 Apr 5, 2024
9fe98e2
update CONTRIBUTING
adguernier Apr 8, 2024
9fc1471
install Twig to make API doc working
adguernier Apr 8, 2024
c2d4a16
fix: use params instead of defaultParams in extraInformation
adguernier Apr 8, 2024
5d70a2a
chore: clean yarn cache after modules installation
adguernier Apr 8, 2024
5ae05bb
chore: explain how to develop through Storybook
adguernier Apr 8, 2024
e1370ff
chore: clean yarn cache in CI
adguernier Apr 8, 2024
d7de715
chore: try to fix docker file linter in CI
adguernier Apr 8, 2024
0c7f0d0
chore: try to fix docker file linter in CI by ignoring DL3060 rule
adguernier Apr 8, 2024
e3eeedc
chore: try to fix docker file linter in CI by ignoring DL3060 rule
adguernier Apr 8, 2024
02cde2e
chore: try to fix docker linter in CI
adguernier Apr 8, 2024
73e279d
chore: remove useless actions
adguernier Apr 8, 2024
8917e12
chore: add Storybook documentation
adguernier Apr 8, 2024
70e90a6
chore: re-add buildx and bake action
adguernier Apr 9, 2024
f91c2a6
chore: add compose.ci.yaml to bake-action
adguernier Apr 9, 2024
cc10da7
chore: fix typos from review
adguernier Apr 15, 2024
bcc81b3
Apply suggestions from code review
adguernier Apr 18, 2024
eb3d456
remove useless php packages
adguernier Apr 18, 2024
cf539af
fix: ignore cert errors
alanpoulain May 2, 2024
a376ec9
chore: update contributing to explain how to run tests
adguernier May 2, 2024
64e0a1b
chore: remove comment in cache.yaml
adguernier May 2, 2024
be380d5
chore: isntall playwright for all images
adguernier May 2, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 16 additions & 23 deletions .github/workflows/storybook.yml
Original file line number Diff line number Diff line change
Expand Up @@ -23,38 +23,31 @@ jobs:
name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
-
name: Build Docker images
uses: docker/bake-action@v4
with:
pull: true
load: true
files: |
compose.yaml
set: |
*.cache-from=type=gha,scope=${{github.ref}}
*.cache-from=type=gha,scope=refs/heads/main
*.cache-to=type=gha,scope=${{github.ref}},mode=max
name: Build Docker images
uses: docker/bake-action@v4
with:
pull: true
load: true
files: |
compose.yaml
compose.ci.yaml
set: |
*.cache-from=type=gha,scope=${{github.ref}}
*.cache-from=type=gha,scope=refs/heads/main
*.cache-to=type=gha,scope=${{github.ref}},mode=max
-
name: Start services
run: docker compose -f compose.yaml -f compose.ci.yaml up --wait --no-build
-
name: Check HTTP reachability
run: curl -v --fail-with-body http://localhost
-
name: Check PWA reachability
run: "curl -vk --fail-with-body -H 'Accept: text/html' https://localhost"
-
name: Check API reachability
run: "curl -vk --fail-with-body -H 'Accept: application/ld+json' https://localhost"
-
name: Create test database
run: docker compose exec -T php bin/console -e test doctrine:database:create
-
name: Run migrations
run: docker compose exec -T php bin/console -e test doctrine:migrations:migrate --no-interaction
# -
# name: Doctrine Schema Validator
# run: docker compose exec -T pwa pnpm run storybook
-
name: Run interactions tests
run: docker compose exec -T pwa yarn storybook:test --url http://127.0.0.1:3000 --maxWorkers 1

lint:
name: Docker Lint
runs-on: ubuntu-latest
Expand Down
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,5 @@ node_modules/
/yarn.lock
.vscode/
.env.local
.yarn/
storybook-static/
adguernier marked this conversation as resolved.
Show resolved Hide resolved
3 changes: 3 additions & 0 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ const config: StorybookConfig = {
'@storybook/addon-essentials',
'@storybook/addon-onboarding',
'@storybook/addon-interactions',
'@storybook/addon-mdx-gfm',
'@storybook/addon-webpack5-compiler-babel'
],
framework: {
name: '@storybook/react-webpack5',
Expand All @@ -17,6 +19,7 @@ const config: StorybookConfig = {
},
env: (config) => ({
...config,
ENTRYPOINT: process.env.ENTRYPOINT ?? 'https://localhost',
}),
async webpackFinal(config, { configType }) {
config.resolve = {
Expand Down
1 change: 0 additions & 1 deletion .storybook/preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import type { Preview } from '@storybook/react';

const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
Expand Down
16 changes: 16 additions & 0 deletions .storybook/test-runner-jest.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { getJestConfig } from '@storybook/test-runner';

/**
* Jest configuration for running tests in Storybook.
*/
module.exports = {
// The default Jest configuration comes from @storybook/test
...getJestConfig(),

/**
* Add your own overrides below, and make sure
* to merge testRunnerConfig properties with your own.
* @see https://jestjs.io/docs/configuration
*/
testTimeout: 30000,
};
1 change: 1 addition & 0 deletions .yarnrc.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
nodeLinker: node-modules
adguernier marked this conversation as resolved.
Show resolved Hide resolved
52 changes: 44 additions & 8 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ Please base your changes on the `main` branch.
### Two ways to write your patch

You can patch `@api-platform/admin` by two different ways:
- by linking `@api-platform/admin` sources to an existing project;
- by installing this project and running it through Storybook.
- if you already have a project in progress: read [Linking the Source Version to an Existing Project](#linking-the-source-version-to-an-existing-project);
- if you do not have an existing project: read [Running Admin Through Storybook](#running-admin-through-storybook).

#### Linking the Source Version to an existing project
#### Linking the Source Version to an Existing Project

If you already have a project in progress, you can develop directly from it.

Expand Down Expand Up @@ -95,28 +95,64 @@ yarn dev --force

> You can now hack in the cloned repository of `api-platform-admin`.

#### Running Admin through Storybook
#### Running Admin Through Storybook

If you don't have an existing API Platform application, or don't want to use `yarn link`, you can use one of the bundled example APIs, and visualize the admin through [Storybook](https://storybook.js.org/).
If you do not have an existing project, you can contribute by visualizing directly the changes you made the sources through [Storybook](https://storybook.js.org/).
adguernier marked this conversation as resolved.
Show resolved Hide resolved

This development stack consists of two Docker containers:
- `pwa`: containing the `<Admin>` sources and Storybook;
- `php`: holding the API sources.

Additionally, this method allows testing the integration between Api-platform and the `admin` component by writing stories, scenarios and tests.
adguernier marked this conversation as resolved.
Show resolved Hide resolved

Install everything:

```shell
docker compose up
```

Go to http://localhost, accept the self-signed certificate, and see the running Admin.
Before accessing the Storybook instance, make sure to go to https://localhost to accept the self-signed certificate. Once it's done, you'll see the API documentation running on a customized version of Swagger UI.
slax57 marked this conversation as resolved.
Show resolved Hide resolved

To stop and prune the simple API Platform backend:
Now you can go to http://localhost:3000/ to see the Storybook instance in action. The changes you'll make in the source code will be hot-reloaded.

To access run a command directly inside a container, run:
```shell
# Run a command in the php container
docker compose exec -T php your-command

# Run a command in the pwa container
docker compose exec -T pwa your-command
```

### Testing Your Changes

Before sending a Pull Request, make sure the tests pass correctly:
Before sending a Pull Request, make sure the tests pass correctly.

#### With Linked Sources

If you have chosen to link `admin` sources, simply run:
adguernier marked this conversation as resolved.
Show resolved Hide resolved

```console
yarn test
```

#### With Admin Through Storybook

If you have chosen to develop with Storybook, you have to build the CI stack first:

```console
docker compose docker compose -f compose.yaml -f compose.ci.yaml up
adguernier marked this conversation as resolved.
Show resolved Hide resolved
```

Once the containes are healthy, run
adguernier marked this conversation as resolved.
Show resolved Hide resolved
```console
# fonctional tests
adguernier marked this conversation as resolved.
Show resolved Hide resolved
docker compose exec -T pwa yarn test

# End to end tests (Running with Storybook interactions https://storybook.js.org/docs/writing-stories/play-function)
docker compose exec -T pwa yarn storybook:test --url http://127.0.0.1:3000
adguernier marked this conversation as resolved.
Show resolved Hide resolved
```

### Matching Coding Standards

The API Platform Admin project follows coding standards inspired by the [Airbnb JavaScript style guide](https://github.com/airbnb/javascript).
Expand Down
19 changes: 9 additions & 10 deletions Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,20 @@


# Versions
FROM node:20-alpine AS node_upstream
FROM node:20-bookworm AS node_upstream


# Base stage for dev and build
FROM node_upstream AS base

# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
# hadolint ignore=DL3018
RUN apk add --no-cache libc6-compat

WORKDIR /srv/app

RUN corepack enable && \
corepack prepare --activate yarn@*

ENV HOSTNAME localhost
EXPOSE 3000
ENV PORT 3000
ENV HOSTNAME localhost

# Development image
FROM base as dev
Expand All @@ -28,12 +24,15 @@ CMD ["sh", "-c", "yarn install; yarn storybook"]

FROM base as ci

COPY --link package.json yarn.lock ./
COPY --link package.json yarn.lock .yarnrc.yml ./

RUN set -eux; \
yarn
yarn && yarn cache clean

# copy sources
COPY --link . ./
RUN yarn storybook:build

CMD ["yarn", "serve"]
RUN set -eux; \
yarn playwright install --with-deps && yarn cache clean
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we install this on the dev container as well? then add instructions on how to run that inside docker?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done


CMD ["sh", "-c", "yarn storybook:build && yarn storybook:serve -p 3000"]
23 changes: 23 additions & 0 deletions api/bin/phpunit
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
#!/usr/bin/env php
adguernier marked this conversation as resolved.
Show resolved Hide resolved
<?php

if (!ini_get('date.timezone')) {
ini_set('date.timezone', 'UTC');
}

if (is_file(dirname(__DIR__).'/vendor/phpunit/phpunit/phpunit')) {
if (PHP_VERSION_ID >= 80000) {
require dirname(__DIR__).'/vendor/phpunit/phpunit/phpunit';
} else {
define('PHPUNIT_COMPOSER_INSTALL', dirname(__DIR__).'/vendor/autoload.php');
require PHPUNIT_COMPOSER_INSTALL;
PHPUnit\TextUI\Command::main();
}
} else {
if (!is_file(dirname(__DIR__).'/vendor/symfony/phpunit-bridge/bin/simple-phpunit.php')) {
echo "Unable to find the `simple-phpunit.php` script in `vendor/symfony/phpunit-bridge/bin/`.\n";
exit(1);
}

require dirname(__DIR__).'/vendor/symfony/phpunit-bridge/bin/simple-phpunit.php';
}
4 changes: 3 additions & 1 deletion api/composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@
"symfony/serializer": "6.4.*",
"symfony/twig-bundle": "6.4.*",
"symfony/validator": "6.4.*",
"symfony/yaml": "6.4.*"
"symfony/yaml": "6.4.*",
"twig/extra-bundle": "^2.12|^3.0",
"twig/twig": "^2.12|^3.0"
},
"require-dev": {
adguernier marked this conversation as resolved.
Show resolved Hide resolved
"api-platform/schema-generator": "^5.0",
Expand Down
76 changes: 75 additions & 1 deletion api/composer.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions api/config/bundles.php
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,8 @@
Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true],
Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle::class => ['all' => true],
Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true, 'test' => true],
Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
];
19 changes: 19 additions & 0 deletions api/config/packages/cache.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
framework:
cache:
# Unique name of your app: used to compute stable namespaces for cache keys.
#prefix_seed: your_vendor_name/app_name

# The "app" cache stores to the filesystem by default.
# The data in this cache should persist between deploys.
# Other options include:

# Redis
#app: cache.adapter.redis
#default_redis_provider: redis://localhost

# APCu (not recommended with heavy random-write workloads as memory fragmentation can cause perf issues)
#app: cache.adapter.apcu

# Namespaced pools use the above "app" backend by default
#pools:
#my.dedicated.cache: null
Copy link
Member

@soyuka soyuka May 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you remove the comments in this file?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

5 changes: 5 additions & 0 deletions api/config/packages/debug.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
when@dev:
debug:
# Forwards VarDumper Data clones to a centralized server allowing to inspect dumps on CLI or in your browser.
# See the "server:dump" command to start a new server.
dump_destination: "tcp://%env(VAR_DUMPER_SERVER)%"
Loading