Skip to content

Instantly share code, notes, and snippets.

@majames

majames/NestedImportExample.tsx

Last active January 9, 2019 23:38
Show Gist options
  • Save majames/2c85f3e619da81d973a83e915b6dd1be to your computer and use it in GitHub Desktop.
Save majames/2c85f3e619da81d973a83e915b6dd1be to your computer and use it in GitHub Desktop.
Download ZIP
Internal package structure in @kaggle/web and @kaggle/components
Raw
directory-structure.md 
projects/
  components/
    src/
      index.ts <---- exports everything within the top-level team folders index.ts
      datasets/
        index.ts <---- public API exporting components that can be consumed by other teams, aliased via "@datasets"
        Uploader/
          Uploader.tsx
          Uploader.test.tsx <---- co-located story and test files describing the component
          Uploader.stories.tsx
        List/
      kernels/
        index.ts <---- public API exporting components that can be consumed by other teams, aliased via "@kernels"
      competitions/
      community/
      design/
  web/
    src/
      static/  <--- contains static resources used in the site
        images/
        fonts/
      datasets/
        components/ <---- contains all components used in the datasets web pages (that don't need to be consumed in @kaggle/web-old)
          index.ts  <---- public API exporting components that can be consumed by other teams, aliased via "@datasets"
          Selector/
        pages/
          listing/
            index.ts <--- entry point for the datasets listing page... will map to route http://kaggle.com/next/datasets/listing 
          dataset/
            index.ts <--- entry point for a given dataset page... will map to route http://kaggle.com/next/datasets/dataset/<dataset-id>
            home.ts  <--- route in dataset page "SPA" (think tab) backed by react router of similar
            data.ts
            activity.ts
            settings.ts
      kernels/
        components/
          index.ts
        pages/
          viewer/
          editor/
      competitions/
      community/
      design/
Raw
index.tsx
// Example, demonstrating how a web page is created in @kaggle/web
// File is located within: typescript/projects/web/src/datasets/pages/listing/index.ts
import { DatasetListing } from '@datasets'; // page specific component
import { Scaffold } from '@design'; // component which wraps page with site header and footer (used by most pages)
ReactDOM.render(
<Scaffold>
<DatasetListing />
</Scaffold>,
document.querySelector('body')
);
Raw
NestedImportExample.tsx
// Component deeply nested within the src/kernels/ folder
// For example, src/kernels/Editor/Sidebar/KernelsComponent/KernelsComponent.tsx
// TypeScript path mappings are used to map this import back to the root of the src directory (i.e. src/datasets/)
// This makes is easier for devs to "do the right thing" and only import dataset components that the team has agreed to support
import { DatasetUploader } from '@datasets';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment