-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #17 from aimeex3/webpack
fix(build): add storybook and update build to use webpack
- Loading branch information
Showing
11 changed files
with
3,600 additions
and
404 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,13 @@ | ||
| { | ||
| "plugins": ["@babel/plugin-transform-react-jsx", "@babel/plugin-proposal-optional-chaining"], | ||
| "plugins": ["@babel/plugin-proposal-optional-chaining"], | ||
| "presets": [ | ||
| [ | ||
| "@babel/preset-env", | ||
| { | ||
| "useBuiltIns": "usage", | ||
| "corejs": 3 | ||
| } | ||
| ] | ||
| ], | ||
| "@babel/preset-react" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import { configure } from '@storybook/react'; | ||
|
|
||
| configure(require.context('../src', true, /\.stories\.js$/), module); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| const path = require('path'); | ||
|
|
||
| // Export a function. Accept the base config as the only param. | ||
| module.exports = async ({ config, mode }) => { | ||
| // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION' | ||
| // You can change the configuration based on that. | ||
| // 'PRODUCTION' is used when building the static version of storybook. | ||
|
|
||
| // Make whatever fine-grained changes you need | ||
| config.module.rules.push({ | ||
| test: /\.scss$/, | ||
| use: ['style-loader', 'css-loader', 'sass-loader'], | ||
| include: path.resolve(__dirname, '../'), | ||
| }); | ||
|
|
||
| // Return the altered config | ||
| return config; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,169 +1 @@ | ||
| import React, {useMemo, useState, useRef} from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
|
|
||
| import MessageComposer from './components/MessageComposer'; | ||
|
|
||
| import './styles.scss'; | ||
|
|
||
| let ids = 1; | ||
| const users = [{ | ||
| id: 'all', | ||
| displayName: 'All', | ||
| objectType: 'groupMention', | ||
| },{ | ||
| displayName: 'Philip Fry', | ||
| },{ | ||
| displayName: 'Turanga Leela', | ||
| },{ | ||
| displayName: 'Hubert Farnsworth', | ||
| },{ | ||
| displayName: 'Zapp Brannigan', | ||
| },{ | ||
| displayName: 'John Zoidberg', | ||
| },{ | ||
| displayName: 'Amy Wang', | ||
| },{ | ||
| displayName: 'Bender Rodriguez', | ||
| },{ | ||
| displayName: 'Hermes Conrad', | ||
| },{ | ||
| displayName: 'Kif Kroker', | ||
| },{ | ||
| displayName: 'Barbados Slim', | ||
| },{ | ||
| displayName: 'Bill McNeal', | ||
| },]; | ||
|
|
||
| for (const user of users) { | ||
| if (!user.id) { | ||
| user.id = ids++; | ||
| } | ||
| if (!user.objectType) { | ||
| user.objectType = 'person'; | ||
| } | ||
| } | ||
|
|
||
| const mentions = { | ||
| filter: (query) => | ||
| Promise.resolve( | ||
| (query === '') ? users : users.filter((user) => user.displayName.toLowerCase().startsWith(query.toLowerCase())) | ||
| ), | ||
| renderSuggestion: (user, {active}) => { | ||
| const activeStyle = active ? {backgroundColor: 'lightblue'} : null; | ||
| const style = { | ||
| ...activeStyle, | ||
| height: '30px', | ||
| width: '200px', | ||
| }; | ||
| return { | ||
| key: user.id, | ||
| render: (<div style={style}>{user.displayName}</div>), | ||
| }; | ||
| }, | ||
| renderInsert: (user) => { | ||
| const style = {background: 'lightblue'}; | ||
| const text = (user.objectType === 'person') ? user.displayName.split(' ')[0] : user.displayName; | ||
| return <b style={style}>{text}</b>; | ||
| }, | ||
| getDisplay: (user) => { | ||
| return (user.objectType === 'person') ? user.displayName.split(' ')[0] : user.displayName; | ||
| }, | ||
| } | ||
|
|
||
| const spaces = []; | ||
| const setValue = (v, num) => { | ||
| spaces[num] = v; | ||
| }; | ||
|
|
||
|
|
||
| const Example = (props) => { | ||
| const [message, setMessage] = useState(''); | ||
| const [number, setNumber] = useState(1); | ||
|
|
||
| const show = (num) => { | ||
| setMessage(''); | ||
| setNumber(num); | ||
| }; | ||
|
|
||
| const other = (number === 1) ? 2 : 1; | ||
|
|
||
| const draft = { | ||
| id: number, | ||
| value: spaces[number], | ||
| save: setValue, | ||
| }; | ||
|
|
||
| const emitter = useRef(); | ||
| const setEmitter = (e) => { | ||
| emitter.current = e; | ||
| }; | ||
|
|
||
| const focus = (e) => { | ||
| e.preventDefault(); | ||
| emitter.current.emit('FOCUS'); | ||
| }; | ||
|
|
||
| const insertText = (t) => (e) => { | ||
| e.preventDefault(); | ||
| emitter.current.emit('INSERT_TEXT', t); | ||
| } | ||
|
|
||
| const send = (e) => { | ||
| e.preventDefault(); | ||
| emitter.current.emit('SEND'); | ||
| } | ||
|
|
||
| const notifyKeyDown = (event) => { | ||
| console.log('Key pressed', event); | ||
| } | ||
|
|
||
| const [disabled, setDisabled] = useState(false); | ||
| const toggleDisabled = () => { | ||
| setDisabled(!disabled); | ||
| } | ||
|
|
||
| const [isMarkdownDisabled, setMarkdownDisabled] = useState(false); | ||
| const toggleMarkdownDisabled = () => { | ||
| setMarkdownDisabled(!isMarkdownDisabled); | ||
| }; | ||
|
|
||
| const [placeholder, setPlaceholder] = useState('Write your message in this space.'); | ||
| const changePlaceholder = () => { | ||
| setPlaceholder('This is a new placeholder'); | ||
| }; | ||
|
|
||
| const markdown = useMemo(() => ({ | ||
| disabled: isMarkdownDisabled, | ||
| }), [isMarkdownDisabled]); | ||
|
|
||
| return ( | ||
| <div className='container'> | ||
| <div className='content' onClick={focus} /> | ||
| <div className='mc'> | ||
| <MessageComposer | ||
| disabled={disabled} | ||
| draft={draft} | ||
| markdown={markdown} | ||
| mentions={mentions} | ||
| send={(message) => setMessage(message)} | ||
| notifyKeyDown={notifyKeyDown} | ||
| placeholder={placeholder} | ||
| setEmitter={setEmitter} /> | ||
| <br/> | ||
| <div>Sending: {JSON.stringify(message)}</div> | ||
| <button onClick={() => show(other)}>Show Space {other}</button> | ||
| <button onClick={insertText('🎉')}>Insert Emoji</button> | ||
| <button onClick={insertText('@')}>@Mention</button> | ||
| <button onClick={toggleDisabled}>{(disabled) ? 'enable' : 'disable'}</button> | ||
| <button onClick={toggleMarkdownDisabled}>{(isMarkdownDisabled) ? 'enable markdown' : 'disable markdown'}</button> | ||
| <button onClick={send}>SEND</button> | ||
| <button onClick={changePlaceholder}>Change placeholder</button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| ReactDOM.render( | ||
| <Example />, | ||
| document.getElementById("root") | ||
| ); | ||
| export {default} from './components/MessageComposer/index.js'; |
Oops, something went wrong.