feat(design-system): port templates

src/design-system/templates/auth-login/AuthLogin.stories.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { AuthLogin } from './AuthLogin';
+import { guild } from 'roleypoly/src/design-system/shared-types/storyData';
+
+export default {
+    title: 'Templates/Auth: Login',
+    args: {
+        botName: 'roleypoly#3266',
+    },
+};
+
+export const NoSlug = (args) => <AuthLogin {...args} />;
+
+export const WithSlug = (args) => <AuthLogin {...args} />;
+WithSlug.args = {
+    guildSlug: guild,
+};

src/design-system/templates/auth-login/AuthLogin.story.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { templateStories } from 'templates/templates.story';
-import { AuthLogin } from './AuthLogin';
-import { action } from '@storybook/addon-actions';
-import { guild } from 'roleypoly/src/design-system/shared-types/storyData';
-
-const story = templateStories('Login', module);
-
-story.add('No Slug', () => (
-    <AuthLogin botName="roleypoly#3266" onSendSecretCode={action('secret code!')} />
-));
-story.add('With Slug', () => (
-    <AuthLogin
-        botName="roleypoly#3266"
-        guildSlug={guild}
-        onSendSecretCode={action('secret code!')}
-    />
-));

src/design-system/templates/auth-login/AuthLogin.tsx

@@ -1,9 +1,6 @@
 import { Hero } from 'roleypoly/src/design-system/atoms/hero';
 import { AppShell } from 'roleypoly/src/design-system/organisms/app-shell';
-import {
+import { Preauth, PreauthProps } from 'roleypoly/src/design-system/organisms/preauth';
-    Preauth,
-    PreauthProps,
-} from 'roleypoly/src/design-system/organisms/preauth/Preauth';
 import * as React from 'react';
 
 export type AuthLoginProps = PreauthProps;

src/design-system/templates/auth-login/BUILD.bazel

@@ -0,0 +1,12 @@
+load("//hack/bazel/js:react.bzl", "react_library")
+
+package(default_visibility = ["//visibility:public"])
+
+react_library(
+    name = "auth-login",
+    deps = [
+        "//src/design-system/atoms/hero",
+        "//src/design-system/organisms/app-shell",
+        "//src/design-system/organisms/preauth",
+    ],
+)

src/design-system/templates/errors/BUILD.bazel

@@ -0,0 +1,14 @@
+load("//hack/bazel/js:react.bzl", "react_library")
+
+package(default_visibility = ["//visibility:public"])
+
+react_library(
+    name = "errors",
+    deps = [
+        "//src/design-system/atoms/dot-overlay",
+        "//src/design-system/atoms/hero",
+        "//src/design-system/molecules/error-banner",
+        "//src/design-system/organisms/app-shell",
+        "//src/design-system/shared-types",
+    ],
+)

src/design-system/templates/errors/Errors.stories.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { templateStories } from 'templates/templates.story';
+import { storiesOf } from '@storybook/react';
 import { Error } from './Errors';
 import { errorMessages } from './errorStrings';
 
