@bloom-housing/ui-components 2.0.0-pre-tailwind

package/.jest/setup-tests.js

@@ -0,0 +1,24 @@
+import "@testing-library/jest-dom/extend-expect"
+
+import { configure } from "enzyme"
+import Adapter from "enzyme-adapter-react-16"
+import { addTranslation } from "../src/helpers/translator"
+import general from "../src/locales/general.json"
+
+configure({ adapter: new Adapter() })
+
+// see: https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+window.matchMedia = jest.fn().mockImplementation((query) => {
+  return {
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  }
+})
+
+addTranslation(general)

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.2.5](https://github.com/bloom-housing/bloom/compare/v0.2.3...v0.2.5) (2020-06-30)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+## [0.2.2](https://github.com/bloom-housing/bloom/compare/v0.2.1...v0.2.2) (2020-06-05)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+## [0.2.1](https://github.com/bloom-housing/bloom/compare/v0.2.0...v0.2.1) (2020-06-05)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+## [0.0.9](https://github.com/bloom-housing/bloom/compare/v0.0.2...v0.0.9) (2020-04-21)
+
+**Note:** Version bump only for package @bloom-housing/ui-components

package/README.md

@@ -0,0 +1,195 @@
+# Bloom UI Components
+
+This package is the home of the core UI components for the Bloom affordable housing system, meant to be imported from one or more applications that provide the end-user interface.
+
+## Types of Components
+
+Bloom components have been design with the principles of [Atomic Design](http://atomicdesign.bradfrost.com/) in mind, and some of the directory structure and naming conventions are based on that.
+
+There are also Page Components as a distinct class, which represent larger combinations of components (atomic: organisms) that are meant to be directly imported into specific pages in the system (e.g. a home page).
+
+## Locales/Translations
+
+Look in `src/locales` for JSON files containing translated keys for UI elements and copy across all monorepo sites.
+
+## Storybook
+
+The UI components package includes [Storybook](https://storybook.js.org/) for easy browsing of the component tree, and is the best way to get started understand what's available.
+
+## CLI
+
+To spin up Storybook locally, run:
+
+```
+yarn start
+```
+
+To run the test suite which is a combination of storyshots and tests via Jest and Enzyme, run:
+
+```
+yarn test
+
+# or
+
+yarn test -u  # updates storyshots based on latest code
+```
+
+## Style Organization and Best Practices
+
+### Style Frameworks
+
+- [Tailwind](https://v1.tailwindcss.com) v1: Low-level utility library that styles components based on custom settings.
+
+### Sass Architecture
+
+- /ui-components: Components and styles are accessible by multiple apps
+  - /global: Styles are accessible by any component
+    - index: import frameworks, fonts, components, utilities
+    - /elements (no associated markup pattern, if more than 300 lines we break this into a folder with files)
+    - mixins
+    - utilities
+    - typography
+    - print
+    - /vendors
+  - Components: Styles are isolated per component
+    - /actions
+    - /footers
+    - /headers
+    - /icons
+    - /forms
+    - /layouts
+    - /lists
+    - /navigations
+    - /notifications
+    - /overlays
+    - /sections
+    - /structure
+    - /tables
+    - /text
+  - Settings
+    - tailwind.config
+- Apps: Components and styles that are accessible to a single app
+  - Reference
+  - Reference components (temp/prototype)
+
+Vendor Plugins
+
+- [AG Grid](https://www.ag-grid.com)
+- [Bulma](https://bulma.io/documentation/components/navbar/) (for the navbar)
+
+### Naming Conventions
+
+- **BEM**
+
+  - Structures CSS such that every entity is composed of blocks, elements and modifiers
+  - Avoid using Sass nesting to build class names
+    - Bad
+      - .accordion
+        - &-item
+    - Good
+      - .accordion
+      - .accordion-item
+
+- Suggested custom methodology: Our recommendation for a naming methodology is a modified version of BEM. It still uses blocks, sections within blocks and modifiers, but with a subclass syntax for modifiers.
+
+  - BEM
+
+    - .accordion
+    - .accordion-item
+    - .accordion-item\_\_label
+
+  - Sub Class Modifiers: Name modifiers and state-based rules with adjectives
+    - is-, has-
+    - .accordion-item\_\_label.is-open
+
+- Component naming
+  - Name things clearly
+  - Be wary of naming components based on content, as this limits the use of the class
+  - Avoid presentation- or location-specific naming
+- Use capitals for React component names
+  - SelectButton instead of selectbutton, or Menu instead of menu
+- Tokenize prop values
+  - Avoid presentation-specific words in prop values, as it will change with theming
+
+### Utilities & Custom Class Names
+
+- Use Tailwind utilities to prototype components before writing a custom styles sheet or creating custom classes.
+  - Create custom component classes once you understand the component structure and variants.
+- Use Tailwind utilities at the app level when creating layout and page level objects.
+  - Create custom layout classes once you identify a repeatable layout pattern.
+
+### CSS Formatting
+
+- File declaration order
+  1.  Local variables
+  2.  Tailwind utilities
+  3.  Media queries
+  4.  Pseudo states
+  5.  Nested classes
+  6.  Nested elements
+
+### Specificity
+
+- IDs should be reserved for JavaScript. Don’t use IDs for styles.
+- Don’t nest more than 3 layers deep.
+- Don’t fix problems with !important. Use !important purposefully.
+- Refrain from using overqualified selectors; div.container can simply be stated as .container.
+
+### Spacing Units
+
+- Base 16 using Tailwind Tokens for padding and margins
+
+### Layout
+
+- Use flex instead of float
+- Use grid utilities for uniform grids
+
+### Style Customization
+
+- Tailwind Configuration
+
+### Accessibility
+
+- Storybook AXE panel
+- Keyboard accessibility
+  - Roles
+  - Focus state
+- Color contrast
+  - AA
+- Accessible forms
+  - Labels for each input
+  - Screen reader labels for inputs with no label
+  - Fieldsets for groups
+  - Required
+- Accessible data tables
+- Alt tags for images
+- Errors and alert messages
+- Overlay focus
+- Screen reader utilities
+
+### Build Process
+
+### Upstream vs Downstream
+
+## React Best Practices
+
+### Calculate Style Based on Props
+
+- a `warning={true}` prop might turn into an `is-warning` className applied
+
+### Nesting
+
+### Naming Conventions
+
+- CamelCase to css
+
+### Storybook: Creating Stories
+
+- Include a default story for base component
+- Include stories for each state
+
+### Accessibility
+
+- Use accessibility tab for QA
+
+### Storybook Knobs

package/index.ts

@@ -0,0 +1,148 @@
+/* Actions */
+export * from "./src/actions/Button"
+export * from "./src/actions/ExpandableText"
+export * from "./src/actions/LinkButton"
+export * from "./src/actions/LocalizedLink"
+export * from "./src/actions/ExpandableContent"
+
+/* Blocks */
+export * from "./src/blocks/ActionBlock"
+export * from "./src/blocks/AppStatusItem"
+export * from "./src/blocks/DashBlock"
+export * from "./src/blocks/DashBlocks"
+export * from "./src/blocks/FormCard"
+export * from "./src/blocks/HousingCounselor"
+export * from "./src/blocks/ImageCard"
+export * from "./src/blocks/InfoCard"
+export * from "./src/blocks/StatusBar"
+export * from "./src/blocks/ViewItem"
+
+/* Contexts */
+export * from "./src/authentication"
+export * from "./src/config"
+
+/* Footers */
+export * from "./src/footers/ExygyFooter"
+export * from "./src/footers/SiteFooter"
+
+/* Forms */
+export * from "./src/forms/DateField"
+export * from "./src/forms/DOBField"
+export * from "./src/forms/CloudinaryUpload"
+export * from "./src/forms/Dropzone"
+export * from "./src/forms/Field"
+export * from "./src/forms/PhoneField"
+export * from "./src/forms/PhoneMask"
+export * from "./src/forms/HouseholdMemberForm"
+export * from "./src/forms/HouseholdSizeField"
+export * from "./src/forms/FieldGroup"
+export * from "./src/forms/Select"
+export * from "./src/forms/Form"
+export * from "./src/forms/Textarea"
+export * from "./src/forms/TimeField"
+/* Global */
+export * from "./src/global/AppearanceTypes"
+export * from "./src/global/ApplicationStatusType"
+export * from "./src/global/vendor/AgPagination"
+
+/* Headers */
+export * from "./src/headers/Hero"
+export * from "./src/headers/PageHeader"
+export * from "./src/headers/SiteHeader"
+
+/* Helpers */
+export * from "./src/helpers/address"
+export * from "./src/helpers/capitalize"
+export * from "./src/helpers/dateToString"
+export * from "./src/helpers/formOptions"
+export * from "./src/helpers/links"
+export * from "./src/helpers/mergeDeep"
+export * from "./src/helpers/localeRoute"
+export * from "./src/helpers/nextjs"
+export * from "./src/helpers/numberOrdinal"
+export * from "./src/helpers/occupancyFormatting"
+export * from "./src/helpers/photos"
+export * from "./src/helpers/pdfs"
+export * from "./src/helpers/state"
+export * from "./src/helpers/tableSummaries"
+export * from "./src/helpers/translator"
+export * from "./src/helpers/debounce"
+export * from "./src/helpers/validators"
+export * from "./src/helpers/blankApplication"
+export * from "./src/helpers/formatYesNoLabel"
+export * from "./src/helpers/getTranslationWithArguments"
+export * from "./src/helpers/preferences"
+export * from "./src/helpers/resolveObject"
+export * from "./src/helpers/useMutate"
+
+/* Icons */
+export * from "./src/icons/HeaderBadge"
+export * from "./src/icons/Icon"
+
+/* Lists */
+export * from "./src/lists/PreferencesList"
+
+/* Navigation */
+export * from "./src/navigation/FooterNav"
+export * from "./src/navigation/LanguageNav"
+export * from "./src/navigation/ProgressNav"
+export * from "./src/navigation/TabNav"
+export * from "./src/navigation/Tabs"
+export * from "./src/navigation/UserNav"
+
+/* Notifications */
+export * from "./src/notifications/ApplicationStatus"
+export * from "./src/notifications/ErrorMessage"
+export * from "./src/notifications/StatusAside"
+export * from "./src/notifications/StatusMessage"
+export * from "./src/notifications"
+
+/* Overlays */
+export * from "./src/overlays/Overlay"
+export * from "./src/overlays/Modal"
+export * from "./src/overlays/Drawer"
+export * from "./src/overlays/LoadingOverlay"
+
+/* Page Components */
+export * from "./src/page_components/listing/AdditionalFees"
+export * from "./src/page_components/listing/ListingCard"
+export * from "./src/page_components/listing/ListingDetailHeader"
+export * from "./src/page_components/listing/ListingDetails"
+export * from "./src/page_components/listing/ListingMap"
+export * from "./src/page_components/listing/ListingsGroup"
+export * from "./src/page_components/listing/UnitTables"
+export * from "./src/page_components/listing/listing_sidebar/ApplicationSection"
+export * from "./src/page_components/listing/listing_sidebar/Apply"
+export * from "./src/page_components/listing/listing_sidebar/LeasingAgent"
+export * from "./src/page_components/listing/listing_sidebar/ListingUpdated"
+export * from "./src/page_components/listing/listing_sidebar/ReferralApplication"
+export * from "./src/page_components/listing/listing_sidebar/SidebarAddress"
+export * from "./src/page_components/listing/listing_sidebar/Waitlist"
+export * from "./src/page_components/listing/listing_sidebar/WhatToExpect"
+export * from "./src/page_components/listing/listing_sidebar/events/DownloadLotteryResults"
+export * from "./src/page_components/listing/listing_sidebar/events/OpenHouseEvent"
+export * from "./src/page_components/listing/listing_sidebar/events/LotteryResultsEvent"
+export * from "./src/page_components/listing/listing_sidebar/events/PublicLotteryEvent"
+export * from "./src/page_components/listing/listing_sidebar/events/EventDateSection"
+
+/* Responsive Wrappers */
+export * from "./src/sections/ResponsiveWrappers"
+
+/* Sections */
+export * from "./src/sections/ContentSection"
+export * from "./src/sections/FooterSection"
+export * from "./src/sections/InfoCardGrid"
+export * from "./src/sections/ListSection"
+export * from "./src/sections/MarkdownSection"
+export * from "./src/sections/ResponsiveContentList"
+export * from "./src/sections/GridSection"
+
+/* Tables */
+export * from "./src/tables/StandardTable"
+export * from "./src/tables/GroupedTable"
+export * from "./src/tables/MinimalTable"
+
+/* Text */
+export * from "./src/text/Description"
+export * from "./src/text/Message"
+export * from "./src/text/Tag"

package/jest.config.js

@@ -0,0 +1,41 @@
+/*eslint no-undef: "error"*/
+/*eslint-env node*/
+
+process.env.TZ = "UTC"
+
+module.exports = {
+  testRegex: ["/*.test.tsx$", "/*.test.ts$"],
+  collectCoverageFrom: [
+    "**/*.tsx",
+    "!**/*.stories.tsx",
+    "<rootDir>/ui-components/src/helpers/*.ts",
+    "!<rootDir>/ui-components/src/helpers/blankApplication.ts",
+  ],
+  coverageReporters: ["lcov", "text"],
+  coverageDirectory: "test-coverage",
+  coverageThreshold: {
+    global: {
+      branches: 0,
+      functions: 0,
+      lines: 0,
+      statements: 0,
+    },
+  },
+  preset: "ts-jest",
+  globals: {
+    "ts-jest": {
+      tsConfig: "tsconfig.json",
+    },
+  },
+  rootDir: "..",
+  roots: ["<rootDir>/ui-components"],
+  transform: {
+    "^.+\\.[t|j]sx?$": "ts-jest",
+  },
+  setupFiles: ["dotenv/config"],
+  setupFilesAfterEnv: ["<rootDir>/ui-components/.jest/setup-tests.js"],
+  moduleNameMapper: {
+    "\\.(scss|css|less)$": "identity-obj-proxy",
+  },
+  testPathIgnorePatterns: ["storyshots.d.ts"],
+}

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@bloom-housing/ui-components",
+  "version": "2.0.0-pre-tailwind",
+  "description": "Shared user interface components for Bloom affordable housing system",
+  "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
+  "main": "index.js",
+  "license": "Apache-2.0",
+  "private": false,
+  "scripts": {
+    "build-storybook": "build-storybook -c .storybook -s ./public",
+    "start": "start-storybook -s ./public",
+    "test": "jest -w 1",
+    "test:coverage": "jest -w 1 --coverage --watchAll=false",
+    "prettier": "prettier --write \"**/*.tsx\"",
+    "test:a11y": "build-storybook -o ./storybook-static && jest storyshot --testRegex=storyshots.spec.ts"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.11.6",
+    "@emotion/core": "^10.0.35",
+    "@emotion/styled": "^10.0.27",
+    "@storybook/addon-a11y": "^6.0.26",
+    "@storybook/addon-actions": "^6.1.17",
+    "@storybook/addon-docs": "^6.0.26",
+    "@storybook/addon-knobs": "^6.1.1",
+    "@storybook/addon-storyshots": "^6.3.2",
+    "@storybook/addon-storyshots-puppeteer": "^6.0.26",
+    "@storybook/addon-viewport": "^6.0.26",
+    "@storybook/react": "^6.0.26",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@types/enzyme": "^3.10.7",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/jest": "^26.0.14",
+    "@types/jwt-decode": "^2.2.1",
+    "@types/react-map-gl": "^5.2.10",
+    "@types/react-tabs": "^2.3.2",
+    "@types/react-test-renderer": "^16.9.3",
+    "@types/webpack": "^4.41.22",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-require-context-hook": "^1.0.0",
+    "dotenv": "^8.2.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
+    "enzyme-to-json": "^3.4.4",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.5.3",
+    "mockdate": "^3.0.2",
+    "node-sass": "^4.14.1",
+    "postcss-loader": "^3.0.0",
+    "preact": "^10.5.14",
+    "puppeteer": "^10.1.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-is": "^16.13.1",
+    "react-test-renderer": "^16.13.1",
+    "regenerator-runtime": "^0.13.7",
+    "sass-loader": "^10.0.3",
+    "style-loader": "^1.1.3",
+    "ts-jest": "^26.4.1",
+    "ts-loader": "^8.0.4",
+    "typescript": "^3.9.7",
+    "webpack": "^4.44.2"
+  },
+  "dependencies": {
+    "@bloom-housing/backend-core": "2.0.0-pre-tailwind",
+    "@mapbox/mapbox-sdk": "^0.13.0",
+    "@types/body-scroll-lock": "^2.6.1",
+    "@types/jwt-decode": "^2.2.1",
+    "@types/markdown-to-jsx": "^6.11.2",
+    "@types/node": "^12.12.67",
+    "@types/node-polyglot": "^2.4.1",
+    "@types/react-beautiful-dnd": "^13.1.1",
+    "@types/react-dom": "^16.9.5",
+    "@types/react-text-mask": "^5.4.6",
+    "@types/react-transition-group": "^4.4.0",
+    "axios": "^0.21.1",
+    "body-scroll-lock": "^3.1.5",
+    "bulma": "^0.9.1",
+    "jwt-decode": "^2.2.0",
+    "markdown-to-jsx": "^6.11.4",
+    "moment": "^2.29.1",
+    "nanoid": "^3.1.12",
+    "react": "^16.13.1",
+    "react-accessible-accordion": "^3.3.3",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-dom": "^16.13.1",
+    "react-dropzone": "^11.3.2",
+    "react-focus-lock": "^2.4.1",
+    "react-map-gl": "^6.1.16",
+    "react-media": "^1.10.0",
+    "react-tabs": "^3.2.2",
+    "react-text-mask": "^5.4.3",
+    "react-transition-group": "^4.4.1",
+    "tailwindcss": "^1.8.12",
+    "typesafe-actions": "^5.1.0"
+  },
+  "gitHead": "5f7694e3f2baff2a1a7a22e0676e487dda781a3e"
+}