Intentional imports.

Location as 'roles/access' is a pattern I'm exploring. It means that some 'folders' require more knowledge of the project than others to modify.

// tsconfig.json 

{
    "compilerOptions": {
        "paths": {
            "@/*": ["./*"]
        },
}

// Profit

import { Col, Row, Card, Grid } from '@/core';
import { Tag, Avatar } from '@/packages';
import { Page, Title, SpacerSection, HelveticaNeue } from '@/composed';
import { rangify } from '@/utils/arrays';

Code snippet hidden

Your screen is too small.

In a real app you will most likely have a 'features' folder with some defined structure that lives along side your design system.

// Physical location tells a story

composed
  Buttons 
    ButtonAccent.tsx
    ButtonError.tsx
  ...

core
  Card
    Card.tsx
  ...
  index.js
  types.d.ts

hooks
  UseBreakpoint
    UseBreakpoint.tsx
  ...

packages
  Alert
    Alert.tsx
  ...

styles
  colors.css
  dependencies.css
  reset.css
  tokens.css
  utils.css
  pages
    *.module.css

utils
  classname.ts
  ...

Code snippet hidden

Your screen is too small.