https://github.com/zodern/aurorae
Development environment for UI components, built for Meteor
https://github.com/zodern/aurorae
Last synced: 9 months ago
JSON representation
Development environment for UI components, built for Meteor
- Host: GitHub
- URL: https://github.com/zodern/aurorae
- Owner: zodern
- Created: 2021-04-02T02:22:32.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-04-21T21:42:25.000Z (about 5 years ago)
- Last Synced: 2024-10-19T15:15:58.487Z (over 1 year ago)
- Language: JavaScript
- Size: 23.4 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
Awesome Lists containing this project
README
# Aurorae
Development environment for UI components, built for Meteor.
Auroae is similar to [Storybook](https://storybook.js.org/), with only the basic features.
Features:
- Create stories for React, Blaze, Svelte, and Vue
- Updates stories and components with HMR (Requires Meteor 2)
- Use Meteor packages, API's, and build plugins with your stories
- Runs as part of your Meteor app
Meteor 2 or newer is recommended.
## Getting Started
Add `zodern:aurorae` with
```bash
meteor add zodern:aurorae
meteor npm install --save svelte
```
Start your app and navigate to `/__meteor-aurorae` to view the stories in your app. For some apps, you might need to adjust the router used by the app to prevent redirecting away from `/__meteor-aurorae`.
Stories are defined in files with the `.stories.js`, `.stories.html`, or `.stories.svelte` extensions. These files are handled differently than other files in an app:
- These files are always eagerly loaded on the client in development
- In production builds or on the server, the files are only loaded if they are imported by another file
- `.stories.html` files are compiled using Blaze
- `.stories.js` files are compiled the same way the `ecmascript` package compiles `.js` files
- `.stories.svelte` files are compiled with the `zodern:melte` package
## UI Frameworks
### React
Add story:
```js
import { addStory } from 'meteor/zodern:aurorae/react';
import Button './Button.jsx';
// addStory(name, component, props)
addStory(
'Button - dark',
Button,
{ title: 'Explore', theme: 'dark' }
);
// Or you can create a function component
addStory(
'Button - dark',
() =>
);
```
If you want to wrap your component with another component, for example if it consumes react context or needs a parent element styled a certain way, you can add a wrapper by:
```js
addStory(
'Button - light',
Button,
{ title: 'Hide', theme: 'light' }
)
// The wrapper function is given the children that should be rendered, and returns a react element
.wrap(({ children }) => {children});
```
### Svelte
Add story:
```js
import { addStory } from 'meteor/zodern:aurorae/svelte';
import Button './Button.svelte';
// addStory(name, component, props)
addStory(
'Button - dark',
Button,
{ title: 'Explore', theme: 'dark' }
);
```
Or you can add stories in files with the `.stories.svelte` extension (for example, `button.stories.svelte`):
```html
import { Story } from 'meteor/zodern:aurorae/svelte';
import Button from './Button.svelte';
Next
Next
```
If you want to wrap your component with another component, you can add a wrapper by:
```js
import Wrapper from './Wrapper.svelte';
addStory(
'Button - light',
Button,
{ title: 'Hide', theme: 'light' }
)
// The wrapper component
.wrap(Wrapper);
```
The wrapper component receives two props: `component` with the story component, and `props` with the props that should be passed to the component. For example, the wrapper could look like:
```html
export let component;
export let props;
div {
max-width: 400px;
padding: 20px;
background: #EEE;
}
```
### Blaze
Add story:
```js
import { addStory } from 'meteor/zodern:aurorae/blaze';
import './button.html';
// addStory(name, template/Blaze view, data)
addStory(
'Button - dark',
Template.button,
{ title: 'Explore', theme: 'dark' }
);
```
Or you can add stories in files with the `.stories.html` extension (for example, `button.stories.html`). Templates that start with `story--` are added as Aurorae stories.
```html
{{> button title="Explore" theme="dark"}}
{{#button theme="light"}}
Explore
{{/button}}
```
If you want to wrap your template with another template, you can add a wrapper by:
```js
import Wrapper from './Wrapper.svelte';
addStory(
'Button - light',
Template.button,
{ title: 'Hide', theme: 'light' }
)
// The wrapper template
.wrap(Template.storyWrapper);
```
The wrapper template should have an element with the `story-blaze-content` id. The story's template is rendered inside of that element. For example, the wrapper could look like:
```html
```
### Vue
Add story:
```js
import { addStory } from 'meteor/zodern:aurorae/vue';
import Button from './button.vue';
// addStory(name, component, props)
addStory(
'Button - dark',
Button,
{ title: 'Explore', theme: 'dark' }
);
```
If you want to wrap your component with another component, you can add a wrapper by:
```js
import Wrapper from './wrapper.vue';
addStory(
'Button - light',
Button,
{ title: 'Hide', theme: 'light' }
)
// The wrapper component
.wrap(Wrapper);
```
The wrapper template should have a default slot. For example:
```html
export default {};
```
## Group Stories
To group stories in the sidebar, you can include the group in the story name in the format `Group Name - Story Name`. For example, `Button - light` and `Button - dark` would both be in the `Button` group.
## Show Aurorae
Aurorae will automatically show itself if when the page loads the url is `/__meteor-aurorae`. You can also show Aurorae with:
```js
import { showStories } from 'meteor/zodern:aurorae';
showStories();
```
## Keyboard shortcuts
- `j` go to the next story
- `k` go to the previous story