From ce49ce817ef9bc308405d438bd64818bb505ee17 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Mon, 18 Mar 2019 16:58:27 +0100 Subject: [PATCH 01/15] add sort by --- .../app/pages/Search/Filters/Filter/Sort.js | 26 +++++++++++++++ .../app/src/app/pages/Search/Filters/index.js | 11 +++++++ packages/app/src/app/pages/Search/search.css | 33 +++++++++++++++++-- 3 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 packages/app/src/app/pages/Search/Filters/Filter/Sort.js diff --git a/packages/app/src/app/pages/Search/Filters/Filter/Sort.js b/packages/app/src/app/pages/Search/Filters/Filter/Sort.js new file mode 100644 index 00000000000..b9bc6bbb81e --- /dev/null +++ b/packages/app/src/app/pages/Search/Filters/Filter/Sort.js @@ -0,0 +1,26 @@ +import React, { Component } from 'react'; +import Down from 'react-icons/lib/md/expand-more'; +import Up from 'react-icons/lib/md/expand-less'; +import { SortBy } from 'react-instantsearch-dom'; + +import { Container, Title, Button } from './elements'; + +class Filter extends Component { + state = { open: false }; + + toggle = () => this.setState(({ open }) => ({ open: !open })); + render() { + const { title, defaultRefinement, items } = this.props; + const { open } = this.state; + return ( + + + <span>{title}</span> + <Button onClick={this.toggle}>{open ? <Up /> : <Down />}</Button> + + + + ); + } +} +export default Filter; diff --git a/packages/app/src/app/pages/Search/Filters/index.js b/packages/app/src/app/pages/Search/Filters/index.js index fb3b91966a4..679ee47c792 100644 --- a/packages/app/src/app/pages/Search/Filters/index.js +++ b/packages/app/src/app/pages/Search/Filters/index.js @@ -1,12 +1,23 @@ import React from 'react'; import getTemplate from '@codesandbox/common/lib/templates'; +import { ALGOLIA_DEFAULT_INDEX } from '@codesandbox/common/lib/utils/config'; import Filter from './Filter'; +import Sort from './Filter/Sort'; import { Container } from './elements'; function Filters() { return ( + ") @@ -152,6 +159,7 @@ border-color: #40a9f3; box-shadow: none; } + .ais-RefinementList-item:hover .ais-RefinementList-checkbox { box-shadow: inset 0 0 0 1px rgba(108, 174, 221, 0.3); } @@ -192,7 +200,6 @@ padding: 0; margin: 0; color: rgba(255, 255, 255, 0.8); - margin-top: 1rem; } @@ -263,6 +270,7 @@ text-align: center; font-size: 14px; } + .ais-Pagination-item:hover { background: rgba(108, 174, 221, 0.2); } @@ -284,6 +292,7 @@ color: #fff; background: rgba(108, 174, 221, 1); } + .ais-Pagination-item--selected .ais-Pagination-link { color: currentColor; font-weight: normal; @@ -293,6 +302,7 @@ visibility: visible; color: #bbbbbb; } + .ais-Pagination-item--disabled[disabled], .ais-Pagination-item--disabled:disabled { opacity: 0.5; @@ -321,3 +331,22 @@ -webkit-appearance: none; outline-offset: -2px; } + +.ais-SortBy-select { + transition: 0.3s ease border-color; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNC45NSAxMCI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xLjQxIDQuNjdsMS4wNy0xLjQ5IDEuMDYgMS40OUgxLjQxek0zLjU0IDUuMzNMMi40OCA2LjgyIDEuNDEgNS4zM2gyLjEzeiI+PC9wYXRoPjwvc3ZnPg==); + background-color: rgba(0, 0, 0, 0.3); + background-position: right; + background-repeat: no-repeat; + width: 100%; + color: white; + border: none; + outline: none; + border-radius: 4px; + padding: 0.2em 1em 0.2em 0.2em; + box-sizing: border-box; + font-weight: 400; + height: 1.75em; + appearance: none; + border: 1px solid rgba(0, 0, 0, 0.1); +} From 3de61713b4830ec4646870ba8b10c3d7046dfe6b Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Thu, 21 Mar 2019 11:50:34 +0100 Subject: [PATCH 02/15] change search to new cards --- package.json | 1 + .../src/app/pages/Search/ResultInfo/index.js | 6 ++++- .../app/src/app/pages/Search/Results/index.js | 19 +++++++++++++--- .../SandboxCard/SandboxInfo/Stat/elements.js | 8 ------- .../SandboxCard/SandboxInfo/Stat/index.js | 22 ------------------- packages/app/src/app/pages/Search/search.css | 13 +++++++++++ .../src/components/WideSandbox/index.tsx | 4 ++-- packages/dynamic-pages/pages/profile/index.js | 4 ++-- .../pages/user-sandboxes/index.js | 2 +- packages/homepage/src/pages/explore.js | 2 +- packages/homepage/src/pages/react-hooks.js | 2 +- yarn.lock | 5 +++++ 12 files changed, 47 insertions(+), 41 deletions(-) delete mode 100644 packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/elements.js delete mode 100644 packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/index.js diff --git a/package.json b/package.json index fca42d5c9a4..b760cae67b5 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "start:fast": "lerna run start --scope app --stream", "start:vscode": "VSCODE=1 yarn start:fast & cd standalone-packages/monaco-editor && yarn simpleserver & cd standalone-packages/vscode && yarn watch", "start:dynamic": "lerna run dev --scope dynamic-pages --stream", + "start:common": "lerna run start --scope common --stream", "start:home": "lerna run start --scope homepage --stream", "start:test": "lerna run start:test --scope app --stream", "start:dev_api": "lerna run start:dev_api --scope app --stream", diff --git a/packages/app/src/app/pages/Search/ResultInfo/index.js b/packages/app/src/app/pages/Search/ResultInfo/index.js index eee84dd8679..4155a0d4e4e 100644 --- a/packages/app/src/app/pages/Search/ResultInfo/index.js +++ b/packages/app/src/app/pages/Search/ResultInfo/index.js @@ -6,7 +6,11 @@ import { ClearAllContainer } from './elements'; function ResultInfo() { return (
- + `${nbHits.toLocaleString()} results found`, + }} + /> diff --git a/packages/app/src/app/pages/Search/Results/index.js b/packages/app/src/app/pages/Search/Results/index.js index b427ab20311..27a4cd18e1c 100644 --- a/packages/app/src/app/pages/Search/Results/index.js +++ b/packages/app/src/app/pages/Search/Results/index.js @@ -2,17 +2,30 @@ import React from 'react'; import { Hits, Pagination } from 'react-instantsearch/dom'; import Centered from '@codesandbox/common/lib/components/flex/Centered'; +import WideSandbox from '@codesandbox/common/lib/components/WideSandbox'; +import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator'; import ResultInfo from '../ResultInfo'; -import SandboxCard from '../SandboxCard'; - import { Container } from './elements'; function Results() { return ( - + ( + + window.open(sandboxUrl({ id: hit.objectID, git: hit.git })) + } + sandbox={{ + ...hit, + title: hit.title || hit.objectID, + id: hit.objectID, + }} + /> + )} + /> diff --git a/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/elements.js b/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/elements.js deleted file mode 100644 index 80d0287eba2..00000000000 --- a/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/elements.js +++ /dev/null @@ -1,8 +0,0 @@ -import styled from 'styled-components'; - -export const CenteredText = styled.div` - display: inline-flex; - justify-content: center; - align-items: center; - flex-direction: row; -`; diff --git a/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/index.js b/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/index.js deleted file mode 100644 index 776734a83e9..00000000000 --- a/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -import { CenteredText } from './elements'; - -function Stat({ Icon, count }) { - return ( - - - - {count.toLocaleString()} - - - ); -} - -export default Stat; diff --git a/packages/app/src/app/pages/Search/search.css b/packages/app/src/app/pages/Search/search.css index 070d487e801..7ccac8f2705 100644 --- a/packages/app/src/app/pages/Search/search.css +++ b/packages/app/src/app/pages/Search/search.css @@ -350,3 +350,16 @@ appearance: none; border: 1px solid rgba(0, 0, 0, 0.1); } + +.ais-Hits .ais-Hits-list { + display: grid; + grid-gap: 2rem; + grid-template-columns: 400px 1fr; + margin-top: 2rem; +} + +@media screen and (max-width: 1100px) { + .ais-Hits-list { + grid-template-columns: 1fr; + } +} diff --git a/packages/common/src/components/WideSandbox/index.tsx b/packages/common/src/components/WideSandbox/index.tsx index 0cdcc6db1d7..26fc9323f2d 100644 --- a/packages/common/src/components/WideSandbox/index.tsx +++ b/packages/common/src/components/WideSandbox/index.tsx @@ -34,7 +34,7 @@ export type Props = { small?: boolean; defaultHeight?: number; noMargin?: boolean; - pickSandbox: ( + selectSandbox: ( params: { id: string; title: string; @@ -66,7 +66,7 @@ export default class WideSandbox extends React.PureComponent { }; toggleOpen = () => { - this.props.pickSandbox({ + this.props.selectSandbox({ id: this.props.sandbox.id, title: this.getTitle(), description: this.getDescription(), diff --git a/packages/dynamic-pages/pages/profile/index.js b/packages/dynamic-pages/pages/profile/index.js index 809da736856..e02f3ae5b30 100644 --- a/packages/dynamic-pages/pages/profile/index.js +++ b/packages/dynamic-pages/pages/profile/index.js @@ -55,7 +55,7 @@ const Profile = ({ profile, liked, showcased }) => noMargin small key={sandbox.id} - pickSandbox={({ id }) => openSandbox(id)} + selectSandbox={({ id }) => openSandbox(id)} sandbox={sandbox} /> ))} @@ -86,7 +86,7 @@ const Profile = ({ profile, liked, showcased }) => defaultHeight={170} small key={sandbox.id} - pickSandbox={({ id }) => openSandbox(id)} + selectSandbox={({ id }) => openSandbox(id)} sandbox={sandbox} /> ))} diff --git a/packages/dynamic-pages/pages/user-sandboxes/index.js b/packages/dynamic-pages/pages/user-sandboxes/index.js index eaf1bfa1f2b..ecc1ce0e8cd 100644 --- a/packages/dynamic-pages/pages/user-sandboxes/index.js +++ b/packages/dynamic-pages/pages/user-sandboxes/index.js @@ -105,7 +105,7 @@ const Sandboxes = ({ data, fetchUrl, profile, currentTab }) => { openSandbox(id)} + selectSandbox={({ id }) => openSandbox(id)} sandbox={sandbox} /> ))} diff --git a/packages/homepage/src/pages/explore.js b/packages/homepage/src/pages/explore.js index dca31a524c4..0c10a55ee13 100644 --- a/packages/homepage/src/pages/explore.js +++ b/packages/homepage/src/pages/explore.js @@ -242,7 +242,7 @@ export default class Explore extends React.PureComponent { // We force i here so we reuse the existing components // eslint-disable-next-line react/no-array-index-key,no-console key={i} - pickSandbox={this.selectSandbox} + selectSandbox={this.selectSandbox} sandbox={sandbox} /> )) diff --git a/packages/homepage/src/pages/react-hooks.js b/packages/homepage/src/pages/react-hooks.js index df080ea5e8d..37b0052e2c5 100644 --- a/packages/homepage/src/pages/react-hooks.js +++ b/packages/homepage/src/pages/react-hooks.js @@ -114,7 +114,7 @@ export default class extends React.PureComponent { {sandboxes.map(sandbox => ( ))} diff --git a/yarn.lock b/yarn.lock index 4309b398d1f..85eacc54384 100644 --- a/yarn.lock +++ b/yarn.lock @@ -23983,6 +23983,11 @@ typescript@3.3.4000: resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.4000.tgz#76b0f89cfdbf97827e1112d64f283f1151d6adf0" integrity sha512-jjOcCZvpkl2+z7JFn0yBOoLQyLoIkNZAs/fYJkUG6VKy6zLPHJGfQJYFHzibB6GJaF/8QrcECtlQ5cpvRHSMEA== +typescript@^3.3.4000: + version "3.3.4000" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.3.4000.tgz#76b0f89cfdbf97827e1112d64f283f1151d6adf0" + integrity sha512-jjOcCZvpkl2+z7JFn0yBOoLQyLoIkNZAs/fYJkUG6VKy6zLPHJGfQJYFHzibB6GJaF/8QrcECtlQ5cpvRHSMEA== + typography-breakpoint-constants@^0.15.10: version "0.15.10" resolved "https://registry.yarnpkg.com/typography-breakpoint-constants/-/typography-breakpoint-constants-0.15.10.tgz#bd5308dd57250e7f28a8c6e1c0e668ddf1178c5c" From cc93fb501d98c85f701e25ec69fffc689ba6f681 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Thu, 21 Mar 2019 16:13:54 +0100 Subject: [PATCH 03/15] add search in header --- packages/app/src/app/pages/Search/Filters/index.js | 3 +-- packages/app/src/app/pages/Search/index.js | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/app/src/app/pages/Search/Filters/index.js b/packages/app/src/app/pages/Search/Filters/index.js index 679ee47c792..e1bafd36fb5 100644 --- a/packages/app/src/app/pages/Search/Filters/index.js +++ b/packages/app/src/app/pages/Search/Filters/index.js @@ -12,8 +12,7 @@ function Filters() { Date: Tue, 30 Apr 2019 15:47:27 +0200 Subject: [PATCH 04/15] css updates --- packages/app/src/app/index.html | 2 +- .../pages/Sandbox/SearchDependencies/index.js | 3 +- .../pages/Search/Filters/Filter/elements.js | 9 +- .../src/app/pages/Search/Filters/elements.js | 1 + .../src/app/pages/Search/Results/elements.js | 2 +- .../app/src/app/pages/Search/Results/index.js | 1 + packages/app/src/app/pages/Search/elements.js | 20 +- packages/app/src/app/pages/Search/index.js | 77 ++-- packages/app/src/app/pages/Search/search.css | 365 ----------------- packages/app/src/app/pages/Search/search.js | 377 ++++++++++++++++++ .../src/components/WideSandbox/elements.ts | 6 +- .../src/components/WideSandbox/index.tsx | 11 +- packages/common/src/theme.ts | 3 +- 13 files changed, 456 insertions(+), 421 deletions(-) delete mode 100644 packages/app/src/app/pages/Search/search.css create mode 100644 packages/app/src/app/pages/Search/search.js diff --git a/packages/app/src/app/index.html b/packages/app/src/app/index.html index 19b60fbb847..e6c5054bc93 100644 --- a/packages/app/src/app/index.html +++ b/packages/app/src/app/index.html @@ -26,7 +26,7 @@ diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/index.js b/packages/app/src/app/pages/Sandbox/SearchDependencies/index.js index 4ea4155021b..40145da0f2b 100644 --- a/packages/app/src/app/pages/Sandbox/SearchDependencies/index.js +++ b/packages/app/src/app/pages/Sandbox/SearchDependencies/index.js @@ -2,7 +2,7 @@ import React from 'react'; import { InstantSearch, Configure, PoweredBy } from 'react-instantsearch/dom'; import { connectAutoComplete } from 'react-instantsearch/connectors'; -import 'app/pages/Search/search.css'; +import Style from 'app/pages/Search/search'; import DependenciesCSS from './dependencies'; import RawAutoComplete from './RawAutoComplete'; @@ -48,6 +48,7 @@ export default class SearchDependencies extends React.PureComponent { render() { return (
+