Skip to content

Commit 09e3521

Browse files
codinsonncodinsonn
committed
feat: Add aetherspace branding to Storybook
1 parent 5ccc46a commit 09e3521

File tree

20 files changed

+475
-3
lines changed

20 files changed

+475
-3
lines changed

‎.storybook/aetherTheme.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { create } from '@storybook/theming';
2+
3+
export default create({
4+
base: 'light',
5+
brandTitle: 'Aetherspace GREEN stack starter',
6+
brandUrl: 'https://github.com/Aetherspace/green-stack-starter-demo#readme',
7+
brandImage: '/StorybookLogo.png',
8+
brandTarget: '_blank',
9+
})

‎.storybook/disabled/.gitkeep‎

Whitespace-only changes.

‎.storybook/disabled/@aetherspace-mongoose/README.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# `@aetherspace/mongoose` - Aetherspace Plugin
2+
3+
Prerequisites:
4+
- [Sponsor Aetherspace on Github]() or get access to it some other way
5+
- Fork or generate a new repository from the official or free [aetherspace/green-stack-starter](https://github.com/Aetherspace/green-stack-starter#readme) github repo
6+
- Choose the "✅ Include all branches" option during the fork / generation process
7+
8+
```shell
9+
git merge with/mongoose
10+
```
11+
12+
```shell
13+
│── packages/
14+
│ └── @aetherspace-mongoose/ # ➡️ importable from '@aetherspace/mongoose'
15+
│ └── schemas/ # ➡️ Schemas + utils for turning aetherSchamas to mongoose models
16+
│ └── utils/ # ➡️ Extra utils for mongoose models created by this package
17+
│ └── package.json # ➡️ pkg name & dependencies, like 'mongoose'
18+
```
19+
20+
## Usage -- Mongoose Model from Zod Schemas with `@green-stack/icons`
21+
22+
```tsx
23+
import { z, aetherSchema } from 'aetherspace/schemas'
24+
import { aetherSchemaToMongoose } from '@aetherspace/mongoose/schemas'
25+
26+
/* --- Schemas ---- */
27+
28+
const MyCollectionSchema = aetherSchema('MyCollection', {
29+
name: z.string(),
30+
age: z.number(),
31+
})
32+
33+
/* --- Models ----- */
34+
35+
export const MyCollectionModel = aetherSchemaToMongoose(MyCollectionSchema)
36+
37+
```
38+
39+
> However, it's recommended to define your schemas and models in separate files. Otherwise, importing the schema from the same file as the model might cause front-end issues.
40+
41+
`/features/{workspace}/schemas/models.ts`
42+
```tsx
43+
import { aetherSchemaToMongoose } from '@aetherspace/mongoose/schemas'
44+
import { MyCollectionSchema } from './MyCollectionSchema.ts' // <- Much safer
45+
46+
/* --- Models ----- */
47+
48+
export const MyCollectionModel = aetherSchemaToMongoose(MyCollectionSchema)
49+
```
50+
51+
## Roadmap - More to come
52+
53+
`@aetherspace/mongoose` is an Aetherspace plugin branch that's already usable, but will be expanded on in the future. Follow the maintainer on Github, Twitter or Bluesky to stay up to date on the latest developments.

‎.storybook/disabled/@aetherspace-mongoose/README.stories.mdx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Meta } from '@storybook/addon-docs'
2+
import StorybookLinkTransformer from '../../../packages/@aetherspace/docs/helpers/StorybookLinkTransformer'
3+
import StorybookFontTransformer from '../../../packages/@aetherspace/docs/helpers/StorybookFontTransformer'
4+
import ReadMeMD from '../../../packages/@aetherspace-mongoose/README.md'
5+
6+
<StorybookLinkTransformer />
7+
<StorybookFontTransformer />
8+
9+
<Meta title="Plugins / @aetherspace-mongoose" />
10+
11+
<ReadMeMD />

