1
0
Fork 0
Browse Source

Initial commit.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
main
André Jaenisch 1 year ago
commit
391e16ee5e
Signed by: ryuno-ki
GPG Key ID: 5A668E771F1ED854
  1. 138
      .gitignore
  2. 39
      .storybook/main.js
  3. 4
      .storybook/preview.js
  4. 6
      filters/index.js
  5. 11
      nunjucks.config.js
  6. 13611
      package-lock.json
  7. 25
      package.json
  8. 6
      partials/adr.njk
  9. 7
      partials/card.njk
  10. 75
      stories/atoms/adr.stories.mdx
  11. 53
      stories/atoms/card.stories.mdx

138
.gitignore vendored

@ -0,0 +1,138 @@
# Created by https://www.toptal.com/developers/gitignore/api/vim,node
# Edit at https://www.toptal.com/developers/gitignore?templates=vim,node
### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
.env*.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
### Vim ###
# Swap
[._]*.s[a-v][a-z]
!*.svg # comment out if you don't need vector files
[._]*.sw[a-p]
[._]s[a-rt-v][a-z]
[._]ss[a-gi-z]
[._]sw[a-p]
# Session
Session.vim
Sessionx.vim
# Temporary
.netrwhist
*~
# Auto-generated tag files
tags
# Persistent undo
[._]*.un~
# End of https://www.toptal.com/developers/gitignore/api/vim,node
storybook-static

39
.storybook/main.js

@ -0,0 +1,39 @@
const fs = require('fs')
const path = require('path')
const templatesPath = path.resolve(__dirname, '..', 'partials')
module.exports = {
stories: [
'../stories/**/*.stories.@(mdx|js)',
],
addons: [
'@storybook/addon-a11y',
'@storybook/addon-essentials',
'@storybook/addon-links',
'storybook-addon-outline',
],
webpackFinal: async (config) => {
// See https://github.com/storybookjs/storybook/issues/4082#issuecomment-758272734
config.node = {
fs: 'empty',
}
config.module.rules.push({
test: /\.njk$/,
use: [
{
loader: 'nunjucks-loader',
query: {
config: path.resolve(path.join(__dirname, '..', 'nunjucks.config.js')),
root: templatesPath,
},
},
]
})
return config
},
}

4
.storybook/preview.js

@ -0,0 +1,4 @@
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
}

6
filters/index.js

@ -0,0 +1,6 @@
// Nunjucks filters are going to be added here
const filters = [
]
module.exports = filters

11
nunjucks.config.js

@ -0,0 +1,11 @@
const Nunjucks = require('nunjucks')
const filters = require ('./helpers/filter')
module.exports = (nunjucks) => {
filters.forEach((filter) => {
const { name, value } = filter
nunjucks.addFilter(name, value)
})
}

13611
package-lock.json generated

File diff suppressed because it is too large Load Diff

25
package.json

@ -0,0 +1,25 @@
{
"name": "jaenis.ch_design-system",
"version": "1.0.0",
"description": "The Design System for my web presence",
"main": "index.js",
"devDependencies": {
"@storybook/addon-a11y": "^6.2.9",
"@storybook/addon-essentials": "^6.2.9",
"@storybook/addon-links": "^6.2.9",
"@storybook/html": "^6.2.9",
"gray-matter": "^4.0.3",
"nunjucks": "^3.2.3",
"nunjucks-loader": "^3.0.0",
"storybook-addon-outline": "^1.3.4",
"storybook-addon-themes": "^6.1.0",
"storybook-design-token": "^1.1.0"
},
"scripts": {
"storybook": "CHOKIDAR_USEPOLLING=1 start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"keywords": [],
"author": "André Jaenisch",
"license": "ISC"
}

6
partials/adr.njk

@ -0,0 +1,6 @@
<span class="h-adr">
<span class="p-street-address">{{ location.address }}</span>
<span class="p-postal-code">{{ location.postalCode }}</span>
<span class="p-locality">{{ location.locality }}</span>
<span class="p-country-name">{{ location.country }}</span>
</span>

7
partials/card.njk

@ -0,0 +1,7 @@
<span class="h-card">
<span class="p-name">{{ location.name }}</span>
<span class="p-street-address">{{ location.address }}</span>
<span class="p-postal-code">{{ location.postalCode }}</span>
<span class="p-locality">{{ location.locality }}</span>
<span class="p-country-name">{{ location.country }}</span>
</span>

75
stories/atoms/adr.stories.mdx

@ -0,0 +1,75 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
import template from '../../partials/adr.njk';
export const Template = (args = {}) => template.render(args)
<Meta
title='Atoms/Adr'
argTypes={{
location: {
control: {
type: 'object',
},
description: 'The location to mark up.',
name: 'Location',
},
}}
/>
# Adr
This partial renders an address.
The markup supports [microformats2 `h-adr`](http://microformats.org/wiki/h-adr).
Therefore you need to pass in a location object with the mandatory information
about a place in the real world.
## TODO
Use [`<address>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address) element.
## Markup
The closing tag is mandatory.
### Flow content
This element does not accept `<article>`, `<aside>`, `<nav>` and `<section>` or
heading elements as children.
### ARIA role
None implicit, but permits all.
## Spec
* [HTML-Spec](https://html.spec.whatwg.org/multipage/sections.html#the-address-element)
<Canvas>
<Story
name='Adr'
args={{
location: {
address: 'Musterstraße 1',
postalCode: '12345',
locality: 'Musterhausen',
country: 'Musterland',
},
}}
parameters={{
controls: {
expanded: true,
hideNoControlsWarning: true,
},
docs: {
source: {
code: Template(),
},
},
}}
>
{Template.bind()}
</Story>
</Canvas>

53
stories/atoms/card.stories.mdx

@ -0,0 +1,53 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
import template from '../../partials/card.njk';
export const Template = (args = {}) => template.render(args)
<Meta
title='Atoms/Card'
argTypes={{
location: {
control: {
type: 'object',
},
description: 'A business card.',
name: 'Card',
},
}}
/>
## Card
This partial renders a card.
It implements [microformats2 `h-card`](https://indieweb.org/h-card).
<Canvas>
<Story
name='Card'
args={{
location: {
name: 'Musterling',
address: 'Musterstraße 1',
postalCode: '12345',
locality: 'Musterhausen',
country: 'Musterland',
},
}}
parameters={{
controls: {
expanded: true,
hideNoControlsWarning: true,
},
docs: {
source: {
code: Template(),
},
}
}}
>
{Template.bind()}
</Story>
</Canvas>
Loading…
Cancel
Save