feat: update ui (#46)

BREAKING CHANGE: This updates the ui parts of toybox, and introduces new properties to
present stories in another way!

### Startpage
You can now create a start page story. You can specify this in
`toybox.config.js`.

```ts
const config: Config = {
  startpageComponentPath: "startpage.story.md",
};
```

### Story header properties
- Each story can now include a status type, which displays a Badge
indicating the current status of a component.
- If you wish to change the background display of your story render,
`variant` has a couple of styles that you can try!
- By using `hideControls`, codeTemplates spans the full width by hiding
the property toolbar.
- A new type named `import` has been added, which illustrates how to
import a component. Optionally, you can name another npm package in your
story, otherwise it will default to what you specify the
`npmPackageName` field in `toybox.config.js`.

Here is a breakdown of the new changes in the story file

```tsx
header: {
    title: 'Button', // Title of story
    description:
      'Buttons communicate actions that users can take. Button labels express what action will occur when the user interacts with it.', // Description of the story.
    storyButtons: [
      // Demonstrates component import. Package name defaults to toybox.config.ts setting.
      {
        type: 'import'
        value: 'Button',
      },
      // Status of the component.
      {
        type: 'status',
        value: 'core' | 'not-supported' | 'deprecated';
      },
      // For 'github' type, URL is optional. It can be auto-generated from the component name or manually provided.
      { type: 'github' },
      // For figma `url` is a link to the design of the component.
      {
        type: 'figma',
        url: 'https://www.figma.com/',
      },
    ],
  },
  stories: [
    {
      name: 'How to use the Button component', // The name of this story
      center: true, // Should the component be in center or not
      hideControls: true, // Hides the prop toolbar
      /**
       * The code template will show how to use the component.
       * `props` is a string representation of all stings in a single line.
       * If you want to show the props on multi lines you can use `props.asMultiline(indentSpace)` instead.
       */
      codeTemplate: (props, children) => `
        <Button${props}>
          ${children}
        </Button>`,
      variant: "filled" | "transparent", // Optionally, you can switch to another background on the codeTemplate.
      render(},) {
        return (
          <YourComponent />
        );
      },
    };
  ]
};
``` 

### Preview:

![ui-update-toybox](https://github.com/kivra/toybox/assets/77273035/8c696731-79e0-447b-8923-535af19d686d)

.github/workflows/build.yml

@@ -10,22 +10,39 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: asdf-vm/actions/install@v3
 
       - name: ⚙️ Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: "20.13.1"
           registry-url: "https://npm.pkg.github.com"
+          cache: "pnpm"
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
-      - name: ⬇️ Install Dependencies
-        run: npm ci
+      - name: ⬇️ Install dependencies
+        shell: bash
+        run: pnpm install --frozen-lockfile --prefer-offline
 
-      - name: ⚙️ Type check
-        run: npx tsc
+      - name: 🧐 Typecheck
+        run: pnpm typecheck
 
       - name: ✅ Test
-        run: npx vitest run
+        run: pnpm e2e:unit:test
 
       - name: 📦 Semantic Release
         uses: cycjimmy/semantic-release-action@v3

.tool-versions

@@ -1 +1,2 @@
-nodejs 20.13.1
+nodejs 22.2.0
+pnpm 9.1.1