Skip to content

Instantly share code, notes, and snippets.

View shilman's full-sized avatar
🇹🇼

Michael Shilman shilman

🇹🇼
1.3k followers · 7 following
View GitHub Profile
@shilman
shilman / simple.mdx
Created December 2, 2019 15:52
Simple MDX example

import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';

import { Badge } from './Badge'; import { Icon } from './Icon';

Badge

Let's define a story for our Badge component:

@shilman
shilman / storybook-monthly-2019-11-04.md
Last active November 4, 2019 20:50
Storybook Monthly 2019-11-04

Storybook Monthly 2019-11-04

Introduction - 5m

  • Welcome
  • Self-introductions

5.3 Release - 5m

Nov 11 beta, Dec 9 rc, Jan 7 final (3 mo cycle)

@shilman
shilman / storybook-docs-typescript-walkthrough.md
Last active February 20, 2024 11:37
Storybook Docs Typescript Walkthrough

Storybook Docs w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.

The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.

Step 1: Initialize CRA w/ TS

npx create-react-app cra-ts --template typescript
@shilman
shilman / storybook-docs-typescript-walkthrough.md
Last active November 1, 2019 02:48
Storybook Monthly 2019-10-07

Storybook Docs w/ Typescript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs and Typescript. It's not

@shilman
shilman / storybook-monthly-2019-09-02.md
Last active August 31, 2019 12:15
Storybook monthly meeting 2019-09-02

Storybook Monthly 2019-09-02

Introduction - 5m

  • Welcome
  • Self-introductions

5.2 Release - 5m

  • 7/15 beta 🎉, 8/30 rc, 9/10 release (2.5 mo cycle)
@shilman
shilman / Untitled-1
Created August 31, 2019 04:25
# Storybook Monthly 2019-09-02
## Introduction - 5m
- Welcome
- Self-introductions
## 5.2 Release - 10m
- 7/15 beta 🎉, 8/30 rc, 9/10 release (2.5 mo cycle)
@shilman
shilman / Badge.stories.jsx
Last active August 21, 2019 15:48
MDX Sample
import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import { Badge } from './Badge';
<Meta title="Demo/Badge" component={Badge} />
# Badge
With `MDX` we write longform markdown documentation for our `Badge` component and embed Doc Blocks inline.
<Props of={Badge} />
@shilman
shilman / Storybook-monthly-2019-08-13.md
Last active August 31, 2019 04:25
Storybook monthly meeting 2019-08-13

Storybook Monthly 2019-08-13

Introduction - 5m

  • Welcome
  • Self-introductions

5.2 - 10m

  • 7/15 beta 🎉, 8/19 rc, 8/26 release (2.5 mo cycle)
@shilman
shilman / counter.stories.js
Created July 25, 2019 09:27
export default { title: 'Counter' }
export const enabled = () => <Counter text="Enabled" />;
export const disabled = () => <Counter disabled text="Disabled" />;
@shilman
shilman / release_5_2.md
Last active July 16, 2019 07:01
Storybook 5.2 release plan

Storybook 5.2 Release

It's that time again! Storybook 5.1 is stable and 5.2 is coming down the pipe!

Schedule

  • ✅ 5.2.0-alpha.0: 2019-04-29
  • ✅ 5.2.0-beta.0: 2019-07-15
  • ⏱ 5.2.0-rc.0: 2019-07-29 (est)
  • 🏁 5.2.0: 2019-08-05 (est)