Add storybook stories for Profile components

newIDE/app/src/Profile/UsagesDetails.js

@@ -16,7 +16,6 @@ import PlaceholderLoader from '../UI/PlaceholderLoader';
 
 type Props = { usages: ?Usages };
 
-//TODO: Do a CircularProgress component that is centered?
 export default ({ usages }: Props) => (
   <Column noMargin>
     <Line>

newIDE/app/src/fixtures/GDevelopServicesTestData.js

@@ -0,0 +1,57 @@
+// @flow
+import {
+  type Usages,
+  type Subscription,
+  type Limits,
+} from '../Utils/GDevelopServices/Usage';
+
+export const usagesForIndieUser: Usages = [
+  {
+    id: '1',
+    userId: 'indie-user',
+    type: 'cordova-build',
+    createdAt: 1515084391000,
+  },
+  {
+    id: '56',
+    userId: 'indie-user',
+    type: 'cordova-build',
+    createdAt: 1515084351000,
+  },
+  {
+    id: '75',
+    userId: 'indie-user',
+    type: 'cordova-build',
+    createdAt: 1515084311000,
+  },
+];
+
+export const subscriptionForIndieUser: Subscription = {
+  planId: 'gdevelop-indie',
+  createdAt: 1515084011000,
+  updatedAt: 1515084011000,
+  userId: 'indie-user',
+};
+
+export const noSubscription: Subscription = {
+  planId: '',
+  createdAt: 1515084011000,
+  updatedAt: 1515084011000,
+  userId: 'no-subscription-user',
+};
+
+export const limitsForIndieUser: Limits = {
+  'cordova-build': {
+    current: 2,
+    max: 10,
+    limitReached: false,
+  },
+};
+
+export const limitsReached: Limits = {
+  'cordova-build': {
+    current: 10,
+    max: 10,
+    limitReached: true,
+  },
+};

newIDE/app/src/stories/index.js

@@ -52,6 +52,16 @@ import { ErrorFallbackComponent } from '../UI/ErrorBoundary';
 import { makeTestProject } from '../fixtures/TestProject';
 import CreateProfile from '../Profile/CreateProfile';
 import ProfileDetails from '../Profile/ProfileDetails';
+import LimitDisplayer from '../Profile/LimitDisplayer';
+import {
+  subscriptionForIndieUser,
+  limitsForIndieUser,
+  limitsReached,
+  noSubscription,
+  usagesForIndieUser,
+} from '../fixtures/GDevelopServicesTestData';
+import SubscriptionDetails from '../Profile/SubscriptionDetails';
+import UsagesDetails from '../Profile/UsagesDetails';
 
 const gd = global.gd;
 const {
@@ -177,10 +187,16 @@ storiesOf('LocalOnlineCordovaExport', module)
   .add('Progress (export)', () => <Progress exportStep={'export'} />)
   .add('Progress (compress)', () => <Progress exportStep={'compress'} />)
   .add('Progress (upload)', () => <Progress exportStep={'upload'} />)
-  .add('Progress (upload) (errored)', () => <Progress exportStep={'upload'} errored />)
-  .add('Progress (waiting-for-build)', () => <Progress exportStep={'waiting-for-build'} />)
+  .add('Progress (upload) (errored)', () => (
+    <Progress exportStep={'upload'} errored />
+  ))
+  .add('Progress (waiting-for-build)', () => (
+    <Progress exportStep={'waiting-for-build'} />
+  ))
   .add('Progress (build)', () => <Progress exportStep={'build'} />)
-  .add('Progress (build) (errored)', () => <Progress exportStep={'build'} errored />)
+  .add('Progress (build) (errored)', () => (
+    <Progress exportStep={'build'} errored />
+  ))
   .add('Progress (done)', () => <Progress exportStep={'done'} />);
 
 storiesOf('LocalFolderPicker', module)
@@ -482,6 +498,24 @@ storiesOf('CreateProfile', module)
   .addDecorator(muiDecorator)
   .add('default', () => <CreateProfile onLogin={action('login')} />);
 
+storiesOf('LimitDisplayer', module)
+  .addDecorator(paperDecorator)
+  .addDecorator(muiDecorator)
+  .add('default', () => (
+    <LimitDisplayer
+      subscription={subscriptionForIndieUser}
+      limit={limitsForIndieUser['cordova-build']}
+      onChangeSubscription={action('change subscription')}
+    />
+  ))
+  .add('limit reached', () => (
+    <LimitDisplayer
+      subscription={subscriptionForIndieUser}
+      limit={limitsReached['cordova-build']}
+      onChangeSubscription={action('change subscription')}
+    />
+  ));
+
 storiesOf('ProfileDetails', module)
   .addDecorator(paperDecorator)
   .addDecorator(muiDecorator)
@@ -495,3 +529,19 @@ storiesOf('ProfileDetails', module)
     />
   ))
   .add('loading', () => <ProfileDetails profile={null} />);
+
+storiesOf('SubscriptionDetails', module)
+  .addDecorator(paperDecorator)
+  .addDecorator(muiDecorator)
+  .add('default', () => (
+    <SubscriptionDetails subscription={subscriptionForIndieUser} />
+  ))
+  .add('limit reached', () => (
+    <SubscriptionDetails subscription={noSubscription} />
+  ));
+
+storiesOf('UsagesDetails', module)
+  .addDecorator(paperDecorator)
+  .addDecorator(muiDecorator)
+  .add('default', () => <UsagesDetails usages={usagesForIndieUser} />)
+  .add('empty', () => <UsagesDetails usages={[]} />);