feat: Remove storybook composition (#1092)

.github/workflows/feature-branch-deploy.yml

@@ -53,20 +53,13 @@ jobs:
 
       - name: Create a version mark
         run: |
-          touch ./storybook/storybook-docs/dist/${{ github.sha }}.txt
-
-      - name: Create deploy folder
-        run: |
-          mkdir temp-deploy-directory
-          cp storybook/storybook-docs/dist/* temp-deploy-directory -r
-          mkdir temp-deploy-directory/storybook-react
-          cp storybook/storybook-react/dist/* temp-deploy-directory/storybook-react -r
+          touch ./storybook/dist/${{ github.sha }}.txt
 
       - name: Pushing to pages branch
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           branch: gh-pages
-          folder: temp-deploy-directory
+          folder: storybook/dist
           target-folder: demo-${{ env.BRANCH_NAME }}
 
       - name: Wait for GitHub Pages to be deployed

.github/workflows/lint-test.yml

@@ -92,16 +92,9 @@ jobs:
         run: |
           pnpm run --if-present test
 
-      - name: "Retain build artifact: storybook docs"
+      - name: "Retain build artifact: Storybook"
         uses: actions/upload-artifact@v4
         with:
-          name: storybook-docs
-          path: storybook/storybook-docs/dist/
-          retention-days: 1
-
-      - name: "Retain build artifact: storybook React"
-        uses: actions/upload-artifact@v4
-        with:
-          name: storybook-react
-          path: storybook/storybook-react/dist/
+          name: storybook
+          path: storybook/dist/
           retention-days: 1

.github/workflows/publish.yml

@@ -75,25 +75,14 @@ jobs:
         if: ${{ steps.release.outputs.releases_created }}
 
       # The logic below handles the Storybook deploy:
-      - name: "Restore build artifact: Storybook docs"
+      - name: "Restore build artifact: Storybook"
         uses: dawidd6/action-download-artifact@v3
         with:
           workflow: "lint-test.yml"
-          name: storybook-docs
+          name: storybook
           path: dist/storybook
         if: ${{ steps.release.outputs.releases_created }}
 
-      - name: "Restore build artifact: Storybook react"
-        uses: dawidd6/action-download-artifact@v3
-        with:
-          workflow: "lint-test.yml"
-          name: storybook-react
-          # React storybook is deployed to the /storybook-react subdirectory.
-          # In the main docs storybook, the contents of /storybook-react
-          # are also shown using Storybook composition.
-          path: dist/storybook/storybook-react
-        if: ${{ steps.release.outputs.releases_created }}
-
       - name: Deploy to GitHub Pages
         uses: JamesIves/github-pages-deploy-action@v4
         with:

documentation/storybook.md

@@ -4,8 +4,6 @@
 
 We use Storybook 7 to display all components and allow interaction with them.
 
-Each component library has its Storybook instance – currently, we only have React.
-We use Storybook’s composition feature to combine the main Storybook with the React one.
 We publish each merge to the `main` branch to [amsterdam.github.io/design-system](https://amsterdam.github.io/design-system/).
 
 ## Structure

package.json

@@ -16,7 +16,7 @@
   "workspaces": [
     "./packages/*",
     "./proprietary/*",
-    "./storybook/*"
+    "./storybook"
   ],
   "devDependencies": {
     "@lerna-lite/cli": "3.3.0",
@@ -75,8 +75,7 @@
     "update-patch": "npm-check-updates --configFileName .ncurc.patch.js --deep --dep dev,prod --target patch --upgrade && pnpm install",
     "watch:css": "npm run --workspace packages/css build:watch",
     "watch:react": "npm run --workspace packages/react build:watch",
-    "watch:storybook-docs": "npx wait-on http://localhost:6007 && npm run --workspace storybook/storybook-docs start",
-    "watch:storybook-react": "npm run --workspace storybook/storybook-react start",
+    "watch:storybook": "npm run --workspace storybook start",
     "watch:tokens": "npm run --workspace proprietary/tokens watch"
   }
 }

packages/css/src/components/card/README.md

@@ -7,15 +7,15 @@ The link is mandatory.
 ## Guidelines
 
 - The title of a card is a link within a heading.
-  The same guidelines as for regular [links](?path=/docs/react_navigation-link--docs) and [headings](?path=/docs/react_text-heading--docs) apply here.
+  The same guidelines as for regular [links](/docs/components-navigation-link--docs) and [headings](/docs/components-text-heading--docs) apply here.
   The link is active across the entire area of the card.
 - A card needs more content than just a title.
   Supplement this with textual and/or visual content.
 - Place the text in a regular paragraph.
   Only use the smallest text size for a tagline or date.
 - This component may not be the best option if the content does not represent a detailed page.
-  For referencing a thematic page, use a [top task link](?path=/docs/react_navigation-top-task-link--docs).
-  You can also use a [regular link](?path=/docs/react_navigation-link--docs).
+  For referencing a thematic page, use a [top task link](/docs/components-navigation-top-task-link--docs).
+  You can also use a [regular link](/docs/components-navigation-link--docs).
 
 ## Screen Readers
 

packages/css/src/components/checkbox/README.md

@@ -25,4 +25,4 @@ It is written in the first person when asking the user to agree to the terms and
 
 - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): It is clear for both users and programmatically what the purpose of a form field is.
 
-Checkbox is an interactive element; therefore, [the general requirements and guidelines for interactive elements](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) apply.
+Checkbox is an interactive element; therefore, [the general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.

packages/css/src/components/grid/README.md

@@ -5,9 +5,9 @@ Divides the screen into columns to align the elements of a page.
 ## Usage
 
 Every page should use the grid as the foundation for its layout.
-It is placed directly within the [Screen](?path=/docs/layout-screen--docs).
+It is placed directly within the [Screen](/docs/components-layout-screen--docs).
 
-A [Footer](?path=/docs/react_containers-footer--docs) and a [Spotlight](?path=/docs/react_containers-spotlight--docs) are slightly wider than the grid.
+A [Footer](/docs/components-containers-footer--docs) and a [Spotlight](/docs/components-containers-spotlight--docs) are slightly wider than the grid.
 You close one instance of the grid before these components.
 Inside and optionally after them, you start a new one.
 Multiple instances of the grid component are possible on a page, but the columns of all grids must align precisely.
@@ -17,4 +17,4 @@ A cell often spans multiple columns of the grid.
 
 ## Design
 
-The [design choices](?path=/docs/docs-designrichtlijnen-grid--docs) are described in the design guidelines.
+The [design choices](/docs/docs-design-guidelines-grid--docs) are described in the design guidelines.

packages/css/src/components/icon-button/README.md

@@ -11,4 +11,4 @@ A button containing only an icon.
 
 ## Relevant WCAG Requirements
 
-The Icon Button follows [the same requirements and guidelines as a regular button](https://amsterdam.github.io/design-system/?path=/docs/react_buttons-button--docs).
+The Icon Button follows [the same requirements and guidelines as a regular button](/docs/components-buttons-button--docs).

packages/css/src/components/icon/README.md

@@ -26,4 +26,4 @@ Icons are aligned to the left of the text by default and vertically centred to t
 
 Icons use the same text levels as all typographic components to determine their size.
 This ensures easy alignment between icons and text.
-[Refer to the typography documentation for more information](/docs/docs-designrichtlijnen-typografie--docs#tekstniveaus).
+[Refer to the typography documentation for more information](/docs/docs-design-guidelines-typography--docs).

packages/css/src/components/image/README.md

@@ -13,7 +13,7 @@ Displays an image.
   For example, provide small, medium, and large variants for various screen sizes.
   This prevents unnecessary downloading of large files.
   Do this especially for the main image of a page, where the difference between sizes on a narrow and wide screen is most significant.
-- Ensure that the aspect ratio of the image is supported by the [Aspect Ratio](?path=/docs/layout-aspect-ratio--docs) component.
+- Ensure that the aspect ratio of the image is supported by the [Aspect Ratio](/docs/components-layout-aspect-ratio--docs) component.
 
 ## Relevant WCAG Requirements
 

packages/css/src/components/link-list/README.md

@@ -13,4 +13,4 @@ Therefore, it is blue and clickable.
 
 Use a Link List to present multiple links within a theme.
 
-For additional guidelines, refer to the [Link](?path=/docs/navigation-link--docs) component.
+For additional guidelines, refer to the [Link](/docs/components-navigation-link--docs) component.

packages/css/src/components/page-heading/README.md

@@ -14,4 +14,4 @@ Use this component for a name, title, or motto.
 The page heading component is a variant of a heading level 1 with a distinct style.
 When using this component, ensure that the heading hierarchy of the page remains logical.
 
-For this component, the same WCAG requirements apply as for [the heading component](https://amsterdam.github.io/design-system/?path=/docs/react_text-heading--docs).
+For this component, the same WCAG requirements apply as for [the heading component](/docs/components-text-heading--docs).

packages/css/src/components/page-menu/README.md

@@ -15,4 +15,4 @@ A small set of links for use in the Header and Footer.
 
 - [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html)
 
-PageMenu is an interactive element, and the [general requirements and guidelines for interactive elements](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) apply.
+PageMenu is an interactive element, and the [general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.

packages/css/src/components/pagination/README.md

@@ -16,4 +16,4 @@ Pagination indicates the current page and allows users to navigate to other page
 
 ## Relevant WCAG Rules
 
-Pagination is an interactive element, and the [general requirements and guidelines for interactive elements](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) apply.
+Pagination is an interactive element, and the [general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.

packages/css/src/components/screen/README.md

@@ -6,10 +6,10 @@ Manages the maximum width and alignment of the entire website or application.
 
 This should be the outermost component of your website or application.
 Within it, combine components such as
-[Grid](?path=/docs/react_layout-grid--docs),
-[Header](?path=/docs/react_containers-header--docs),
-[Footer](?path=/docs/react_containers-footer--docs),
-[Spotlight](?path=/docs/react_containers-spotlight--docs),
+[Grid](/docs/components-layout-grid--docs),
+[Header](/docs/components-containers-header--docs),
+[Footer](/docs/components-containers-footer--docs),
+[Spotlight](/docs/components-containers-spotlight--docs),
 and Figure.
 
 ## Design

packages/css/src/components/search-field/README.md

@@ -30,4 +30,4 @@ These features can be disruptive for a user searching for part of a word, and `a
 - [WCAG 1.3.5](https://www.w3.org/TR/WCAG22/#identify-input-purpose): It is clear both to the user and programmatically what the purpose of a form field is.
 - [WCAG 2.4.6](https://www.w3.org/TR/WCAG22/#headings-and-labels): There is a label describing the purpose of the input.
 
-Search Field is an interactive element; therefore, [the general requirements and guidelines for interactive elements](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) apply.
+Search Field is an interactive element; therefore, [the general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.

packages/css/src/components/switch/README.md

@@ -14,7 +14,7 @@ A switch applies to a page or the entire system, such as an on/off switch.
 
 - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): it is both clear for a user and programmatically what the purpose of a form field is.
 
-The Switch is an interactive element; general requirements and guidelines for interactive elements apply [here](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs).
+The Switch is an interactive element; general requirements and guidelines for interactive elements apply [here](/docs/docs-design-guidelines-interactive-elements--docs).
 
 ## References
 

packages/css/src/components/table/README.md

@@ -8,4 +8,4 @@ Table is used to display simple information that does not need to be filtered or
 - Use `<Table.Caption>` to describe a table in the same way you would use a heading.
   A caption helps users find, navigate and understand tables.
 - Never use the table component to layout content on a page.
-  Instead, use [Grid](https://amsterdam.github.io/design-system/?path=/docs/react_layout-grid--docs).
+  Instead, use [Grid](/docs/components-layout-grid--docs).

packages/css/src/components/top-task-link/README.md

@@ -10,12 +10,12 @@ A prominent navigation element to quickly start a task.
 - Keep both texts concise.
   A title consists of a few words, and the description consists of 1 or 2 short sentences.
   The description should end with a period or another appropriate punctuation mark.
-- For wide windows, place 3 or 4 Top Task Links side by side on the [Grid](?path=/docs/react_layout-grid--docs).
+- For wide windows, place 3 or 4 Top Task Links side by side on the [Grid](/docs/components-layout-grid--docs).
   If you have more Top Task Links, place them in the next row.
   Try to distribute the amount of links on wide windows over rows of 3 or 4 links.
   If this is not possible, leave the last cells of the grid empty.
-- If you have a group of links for which a description is unnecessary or illogical, use a [Link List](?path=/docs/react_navigation-link--docs).
+- If you have a group of links for which a description is unnecessary or illogical, use a [Link List](/docs/components-navigation-link--docs).
 
 ## Relevant WCAG requirements
 
-The Top Task Link is subject to the same requirements as [regular links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs).
+The Top Task Link is subject to the same requirements as [regular links](/docs/components-navigation-link--docs).

plopfile.mjs

@@ -60,12 +60,12 @@ export default function (plop) {
       {
         type: 'add',
         data: { curlyBefore: '{' },
-        path: 'storybook/storybook-react/src/{{pascalCase name}}/{{pascalCase name}}.docs.mdx',
+        path: 'storybook/src/components/{{pascalCase name}}/{{pascalCase name}}.docs.mdx',
         templateFile: 'plop-templates/storybook.docs.mdx.hbs',
       },
       {
         type: 'add',
-        path: 'storybook/storybook-react/src/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
+        path: 'storybook/src/components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
         templateFile: 'plop-templates/storybook.stories.tsx.hbs',
       },
     ],