feat: firestore demo

package.json

@@ -36,6 +36,7 @@
     "dev:kitchensink": "cd react/typescript/kitchensink && yarn develop",
     "dev:looks-query": "cd react/typescript/looks-query-redux && yarn develop",
     "dev:looks-query-redux": "cd react/typescript/looks-query-redux && yarn develop",
+    "dev:firestore": "cd react/typescript/firestore && yarn develop",
     "dev:counter": "cd vanilla/counter && yarn develop",
     "dev:counter-ts": "cd vanilla/counter-ts && yarn develop"
   },

react/typescript/firestore/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+.cache
+.vscode
+.env
+.eslintcache

react/typescript/firestore/.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

react/typescript/firestore/README.md

@@ -0,0 +1,114 @@
+# Looker Extension Firestore Demo (React & Typescript)
+
+This repository demonstrate using firestore in a Looker extension using Typescript.
+
+It uses [React](https://reactjs.org/) and [Typescript](https://typescriptlang.org) for writing your extension, the [React Extension SDK](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/extension-sdk-react) for interacting with Looker, [Looker Components](https://components.looker.com) for UI, and [Webpack](https://webpack.js.org/) for building your code.
+
+## Getting Started for Development
+
+1. Clone or download a copy of this template to your development machine, if you haven't already cloned the entire repo.
+
+   ```
+   # cd ~/ Optional, your user directory is usually a good place to git clone to.
+   git clone git@github.com:looker-open-source/extension-examples.git
+   ```
+
+2. Navigate (`cd`) to the template directory on your system
+
+   ```
+   cd extension-examples/react/typescript/firestore
+   ```
+
+3. Install the dependencies with [Yarn](https://yarnpkg.com/).
+
+   ```
+   yarn install
+   ```
+
+   > You may need to update your Node version or use a [Node version manager](https://github.com/nvm-sh/nvm) to change your Node version.
+
+4) Start the development server
+
+   ```
+   yarn develop
+   ```
+
+   The extension is now running and serving the JavaScript locally at https://localhost:8080/bundle.js.
+
+5) Log in to Looker and create a new project.
+
+   This is found under **Develop** => **Manage LookML Projects** => **New LookML Project**.
+
+   Select "Blank Project" as your "Starting Point". This will create a new project with no files.
+
+   1. The extension folder has a `manifest.lkml` file.
+
+   Either drag & upload this file into your Looker project, or create a `manifest.lkml` with the same content. Change the `id`, `label`, or `url` as needed.
+
+   ```
+   project_name: "firestore"
+   application: firestore {
+    label: "Firestore Example"
+    url: "https://localhost:8080/bundle.js"
+    entitlements: {
+      core_api_methods: ["me"]
+    }
+   }
+   ```
+
+6. Create a `model` LookML file in your project. The name doesn't matter but the convention is to name it the same as the project— in this case, helloworld-js.
+
+- Add a connection in this model.
+- [Configure the model you created](https://docs.looker.com/data-modeling/getting-started/create-projects#configuring_a_model) so that it has access to the selected connection.
+  We do this because Looker permissions data access via models— In order to grant / limit access to an extension, it must be associated with a model.
+
+7. Connect the project to Git. This can be done in multiple ways:
+
+- Create a new repository on GitHub or a similar service, and follow the instructions to [connect your project to Git](https://docs.looker.com/data-modeling/getting-started/setting-up-git-connection)
+- A simpler but less powerful approach is to set up git with the "Bare" repository option which does not require connecting to an external Git Service.
+
+8. Commit the changes and deploy them to production through the Project UI.
+
+9. Reload the page and click the `Browse` dropdown menu. You will see the extension in the list.
+
+- The extension will load the JavaScript from the `url` provided in the `application` definition. By default, this is http://localhost:8080/bundle.js. If you change the port your server runs on in the package.json, you will need to also update it in the manifest.lkml.
+- Refreshing the extension page will bring in any new code changes from the extension template, although some changes will hot reload.
+
+## Extension Entitlements
+
+Entitlements are defined in the project manifest file for the extension.
+
+Resources required by the extension (Looker API methods for example) must be defined in entitlements. This extension uses the `me` api method, as such it is defined in the entitlements.
+
+## Deployment
+
+The process above describes how to run the extension for development. Once you're done developing and ready to deploy, the production version of the extension may be deployed as follows:
+
+1. In the extension project directory build the extension by running `yarn build`.
+2. Drag and drop the generated `dist/bundle.js` file into the Looker project interface
+3. Modify the `manifest.lkml` to use `file` instead of `url`:
+
+   ```
+   project_name: "firestore"
+   application: firestore {
+    label: "Firestore Example"
+    file: "bundle.js"
+    entitlements: {
+     core_api_methods: ["me"]
+    }
+   }
+   ```
+
+## Notes
+
+- Webpack's module splitting is not currently supported.
+- This template uses Looker's [component library](https://components.looker.com) and [styled components](https://styled-components.com/). Neither of these libraries are required, and you may remove and replace them with a component library of your own choice or simply build your UI from scratch.
+
+## Related Projects
+
+- [Looker Extension SDK React](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/extension-sdk-react)
+- [Looker Extension SDK](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/extension-sdk)
+- [Looker SDK](https://github.com/looker-open-source/sdk-codegen/tree/main/packages/sdk)
+- [Looker Embed SDK](https://github.com/looker-open-source/embed-sdk)
+- [Looker Components](https://components.looker.com/)
+- [Styled components](https://www.styled-components.com/docs)

react/typescript/firestore/babel.config.js

@@ -0,0 +1,68 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2022 Looker Data Sciences, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+module.exports = (api) => {
+  api.cache(true)
+
+  return {
+    presets: [
+      [
+        '@babel/env',
+        {
+          targets: {
+            esmodules: true,
+          },
+          modules: false,
+        },
+      ],
+      [
+        '@babel/preset-react',
+        {
+          development: process.env.BABEL_ENV !== 'build',
+        },
+      ],
+      '@babel/preset-typescript',
+    ],
+    env: {
+      build: {
+        ignore: [
+          '**/*.d.ts',
+          '**/*.test.js',
+          '**/*.test.jsx',
+          '**/*.test.ts',
+          '**/*.test.tsx',
+          '__snapshots__',
+          '__tests__',
+        ],
+      },
+    },
+    ignore: ['node_modules'],
+    plugins: [
+      '@babel/plugin-proposal-class-properties',
+      '@babel/plugin-proposal-object-rest-spread',
+      '@babel/plugin-transform-runtime',
+      'babel-plugin-styled-components',
+    ],
+  }
+}

react/typescript/firestore/jest.config.js

@@ -0,0 +1,59 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+const excludeNodeModuleExcept = require('babel-loader-exclude-node-modules-except')
+
+// Our own modules are built as esm to allow for tree shaking.
+const ownModules = [
+  '@looker/components-test-utils',
+  '@looker/components',
+  '@looker/icons',
+  '@looker/design-tokens',
+]
+
+const excludeNodeModulesExceptRegExp = excludeNodeModuleExcept([...ownModules])
+
+module.exports = {
+  automock: false,
+  moduleDirectories: ['./node_modules', './packages'],
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
+  moduleNameMapper: {},
+  restoreMocks: true,
+  testMatch: ['**/?(*.)(spec|test).(ts|js)?(x)'],
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': 'ts-jest',
+  },
+  transformIgnorePatterns: [
+    excludeNodeModulesExceptRegExp.toString().slice(1, -2),
+  ],
+  testPathIgnorePatterns: [],
+  globals: {
+    'ts-jest': {
+      isolatedModules: true,
+      diagnostics: false,
+    },
+  },
+}

react/typescript/firestore/manifest.lkml

@@ -0,0 +1,10 @@
+project_name: "firestore"
+
+application: firestore {
+  label: "Filestore Example"
+  url: "https://localhost:8080/bundle.js"
+  # file: "bundle.js
+  entitlements: {
+    core_api_methods: ["me"]
+  }
+}