From 2c514e58eabd71af280b727514dccb7c8db4e6cf Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Wed, 9 Jan 2019 11:05:32 +0100 Subject: Finalize packages & replace storybook with homegrown `uidev` --- uidev/src/app.html | 18 +++++++++ uidev/src/app.tsx | 89 +++++++++++++++++++++++++++++++++++++++++ uidev/src/index.tsx | 9 +++++ uidev/src/stores/index.ts | 5 +++ uidev/src/stores/stories.ts | 43 ++++++++++++++++++++ uidev/src/stories/input.tsx | 92 +++++++++++++++++++++++++++++++++++++++++++ uidev/src/withTheme/index.tsx | 50 +++++++++++++++++++++++ uidev/tsconfig.json | 13 ++++++ uidev/tslint.json | 3 ++ uidev/webpack.config.js | 22 +++++++++++ 10 files changed, 344 insertions(+) create mode 100644 uidev/src/app.html create mode 100644 uidev/src/app.tsx create mode 100644 uidev/src/index.tsx create mode 100644 uidev/src/stores/index.ts create mode 100644 uidev/src/stores/stories.ts create mode 100644 uidev/src/stories/input.tsx create mode 100644 uidev/src/withTheme/index.tsx create mode 100644 uidev/tsconfig.json create mode 100644 uidev/tslint.json create mode 100644 uidev/webpack.config.js (limited to 'uidev') diff --git a/uidev/src/app.html b/uidev/src/app.html new file mode 100644 index 000000000..40801775e --- /dev/null +++ b/uidev/src/app.html @@ -0,0 +1,18 @@ + + + + + UIDev + + + + + +
+ + diff --git a/uidev/src/app.tsx b/uidev/src/app.tsx new file mode 100644 index 000000000..a1c9ee343 --- /dev/null +++ b/uidev/src/app.tsx @@ -0,0 +1,89 @@ +import { Classes } from 'jss'; +import React, { Component } from 'react'; +import { render } from 'react-dom'; +import injectSheet from 'react-jss'; +import './stories/input'; +import { WithTheme } from './withTheme'; + +import { store } from './stores'; + +const styles = { + container: { + display: 'flex', + width: '100%', + }, + menu: { + width: 300, + position: 'fixed' as any, + }, + stories: { + width: '100%', + marginLeft: 320, + paddingLeft: 40, + paddingRight: 40, + borderLeft: '1px solid #CFCFCF', + }, + sectionHeadline: { + fontSize: 30, + }, + storyHeadline: { + fontSize: 24, + }, + story: { + paddingBottom: 40, + marginBottom: 40, + borderBottom: '1px solid #CFCFCF', + }, +}; + +const foo = { + seas: 'bar', +}; + +export const App = injectSheet(styles)(({ classes }: { classes: Classes }) => ( +
+ +
+ {store.stories.sections.map((section, key) => ( +
+

+ {section.name} +

+ {section.stories.map((story, storyKey) => ( +
+

+ {story.name} +

+ + {story.component()} + +
+ ))} +
+ ))} +
+
+)); diff --git a/uidev/src/index.tsx b/uidev/src/index.tsx new file mode 100644 index 000000000..99658b184 --- /dev/null +++ b/uidev/src/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { render } from 'react-dom'; +import { App } from './app'; + +const app = () => ( + +); + +render(app(), document.getElementById('root')); diff --git a/uidev/src/stores/index.ts b/uidev/src/stores/index.ts new file mode 100644 index 000000000..276058ec4 --- /dev/null +++ b/uidev/src/stores/index.ts @@ -0,0 +1,5 @@ +import { storyStore } from './stories'; + +export const store = { + stories: storyStore, +}; diff --git a/uidev/src/stores/stories.ts b/uidev/src/stores/stories.ts new file mode 100644 index 000000000..064bf275f --- /dev/null +++ b/uidev/src/stores/stories.ts @@ -0,0 +1,43 @@ +import { store } from './index'; + +export type StorySectionName = string; +export type StoryName = string; +export type StoryComponent = Function; + +export interface IStories { + name: string; + component: StoryComponent; +} + +export interface ISections { + name: StorySectionName; + stories: IStories[]; +} + +export interface IStoryStore { + sections: ISections[]; +} + +export const storyStore: IStoryStore = { + sections: [], +}; + +export const storiesOf = (name: StorySectionName) => { + const length = storyStore.sections.push({ + name, + stories: [], + }); + + const actions = { + add: (name: StoryName, component: StoryComponent) => { + storyStore.sections[length - 1].stories.push({ + name, + component, + }); + + return actions; + }, + }; + + return actions; +}; diff --git a/uidev/src/stories/input.tsx b/uidev/src/stories/input.tsx new file mode 100644 index 000000000..dc8f6e997 --- /dev/null +++ b/uidev/src/stories/input.tsx @@ -0,0 +1,92 @@ +import React from 'react'; + +import { Input } from '@meetfranz/forms'; +import { storiesOf } from '../stores/stories'; + +export const stories = () => (
input stories
); + +const defaultProps = { + label: 'Label', + id: 'test1', + name: 'test1', + onChange: (e: React.ChangeEvent) => console.log('changed event', e), +}; + +const defaultPasswordProps = { + label: 'Password', + type: 'password', + id: 'test1', + name: 'test1', + onChange: (e: React.ChangeEvent) => console.log('changed event', e), +}; + +storiesOf('Input') + .add('Basic', () => ( + + )) + .add('Without Label', () => ( + + )) + .add('Disabled', () => ( + + )) + .add('With prefix', () => ( + + )) + .add('With suffix', () => ( + + )) + .add('With pre-suffix', () => ( + + )) + .add('With error', () => ( + + )); + +storiesOf('Password') + .add('Basic', () => ( + + )) + .add('Show password toggle', () => ( + + )) + .add('Score password', () => ( + + )) + .add('Score password with error', () => ( + + )); diff --git a/uidev/src/withTheme/index.tsx b/uidev/src/withTheme/index.tsx new file mode 100644 index 000000000..17a1074d3 --- /dev/null +++ b/uidev/src/withTheme/index.tsx @@ -0,0 +1,50 @@ +import { theme, Theme, ThemeType } from '@meetfranz/theme'; +import { Classes } from 'jss'; +import React from 'react'; +import injectSheet, { ThemeProvider } from 'react-jss'; + +const defaultTheme = { + name: 'Default', + variables: theme(ThemeType.default), +}; + +const darkTheme = { + name: 'Dark Mode', + variables: theme(ThemeType.dark), +}; + +const themes = [defaultTheme, darkTheme]; + +const styles = (theme: Theme) => ({ + title: { + fontSize: 14, + }, + container: { + border: theme.inputBorder, + borderRadius: theme.borderRadiusSmall, + marginBottom: 20, + padding: 20, + background: theme.colorContentBackground, + }, +}); + +const Container = injectSheet(styles)(({ name, classes, story }: { name: string, classes: Classes, story: React.ReactNode }) => ( +
+

{name}

+
+ {story} +
+
+)); + +export const WithTheme = ({ children }: {children: React.ReactChild}) => { + return ( + <> + {themes.map((theme, key) => ( + + + + ))} + + ); +}; diff --git a/uidev/tsconfig.json b/uidev/tsconfig.json new file mode 100644 index 000000000..23a59e665 --- /dev/null +++ b/uidev/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../tsconfig.settings.json", + "compilerOptions": { + "outDir": "lib", + "rootDir": "src" + }, + "references": [{ + "path": "../packages/theme" + }, + { + "path": "../packages/forms" + }] +} diff --git a/uidev/tslint.json b/uidev/tslint.json new file mode 100644 index 000000000..ec365f164 --- /dev/null +++ b/uidev/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "../tslint.json" +} diff --git a/uidev/webpack.config.js b/uidev/webpack.config.js new file mode 100644 index 000000000..8c4a4ade9 --- /dev/null +++ b/uidev/webpack.config.js @@ -0,0 +1,22 @@ +const path = require('path'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); + +module.exports = { + entry: './src/index.tsx', + module: { + rules: [{ + test: /\.tsx?$/, + use: 'ts-loader', + exclude: /node_modules/, + }], + }, + resolve: { + extensions: ['.tsx', '.ts', '.js'], + }, + mode: 'none', + plugins: [ + new HtmlWebpackPlugin({ + template: path.join('src', 'app.html'), + }), + ], +}; -- cgit v1.2.3-54-g00ecf