‎.storybook/disabled/@green-stack-icons/README.md‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
# `@green-stack/icons` - Aetherspace Plugin
2+
3+
Prerequisites:
4+
- Fork or generate a new repository from the official or free [aetherspace/green-stack-starter](https://github.com/Aetherspace/green-stack-starter-demo#readme) github repo
5+
- Choose the "✅ Include all branches" option during the fork / generation process
6+
7+
```shell
8+
git merge with/green-stack-icons
9+
```
10+
11+
```shell
12+
│── packages/
13+
│ └── @aetherspace-mongoose/ # ➡️ importable from '@green-stack/icons'
14+
│ └── assets/ # ➡️ Input folder for .svg files
15+
│ └── icons/ # ➡️ Output folder for SVG components
16+
│ └── scripts/ # ➡️ Script to generate SVG components from .svg files at /assets/
17+
│ └── package.json # ➡️ pkg name & dependencies, like '@nandorojo/heroicons'
18+
```
19+
20+
## Usage -- SVG icon libraries with `@green-stack/icons`
21+
22+
With this package, you can use any of the following icon libraries in web or mobile, without any downsides:
23+
- `@nandorojo/iconic` ([NPM](https://github.com/nandorojo/react-native-iconic))
24+
- `@nandorojo/heroicons` ([NPM](https://github.com/nandorojo/react-native-heroicons))
25+
26+
[Solito Docs: Expo + Next.js Icon recipes](https://solito.dev/recipes/icons)
27+
28+
We'll be gathering more similar SVG icon libraries with react-native support under `/packages/@green-stack-icons`. Which functions mostly as a collection of these cross-platform enabled iconsets gathered in one place... But it also has a handy script for turning your own folder of `.svg` icons into your own custom set of React-Native SVG components:
29+
30+
## Generating your own icon set from .svg files
31+
32+
```bash
33+
yarn workspace @green-stack/icons regenerate
34+
```
35+
36+
1. Merge the `with/green-stack-icons` plugin branch, or [copy-paste](/packages/@aetherspace/core/README.md#designed-for-copy-paste) in `/packages/@green-stack-icons/`
37+
2. Drop your `.svg` files in `/packages/@green-stack-icons/assets/{your-icon-set-name}/`
38+
3. Run `yarn workspace @green-stack/icons regenerate` to create icon components from your `.svg` files
39+
4. Import your icon components from `@green-stack/icons/{your-icon-set-name}/{your-icon-name}`
40+
41+
OR, register them for use with `<AetherIcon/>`:
42+
43+
- [Managing Icons in GREEN stack Expo + Next.js monorepos](/packages/@aetherspace/components/AetherIcon/README.md)
44+
45+
## Better DX with `AetherIcon`
46+
47+
> Whichever of the 4 strategies you choose, or even when choosing multiple methods, you can improve your DX or apply the icons dynamicly using Aetherspace’s icon registry pattern and `AetherIcon` component.
48+
49+
This will enable:
50+
51+
- Type hints in your editor for the `name` prop on the AetherIcon component
52+
- Each workspace to define their own icons, optimising the feature or package for copy-paste
53+
- An importable list of all registered icons for e.g. building an IconPicker component
54+
55+
Example registration (in e.g. `feature/{workspace}/icons/registry.tsx`)
56+
57+
```tsx
58+
import { AetherImage } from 'aetherspace/primitives'
59+
import { registerIconRenderer } from 'aetherspace/utils'
60+
61+
export const iconRegistry = {
62+
// Make sure components have 'size' & 'fill' props
63+
'some-icon-key': MySvgComponent,
64+
// - OR, if you don't need to change the color through props -
65+
'some-img-icon': ({ size, ...restIconProps }) => (
66+
<AetherImage
67+
src="/img/icon.svg"
68+
width={size}
69+
height={size}
70+
{...restIconProps}
71+
/>
72+
)
73+
// - OR -
74+
...registerIconRenderer(
75+
['caret-up', 'caret-down', ...] as const,
76+
({ name, size, fill, ...restIconProps }) => (
77+
<ThirdPartyIconLib name={name} size={size} color={fill} {...restIconProps} />
78+
),
79+
),
80+
}
81+
```
82+
83+
Example codegen
84+
85+
```bash
86+
yarn ats collect-icons
87+
# or just "yarn dev" as it's part of the next.config.js automations
88+
```
89+
90+
```tsx
91+
-----------------------------------------------------------------
92+
-i- Successfully created icon registry at:
93+
-----------------------------------------------------------------
94+
✅ packages/@registries/icons.generated.ts
95+
```
96+
97+
```tsx
98+
// icons.generated.ts
99+
100+
// -i- Auto generated with 'yarn ats collect-icons' & reused in AetherIcon
101+
import { iconRegistry as someFeatureIcons } from '../../features/some-feature/icons/registry'
102+
import { iconRegistry as somePackageIcons } from '../../packages/some-package/icons/registry'
103+
104+
/* --- Exports --------------------------------------------------------------------------------- */
105+
106+
export const REGISTERED_ICONS = {
107+
...someFeatureIcons,
108+
...somePackageIcons,
109+
} as const // prettier-ignore
110+
```
111+
112+
Example usage of `AetherIcon` (which uses the generated icon registry under the hood)
113+
114+
```tsx
115+
<AetherIcon name="some-icon-key" size={24} />
116+
// ?^ 'some-icon-key' | 'some-img-icon' | 'caret-up' | 'caret-down' | ...
117+
```
118+
119+
The AetherIcon way of working is fully optional and only exists to keep your feature and packages workspaces copy-pastable between Aetherspace projects by applying some minimal codegen on top.
120+
121+
## Roadmap - More to come
122+
123+
`@green-stack/icons` is an Aetherspace plugin branch that's already usable, but will be expanded on in the future. Follow the maintainer on Github, Twitter or Bluesky to stay up to date on the latest developments.

‎.storybook/disabled/@green-stack-icons/README.stories.mdx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Meta } from '@storybook/addon-docs'
2+
import StorybookLinkTransformer from '../../../packages/@aetherspace/docs/helpers/StorybookLinkTransformer'
3+
import StorybookFontTransformer from '../../../packages/@aetherspace/docs/helpers/StorybookFontTransformer'
4+
import ReadMeMD from '../../../packages/@green-stack-icons/README.md'
5+
6+
<StorybookLinkTransformer />
7+
<StorybookFontTransformer />
8+
9+
<Meta title="Plugins / @green-stack-icons" />
10+
11+
<ReadMeMD />

‎.storybook/main.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ module.exports = {
1414
'./docs/Automation.stories.mdx',
1515
'./docs/Icons.stories.mdx',
1616
'./docs/Deployment.stories.mdx',
17+
'./plugins/README.stories.mdx',
1718
'./other/License.stories.mdx',
1819
// -- Other documentation --
1920
'../apps/**/*.stories.mdx',
@@ -22,6 +23,8 @@ module.exports = {
2223
'../features/**/*.stories.@(js|jsx|ts|tsx)',
2324
'../packages/**/*.stories.mdx',
2425
'../packages/**/*.stories.@(js|jsx|ts|tsx)',
26+
// -- Plugin docs --
27+
'./plugins/**/*.stories.mdx',
2528
],
2629
addons: [
2730
{ name: '@storybook/addon-essentials', options: { transcludeMarkdown: true } },

‎.storybook/manager.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { addons } from '@storybook/addons'
2+
import theme from './aetherTheme'
3+
4+
addons.setConfig({
5+
theme,
6+
sidebar: {
7+
showRoots: true,
8+
},
9+
})

‎.storybook/plugins/README.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Aetherspace Plugin Branches
2+
3+
While you can use any package you want in your Aetherspace monorepo, we've created a few plugin branches to make your life easier.
4+
5+
Some example use cases of merging in these plugin branches from the starter repo:
6+
- Scripts to generate code from your schemas or assets (like converting .svg `with/green-stack-icons`)
7+
- Utils to turn your schemas into models for your database (like on the `with/mongoose` branch)
8+
- Extra helpers to make your life easier
9+
10+
---
11+
> 💚 To use plugin branches, you do need [access to the official green-stack-starter](https://github.com/sponsors/codinsonn).
12+
---
13+
14+
While generating your repo from there, you can choose to "✅ include all branches".
15+
Or, if you've already generated your repo, you can merge in the branches manually.
16+
17+
Either way:
18+
19+
```shell
20+
git merge with/{plugin-name}
21+
```

‎.storybook/plugins/README.stories.mdx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Meta } from '@storybook/addon-docs'
2+
import StorybookLinkTransformer from '../../packages/@aetherspace/docs/helpers/StorybookLinkTransformer'
3+
import StorybookFontTransformer from '../../packages/@aetherspace/docs/helpers/StorybookFontTransformer'
4+
import ReadMeMD from './README.md'
5+
6+
<StorybookLinkTransformer />
7+
<StorybookFontTransformer />
8+
9+
<Meta title="Aetherspace / Plugin Branches" />
10+
11+
<ReadMeMD />
12+
13+
Check out the available plugin branches in this Storybook's <a href="/docs/plugins">Plugins Sections</a>

0 commit comments

Comments
 (0)