Skip to content

Commit 7f8fa04

Browse files
Jojoliu66Jojoliu66
committed
Merge remote-tracking branch 'origin/master' into button-components-#43 
2 parents 2ca427e + c1ae6b7 commit 7f8fa04

16 files changed

+5214
-9377
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,5 @@
2525
*.map
2626
.zshrc
2727
.idea/*
28+
# this is auto generated by svgr
29+
/app/svgr/*

‎.storybook/preview.js

+17-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
import "../assets/css/index.css";
2-
import "../assets/css/normalize.css";
1+
import { ThemeProvider } from 'react-jss'
2+
import '../assets/css/index.css'
3+
import '../assets/css/normalize.css'
4+
import React from 'react'
5+
import Theme from '../app/components/theme'
6+
7+
const theme = Theme
38

49
/** @type { import('@storybook/react').Preview } */
510
const preview = {
@@ -12,6 +17,16 @@ const preview = {
1217
},
1318
},
1419
},
20+
decorators: [
21+
Story => (
22+
<ThemeProvider theme={theme}>
23+
<div>
24+
<link href="https://fonts.googleapis.com/css?family=Inter" rel="stylesheet" />
25+
<Story />
26+
</div>
27+
</ThemeProvider>
28+
),
29+
],
1530
}
1631

1732
export default preview

‎README.md

+46-1
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,13 @@ cd civil-pursuit
3131
npm install
3232

3333
```
34+
3435
For the first stages of this project, we will be focusing on storybook
36+
3537
```
3638
npm run storybook
3739
```
40+
3841
### MongoDB
3942

4043
This app uses MONGODB and you will need a mongodb uri to get started. Cloud.mongodb.com has free accounts, you can go there and follow these [instructions](https://docs.google.com/presentation/d/10fEk_OdfN-dYh9PlqG6nTFlu4ENvis_owdHbqWYDpBI/present?slide=id.gb4a0dbf10b_0_93)
@@ -48,35 +51,77 @@ export MONGODB_URI="mongodb+srv://user-name:secret-password@cluster0.vwxyz.mongo
4851
Note that it's confusing but user-name and db-name can be anything. You pick them when you create the database, and you use them in this URI string. That's all.
4952

5053
After you get Mongo setup, you also need these ENV variable in your .bashrc file
54+
5155
```
5256
export NODE_ENV="development"
5357
export SYNAPP_ENV="alpha"
5458
export MONGODB_URI=$MONGODB_URI
5559
```
60+
5661
Then you should be able to run the development server. You may also need to `source .bashrc` first.
62+
5763
```
5864
npm run dev
5965
```
66+
6067
It should startup. You will be able to browse to [localhost:3011/](localhost:3011/) but there won't be anything useful in the database.
6168
So after you get this far, request a link to the "civil-pursuit-template" google drive directory where there is a bunch of db records and a README file that explains how to put it into the database.
6269

6370
Then you can browse to [localhost:3011/item/pvote](localhost:3011/item/pvote) and see the discussion.
6471

6572
### Dev Environment for Easy Project Switching
73+
6674
This project uses bash. This models the cloud environment. The .bashrc file in the each project's directory can contain custom environment variables and aliases and such for the project. This is where we put secrets becasue the .bashrc file is ignored by .gitignore and won't be put in the repo.
6775

6876
These steps will make it easy to switch between multiple projects and repos, but automatically running the .bashrc file in a project when you start bash in that directory.
6977

70-
In your home (cd ~) directory find or create a **.bash_profile** on PC or a **.profile** on mac and add this to it. If neither exist, create both just to be sure.
78+
In your home (cd ~) directory find or create a **.bash_profile** on PC or a **.profile** on mac and add this to it. If neither exist, create both just to be sure.
7179

7280
```
7381
if [`pwd` != $HOME ] && [[ -f "./.bashrc" ]]; then
7482
echo running `pwd`/.bashrc
7583
source ./.bashrc
7684
fi
7785
```
86+
7887
This works great when you open a terminal in a project directory, for example when you are using visual studio code.
7988

89+
# Icons, Figma and SVG
90+
91+
<details>
92+
<summary>You can export svg from figma and paste it into a .svg file in assets/svg to create icons.</summary>
93+
94+
For example assets/svg/trash-can.svg
95+
96+
```
97+
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
98+
<path d="M3 6.58661H5H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
99+
<path d="M8 6.58661V4.58661C8 4.05618 8.21071 3.54747 8.58579 3.1724C8.96086 2.79732 9.46957 2.58661 10 2.58661H14C14.5304 2.58661 15.0391 2.79732 15.4142 3.1724C15.7893 3.54747 16 4.05618 16 4.58661V6.58661M19 6.58661V20.5866C19 21.117 18.7893 21.6257 18.4142 22.0008C18.0391 22.3759 17.5304 22.5866 17 22.5866H7C6.46957 22.5866 5.96086 22.3759 5.58579 22.0008C5.21071 21.6257 5 21.117 5 20.5866V6.58661H19Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
100+
<path d="M10 11.5866V17.5866" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
101+
<path d="M14 11.5866V17.5866" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
102+
</svg>
103+
```
104+
105+
This project will automatically convert the files in assets/svg into react.js files in app/svgr on install. After you add a new file you can manually trigger the conversion with:
106+
107+
```
108+
npm run svgr
109+
```
110+
111+
Then you can use these svg files as React components in your code like this:
112+
113+
```
114+
import TrashCan from '../svgr'
115+
116+
function renderSomething(){
117+
return <SvgTrashCan />
118+
}
119+
```
120+
121+
</details>
122+
123+
#
124+
80125
# The rest of this is from the old README file and may be dated
81126

82127
## Environment

‎app/components/dem-info.jsx

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
'use strict'
2+
import React from 'react';
3+
import cx from 'classnames';
4+
import insertSheet from 'react-jss';
5+
6+
7+
function DemInfo(props) {
8+
const { user, classes, className, ...otherProps } = props;
9+
10+
const userState = user?.state || '';
11+
const userAge = user?.dob ? calculateAge(user.dob) : '';
12+
const userPoliticalParty = user?.party || '';
13+
14+
15+
let contentText = '';
16+
if (userPoliticalParty && (userAge || userState)) {
17+
contentText += `${userPoliticalParty} | `;
18+
} else if (userPoliticalParty) {
19+
contentText += `${userPoliticalParty}`;
20+
}
21+
22+
if (userAge && userState) {
23+
contentText += `${userAge}, ${userState}`;
24+
} else if (userAge || userState) {
25+
contentText += userAge || userState;
26+
}
27+
28+
29+
return (
30+
<span className={cx(classes.infoText, className)} {...otherProps}>
31+
{contentText}
32+
</span>
33+
)
34+
}
35+
36+
/**
37+
* Calculate user age based on birthdate from User Schema
38+
* @param {String} birthdayStr
39+
* @return {Number} age (in years)
40+
*/
41+
function calculateAge(birthdayStr) {
42+
const birthday = new Date(birthdayStr)
43+
const today = new Date()
44+
const age = today.getFullYear() - birthday.getFullYear();
45+
const month = today.getMonth() - birthday.getMonth();
46+
47+
if (month < 0 || (month === 0 && today.getDate() < birthday.getDate())) {
48+
age--;
49+
}
50+
51+
return age
52+
53+
}
54+
55+
const demInfoStyles = {
56+
infoText: {
57+
fontFamily: 'Inter',
58+
fontSize: '1rem',
59+
fontWeight: '400',
60+
lineHeight: '1.5rem',
61+
letterSpacing: '0rem',
62+
textAlign: 'left',
63+
color: '#5D5D5C'
64+
}
65+
}
66+
67+
68+
export default insertSheet(demInfoStyles)(DemInfo)

‎app/components/point-lead-button.jsx

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
'use strict'
2+
import React from 'react'
3+
import { createUseStyles } from 'react-jss'
4+
import cx from 'classnames'
5+
6+
function PointLeadButton(props) {
7+
const { vState, className } = props
8+
const classes = useStylesFromThemeFunction()
9+
10+
const containerClass = cx(classes.buttonDiv, className)
11+
const buttonClass = cx(classes.sharedButtonStyle, classes[vState + 'Button'])
12+
13+
return (
14+
<div className={containerClass}>
15+
<button className={buttonClass}>Select as Lead</button>
16+
</div>
17+
)
18+
}
19+
20+
const useStylesFromThemeFunction = createUseStyles(theme => ({
21+
defaultButton: {
22+
backgroundColor: theme.colors.white,
23+
color: theme.colors.textBrown,
24+
'&:hover': {
25+
backgroundColor: theme.colors.white,
26+
color: theme.colors.textBrown,
27+
borderColor: theme.colors.encivYellow,
28+
},
29+
},
30+
31+
selectedButton: {
32+
backgroundColor: theme.colors.encivYellow,
33+
color: theme.colors.title,
34+
'&:hover': {
35+
backgroundColor: theme.colors.encivYellow,
36+
color: theme.colors.title,
37+
borderColor: theme.colors.encivYellow,
38+
},
39+
},
40+
41+
buttonDiv: {
42+
paddingTop: '0.5rem',
43+
width: '100%',
44+
'&.isHovered $defaultButton': {
45+
backgroundColor: theme.colors.white,
46+
color: theme.colors.textBrown,
47+
borderColor: theme.colors.encivYellow,
48+
textDecorationLine: 'underline',
49+
textUnderlineOffset: '0.25rem',
50+
},
51+
},
52+
53+
sharedButtonStyle: {
54+
display: 'flex',
55+
width: '100%',
56+
height: 'auto',
57+
minHeight: '3.125rem',
58+
padding: '0.5rem 1.25rem',
59+
justifyContent: 'center',
60+
alignItems: 'center',
61+
gap: '0.5rem',
62+
borderRadius: '0.5rem',
63+
border: `0.125rem solid #FFC315`,
64+
65+
...theme.font,
66+
fontSize: '1rem',
67+
fontWeight: '600',
68+
lineHeight: '1.5rem',
69+
textAlign: 'center',
70+
},
71+
}))
72+
73+
export default PointLeadButton

0 commit comments

Comments
 (0)