Skip to content

Commit 3a11f29

Browse files
committed
Initial commit
0 parents  commit 3a11f29

File tree

2,021 files changed

+67541
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

2,021 files changed

+67541
-0
lines changed

.browserslistrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
[production]
2+
>0.2%
3+
not dead
4+
not op_mini all
5+
6+
[development]
7+
last 1 chrome version
8+
last 1 firefox version
9+
last 2 safari version

.editorconfig

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# EditorConfig helps developers define and maintain consistent
2+
# coding styles between different editors and IDEs
3+
# editorconfig.org
4+
5+
# This is the top-most .editorconfig file; do not search in parent directories.
6+
root = true
7+
8+
# All files.
9+
[*]
10+
indent_style = space
11+
indent_size = 2
12+
end_of_line = lf
13+
charset = utf-8
14+
trim_trailing_whitespace = true
15+
insert_final_newline = true
16+
17+
# Markdown.
18+
[*.md]
19+
trim_trailing_whitespace = false

.env

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

.eslintignore

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/coverage
2+
node_modules
3+
/build
4+
/dist
5+
/.pnp.js
6+
/.yarn
7+
/tsconfig.json
8+
/CHANGELOG.md
9+
/reports
10+
/storybook-static
11+
/widget-registry
12+
/public
13+
/src/apps/*/locales/compiledStrings
14+
/src/apps/*/locales/extractedStrings
15+
/adr-docs/public
16+
/adr-docs/config
17+
.cache
18+
.eslintrc.js
19+
postcss.config.js
20+
tailwind.config.js
21+
src/.jest-test-results.json

.eslintrc.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
module.exports = {
2+
parser: '@typescript-eslint/parser',
3+
parserOptions: {
4+
ecmaVersion: 2021,
5+
},
6+
extends: [
7+
'plugin:@typescript-eslint/recommended',
8+
'plugin:prettier/recommended',
9+
],
10+
overrides: [
11+
{
12+
files: ['**/*.stories.*'],
13+
rules: { 'import/no-anonymous-default-export': 'off' },
14+
},
15+
{
16+
files: ['src/apps/**/*.js'],
17+
rules: { '@typescript-eslint/no-var-requires': 'off' },
18+
},
19+
],
20+
plugins: ['formatjs'],
21+
rules: {
22+
'formatjs/no-offset': 'error',
23+
'formatjs/enforce-id': [
24+
'error',
25+
// Use interpolation pattern to force update translations after changes
26+
// to the default message.
27+
{ idInterpolationPattern: '[sha512:contenthash:base64:6]' },
28+
],
29+
},
30+
};

.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/.yarn/releases/** binary
2+
/.yarn/plugins/** binary

.gitignore

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
/storybook-static
3+
/reports
4+
5+
# dependencies
6+
/node_modules
7+
/.pnp
8+
.pnp.js
9+
10+
# testing
11+
/coverage
12+
13+
# production
14+
/build
15+
16+
# misc
17+
.DS_Store
18+
.env.local
19+
!/.tugboat/.env.local
20+
.env.development.local
21+
.env.test.local
22+
.env.production.local
23+
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
/.idea
29+
.jest-test-results.json
30+
*.swp
31+
/widget-registry
32+
33+
compiledStrings
34+
35+
/src/index.tsx
36+
/src/index.ts
37+
/src/index.jsx
38+
/src/index.js
39+
/src/index.css
40+
/src/index.scss
41+
42+
.vscode/
43+
44+
/dist
45+
46+
.yarn/*
47+
!.yarn/cache
48+
!.yarn/patches
49+
!.yarn/plugins
50+
!.yarn/releases
51+
!.yarn/sdks
52+
!.yarn/versions

.nvmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
18

.prettierignore

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/coverage
2+
node_modules
3+
/build
4+
/dist
5+
/.pnp.js
6+
/.yarn
7+
/tsconfig.json
8+
/website
9+
/storybook-static
10+
/reports
11+
/widget-registry
12+
/public
13+
/src/apps/*/locales/compiledStrings
14+
/src/apps/*/locales/extractedStrings
15+
/adr-docs/public
16+
.cache
17+
src/.jest-test-results.json

.prettierrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"printWidth": 80,
3+
"singleQuote": true,
4+
"trailingComma": "all"
5+
}
+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Meta } from '@storybook/addon-docs';
2+
import headerImg from './img/banner.jpg';
3+
4+
<Meta title="Documentation/Introduction" />
5+
6+
## Available widgets
7+
8+
- [Emoji Cards](/story/widgets-emoji-cards-widget--page): A widget to show a card for each emoji. This is a stock example widget you should delete from your registry.
9+
10+
<img src={headerImg} alt="Widget Registry" />
11+
12+
## What are widgets?
13+
14+
Widgets types are stand alone JavaScript applications ready to use in any
15+
publishing context. JavaScript developers create widgets in their own
16+
repository, so they can be syndicated and embedded in publishing
17+
platforms. These include popular CMS, static HTML, other JavaScript
18+
applications, etc. Build your digital strategy using widgets to maximize
19+
reuse of your development efforts. Widgets are designed to allow you to
20+
focus on your strategy rather than on development.
21+
22+
## Develop widgets
23+
24+
Widgets can be as simple as a personalized CTA, or as complex as a full
25+
embedded product catalog. Widgets are a powerful tool to build reactive
26+
applications that are rubber-stamped all across your digital properties.
27+
28+
### Configurable
29+
30+
Your widgets can accept external input. This can affect what the color
31+
scheme should be, what language should be used, what is the personalized
32+
text for the call-to-action button, or what data source to use to fecth
33+
for content. This allows you to maintain a single code base powering many
34+
variants without code duplication.
35+
36+
### i18n
37+
38+
Widgets are ready for internationalization. Both interface text and
39+
content can be expressed in your users' languages.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Meta } from '@storybook/addon-docs';
2+
import WidgetWorkflow from './img/widget-workflow.png';
3+
4+
<Meta title="Documentation/Widget Catalog" />
5+
6+
# Widget Catalog
7+
8+
The new registry compiler [`@js-widgets/webpack-cli`](https://www.github.com/js-widgets/webpack-cli) operates under very
9+
few assumptions on how your project is organized. With this we have the freedom to introduce a component library. We
10+
consider Storybook to be the best tool for this task.
11+
12+
The widget catalog becomes a product for both the stakeholder team and the development team. This aims to encourage
13+
early feedback and progress tracking.
14+
15+
## The Catalog for Stakeholders
16+
17+
The widget catalog allows stakeholders to browse the available widgets and interact with them. Among other things, they
18+
can click on the widget, change the language, provide alternative inputs, see the different states of a widget, etc.
19+
20+
One of the challenges for widget developers is to keep the catalog organized to avoid confusion. This is specially
21+
important since this product is also meant for non-technical actors. For this reason each widget in the widget catalog
22+
should contain a main story that for documentation purposes. This story is meant for stakeholders to validate, and
23+
evolve requirements on widgets. Each one of the **requirements** of the widget should be **represented and exemplified with
24+
embedded interactive stories**. These are contained in a `widget.stories.mdx` file at the root of each widget folder.
25+
26+
## A Widget Journey to the CMS
27+
28+
The following diagram aims to explain the processes and tools required for a JS component in the catalog until it is
29+
shown to the end users in the CMS.
30+
31+
<img src={WidgetWorkflow} alt="Widget Workflow" />

0 commit comments

Comments
 (0)