-const messages = templateStories('Errors/Messages', module);
+const messages = storiesOf('Templates/Errors', module);
 
 for (let message in errorMessages) {
     messages.add(`${message}`, () => <Error code={message} />);

src/design-system/templates/errors/Errors.tsx

@@ -1,15 +1,18 @@
+import * as React from 'react';
 import { DotOverlay } from 'roleypoly/src/design-system/atoms/dot-overlay';
 import { Hero } from 'roleypoly/src/design-system/atoms/hero';
+import {
+    ErrorBanner,
+    ErrorMessage,
+} from 'roleypoly/src/design-system/molecules/error-banner';
 import { AppShell } from 'roleypoly/src/design-system/organisms/app-shell';
-import * as React from 'react';
+import { RoleypolyUser } from 'roleypoly/src/design-system/shared-types';
-import { ErrorMessage, getMessageFromCode } from './errorStrings';
+import { getMessageFromCode } from './errorStrings';
-import { ErrorBanner } from 'roleypoly/src/design-system/organisms/error-banner';
-import { RoleypolyUser } from '@roleypoly/rpc/shared';
 
 export type ErrorProps = {
     code: string | number;
     messageOverride?: ErrorMessage;
-    user?: RoleypolyUser.AsObject | null;
+    user?: RoleypolyUser | null;
 };
 
 export const Error = (props: ErrorProps) => {

src/design-system/templates/errors/errorStrings.ts

@@ -1,8 +1,4 @@
-export type ErrorMessage = {
+import { ErrorMessage } from 'roleypoly/src/design-system/molecules/error-banner';
-    english: string;
-    japanese?: string;
-    friendlyCode?: string;
-};
 
 const defaultMessage: Required<ErrorMessage> = {
     english: `Something went bad. How could this happen?`,

src/design-system/templates/help-page/BUILD.bazel

@@ -0,0 +1,12 @@
+load("//hack/bazel/js:react.bzl", "react_library")
+
+package(default_visibility = ["//visibility:public"])
+
+react_library(
+    name = "help-page",
+    deps = [
+        "//src/design-system/molecules/help-page-base",
+        "//src/design-system/organisms/app-shell",
+        "//src/design-system/shared-types",
+    ],
+)

src/design-system/templates/help-page/HelpPage.stories.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { templateStories } from 'templates/templates.story';
 import { HelpPageTemplate } from './HelpPage';
 
-const story = templateStories('Help Page', module);
+export default {
+    title: 'Templates/Help Page',
+};
 
-story.add('Base', () => (
+export const Base = () => (
     <HelpPageTemplate user={null}>
         <h1>What is the world but vibrations?</h1>
         <p>Vibrations that synchronize and tie it together, running free forever.</p>
     </HelpPageTemplate>
-));
+);

src/design-system/templates/help-page/HelpPage.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AppShell } from 'roleypoly/src/design-system/organisms/app-shell';
-import { HelpPageBase } from 'roleypoly/src/design-system/organisms/help-page-base';
+import { HelpPageBase } from 'roleypoly/src/design-system/molecules/help-page-base';
-import { RoleypolyUser } from '@roleypoly/rpc/shared';
+import { RoleypolyUser } from 'roleypoly/src/design-system/shared-types';
 
 type HelpPageProps = {
     user: RoleypolyUser.AsObject | null;

src/design-system/templates/help-page/index.ts

@@ -0,0 +1 @@
+export * from './HelpPage';

src/design-system/templates/landing/BUILD.bazel

@@ -0,0 +1,11 @@
+load("//hack/bazel/js:react.bzl", "react_library")
+
+package(default_visibility = ["//visibility:public"])
+
+react_library(
+    name = "landing",
+    deps = [
+        "//src/design-system/organisms/app-shell",
+        "//src/design-system/organisms/landing",
+    ],
+)

src/design-system/templates/landing/Landing.stories.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { LandingTemplate } from './Landing';
+
+export default {
+    title: 'Templates/Landing',
+};
+
+export const Landing = () => <LandingTemplate />;

src/design-system/templates/landing/Landing.story.tsx

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { templateStories } from 'templates/templates.story';
-import { LandingTemplate } from './Landing';
-
-const story = templateStories('Landing', module);
-
-story.add('Landing', () => <LandingTemplate />);

src/design-system/templates/role-picker/BUILD.bazel

@@ -0,0 +1,12 @@
+load("//hack/bazel/js:react.bzl", "react_library")
+
+package(default_visibility = ["//visibility:public"])
+
+react_library(
+    name = "role-picker",
+    deps = [
+        "//src/design-system/organisms/app-shell",
+        "//src/design-system/organisms/role-picker",
+        "//src/design-system/shared-types",
+    ],
+)

src/design-system/templates/role-picker/RolePicker.stories.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { templateStories } from 'templates/templates.story';
 import { RolePickerTemplate, RolePickerTemplateProps } from './RolePicker';
 import {
     guildData,
@@ -9,10 +8,6 @@ import {
     rpUser,
     guildEnum,
 } from 'roleypoly/src/design-system/shared-types/storyData';
-import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs';
-
-const story = templateStories('Role Picker', module);
 
 const props: RolePickerTemplateProps = {
     guildData: {
@@ -23,13 +18,25 @@ const props: RolePickerTemplateProps = {
     member: member,
     guild: guild,
     roles: guildRoles,
-    onSubmit: action('onSubmit'),
     editable: false,
     user: rpUser,
     guildEnumeration: guildEnum,
     activeGuildId: guild.id,
 };
 
-story.add('Role Picker', () => {
+export default {
-    return <RolePickerTemplate {...props} editable={boolean('Editable', false)} />;
+    title: 'Templates/Role Picker',
-});
+    components: RolePickerTemplate,
+    args: props,
+};
+
+export const Default = (args) => {
+    return <RolePickerTemplate {...args} />;
+};
+
+export const Editable = (args) => {
+    return <RolePickerTemplate {...args} />;
+};
+Editable.args = {
+    editable: true,
+};

src/design-system/templates/role-picker/RolePicker.tsx

@@ -4,12 +4,14 @@ import {
     RolePicker,
     RolePickerProps,
 } from 'roleypoly/src/design-system/organisms/role-picker';
-import { RoleypolyUser } from '@roleypoly/rpc/shared';
+import {
-import { GuildEnumeration } from '@roleypoly/rpc/platform';
+    GuildEnumeration,
+    RoleypolyUser,
+} from 'roleypoly/src/design-system/shared-types';
 
 export type RolePickerTemplateProps = RolePickerProps & {
-    user: RoleypolyUser.AsObject;
+    user: RoleypolyUser;
-    guildEnumeration?: GuildEnumeration.AsObject;
+    guildEnumeration?: GuildEnumeration;
     activeGuildId?: string;
 };