Landing page implementation

example/public/index.html

@@ -9,7 +9,12 @@
       name="description"
       content="The next content manager"
     />
-    <link rel="apple-touch-icon" href="logo192.png" />
+
+      <link rel="icon" type="image/png" sizes="192x192"  href="%PUBLIC_URL%/icon-192x192.png">
+      <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
+      <link rel="icon" type="image/png" sizes="96x96" href="%PUBLIC_URL%/favicon-96x96.png">
+      <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/icon-192x192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/CMSAppProvider.tsx

@@ -205,7 +205,7 @@ const makeTheme = (
                 default: mode === "dark" ? "#424242" : "#f6f8f9"
             },
             primary: {
-                main: primaryColor ? primaryColor : blue["800"]
+                main: primaryColor ? primaryColor : "#0070f4"
             },
             secondary: {
                 main: secondaryColor ? secondaryColor : pink["400"]

src/collection/fields/TableNumberInput.tsx

@@ -44,7 +44,7 @@ export function NumberTableInput(props: {
     useEffect(
         () => {
             if (!focused && propStringValue !== internalValue)
-                setInternalValue(value ? value.toString(): null);
+                setInternalValue(value !== undefined && value !== null ? value.toString(): null);
         },
         [value, focused]
     );

src/types_test.tsx

@@ -0,0 +1,45 @@
+// This file contains a minimum example based on current code
+// to see that the type checking in our schemas does not work
+interface EntitySchema<Key extends string = string, T extends any = any> {
+    properties: Record<Key, Property<T>>;
+}
+
+type Property<T = any> =
+    T extends string ? StringProperty :
+        T extends number ? NumberProperty : never;
+
+
+interface StringProperty {
+    dataType: "string";
+}
+
+interface NumberProperty {
+    dataType: "number";
+}
+
+function buildSchemaFrom<Type extends Partial<{ [P in Key]: T; }>,
+    Key extends string = Extract<keyof Type, string>,
+    T = any>(
+    schema: EntitySchema<Key, T>
+): EntitySchema<Key, T> {
+    return schema;
+}
+
+type Product = {
+    name: string,
+    price: number,
+}
+
+export const productSchema = buildSchemaFrom<Product>({
+    properties: {
+        name: {
+            dataType: "string"
+        },
+        price: {
+            dataType: "string", // THIS SHOULD FAIL
+        },
+        // missing: { // This fails if uncommented, which is expected
+        //     dataType: "string",
+        // },
+    }
+});

website/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website/README.md

@@ -0,0 +1,33 @@
+# Website
+
+This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
+
+## Installation
+
+```console
+yarn install
+```
+
+## Local Development
+
+```console
+yarn start
+```
+
+This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+
+## Build
+
+```console
+yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+## Deployment
+
+```console
+GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

website/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

website/blog/2019-05-28-hola.md

@@ -0,0 +1,11 @@
+---
+slug: hola
+title: Hola
+author: Gao Wei
+author_title: Docusaurus Core Team
+author_url: https://github.com/wgao19
+author_image_url: https://avatars1.githubusercontent.com/u/2055384?v=4
+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

website/blog/2019-05-29-hello-world.md

@@ -0,0 +1,17 @@
+---
+slug: hello-world
+title: Hello
+author: Endilie Yacop Sucipto
+author_title: Maintainer of Docusaurus
+author_url: https://github.com/endiliey
+author_image_url: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4
+tags: [hello, docusaurus]
+---
+
+Welcome to this blog. This blog is created with [**Docusaurus 2 alpha**](https://v2.docusaurus.io/).
+
+<!--truncate-->
+
+This is a test post.
+
+A whole bunch of other information.

website/blog/2019-05-30-welcome.md

@@ -0,0 +1,13 @@
+---
+slug: welcome
+title: Welcome
+author: Yangshun Tay
+author_title: Front End Engineer @ Facebook
+author_url: https://github.com/yangshun
+author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4
+tags: [facebook, hello, docusaurus]
+---
+
+Blog features are powered by the blog plugin. Simply add files to the `blog` directory. It supports tags as well!
+
+Delete the whole directory if you don't want the blog features. As simple as that!

website/docs/collections.md

@@ -0,0 +1,124 @@
+---
+id: collections
+title: Collections
+sidebar_label: Collections
+---
+
+
+Once you have defined at least one entity schema, you can include it in a
+collection. You can find collection views as the first level of navigation in
+the main menu, or as subcollections inside other collections, following the
+Firestore data schema.
+
+* `name` The plural name of the view. E.g. 'products'.
+
+* `relativePath` Relative Firestore path of this view to its parent. If this
+  view is in the root the path is equal to the absolute one. This path also
+  determines the URL in FireCMS.
+
+* `defaultSize` Default size of the rendered collection.
+
+* `group` Optional field used to group top level navigation entries under a
+  navigation view. If you set this value in a subcollection it has no effect.
+
+* `description` Optional description of this view. You can use Markdown.
+
+* `properties` Properties displayed in this collection. If this property is not
+  set every property is displayed.
+
+* `excludedProperties` Properties that should NOT get displayed in the
+  collection view. All the other properties from the entity are displayed. It
+  has no effect if the `properties` value is set.
+
+* `filterableProperties` List of properties that include a filter widget.
+  Defaults to none.
+
+* `initialFilter` Initial filters applied to this collection. Consider that you
+  can filter any property, but only those included in
+  `filterableProperties` will include the corresponding filter widget. Defaults
+  to none
+
+* `initialSort` Default sort applied to this collection. It takes tuples in the
+  shape `["property_name", "asc"]` or `["property_name", "desc"]`
+
+* `extraActions` Builder for rendering additional components such as buttons in
+  the collection toolbar. The builder takes an object with
+  props `entityCollection`  and `selectedEntities` if any are set by the end
+  user.
+
+* `pagination` If enabled, content is loaded in batches. If `false` all entities
+  in the collection are loaded. You can specify a number to specify the
+  pagination size (50 by default)
+  Defaults to `true`
+
+* `additionalColumns` You can add additional columns to the collection view by
+  implementing an additional column delegate.
+
+* `textSearchDelegate` If a text search delegate is supplied, a search bar is
+  displayed on top.
+
+* `permissions` You can specify an object with boolean permissions with the
+  shape `{edit:boolean; create:boolean; delete:boolean}` to indicate the actions
+  the user can perform. You can also pass a `PermissionsBuilder` to customize
+  the permissions based on user or entity.
+
+* `inlineEditing` Can the elements in this collection be edited inline in the
+  collection view. If this flag is set to false but `permissions.edit` is `true`
+  , entities can still be edited in the side panel.
+
+* `exportable` Should the data in this collection view include an export button.
+  You can also set an `ExportConfig` configuration object to customize
+  the export and add additional values.
+  Defaults to `true`
+
+* `subcollections` Following the Firestore document and collection schema, you
+  can add subcollections to your entity in the same way you define the root
+  collections.
+
+* `onEntityDelete` Hook called after the entity gets deleted in Firestore.
+
+### Additional columns
+
+If you would like to include a column that does not map directly to a property,
+you can use the `additionalColumns` field, providing a
+`AdditionalColumnDelegate`, which includes an id, a title, and a builder that
+receives the corresponding entity.
+
+In the builder you can return any React Component.
+
+If you would like to do some async computation, such as fetching a different
+entity, you can use the utility component `AsyncPreviewComponent` to show a
+loading indicator.
+
+### Subcollections
+
+Subcollections are collections of entities that are found under another entity.
+For example, you can have a collection named "translations" under the entity
+"Article". You just need to use the same format as for defining your collection
+using the field `subcollections`.
+
+Subcollections are easily accessible from the side view while editing an entity.
+
+### Filters
+
+Filtering support is currently limited to string, number and boolean values,
+including enum types. If you want a property to be filterable, you can mark it
+as such in the entity schema.
+
+Any comments related to this feature are welcome.
+
+### Text search
+
+Firestore does not support native text search, so we need to rely on external
+solutions. If you specify a `textSearchDelegate` to the collection view, you
+will see a search bar on top. The delegate is in charge of returning the
+matching ids, from the search string.
+
+A delegate using AlgoliaSearch is included, where you need to specify your
+credentials and index. For this to work you need to set up an AlgoliaSearch
+account and manage the indexing of your documents. There is a full backend
+example included in the code, which indexes documents with Cloud Functions.
+
+You can also implement your own `TextSearchDelegate`, and would love to hear how
+you come around this problem.
+

website/docs/config_intro.md

@@ -0,0 +1,77 @@
+---
+id: cms_config
+title: CMS main config
+sidebar_label: Main config
+---
+
+
+The entry point for setting up a FireCMS app is the `CMSApp`, where you can
+define the following specs:
+
+- `name` Name of the app, displayed as the main title and in the tab title.
+
+- `navigation` Use this prop to specify the views that will be generated in the
+  CMS. You will usually want to create a `Navigation` object that includes
+  collection views where you specify the path and the schema. Additionally, you
+  can add custom views to the root navigation. In you need to customize the
+  navigation based on the logged user you can use a `NavigationBuilder`
+
+- `logo` Logo to be displayed in the drawer of the CMS.
+
+- `authentication` Do the users need to log in to access the CMS. You can
+  specify an Authenticator function to discriminate which users can access the
+  CMS or not. If not specified, authentication is enabled but no user
+  restrictions apply.
+
+- `signInOptions` List of sign in options that will be displayed in the login
+  view if `authentication` is enabled. You can pass google providers strings,
+  such as `firebase.auth.GoogleAuthProvider.PROVIDER_ID` or full configuration
+  objects such as specified
+  in https://firebase.google.com/docs/auth/web/firebaseui
+  Defaults to Google sign in only.
+
+- `allowSkipLogin` If authentication is enabled, allow the user to access the
+  content without login.
+
+- `firebaseConfig` Firebase configuration of the project. If you afe deploying
+  the app to Firebase hosting, you don't need to specify this value.
+
+- `onFirebaseInit` An optional callback after Firebase has been initialised.
+  Useful for using the local emulator or retrieving the used configuration.
+
+- `primaryColor` Primary color of the theme of the CMS.
+
+- `secondaryColor` Primary color of the theme of the CMS.
+
+- `fontFamily` Font family string. e.g. '"Roboto", "Helvetica", "Arial",
+  sans-serif'.
+
+- `toolbarExtraWidget` A component that gets rendered on the upper side of the
+  main toolbar.
+
+- `dateTimeFormat` Format of the dates in the CMS. Defaults to 'MMMM dd, yyyy,
+  HH:mm:ss'
+
+- `locale` Locale of the CMS, currently only affecting dates
+
+- `schemaResolver`  Used to override schemas based on the collection path and
+  entityId. This resolver allows to override the schema for specific entities,
+  or specific collections, app wide. This overrides schemas all through the app.
+  You can also override schemas in place, when using `useSideEntityController`
+
+
+
+#### More granular control
+
+If you don't want to use FireCMS `CMSApp` as a full app but would like to
+integrate some of its components you may want to use the `CMSAppProvider`
+and `CMSMainView`
+components (used internally) directly.
+
+This will allow you to initialise Firebase on your own and integrate the FireCMS
+components into your own app. Just place `CMSAppProvider` on top of the
+components that need to use the FireCMS hooks.
+
+You can see an
+example [here](https://github.com/Camberi/firecms/blob/master/example/src/SimpleAppWithProvider.tsx)
+