From ec997484c481d39ca524b255c73d1bb3e48c18fc Mon Sep 17 00:00:00 2001
From: Ryan Laurie <30528226+iethree@users.noreply.github.com>
Date: Thu, 30 Mar 2023 10:39:55 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=B1=20Remove=20`/=5Finternal`=20Direct?=
=?UTF-8?q?ory=20(#29463)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* remove _internal pages and resources
* remove internal jest config
---
docs/developers-guide/contributing.md | 2 +-
.../metabase/components/Breadcrumbs.info.js | 20 --
.../src/metabase/components/ButtonBar.info.js | 28 --
.../src/metabase/components/Calendar.info.js | 22 --
frontend/src/metabase/components/Card.info.js | 28 --
.../metabase/components/ClampedText.info.js | 24 --
.../CollapseSection/CollapseSection.info.js | 77 -----
.../src/metabase/components/DateTime.info.js | 18 --
.../metabase/components/EntityMenu.info.js | 124 --------
.../DimensionInfo/DimensionInfo.info.js | 99 -------
.../DimensionSemanticTypeLabel.info.js | 27 --
.../MetadataInfo/TableInfo/TableInfo.info.js | 30 --
.../TableLabel/TableLabel.info.js | 21 --
.../metabase/components/ModalContent.info.js | 29 --
.../components/Popover/TippyPopover.info.js | 123 --------
.../metabase/components/ProgressBar.info.js | 13 -
.../src/metabase/components/Select.info.js | 69 -----
.../components/StackedCheckBox.info.js | 62 ----
.../src/metabase/components/Timeline.info.js | 72 -----
.../components/TokenField/TokenField.info.js | 53 ----
.../components/UserAvatar/UserAvartar.info.js | 9 -
.../metabase/components/Visualization.info.js | 65 -----
.../components/type/PageHeading.info.js | 10 -
.../internal/components/EntitiesApp.jsx | 166 -----------
.../metabase/internal/components/Example.jsx | 33 ---
.../internal/components/Example.styled.tsx | 17 --
.../metabase/internal/components/Layout.jsx | 159 ----------
.../metabase/internal/components/Props.jsx | 36 ---
.../metabase/internal/lib/components-node.js | 14 -
.../internal/lib/components-webpack.js | 49 ----
.../metabase/internal/lib/scratch-context.js | 27 --
.../internal/pages/ComponentsPage.jsx | 87 ------
.../src/metabase/internal/pages/IconsPage.jsx | 63 ----
.../metabase/internal/pages/ModalsPage.jsx | 53 ----
.../internal/pages/ModalsPage.styled.tsx | 10 -
.../metabase/internal/pages/StaticVizPage.jsx | 274 ------------------
.../internal/pages/StaticVizPage.styled.tsx | 9 -
.../src/metabase/internal/pages/TypePage.jsx | 112 -------
.../internal/pages/TypePage.styled.tsx | 5 -
.../metabase/internal/pages/WelcomePage.jsx | 51 ----
.../internal/pages/WelcomePage.styled.tsx | 20 --
frontend/src/metabase/internal/routes.js | 70 -----
frontend/src/metabase/routes.jsx | 10 -
.../search/components/SearchResult.info.js | 91 ------
jest.unit.conf.json | 1 -
45 files changed, 1 insertion(+), 2381 deletions(-)
delete mode 100644 frontend/src/metabase/components/Breadcrumbs.info.js
delete mode 100644 frontend/src/metabase/components/ButtonBar.info.js
delete mode 100644 frontend/src/metabase/components/Calendar.info.js
delete mode 100644 frontend/src/metabase/components/Card.info.js
delete mode 100644 frontend/src/metabase/components/ClampedText.info.js
delete mode 100644 frontend/src/metabase/components/CollapseSection/CollapseSection.info.js
delete mode 100644 frontend/src/metabase/components/DateTime.info.js
delete mode 100644 frontend/src/metabase/components/EntityMenu.info.js
delete mode 100644 frontend/src/metabase/components/MetadataInfo/DimensionInfo/DimensionInfo.info.js
delete mode 100644 frontend/src/metabase/components/MetadataInfo/DimensionSemanticTypeLabel/DimensionSemanticTypeLabel.info.js
delete mode 100644 frontend/src/metabase/components/MetadataInfo/TableInfo/TableInfo.info.js
delete mode 100644 frontend/src/metabase/components/MetadataInfo/TableLabel/TableLabel.info.js
delete mode 100644 frontend/src/metabase/components/ModalContent.info.js
delete mode 100644 frontend/src/metabase/components/Popover/TippyPopover.info.js
delete mode 100644 frontend/src/metabase/components/ProgressBar.info.js
delete mode 100644 frontend/src/metabase/components/Select.info.js
delete mode 100644 frontend/src/metabase/components/StackedCheckBox.info.js
delete mode 100644 frontend/src/metabase/components/Timeline.info.js
delete mode 100644 frontend/src/metabase/components/TokenField/TokenField.info.js
delete mode 100644 frontend/src/metabase/components/UserAvatar/UserAvartar.info.js
delete mode 100644 frontend/src/metabase/components/Visualization.info.js
delete mode 100644 frontend/src/metabase/components/type/PageHeading.info.js
delete mode 100644 frontend/src/metabase/internal/components/EntitiesApp.jsx
delete mode 100644 frontend/src/metabase/internal/components/Example.jsx
delete mode 100644 frontend/src/metabase/internal/components/Example.styled.tsx
delete mode 100644 frontend/src/metabase/internal/components/Layout.jsx
delete mode 100644 frontend/src/metabase/internal/components/Props.jsx
delete mode 100644 frontend/src/metabase/internal/lib/components-node.js
delete mode 100644 frontend/src/metabase/internal/lib/components-webpack.js
delete mode 100644 frontend/src/metabase/internal/lib/scratch-context.js
delete mode 100644 frontend/src/metabase/internal/pages/ComponentsPage.jsx
delete mode 100644 frontend/src/metabase/internal/pages/IconsPage.jsx
delete mode 100644 frontend/src/metabase/internal/pages/ModalsPage.jsx
delete mode 100644 frontend/src/metabase/internal/pages/ModalsPage.styled.tsx
delete mode 100644 frontend/src/metabase/internal/pages/StaticVizPage.jsx
delete mode 100644 frontend/src/metabase/internal/pages/StaticVizPage.styled.tsx
delete mode 100644 frontend/src/metabase/internal/pages/TypePage.jsx
delete mode 100644 frontend/src/metabase/internal/pages/TypePage.styled.tsx
delete mode 100644 frontend/src/metabase/internal/pages/WelcomePage.jsx
delete mode 100644 frontend/src/metabase/internal/pages/WelcomePage.styled.tsx
delete mode 100644 frontend/src/metabase/internal/routes.js
delete mode 100644 frontend/src/metabase/search/components/SearchResult.info.js
diff --git a/docs/developers-guide/contributing.md b/docs/developers-guide/contributing.md
index 479475ef4b6..566c480dc8e 100644
--- a/docs/developers-guide/contributing.md
+++ b/docs/developers-guide/contributing.md
@@ -55,7 +55,7 @@ Features that are ready for design are tagged [Design Needed](https://github.com
Once a feature is tagged [Help Wanted](https://github.com/metabase/metabase/labels/.Help%20Wanted), it is considered ready to be built. A core team member (or you, awesomely helpful person that you are) can start working on it.
-If you're building something that users will see in Metabase, please refer to the Style Guide (found at `https://localhost:3000/_internal` while running the development environment to learn how and when to use various Metabase UI elements.
+If you're building something that users will see in Metabase, please refer to the Style Guide (found at `https://storybook.metabase.com`) to learn how and when to use various Metabase UI elements.
Once one or more people have started to work on a feature, it should be marked [In Progress](https://github.com/metabase/metabase/labels/.In%20Progress). Once there is a branch+some code, a pull request is opened, linked to the feature + any issues that were pulled together to inform the feature.
diff --git a/frontend/src/metabase/components/Breadcrumbs.info.js b/frontend/src/metabase/components/Breadcrumbs.info.js
deleted file mode 100644
index dc5ea8bf4ed..00000000000
--- a/frontend/src/metabase/components/Breadcrumbs.info.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import Breadcrumbs from "metabase/components/Breadcrumbs";
-
-export const component = Breadcrumbs;
-export const category = "navigation";
-
-export const description = `
-Breadcrumbs to help user get know where they are and to parent pages.
-`;
-
-const crumbs = [
- ["Hello", () => alert("action can be a function")],
- ["World", "/or a url"],
- ["Foo"],
-];
-
-export const examples = {
- default: <Breadcrumbs crumbs={crumbs} />,
- "sidebar variant": <Breadcrumbs crumbs={crumbs} inSidebar />,
-};
diff --git a/frontend/src/metabase/components/ButtonBar.info.js b/frontend/src/metabase/components/ButtonBar.info.js
deleted file mode 100644
index 3ca83179f9c..00000000000
--- a/frontend/src/metabase/components/ButtonBar.info.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import ButtonBar from "metabase/components/ButtonBar";
-import Button from "metabase/core/components/Button";
-
-export const component = ButtonBar;
-export const category = "layout";
-
-export const description = `
-ButtonBar is a layout with left, right, and center sections
-`;
-
-export const examples = {
- default: (
- <ButtonBar>
- <Button>Button</Button>
- </ButtonBar>
- ),
- "left and right": (
- <ButtonBar left={<Button>Left</Button>} right={<Button>Right</Button>} />
- ),
- "left, right, and center": (
- <ButtonBar
- left={<Button>Left</Button>}
- center={<Button>Center</Button>}
- right={<Button>Right</Button>}
- />
- ),
-};
diff --git a/frontend/src/metabase/components/Calendar.info.js b/frontend/src/metabase/components/Calendar.info.js
deleted file mode 100644
index d9c9831f128..00000000000
--- a/frontend/src/metabase/components/Calendar.info.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import moment from "moment-timezone";
-import Calendar from "./Calendar";
-
-export const component = Calendar;
-export const category = "pickers";
-
-export const description = `For when gregorian time is your need, a calendar is your friend indeed`;
-
-const onChange = () => ({});
-
-export const examples = {
- default: <Calendar onChange={onChange} />,
- "With a selected date": <Calendar onChange={onChange} selected={moment()} />,
- "With a date range": (
- <Calendar
- selected={moment()}
- selectedEnd={moment().add(10, "days")}
- onChange={onChange}
- />
- ),
-};
diff --git a/frontend/src/metabase/components/Card.info.js b/frontend/src/metabase/components/Card.info.js
deleted file mode 100644
index 15af44803e3..00000000000
--- a/frontend/src/metabase/components/Card.info.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import Card from "metabase/components/Card";
-export const component = Card;
-export const category = "layout";
-
-export const description = `
-A generic card component.
-`;
-
-const DemoContent = () => <div className="p4">Look, a card!</div>;
-
-export const examples = {
- normal: (
- <Card>
- <DemoContent />
- </Card>
- ),
- dark: (
- <Card dark>
- <DemoContent />
- </Card>
- ),
- hoverable: (
- <Card hoverable>
- <DemoContent />
- </Card>
- ),
-};
diff --git a/frontend/src/metabase/components/ClampedText.info.js b/frontend/src/metabase/components/ClampedText.info.js
deleted file mode 100644
index 5ee070b4893..00000000000
--- a/frontend/src/metabase/components/ClampedText.info.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import ClampedText from "metabase/components/ClampedText";
-
-export const component = ClampedText;
-export const category = "display";
-export const description = `
-Shows a set number of lines for a variable-length string
-`;
-
-const text =
- "Lorem ipsum \n \n dolor sit amet, consectetur adipiscing elit. Cras sit amet sagittis dui. Morbi in odio laoreet, finibus erat vitae, sagittis dui. Ut at mauris eget ligula volutpat pellentesque. Integer non faucibus urna. Maecenas faucibus ornare gravida. Aliquam orci tortor, ullamcorper et vehicula accumsan, malesuada in ipsum. Nullam auctor, justo et mattis fringilla, enim ipsum aliquet nunc, quis posuere odio erat in nulla. Suspendisse elementum, est et rutrum volutpat, purus mi placerat odio, sit amet blandit nulla diam at lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies placerat mollis. Curabitur vestibulum semper turpis, id cursus ex dignissim id. Cras efficitur sed ligula ac dictum. Curabitur hendrerit metus eget vestibulum bibendum. Cras nulla arcu, condimentum in rhoncus eu, interdum ut sapien. Cras sed molestie tellus, quis aliquet nunc. Nulla nec est eu est condimentum facilisis sit amet et ex.";
-
-export const examples = {
- Default: <ClampedText text={text} visibleLines={3} />,
- "No 'See more' button when all text visible": (
- <React.Fragment>
- <strong>A single line of text:</strong>
- <ClampedText text="foo" visibleLines={3} />
- <br />
- <strong>Many lines of text, but an unset `visibleLines` prop:</strong>
- <ClampedText text={text} />
- </React.Fragment>
- ),
-};
diff --git a/frontend/src/metabase/components/CollapseSection/CollapseSection.info.js b/frontend/src/metabase/components/CollapseSection/CollapseSection.info.js
deleted file mode 100644
index 8f1913cd025..00000000000
--- a/frontend/src/metabase/components/CollapseSection/CollapseSection.info.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from "react";
-import CollapseSection from "metabase/components/CollapseSection";
-import Icon from "metabase/components/Icon";
-
-export const component = CollapseSection;
-export const category = "layout";
-export const description = `
-A collapsible section with a clickable header.
-`;
-
-export const examples = {
- "Collapsed by default": (
- <CollapseSection header="Section header">
- foo foo foo foo foo foo foo foo
- </CollapseSection>
- ),
- "Settable collpased/expanded initial state": (
- <CollapseSection initialState="expanded" header="Foo">
- foo foo foo foo foo
- </CollapseSection>
- ),
- "Up-down icon variant": (
- <CollapseSection
- initialState="collapsed"
- header="Foo"
- iconVariant="up-down"
- >
- foo foo foo foo foo
- </CollapseSection>
- ),
- "Icon on the right": (
- <CollapseSection initialState="collapsed" header="Foo" iconPosition="right">
- foo foo foo foo foo
- </CollapseSection>
- ),
- "Components in header": (
- <CollapseSection
- header={
- <div>
- <Icon className="mr1" name="folder" size={12} />
- Component header
- </div>
- }
- >
- foo foo foo foo foo
- </CollapseSection>
- ),
- "Header and body classes": (
- <CollapseSection
- initialState="expanded"
- header="Section header"
- headerClass="text-brand flex-reverse justify-between p1 border-bottom"
- bodyClass="p2"
- >
- <div>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus neque
- tellus, mattis ut felis non, tempus mollis lacus. Vivamus nulla massa,
- accumsan non ligula eu, dapibus volutpat libero. Mauris sollicitudin
- dolor et ipsum fringilla auctor. Praesent et diam non nisi consequat
- ornare. Aenean et risus vel dolor maximus dapibus a id massa. Nam
- finibus quis libero eu finibus. Sed vehicula ac enim pellentesque
- luctus. Phasellus vehicula et ipsum porttitor mollis. Fusce blandit
- lacus a elit pretium, vestibulum porta nisi vehicula. Aliquam vel ligula
- enim. Orci varius natoque penatibus et magnis dis parturient montes,
- nascetur ridiculus mus. Pellentesque eget porta mi. Duis et lectus eget
- dolor convallis mollis. Sed commodo nec urna eget egestas.
- <br />
- <br />
- Mauris in ante sit amet ipsum tempus consequat. Curabitur auctor massa
- vitae dui auctor scelerisque. Donec in leo a libero commodo sodales.
- Integer egestas lacinia elit, vitae cursus sem mollis ut. Proin ut
- dapibus metus, vel accumsan justo. Pellentesque eget finibus elit, ut
- commodo felis. Ut non lacinia metus. Maecenas eget bibendum nisl.
- </div>
- </CollapseSection>
- ),
-};
diff --git a/frontend/src/metabase/components/DateTime.info.js b/frontend/src/metabase/components/DateTime.info.js
deleted file mode 100644
index 6a60841d014..00000000000
--- a/frontend/src/metabase/components/DateTime.info.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import DateTime, { DATE_TIME_UNITS } from "./DateTime";
-
-export const component = DateTime;
-export const description = `
-Formats date and time strings according to Metabase settings (/admin/settings/localization)
-`;
-
-export const category = "display";
-
-const now = new Date();
-
-export const examples = Object.fromEntries(
- DATE_TIME_UNITS.map(unit => [
- unit,
- <DateTime key={unit} value={now} unit={unit} />,
- ]),
-);
diff --git a/frontend/src/metabase/components/EntityMenu.info.js b/frontend/src/metabase/components/EntityMenu.info.js
deleted file mode 100644
index 6f8c9d8eca4..00000000000
--- a/frontend/src/metabase/components/EntityMenu.info.js
+++ /dev/null
@@ -1,124 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from "react";
-
-import { t } from "ttag";
-import EntityMenu from "metabase/components/EntityMenu";
-export const component = EntityMenu;
-export const category = "navigation";
-
-export const description = `
- A menu with various entity related options grouped by context.
-`;
-
-const DemoAlignRight = ({ children }) => (
- <div className="flex flex-full">
- <div className="flex align-center ml-auto">{children}</div>
- </div>
-);
-
-export const examples = {
- "Edit menu": (
- <DemoAlignRight>
- <EntityMenu
- triggerIcon="pencil"
- items={[
- {
- title: t`Edit this question`,
- icon: "edit_document",
- action: () => alert(t`Action type`),
- },
- { title: t`View revision history`, icon: "history", link: "/derp" },
- { title: t`Move`, icon: "move", action: () => alert(t`Move action`) },
- {
- title: t`Archive`,
- icon: "archive",
- action: () => alert(t`Archive action`),
- },
- ]}
- />
- </DemoAlignRight>
- ),
- "Share menu": (
- <DemoAlignRight>
- <EntityMenu
- triggerIcon="share"
- items={[
- {
- title: t`Add to dashboard`,
- icon: "add_to_dash",
- action: () => alert(t`Action type`),
- },
- { title: t`Download results`, icon: "download", link: "/download" },
- {
- title: t`Sharing and embedding`,
- icon: "embed",
- action: () => alert(t`Another action type`),
- },
- ]}
- />
- </DemoAlignRight>
- ),
- "More menu": (
- <DemoAlignRight>
- <EntityMenu
- triggerIcon="burger"
- items={[
- {
- title: t`Get alerts about this`,
- icon: "alert",
- action: () => alert(t`Get alerts about this`),
- },
- { title: t`View the SQL`, icon: "sql", link: "/download" },
- ]}
- />
- </DemoAlignRight>
- ),
- "Multiple menus": (
- <DemoAlignRight>
- <EntityMenu
- triggerIcon="pencil"
- items={[
- {
- title: t`Edit this question`,
- icon: "edit_document",
- action: () => alert(t`Action type`),
- },
- { title: t`View revision history`, icon: "history", link: "/derp" },
- { title: t`Move`, icon: "move", action: () => alert(t`Move action`) },
- {
- title: t`Archive`,
- icon: "archive",
- action: () => alert(t`Archive action`),
- },
- ]}
- />
- <EntityMenu
- triggerIcon="share"
- items={[
- {
- title: t`Add to dashboard`,
- icon: "add_to_dash",
- action: () => alert(t`Action type`),
- },
- { title: t`Download results`, icon: "download", link: "/download" },
- {
- title: t`Sharing and embedding`,
- icon: "embed",
- action: () => alert(t`Another action type`),
- },
- ]}
- />
- <EntityMenu
- triggerIcon="burger"
- items={[
- {
- title: t`Get alerts about this`,
- icon: "alert",
- action: () => alert(t`Get alerts about this`),
- },
- { title: t`View the SQL`, icon: "sql", link: "/download" },
- ]}
- />
- </DemoAlignRight>
- ),
-};
diff --git a/frontend/src/metabase/components/MetadataInfo/DimensionInfo/DimensionInfo.info.js b/frontend/src/metabase/components/MetadataInfo/DimensionInfo/DimensionInfo.info.js
deleted file mode 100644
index 6b6c95b81dc..00000000000
--- a/frontend/src/metabase/components/MetadataInfo/DimensionInfo/DimensionInfo.info.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import React from "react";
-
-import {
- PRODUCTS,
- ORDERS,
- metadata,
-} from "__support__/sample_database_fixture";
-import Card from "metabase/components/Card";
-import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
-import Button from "metabase/core/components/Button";
-import Dimension from "metabase-lib/Dimension";
-
-import DimensionInfo from "./DimensionInfo";
-
-const fieldDimension = Dimension.parseMBQL(
- ["field", PRODUCTS.CATEGORY.id, null],
- metadata,
-);
-fieldDimension.field().fingerprint = {
- global: {
- "distinct-count": 5,
- },
-};
-
-const numberDimension = Dimension.parseMBQL(
- ["field", ORDERS.TOTAL.id, null],
- metadata,
-);
-numberDimension.field().fingerprint = {
- type: {
- "type/Number": {
- avg: 3.5,
- min: 2,
- max: 5,
- },
- },
-};
-
-const dateDimension = Dimension.parseMBQL(
- ["field", PRODUCTS.CREATED_AT.id, null],
- metadata,
-);
-dateDimension.field().table = {
- database: {
- timezone: "America/Los_Angeles",
- },
-};
-dateDimension.field().fingerprint = {
- type: {
- "type/DateTime": {
- earliest: "2021-11-09T04:43:33.667Z",
- latest: "2021-12-09T04:43:33.667Z",
- },
- },
-};
-
-const expressionDimension = Dimension.parseMBQL(
- ["expression", Array(15).fill("Long display name").join(" -- ")],
- metadata,
-);
-
-const longDescriptionDimension = {
- displayName: () => "Foo",
- icon: () => "string",
- field: () => ({
- description: Array(50)
- .fill("Long description Long description")
- .join("\n "),
- }),
-};
-
-export const component = DimensionInfo;
-export const description =
- "A selection of information from a given Dimension instance, for use in some containing component";
-export const examples = {
- "with description": <DimensionInfo dimension={fieldDimension} />,
- "without description": <DimensionInfo dimension={expressionDimension} />,
- "long description": <DimensionInfo dimension={longDescriptionDimension} />,
- "in a card": (
- <Card>
- <DimensionInfo dimension={fieldDimension} />
- </Card>
- ),
- "in a popoover": (
- <PopoverWithTrigger triggerElement={<Button>click me</Button>}>
- <DimensionInfo dimension={longDescriptionDimension} />
- </PopoverWithTrigger>
- ),
- "with number fingerprint": (
- <Card>
- <DimensionInfo dimension={numberDimension} />
- </Card>
- ),
- "with date fingerprint": (
- <Card>
- <DimensionInfo dimension={dateDimension} />
- </Card>
- ),
-};
diff --git a/frontend/src/metabase/components/MetadataInfo/DimensionSemanticTypeLabel/DimensionSemanticTypeLabel.info.js b/frontend/src/metabase/components/MetadataInfo/DimensionSemanticTypeLabel/DimensionSemanticTypeLabel.info.js
deleted file mode 100644
index a2201373f4c..00000000000
--- a/frontend/src/metabase/components/MetadataInfo/DimensionSemanticTypeLabel/DimensionSemanticTypeLabel.info.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import styled from "@emotion/styled";
-
-import { PRODUCTS, metadata } from "__support__/sample_database_fixture";
-import Dimension from "metabase-lib/Dimension";
-
-import DimensionSemanticTypeLabel from "./DimensionSemanticTypeLabel";
-
-const fieldDimension = Dimension.parseMBQL(
- ["field", PRODUCTS.CATEGORY.id, null],
- metadata,
-);
-
-const BiggerDimensionSemanticTypeLabel = styled(DimensionSemanticTypeLabel)`
- font-size: 32px;
-`;
-
-export const component = DimensionSemanticTypeLabel;
-export const description = "A label for instances of Dimension";
-export const examples = {
- DimensionSemanticTypeLabel: (
- <DimensionSemanticTypeLabel dimension={fieldDimension} />
- ),
- "Bigger DimensionSemanticTypeLabel": (
- <BiggerDimensionSemanticTypeLabel dimension={fieldDimension} />
- ),
-};
diff --git a/frontend/src/metabase/components/MetadataInfo/TableInfo/TableInfo.info.js b/frontend/src/metabase/components/MetadataInfo/TableInfo/TableInfo.info.js
deleted file mode 100644
index 45619bcbf28..00000000000
--- a/frontend/src/metabase/components/MetadataInfo/TableInfo/TableInfo.info.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-
-import { PRODUCTS } from "__support__/sample_database_fixture";
-import Card from "metabase/components/Card";
-import PopoverWithTrigger from "metabase/components/PopoverWithTrigger";
-import Button from "metabase/core/components/Button";
-import Table from "metabase-lib/metadata/Table";
-
-import TableInfo from "./TableInfo";
-
-const table = new Table(PRODUCTS);
-const tableNoDescription = new Table({ id: 123, display_name: "Foo" });
-
-export const component = TableInfo;
-export const description =
- "A selection of information from a given Table instance, for use in some containing component";
-export const examples = {
- "with description": <TableInfo table={table} />,
- "without description": <TableInfo table={tableNoDescription} />,
- "in a card": (
- <Card>
- <TableInfo table={table} />
- </Card>
- ),
- "in a popoover": (
- <PopoverWithTrigger triggerElement={<Button>click me</Button>}>
- <TableInfo table={table} />
- </PopoverWithTrigger>
- ),
-};
diff --git a/frontend/src/metabase/components/MetadataInfo/TableLabel/TableLabel.info.js b/frontend/src/metabase/components/MetadataInfo/TableLabel/TableLabel.info.js
deleted file mode 100644
index 61a81bb6d1c..00000000000
--- a/frontend/src/metabase/components/MetadataInfo/TableLabel/TableLabel.info.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import styled from "@emotion/styled";
-
-import { PRODUCTS } from "__support__/sample_database_fixture";
-import Table from "metabase-lib/metadata/Table";
-
-import TableLabel from "./TableLabel";
-
-const table = new Table({
- ...PRODUCTS,
-});
-const BiggerTableLabel = styled(TableLabel)`
- font-size: 32px;
-`;
-
-export const component = TableLabel;
-export const description = "A label for instances of Table";
-export const examples = {
- TableLabel: <TableLabel table={table} />,
- "Bigger TableLabel": <BiggerTableLabel table={table} />,
-};
diff --git a/frontend/src/metabase/components/ModalContent.info.js b/frontend/src/metabase/components/ModalContent.info.js
deleted file mode 100644
index 172155f9285..00000000000
--- a/frontend/src/metabase/components/ModalContent.info.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from "react";
-import ModalContent from "metabase/components/ModalContent";
-import Button from "metabase/core/components/Button";
-
-export const component = ModalContent;
-export const category = "modal";
-
-export const description = `
-A standard modal content layout, including header with title and close button, body, and footer.
-`;
-
-const Modal = ({ children }) => (
- <div className="rounded bordered">{children}</div>
-);
-
-export const examples = {
- default: (
- <Modal>
- <ModalContent
- title="Do something crazy?"
- onClose={() => alert("close!")}
- footer={<Button danger>Ok</Button>}
- >
- Are you sure?
- </ModalContent>
- </Modal>
- ),
-};
diff --git a/frontend/src/metabase/components/Popover/TippyPopover.info.js b/frontend/src/metabase/components/Popover/TippyPopover.info.js
deleted file mode 100644
index 6d6a780d1d8..00000000000
--- a/frontend/src/metabase/components/Popover/TippyPopover.info.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from "react";
-import styled from "@emotion/styled";
-
-import TippyPopover from "./TippyPopover";
-
-export const component = TippyPopover;
-export const description = "Wrapper around react-popper";
-
-const Base = styled.div`
- border: 1px solid black;
- display: flex;
- align-items: center;
- justify-content: center;
-`;
-
-const PopoverBody = styled(Base)`
- border: none;
- height: 200px;
- width: 200px;
-`;
-
-const LongPopoverBody = styled(PopoverBody)`
- height: 600px;
-`;
-
-const LazyPopoverBody = styled(Base)`
- border: none;
- height: 200px;
- width: 200px;
- transition: opacity 1s;
- opacity: ${props => props.opacity};
-`;
-
-const PopoverTarget = styled(Base)`
- height: 100px;
- width: 100px;
-`;
-
-const content = <PopoverBody>popover body</PopoverBody>;
-const longContent = <LongPopoverBody>long popover body</LongPopoverBody>;
-const target = <PopoverTarget>popover target</PopoverTarget>;
-
-function LazyContentExample() {
- const [opacity, setOpacity] = React.useState(0.1);
- const timeout = React.useRef();
-
- React.useEffect(() => {
- timeout.current = setTimeout(() => {
- setOpacity(1);
- }, 1000);
-
- return () => {
- clearTimeout(timeout.current);
- };
- }, [opacity]);
-
- return <LazyPopoverBody opacity={opacity}>popover content</LazyPopoverBody>;
-}
-
-function VisiblePropExample() {
- const [visible, setVisible] = React.useState(true);
- return (
- <TippyPopover
- visible={visible}
- onHide={() => {
- setVisible(false);
- }}
- placement="left-end"
- content={content}
- >
- <div onClick={() => setVisible(true)}>{target}</div>
- </TippyPopover>
- );
-}
-
-export const examples = {
- "vertical placement": (
- <TippyPopover placement="top-start" content={content}>
- {target}
- </TippyPopover>
- ),
- "horizontal placement": (
- <TippyPopover placement="left-end" content={content}>
- {target}
- </TippyPopover>
- ),
- "lazy content rendering": (
- <React.Fragment>
- <TippyPopover placement="left-end" content={<LazyContentExample />}>
- <PopoverTarget>lazy target</PopoverTarget>
- </TippyPopover>
- <TippyPopover
- lazy={false}
- placement="left-end"
- content={<LazyContentExample />}
- >
- <PopoverTarget>not lazy target</PopoverTarget>
- </TippyPopover>
- </React.Fragment>
- ),
- "interactive disabled": (
- <TippyPopover interactive={false} placement="left-end" content={content}>
- {target}
- </TippyPopover>
- ),
- "control mode + handling of Esc press": <VisiblePropExample />,
- "flip disabled": (
- <TippyPopover flip={false} placement="bottom-start" content={content}>
- {target}
- </TippyPopover>
- ),
- sizeToFit: (
- <TippyPopover
- sizeToFit
- placement="bottom-start"
- visible
- content={longContent}
- >
- {target}
- </TippyPopover>
- ),
- extra_space: <div style={{ height: 400 }} />,
-};
diff --git a/frontend/src/metabase/components/ProgressBar.info.js b/frontend/src/metabase/components/ProgressBar.info.js
deleted file mode 100644
index 0bf23a217cd..00000000000
--- a/frontend/src/metabase/components/ProgressBar.info.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import ProgressBar from "metabase/components/ProgressBar";
-
-export const component = ProgressBar;
-export const category = "feedback";
-
-export const description = `
-Progress bar.
-`;
-export const examples = {
- Default: <ProgressBar percentage={0.75} />,
- Animated: <ProgressBar percentage={0.35} animated />,
-};
diff --git a/frontend/src/metabase/components/Select.info.js b/frontend/src/metabase/components/Select.info.js
deleted file mode 100644
index 422664b1fbe..00000000000
--- a/frontend/src/metabase/components/Select.info.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from "react";
-import { t } from "ttag";
-import _ from "underscore";
-import Select from "metabase/core/components/Select";
-
-export const component = Select;
-export const category = "input";
-
-export const description = t`
- A component used to make a selection
-`;
-
-import { field_semantic_types } from "metabase/lib/core";
-const EXAMPLE_SECTIONS = _.chain(field_semantic_types)
- .first(10)
- .groupBy("section")
- .pairs()
- .map(([section, items]) => ({
- name: section,
- items: items.map(item => ({
- name: item.name,
- value: item.id,
- icon:
- item.id === "type/FK"
- ? "connections"
- : item.id === "type/Name"
- ? "string"
- : item.id === "type/PK"
- ? "unknown"
- : null,
- description: item.description,
- })),
- }))
- .value();
-const EXAMPLE_OPTIONS = EXAMPLE_SECTIONS.map(section => section.items).flat();
-
-export const examples = {
- default: (
- <Select defaultValue={EXAMPLE_OPTIONS[0].value} options={EXAMPLE_OPTIONS} />
- ),
- search: (
- <Select
- defaultValue={EXAMPLE_OPTIONS[0].value}
- options={EXAMPLE_OPTIONS}
- searchProp="name"
- />
- ),
- sections: (
- <Select
- defaultValue={EXAMPLE_OPTIONS[0].value}
- sections={EXAMPLE_SECTIONS}
- />
- ),
- multiple: (
- <Select
- defaultValue={[EXAMPLE_OPTIONS[0].value, EXAMPLE_OPTIONS[3].value]}
- options={EXAMPLE_OPTIONS}
- multiple
- />
- ),
- kitchen_sink: (
- <Select
- defaultValue={[EXAMPLE_OPTIONS[0].value, EXAMPLE_OPTIONS[3].value]}
- sections={EXAMPLE_SECTIONS}
- multiple
- searchProp="name"
- />
- ),
-};
diff --git a/frontend/src/metabase/components/StackedCheckBox.info.js b/frontend/src/metabase/components/StackedCheckBox.info.js
deleted file mode 100644
index 36ca86bf5f3..00000000000
--- a/frontend/src/metabase/components/StackedCheckBox.info.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useState } from "react";
-import StackedCheckBox from "metabase/components/StackedCheckBox";
-
-export const component = StackedCheckBox;
-export const category = "input";
-
-export const description = `
-A stacked checkbox, representing "all" items.
-`;
-
-function StackedCheckBoxDemo({
- checked: isCheckedInitially = false,
- ...props
-}) {
- const [checked, setChecked] = useState(isCheckedInitially);
- return (
- <StackedCheckBox
- {...props}
- checked={checked}
- onChange={e => setChecked(e.target.checked)}
- />
- );
-}
-
-const rowStyle = {
- display: "flex",
- alignItems: "center",
- justifyContent: "space-around",
-};
-
-export const examples = {
- Default: <StackedCheckBoxDemo />,
- Label: (
- <div>
- <StackedCheckBoxDemo label="Confirm Stuff" />
- <br />
- <StackedCheckBoxDemo label={<h3>Custom element label</h3>} />
- </div>
- ),
- Disabled: (
- <div>
- <StackedCheckBoxDemo disabled />
- <br />
- <StackedCheckBoxDemo label="Confirm Stuff" disabled checked />
- </div>
- ),
- Sizing: (
- <div style={rowStyle}>
- {[10, 12, 14, 16, 18, 20, 24].map(size => (
- <StackedCheckBoxDemo key={size} checked size={size} />
- ))}
- </div>
- ),
- Colors: (
- <div style={rowStyle}>
- {["accent1", "accent2", "accent3", "accent4"].map(color => (
- <StackedCheckBoxDemo key={color} checked checkedColor={color} />
- ))}
- </div>
- ),
-};
diff --git a/frontend/src/metabase/components/Timeline.info.js b/frontend/src/metabase/components/Timeline.info.js
deleted file mode 100644
index 44bdb8bfc87..00000000000
--- a/frontend/src/metabase/components/Timeline.info.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from "react";
-import moment from "moment-timezone";
-import styled from "@emotion/styled";
-
-import Timeline from "metabase/components/Timeline";
-import { color } from "metabase/lib/colors";
-
-export const component = Timeline;
-export const category = "display";
-
-export const description = `
-A component for showing events in descending order.
-`;
-
-const Container = styled.div`
- line-height: 1.5;
- width: 350px;
- border: 1px dashed ${color("bg-dark")};
- border-radius: 0.5rem;
- padding: 1rem;
-`;
-
-const items = [
- {
- icon: "verified",
- title: "John Someone verified this",
- description: "idk lol",
- timestamp: moment().subtract(1, "day").valueOf(),
- numComments: 5,
- },
- {
- icon: "pencil",
- title: "Foo edited this",
- description: "Did a thing.",
- timestamp: moment().subtract(1, "week").valueOf(),
- },
- {
- icon: "warning_colorized",
- title: "Someone McSomeone thinks something looks wrong",
- description:
- "Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. \nUh oh that's not correct. \nUh oh that's not correct. \nUh oh that's not correct. \nUh oh that's not correct. \nUh oh that's not correct. \nUh oh that's not correct. \nUh oh that's not correct. \nUh oh that's not correct. \nUh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not",
- timestamp: moment().subtract(2, "month").valueOf(),
- },
- {
- icon: "clarification",
- title: "Someone is confused",
- description:
- "Something something something something something something something something something something something something?",
- timestamp: moment().subtract(1, "year").valueOf(),
- numComments: 123,
- },
-];
-
-function renderFooter(item) {
- return item.numComments ? (
- <a
- href="/_internal/components/timeline"
- className="text-underline"
- >{`${item.numComments} comments`}</a>
- ) : (
- ""
- );
-}
-
-export const examples = {
- "Constrained width": (
- <Container>
- <Timeline items={items} />
- </Container>
- ),
- "Optional footer": <Timeline items={items} renderFooter={renderFooter} />,
-};
diff --git a/frontend/src/metabase/components/TokenField/TokenField.info.js b/frontend/src/metabase/components/TokenField/TokenField.info.js
deleted file mode 100644
index f17af6ce633..00000000000
--- a/frontend/src/metabase/components/TokenField/TokenField.info.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from "react";
-import TokenField from "metabase/components/TokenField";
-
-export const component = TokenField;
-export const category = "pickers";
-
-export const description = `
-Token field picker with searching
-`;
-
-class TokenFieldWithStateAndDefaults extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- value: props.value || [],
- };
- }
- render() {
- return (
- <TokenField
- value={this.state.value}
- options={[]}
- onChange={value => this.setState({ value })}
- multi
- valueKey={option => option}
- labelKey={option => option}
- layoutRenderer={({ valuesList, optionsList }) => (
- <div>
- {valuesList}
- {optionsList}
- </div>
- )}
- {...this.props}
- />
- );
- }
-}
-
-export const examples = {
- "": (
- <TokenFieldWithStateAndDefaults
- options={["Doohickey", "Gadget", "Gizmo", "Widget"]}
- />
- ),
- updateOnInputChange: (
- <TokenFieldWithStateAndDefaults
- options={["Doohickey", "Gadget", "Gizmo", "Widget"]}
- updateOnInputChange
- parseFreeformValue={value => value}
- />
- ),
-};
diff --git a/frontend/src/metabase/components/UserAvatar/UserAvartar.info.js b/frontend/src/metabase/components/UserAvatar/UserAvartar.info.js
deleted file mode 100644
index 83541cdc997..00000000000
--- a/frontend/src/metabase/components/UserAvatar/UserAvartar.info.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-import UserAvatar from "metabase/components/UserAvatar";
-
-export const component = UserAvatar;
-export const category = "display";
-
-export const examples = {
- "": <UserAvatar />,
-};
diff --git a/frontend/src/metabase/components/Visualization.info.js b/frontend/src/metabase/components/Visualization.info.js
deleted file mode 100644
index b652587c6d0..00000000000
--- a/frontend/src/metabase/components/Visualization.info.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react";
-import Visualization from "metabase/visualizations/components/Visualization";
-
-export const component = Visualization;
-
-export const category = "visualization";
-
-export const description = `
-A component to render a Metabase visualization
-`;
-
-const PROPS = {
- style: {
- width: 640,
- height: 480,
- },
-};
-
-const DATA = {
- rows: [
- ["a", 1],
- ["b", 2],
- ["c", 3],
- ],
- cols: [
- { name: "foo", display_name: "Foo", base_type: "type/Text" },
- { name: "bar", display_name: "Bar", base_type: "type/Number" },
- ],
-};
-
-export const examples = {
- Scalar: (
- <Visualization
- {...PROPS}
- rawSeries={[
- {
- card: { display: "scalar" },
- data: { rows: [[1]], cols: [{ name: "x" }] },
- },
- ]}
- />
- ),
- Table: (
- <Visualization
- {...PROPS}
- rawSeries={[
- {
- card: { display: "table" },
- data: DATA,
- },
- ]}
- />
- ),
- Bar: (
- <Visualization
- {...PROPS}
- rawSeries={[
- {
- card: { display: "bar" },
- data: DATA,
- },
- ]}
- />
- ),
-};
diff --git a/frontend/src/metabase/components/type/PageHeading.info.js b/frontend/src/metabase/components/type/PageHeading.info.js
deleted file mode 100644
index d26d9a392cb..00000000000
--- a/frontend/src/metabase/components/type/PageHeading.info.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import PageHeading from "metabase/components/type/PageHeading";
-
-export const component = PageHeading;
-
-export const description = `Page heading component.`;
-
-export const examples = {
- normal: <PageHeading>Hello World</PageHeading>,
-};
diff --git a/frontend/src/metabase/internal/components/EntitiesApp.jsx b/frontend/src/metabase/internal/components/EntitiesApp.jsx
deleted file mode 100644
index 4ccd4b2e4d9..00000000000
--- a/frontend/src/metabase/internal/components/EntitiesApp.jsx
+++ /dev/null
@@ -1,166 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from "react";
-import { Route, IndexRoute } from "react-router";
-import { connect } from "react-redux";
-import { push } from "react-router-redux";
-
-import { List, WindowScroller } from "react-virtualized";
-import { capitalize } from "metabase/lib/formatting";
-
-import { entities as entityDefs } from "metabase/redux/entities";
-
-import Button from "metabase/core/components/Button";
-import Confirm from "metabase/components/Confirm";
-import Link from "metabase/core/components/Link";
-
-import EntityListLoader from "metabase/entities/containers/EntityListLoader";
-import EntityObjectLoader from "metabase/entities/containers/EntityObjectLoader";
-import EntityForm from "metabase/entities/containers/EntityForm";
-
-const withPush = ComposedComponent =>
- connect(null, { push })(ComposedComponent);
-
-export default class EntitiesApp extends React.Component {
- render() {
- return (
- <div className="p2">
- {Object.values(entityDefs).map(entityDef => (
- <div key={entityDef.name} className="mb1">
- <Link to={`/_internal/entities/${entityDef.name}`} className="link">
- {capitalize(entityDef.name)}
- </Link>
- </div>
- ))}
- </div>
- );
- }
-}
-
-const EntityListApp = ({ params: { entityType } }) => (
- <EntityListLoader entityType={entityType} wrapped>
- {({ list }) => (
- <div className="p2">
- <h2 className="pb2">{capitalize(entityType)}</h2>
- <WindowScroller>
- {({ height, isScrolling, registerChild, scrollTop }) => (
- <List
- ref={registerChild}
- autoHeight
- height={height}
- isScrolling={isScrolling}
- rowCount={list.length}
- rowHeight={22}
- width={200}
- rowRenderer={({ index, key, style }) => (
- <div key={key} style={style} className="text-ellipsis">
- <Link
- className="text-nowrap link"
- to={`/_internal/entities/${entityType}/${list[index].id}`}
- >
- {list[index].getName()}
- </Link>
- </div>
- )}
- scrollTop={scrollTop}
- />
- )}
- </WindowScroller>
- <div className="my2">
- <Link to={`/_internal/entities/${entityType}/create`}>
- <Button>Create</Button>
- </Link>
- </div>
- </div>
- )}
- </EntityListLoader>
-);
-
-const EntityObjectApp = ({ params: { entityType, entityId }, push }) => (
- <EntityObjectLoader entityType={entityType} entityId={entityId}>
- {({ object, remove }) => (
- <div className="p2">
- <h2 className="pb2">{object.name}</h2>
- <table className="Table">
- <tbody>
- {Object.entries(object).map(([key, value]) => (
- <tr key={key}>
- <td>{key}</td>
- <td>
- {typeof value === "number" || typeof value === "string" ? (
- value
- ) : (
- <pre style={{ margin: 0 }}>
- {JSON.stringify(value, null, 2)}
- </pre>
- )}
- </td>
- </tr>
- ))}
- </tbody>
- </table>
- <div className="my2">
- <Link to={`/_internal/entities/${entityType}/${object.id}/edit`}>
- <Button className="mr1">Edit</Button>
- </Link>
- <Confirm
- title="Delete this?"
- action={async () => {
- await remove();
- push(`/_internal/entities/${entityType}`);
- }}
- >
- <Button warning>Delete</Button>
- </Confirm>
- </div>
- </div>
- )}
- </EntityObjectLoader>
-);
-
-const EntityObjectCreateApp = ({ params: { entityType }, push }) => (
- <EntityForm
- className="p2 full"
- entityType={entityType}
- onSaved={({ id }) => push(`/_internal/entities/${entityType}/${id}`)}
- />
-);
-const EntityObjectEditApp = ({ params: { entityType, entityId }, push }) => (
- <EntityObjectLoader entityType={entityType} entityId={entityId}>
- {({ object }) =>
- object ? (
- <EntityForm
- className="p2 full"
- entityType={entityType}
- entityObject={object}
- onSaved={({ id }) => push(`/_internal/entities/${entityType}/${id}`)}
- />
- ) : null
- }
- </EntityObjectLoader>
-);
-
-const EntitySidebarLayout = ({ params, children }) => (
- <div className="flex flex-full">
- <div className="border-right flex-no-shrink">
- <EntityListApp params={params} />
- </div>
- <div className="flex-full">{children}</div>
- </div>
-);
-
-EntitiesApp.routes = (
- <Route path="entities">
- <IndexRoute component={EntitiesApp} />
- <Route path=":entityType">
- <IndexRoute component={EntityListApp} />,
- <Route component={EntitySidebarLayout}>
- <Route path="create" component={withPush(EntityObjectCreateApp)} />,
- <Route path=":entityId" component={withPush(EntityObjectApp)} />,
- <Route
- path=":entityId/edit"
- component={withPush(EntityObjectEditApp)}
- />
- </Route>
- </Route>
- </Route>
-);
diff --git a/frontend/src/metabase/internal/components/Example.jsx b/frontend/src/metabase/internal/components/Example.jsx
deleted file mode 100644
index a77520700b3..00000000000
--- a/frontend/src/metabase/internal/components/Example.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from "react";
-import reactElementToJSXString from "react-element-to-jsx-string";
-
-import CopyButton from "metabase/components/CopyButton";
-import Label from "metabase/components/type/Label";
-import Card from "metabase/components/Card";
-import { ExampleContent, ExampleFooter, ExampleRoot } from "./Example.styled";
-
-const Example = ({ children }) => {
- const code = reactElementToJSXString(children);
- return (
- <ExampleRoot>
- <Label color="medium">Example</Label>
- <Card>
- <ExampleContent>{children}</ExampleContent>
- <ExampleFooter>
- <div style={{ position: "absolute", top: "16px", right: "16px" }}>
- <CopyButton
- className="ml1 text-brand-hover cursor-pointer"
- value={code}
- />
- </div>
- <pre className="overflow-auto">
- <code>{code}</code>
- </pre>
- </ExampleFooter>
- </Card>
- </ExampleRoot>
- );
-};
-
-export default Example;
diff --git a/frontend/src/metabase/internal/components/Example.styled.tsx b/frontend/src/metabase/internal/components/Example.styled.tsx
deleted file mode 100644
index 33d853f3977..00000000000
--- a/frontend/src/metabase/internal/components/Example.styled.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from "@emotion/styled";
-import { color } from "metabase/lib/colors";
-
-export const ExampleRoot = styled.div`
- margin: 2px 0;
- width: 100%;
-`;
-
-export const ExampleContent = styled.div`
- padding: 1rem;
- border-bottom: 1px solid ${color("border")};
-`;
-
-export const ExampleFooter = styled.div`
- position: relative;
- padding: 1rem;
-`;
diff --git a/frontend/src/metabase/internal/components/Layout.jsx b/frontend/src/metabase/internal/components/Layout.jsx
deleted file mode 100644
index 89e71248085..00000000000
--- a/frontend/src/metabase/internal/components/Layout.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from "react";
-import fitViewport from "metabase/hoc/FitViewPort";
-import Link from "metabase/core/components/Link";
-
-import LogoIcon from "metabase/components/LogoIcon";
-
-import Label from "metabase/components/type/Label";
-import Subhead from "metabase/components/type/Subhead";
-
-/*
- TODO - remove this in favor of explicit pages and imports until we can move to a static generator
-*/
-
-export const CATEGORIES = {
- layout: "Layout",
- input: "Input",
- display: "Data display",
- pickers: "Pickers",
- navigation: "Navigation",
- feedback: "Feedback",
- modal: "Modal",
- form: "Form",
- visualization: "Visualizations",
- search: "Search",
-};
-
-import { slugify } from "metabase/lib/formatting";
-import COMPONENTS from "../lib/components-webpack";
-
-const req = require.context(
- "metabase/internal/components",
- true,
- /(\w+)App.jsx$/,
-);
-
-const PAGES = {};
-for (const key of req.keys()) {
- const name = key.match(/(\w+)App.jsx$/)[1];
- PAGES[name] = req(key).default;
-}
-
-/* TODO - this kind of stuff to populate the components should live in a "Container" as if it were redux state */
-function getComponentName(component) {
- return (
- (component && (component.displayName || component.name)) || "[Unknown]"
- );
-}
-function getComponentSlug(component) {
- return slugify(getComponentName(component));
-}
-
-/* END_TODO */
-
-/* TODO - refactor this to use styled components */
-export const FixedPane = ({ children, width = 320 }) => (
- <div
- className="fixed left top bottom flex flex-column bg-white border-right"
- style={{ width }}
- >
- {children}
- </div>
-);
-
-const Header = () => (
- <Link
- className="link flex align-center border-bottom px4 py3"
- to="/_internal"
- >
- <LogoIcon />
- <Subhead ml={2} color="inherit">
- Styleguide
- </Subhead>
- </Link>
-);
-
-const IndentedList = ({ children }) => <ol className="ml2">{children}</ol>;
-
-const ComponentItem = ({ component }) => {
- return (
- <li>
- <Link
- to={`/_internal/components/${getComponentSlug(component)}`}
- className="link"
- >
- <Label color="inherit">{getComponentName(component)}</Label>
- </Link>
- </li>
- );
-};
-
-export const InternalLayout = fitViewport(({ children }) => {
- return (
- <div>
- <FixedPane>
- <Header />
- <ul className="px4 py2 scroll-y">
- <li>
- <Link className="link" to={"/_internal/type"}>
- <Label>Type</Label>
- </Link>
- </li>
- <li>
- <Link className="link" to={"/_internal/icons"}>
- <Label>Icons</Label>
- </Link>
- </li>
- <li>
- <Link className="link" to={"/_internal/modals"}>
- <Label>Modals</Label>
- </Link>
- </li>
- <li>
- <Link className="link" to={"/_internal/static-viz"}>
- <Label>Static Visualizations</Label>
- </Link>
- </li>
- <li className="my3">
- Components
- <IndentedList>
- {Object.keys(CATEGORIES).map(category => (
- <li key={category}>
- <Label>{CATEGORIES[category]}</Label>
- <IndentedList>
- {COMPONENTS.filter(
- c => c.category && c.category === category,
- ).map(({ component }, index) => (
- <ComponentItem key={index} component={component} />
- ))}
- </IndentedList>
- </li>
- ))}
- <li>
- <Label>Other</Label>
- <IndentedList>
- {COMPONENTS.filter(c => !c.category).map(
- ({ component }, index) => (
- <ComponentItem key={index} component={component} />
- ),
- )}
- </IndentedList>
- </li>
- </IndentedList>
- </li>
- {Object.keys(PAGES).map(name => (
- <li key={name}>
- <Link className="link" to={"/_internal/" + name.toLowerCase()}>
- {name}
- </Link>
- </li>
- ))}
- </ul>
- </FixedPane>
- <div style={{ marginLeft: 320 }}>
- <div className="wrapper">{children}</div>
- </div>
- </div>
- );
-});
diff --git a/frontend/src/metabase/internal/components/Props.jsx b/frontend/src/metabase/internal/components/Props.jsx
deleted file mode 100644
index 11839d5b4d3..00000000000
--- a/frontend/src/metabase/internal/components/Props.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from "react";
-
-const Props = ({ of }) => {
- const component = of;
- return (
- <table className="Table">
- <thead>
- <tr>
- <th>Name</th>
- <th>Type</th>
- <th>Default</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- {Object.keys(component.propTypes).map(prop => {
- return (
- <tr key={prop}>
- <td>{prop}</td>
- <td></td>
- <td>
- {component.defaultProps &&
- component.defaultProps[prop] !== undefined
- ? JSON.stringify(component.defaultProps[prop])
- : ""}
- </td>
- </tr>
- );
- })}
- </tbody>
- </table>
- );
-};
-
-export default Props;
diff --git a/frontend/src/metabase/internal/lib/components-node.js b/frontend/src/metabase/internal/lib/components-node.js
deleted file mode 100644
index fc7420f9972..00000000000
--- a/frontend/src/metabase/internal/lib/components-node.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/*eslint-env node */
-
-import fs from "fs";
-import path from "path";
-
-const normalizedPath = path.join(__dirname, "..", "..", "components");
-
-export default fs
- .readdirSync(normalizedPath)
- .filter(file => /\.info\.js$/.test(file))
- .map(file => ({
- filename: file.replace(/\.info\.js$/, ""),
- ...require(path.join(normalizedPath, file)),
- }));
diff --git a/frontend/src/metabase/internal/lib/components-webpack.js b/frontend/src/metabase/internal/lib/components-webpack.js
deleted file mode 100644
index 09d3b7b8adc..00000000000
--- a/frontend/src/metabase/internal/lib/components-webpack.js
+++ /dev/null
@@ -1,49 +0,0 @@
-// get all the jsx (component) files in the main components directory
-const coreComponents = require.context("metabase/components", true, /\.(jsx)$/);
-
-// import modules with .info.js in /components (http://stackoverflow.com/a/31770875)
-const documentedComponents = require.context(
- "metabase/components",
- true,
- // only match files that have .info.js
- /^(.*\.info\.(js$))[^.]*$/im,
-);
-
-const documentedContainers = require.context(
- "metabase/containers",
- true,
- // only match files that have .info.js
- /^(.*\.info\.(js$))[^.]*$/im,
-);
-
-function getComponents(req) {
- return req
- .keys()
- .map(key => Object.assign({}, req(key), { showExample: true }));
-}
-
-const searchComponents = require.context(
- "metabase/search/components",
- true,
- // only match files that have .info.js
- /^(.*\.info\.(js$))[^.]*$/im,
-);
-
-const guideComponents = [
- ...getComponents(documentedComponents),
- ...getComponents(documentedContainers),
- ...getComponents(searchComponents),
-];
-
-// we'll consider all containers and components with .info.js files to be "documented" in some form
-const documented = getComponents(documentedComponents).length;
-
-const total = getComponents(coreComponents).length;
-
-export const stats = {
- total,
- documented,
- ratio: documented / total,
-};
-
-export default guideComponents;
diff --git a/frontend/src/metabase/internal/lib/scratch-context.js b/frontend/src/metabase/internal/lib/scratch-context.js
deleted file mode 100644
index 5988253a0c7..00000000000
--- a/frontend/src/metabase/internal/lib/scratch-context.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import styled from "@emotion/styled";
-import * as systemExports from "styled-system";
-import colors, * as colorsExports from "metabase/lib/colors";
-import * as entities from "metabase/entities";
-import { capitalize } from "metabase/lib/formatting";
-import COMPONENTS from "./components-webpack";
-
-const context = {
- ...systemExports,
- ...colorsExports,
- React,
- styled,
- colors,
-};
-
-// components with .info.js files
-for (const { component } of COMPONENTS) {
- context[component.displayName || component.name] = component;
-}
-
-// Metabase's entities, capitalized
-for (const [name, entity] of Object.entries(entities)) {
- context[capitalize(name)] = entity;
-}
-
-export default context;
diff --git a/frontend/src/metabase/internal/pages/ComponentsPage.jsx b/frontend/src/metabase/internal/pages/ComponentsPage.jsx
deleted file mode 100644
index bf78ee36fb6..00000000000
--- a/frontend/src/metabase/internal/pages/ComponentsPage.jsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { Component } from "react";
-import { Link } from "react-router";
-
-import { slugify } from "metabase/lib/formatting";
-
-import Heading from "metabase/components/type/Heading";
-import Text from "metabase/components/type/Text";
-import Subhead from "metabase/components/type/Subhead";
-
-import Props from "metabase/internal/components/Props";
-import Example from "metabase/internal/components/Example";
-import COMPONENTS from "../lib/components-webpack";
-
-const Section = ({ title, children }) => (
- <div className="mb2">
- {title && <Subhead>{title}</Subhead>}
- {children}
- </div>
-);
-
-function getComponentName(component) {
- return (
- (component && (component.displayName || component.name)) || "[Unknown]"
- );
-}
-function getComponentSlug(component) {
- return slugify(getComponentName(component));
-}
-
-export default class ComponentsPage extends Component {
- render() {
- const componentName = slugify(this.props.params.componentName);
- const exampleName = slugify(this.props.params.exampleName);
- return (
- <div className="wrapper wrapper--trim">
- <div>
- <div className="py4">
- {COMPONENTS.filter(
- ({ component, description, examples }) =>
- !componentName || componentName === getComponentSlug(component),
- ).map(({ component, description, examples }, index) => (
- <div
- id={getComponentSlug(component)}
- key={index}
- className="mb4 pb3 px4"
- >
- <Heading>{getComponentName(component)}</Heading>
- {description && <Text>{description}</Text>}
- {componentName === getComponentSlug(component) &&
- component.propTypes && (
- <Section title="Props">
- <Props of={component} />
- </Section>
- )}
- {examples && (
- <Section>
- {Object.entries(examples)
- .filter(
- ([name, element]) =>
- !exampleName || exampleName === slugify(name),
- )
- .map(([name, element]) => (
- <div key={name} className="my2">
- <Subhead my={1}>
- <Link
- to={`_internal/components/${getComponentSlug(
- component,
- )}/${slugify(name)}`}
- className="no-decoration"
- >
- {name}:
- </Link>
- </Subhead>
- <Example>{element}</Example>
- </div>
- ))}
- </Section>
- )}
- </div>
- ))}
- </div>
- </div>
- </div>
- );
- }
-}
diff --git a/frontend/src/metabase/internal/pages/IconsPage.jsx b/frontend/src/metabase/internal/pages/IconsPage.jsx
deleted file mode 100644
index ae56828f445..00000000000
--- a/frontend/src/metabase/internal/pages/IconsPage.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { Component } from "react";
-
-import Heading from "metabase/components/type/Heading";
-import Icon from "metabase/components/Icon";
-
-const SIZES = [12, 16];
-
-export default class IconsPage extends Component {
- state = {
- size: 32,
- search: "",
- };
- render() {
- const { size, searchText } = this.state;
- const sizes = SIZES.concat(size);
- return (
- <div className="wrapper wrapper--trim pt4">
- <Heading>Icons</Heading>
- <table className="Table" style={{ width: "inherit" }}>
- <thead>
- <tr>
- <th>
- <input
- placeholder="Name"
- value={searchText}
- onChange={e => this.setState({ searchText: e.target.value })}
- />
- </th>
- {sizes.map((size, index) => (
- <th key={index}>
- <div>{size}px</div>
- {index === SIZES.length && (
- <input
- style={{ width: 60 }}
- type="range"
- value={size}
- max={64}
- onChange={e => this.setState({ size: e.target.value })}
- />
- )}
- </th>
- ))}
- </tr>
- </thead>
- <tbody>
- {Object.keys(require("metabase/icon_paths").ICON_PATHS)
- .filter(name => !searchText || name.indexOf(searchText) >= 0)
- .map(name => (
- <tr key={name}>
- <td>{name}</td>
- {sizes.map((size, index) => (
- <td key={index}>
- <Icon name={name} size={size} />
- </td>
- ))}
- </tr>
- ))}
- </tbody>
- </table>
- </div>
- );
- }
-}
diff --git a/frontend/src/metabase/internal/pages/ModalsPage.jsx b/frontend/src/metabase/internal/pages/ModalsPage.jsx
deleted file mode 100644
index 2228bda3219..00000000000
--- a/frontend/src/metabase/internal/pages/ModalsPage.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from "react";
-
-import ConfirmContent from "metabase/components/ConfirmContent";
-import ModalContent from "metabase/components/ModalContent";
-import DeleteModalWithConfirm from "metabase/components/DeleteModalWithConfirm";
-import { PageHeader, PageSection } from "./ModalsPage.styled";
-
-const Section = ({ children }) => (
- <PageSection className="bordered shadowed rounded">{children}</PageSection>
-);
-
-const ModalsPage = () => (
- <div className="wrapper">
- <PageHeader>
- <h1>Modal Content examples</h1>
- </PageHeader>
- <h3>Modal Content</h3>
- <p>Basic modal content. Build off of this for other modals.</p>
- <Section>
- <ModalContent
- title="Some modal stuff"
- onClose={() => alert("Close")}
- onAction={() => alert("Action!")}
- >
- Stuff here?
- </ModalContent>
- </Section>
- <h3>Confirm Content</h3>
- <p>Use when asking someone to confirm a destructive action</p>
- <Section>
- <ConfirmContent title="Delete this for sure?" />
- </Section>
-
- <h3>Delete Modal with confirm</h3>
- <p>
- If you need someone to Use when asking someone to confirm a destructive
- action
- </p>
- <Section>
- <DeleteModalWithConfirm
- title={"This will be deleted"}
- confirmItems={[
- <span key="0">
- This will happen, please be sure you know about it
- </span>,
- ]}
- />
- </Section>
- </div>
-);
-
-export default ModalsPage;
diff --git a/frontend/src/metabase/internal/pages/ModalsPage.styled.tsx b/frontend/src/metabase/internal/pages/ModalsPage.styled.tsx
deleted file mode 100644
index d38034fdc4f..00000000000
--- a/frontend/src/metabase/internal/pages/ModalsPage.styled.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from "@emotion/styled";
-
-export const PageHeader = styled.div`
- margin: 2rem 0;
-`;
-
-export const PageSection = styled.div`
- margin: 2rem 0;
- width: 32.5rem;
-`;
diff --git a/frontend/src/metabase/internal/pages/StaticVizPage.jsx b/frontend/src/metabase/internal/pages/StaticVizPage.jsx
deleted file mode 100644
index 68a09d19948..00000000000
--- a/frontend/src/metabase/internal/pages/StaticVizPage.jsx
+++ /dev/null
@@ -1,274 +0,0 @@
-import React, { useState } from "react";
-import Heading from "metabase/components/type/Heading";
-import Subhead from "metabase/components/type/Subhead";
-import Text from "metabase/components/type/Text";
-import {
- STATIC_CHART_TYPES,
- STATIC_CHART_DEFAULT_OPTIONS,
-} from "metabase/static-viz/containers/StaticChart/constants";
-import StaticChart from "metabase/static-viz/containers/StaticChart";
-import { GAUGE_CHART_TYPE } from "metabase/static-viz/components/Gauge/constants";
-import {
- GAUGE_CHART_DEFAULT_OPTIONS,
- GAUGE_CHART_WITH_COLUMN_SETTINGS_OPTIONS,
-} from "metabase/static-viz/components/Gauge/constants.dev";
-import {
- CATEGORICAL_DONUT_CHART_DEFAULT_OPTIONS,
- CATEGORICAL_DONUT_CHART_TYPE,
-} from "../../static-viz/components/CategoricalDonutChart/constants";
-import {
- PROGRESS_BAR_DEFAULT_DATA_1,
- PROGRESS_BAR_DEFAULT_DATA_2,
- PROGRESS_BAR_DEFAULT_DATA_3,
- PROGRESS_BAR_DEFAULT_DATA_4,
- PROGRESS_BAR_TYPE,
-} from "../../static-viz/components/ProgressBar/constants";
-import {
- TIME_SERIES_WATERFALL_CHART_DEFAULT_OPTIONS,
- CATEGORICAL_WATERFALL_CHART_DEFAULT_OPTIONS,
- WATERFALL_CHART_TYPE,
-} from "../../static-viz/components/WaterfallChart/constants";
-import {
- FUNNEL_CHART_DEFAULT_OPTIONS,
- FUNNEL_CHART_TYPE,
-} from "../../static-viz/components/FunnelChart/constants";
-import {
- LINE_AREA_BAR_CHART_TYPE,
- LINE_AREA_BAR_DEFAULT_OPTIONS_1,
- LINE_AREA_BAR_DEFAULT_OPTIONS_2,
- LINE_AREA_BAR_DEFAULT_OPTIONS_3,
- LINE_AREA_BAR_DEFAULT_OPTIONS_4,
- LINE_AREA_BAR_DEFAULT_OPTIONS_5,
- LINE_AREA_BAR_DEFAULT_OPTIONS_6,
- LINE_AREA_BAR_DEFAULT_OPTIONS_7,
-} from "../../static-viz/components/LineAreaBarChart/constants";
-import { PageRoot, PageSection } from "./StaticVizPage.styled";
-
-function chartOptionsToStr(options) {
- if (typeof options === "object") {
- return JSON.stringify(options, null, 2);
- }
- return String(options);
-}
-
-export default function StaticVizPage() {
- const [staticChartType, setStaticChartType] = useState(null);
- const [staticChartCustomOptions, setStaticChartCustomOptions] =
- useState(null);
- const [staticChartError, setStaticChartError] = useState(null);
-
- function chartOptionsToObj(optionsStr) {
- try {
- const chartOptions = JSON.parse(optionsStr);
- setStaticChartError(null);
- return chartOptions;
- } catch (err) {
- console.error(err);
- setStaticChartError(err.toString());
- }
- return optionsStr;
- }
-
- return (
- <PageRoot>
- <div className="wrapper wrapper--trim">
- <Heading>Static Visualisations</Heading>
- <Text>
- These visualizations are used in dashboard subscriptions. They have no
- interactivity and get generated by the backend to be sent to Slack or
- in emails. You can use this playground to work on the source code in
- /static-viz/ and see the effects. You might need to hard refresh to
- see updates.
- </Text>
-
- <PageSection>
- <Subhead>Chart tester</Subhead>
-
- <select
- className="w-full mt1"
- onChange={e => {
- const index = parseInt(e.target.value);
- setStaticChartType(STATIC_CHART_TYPES[index]);
- setStaticChartCustomOptions({
- ...STATIC_CHART_DEFAULT_OPTIONS[index],
- });
- }}
- >
- <option id="">---</option>
- {STATIC_CHART_TYPES.map((chartType, chartTypeIndex) => {
- if (chartType === WATERFALL_CHART_TYPE) {
- return (
- <option key={chartTypeIndex} value={chartTypeIndex}>
- waterfall (
- {chartTypeIndex === 1 ? "categorical" : "timeseries"})
- </option>
- );
- }
- return (
- <option key={chartType} value={chartTypeIndex}>
- {chartType}
- </option>
- );
- })}
- </select>
-
- {(staticChartCustomOptions ||
- typeof staticChartCustomOptions === "string") && (
- <textarea
- className="w-full mt1"
- value={chartOptionsToStr(staticChartCustomOptions)}
- onChange={e => {
- const chartOptionsStr = e.target.value;
- if (chartOptionsStr.length > 0) {
- setStaticChartCustomOptions(
- chartOptionsToObj(chartOptionsStr),
- );
- } else {
- setStaticChartCustomOptions(chartOptionsStr);
- }
- }}
- />
- )}
-
- {staticChartError && (
- <p className="text-bold text-error mt1 mb0">{staticChartError}</p>
- )}
-
- {!staticChartError && staticChartType && staticChartCustomOptions && (
- <div className="text-code-plain w-full mt1">
- <StaticChart
- type={staticChartType}
- options={{ ...staticChartCustomOptions }}
- />
- </div>
- )}
- </PageSection>
- <PageSection>
- <Subhead>Donut chart with categorical data</Subhead>
- <StaticChart
- type={CATEGORICAL_DONUT_CHART_TYPE}
- options={CATEGORICAL_DONUT_CHART_DEFAULT_OPTIONS}
- />
- </PageSection>
- <PageSection>
- <Subhead>Gauge</Subhead>
- <StaticChart
- type={GAUGE_CHART_TYPE}
- options={GAUGE_CHART_DEFAULT_OPTIONS}
- />
- </PageSection>
- <PageSection>
- <Subhead>Gauge with column settings</Subhead>
- <StaticChart
- type={GAUGE_CHART_TYPE}
- options={GAUGE_CHART_WITH_COLUMN_SETTINGS_OPTIONS}
- />
- </PageSection>
- <PageSection>
- <Subhead>Progress bar</Subhead>
- <StaticChart
- type={PROGRESS_BAR_TYPE}
- options={PROGRESS_BAR_DEFAULT_DATA_1}
- />
- <StaticChart
- type={PROGRESS_BAR_TYPE}
- options={PROGRESS_BAR_DEFAULT_DATA_2}
- />
- <StaticChart
- type={PROGRESS_BAR_TYPE}
- options={PROGRESS_BAR_DEFAULT_DATA_3}
- />
- <StaticChart
- type={PROGRESS_BAR_TYPE}
- options={PROGRESS_BAR_DEFAULT_DATA_4}
- />
- </PageSection>
- <PageSection>
- <Subhead>Waterfall chart with timeseries data and no total</Subhead>
- <StaticChart
- type={WATERFALL_CHART_TYPE}
- options={TIME_SERIES_WATERFALL_CHART_DEFAULT_OPTIONS}
- />
- </PageSection>
- <PageSection>
- <Subhead>
- Waterfall chart with categorical data and total (rotated X-axis tick
- labels)
- </Subhead>
- <StaticChart
- type={WATERFALL_CHART_TYPE}
- options={CATEGORICAL_WATERFALL_CHART_DEFAULT_OPTIONS}
- />
- </PageSection>
- <PageSection>
- <Subhead>Line/Area/Bar chart with multiple series</Subhead>
- <StaticChart
- type={LINE_AREA_BAR_CHART_TYPE}
- options={LINE_AREA_BAR_DEFAULT_OPTIONS_1}
- />
- </PageSection>
-
- <PageSection>
- <Subhead>
- Line/Area/Bar chart with negative values, different X ranges, and
- right Y-axis
- </Subhead>
- <StaticChart
- type={LINE_AREA_BAR_CHART_TYPE}
- options={LINE_AREA_BAR_DEFAULT_OPTIONS_2}
- />
- </PageSection>
-
- <PageSection>
- <Subhead>
- Combo chart with ordinal X-axis and more than 10 ticks
- </Subhead>
- <StaticChart
- type={LINE_AREA_BAR_CHART_TYPE}
- options={LINE_AREA_BAR_DEFAULT_OPTIONS_3}
- />
- </PageSection>
-
- <PageSection>
- <Subhead>Stacked area chart</Subhead>
- <StaticChart
- type={LINE_AREA_BAR_CHART_TYPE}
- options={LINE_AREA_BAR_DEFAULT_OPTIONS_4}
- />
- </PageSection>
-
- <PageSection>
- <Subhead>Ordinal chart with 48 items</Subhead>
- <StaticChart
- type={LINE_AREA_BAR_CHART_TYPE}
- options={LINE_AREA_BAR_DEFAULT_OPTIONS_5}
- />
- </PageSection>
-
- <PageSection>
- <Subhead>Ordinal chart with 200 items</Subhead>
- <StaticChart
- type={LINE_AREA_BAR_CHART_TYPE}
- options={LINE_AREA_BAR_DEFAULT_OPTIONS_6}
- />
- </PageSection>
-
- <PageSection>
- <Subhead>Ordinal chart with 20 items</Subhead>
- <StaticChart
- type={LINE_AREA_BAR_CHART_TYPE}
- options={LINE_AREA_BAR_DEFAULT_OPTIONS_7}
- />
- </PageSection>
-
- <PageSection>
- <Subhead>Funnel</Subhead>
- <StaticChart
- type={FUNNEL_CHART_TYPE}
- options={FUNNEL_CHART_DEFAULT_OPTIONS}
- />
- </PageSection>
- </div>
- </PageRoot>
- );
-}
diff --git a/frontend/src/metabase/internal/pages/StaticVizPage.styled.tsx b/frontend/src/metabase/internal/pages/StaticVizPage.styled.tsx
deleted file mode 100644
index f64670f3f0d..00000000000
--- a/frontend/src/metabase/internal/pages/StaticVizPage.styled.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import styled from "@emotion/styled";
-
-export const PageRoot = styled.div`
- padding: 4rem 0;
-`;
-
-export const PageSection = styled.div`
- padding: 2rem 0;
-`;
diff --git a/frontend/src/metabase/internal/pages/TypePage.jsx b/frontend/src/metabase/internal/pages/TypePage.jsx
deleted file mode 100644
index ea93b4f4936..00000000000
--- a/frontend/src/metabase/internal/pages/TypePage.jsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from "react";
-
-import Heading from "metabase/components/type/Heading";
-import Subhead from "metabase/components/type/Subhead";
-import Label from "metabase/components/type/Label";
-import Text from "metabase/components/type/Text";
-
-import Example from "metabase/internal/components/Example";
-import { PageSection } from "./TypePage.styled";
-
-const TypePage = () => (
- <div className="wrapper wrapper--trim">
- <Heading mt="32px">Typography</Heading>
- <Text>Components for headings and text.</Text>
- <div>
- <Subhead mt="32px" mb="32px">
- Reference
- </Subhead>
-
- <table className="Table">
- <thead>
- <tr>
- <th>Name</th>
- <th>Size</th>
- <th>Weight</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <Heading>Heading</Heading>
- </td>
- <td>
- <Heading>32px</Heading>
- </td>
- <td>
- <Heading>900</Heading>
- </td>
- </tr>
- <tr>
- <td>
- <Subhead>Subhead</Subhead>
- </td>
- <td>
- <Subhead>18px</Subhead>
- </td>
- <td>
- <Subhead>700</Subhead>
- </td>
- </tr>
- <tr>
- <td>
- <Label>Label</Label>
- </td>
- <td>
- <Label>14px</Label>
- </td>
- <td>
- <Label>700</Label>
- </td>
- </tr>
- <tr>
- <td>
- <Text>Text</Text>
- </td>
- <td>
- <Text>14px</Text>
- </td>
- <td>
- <Text>400</Text>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- <div>
- <Subhead mt="32px" mb="32px" id="components">
- Components
- </Subhead>
- <PageSection>
- <Subhead>Heading</Subhead>
- <Text>Used for page headings, etc</Text>
-
- <Example>
- <Heading>Title o' the page</Heading>
- </Example>
- </PageSection>
- <PageSection>
- <Subhead>Subhead</Subhead>
- <Text>
- A smaller, but still noticeable heading. Good to use for section
- headings, or sidebar titles.
- </Text>
- <Example>
- <Subhead>An interesting section</Subhead>
- </Example>
- </PageSection>
- <PageSection>
- <Subhead>Label</Subhead>
- <Text>
- A UI label style type element. Good to use for most anything that
- someone will click on or that represents a label for a section orc
- </Text>
- <Example>
- <Label>This will do a thing.</Label>
- </Example>
- </PageSection>
- </div>
- </div>
-);
-
-export default TypePage;
diff --git a/frontend/src/metabase/internal/pages/TypePage.styled.tsx b/frontend/src/metabase/internal/pages/TypePage.styled.tsx
deleted file mode 100644
index cd1d1202fb8..00000000000
--- a/frontend/src/metabase/internal/pages/TypePage.styled.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import styled from "@emotion/styled";
-
-export const PageSection = styled.div`
- margin-bottom: 2rem;
-`;
diff --git a/frontend/src/metabase/internal/pages/WelcomePage.jsx b/frontend/src/metabase/internal/pages/WelcomePage.jsx
deleted file mode 100644
index 7ce3774cf42..00000000000
--- a/frontend/src/metabase/internal/pages/WelcomePage.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from "react";
-
-import Heading from "metabase/components/type/Heading";
-import Subhead from "metabase/components/type/Subhead";
-import Text from "metabase/components/type/Text";
-
-import ProgressBar from "metabase/components/ProgressBar";
-
-import { stats } from "../lib/components-webpack";
-import {
- PageBody,
- PageContent,
- PageFooter,
- PageHeader,
-} from "./WelcomePage.styled";
-
-const WelcomePage = () => {
- return (
- <div className="wrapper wrapper--trim">
- <PageHeader>
- <Heading>Metabase Style Guide</Heading>
- <Text>
- Reference and samples for how to make things the Metabase way.
- </Text>
- </PageHeader>
-
- <Subhead>Documentation progress</Subhead>
- <Text>
- Documenting our component library is an ongoing process. Here's
- what percentage of the code in <code>metabase/components</code> has some
- form of documentation so far.
- </Text>
-
- <PageBody>
- <ProgressBar percentage={stats.ratio} />
- <PageContent>
- <div>
- <Subhead>{stats.documented}</Subhead>
- <Text>Documented</Text>
- </div>
- <PageFooter>
- <Subhead>{stats.total}</Subhead>
- <Text>Total .jsx files in /components</Text>
- </PageFooter>
- </PageContent>
- </PageBody>
- </div>
- );
-};
-
-export default WelcomePage;
diff --git a/frontend/src/metabase/internal/pages/WelcomePage.styled.tsx b/frontend/src/metabase/internal/pages/WelcomePage.styled.tsx
deleted file mode 100644
index c3d6440f2e8..00000000000
--- a/frontend/src/metabase/internal/pages/WelcomePage.styled.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled from "@emotion/styled";
-
-export const PageHeader = styled.div`
- margin: 4rem 0;
-`;
-
-export const PageBody = styled.div`
- margin-top: 2rem;
-`;
-
-export const PageContent = styled.div`
- display: flex;
- align-items: center;
- margin-top: 0.5rem;
-`;
-
-export const PageFooter = styled.div`
- margin-left: auto;
- text-align: right;
-`;
diff --git a/frontend/src/metabase/internal/routes.js b/frontend/src/metabase/internal/routes.js
deleted file mode 100644
index 11933366e8a..00000000000
--- a/frontend/src/metabase/internal/routes.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { Fragment } from "react";
-import { Route, IndexRedirect } from "react-router";
-
-import { isProduction } from "metabase/env";
-
-import {
- Archived,
- GenericError,
- NotFound,
- Unauthorized,
-} from "metabase/containers/ErrorPages";
-
-// Import legacy apps - TODO - move this to a different style of documentation
-const req = require.context(
- "metabase/internal/components",
- true,
- /(\w+)App.jsx$/,
-);
-
-const APPS = {};
-for (const key of req.keys()) {
- const name = key.match(/(\w+)App.jsx$/)[1];
- APPS[name] = req(key).default;
-}
-
-/* Pages - In order they appear in nav */
-import WelcomePage from "metabase/internal/pages/WelcomePage";
-import TypePage from "metabase/internal/pages/TypePage";
-import IconsPage from "metabase/internal/pages/IconsPage";
-import ComponentsPage from "metabase/internal/pages/ComponentsPage";
-import ModalsPage from "metabase/internal/pages/ModalsPage";
-import StaticVizPage from "metabase/internal/pages/StaticVizPage";
-
-import { InternalLayout } from "metabase/internal/components/Layout";
-
-const ErrorWithDetails = () => <GenericError details="Example error message" />;
-
-export default (
- <>
- {!isProduction && (
- <Route component={InternalLayout}>
- <IndexRedirect to="welcome" />
- <Route path="welcome" component={WelcomePage} />
- <Route path="type" component={TypePage} />
- <Route path="icons" component={IconsPage} />
- <Route path="components/:componentName" component={ComponentsPage} />
- <Route path="modals" component={ModalsPage} />
- <Route path="static-viz" component={StaticVizPage} />
- {/* Legacy App pages - not really style guide related, but keep for now */}
- {Object.entries(APPS).map(
- ([name, Component], routeIndex) =>
- Component && (
- <Fragment key={routeIndex}>
- {Component.routes || (
- <Route path={name.toLowerCase()} component={Component} />
- )}
- </Fragment>
- ),
- )}
- <Route path="errors">
- <Route path="404" component={NotFound} />
- <Route path="archived" component={Archived} />
- <Route path="unauthorized" component={Unauthorized} />
- <Route path="generic" component={GenericError} />
- <Route path="details" component={ErrorWithDetails} />
- </Route>
- </Route>
- )}
- </>
-);
diff --git a/frontend/src/metabase/routes.jsx b/frontend/src/metabase/routes.jsx
index 9f258992e9b..5aee3dc54bd 100644
--- a/frontend/src/metabase/routes.jsx
+++ b/frontend/src/metabase/routes.jsx
@@ -367,16 +367,6 @@ export const getRoutes = store => (
</Route>
</Route>
- {/* INTERNAL */}
- <Route
- path="/_internal"
- getChildRoutes={(partialNextState, callback) =>
- require.ensure([], function (require) {
- callback(null, [require("metabase/internal/routes").default]);
- })
- }
- />
-
{/* DEPRECATED */}
{/* NOTE: these custom routes are needed because <Redirect> doesn't preserve the hash */}
<Route
diff --git a/frontend/src/metabase/search/components/SearchResult.info.js b/frontend/src/metabase/search/components/SearchResult.info.js
deleted file mode 100644
index 1ecda5888c1..00000000000
--- a/frontend/src/metabase/search/components/SearchResult.info.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from "react";
-import SearchResult from "./SearchResult";
-export const component = SearchResult;
-export const category = "search";
-
-export const description = `Displays search results w/ optional context in typeahead and on the search results page`;
-
-const DEMO_URL = "/_internal/components/searchresult";
-
-const COLLECTION_EXAMPLE = {
- model: "collection",
- id: 1,
- name: "Revenue",
- getIcon: () => ({ name: "folder" }),
- getUrl: () => DEMO_URL,
- getCollection: () => {},
- collection: {},
-};
-
-const DASHBOARD_EXAMPLE = {
- model: "dashboard",
- id: 1,
- name: "Revenue overview",
- pinned: true,
- description: "An overview of revenue",
- collection: {
- id: "root",
- name: "Our analytics",
- },
- getIcon: () => ({ name: "dashboard" }),
- getUrl: () => DEMO_URL,
- getCollection: () => COLLECTION_EXAMPLE,
-};
-
-const QUESTION_EXAMPLE = {
- model: "card",
- id: 1,
- name: "Revenue by region",
- collection: COLLECTION_EXAMPLE,
- getIcon: () => ({ name: "table" }),
- getUrl: () => DEMO_URL,
- getCollection: () => COLLECTION_EXAMPLE,
-};
-
-const LONG_TITLE_DASHBOARD_EXAMPLE = {
- ...DASHBOARD_EXAMPLE,
- name: "Long Verbosington made a very very very long dashboard name",
-};
-
-const QUESTION_CONTEXT_EXAMPLE = {
- ...QUESTION_EXAMPLE,
- name: "Poorly named item",
- context: [
- {
- match: "description",
- content: "This is actually about Revenue",
- },
- ],
-};
-
-export const examples = {
- "": (
- <ol>
- <li>
- <SearchResult result={DASHBOARD_EXAMPLE} />
- </li>
- <li>
- <SearchResult result={QUESTION_EXAMPLE} />
- </li>
- <li>
- <SearchResult result={COLLECTION_EXAMPLE} />
- </li>
- </ol>
- ),
- withContext: (
- <ol>
- <li>
- <SearchResult result={DASHBOARD_EXAMPLE} />
- </li>
- <li>
- <SearchResult result={QUESTION_CONTEXT_EXAMPLE} />
- </li>
- <li>
- <SearchResult result={COLLECTION_EXAMPLE} />
- </li>
- <li>
- <SearchResult result={LONG_TITLE_DASHBOARD_EXAMPLE} />
- </li>
- </ol>
- ),
-};
diff --git a/jest.unit.conf.json b/jest.unit.conf.json
index c09d825d7d5..ceec4c6a267 100644
--- a/jest.unit.conf.json
+++ b/jest.unit.conf.json
@@ -53,7 +53,6 @@
"/frontend/src/metabase/visualizations/lib/errors.js",
"/frontend/src/cljs/",
"/frontend/src/cljs_release/",
- "/frontend/src/metabase/internal/",
"/frontend/test/"
],
"testEnvironment": "jest-environment-jsdom",
--
GitLab