-
Notifications
You must be signed in to change notification settings - Fork 427
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add beginnings of feature-flagged Preact create group page
Add the non-functional beginnings of a new, feature-flagged re-implementation of the create-group page as a Preact app.
- Loading branch information
Showing
14 changed files
with
972 additions
and
50 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,3 +1,27 @@ | ||
{ | ||
"presets": ["@babel/preset-env"] | ||
"presets": [ | ||
"@babel/preset-typescript", | ||
[ | ||
"@babel/preset-react", | ||
{ | ||
"runtime": "automatic", | ||
"importSource": "preact" | ||
} | ||
], | ||
"@babel/preset-env" | ||
], | ||
"env": { | ||
"development": { | ||
"presets": [ | ||
[ | ||
"@babel/preset-react", | ||
{ | ||
"development": true, | ||
"runtime": "automatic", | ||
"importSource": "preact" | ||
} | ||
] | ||
] | ||
} | ||
} | ||
} |
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
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 |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import { render } from 'preact'; | ||
|
||
function CreateGroupForm() { | ||
return ( | ||
<> | ||
<h1 class="form-header">Create a new private group</h1> | ||
|
||
<form class="form group-form__form"> | ||
<div class="form-input"> | ||
<label for="name" class="form-input__label group-form__name-label"> | ||
Name <span class="form-input__required">*</span> | ||
</label> | ||
<input | ||
type="text" | ||
id="name" | ||
class="form-input__input group-form__name-input has-label" | ||
autofocus="" | ||
autocomplete="off" | ||
required | ||
/> | ||
<span class="form-input__character-counter is-ready">0/25</span> | ||
</div> | ||
|
||
<div class="form-input"> | ||
<label | ||
class="form-input__label group-form__description-label" | ||
for="description" | ||
> | ||
Description | ||
</label> | ||
<textarea | ||
id="description" | ||
class="form-input__input group-form__description-input has-label" | ||
></textarea> | ||
<span class="form-input__character-counter is-ready">0/250</span> | ||
</div> | ||
|
||
<div class="form-actions"> | ||
<div class="u-stretch"></div> | ||
|
||
<div class="form-actions__buttons"> | ||
<button class="form-actions__btn btn primary-action-btn group-form__submit-btn"> | ||
Create group | ||
</button> | ||
</div> | ||
</div> | ||
</form> | ||
|
||
<footer class="form-footer"> | ||
<span class="form-footer__required"> | ||
<span class="form-footer__symbol">*</span> | ||
<span class="form-footer__text">Required</span> | ||
</span> | ||
</footer> | ||
</> | ||
); | ||
} | ||
|
||
function init() { | ||
render(<CreateGroupForm />, document.querySelector('#create-group-form')); | ||
} | ||
|
||
init(); |
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,22 @@ | ||
{ | ||
"compilerOptions": { | ||
"allowJs": true, | ||
"allowSyntheticDefaultImports": true, | ||
"checkJs": true, | ||
"lib": ["es2018", "dom"], | ||
"jsx": "react-jsx", | ||
"jsxImportSource": "preact", | ||
"module": "commonjs", | ||
"noEmit": true, | ||
"strict": true, | ||
"target": "ES2020", | ||
"useUnknownInCatchVariables": false | ||
}, | ||
"include": ["**/*.js", "**/*.ts", "**/*.tsx"], | ||
"exclude": [ | ||
// Tests and test infrastructure | ||
"**/test/*.js", | ||
"bootstrap.js", | ||
"karma.config.cjs" | ||
] | ||
} |
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,5 @@ | ||
/* CSS entry point for the 'new group' app. */ | ||
|
||
@tailwind base; | ||
@tailwind components; | ||
@tailwind utilities; |
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,23 @@ | ||
{% extends "h:templates/layouts/group.html.jinja2" %} | ||
|
||
{% set page_title = 'Create a new private group' %} | ||
|
||
{% block styles %} | ||
{{ super() }} | ||
|
||
{% for url in asset_urls('create_group_form_css') %} | ||
<link rel="stylesheet" href="{{ url }}"> | ||
{% endfor %} | ||
{% endblock %} | ||
|
||
{% block page_content %} | ||
<div id="create-group-form"></div> | ||
{% endblock %} | ||
|
||
{% block scripts %} | ||
{{ super() }} | ||
|
||
{% for url in asset_urls('create_group_form_js') %} | ||
<script type="module" src="{{ url }}"></script> | ||
{% endfor %} | ||
{% endblock %} |
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
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 |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import tailwindConfig from '@hypothesis/frontend-shared/lib/tailwind.preset.js'; | ||
|
||
export default { | ||
presets: [tailwindConfig], | ||
content: [ | ||
'./h/static/scripts/**/*.{js,ts,tsx}', | ||
'./node_modules/@hypothesis/frontend-shared/lib/**/*.js', | ||
], | ||
theme: { | ||
extend: { | ||
animation: { | ||
'fade-in': 'fade-in 0.3s forwards', | ||
'fade-out': 'fade-out 0.3s forwards', | ||
'slide-in-from-right': 'slide-in-from-right 0.3s forwards ease-in-out', | ||
}, | ||
fontFamily: { | ||
sans: [ | ||
'"Helvetica Neue"', | ||
'Helvetica', | ||
'Arial', | ||
'"Lucida Grande"', | ||
'sans-serif', | ||
], | ||
}, | ||
boxShadow: { | ||
// Similar to tailwind's default `shadow-inner` but coming from the | ||
// right edge instead of the left | ||
'r-inner': 'inset -2px 0 4px 0 rgb(0,0,0,.05)', | ||
}, | ||
keyframes: { | ||
'fade-in': { | ||
'0%': { | ||
opacity: '0', | ||
}, | ||
'100%': { | ||
opacity: '1', | ||
}, | ||
}, | ||
'fade-out': { | ||
'0%': { | ||
opacity: '1', | ||
}, | ||
'100%': { | ||
opacity: '0', | ||
}, | ||
}, | ||
'slide-in-from-right': { | ||
'0%': { | ||
opacity: '0', | ||
left: '100%', | ||
}, | ||
'80%': { | ||
left: '-10px', | ||
}, | ||
'100%': { | ||
left: '0', | ||
opacity: '1', | ||
}, | ||
}, | ||
}, | ||
}, | ||
}, | ||
}; |
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
Oops, something went wrong.