├── .gitignore
├── craco.config.js
├── package-lock.json
├── package.json
├── public
├── _redirects
├── favicon.ico
├── img
│ ├── disclosure.svg
│ ├── dropdown.svg
│ ├── modal.svg
│ ├── popover.svg
│ ├── select.svg
│ └── toggle.svg
└── index.html
├── src
├── components
│ └── Home
│ │ ├── EmailButton.jsx
│ │ ├── FeedbackButton.jsx
│ │ ├── Gallery.jsx
│ │ ├── Header.jsx
│ │ ├── Home.jsx
│ │ ├── List.jsx
│ │ ├── Menu.jsx
│ │ ├── NotFound.jsx
│ │ └── SourceLink.jsx
├── constants
│ └── index.js
├── container
│ └── App.js
├── images
│ └── not-found.svg
├── index.css
└── index.js
└── tailwind.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # dependencies
2 | /node_modules
3 | /.pnp
4 | .pnp.js
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
--------------------------------------------------------------------------------
/craco.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | style: {
3 | postcss: {
4 | plugins: [require('tailwindcss'), require('autoprefixer')],
5 | },
6 | },
7 | };
8 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "application-ui",
3 | "version": "1.0.0",
4 | "license": "MIT",
5 | "prettier": {
6 | "arrowParens": "avoid",
7 | "singleQuote": true,
8 | "trailingComma": "es5"
9 | },
10 | "scripts": {
11 | "start": "craco start",
12 | "build": "craco build",
13 | "test": "craco test",
14 | "eject": "react-scripts eject"
15 | },
16 | "dependencies": {
17 | "@craco/craco": "^6.1.1",
18 | "@tailwindcss/postcss7-compat": "npm:@tailwindcss/postcss7-compat@^2.1.0",
19 | "@testing-library/jest-dom": "^5.11.4",
20 | "@testing-library/react": "^11.1.0",
21 | "@testing-library/user-event": "^12.1.10",
22 | "autoprefixer": "9",
23 | "postcss": "7",
24 | "prop-types": "^15.7.2",
25 | "react": "^17.0.1",
26 | "react-content-loader": "^6.0.2",
27 | "react-dom": "^17.0.1",
28 | "react-helmet": "^6.1.0",
29 | "react-icons": "^4.2.0",
30 | "react-router-dom": "^5.2.0",
31 | "react-scripts": "4.0.2",
32 | "simplebar-react": "^2.3.0",
33 | "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0",
34 | "web-vitals": "^1.0.1"
35 | },
36 | "eslintConfig": {
37 | "extends": [
38 | "react-app",
39 | "react-app/jest"
40 | ]
41 | },
42 | "browserslist": {
43 | "production": [
44 | ">0.2%",
45 | "not dead",
46 | "not op_mini all"
47 | ],
48 | "development": [
49 | "last 1 chrome version",
50 | "last 1 firefox version",
51 | "last 1 safari version"
52 | ]
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200
2 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neysidev/application-ui/2d58dfefd1fe4d28ebc99093b73da62a731f0af1/public/favicon.ico
--------------------------------------------------------------------------------
/public/img/disclosure.svg:
--------------------------------------------------------------------------------
1 |
32 |
--------------------------------------------------------------------------------
/public/img/dropdown.svg:
--------------------------------------------------------------------------------
1 |
45 |
--------------------------------------------------------------------------------
/public/img/modal.svg:
--------------------------------------------------------------------------------
1 |
30 |
--------------------------------------------------------------------------------
/public/img/popover.svg:
--------------------------------------------------------------------------------
1 |
36 |
--------------------------------------------------------------------------------
/public/img/select.svg:
--------------------------------------------------------------------------------
1 |
51 |
--------------------------------------------------------------------------------
/public/img/toggle.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/components/Home/EmailButton.jsx:
--------------------------------------------------------------------------------
1 | export default function EmailButton() {
2 | return (
3 |
7 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/Home/FeedbackButton.jsx:
--------------------------------------------------------------------------------
1 | export default function FeedbackButton() {
2 | return (
3 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/Home/Gallery.jsx:
--------------------------------------------------------------------------------
1 | import Menu from './Menu';
2 | import List from './List';
3 |
4 | export default function Gallery() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/Home/Header.jsx:
--------------------------------------------------------------------------------
1 | export default function Header() {
2 | return (
3 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/Home/Home.jsx:
--------------------------------------------------------------------------------
1 | import Header from './Header';
2 | import Gallery from './Gallery';
3 |
4 | export default function Home() {
5 | return (
6 |
7 |
8 |
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/Home/List.jsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom';
2 | import { components } from '../../constants';
3 |
4 | export default function List() {
5 | return (
6 |
7 | {components.map(component => (
8 | -
9 |
13 |
14 |
20 |
21 |
25 | {component.name}
26 |
27 |
28 | ))}
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/Home/Menu.jsx:
--------------------------------------------------------------------------------
1 | import FeedbackButton from './FeedbackButton';
2 | import SourceLink from './SourceLink';
3 | import EmailButton from './EmailButton';
4 |
5 | export default function Menu() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/src/components/Home/NotFound.jsx:
--------------------------------------------------------------------------------
1 | import { Helmet } from 'react-helmet';
2 | import { Link } from 'react-router-dom';
3 |
4 | import Image from '../../images/not-found.svg';
5 |
6 | export default function NotFound() {
7 | return (
8 | <>
9 |
10 | Not Found!
11 |
12 |
13 | 
14 |
18 | Go Back
19 |
20 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/Home/SourceLink.jsx:
--------------------------------------------------------------------------------
1 | export default function SourceLink() {
2 | return (
3 |
9 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/src/constants/index.js:
--------------------------------------------------------------------------------
1 | export const components = [
2 | {
3 | id: 1,
4 | image: 'toggle.svg',
5 | name: 'Toggle',
6 | route: '/toggle',
7 | },
8 | {
9 | id: 2,
10 | image: 'dropdown.svg',
11 | name: 'Dropdown',
12 | route: '/dropdown',
13 | },
14 | {
15 | id: 3,
16 | image: 'select.svg',
17 | name: 'Select',
18 | route: '/select',
19 | },
20 | {
21 | id: 4,
22 | image: 'disclosure.svg',
23 | name: 'Disclosure',
24 | route: '/disclosure',
25 | },
26 | {
27 | id: 5,
28 | image: 'modal.svg',
29 | name: 'Modal',
30 | route: '/modal',
31 | },
32 | {
33 | id: 6,
34 | image: 'popover.svg',
35 | name: 'Popover',
36 | route: '/popover',
37 | },
38 | ];
39 |
--------------------------------------------------------------------------------
/src/container/App.js:
--------------------------------------------------------------------------------
1 | import { Helmet } from 'react-helmet';
2 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
3 |
4 | import SimpleBar from 'simplebar-react';
5 | import 'simplebar/dist/simplebar.min.css';
6 |
7 | import Home from '../components/Home/Home';
8 | import NotFound from '../components/Home/NotFound';
9 |
10 | export default function App() {
11 | return (
12 |
13 |
14 | Application UI
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/images/not-found.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');
2 |
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 |
7 | body {
8 | @apply font-manrope;
9 | }
10 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import { render } from 'react-dom';
2 |
3 | import './index.css';
4 | import App from './container/App';
5 |
6 | render(, document.getElementById('root'));
7 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
3 | darkMode: 'class',
4 | theme: {
5 | fontFamily: {
6 | manrope: 'Manrope',
7 | },
8 | extend: {
9 | colors: {
10 | transparentBlack: {
11 | 100: 'rgba(0, 0, 0, 0.03)',
12 | 200: 'rgba(0, 0, 0, 0.08)',
13 | 300: 'rgba(0, 0, 0, 0.15)',
14 | 400: 'rgba(0, 0, 0, 0.26)',
15 | 500: 'rgba(0, 0, 0, 0.4)',
16 | 600: 'rgba(0, 0, 0, 0.55)',
17 | 700: 'rgba(0, 0, 0, 0.7)',
18 | 800: 'rgba(0, 0, 0, 0.8)',
19 | 900: 'rgba(0, 0, 0, 0.9)',
20 | },
21 | black: {
22 | 100: '#f7f7f7',
23 | 200: '#ebebeb',
24 | 300: '#d9d9d9',
25 | 400: '#bdbdbd',
26 | 500: '#999999',
27 | 600: '#737373',
28 | 700: '#4d4d4d',
29 | 800: '#333333',
30 | 900: '#1a1a1a',
31 | },
32 | green: {
33 | 100: '#e7f9eb',
34 | 200: '#c3efcd',
35 | 300: '#88dd9f',
36 | 400: '#47d16c',
37 | 500: '#1fb141',
38 | 600: '#189a2e',
39 | 700: '#0d731e',
40 | 800: '#085e16',
41 | 900: '#04490f',
42 | },
43 | },
44 | },
45 | },
46 | variants: {
47 | extend: {},
48 | },
49 | plugins: [],
50 | };
51 |
--------------------------------------------------------------------------------