Internal package structure in @kaggle/web and @kaggle/components

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/

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')
);

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';