@campxdev/shared 0.1.0

package/src/pages/LoginPage/styles.tsx

@@ -0,0 +1,121 @@
+import FormTextField from '../../components/HookForm/TextField'
+import { Box, Button, Link, styled } from '@mui/material'
+
+export const StyledMain = styled(Box)(({ theme }) => ({
+  minHeight: '100vh',
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr',
+  '@media(max-width: 1024px)': {
+    display: 'flex',
+    width: '100%',
+  },
+}))
+
+export const StyledBanner = styled(Box)(({ theme }) => ({
+  position: 'relative',
+  backgroundColor: '#eef8fe',
+  '@media(max-width: 1024px)': {
+    display: 'none',
+  },
+}))
+export const StyledFormSection = styled(Box)(({ theme }) => ({
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+}))
+
+export const StyledBannerImage = styled(Box)(() => ({
+  height: 'calc(100vh - 90px - 56px)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '& img': {
+    width: '100%',
+    height: 'auto',
+    objectfit: 'contain',
+  },
+}))
+export const StyledBannerFooter = styled(Box)(() => ({
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  width: '100%',
+  '& .logo': {
+    backgroundColor: '#e5f4fd',
+    height: '90px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column',
+    gap: '6px',
+    '& img': {
+      display: 'block',
+      width: '100px',
+      height: 'auto',
+    },
+  },
+  '& .copyright': {
+    height: '56px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+}))
+
+export const StyledLink = styled(Link)(({ theme }) => ({
+  display: 'inline',
+  textDecoration: 'none',
+  fontWeight: 600,
+  color: theme.palette.text.primary,
+  '&:hover': {
+    textDecoration: 'underline',
+    color: theme.palette.text.primary,
+  },
+}))
+
+export const StyledButton = styled(Button)(({ theme }) => ({
+  borderRadius: '10px',
+  height: '60px',
+  fontSize: '18px',
+}))
+
+export const StyledTextField = styled(FormTextField)(({ theme }) => ({
+  '& .MuiInputBase-root': {
+    minHeight: '60px',
+  },
+  '& .MuiOutlinedInput-input': {
+    padding: '18.5px 14px',
+  },
+}))
+
+// export const StyledBannerFooter = styled.div`
+// 	position: absolute;
+// 	bottom: 0;
+// 	left: 0;
+// 	width: 100%;
+// 	& .logo {
+// 		height: 90px;
+// 		background-color: #e5f4fd;
+// 		display: flex;
+// 		justify-content: center;
+// 		align-items: center;
+// 		flex-direction: column;
+// 		gap: 10px;
+// 		& img {
+// 			display: block;
+// 			width: 100px;
+// 			height: auto;
+// 		}
+// 	}
+// 	& .copyright {
+// 		height: 56px;
+// 		display: flex;
+// 		justify-content: center;
+// 		align-items: center;
+// 		& .ant-typography {
+// 			font-size: 12px;
+// 		}
+// 	}
+// `

package/src/pages/index.ts

@@ -0,0 +1,4 @@
+import { lazy } from 'react'
+import { LoginForm } from './LoginPage/LoginPage'
+
+export { LoginForm }

package/src/permissions/PageWithPermission.tsx

@@ -0,0 +1,58 @@
+import PermissionDeniedPage from './PermissionDeniedPage'
+import { PermissionsStore } from './PermissionsStore'
+import React, { ReactNode, useEffect } from 'react'
+import { globalStore } from '../App'
+import { Box, Typography } from '@mui/material'
+import { useHistory } from '../hooks/useRouter'
+
+const accessIfNoKey = process.env.NODE_ENV === 'development' ? true : false
+
+export default function PageWithPermission({
+  permissionKey,
+  component: Component,
+  children,
+  ...props
+}: {
+  permissionKey: string
+  component?: any
+  children?: any
+}) {
+  const history = useHistory()
+  const errorState = globalStore.useState((s) => s.error)
+
+  const permissions = PermissionsStore.useState((s) => s).permissions
+  const hasAccess = permissionKey ? permissions[permissionKey] : accessIfNoKey
+
+  useEffect(() => {
+    globalStore.update((s) => {
+      s.error = {
+        message: '',
+        statusCode: null,
+        description: '',
+      }
+    })
+  }, [history])
+
+  if (errorState.statusCode) return <ErrorPage />
+
+  // if (hasAccess) return Component
+  if (hasAccess) return children
+  return <PermissionDeniedPage />
+}
+
+const ErrorPage = () => {
+  const globalState = globalStore.useState((s) => s).error
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Typography variant="h1" marginTop={'100px'}>
+        {globalState.description}
+      </Typography>
+    </Box>
+  )
+}

package/src/permissions/PermissionDeniedPage.tsx

@@ -0,0 +1,23 @@
+import { Typography } from '@mui/material'
+import React from 'react'
+import { Link } from 'react-router-dom'
+import styled from 'styled-components'
+export default function PermissionDeniedPage() {
+  return (
+    <StyledPageContainer>
+      <div>
+        <Typography>Permission Denied</Typography>
+        {/* <Link to={'/'}>Go Back</Link> */}
+      </div>
+    </StyledPageContainer>
+  )
+}
+
+const StyledPageContainer = styled.div`
+  height: 100vh;
+  width: 100%;
+  center: #233659;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`

package/src/permissions/PermissionsStore.ts

@@ -0,0 +1,289 @@
+import { Store } from 'pullstate'
+
+export enum Permission {
+  VIEW_AUDIT_LOGS = 'can_view_audit_logs',
+  STUDENTS_VIEW = 'can_students_view',
+  ADMISSIONS_VIEW = 'can_admissions_view',
+  USERS_VIEW = 'can_users_view',
+  SUBJECTS_VIEW = 'can_subjects_view',
+  COURSE_REGISTRATION_VIEW = 'can_course_registration_view',
+  END_SEMESTER_EXAMINATIONS_VIEW = 'can_end_semester_examinations_view',
+  INTERNAL_EXAMINATIONS_VIEW = 'can_internal_examinations_view',
+  VIEW_ANSWER_SHEET_REPORT = 'can_view_answer_sheet_report',
+  SEATING_PLAN = 'can_examinations_seating_plan',
+  VIEW_REPORTS = 'can_results_processing_view_reports',
+  CAN_ADD_FEED = 'can_feed_add',
+  MARKS_DIVISION = 'can_examinations_manage_marks_division',
+
+  //classroom
+
+  CLASSROOM_VIEW = 'can_classroom_view',
+  CLASSROOM_EDIT = 'can_classroom_edit',
+  CLASSROOM_DELETE = 'can_classroom_delete',
+  CLASSROOM_ADD = 'can_classroom_add',
+
+  // Tasks
+
+  CAN_TASKS_ADD = 'can_tasks_add',
+  CAN_TASKS_DELETE = 'can_tasks_delete',
+  CAN_TASKS_EDIT = 'can_tasks_edit',
+  CAN_TASKS_VIEW = 'can_tasks_view',
+  CAN_TASKS_CHANGE_STATUS = 'can_tasks_change_status',
+
+  // Academic Calendar
+
+  ACADEMIC_CALENDAR_VIEW = 'can_academic_calendar_view',
+  ACADEMIC_CALENDAR_EVENT_ADD = 'can_academic_calendar_event_add',
+  ACADEMIC_CALENDAR_EVENT_EDIT = 'can_academic_calendar_event_edit',
+  ACADEMIC_CALENDAR_EVENT_DELETE = 'can_academic_calendar_event_delete',
+
+  //Designations
+  DESIGNATIONS_ADD = 'can_designations_add',
+  DESIGNATIONS_DELETE = 'can_designations_delete',
+  DESIGNATIONS_EDIT = 'can_designations_edit',
+  DESIGNATIONS_VIEW = 'can_designations_view',
+
+  //bundling
+
+  BUNDLING_VIEW = 'can_bundling_view',
+  BUNDLING_ADD = 'can_bundling_add',
+  BUNDLING_EDIT = 'can_bundling_edit',
+  BUNDLING_DELETE = 'can_bundling_delete',
+
+  // manage
+  MANAGE_ROLES_AND_PROFILES = 'can_manage_roles_and_profiles',
+
+  MANAGE_USER_GROUPS = 'can_manage_user_groups',
+  MANAGE_ASSESSMENTS = 'can_manage_assessments',
+  USERS_ADD = 'can_users_add',
+  USERS_EDIT = 'can_users_edit',
+  USERS_DELETE = 'can_users_delete',
+  USERS_REORDER = 'can_users_reorder',
+  USERS_UPLOAD_PHOTOS = 'can_user_upload_photos',
+  USERS_EXPORT = 'can_users_export',
+  ADMISSIONS_ADD = 'can_admissions_add',
+  ADMISSIONS_EDIT = 'can_admissions_edit',
+  ADMISSIONS_DELETE = 'can_admissions_delete',
+  ADMISSIONS_CHANGE_STATUS = 'can_admissions_change_status',
+  ADMISSIONS_IMPORT = 'can_admissions_import',
+  ADMISSIONS_EXPORT = 'can_admissions_export',
+  ADMISSIONS_CONFIRM = 'can_admissions_confirm',
+  STUDENTS_ADD = 'can_students_add',
+  STUDENTS_EDIT = 'can_students_edit',
+  STUDENTS_DELETE = 'can_students_delete',
+  STUDENTS_DETAIN = 'can_students_detain',
+  STUDENTS_IMPORT = 'can_students_import',
+  STUDENTS_EXPORT = 'can_students_export',
+  STUDENTS_RESULTS = 'can_students_results',
+  STUDENTS_UPLOAD_PHOTOS = 'can_students_upload_photos',
+  STUDENTS_TRANSFER = 'can_students_transfer',
+  STUDENTS_ALLOTMENT = 'can_students_allotment',
+  SUBJECTS_ADD = 'can_subjects_add',
+  SUBJECTS_EDIT = 'can_subjects_edit',
+  SUBJECTS_DELETE = 'can_subjects_delete',
+  SUBJECTS_EDIT_SUBJECT_INFO = 'can_subjects_edit_subject_info',
+  COURSE_REGISTRATION_ADD = 'can_course_registration_add',
+  COURSE_REGISTRATION_EDIT = 'can_course_registration_edit',
+  COURSE_REGISTRATION_DELETE = 'can_course_registration_delete',
+  END_SEMESTER_EXAMINATIONS_ADD = 'can_end_semester_examinations_add',
+  END_SEMESTER_EXAMINATIONS_EDIT = 'can_end_semester_examinations_edit',
+  END_SEMESTER_EXAMINATIONS_DELETE = 'can_end_semester_examinations_delete',
+  END_SEMESTER_EXAMINATIONS_SEATING_PLAN = 'can_end_semester_examinations_seating_plan',
+  END_SEMESTER_EXAMINATIONS_MANAGE_EXAM_FEE = 'can_end_semester_examinations_manage_exam_fee',
+  END_SEMESTER_EXAMINATIONS_D_FORMS = 'can_end_semester_examinations_d_forms',
+  END_SEMESTER_EXAMINATIONS_BUNDLING = 'can_end_semester_examinations_bundling',
+  END_SEMESTER_EXAMINATIONS_MARKS_ENTRY = 'can_end_semester_examinations_marks_entry',
+  END_SEMESTER_EXAMINATIONS_INVIGILATIONS = 'can_end_semester_examinations_invigilations',
+  INTERNAL_EXAMINATIONS_ADD = 'can_internal_examinations_add',
+  INTERNAL_EXAMINATIONS_EDIT = 'can_internal_examinations_edit',
+  INTERNAL_EXAMINATIONS_DELETE = 'can_internal_examinations_delete',
+  INTERNAL_EXAMINATIONS_MANAGE_EXAM_FEE = 'can_internal_examinations_manage_exam_fee',
+  INTERNAL_EXAMINATIONS_MANAGE_HALLTICKETS = 'can_internal_examinations_manage_halltickets',
+  INTERNAL_EXAMINATIONS_SEATING_PLAN = 'can_internal_examinations_seating_plan',
+  INTERNAL_EXAMINATIONS_INVIGILATIONS = 'can_internal_examinations_invigilations',
+  EXTRA_CURRICULAR_ACTIVITIES_NEWS_FEED = 'can_extra_curricular_activities_news_feed',
+  EXTRA_CURRICULAR_ACTIVITIES_CLUBS = 'can_extra_curricular_activities_clubs',
+  EXTRA_CURRICULAR_ACTIVITIES_EVENTS = 'can_extra_curricular_activities_events',
+  EDIT_ANSWER_SHEET_MARKS = 'can_edit_answer_sheet_marks',
+  EDIT_EXTERNAL_MARKS = 'can_edit_external_marks',
+  EXAM_COLLATERALS = 'can_exam_collaterals',
+  REVALUTION = 'can_revaluation',
+  EDIT_INTERNAL_MARKS = 'can_edit_internal_marks',
+  PROCESS_RESULTS = 'can_process_results',
+  CAN_PROGRAMS_ADD = 'can_programs_add',
+  CAN_PROGRAMS_DELETE = 'can_programs_delete',
+  CAN_PROGRAMS_EDIT = 'can_programs_edit',
+  CAN_PROGRAMS_VIEW = 'can_programs_view',
+  CAN_DEGRESS_ADD = 'can_degrees_add',
+  CAN_DEGRESS_DELETE = 'can_degrees_delete',
+  CAN_DEGRESS_EDIT = 'can_degrees_edit',
+  CAN_SETTINGS_VIEW = 'can_settings_view',
+  CAN_DASHBOARD_VIEW = 'can_dashboard_view',
+  CAN_DEGRESS_VIEW = 'can_degrees_view',
+  CAN_SEMESTERS_ADD = 'can_semesters_add',
+  CAN_SEMESTERS_DELETE = 'can_semesters_delete',
+  CAN_SEMESTERS_EDIT = 'can_semesters_edit',
+  CAN_SEMESTERS_VIEW = 'can_semesters_view',
+  CAN_CURRICULUMS_ADD = 'can_curriculums_add',
+  CAN_CURRICULUMS_DELETE = 'can_curriculums_delete',
+  CAN_CURRICULUMS_EDIT = 'can_curriculums_edit',
+  CAN_CURRICULUMS_VIEW = 'can_curriculums_view',
+  CAN_ASSESSMENT_RULES_ADD = 'can_assessment_rules_add',
+  CAN_ASSESSMENT_RULES_DELETE = 'can_assessment_rules_delete',
+  CAN_ASSESSMENT_RULES_EDIT = 'can_assessment_rules_edit',
+  CAN_ASSESSMENT_RULES_VIEW = 'can_assessment_rules_view',
+  CAN_RESULTS_PROCESSING_GENERATE_MEMOS = 'can_results_processing_generate_memos',
+  CAN_RESULTS_PROCESSING_MODERATION_AND_GRAFTING = 'can_results_processing_moderation_and_grafting',
+  CAN_RESULTS_PROCESSING_PUBLISH_RESULTS = 'can_results_processing_publish_results',
+  CAN_RESULTS_PROCESSING_UPDATE_INTERNAL_MARKS = 'can_results_processing_update_internal_marks',
+  CAN_RESULTS_PROCESSING_VIEW = 'can_results_processing_view',
+
+  //newly added permissions
+
+  CAN_PHD_FORM_VIEW = 'can_admissions_view_phd_applications',
+  CAN_PHD_FORM_DOWNLOAD = 'can_admissions_download_phd_applications',
+  CAN_CET_VIEW = 'can_admissions_view_cet',
+  CAN_CET_DOWNLOAD = 'can_admissions_download_cet',
+  CAN_HOSTELER_DASHBOARD_VIEW = 'can_hosteler_dashboard_view',
+  CAN_HOSTELER_VIEW = 'can_hosteler_view',
+  CAN_HOSTELER_ADD = 'can_hosteler_add',
+  CAN_HOSTELER_EDIT = 'can_hosteler_edit',
+  CAN_HOSTELER_CHANGE_STATUS = 'can_hosteler_change_status',
+  CAN_HOSTELER_FACE_DATA_RESET = 'can_hosteler_face_data_reset',
+  CAN_HOSTELER_FEE_PAYMENT_VIEW = 'can_hosteler_fee_payments_view',
+  CAN_HOSTELER_REPORTS_VIEW = 'can_hosteler_reports_view',
+  CAN_HOSTELER_SETTINGS_VIEW_CONFIGURATION = 'can_hosteler_settings_view_configuration',
+  CAN_HOSTELER_SETTINGS_EDIT_CONFIGURATION = 'can_hosteler_settings_edit_configuration',
+  CAN_HOSTELER_SETTINGS_ADD_FEE_TYPES = 'can_hosteler_settings_add_fee_types',
+  CAN_HOSTELER_SETTINGS_VIEW_FEE_TYPES = 'can_hosteler_settings_view_fee_types',
+  CAN_HOSTELER_SETTINGS_EDIT_FEE_TYPES = 'can_hosteler_settings_edit_fee_types',
+  CAN_HOSTELER_SETTINGS_DELETE_FEE_TYPES = 'can_hosteler_settings_delete_fee_types',
+  CAN_HOSTELERS_SETTINGS_BLOCK_VIEW = 'can_hosteler_settings_blocks_view',
+  CAN_HOSTELERS_SETTINGS_BLOCK_ADD = 'can_hosteler_settings_blocks_add',
+  CAN_HOSTELERS_SETTINGS_BLOCK_EDIT = 'can_hosteler_settings_blocks_edit',
+  CAN_HOSTELERS_SETTINGS_BLOCK_DELETE = 'can_hosteler_settings_blocks_delete',
+  CAN_HOSTELERS_SETTINGS_ROOMS_VIEW = 'can_hosteler_settings_rooms_view',
+  CAN_HOSTELERS_SETTINGS_ROOMS_ADD = 'can_hosteler_settings_rooms_add',
+  CAN_HOSTELERS_SETTINGS_ROOMS_EDIT = 'can_hosteler_settings_rooms_edit',
+  CAN_HOSTELERS_SETTINGS_ROOMS_DELETE = 'can_hosteler_settings_rooms_delete',
+  CAN_HOSTELERS_SETTINGS_ROOMS_IMPORT = 'can_hosteler_settings_import_hostel_rooms',
+  CAN_HOSTELERS_SETTINGS_AMENITIES_VIEW = 'can_hosteler_settings_amenities_view',
+  CAN_HOSTELERS_SETTINGS_AMENITIES_ADD = 'can_hosteler_settings_amenities_add',
+  CAN_HOSTELERS_SETTINGS_AMENITIES_EDIT = 'can_hosteler_settings_amenities_edit',
+  CAN_HOSTELERS_SETTINGS_AMENITIES_DELETE = 'can_hosteler_settings_amenities_delete',
+  CAN_ADMISSIONS_DASHBOARD_VIEW = 'can_admission_dashboard_view',
+  CAN_LEAD_STATUS_VIEW = 'can_lead_status_view',
+  CAN_LEAD_STATUS_EDIT = 'can_lead_status_edit',
+  CAN_LEAD_STATUS_ADD = 'can_lead_status_add',
+  CAN_LEAD_STATUS_DELETE = 'can_lead_status_delete',
+  SCHOOLS_VIEW = 'can_schools_view',
+  SCHOOLS_ADD = 'can_schools_add',
+  SCHOOLS_EDIT = 'can_schools_edit',
+  SCHOOLS_DELETE = 'can_schools_delete',
+  SUBJECT_TYPE_VIEW = 'can_subject_types_view',
+  SUBJECT_TYPE_ADD = 'can_subject_types_add',
+  SUBJECT_TYPE_EDIT = 'can_subject_types_edit',
+  SUBJECT_TYPE_DELETE = 'can_subject_types_delete',
+  ASSESSMENT_TYPE_VIEW = 'can_assessment_types_view',
+  ASSESSMENT_TYPE_ADD = 'can_assessment_types_add',
+  ASSESSMENT_TYPE_EDIT = 'can_assessment_types_edit',
+  ASSESSMENT_TYPE_DELETE = 'can_assessment_types_delete',
+  CLASSROOM_REPORTS = 'can_classroom_reports',
+  CLASSROOM_REASSIGN_FACULTY = 'can_classroom_re_assign_faculty',
+  CAN_INDIVIDUAL_PAGES_VIEW = 'can_individual_pages_view',
+}
+
+export interface IPermissions {
+  // view
+  can_view_audit_logs: boolean
+  can_students_view: boolean
+  can_admissions_view: boolean
+  can_users_view: boolean
+  can_subjects_view: boolean
+  can_course_registration_view: boolean
+  can_end_semester_examinations_view: boolean
+  can_internal_examinations_view: boolean
+  can_view_answer_sheet_report: boolean
+  can_feed_add: boolean
+  can_classroom_view: boolean
+  can_classroom_edit: boolean
+  can_classroom_delete: boolean
+  can_classroom_add: boolean
+  can_tasks_view: boolean
+  // manage
+  can_manage_roles_and_profiles: boolean
+  can_manage_user_groups: boolean
+  can_manage_programs: boolean
+  can_manage_courses: boolean
+  can_manage_semesters: boolean
+  can_manage_curriculums: boolean
+  can_manage_assessments: boolean
+  can_users_add: boolean
+  can_users_edit: boolean
+  can_users_delete: boolean
+  can_users_reorder: boolean
+  can_admissions_add: boolean
+  can_admissions_edit: boolean
+  can_admissions_delete: boolean
+  can_admissions_change_status: boolean
+  can_admissions_import: boolean
+  can_admissions_export: boolean
+  can_admissions_confirm: boolean
+  can_students_add: boolean
+  can_students_edit: boolean
+  can_students_delete: boolean
+  can_students_detain: boolean
+  can_students_import: boolean
+  can_students_export: boolean
+  can_students_results: boolean
+  can_students_upload_photos: boolean
+  can_students_transfer: boolean
+  can_students_allotment: boolean
+  can_subjects_add: boolean
+  can_subjects_edit: boolean
+  can_subjects_delete: boolean
+  can_subjects_edit_subject_info: boolean
+  can_course_registration_add: boolean
+  can_course_registration_edit: boolean
+  can_course_registration_delete: boolean
+  can_end_semester_examinations_add: boolean
+  can_end_semester_examinations_edit: boolean
+  can_end_semester_examinations_delete: boolean
+  can_end_semester_examinations_seating_plan: boolean
+  can_end_semester_examinations_manage_exam_fee: boolean
+  can_end_semester_examinations_d_forms: boolean
+  can_end_semester_examinations_bundling: boolean
+  can_end_semester_examinations_marks_entry: boolean
+  can_end_semester_examinations_invigilations: boolean
+  can_examinations_seating_plan: boolean
+  can_internal_examinations_add: boolean
+  can_internal_examinations_edit: boolean
+  can_internal_examinations_delete: boolean
+  can_internal_examinations_manage_exam_fee: boolean
+  can_internal_examinations_manage_halltickets: boolean
+  can_internal_examinations_seating_plan: boolean
+  can_internal_examinations_invigilations: boolean
+  can_extra_curricular_activities_news_feed: boolean
+  can_extra_curricular_activities_clubs: boolean
+  can_extra_curricular_activities_events: boolean
+  can_edit_answer_sheet_marks: boolean
+  can_edit_external_marks: boolean
+  can_exam_collaterals: boolean
+  can_revalution: boolean
+  can_edit_internal_marks: boolean
+  can_process_results: boolean
+  can_generate_memos: boolean
+  can_individual_pages_view: boolean
+  can_tasks_add: boolean
+  can_tasks_edit: boolean
+  can_tasks_change_status: boolean
+  can_tasks_delete: boolean
+}
+
+interface IPermissionsStore {
+  permissions: IPermissions
+}
+
+export const PermissionsStore = new Store<IPermissionsStore>({
+  permissions: null,
+})

package/src/permissions/ValidateAccess.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Permission, PermissionsStore } from './PermissionsStore'
+
+export default function ValidateAccess({
+  accessKey,
+  children,
+}: {
+  accessKey: Permission
+  children: React.ReactNode
+}) {
+  const permissions = PermissionsStore.useState((s) => s).permissions
+  const hasAccess = accessKey ? permissions[accessKey] : true
+
+  if (hasAccess) {
+    return <>{children}</>
+  }
+  return null
+}

package/src/permissions/index.ts

@@ -0,0 +1,3 @@
+export { default as ValidateAccess } from './ValidateAccess'
+export { Permission, PermissionsStore } from './PermissionsStore'
+export { default as PageWithPermission } from './PageWithPermission'

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/shared-state/AssetsStore.ts

@@ -0,0 +1,15 @@
+import { Store } from 'pullstate'
+
+export interface IAssetsStore {
+  logo: string
+  logo_square: string
+  school_name: string
+  address: string | any
+}
+
+export const AssetsStore = new Store({
+  logo: null,
+  logo_square: null,
+  school_name: null,
+  address: '',
+})

package/src/shared-state/UserStore.ts

@@ -0,0 +1,13 @@
+import { Store } from 'pullstate'
+
+export interface IUserStore {
+  username: string
+  user: any
+  roles: any[]
+}
+
+export const UserStore = new Store({
+  username: '',
+  user: null,
+  roles: [],
+})

package/src/shared-state/index.ts

@@ -0,0 +1,3 @@
+import { AssetsStore } from './AssetsStore'
+import { UserStore } from './UserStore'
+export { AssetsStore, UserStore }

package/src/stories/Button.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Example/Button',
+  component: Button,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof Button>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Button',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Button',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Button',
+};

package/src/stories/Button.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

package/src/stories/Header.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Header } from './Header';
+
+export default {
+  title: 'Example/Header',
+  component: Header,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof Header>;
+
+const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {
+    name: 'Jane Doe',
+  },
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};