stories: link to contributing guide (#15825)

Fix DE-185

Author: JonasBa

develop-docs/frontend/component-library.mdx

@@ -23,123 +23,16 @@ Stories is a custom docs framework served under the `/stories` path inside the m
 - **Dev Access**<br />
     Whether you are using `pnpm dev-ui` to start a development server, or `sentry devserver` to spin up all the services locally, you can access Stories by logging in and changing the path from `/issues/` (the default landing page) to `/stories/`.
 
+## Contributing to Stories
+
+For information on how to contribute to Stories, please see the [Contributing](https://sentry.sentry.io/stories/core/contributing/) section of the Stories documentation.
+
 ## Ownership
 
 Stories for core components are owned by the Design Engineering team. Stories for general components are not nessicarily maintained by the original author or team of that component—if you are reading a story and notice a mistake or omission, consider it an opportunity to leave the docs in better shape than you found them! 
 
 The Design Engineering team is always available in the `#discuss-design-engineering` channel on Slack for questions or general feedback.
 
-## Creating new Stories
-
-### Using `.mdx`
-
-The easiest way to document a single component is to create an `.mdx` file next to the component. For a new `myButton` component, the file can be named `index.mdx` or `myButton.mdx`.
-
-```
-components/
-└── myButton/
-    ├── index.tsx
-    └── index.mdx
-```
-
-The file can include the following frontmatter fields.
-
-```yaml
----
-title: My Button
-description: MyButton is a clickable element that triggers an action.
-source: 'sentry/components/myButton'
-# optionally include links to figma, js, and a11y resources:
-resources:
-  figma: https://www.figma.com/design/...
-  js: https://github.com/getsentry/sentry/...
-  a11y:
-    WCAG 1.4.3: https://www.w3.org/TR/WCAG22/#contrast-minimum
-    WAI-ARIA Button Practices: https://www.w3.org/WAI/ARIA/apg/patterns/button/
----
-```
-
-Components can include autogenerated API documentation using our [custom type-loader](https://github.com/getsentry/sentry/blob/master/static/app/stories/type-loader.ts) and exporting an object named `types`. The [inline loader syntax](https://rspack.rs/api/loader-api/inline) is weird, but it works.
-
-```mdx
-import APIReference from '!!type-loader!sentry/components/myButton/index';
-
-export const types = {MyButton: APIReference.MyButton};
-```
-
-For a good example, see the [button.mdx](https://github.com/getsentry/sentry/blob/master/static/app/components/core/button/index.mdx?plain=1) file.
-
-### Helper Components
-
-There are some common helper components available to make common patterns in stories easier to implement.
-
-```mdx
-import * as Storybook from 'sentry/stories';
-```
-
-- [`<Demo />`](https://github.com/getsentry/sentry/blob/master/static/app/components/stories/demo.tsx)<br />
-    Renders a preview frame around a component.
-
-- [`<JSXNode />`](https://github.com/getsentry/sentry/blob/master/static/app/components/stories/jsxNode.tsx)<br />
-    Render a formatted JSX component name and some properties.<br />
-    ```tsx
-    return <JSXNode name="IconFire" props={{color: 'red400', size: 'sm'}} />;
-
-    // will render as <code>&lt;IconFire<br/>color="red"<br/>size="sm" \:gt;</code>
-    ```
-
-- [`<JSXProperty />`](https://github.com/getsentry/sentry/blob/master/static/app/components/stories/jsxProperty.tsx)
-    Render a formatted JSX property name & value.<br />
-    ```tsx
-    return <JSXProperty name="disabled" value={false} />;
-
-    // will render as `<code>size={false}</code>`
-    ```
-
-- [`<SideBySide>{children}</SideBySide>`](https://github.com/getsentry/sentry/blob/master/static/app/components/stories/sideBySide.tsx)<br />
-    A shortcut for `display: flex;` to render multiple items in a row, wrapping as needed
-    ```tsx
-    return (
-      <SideBySide>
-        <Badge type="default">Default</Badge>
-        <Badge type="alpha">Alpha</Badge>
-        <Badge type="beta">Beta</Badge>
-      </SideBySide>
-    );
-    ```
-
-- [`<SizingWindow />`](https://github.com/getsentry/sentry/blob/master/static/app/components/stories/sizingWindow.tsx)<br />
-    A wrapper component to help demonstrate what the component looks like when the parent size is different or changing.<br />
-    By default uses `display:flex; overflow: hidden;` which can test responsive components well. Can also be set to `display: block; overflow: auto;`.<br />
-    ```tsx
-    <SizingWindow style={{height: '100px'}}>
-      <LoadingTriangle />
-    </SizingWindow>`
-    ```
-
-- [`<Matrix />`](https://github.com/getsentry/sentry/blob/master/static/app/components/stories/matrix.tsx)<br />
-    A helper to render multiple pairs of properties and values in a grid.
-    For example, we can render all button `priority` values against all possible `size` values which results in a 4x5 matrix of outputs.
-    ```tsx
-    <Matrix
-      render={() => Button}
-      propMatrix={{
-        priority: ['default', 'primary'],
-        size: ['md', 'sm'],
-      }}
-      selectedProps={['priority', 'size']}
-    />
-    ```
-
-- [`<ThemeToggle />`](https://github.com/getsentry/sentry/blob/master/static/app/components/stories/themeToggle.tsx)<br />
-    A wrapper component to isolate children from the current theme used on the page. Allows quickly toggling an example between <code>light</code>/<code>dark</code> without changing the whole screen (useful at night when you want most things in dark mode).<br/>
-    Use this to emphasize that a component/image has been tested and works well in <code>light</code> or <code>dark</code> mode.
-    ```tsx
-    <ThemeToggle>
-      <LoadingTriangle />
-    </ThemeToggle>
-    ```
-
 ## Improving Stories
 
 All code for the stories framework is built and maintained by Sentry's Design Engineering team. However, this tool is for all of us, so contributions are welcome! If you have ideas to improve the experience of discovering, reading, writing, or organizing stories, please share in the `#discuss-design-engineering` channel on Slack.