Skip to content

Commit b4ae279

Browse files
curlyfriespleasecurlyfriesplease
committed
Introduce subpath entrypoints for optimized imports
1 parent 39b4dbc commit b4ae279

8 files changed

Lines changed: 164 additions & 98 deletions

File tree

‎README.md‎

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,50 @@ CR-CL has a dependency of Styled-components.
1515
$ yarn add @comicrelief/component-library
1616
```
1717

18-
#### Wrap your app with the ThemeProvider and crTheme
18+
#### Theming
19+
20+
Wrap your app with `ThemeProvider` and `crTheme`. For the smallest dependency graph, import from the `theme` entry (see [Subpath entrypoints](#subpath-entrypoints) below) instead of the package root.
21+
22+
```
23+
import { ThemeProvider, crTheme } from '@comicrelief/component-library/theme';
24+
```
25+
26+
The root import is still valid and exposes the same tokens:
27+
1928
```
2029
import { ThemeProvider, crTheme } from '@comicrelief/component-library';
2130
```
2231

23-
#### Import components
32+
#### Subpath entrypoints
33+
34+
The package exposes named entrypoints so you can import only the slice you need. Prefer these over the root barrel when you care about bundle size.
35+
36+
- **`@comicrelief/component-library/theme`** — `ThemeProvider`, `crTheme`, and theme tokens (`zIndex`, `allBreakpoints`, `spacing`, `containers`, `hideVisually`, `allowListed`, `animations`, …).
37+
38+
- **`@comicrelief/component-library/atoms`** — `Text`, `Link`, `Button`, `Input`, `Picture`, `Logo`, `Checkbox`, `RadioButton`, and the rest of the design-system atoms (see `src/components/Atoms` in this repo).
39+
40+
- **`@comicrelief/component-library/molecules`** — Molecules such as `Card`, `Box`, `HeroBanner`, `SingleMessage`, `Typeahead`, `InfoBanner`, and similar building blocks (not full site chrome such as the global header).
41+
42+
- **`@comicrelief/component-library/organisms`** — Larger UI: `Header`, `Header2025`, `Footer`, `Donate`, carousels, `MarketingPreferencesDS`, `DynamicGallery`, and other composed features.
43+
44+
Example: atoms + theme in a small app or route:
45+
46+
```
47+
import { crTheme, ThemeProvider } from '@comicrelief/component-library/theme';
48+
import { Text, Link, Button } from '@comicrelief/component-library/atoms';
49+
```
50+
51+
Example: a molecule and an organism in separate features:
52+
53+
```
54+
import { HeroBanner } from '@comicrelief/component-library/molecules';
55+
import { WYMDCarousel } from '@comicrelief/component-library/organisms';
56+
```
57+
58+
The root entry re-exports everything; use it when you want a single import path and are not optimizing for chunk size.
59+
2460
```
25-
import { HeroBanner } from '@comicrelief/component-library';
61+
import { crTheme, ThemeProvider, Text, DynamicGallery } from '@comicrelief/component-library';
2662
```
2763

2864
### Develop

‎package.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,36 @@
33
"author": "Comic Relief Engineering Team",
44
"version": "0.0.0-see.readme.for.semantic.release.process",
55
"main": "dist/index.js",
6+
"exports": {
7+
".": {
8+
"import": "./dist/index.js",
9+
"require": "./dist/index.js",
10+
"default": "./dist/index.js"
11+
},
12+
"./theme": {
13+
"import": "./dist/theme.js",
14+
"require": "./dist/theme.js",
15+
"default": "./dist/theme.js"
16+
},
17+
"./atoms": {
18+
"import": "./dist/atoms.js",
19+
"require": "./dist/atoms.js",
20+
"default": "./dist/atoms.js"
21+
},
22+
"./molecules": {
23+
"import": "./dist/molecules.js",
24+
"require": "./dist/molecules.js",
25+
"default": "./dist/molecules.js"
26+
},
27+
"./organisms": {
28+
"import": "./dist/organisms.js",
29+
"require": "./dist/organisms.js",
30+
"default": "./dist/organisms.js"
31+
},
32+
"./dist/*": "./dist/*",
33+
"./src/*": "./src/*",
34+
"./package.json": "./package.json"
35+
},
636
"license": "ISC",
737
"jest": {
838
"verbose": true,

‎src/atoms.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/* Atoms */
2+
export { default as Text } from './components/Atoms/Text/Text';
3+
export { default as Logo } from './components/Atoms/Logo/Logo';
4+
export { default as Picture } from './components/Atoms/Picture/Picture';
5+
export { default as Link } from './components/Atoms/Link/Link';
6+
export { default as Button } from './components/Atoms/Button/Button';
7+
export { default as RadioButton } from './components/Atoms/RadioButton/RadioButton';
8+
export { default as Checkbox } from './components/Atoms/Checkbox/Checkbox';
9+
export { default as Input } from './components/Atoms/Input/Input';
10+
export { default as Select } from './components/Atoms/Select/Select';
11+
export { default as TextArea } from './components/Atoms/TextArea/TextArea';
12+
export { default as RichText } from './components/Atoms/RichText/RichText';
13+
export { default as Pagination } from './components/Atoms/Pagination/Pagination';
14+
export { default as SocialIcons } from './components/Atoms/SocialIcons/SocialIcons';
15+
export { default as TextInputWithDropdown } from './components/Atoms/TextInputWithDropdown/TextInputWithDropdown';
16+
export { default as ErrorText } from './components/Atoms/ErrorText/ErrorText';
17+
export { default as InfoMessage } from './components/Atoms/InfoMessage/InfoMessage';
18+
export { default as Label } from './components/Atoms/Label/Label';
19+
export { default as ButtonWithStates } from './components/Atoms/ButtonWithStates/ButtonWithStates';
20+
export { default as Confetti } from './components/Atoms/Confetti/Confetti';
21+
export { default as AmbientVideo } from './components/Atoms/AmbientVideo/AmbientVideo';
22+
export { default as External } from './components/Atoms/Icons/External';
23+
export { default as Internal } from './components/Atoms/Icons/Internal';

‎src/index.js‎

Lines changed: 5 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,5 @@
1-
/* Theme */
2-
export { default as crTheme } from './theme/crTheme/theme';
3-
export { default as ThemeProvider } from './theme/ThemeProvider';
4-
5-
/* Utils */
6-
export { default as hideVisually } from './theme/shared/hideVisually';
7-
export { default as zIndex } from './theme/shared/zIndex';
8-
export { default as allowListed } from './utils/allowListed';
9-
export { default as spacing } from './theme/shared/spacing';
10-
export { default as allBreakpoints } from './theme/shared/allBreakpoints';
11-
export { default as containers } from './theme/shared/containers';
12-
export { logoRotateAnimation, springScaleAnimation } from './theme/shared/animations';
13-
14-
/* Atoms */
15-
export { default as Text } from './components/Atoms/Text/Text';
16-
export { default as Logo } from './components/Atoms/Logo/Logo';
17-
export { default as Picture } from './components/Atoms/Picture/Picture';
18-
export { default as Link } from './components/Atoms/Link/Link';
19-
export { default as Button } from './components/Atoms/Button/Button';
20-
export { default as RadioButton } from './components/Atoms/RadioButton/RadioButton';
21-
export { default as Checkbox } from './components/Atoms/Checkbox/Checkbox';
22-
export { default as Input } from './components/Atoms/Input/Input';
23-
export { default as Select } from './components/Atoms/Select/Select';
24-
export { default as TextArea } from './components/Atoms/TextArea/TextArea';
25-
export { default as RichText } from './components/Atoms/RichText/RichText';
26-
export { default as Pagination } from './components/Atoms/Pagination/Pagination';
27-
export { default as SocialIcons } from './components/Atoms/SocialIcons/SocialIcons';
28-
export { default as TextInputWithDropdown } from './components/Atoms/TextInputWithDropdown/TextInputWithDropdown';
29-
export { default as ErrorText } from './components/Atoms/ErrorText/ErrorText';
30-
export { default as InfoMessage } from './components/Atoms/InfoMessage/InfoMessage';
31-
export { default as Label } from './components/Atoms/Label/Label';
32-
export { default as ButtonWithStates } from './components/Atoms/ButtonWithStates/ButtonWithStates';
33-
export { default as Confetti } from './components/Atoms/Confetti/Confetti';
34-
export { default as AmbientVideo } from './components/Atoms/AmbientVideo/AmbientVideo';
35-
export { default as External } from './components/Atoms/Icons/External';
36-
export { default as Internal } from './components/Atoms/Icons/Internal';
37-
38-
/* Molecules */
39-
export { default as InfoBanner } from './components/Molecules/InfoBanner/InfoBanner';
40-
export { default as SingleMessage } from './components/Molecules/SingleMessage/SingleMessage';
41-
export { default as Card } from './components/Molecules/Card/Card';
42-
export { default as CardDs } from './components/Molecules/CardDs/CardDs';
43-
export { default as CTAMultiCard } from './components/Molecules/CTA/CTAMultiCard/CTAMultiCard';
44-
export { default as CTASingleCard } from './components/Molecules/CTA/CTASingleCard/CTASingleCard';
45-
export { default as Box } from './components/Molecules/Box/Box';
46-
export { default as ArticleTeaser } from './components/Molecules/ArticleTeaser/ArticleTeaser';
47-
export { default as Header } from './components/Organisms/Header/Header';
48-
export { default as Header2025 } from './components/Organisms/Header2025/Header2025';
49-
export { default as Donate } from './components/Organisms/Donate/Donate';
50-
export { default as DonateBanner } from './components/Organisms/DonateBanner/DonateBanner';
51-
export { default as DoubleCopy } from './components/Molecules/DoubleCopy/DoubleCopy';
52-
export { default as PartnerLink } from './components/Molecules/PartnerLink/PartnerLink';
53-
export { default as Footer } from './components/Organisms/Footer/Footer';
54-
export { default as FooterNew } from './components/Organisms/FooterNew/FooterNew';
55-
export { default as SearchResult } from './components/Molecules/SearchResult/SearchResult';
56-
export { default as SearchInput } from './components/Molecules/SearchInput/SearchInput';
57-
export { default as ShareButton } from './components/Molecules/ShareButton/ShareButton';
58-
export { default as VideoBanner } from './components/Molecules/VideoBanner/VideoBanner';
59-
export { default as Icon } from './components/Atoms/SocialIcons/Icon/Icon';
60-
export { default as Typeahead } from './components/Molecules/Typeahead/Typeahead';
61-
export { default as SchoolLookup } from './components/Molecules/SchoolLookup/SchoolLookup';
62-
export { default as SingleMessageDs } from './components/Molecules/SingleMessageDS/SingleMessageDs';
63-
export { default as Promo } from './components/Molecules/Promo/Promo';
64-
export { default as Accordion } from './components/Molecules/Accordion/Accordion';
65-
export { default as Countdown } from './components/Molecules/Countdown/Countdown';
66-
export { default as Banner } from './components/Molecules/Banner/Banner';
67-
export { default as Chip } from './components/Molecules/Chip/Chip';
68-
export { default as Descriptor } from './components/Molecules/Descriptor/Descriptor';
69-
export { default as Lookup } from './components/Molecules/Lookup/Lookup';
70-
export { default as SimpleSchoolLookup } from './components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup';
71-
export { default as LogoLinked } from './components/Molecules/LogoLinked/LogoLinked';
72-
export { default as HeroBanner } from './components/Molecules/HeroBanner/HeroBanner';
73-
export { default as PictureOrVideo } from './components/Molecules/PictureOrVideo/PictureOrVideo';
74-
export { default as QuoteSlice } from './components/Molecules/QuoteSlice/QuoteSlice';
75-
export { default as StatsSlice } from './components/Molecules/StatsSlice/StatsSlice';
76-
77-
/* Organisms */
78-
export {
79-
EmailSignUp,
80-
buildEsuValidationSchema,
81-
ESU_FIELDS
82-
} from './components/Organisms/EmailSignUp/_EmailSignUp';
83-
export { default as CookieBanner } from './components/Organisms/CookieBanner/CookieBanner';
84-
export { default as EmailBanner } from './components/Organisms/EmailBanner/EmailBanner';
85-
export { default as Membership } from './components/Organisms/Membership/Membership';
86-
export {
87-
MarketingPreferencesDS,
88-
setInitialValues,
89-
buildValidationSchema
90-
} from './components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS';
91-
export { default as ImpactSlider } from './components/Organisms/ImpactSlider/ImpactSlider';
92-
export { default as WYMDCarousel } from './components/Organisms/WYMDCarousel/WYMDCarousel';
93-
export { default as RichtextCarousel } from './components/Organisms/RichtextCarousel/RichtextCarousel';
94-
export { default as DynamicGallery } from './components/Organisms/DynamicGallery/DynamicGallery';
1+
// Re-exports all layers; use /atoms, /theme, /molecules, or /organisms to limit scope.
2+
export * from './theme';
3+
export * from './atoms';
4+
export * from './molecules';
5+
export * from './organisms';

‎src/molecules.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/* Molecules (smaller building blocks) */
2+
export { default as InfoBanner } from './components/Molecules/InfoBanner/InfoBanner';
3+
export { default as SingleMessage } from './components/Molecules/SingleMessage/SingleMessage';
4+
export { default as Card } from './components/Molecules/Card/Card';
5+
export { default as CardDs } from './components/Molecules/CardDs/CardDs';
6+
export { default as CTAMultiCard } from './components/Molecules/CTA/CTAMultiCard/CTAMultiCard';
7+
export { default as CTASingleCard } from './components/Molecules/CTA/CTASingleCard/CTASingleCard';
8+
export { default as Box } from './components/Molecules/Box/Box';
9+
export { default as ArticleTeaser } from './components/Molecules/ArticleTeaser/ArticleTeaser';
10+
export { default as DoubleCopy } from './components/Molecules/DoubleCopy/DoubleCopy';
11+
export { default as PartnerLink } from './components/Molecules/PartnerLink/PartnerLink';
12+
export { default as SearchResult } from './components/Molecules/SearchResult/SearchResult';
13+
export { default as SearchInput } from './components/Molecules/SearchInput/SearchInput';
14+
export { default as ShareButton } from './components/Molecules/ShareButton/ShareButton';
15+
export { default as VideoBanner } from './components/Molecules/VideoBanner/VideoBanner';
16+
export { default as Icon } from './components/Atoms/SocialIcons/Icon/Icon';
17+
export { default as Typeahead } from './components/Molecules/Typeahead/Typeahead';
18+
export { default as SchoolLookup } from './components/Molecules/SchoolLookup/SchoolLookup';
19+
export { default as SingleMessageDs } from './components/Molecules/SingleMessageDS/SingleMessageDs';
20+
export { default as Promo } from './components/Molecules/Promo/Promo';
21+
export { default as Accordion } from './components/Molecules/Accordion/Accordion';
22+
export { default as Countdown } from './components/Molecules/Countdown/Countdown';
23+
export { default as Banner } from './components/Molecules/Banner/Banner';
24+
export { default as Chip } from './components/Molecules/Chip/Chip';
25+
export { default as Descriptor } from './components/Molecules/Descriptor/Descriptor';
26+
export { default as Lookup } from './components/Molecules/Lookup/Lookup';
27+
export { default as SimpleSchoolLookup } from './components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup';
28+
export { default as LogoLinked } from './components/Molecules/LogoLinked/LogoLinked';
29+
export { default as HeroBanner } from './components/Molecules/HeroBanner/HeroBanner';
30+
export { default as PictureOrVideo } from './components/Molecules/PictureOrVideo/PictureOrVideo';
31+
export { default as QuoteSlice } from './components/Molecules/QuoteSlice/QuoteSlice';
32+
export { default as StatsSlice } from './components/Molecules/StatsSlice/StatsSlice';

‎src/organisms.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* Organisms (larger composed UI, often heavier dependencies) */
2+
export { default as Header } from './components/Organisms/Header/Header';
3+
export { default as Header2025 } from './components/Organisms/Header2025/Header2025';
4+
export { default as Donate } from './components/Organisms/Donate/Donate';
5+
export { default as DonateBanner } from './components/Organisms/DonateBanner/DonateBanner';
6+
export { default as Footer } from './components/Organisms/Footer/Footer';
7+
export { default as FooterNew } from './components/Organisms/FooterNew/FooterNew';
8+
export {
9+
EmailSignUp,
10+
buildEsuValidationSchema,
11+
ESU_FIELDS
12+
} from './components/Organisms/EmailSignUp/_EmailSignUp';
13+
export { default as CookieBanner } from './components/Organisms/CookieBanner/CookieBanner';
14+
export { default as EmailBanner } from './components/Organisms/EmailBanner/EmailBanner';
15+
export { default as Membership } from './components/Organisms/Membership/Membership';
16+
export {
17+
MarketingPreferencesDS,
18+
setInitialValues,
19+
buildValidationSchema
20+
} from './components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS';
21+
export { default as ImpactSlider } from './components/Organisms/ImpactSlider/ImpactSlider';
22+
export { default as WYMDCarousel } from './components/Organisms/WYMDCarousel/WYMDCarousel';
23+
export { default as RichtextCarousel } from './components/Organisms/RichtextCarousel/RichtextCarousel';
24+
export { default as DynamicGallery } from './components/Organisms/DynamicGallery/DynamicGallery';

‎src/theme.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* Theme + shared theme utils */
2+
export { default as crTheme } from './theme/crTheme/theme';
3+
export { default as ThemeProvider } from './theme/ThemeProvider';
4+
export { default as hideVisually } from './theme/shared/hideVisually';
5+
export { default as zIndex } from './theme/shared/zIndex';
6+
export { default as allowListed } from './utils/allowListed';
7+
export { default as spacing } from './theme/shared/spacing';
8+
export { default as allBreakpoints } from './theme/shared/allBreakpoints';
9+
export { default as containers } from './theme/shared/containers';
10+
export { logoRotateAnimation, springScaleAnimation } from './theme/shared/animations';

‎tests/hoc/shallowWithTheme.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import renderer from 'react-test-renderer';
33

4-
import { crTheme } from '../../src/index';
4+
import { crTheme } from '../../src/theme';
55
import ThemeProvider from '../../src/theme/ThemeProvider';
66

77
export default function renderWithTheme(component) {

0 commit comments

Comments
 (0)